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

wholesale.html
+192
View File
@@ -0,0 +1,192 @@
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Wholesale supply — Ordenax</title>
<meta name="description" content="Supply stores across Saudi Arabia through Ordenax. Digital catalog, demand insights, reliable logistics and clear invoicing." />
<meta property="og:title" content="Wholesale supply — Ordenax" />
<meta property="og:description" content="Supply the stores that feed the Kingdom with Ordenax wholesale." />
<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="wholesale">
<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="wholesale.hero.eyebrow">For suppliers and distributors</p>
<h1 class="hero-title" data-i18n="wholesale.hero.title">Supply the stores that feed the Kingdom.</h1>
<div class="gold-rule hero-rule" aria-hidden="true"></div>
<p class="lede lede-light hero-lede" data-i18n="wholesale.hero.lede">A digital wholesale channel that connects your products to neighborhood stores across Saudi Arabia.</p>
<div class="hero-ctas">
<a class="btn btn-gold shimmer" href="contact.html" data-i18n="wholesale.hero.cta">Become a supplier</a>
<a class="btn btn-outline-light" href="#for-stores" data-i18n="wholesale.hero.cta2">For stores</a>
</div>
</div>
</section>
<section class="section" id="for-suppliers">
<div class="container">
<div class="section-heading">
<p class="eyebrow" data-i18n="wholesale.suppliers.eyebrow">Why suppliers partner with us</p>
<h2 data-i18n="wholesale.suppliers.title">Reach more stores with less overhead</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="wholesale.suppliers.b1.title">Ready store network</h3>
<p data-i18n="wholesale.suppliers.b1.body">Access hundreds of active grocery stores already ordering through Ordenax.</p>
</article>
<article class="card reveal" data-animate="card">
<div class="card-icon" aria-hidden="true">📊</div>
<h3 data-i18n="wholesale.suppliers.b2.title">Demand insights</h3>
<p data-i18n="wholesale.suppliers.b2.body">See what stores are buying, when they restock, and which products move fastest.</p>
</article>
<article class="card reveal" data-animate="card">
<div class="card-icon" aria-hidden="true">🚚</div>
<h3 data-i18n="wholesale.suppliers.b3.title">Reliable logistics</h3>
<p data-i18n="wholesale.suppliers.b3.body">Coordinate deliveries through your own fleet or our trusted logistics partners.</p>
</article>
<article class="card reveal" data-animate="card">
<div class="card-icon" aria-hidden="true">📄</div>
<h3 data-i18n="wholesale.suppliers.b4.title">Clear invoices</h3>
<p data-i18n="wholesale.suppliers.b4.body">Every order generates an invoice with correct VAT breakdown and payment status.</p>
</article>
<article class="card reveal" data-animate="card">
<div class="card-icon" aria-hidden="true">🛒</div>
<h3 data-i18n="wholesale.suppliers.b5.title">Digital catalog</h3>
<p data-i18n="wholesale.suppliers.b5.body">Publish SKUs, photos and prices once. Stores see updates in real time.</p>
</article>
<article class="card reveal" data-animate="card">
<div class="card-icon" aria-hidden="true">🤝</div>
<h3 data-i18n="wholesale.suppliers.b6.title">Local support</h3>
<p data-i18n="wholesale.suppliers.b6.body">Work with a Saudi-based team that understands retail, seasons and supply cycles.</p>
</article>
</div>
</div>
</section>
<section class="section section-sand" id="for-stores">
<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="wholesale.stores.eyebrow">For stores</p>
<h2 data-i18n="wholesale.stores.title">Restock without the runaround</h2>
<div class="gold-rule" aria-hidden="true"></div>
</div>
<p class="lede" data-i18n="wholesale.stores.lede">Find what you need, compare suppliers, and keep your shelves full — all from one screen.</p>
<ul class="check-list">
<li data-i18n="wholesale.stores.f1">Wide catalog of groceries, household and chilled goods</li>
<li data-i18n="wholesale.stores.f2">Competitive wholesale prices updated daily</li>
<li data-i18n="wholesale.stores.f3">Predictable delivery windows you can plan around</li>
<li data-i18n="wholesale.stores.f4">One invoice per order with clear VAT</li>
</ul>
<a class="btn btn-primary" href="stores.html" data-i18n="wholesale.stores.cta">See store plans</a>
</div>
<div class="panel reveal" data-animate="fade">
<div class="panel-card">
<p class="panel-eyebrow" data-i18n="wholesale.stores.panel.eyebrow">How wholesale works</p>
<p class="panel-line"><span data-i18n="wholesale.stores.panel.l1">Browse catalog</span><strong data-i18n="wholesale.stores.panel.v1">1</strong></p>
<p class="panel-line"><span data-i18n="wholesale.stores.panel.l2">Place order</span><strong data-i18n="wholesale.stores.panel.v2">2</strong></p>
<p class="panel-line"><span data-i18n="wholesale.stores.panel.l3">Receive delivery</span><strong data-i18n="wholesale.stores.panel.v3">3</strong></p>
<p class="panel-line"><span data-i18n="wholesale.stores.panel.l4">Pay invoice</span><strong data-i18n="wholesale.stores.panel.v4">4</strong></p>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container narrow">
<h2 class="centered" data-i18n="wholesale.faq.title">Wholesale 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="wholesale.faq.q1">Who can become a supplier?</summary>
<p data-i18n="wholesale.faq.a1">Licensed distributors, manufacturers and importers of food, beverages, household or personal-care products in Saudi Arabia.</p>
</details>
<details class="faq-item reveal" data-animate="card">
<summary data-i18n="wholesale.faq.q2">How do stores pay?</summary>
<p data-i18n="wholesale.faq.a2">Stores pay against the supplier's invoice through agreed payment terms — bank transfer, credit or cash on delivery.</p>
</details>
<details class="faq-item reveal" data-animate="card">
<summary data-i18n="wholesale.faq.q3">Do I need to list my whole catalog?</summary>
<p data-i18n="wholesale.faq.a3">No. Start with your best-moving items and expand as you see demand from the network.</p>
</details>
</div>
</div>
</section>
<section class="cta-band">
<div class="container cta-inner reveal" data-animate="fade">
<h2 data-i18n="wholesale.cta.title">Grow your wholesale reach</h2>
<p class="lede lede-light" data-i18n="wholesale.cta.lede">Talk to our partnerships team and see how Ordenax fits your distribution business.</p>
<a class="btn btn-gold shimmer" href="contact.html" data-i18n="wholesale.cta.button">Talk to sales</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>