Aiman/ordenax-landing
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ordenax landing website — initial release

Browse Source
This commit is contained in:
Ordenax Lead Engineer committed 2026-10-20 01:28:20 +03:00
commit f59f8503eb
10 files changed
+2469
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

shoppers.html
+189
View File
@@ -0,0 +1,189 @@
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>For shoppers — Ordenax</title>
<meta name="description" content="Order groceries from local stores on Ordenax. Same-day delivery, real stock, bilingual Arabic/English support." />
<meta property="og:title" content="For shoppers — Ordenax" />
<meta property="og:description" content="Your neighborhood grocery store, now in your pocket." />
<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="shoppers">
<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="shoppers.hero.eyebrow">For shoppers</p>
<h1 class="hero-title" data-i18n="shoppers.hero.title">Your neighborhood store, now in your pocket.</h1>
<div class="gold-rule hero-rule" aria-hidden="true"></div>
<p class="lede lede-light hero-lede" data-i18n="shoppers.hero.lede">Order fresh groceries from trusted local stores and get same-day delivery — in Arabic or English.</p>
<div class="hero-ctas">
<a class="btn btn-gold shimmer" href="contact.html" data-i18n="shoppers.hero.cta">Download the app</a>
<a class="btn btn-outline-light" href="#benefits" data-i18n="common.seeHow">See how it works</a>
</div>
</div>
</section>
<section class="section" id="benefits">
<div class="container">
<div class="section-heading">
<p class="eyebrow" data-i18n="shoppers.benefits.eyebrow">Why shop on Ordenax</p>
<h2 data-i18n="shoppers.benefits.title">Fresh, fast and familiar</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="shoppers.benefits.b1.title">Same-day delivery</h3>
<p data-i18n="shoppers.benefits.b1.body">Get your groceries in as little as 25 minutes from stores you already know.</p>
</article>
<article class="card reveal" data-animate="card">
<div class="card-icon" aria-hidden="true">✓</div>
<h3 data-i18n="shoppers.benefits.b2.title">Real stock</h3>
<p data-i18n="shoppers.benefits.b2.body">If it's on the app, it's on the shelf — no more canceled items after checkout.</p>
</article>
<article class="card reveal" data-animate="card">
<div class="card-icon" aria-hidden="true">🌙</div>
<h3 data-i18n="shoppers.benefits.b3.title">Bilingual by design</h3>
<p data-i18n="shoppers.benefits.b3.body">Switch between Arabic and English anytime. Product names, search and checkout follow you.</p>
</article>
<article class="card reveal" data-animate="card">
<div class="card-icon" aria-hidden="true">🤝</div>
<h3 data-i18n="shoppers.benefits.b4.title">Support local</h3>
<p data-i18n="shoppers.benefits.b4.body">Every order goes directly to a store in your community — your money stays in the neighborhood.</p>
</article>
<article class="card reveal" data-animate="card">
<div class="card-icon" aria-hidden="true">🔄</div>
<h3 data-i18n="shoppers.benefits.b5.title">Easy reorder</h3>
<p data-i18n="shoppers.benefits.b5.body">Repeat your weekly list in one tap. Save favorites and scheduled baskets for busy days.</p>
</article>
<article class="card reveal" data-animate="card">
<div class="card-icon" aria-hidden="true">🔒</div>
<h3 data-i18n="shoppers.benefits.b6.title">Pay with confidence</h3>
<p data-i18n="shoppers.benefits.b6.body">Choose cash on delivery or trusted local payment options. The store handles your payment directly.</p>
</article>
</div>
</div>
</section>
<section class="section section-sand">
<div class="container split">
<div class="reveal" data-animate="fade">
<div class="section-heading" style="text-align: start; margin-inline: 0;">
<p class="eyebrow" data-i18n="shoppers.categories.eyebrow">Everything you need</p>
<h2 data-i18n="shoppers.categories.title">From pantry to produce</h2>
<div class="gold-rule" aria-hidden="true"></div>
</div>
<p class="lede" data-i18n="shoppers.categories.lede">Browse thousands of products across the categories your family uses every day.</p>
<ul class="category-list">
<li data-i18n="shoppers.categories.l1">Fresh fruit and vegetables</li>
<li data-i18n="shoppers.categories.l2">Dairy, eggs and chilled goods</li>
<li data-i18n="shoppers.categories.l3">Rice, oil, spices and staples</li>
<li data-i18n="shoppers.categories.l4">Household and personal care</li>
<li data-i18n="shoppers.categories.l5">Beverages, snacks and bakery</li>
</ul>
</div>
<div class="category-visual reveal" data-animate="fade">
<div class="visual-card visual-card-1">🥦</div>
<div class="visual-card visual-card-2">🍞</div>
<div class="visual-card visual-card-3">🥛</div>
<div class="visual-card visual-card-4">🧴</div>
</div>
</div>
</section>
<section class="section">
<div class="container narrow">
<h2 class="centered" data-i18n="shoppers.faq.title">Common questions</h2>
<div class="gold-rule centered-rule" aria-hidden="true"></div>
<div class="faq">
<details class="faq-item reveal" data-animate="card">
<summary data-i18n="shoppers.faq.q1">Who delivers my order?</summary>
<p data-i18n="shoppers.faq.a1">Your chosen store prepares the order and a local delivery partner brings it to you. You can track the status in the app.</p>
</details>
<details class="faq-item reveal" data-animate="card">
<summary data-i18n="shoppers.faq.q2">Can I pay with cash?</summary>
<p data-i18n="shoppers.faq.a2">Yes. The store collects your payment directly — cash on delivery or local digital payments, whichever you prefer.</p>
</details>
<details class="faq-item reveal" data-animate="card">
<summary data-i18n="shoppers.faq.q3">What if an item is out of stock?</summary>
<p data-i18n="shoppers.faq.a3">Stores update availability in real time. If something changes, they will contact you to suggest a replacement or refund.</p>
</details>
</div>
</div>
</section>
<section class="cta-band">
<div class="container cta-inner reveal" data-animate="fade">
<h2 data-i18n="shoppers.cta.title">Your first order is waiting</h2>
<p class="lede lede-light" data-i18n="shoppers.cta.lede">Download the app and shop the stores you already trust.</p>
<a class="btn btn-gold shimmer" href="contact.html" data-i18n="shoppers.cta.button">Get the app</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>