Ordenax landing website — initial release
This commit is contained in:
Ordenax Lead Engineer committed
commit
f59f8503eb
10 files changed
+2469
No files matched your search
+213
@@ -0,0 +1,213 @@
|
||||
<!doctype html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>For stores — Ordenax</title>
|
||||
<meta name="description" content="Grow your grocery store with Ordenax. More orders, simple point-of-sale, direct payments, and wholesale restocking — bilingual for Saudi Arabia." />
|
||||
<meta property="og:title" content="For stores — Ordenax" />
|
||||
<meta property="og:description" content="Turn your counter into a modern grocery business with Ordenax." />
|
||||
<meta property="og:type" content="website" />
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%230F3D2C'/%3E%3Ccircle cx='32' cy='32' r='29' fill='none' stroke='%23C6A15B' stroke-width='1.5'/%3E%3Ctext x='32' y='42' font-family='Georgia,serif' font-size='30' fill='%23C6A15B' text-anchor='middle'%3EO%3C/text%3E%3C/svg%3E" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Almarai:wght@400;700;800&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body data-page="stores">
|
||||
<header class="site-header" data-animate="nav">
|
||||
<div class="container header-inner">
|
||||
<a class="brand" href="index.html" aria-label="Ordenax home">
|
||||
<span class="logo-disc" aria-hidden="true">O</span>
|
||||
<span class="wordmark">ORDENAX</span>
|
||||
</a>
|
||||
<nav class="nav" aria-label="Primary">
|
||||
<a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
|
||||
<a href="stores.html" data-i18n="nav.stores">Stores</a>
|
||||
<a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
|
||||
<a href="contact.html" data-i18n="nav.contact">Contact</a>
|
||||
</nav>
|
||||
<div class="header-actions">
|
||||
<button id="lang-toggle" class="lang-toggle" type="button" aria-label="Switch language">العربية</button>
|
||||
<a class="btn btn-primary btn-sm" href="contact.html" data-i18n="nav.cta">Get started</a>
|
||||
<button class="menu-toggle" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-nav">☰</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div id="mobile-nav" class="mobile-nav" aria-hidden="true">
|
||||
<nav aria-label="Mobile">
|
||||
<a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
|
||||
<a href="stores.html" data-i18n="nav.stores">Stores</a>
|
||||
<a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
|
||||
<a href="contact.html" data-i18n="nav.contact">Contact</a>
|
||||
<a class="btn btn-primary" href="contact.html" data-i18n="nav.cta">Get started</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<section class="hero hero-small">
|
||||
<div class="hero-glow" aria-hidden="true"></div>
|
||||
<div class="container hero-inner">
|
||||
<p class="eyebrow eyebrow-light hero-eyebrow" data-i18n="stores.hero.eyebrow">For store owners</p>
|
||||
<h1 class="hero-title" data-i18n="stores.hero.title">Turn your counter into a modern grocery business.</h1>
|
||||
<div class="gold-rule hero-rule" aria-hidden="true"></div>
|
||||
<p class="lede lede-light hero-lede" data-i18n="stores.hero.lede">Get more orders, simplify daily work, and keep every payment in your own hands.</p>
|
||||
<div class="hero-ctas">
|
||||
<a class="btn btn-gold shimmer" href="contact.html" data-i18n="stores.hero.cta">Request a demo</a>
|
||||
<a class="btn btn-outline-light" href="#pricing" data-i18n="common.seePricing">See pricing</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow" data-i18n="stores.benefits.eyebrow">Why stores choose Ordenax</p>
|
||||
<h2 data-i18n="stores.benefits.title">Everything you need to grow</h2>
|
||||
<div class="gold-rule" aria-hidden="true"></div>
|
||||
</div>
|
||||
<div class="grid grid-3">
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">📈</div>
|
||||
<h3 data-i18n="stores.benefits.b1.title">More orders</h3>
|
||||
<p data-i18n="stores.benefits.b1.body">Reach nearby shoppers through the app and turn your store into a local online brand.</p>
|
||||
</article>
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">💰</div>
|
||||
<h3 data-i18n="stores.benefits.b2.title">Your money, your account</h3>
|
||||
<p data-i18n="stores.benefits.b2.body">You collect customer payments directly. We never hold your funds or take a slice of every sale.</p>
|
||||
</article>
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">🖥️</div>
|
||||
<h3 data-i18n="stores.benefits.b3.title">One simple screen</h3>
|
||||
<p data-i18n="stores.benefits.b3.body">Counter sales and app orders flow into one place — no switching between apps and notebooks.</p>
|
||||
</article>
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">🌐</div>
|
||||
<h3 data-i18n="stores.benefits.b4.title">Works without internet</h3>
|
||||
<p data-i18n="stores.benefits.b4.body">Keep ringing sales even when the connection drops. Everything syncs automatically once you're back online.</p>
|
||||
</article>
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">🗣️</div>
|
||||
<h3 data-i18n="stores.benefits.b5.title">Bilingual for your team</h3>
|
||||
<p data-i18n="stores.benefits.b5.body">Your staff can use Arabic or English — labels, receipts, and reports switch instantly.</p>
|
||||
</article>
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">📦</div>
|
||||
<h3 data-i18n="stores.benefits.b6.title">Restock in minutes</h3>
|
||||
<p data-i18n="stores.benefits.b6.body">Order wholesale supplies straight from the app, with clear invoices and predictable delivery.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-sand" id="pricing">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow" data-i18n="stores.pricing.eyebrow">Pricing</p>
|
||||
<h2 data-i18n="stores.pricing.title">Simple subscriptions, no hidden cuts</h2>
|
||||
<div class="gold-rule" aria-hidden="true"></div>
|
||||
<p class="lede" data-i18n="stores.pricing.lede">No marketplace commission. Just pick the POS plan that fits your store.</p>
|
||||
</div>
|
||||
<div class="grid grid-3 pricing-grid">
|
||||
<article class="pricing-card reveal" data-animate="card">
|
||||
<h3 data-i18n="stores.pricing.p1.title">Starter</h3>
|
||||
<p class="price"><span class="currency">SAR</span> 299<span class="period" data-i18n="stores.pricing.period">/month</span></p>
|
||||
<ul class="pricing-features">
|
||||
<li data-i18n="stores.pricing.p1.f1">1 store location</li>
|
||||
<li data-i18n="stores.pricing.p1.f2">Counter POS</li>
|
||||
<li data-i18n="stores.pricing.p1.f3">Basic reports</li>
|
||||
<li data-i18n="stores.pricing.p1.f4">Email support</li>
|
||||
</ul>
|
||||
<a class="btn btn-outline" href="contact.html" data-i18n="stores.pricing.cta">Choose Starter</a>
|
||||
</article>
|
||||
<article class="pricing-card pricing-featured reveal" data-animate="card">
|
||||
<span class="pricing-badge" data-i18n="stores.pricing.badge">Most popular</span>
|
||||
<h3 data-i18n="stores.pricing.p2.title">Growth</h3>
|
||||
<p class="price"><span class="currency">SAR</span> 599<span class="period" data-i18n="stores.pricing.period">/month</span></p>
|
||||
<ul class="pricing-features">
|
||||
<li data-i18n="stores.pricing.p2.f1">Up to 3 staff devices</li>
|
||||
<li data-i18n="stores.pricing.p2.f2">Counter + app orders</li>
|
||||
<li data-i18n="stores.pricing.p2.f3">Live inventory</li>
|
||||
<li data-i18n="stores.pricing.p2.f4">Priority support</li>
|
||||
</ul>
|
||||
<a class="btn btn-primary shimmer" href="contact.html" data-i18n="stores.pricing.cta">Choose Growth</a>
|
||||
</article>
|
||||
<article class="pricing-card reveal" data-animate="card">
|
||||
<h3 data-i18n="stores.pricing.p3.title">Enterprise</h3>
|
||||
<p class="price"><span class="currency">SAR</span> 999<span class="period" data-i18n="stores.pricing.period">/month</span></p>
|
||||
<ul class="pricing-features">
|
||||
<li data-i18n="stores.pricing.p3.f1">Multiple branches</li>
|
||||
<li data-i18n="stores.pricing.p3.f2">Advanced analytics</li>
|
||||
<li data-i18n="stores.pricing.p3.f3">Wholesale integrations</li>
|
||||
<li data-i18n="stores.pricing.p3.f4">Dedicated account manager</li>
|
||||
</ul>
|
||||
<a class="btn btn-outline" href="contact.html" data-i18n="stores.pricing.cta">Choose Enterprise</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow" data-i18n="stores.testimonials.eyebrow">Store stories</p>
|
||||
<h2 data-i18n="stores.testimonials.title">Built for Saudi stores</h2>
|
||||
<div class="gold-rule" aria-hidden="true"></div>
|
||||
</div>
|
||||
<div class="grid grid-3">
|
||||
<blockquote class="quote-card reveal" data-animate="card">
|
||||
<p data-i18n="stores.testimonials.t1.body">"We used to write every order by hand. Now we manage counter, app and wholesale orders in one place."</p>
|
||||
<footer>— <span data-i18n="stores.testimonials.t1.name">Khalid, Al-Andalus Market</span></footer>
|
||||
</blockquote>
|
||||
<blockquote class="quote-card reveal" data-animate="card">
|
||||
<p data-i18n="stores.testimonials.t2.body">"The bilingual interface made training our staff effortless. Sales kept flowing even during network issues."</p>
|
||||
<footer>— <span data-i18n="stores.testimonials.t2.name">Sara, Fresh Corner</span></footer>
|
||||
</blockquote>
|
||||
<blockquote class="quote-card reveal" data-animate="card">
|
||||
<p data-i18n="stores.testimonials.t3.body">"Our customers pay us directly, and the subscription is predictable. No surprises at the end of the month."</p>
|
||||
<footer>— <span data-i18n="stores.testimonials.t3.name">Omar, Daily Mart</span></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-band">
|
||||
<div class="container cta-inner reveal" data-animate="fade">
|
||||
<h2 data-i18n="stores.cta.title">Ready to upgrade your store?</h2>
|
||||
<p class="lede lede-light" data-i18n="stores.cta.lede">Book a 15-minute demo and see how Ordenax fits your counter.</p>
|
||||
<a class="btn btn-gold shimmer" href="contact.html" data-i18n="stores.cta.button">Book a demo</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container footer-inner">
|
||||
<div class="footer-brand">
|
||||
<a class="brand brand-light" href="index.html" aria-label="Ordenax home">
|
||||
<span class="logo-disc" aria-hidden="true">O</span>
|
||||
<span class="wordmark">ORDENAX</span>
|
||||
</a>
|
||||
<p data-i18n="footer.tag">Marketplace · POS · Wholesale — bilingual by construction.</p>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4 data-i18n="footer.product">Product</h4>
|
||||
<a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
|
||||
<a href="stores.html" data-i18n="nav.stores">Stores</a>
|
||||
<a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4 data-i18n="footer.company">Company</h4>
|
||||
<a href="contact.html" data-i18n="nav.contact">Contact</a>
|
||||
<a href="#" data-i18n="footer.privacy">Privacy</a>
|
||||
<a href="#" data-i18n="footer.terms">Terms</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container footer-legal">
|
||||
<p data-i18n="footer.legal">© 2026 Ordenax. Made in Saudi Arabia.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user