154 lines
8.4 KiB
HTML
154 lines
8.4 KiB
HTML
<!doctype html>
|
||
<html lang="ar" dir="rtl">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>تواصل — أورديناكس</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="تواصل — أورديناكس" />
|
||
<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" />
|
||
<script src="app.js" defer></script>
|
||
</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>
|
||
|
||
</body>
|
||
</html>
|