295 lines
17 KiB
HTML
295 lines
17 KiB
HTML
<!doctype html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Ordenax — Groceries from your local stores, delivered</title>
|
|
<meta name="description" content="Ordenax is the Saudi grocery platform that lets shoppers buy from local stores, helps stores sell smarter, and powers wholesale restocking — bilingual EN/AR." />
|
|
<meta property="og:title" content="Ordenax — Groceries from your local stores, delivered" />
|
|
<meta property="og:description" content="Shop local, run your store, and restock wholesale on one platform built for Saudi Arabia." />
|
|
<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="home">
|
|
<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-apple">
|
|
<div class="hero-glow" aria-hidden="true"></div>
|
|
<div class="container hero-inner">
|
|
<p class="eyebrow eyebrow-light hero-eyebrow" data-i18n="home.hero.eyebrow">Saudi grocery platform</p>
|
|
<h1 class="hero-title" data-i18n="home.hero.title">Groceries from your local stores, delivered.</h1>
|
|
<div class="gold-rule hero-rule" aria-hidden="true"></div>
|
|
<p class="lede lede-light hero-lede" data-i18n="home.hero.lede">
|
|
The platform that helps neighborhoods shop, sell and restock — in Arabic and English, online or off.
|
|
</p>
|
|
<div class="hero-ctas">
|
|
<a class="btn btn-gold shimmer" href="shoppers.html" data-i18n="home.hero.cta1">Start shopping</a>
|
|
<a class="btn btn-outline-light" href="stores.html" data-i18n="home.hero.cta2">Run your store</a>
|
|
</div>
|
|
<ul class="hero-badges">
|
|
<li data-i18n="home.hero.badge1">Bilingual EN / AR</li>
|
|
<li data-i18n="home.hero.badge2">Works without internet</li>
|
|
<li data-i18n="home.hero.badge3">SAR · VAT included</li>
|
|
</ul>
|
|
<div class="hero-visual parallax" data-parallax="-0.06" aria-hidden="true">
|
|
<div class="device-frame">
|
|
<div class="device-notch"></div>
|
|
<div class="device-screen">
|
|
<div class="device-card">
|
|
<div class="row"><span class="thumb">🥦</span><div style="flex:1"><div class="line medium"></div><div class="line short"></div></div></div>
|
|
<div class="row"><span class="thumb">🍞</span><div style="flex:1"><div class="line medium"></div><div class="line short"></div></div></div>
|
|
<div class="row"><span class="thumb">🥛</span><div style="flex:1"><div class="line medium"></div><div class="line short"></div></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section section-ivory" id="why">
|
|
<div class="container narrow">
|
|
<div class="section-heading">
|
|
<p class="eyebrow" data-i18n="home.why.eyebrow">Why Ordenax</p>
|
|
<h2 data-i18n="home.why.title">Grocery made simple for everyone.</h2>
|
|
<p class="lede" data-i18n="home.why.lede">We built Ordenax around one idea: your neighborhood store should be as easy to reach as a global app — and just as reliable.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="shoppers">
|
|
<div class="container">
|
|
<div class="section-heading">
|
|
<p class="eyebrow" data-i18n="home.shoppers.eyebrow">For shoppers</p>
|
|
<h2 data-i18n="home.shoppers.title">Your weekly shop, done in minutes.</h2>
|
|
<p class="lede" data-i18n="home.shoppers.lede">No more crowded aisles, sold-out shelves, or wondering when your order will arrive.</p>
|
|
</div>
|
|
<div class="grid grid-2 feature-grid">
|
|
<article class="feature-card reveal" data-animate="card">
|
|
<div class="feature-icon" aria-hidden="true">🏪</div>
|
|
<h3 data-i18n="home.shoppers.b1.title">Shop stores you already trust</h3>
|
|
<p data-i18n="home.shoppers.b1.body">Your favorite neighborhood grocer, bakery, and produce stand — all in one place.</p>
|
|
</article>
|
|
<article class="feature-card reveal" data-animate="card">
|
|
<div class="feature-icon" aria-hidden="true">⚡</div>
|
|
<h3 data-i18n="home.shoppers.b2.title">Get it fast</h3>
|
|
<p data-i18n="home.shoppers.b2.body">Same-day delivery in as little as 25 minutes, because fresh shouldn't mean waiting.</p>
|
|
</article>
|
|
<article class="feature-card reveal" data-animate="card">
|
|
<div class="feature-icon" aria-hidden="true">✓</div>
|
|
<h3 data-i18n="home.shoppers.b3.title">Never guess stock again</h3>
|
|
<p data-i18n="home.shoppers.b3.body">If it's on the app, it's on the shelf. No substitutions you didn't ask for.</p>
|
|
</article>
|
|
<article class="feature-card reveal" data-animate="card">
|
|
<div class="feature-icon" aria-hidden="true">🔄</div>
|
|
<h3 data-i18n="home.shoppers.b4.title">Reorder in one tap</h3>
|
|
<p data-i18n="home.shoppers.b4.body">Save your weekly basket and repeat it whenever life gets busy.</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section section-dark" id="owners">
|
|
<div class="container">
|
|
<div class="section-heading">
|
|
<p class="eyebrow eyebrow-light" data-i18n="home.owners.eyebrow">For store owners</p>
|
|
<h2 data-i18n="home.owners.title">Run your store, not your paperwork.</h2>
|
|
<p class="lede lede-light" data-i18n="home.owners.lede">Everything you need to sell more, stress less, and keep every riyal in your account.</p>
|
|
</div>
|
|
<div class="grid grid-2 feature-grid">
|
|
<article class="feature-card feature-card-dark reveal" data-animate="card">
|
|
<div class="feature-icon feature-icon-dark" aria-hidden="true">💰</div>
|
|
<h3 data-i18n="home.owners.b1.title">Keep every sale</h3>
|
|
<p data-i18n="home.owners.b1.body">No commission. No withheld funds. Customer payments go straight to you.</p>
|
|
</article>
|
|
<article class="feature-card feature-card-dark reveal" data-animate="card">
|
|
<div class="feature-icon feature-icon-dark" aria-hidden="true">🖥️</div>
|
|
<h3 data-i18n="home.owners.b2.title">One screen, every channel</h3>
|
|
<p data-i18n="home.owners.b2.body">Counter sales, app orders, and wholesale restocking — all flowing into one simple system.</p>
|
|
</article>
|
|
<article class="feature-card feature-card-dark reveal" data-animate="card">
|
|
<div class="feature-icon feature-icon-dark" aria-hidden="true">🌐</div>
|
|
<h3 data-i18n="home.owners.b3.title">Sell even when offline</h3>
|
|
<p data-i18n="home.owners.b3.body">The internet drops. Your sales don't. Everything syncs automatically once you're back online.</p>
|
|
</article>
|
|
<article class="feature-card feature-card-dark reveal" data-animate="card">
|
|
<div class="feature-icon feature-icon-dark" aria-hidden="true">📈</div>
|
|
<h3 data-i18n="home.owners.b4.title">Grow without the guesswork</h3>
|
|
<p data-i18n="home.owners.b4.body">Real-time inventory, clear reports, and a direct line to nearby shoppers who want what you sell.</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="marketplace">
|
|
<div class="container">
|
|
<div class="section-heading">
|
|
<p class="eyebrow" data-i18n="home.pillars.eyebrow">One platform, three wins</p>
|
|
<h2 data-i18n="home.pillars.title">Built for every side of grocery</h2>
|
|
</div>
|
|
<div class="bento bento-3">
|
|
<article class="bento-card bento-card-dark reveal" data-animate="card">
|
|
<div class="card-icon" aria-hidden="true">🛒</div>
|
|
<h3 data-i18n="home.pillars.m.title">Shop local</h3>
|
|
<p data-i18n="home.pillars.m.body">Order fresh groceries from nearby stores with same-day delivery and real stock you can trust.</p>
|
|
<a class="card-link" href="shoppers.html" data-i18n="common.learnMore">Learn more</a>
|
|
</article>
|
|
<article class="bento-card reveal" data-animate="card">
|
|
<div class="card-icon" aria-hidden="true">🧾</div>
|
|
<h3 data-i18n="home.pillars.p.title">Sell smarter</h3>
|
|
<p data-i18n="home.pillars.p.body">A simple point-of-sale that brings counter sales and online orders together, even during outages.</p>
|
|
<a class="card-link" href="stores.html" data-i18n="common.learnMore">Learn more</a>
|
|
</article>
|
|
<article class="bento-card reveal" data-animate="card">
|
|
<div class="card-icon" aria-hidden="true">📦</div>
|
|
<h3 data-i18n="home.pillars.w.title">Restock wholesale</h3>
|
|
<p data-i18n="home.pillars.w.body">Stores refill their shelves straight from suppliers, with clear invoices and no hidden inventory traps.</p>
|
|
<a class="card-link" href="wholesale.html" data-i18n="common.learnMore">Learn more</a>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section section-sand">
|
|
<div class="container">
|
|
<div class="section-heading">
|
|
<p class="eyebrow" data-i18n="home.how.eyebrow">How it works</p>
|
|
<h2 data-i18n="home.how.title">From shelf to doorstep in three steps</h2>
|
|
</div>
|
|
<ol class="steps">
|
|
<li class="step reveal" data-animate="step">
|
|
<span class="step-num">1</span>
|
|
<h3 data-i18n="home.how.s1.title">Order</h3>
|
|
<p data-i18n="home.how.s1.body">A shopper picks products from a nearby store — in English or Arabic.</p>
|
|
</li>
|
|
<li class="step reveal" data-animate="step">
|
|
<span class="step-num">2</span>
|
|
<h3 data-i18n="home.how.s2.title">Prepare</h3>
|
|
<p data-i18n="home.how.s2.body">The store receives, packs and confirms the order on the Ordenax system.</p>
|
|
</li>
|
|
<li class="step reveal" data-animate="step">
|
|
<span class="step-num">3</span>
|
|
<h3 data-i18n="home.how.s3.title">Deliver</h3>
|
|
<p data-i18n="home.how.s3.body">A delivery partner drops it at the door. The store keeps the payment directly.</p>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section stats-section">
|
|
<div class="container">
|
|
<div class="stats-grid">
|
|
<div class="stat reveal" data-animate="stat">
|
|
<span class="stat-number" data-target="500">0</span><span class="stat-suffix">+</span>
|
|
<span class="stat-label" data-i18n="home.stats.s1">partner stores</span>
|
|
</div>
|
|
<div class="stat reveal" data-animate="stat">
|
|
<span class="stat-number" data-target="120">0</span><span class="stat-suffix">k+</span>
|
|
<span class="stat-label" data-i18n="home.stats.s2">monthly orders</span>
|
|
</div>
|
|
<div class="stat reveal" data-animate="stat">
|
|
<span class="stat-number" data-target="25">0</span><span class="stat-suffix" data-i18n="home.stats.s3suffix"> min</span>
|
|
<span class="stat-label" data-i18n="home.stats.s3">average delivery</span>
|
|
</div>
|
|
<div class="stat reveal" data-animate="stat">
|
|
<span class="stat-number" data-target="2">0</span>
|
|
<span class="stat-label" data-i18n="home.stats.s4">languages</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section section-sand">
|
|
<div class="container">
|
|
<div class="section-heading">
|
|
<p class="eyebrow" data-i18n="home.testimonials.eyebrow">What partners say</p>
|
|
<h2 data-i18n="home.testimonials.title">Loved by stores, trusted by shoppers</h2>
|
|
</div>
|
|
<div class="grid grid-3">
|
|
<blockquote class="quote-card reveal" data-animate="card">
|
|
<p data-i18n="home.testimonials.t1.body">"We doubled our weekly orders within two months. The system is simple and our customers love ordering in Arabic."</p>
|
|
<footer>— <span data-i18n="home.testimonials.t1.name">Abdullah, Al-Salam Market</span></footer>
|
|
</blockquote>
|
|
<blockquote class="quote-card reveal" data-animate="card">
|
|
<p data-i18n="home.testimonials.t2.body">"I can shop from the same grocer I visit every week, but now it comes to my door. Same quality, less hassle."</p>
|
|
<footer>— <span data-i18n="home.testimonials.t2.name">Noura, Riyadh</span></footer>
|
|
</blockquote>
|
|
<blockquote class="quote-card reveal" data-animate="card">
|
|
<p data-i18n="home.testimonials.t3.body">"Restocking used to take three phone calls. Now we order once and the invoice is ready before delivery."</p>
|
|
<footer>— <span data-i18n="home.testimonials.t3.name">Fahad, Green Cart</span></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="cta-band" id="cta">
|
|
<div class="container cta-inner reveal" data-animate="fade">
|
|
<h2 data-i18n="home.cta.title">Ready to shop, sell, or supply?</h2>
|
|
<p class="lede lede-light" data-i18n="home.cta.lede">Join the grocery platform built for the Kingdom.</p>
|
|
<a class="btn btn-gold shimmer" href="contact.html" data-i18n="home.cta.button">Request 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>
|