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

contact.html
+153
View File
@@ -0,0 +1,153 @@
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Contact — Ordenax</title>
<meta name="description" content="Get in touch with Ordenax. Request a demo, become a partner store, or join our wholesale supplier network in Saudi Arabia." />
<meta property="og:title" content="Contact — Ordenax" />
<meta property="og:description" content="Let's talk grocery. Request a demo or partnership call." />
<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="contact">
<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="contact.hero.eyebrow">Contact</p>
<h1 class="hero-title" data-i18n="contact.hero.title">Let's talk grocery.</h1>
<div class="gold-rule hero-rule" aria-hidden="true"></div>
<p class="lede lede-light hero-lede" data-i18n="contact.hero.lede">Request a demo, become a partner store, or join our supplier network.</p>
</div>
</section>
<section class="section">
<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="contact.form.eyebrow">Get in touch</p>
<h2 data-i18n="contact.form.title">Send us a message</h2>
<div class="gold-rule" aria-hidden="true"></div>
</div>
<p class="lede" data-i18n="contact.form.lede">Fill in the form and our team will reply within one business day.</p>
<form class="contact-form" id="contact-form" novalidate>
<label for="name" data-i18n="contact.form.nameLabel">Name</label>
<input id="name" name="name" type="text" required data-i18n-placeholder="contact.form.namePlaceholder" placeholder="Your name" />
<label for="email" data-i18n="contact.form.emailLabel">Email</label>
<input id="email" name="email" type="email" required autocomplete="email" data-i18n-placeholder="contact.form.emailPlaceholder" placeholder="you@example.com" dir="ltr" />
<label for="phone" data-i18n="contact.form.phoneLabel">Phone</label>
<input id="phone" name="phone" type="tel" autocomplete="tel" data-i18n-placeholder="contact.form.phonePlaceholder" placeholder="+966 50 000 0000" dir="ltr" />
<label for="interest" data-i18n="contact.form.interestLabel">I'm interested in</label>
<select id="interest" name="interest" required>
<option value="" data-i18n="contact.form.interest.default">Select an option</option>
<option value="store" data-i18n="contact.form.interest.store">Running my store on Ordenax</option>
<option value="shopper" data-i18n="contact.form.interest.shopper">Shopping as a consumer</option>
<option value="supplier" data-i18n="contact.form.interest.supplier">Supplying products wholesale</option>
<option value="other" data-i18n="contact.form.interest.other">Something else</option>
</select>
<label for="message" data-i18n="contact.form.messageLabel">Message</label>
<textarea id="message" name="message" rows="4" data-i18n-placeholder="contact.form.messagePlaceholder" placeholder="Tell us about your business"></textarea>
<button class="btn btn-primary shimmer" type="submit" data-i18n="contact.form.submit">Send message</button>
<p class="form-note" id="form-note" role="status"></p>
</form>
</div>
<div class="contact-info reveal" data-animate="fade">
<div class="info-card">
<h3 data-i18n="contact.info.office.title">Headquarters</h3>
<p data-i18n="contact.info.office.body">Riyadh, Kingdom of Saudi Arabia</p>
</div>
<div class="info-card">
<h3 data-i18n="contact.info.email.title">Email</h3>
<p><a href="mailto:hello@ordenax.sa">hello@ordenax.sa</a></p>
</div>
<div class="info-card">
<h3 data-i18n="contact.info.phone.title">Phone</h3>
<p dir="ltr"><a href="tel:+966920012345">+966 9200 123 45</a></p>
</div>
<div class="info-card">
<h3 data-i18n="contact.info.hours.title">Business hours</h3>
<p data-i18n="contact.info.hours.body">Sunday to Thursday, 9:00 AM – 6:00 PM KSA</p>
</div>
</div>
</div>
</section>
<section class="cta-band">
<div class="container cta-inner reveal" data-animate="fade">
<h2 data-i18n="contact.cta.title">Prefer to talk now?</h2>
<p class="lede lede-light" data-i18n="contact.cta.lede">Call us during business hours or request a callback.</p>
<a class="btn btn-gold shimmer" href="tel:+966920012345" data-i18n="contact.cta.button">Call +966 9200 123 45</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>