From f59f8503ebf8e577830b19aa75b55d695f364517 Mon Sep 17 00:00:00 2001 From: Ordenax Lead Engineer Date: Tue, 20 Oct 2026 01:28:20 +0300 Subject: [PATCH] =?UTF-8?q?Ordenax=20landing=20website=20=E2=80=94=20initi?= =?UTF-8?q?al=20release?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 7 + Dockerfile | 3 + README.md | 40 +++ app.js | 724 +++++++++++++++++++++++++++++++++++++++++++++++++ contact.html | 153 +++++++++++ index.html | 294 ++++++++++++++++++++ shoppers.html | 189 +++++++++++++ stores.html | 213 +++++++++++++++ styles.css | 654 ++++++++++++++++++++++++++++++++++++++++++++ wholesale.html | 192 +++++++++++++ 10 files changed, 2469 insertions(+) create mode 100644 .gitignore create mode 100644 Dockerfile create mode 100644 README.md create mode 100644 app.js create mode 100644 contact.html create mode 100644 index.html create mode 100644 shoppers.html create mode 100644 stores.html create mode 100644 styles.css create mode 100644 wholesale.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..cd6320e --- /dev/null +++ b/.gitignore @@ -0,0 +1,7 @@ +# OS / editors +.DS_Store +.idea/ +.vscode/ + +# logs +*.log diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..269c891 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,3 @@ +FROM nginx:alpine +COPY . /usr/share/nginx/html +EXPOSE 80 diff --git a/README.md b/README.md new file mode 100644 index 0000000..f50cb0f --- /dev/null +++ b/README.md @@ -0,0 +1,40 @@ +# Ordenax Landing Website + +A static, bilingual (EN/AR), Apple-inspired marketing website for Ordenax — the Saudi grocery platform that connects shoppers, local stores, and wholesale suppliers. + +## Files + +| File | Purpose | +|------|---------| +| `index.html` | Homepage with hero, benefits, how it works, stats, testimonials, CTA | +| `shoppers.html` | Consumer-facing page | +| `stores.html` | Store owner page with pricing | +| `wholesale.html` | Supplier / wholesale page | +| `contact.html` | Contact form and office info | +| `styles.css` | Shared stylesheet, animations, responsive layout | +| `app.js` | Bilingual i18n, RTL switching, scroll animations, mobile nav, form validation | + +## Deploy to Coolify + +1. Push this repository to your Git provider. +2. In Coolify, create a **Static Site** resource. +3. Select this repository and the branch you want to deploy. +4. Set the **Base Directory** to `/` (root). +5. Leave **Build Command** empty. +6. Set **Publish Directory** to `/` (root). +7. Deploy. + +No build step is required. The site is pure HTML, CSS, and JavaScript. + +## Local preview + +```bash +python3 -m http.server 8080 +# open http://localhost:8080 +``` + +## Before going live + +1. Wire the contact form in `app.js` to your real form handler (it currently validates client-side and shows a success message). +2. Replace placeholder app-store / phone links with real URLs. +3. Add `og:url` and `` once the domain is known. diff --git a/app.js b/app.js new file mode 100644 index 0000000..de73e8a --- /dev/null +++ b/app.js @@ -0,0 +1,724 @@ +/* Ordenax landing — EN/AR i18n, scroll animations, mobile nav and forms. */ + +const STRINGS = { + en: { + // Nav + "nav.shoppers": "Shoppers", + "nav.stores": "Stores", + "nav.wholesale": "Wholesale", + "nav.contact": "Contact", + "nav.cta": "Get started", + + "common.learnMore": "Learn more", + "common.seeHow": "See how it works", + "common.seePricing": "See pricing", + + // Footer + "footer.tag": "Marketplace · POS · Wholesale — bilingual by construction.", + "footer.product": "Product", + "footer.company": "Company", + "footer.privacy": "Privacy", + "footer.terms": "Terms", + "footer.legal": "© 2026 Ordenax. Made in Saudi Arabia.", + + // Home + "home.hero.eyebrow": "Saudi grocery platform", + "home.hero.title": "Groceries from your local stores, delivered.", + "home.hero.lede": "Shop, sell, and restock on one platform — in Arabic and English, online or offline.", + "home.hero.cta1": "Start shopping", + "home.hero.cta2": "Run your store", + "home.hero.badge1": "Bilingual EN / AR", + "home.hero.badge2": "Works without internet", + "home.hero.badge3": "SAR · VAT included", + "home.pillars.eyebrow": "One platform, three wins", + "home.pillars.title": "Built for every side of grocery", + "home.pillars.m.title": "Shop local", + "home.pillars.m.body": "Fresh groceries from nearby stores, same-day delivery, and stock you can actually trust.", + "home.pillars.p.title": "Sell smarter", + "home.pillars.p.body": "One simple POS for counter sales, app orders, and uninterrupted selling — even when the internet drops.", + "home.pillars.w.title": "Restock wholesale", + "home.pillars.w.body": "Refill shelves straight from suppliers with clear invoices, real-time catalogs, and no inventory traps.", + "home.how.eyebrow": "How it works", + "home.how.title": "From shelf to doorstep in three steps", + "home.how.s1.title": "Order", + "home.how.s1.body": "A shopper picks products from a nearby store — in English or Arabic.", + "home.how.s2.title": "Prepare", + "home.how.s2.body": "The store receives, packs and confirms the order on the Ordenax system.", + "home.how.s3.title": "Deliver", + "home.how.s3.body": "A delivery partner drops it at the door. The store keeps the payment directly.", + "home.stats.s1": "partner stores", + "home.stats.s2": "monthly orders", + "home.stats.s3": "average delivery", + "home.stats.s3suffix": " min", + "home.stats.s4": "languages", + "home.testimonials.eyebrow": "What partners say", + "home.testimonials.title": "Loved by stores. Trusted by shoppers.", + "home.testimonials.t1.body": "\"We doubled our weekly orders within two months. The system is simple and our customers love ordering in Arabic.\"", + "home.testimonials.t1.name": "Abdullah, Al-Salam Market", + "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.\"", + "home.testimonials.t2.name": "Noura, Riyadh", + "home.testimonials.t3.body": "\"Restocking used to take three phone calls. Now we order once and the invoice is ready before delivery.\"", + "home.testimonials.t3.name": "Fahad, Green Cart", + "home.cta.title": "Ready to shop, sell, or supply?", + "home.cta.lede": "Join the grocery platform built for the Kingdom.", + "home.cta.button": "Request a demo", + + // Home — deeper content + "home.why.eyebrow": "Why Ordenax", + "home.why.title": "Grocery made simple for everyone.", + "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.", + + "home.shoppers.eyebrow": "For shoppers", + "home.shoppers.title": "Your weekly shop, done in minutes.", + "home.shoppers.lede": "No more crowded aisles, sold-out shelves, or wondering when your order will arrive.", + "home.shoppers.b1.title": "Shop stores you already trust", + "home.shoppers.b1.body": "Your favorite neighborhood grocer, bakery, and produce stand — all in one place.", + "home.shoppers.b2.title": "Get it fast", + "home.shoppers.b2.body": "Same-day delivery in as little as 25 minutes, because fresh shouldn't mean waiting.", + "home.shoppers.b3.title": "Never guess stock again", + "home.shoppers.b3.body": "If it's on the app, it's on the shelf. No substitutions you didn't ask for.", + "home.shoppers.b4.title": "Reorder in one tap", + "home.shoppers.b4.body": "Save your weekly basket and repeat it whenever life gets busy.", + + "home.owners.eyebrow": "For store owners", + "home.owners.title": "Run your store, not your paperwork.", + "home.owners.lede": "Everything you need to sell more, stress less, and keep every riyal in your account.", + "home.owners.b1.title": "Keep every sale", + "home.owners.b1.body": "No commission. No withheld funds. Customer payments go straight to you.", + "home.owners.b2.title": "One screen, every channel", + "home.owners.b2.body": "Counter sales, app orders, and wholesale restocking — all flowing into one simple system.", + "home.owners.b3.title": "Sell even when offline", + "home.owners.b3.body": "The internet drops. Your sales don't. Everything syncs automatically once you're back online.", + "home.owners.b4.title": "Grow without the guesswork", + "home.owners.b4.body": "Real-time inventory, clear reports, and a direct line to nearby shoppers who want what you sell.", + + // Shoppers + "shoppers.hero.eyebrow": "For shoppers", + "shoppers.hero.title": "Your neighborhood store, now in your pocket.", + "shoppers.hero.lede": "Order fresh groceries from trusted local stores and get same-day delivery — in Arabic or English.", + "shoppers.hero.cta": "Download the app", + "shoppers.benefits.eyebrow": "Why shop on Ordenax", + "shoppers.benefits.title": "Fresh, fast and familiar", + "shoppers.benefits.b1.title": "Same-day delivery", + "shoppers.benefits.b1.body": "Get your groceries in as little as 25 minutes from stores you already know.", + "shoppers.benefits.b2.title": "Real stock", + "shoppers.benefits.b2.body": "If it's on the app, it's on the shelf — no more canceled items after checkout.", + "shoppers.benefits.b3.title": "Bilingual by design", + "shoppers.benefits.b3.body": "Switch between Arabic and English anytime. Product names, search and checkout follow you.", + "shoppers.benefits.b4.title": "Support local", + "shoppers.benefits.b4.body": "Every order goes directly to a store in your community — your money stays in the neighborhood.", + "shoppers.benefits.b5.title": "Easy reorder", + "shoppers.benefits.b5.body": "Repeat your weekly list in one tap. Save favorites and scheduled baskets for busy days.", + "shoppers.benefits.b6.title": "Pay with confidence", + "shoppers.benefits.b6.body": "Choose cash on delivery or trusted local payment options. The store handles your payment directly.", + "shoppers.categories.eyebrow": "Everything you need", + "shoppers.categories.title": "From pantry to produce", + "shoppers.categories.lede": "Browse thousands of products across the categories your family uses every day.", + "shoppers.categories.l1": "Fresh fruit and vegetables", + "shoppers.categories.l2": "Dairy, eggs and chilled goods", + "shoppers.categories.l3": "Rice, oil, spices and staples", + "shoppers.categories.l4": "Household and personal care", + "shoppers.categories.l5": "Beverages, snacks and bakery", + "shoppers.faq.title": "Common questions", + "shoppers.faq.q1": "Who delivers my order?", + "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.", + "shoppers.faq.q2": "Can I pay with cash?", + "shoppers.faq.a2": "Yes. The store collects your payment directly — cash on delivery or local digital payments, whichever you prefer.", + "shoppers.faq.q3": "What if an item is out of stock?", + "shoppers.faq.a3": "Stores update availability in real time. If something changes, they will contact you to suggest a replacement or refund.", + "shoppers.cta.title": "Your first order is waiting", + "shoppers.cta.lede": "Download the app and shop the stores you already trust.", + "shoppers.cta.button": "Get the app", + + // Stores + "stores.hero.eyebrow": "For store owners", + "stores.hero.title": "Turn your counter into a modern grocery business.", + "stores.hero.lede": "Get more orders, simplify daily work, and keep every payment in your own hands.", + "stores.hero.cta": "Request a demo", + "stores.benefits.eyebrow": "Why stores choose Ordenax", + "stores.benefits.title": "Everything you need to grow", + "stores.benefits.b1.title": "More orders", + "stores.benefits.b1.body": "Reach nearby shoppers through the app and turn your store into a local online brand.", + "stores.benefits.b2.title": "Your money, your account", + "stores.benefits.b2.body": "You collect customer payments directly. We never hold your funds or take a slice of every sale.", + "stores.benefits.b3.title": "One simple screen", + "stores.benefits.b3.body": "Counter sales and app orders flow into one place — no switching between apps and notebooks.", + "stores.benefits.b4.title": "Works without internet", + "stores.benefits.b4.body": "Keep ringing sales even when the connection drops. Everything syncs automatically once you're back online.", + "stores.benefits.b5.title": "Bilingual for your team", + "stores.benefits.b5.body": "Your staff can use Arabic or English — labels, receipts, and reports switch instantly.", + "stores.benefits.b6.title": "Restock in minutes", + "stores.benefits.b6.body": "Order wholesale supplies straight from the app, with clear invoices and predictable delivery.", + "stores.pricing.eyebrow": "Pricing", + "stores.pricing.title": "Simple subscriptions, no hidden cuts", + "stores.pricing.lede": "No marketplace commission. Just pick the POS plan that fits your store.", + "stores.pricing.period": "/month", + "stores.pricing.badge": "Most popular", + "stores.pricing.p1.title": "Starter", + "stores.pricing.p1.f1": "1 store location", + "stores.pricing.p1.f2": "Counter POS", + "stores.pricing.p1.f3": "Basic reports", + "stores.pricing.p1.f4": "Email support", + "stores.pricing.p2.title": "Growth", + "stores.pricing.p2.f1": "Up to 3 staff devices", + "stores.pricing.p2.f2": "Counter + app orders", + "stores.pricing.p2.f3": "Live inventory", + "stores.pricing.p2.f4": "Priority support", + "stores.pricing.p3.title": "Enterprise", + "stores.pricing.p3.f1": "Multiple branches", + "stores.pricing.p3.f2": "Advanced analytics", + "stores.pricing.p3.f3": "Wholesale integrations", + "stores.pricing.p3.f4": "Dedicated account manager", + "stores.pricing.cta": "Choose plan", + "stores.testimonials.eyebrow": "Store stories", + "stores.testimonials.title": "Built for Saudi stores", + "stores.testimonials.t1.body": "\"We used to write every order by hand. Now we manage counter, app and wholesale orders in one place.\"", + "stores.testimonials.t1.name": "Khalid, Al-Andalus Market", + "stores.testimonials.t2.body": "\"The bilingual interface made training our staff effortless. Sales kept flowing even during network issues.\"", + "stores.testimonials.t2.name": "Sara, Fresh Corner", + "stores.testimonials.t3.body": "\"Our customers pay us directly, and the subscription is predictable. No surprises at the end of the month.\"", + "stores.testimonials.t3.name": "Omar, Daily Mart", + "stores.cta.title": "Ready to upgrade your store?", + "stores.cta.lede": "Book a 15-minute demo and see how Ordenax fits your counter.", + "stores.cta.button": "Book a demo", + + // Wholesale + "wholesale.hero.eyebrow": "For suppliers and distributors", + "wholesale.hero.title": "Supply the stores that feed the Kingdom.", + "wholesale.hero.lede": "A digital wholesale channel that connects your products to neighborhood stores across Saudi Arabia.", + "wholesale.hero.cta": "Become a supplier", + "wholesale.hero.cta2": "For stores", + "wholesale.suppliers.eyebrow": "Why suppliers partner with us", + "wholesale.suppliers.title": "Reach more stores with less overhead", + "wholesale.suppliers.b1.title": "Ready store network", + "wholesale.suppliers.b1.body": "Access hundreds of active grocery stores already ordering through Ordenax.", + "wholesale.suppliers.b2.title": "Demand insights", + "wholesale.suppliers.b2.body": "See what stores are buying, when they restock, and which products move fastest.", + "wholesale.suppliers.b3.title": "Reliable logistics", + "wholesale.suppliers.b3.body": "Coordinate deliveries through your own fleet or our trusted logistics partners.", + "wholesale.suppliers.b4.title": "Clear invoices", + "wholesale.suppliers.b4.body": "Every order generates an invoice with correct VAT breakdown and payment status.", + "wholesale.suppliers.b5.title": "Digital catalog", + "wholesale.suppliers.b5.body": "Publish SKUs, photos and prices once. Stores see updates in real time.", + "wholesale.suppliers.b6.title": "Local support", + "wholesale.suppliers.b6.body": "Work with a Saudi-based team that understands retail, seasons and supply cycles.", + "wholesale.stores.eyebrow": "For stores", + "wholesale.stores.title": "Restock without the runaround", + "wholesale.stores.lede": "Find what you need, compare suppliers, and keep your shelves full — all from one screen.", + "wholesale.stores.f1": "Wide catalog of groceries, household and chilled goods", + "wholesale.stores.f2": "Competitive wholesale prices updated daily", + "wholesale.stores.f3": "Predictable delivery windows you can plan around", + "wholesale.stores.f4": "One invoice per order with clear VAT", + "wholesale.stores.cta": "See store plans", + "wholesale.stores.panel.eyebrow": "How wholesale works", + "wholesale.stores.panel.l1": "Browse catalog", + "wholesale.stores.panel.v1": "1", + "wholesale.stores.panel.l2": "Place order", + "wholesale.stores.panel.v2": "2", + "wholesale.stores.panel.l3": "Receive delivery", + "wholesale.stores.panel.v3": "3", + "wholesale.stores.panel.l4": "Pay invoice", + "wholesale.stores.panel.v4": "4", + "wholesale.faq.title": "Wholesale questions", + "wholesale.faq.q1": "Who can become a supplier?", + "wholesale.faq.a1": "Licensed distributors, manufacturers and importers of food, beverages, household or personal-care products in Saudi Arabia.", + "wholesale.faq.q2": "How do stores pay?", + "wholesale.faq.a2": "Stores pay against the supplier's invoice through agreed payment terms — bank transfer, credit or cash on delivery.", + "wholesale.faq.q3": "Do I need to list my whole catalog?", + "wholesale.faq.a3": "No. Start with your best-moving items and expand as you see demand from the network.", + "wholesale.cta.title": "Grow your wholesale reach", + "wholesale.cta.lede": "Talk to our partnerships team and see how Ordenax fits your distribution business.", + "wholesale.cta.button": "Talk to sales", + + // Contact + "contact.hero.eyebrow": "Contact", + "contact.hero.title": "Let's talk grocery.", + "contact.hero.lede": "Request a demo, become a partner store, or join our supplier network.", + "contact.form.eyebrow": "Get in touch", + "contact.form.title": "Send us a message", + "contact.form.lede": "Fill in the form and our team will reply within one business day.", + "contact.form.nameLabel": "Name", + "contact.form.namePlaceholder": "Your name", + "contact.form.emailLabel": "Email", + "contact.form.emailPlaceholder": "you@example.com", + "contact.form.phoneLabel": "Phone", + "contact.form.phonePlaceholder": "+966 50 000 0000", + "contact.form.interestLabel": "I'm interested in", + "contact.form.interest.default": "Select an option", + "contact.form.interest.store": "Running my store on Ordenax", + "contact.form.interest.shopper": "Shopping as a consumer", + "contact.form.interest.supplier": "Supplying products wholesale", + "contact.form.interest.other": "Something else", + "contact.form.messageLabel": "Message", + "contact.form.messagePlaceholder": "Tell us about your business", + "contact.form.submit": "Send message", + "contact.form.success": "Thank you — we'll be in touch soon.", + "contact.form.invalidEmail": "Please enter a valid email address.", + "contact.form.required": "Please fill in all required fields.", + "contact.info.office.title": "Headquarters", + "contact.info.office.body": "Riyadh, Kingdom of Saudi Arabia", + "contact.info.email.title": "Email", + "contact.info.phone.title": "Phone", + "contact.info.hours.title": "Business hours", + "contact.info.hours.body": "Sunday to Thursday, 9:00 AM – 6:00 PM KSA", + "contact.cta.title": "Prefer to talk now?", + "contact.cta.lede": "Call us during business hours or request a callback.", + "contact.cta.button": "Call +966 9200 123 45", + }, + + ar: { + "nav.shoppers": "المتسوّقون", + "nav.stores": "المتاجر", + "nav.wholesale": "الجملة", + "nav.contact": "تواصل", + "nav.cta": "ابدأ الآن", + + "common.learnMore": "اعرف المزيد", + "common.seeHow": "كيف تعمل", + "common.seePricing": "الأسعار", + + "footer.tag": "السوق · نقاط البيع · الجملة — ثنائية اللغة من الأساس.", + "footer.product": "المنتج", + "footer.company": "الشركة", + "footer.privacy": "الخصوصية", + "footer.terms": "الشروط", + "footer.legal": "© 2026 أورديناكس. صُنع في المملكة العربية السعودية.", + + "home.hero.eyebrow": "منصة بقالة سعودية", + "home.hero.title": "بقالتك من متاجر حيّك، حتى باب البيت.", + "home.hero.lede": "تسوّق، بيع، ووردّد المخزون على منصة واحدة — بالعربية والإنجليزية، متصل أو غير متصل.", + "home.hero.cta1": "ابدأ التسوّق", + "home.hero.cta2": "أدِر متجرك", + "home.hero.badge1": "ثنائية اللغة EN / AR", + "home.hero.badge2": "تعمل دون اتصال", + "home.hero.badge3": "ريال سعودي · الضريبة مشمولة", + "home.trust.label": "ثقة متاجر الأحياء في", + "home.pillars.eyebrow": "منصة واحدة، ثلاثة مكاسب", + "home.pillars.title": "مبنية لكل جانب من البقالة", + "home.pillars.m.title": "تسوّق محليًا", + "home.pillars.m.body": "بقالة طازجة من متاجر قريبة، توصيل في نفس اليوم، ومخزون يمكنك الوثوق به فعلًا.", + "home.pillars.p.title": "بيع بذكاء", + "home.pillars.p.body": "نقطة بيع واحدة تجمع مبيعات الكاشير والطلبات الإلكترونية — تستمر حتى عند انقطاع الإنترنت.", + "home.pillars.w.title": "أعِد التخزين بالجملة", + "home.pillars.w.body": "أعِد ملء الرفوف مباشرة من المورّدين، بفواتير واضحة، كتالوجات لحظية، وبدون تعقيدات المخزون.", + "home.how.eyebrow": "كيف تعمل", + "home.how.title": "من الرف إلى باب البيت في ثلاث خطوات", + "home.how.s1.title": "اطلب", + "home.how.s1.body": "يختار المتسوّق منتجات من متجر قريب — بالعربية أو الإنجليزية.", + "home.how.s2.title": "جهّز", + "home.how.s2.body": "يتلقّى المتجر الطلب ويغلّفه ويؤكّده عبر نظام أورديناكس.", + "home.how.s3.title": "وصّل", + "home.how.s3.body": "يوصل شريك التوصيل الطلب إلى الباب، ويحتفظ المتجر بالمدفوعات مباشرة.", + "home.stats.s1": "متجر شريك", + "home.stats.s2": "طلب شهريًا", + "home.stats.s3": "متوسط التوصيل", + "home.stats.s3suffix": " دقيقة", + "home.stats.s4": "لغات", + "home.testimonials.eyebrow": "ماذا يقول الشركاء", + "home.testimonials.title": "يحبّه المتاجر. ويثق به المتسوّقون.", + "home.testimonials.t1.body": "\"ضاعفنا طلباتنا الأسبوعية في شهرين. النظام بسيط وعملاؤنا يحبّون الطلب بالعربية.\"", + "home.testimonials.t1.name": "عبدالله، سوق السلام", + "home.testimonials.t2.body": "\"أستطيع التسوّق من نفس البقال الذي أزوره كل أسبوع، لكن الآن يصل إلى باب بيتي. نفس الجودة، أقل جهد.\"", + "home.testimonials.t2.name": "نورة، الرياض", + "home.testimonials.t3.body": "\"كان إعادة التخزين يتطلّب ثلاث مكالمات هاتفية. الآن نطلب مرة واحدة والفاتورة جاهزة قبل التوصيل.\"", + "home.testimonials.t3.name": "فهد، العربة الخضراء", + "home.cta.title": "جاهز للتسوّق، البيع، أو التوريد؟", + "home.cta.lede": "انضم إلى منصة البقالة المصممة للمملكة.", + "home.cta.button": "اطلب عرضًا", + + // Home — deeper content + "home.why.eyebrow": "لمَ أورديناكس", + "home.why.title": "البقالة أصبحت سهلة للجميع.", + "home.why.lede": "بنينا أورديناكس على فكرة واحدة: متجر حيك يجب أن يكون سهل الوصول كأي تطبيق عالمي — وموثوق مثله.", + + "home.shoppers.eyebrow": "للمتسوّقين", + "home.shoppers.title": "تسوّقك الأسبوعي، ينتهي في دقائق.", + "home.shoppers.lede": "لا ممرات مزدحمة، لا رفوف فارغة، ولا تساؤل عن موعد وصول طلبك.", + "home.shoppers.b1.title": "تسوّق من متاجر تثق بها", + "home.shoppers.b1.body": "بقالتك المفضلة، المخبوزات، ومحل الخضروات — كلها في مكان واحد.", + "home.shoppers.b2.title": "احصل عليها بسرعة", + "home.shoppers.b2.body": "توصيل في نفس اليوم خلال 25 دقيقة، لأن الطازج لا يجب أن يعني الانتظار.", + "home.shoppers.b3.title": "لا تخمّن المخزون بعد الآن", + "home.shoppers.b3.body": "إذا كان المنتج في التطبيق فهو على الرف. لا بدائل لم تطلبها.", + "home.shoppers.b4.title": "أعِد الطلب بنقرة واحدة", + "home.shoppers.b4.body": "احفظ سلتك الأسبوعية وكرّرها كلما ازدحم الوقت.", + + "home.owners.eyebrow": "لأصحاب المتاجر", + "home.owners.title": "أدِر متجرك، لا أوراقك.", + "home.owners.lede": "كل ما تحتاجه لبيع المزيد، والتوتر الأقل، والحفاظ على كل ريال في حسابك.", + "home.owners.b1.title": "احتفظ بكل بيعة", + "home.owners.b1.body": "لا عمولة. لا أموال محجوزة. مدفوعات العملاء تصل إليك مباشرة.", + "home.owners.b2.title": "شاشة واحدة، كل القنوات", + "home.owners.b2.body": "مبيعات الكاشير، طلبات التطبيق، وإعادة التخزين بالجملة — كلها في نظام واحد بسيط.", + "home.owners.b3.title": "بيع حتى دون اتصال", + "home.owners.b3.body": "الإنترنت ينقطع. المبيعات لا. كل شيء يتزامن تلقائيًا بمجرد عودة الاتصال.", + "home.owners.b4.title": "نمُ دون تخمين", + "home.owners.b4.body": "مخزون لحظي، تقارير واضحة، وخط مباشر مع المتسوّقين القريبين الذين يريدون ما تبيعه.", + + "shoppers.hero.eyebrow": "للمتسوّقين", + "shoppers.hero.title": "متجر حيك، الآن في جيبك.", + "shoppers.hero.lede": "اطلب البقالة الطازجة من متاجر محلية موثوقة واحصل على توصيل في نفس اليوم — بالعربية أو الإنجليزية.", + "shoppers.hero.cta": "حمّل التطبيق", + "shoppers.benefits.eyebrow": "لمَ التسوّق عبر أورديناكس", + "shoppers.benefits.title": "طازج، سريع ومألوف", + "shoppers.benefits.b1.title": "توصيل في نفس اليوم", + "shoppers.benefits.b1.body": "احصل على بقالتك في 25 دقيقة فقط من المتاجر التي تعرفها.", + "shoppers.benefits.b2.title": "مخزون حقيقي", + "shoppers.benefits.b2.body": "إذا كان المنتج في التطبيق فهو على الرف — لا مزيد من إلغاء العناصر بعد الدفع.", + "shoppers.benefits.b3.title": "ثنائي اللغة من الأساس", + "shoppers.benefits.b3.body": "بدّل بين العربية والإنجليزية في أي وقت. أسماء المنتجات والبحث والدفع يتبعانك.", + "shoppers.benefits.b4.title": "ادعم المحلي", + "shoppers.benefits.b4.body": "كل طلب يذهب مباشرة إلى متجر في مجتمعك — مالك يبقى في الحي.", + "shoppers.benefits.b5.title": "إعادة الطلب بسهولة", + "shoppers.benefits.b5.body": "كرّر قائمتك الأسبوعية بنقرة واحدة. احفظ المفضلات والسلال المجدولة للأيام المزدحمة.", + "shoppers.benefits.b6.title": "ادفع بثقة", + "shoppers.benefits.b6.body": "اختر الدفع عند الاستلام أو خيارات دفع محلية موثوقة. المتجر يتولّى الدفع مباشرة.", + "shoppers.categories.eyebrow": "كل ما تحتاجه", + "shoppers.categories.title": "من المخزن إلى الخضروات", + "shoppers.categories.lede": "تصفّح آلاف المنتجات في الفئات التي تستخدمها عائلتك يوميًا.", + "shoppers.categories.l1": "فاكهة وخضروات طازجة", + "shoppers.categories.l2": "ألبان، بيض ومنتجات مبردة", + "shoppers.categories.l3": "أرز، زيت، بهارات ومواد أساسية", + "shoppers.categories.l4": "منتجات المنزل والعناية الشخصية", + "shoppers.categories.l5": "مشروبات، خفائف ومخبوزات", + "shoppers.faq.title": "أسئلة شائعة", + "shoppers.faq.q1": "من يوصّل طلبي؟", + "shoppers.faq.a1": "المتجر الذي اخترته يجهّز الطلب وشريك توصيل محلي يأتيك به. يمكنك تتبّع الحالة في التطبيق.", + "shoppers.faq.q2": "هل يمكن الدفع نقدًا؟", + "shoppers.faq.a2": "نعم. يحصّل المتجر المدفوعات مباشرة — الدفع عند الاستلام أو الدفع الرقمي المحلي، حسب رغبتك.", + "shoppers.faq.q3": "ماذا إذا نفذ المنتج من المخزون؟", + "shoppers.faq.a3": "تُحدّث المتاجر التوفر لحظيًا. إذا تغيّر شيء، سيتواصلون معك لاقتراح بديل أو استرداد.", + "shoppers.cta.title": "طلبك الأول بانتظارك", + "shoppers.cta.lede": "حمّل التطبيق وتسوّق من المتاجر التي تثق بها.", + "shoppers.cta.button": "احصل على التطبيق", + + "stores.hero.eyebrow": "لأصحاب المتاجر", + "stores.hero.title": "حوّل كاشيرك إلى أعمال بقالة عصرية.", + "stores.hero.lede": "احصل على مزيد من الطلبات، بسّط العمل اليومي، وابقَ المدفوعات في يدك.", + "stores.hero.cta": "اطلب عرضًا", + "stores.benefits.eyebrow": "لمَ تختار المتاجر أورديناكس", + "stores.benefits.title": "كل ما تحتاجه للنمو", + "stores.benefits.b1.title": "مزيد من الطلبات", + "stores.benefits.b1.body": "وصل إلى المتسوّقين القريبين عبر التطبيق وحوّل متجرك إلى علامة محلية إلكترونية.", + "stores.benefits.b2.title": "مالك، حسابك", + "stores.benefits.b2.body": "تحصّل مدفوعات العملاء مباشرة. لا نحتفظ بأموالك ولا نأخذ نسبة من كل بيعة.", + "stores.benefits.b3.title": "شاشة واحدة بسيطة", + "stores.benefits.b3.body": "تتدفق مبيعات الكاشير وطلبات التطبيق في مكان واحد — لا حاجة للتنقل بين التطبيقات والدفاتر.", + "stores.benefits.b4.title": "تعمل دون اتصال", + "stores.benefits.b4.body": "واصل البيع حتى عند انقطاع الاتصال. كل شيء يتزامن تلقائيًا بمجرد عودة الاتصال.", + "stores.benefits.b5.title": "ثنائية اللغة لفريقك", + "stores.benefits.b5.body": "يمكن لموظفيك استخدام العربية أو الإنجليزية — الملصقات والفواتير والتقارير تتبدّل فورًا.", + "stores.benefits.b6.title": "أعِد التخزين في دقائق", + "stores.benefits.b6.body": "اطلب مستلزمات الجملة مباشرة من التطبيق، بفواتير واضحة وتوصيل متوقع.", + "stores.pricing.eyebrow": "الأسعار", + "stores.pricing.title": "اشتراكات بسيطة، بدون عمولات خفية", + "stores.pricing.lede": "لا توجد عمولة سوق. اختر خطة نقاط البيع التي تناسب متجرك.", + "stores.pricing.period": "/شهر", + "stores.pricing.badge": "الأكثر شيوعًا", + "stores.pricing.p1.title": "البداية", + "stores.pricing.p1.f1": "موقع متجر واحد", + "stores.pricing.p1.f2": "نقطة بيع للكاشير", + "stores.pricing.p1.f3": "تقارير أساسية", + "stores.pricing.p1.f4": "دعم عبر البريد", + "stores.pricing.p2.title": "النمو", + "stores.pricing.p2.f1": "حتى 3 أجهزة موظفين", + "stores.pricing.p2.f2": "كاشير + طلبات التطبيق", + "stores.pricing.p2.f3": "مخزون مباشر", + "stores.pricing.p2.f4": "دعم أولوي", + "stores.pricing.p3.title": "المؤسسات", + "stores.pricing.p3.f1": "فروع متعددة", + "stores.pricing.p3.f2": "تحليلات متقدمة", + "stores.pricing.p3.f3": "تكاملات الجملة", + "stores.pricing.p3.f4": "مدير حساب مخصص", + "stores.pricing.cta": "اختر الخطة", + "stores.testimonials.eyebrow": "قصص المتاجر", + "stores.testimonials.title": "مبنية للمتاجر السعودية", + "stores.testimonials.t1.body": "\"كنّا نكتب كل طلب يدويًا. الآن ندير طلبات الكاشير والتطبيق والجملة في مكان واحد.\"", + "stores.testimonials.t1.name": "خالد، سوق الأندلس", + "stores.testimonials.t2.body": "\"الواجهة الثنائية اللغة جعلت تدريب موظفينا سهلًا. المبيعات استمرت حتى أثناء مشاكل الشبكة.\"", + "stores.testimonials.t2.name": "سارة، فريش كورنر", + "stores.testimonials.t3.body": "\"عملاؤنا يدفعون لنا مباشرة، والاشتراك متوقع. لا مفاجآت في نهاية الشهر.\"", + "stores.testimonials.t3.name": "عمر، دايلي مارت", + "stores.cta.title": "جاهز لترقية متجرك؟", + "stores.cta.lede": "احجز عرضًا مدته 15 دقيقة وشاهد كيف تناسب أورديناكس كاشيرك.", + "stores.cta.button": "احجز عرضًا", + + "wholesale.hero.eyebrow": "للمورّدين والموزعين", + "wholesale.hero.title": "زوّد المتاجر التي تغذّي المملكة.", + "wholesale.hero.lede": "قناة جملة رقمية تربط منتجاتك بمتاجر الأحياء في جميع أنحاء المملكة العربية السعودية.", + "wholesale.hero.cta": "كن مورّدًا", + "wholesale.hero.cta2": "للمتاجر", + "wholesale.suppliers.eyebrow": "لمَ يتعاون المورّدون معنا", + "wholesale.suppliers.title": "وصل إلى مزيد من المتاجر بتكاليف أقل", + "wholesale.suppliers.b1.title": "شبكة متاجر جاهزة", + "wholesale.suppliers.b1.body": "وصول إلى مئات المتاجر النشطة التي تطلب بالفعل عبر أورديناكس.", + "wholesale.suppliers.b2.title": "رؤى الطلب", + "wholesale.suppliers.b2.body": "اعرف ما تشتريه المتاجر، ومتى تعيد التخزين، والمنتجات الأسرع مبيعًا.", + "wholesale.suppliers.b3.title": "خدمات لوجستية موثوقة", + "wholesale.suppliers.b3.body": "نسّق التوصيلات عبر أسطولك الخاص أو شركائنا اللوجستيين الموثوقين.", + "wholesale.suppliers.b4.title": "فواتير واضحة", + "wholesale.suppliers.b4.body": "يولّد كل طلب فاتورة بتوضيح الضريبة وحالة الدفع.", + "wholesale.suppliers.b5.title": "كتالوج رقمي", + "wholesale.suppliers.b5.body": "انشر الأصناف والصور والأسعار مرة واحدة. ترى المتاجر التحديثات لحظيًا.", + "wholesale.suppliers.b6.title": "دعم محلي", + "wholesale.suppliers.b6.body": "اعمل مع فريق سعودي يفهم التجزئة والمواسم ودورات التوريد.", + "wholesale.stores.eyebrow": "للمتاجر", + "wholesale.stores.title": "أعِد التخزين دون عناء", + "wholesale.stores.lede": "اعثر على ما تحتاجه، قارن بين المورّدين، وابقَ رفوفك ممتلئة — كل ذلك من شاشة واحدة.", + "wholesale.stores.f1": "كتالوج واسع من البقالة والمنزل والمنتجات المبردة", + "wholesale.stores.f2": "أسعار جملة تنافسية تُحدّث يوميًا", + "wholesale.stores.f3": "نوافذ توصيل متوقعة يمكنك التخطيط حولها", + "wholesale.stores.f4": "فاتورة واحدة لكل طلب بضريبة واضحة", + "wholesale.stores.cta": "انظر خطط المتاجر", + "wholesale.stores.panel.eyebrow": "كيف تعمل الجملة", + "wholesale.stores.panel.l1": "تصفّح الكتالوج", + "wholesale.stores.panel.v1": "1", + "wholesale.stores.panel.l2": "قدّم الطلب", + "wholesale.stores.panel.v2": "2", + "wholesale.stores.panel.l3": "استلم التوصيل", + "wholesale.stores.panel.v3": "3", + "wholesale.stores.panel.l4": "ادفع الفاتورة", + "wholesale.stores.panel.v4": "4", + "wholesale.faq.title": "أسئلة الجملة", + "wholesale.faq.q1": "من يمكنه أن يصبح مورّدًا؟", + "wholesale.faq.a1": "موزّعون ومصنّعون ومستوردون مرخّصون لمنتجات غذائية أو مشروبات أو منزلية أو عناية شخصية في المملكة العربية السعودية.", + "wholesale.faq.q2": "كيف تدفع المتاجر؟", + "wholesale.faq.a2": "تدفع المتاجر بناءً على فاتورة المورّد وفق شروط دفع متفق عليها — تحويل بنكي أو ائتمان أو دفع عند الاستلام.", + "wholesale.faq.q3": "هل عليّ إدراج كامل كتالوجي؟", + "wholesale.faq.a3": "لا. ابدأ بأكثر منتجاتك مبيعًا ووسّع مع رؤية الطلب من الشبكة.", + "wholesale.cta.title": "وسّع نطاق جملتك", + "wholesale.cta.lede": "تحدث إلى فريق الشراكات وشاهد كيف تناسب أورديناكس أعمال التوزيع لديك.", + "wholesale.cta.button": "تحدث إلى المبيعات", + + "contact.hero.eyebrow": "تواصل", + "contact.hero.title": "لنتحدث عن البقالة.", + "contact.hero.lede": "اطلب عرضًا، كن متجرًا شريكًا، أو انضم إلى شبكة مورّدينا.", + "contact.form.eyebrow": "تواصل معنا", + "contact.form.title": "أرسل لنا رسالة", + "contact.form.lede": "املأ النموذج وسيردّ فريقنا خلال يوم عمل واحد.", + "contact.form.nameLabel": "الاسم", + "contact.form.namePlaceholder": "اسمك", + "contact.form.emailLabel": "البريد الإلكتروني", + "contact.form.emailPlaceholder": "you@example.com", + "contact.form.phoneLabel": "الهاتف", + "contact.form.phonePlaceholder": "+966 50 000 0000", + "contact.form.interestLabel": "أنا مهتم بـ", + "contact.form.interest.default": "اختر خيارًا", + "contact.form.interest.store": "تشغيل متجري على أورديناكس", + "contact.form.interest.shopper": "التسوّق كمستهلك", + "contact.form.interest.supplier": "توريد منتجات بالجملة", + "contact.form.interest.other": "شيء آخر", + "contact.form.messageLabel": "الرسالة", + "contact.form.messagePlaceholder": "أخبرنا عن عملك", + "contact.form.submit": "إرسال الرسالة", + "contact.form.success": "شكرًا لك — سنتواصل معك قريبًا.", + "contact.form.invalidEmail": "يرجى إدخال بريد إلكتروني صحيح.", + "contact.form.required": "يرجى ملء جميع الحقول المطلوبة.", + "contact.info.office.title": "المقر الرئيسي", + "contact.info.office.body": "الرياض، المملكة العربية السعودية", + "contact.info.email.title": "البريد الإلكتروني", + "contact.info.phone.title": "الهاتف", + "contact.info.hours.title": "ساعات العمل", + "contact.info.hours.body": "من الأحد إلى الخميس، 9:00 ص – 6:00 م بتوقيت السعودية", + "contact.cta.title": "تفضّل التحدث الآن؟", + "contact.cta.lede": "اتصل بنا خلال ساعات العمل أو اطلب معاودة الاتصال.", + "contact.cta.button": "اتصل +966 9200 123 45", + }, +}; + +const TITLES = { + home: { en: "Ordenax — Groceries from your local stores, delivered", ar: "أورديناكس — بقالتك من متاجر حيّك، حتى باب البيت" }, + shoppers: { en: "For shoppers — Ordenax", ar: "للمتسوّقين — أورديناكس" }, + stores: { en: "For stores — Ordenax", ar: "للمتاجر — أورديناكس" }, + wholesale: { en: "Wholesale supply — Ordenax", ar: "التوريد بالجملة — أورديناكس" }, + contact: { en: "Contact — Ordenax", ar: "تواصل — أورديناكس" }, +}; + +const html = document.documentElement; +const body = document.body; +const toggle = document.getElementById("lang-toggle"); +const header = document.querySelector(".site-header"); +const menuToggle = document.querySelector(".menu-toggle"); +const mobileNav = document.getElementById("mobile-nav"); +const page = body.dataset.page || "home"; + +function applyLang(lang) { + const dict = STRINGS[lang]; + html.lang = lang; + html.dir = lang === "ar" ? "rtl" : "ltr"; + document.title = (TITLES[page] && TITLES[page][lang]) || TITLES.home[lang]; + + document.querySelectorAll("[data-i18n]").forEach((el) => { + const key = el.getAttribute("data-i18n"); + if (dict[key] !== undefined) el.textContent = dict[key]; + }); + document.querySelectorAll("[data-i18n-placeholder]").forEach((el) => { + const key = el.getAttribute("data-i18n-placeholder"); + if (dict[key] !== undefined) el.setAttribute("placeholder", dict[key]); + }); + + toggle.textContent = lang === "ar" ? "English" : "العربية"; + localStorage.setItem("ordenax-lang", lang); +} + +let lang = localStorage.getItem("ordenax-lang") || "en"; +applyLang(lang); + +function refreshHeroReveal() { + if (!heroTitle || page !== "home") return; + heroTitle.classList.remove("text-reveal"); + const text = heroTitle.textContent; + heroTitle.innerHTML = text + .split(/(\s+)/) + .map((word, i) => (word.trim() ? `${word}` : word)) + .join(""); + heroTitle.classList.add("text-reveal"); +} + +toggle.addEventListener("click", () => { + body.classList.add("is-switching-lang"); + setTimeout(() => { + lang = html.lang === "ar" ? "en" : "ar"; + applyLang(lang); + refreshHeroReveal(); + body.classList.remove("is-switching-lang"); + }, 120); +}); + +/* Current page nav highlight */ +document.querySelectorAll('.nav a[href], .mobile-nav a[href]').forEach((a) => { + const href = a.getAttribute("href").replace('.html', ''); + if (href === page || (page === 'home' && href === 'index')) { + a.setAttribute("aria-current", "page"); + } +}); + +/* Mobile nav */ +function closeMobileNav() { + mobileNav.classList.remove("is-open"); + menuToggle.setAttribute("aria-expanded", "false"); + mobileNav.setAttribute("aria-hidden", "true"); + body.style.overflow = ""; +} +menuToggle.addEventListener("click", () => { + const open = !mobileNav.classList.contains("is-open"); + if (open) { + mobileNav.classList.add("is-open"); + menuToggle.setAttribute("aria-expanded", "true"); + mobileNav.setAttribute("aria-hidden", "false"); + body.style.overflow = "hidden"; + } else { + closeMobileNav(); + } +}); +mobileNav.querySelectorAll("a").forEach((a) => a.addEventListener("click", closeMobileNav)); + +/* Header show/hide on scroll */ +let lastScrollY = 0; +let ticking = false; +function onScroll() { + const y = window.scrollY; + if (y > 20) header.classList.add("is-scrolled"); + else header.classList.remove("is-scrolled"); + + if (y > lastScrollY && y > 120) header.classList.add("is-hidden"); + else header.classList.remove("is-hidden"); + lastScrollY = y; + ticking = false; +} +window.addEventListener("scroll", () => { + if (!ticking) { window.requestAnimationFrame(onScroll); ticking = true; } +}, { passive: true }); + +/* Hero entrance */ +document.querySelectorAll(".hero").forEach((hero) => { + hero.classList.add("is-ready"); +}); + +/* Scroll reveal */ +const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add("is-visible"); + if (entry.target.dataset.animate === "stat") animateCounter(entry.target); + observer.unobserve(entry.target); + } + }); +}, { threshold: 0.15, rootMargin: "0px 0px -40px 0px" }); + +document.querySelectorAll('[data-animate="card"], [data-animate="step"], [data-animate="fade"], [data-animate="stat"]').forEach((el) => { + observer.observe(el); +}); + +/* Stagger cards within grids */ +document.querySelectorAll(".grid").forEach((grid) => { + grid.querySelectorAll(".reveal").forEach((el, i) => { + el.style.transitionDelay = `${i * 80}ms`; + }); +}); + +/* Counter animation */ +function animateCounter(stat) { + const numEl = stat.querySelector(".stat-number"); + const target = parseInt(numEl.dataset.target, 10); + if (Number.isNaN(target)) return; + let start = 0; + const duration = 1600; + const startTime = performance.now(); + function step(now) { + const progress = Math.min((now - startTime) / duration, 1); + const ease = 1 - Math.pow(1 - progress, 3); + numEl.textContent = Math.floor(start + (target - start) * ease).toString(); + if (progress < 1) requestAnimationFrame(step); + } + requestAnimationFrame(step); +} + +/* Contact form */ +const contactForm = document.getElementById("contact-form"); +if (contactForm) { + const note = document.getElementById("form-note"); + contactForm.addEventListener("submit", (event) => { + event.preventDefault(); + const dict = STRINGS[html.lang]; + const email = contactForm.email.value.trim(); + const name = contactForm.name.value.trim(); + const interest = contactForm.interest.value; + if (!name || !email || !interest) { + note.textContent = dict["contact.form.required"]; + return; + } + if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { + note.textContent = dict["contact.form.invalidEmail"]; + contactForm.email.focus(); + return; + } + note.textContent = dict["contact.form.success"]; + contactForm.reset(); + }); +} + +/* Parallax scroll */ +const parallaxElements = document.querySelectorAll("[data-parallax]"); +if (parallaxElements.length && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) { + let parallaxTicking = false; + function updateParallax() { + const y = window.scrollY; + parallaxElements.forEach((el) => { + const speed = parseFloat(el.dataset.parallax) || 0.1; + const offset = y * speed; + el.style.transform = `translate3d(0, ${offset}px, 0)`; + }); + parallaxTicking = false; + } + window.addEventListener("scroll", () => { + if (!parallaxTicking) { + window.requestAnimationFrame(updateParallax); + parallaxTicking = true; + } + }, { passive: true }); +} + +/* Hero word-by-word reveal on home */ +const heroTitle = document.querySelector(".hero-apple .hero-title"); +refreshHeroReveal(); diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..7be06fb --- /dev/null +++ b/contact.html @@ -0,0 +1,153 @@ + + + + + + Contact — Ordenax + + + + + + + + + + + +
+
+ + + ORDENAX + + +
+ + Get started + +
+
+
+ + +
+
+ +
+

Contact

+

Let's talk grocery.

+ +

Request a demo, become a partner store, or join our supplier network.

+
+
+ +
+
+
+
+

Get in touch

+

Send us a message

+ +
+

Fill in the form and our team will reply within one business day.

+
+ + + + + + + + + + + + + + + + +

+
+
+ +
+
+

Headquarters

+

Riyadh, Kingdom of Saudi Arabia

+
+
+

Email

+

hello@ordenax.sa

+
+
+

Phone

+

+966 9200 123 45

+
+
+

Business hours

+

Sunday to Thursday, 9:00 AM – 6:00 PM KSA

+
+
+
+
+ +
+
+

Prefer to talk now?

+

Call us during business hours or request a callback.

+ Call +966 9200 123 45 +
+
+
+ + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..b0357bc --- /dev/null +++ b/index.html @@ -0,0 +1,294 @@ + + + + + + Ordenax — Groceries from your local stores, delivered + + + + + + + + + + + +
+
+ + + ORDENAX + + +
+ + Get started + +
+
+
+ + +
+
+ +
+

Saudi grocery platform

+

Groceries from your local stores, delivered.

+ +

+ The platform that helps neighborhoods shop, sell and restock — in Arabic and English, online or off. +

+
+ Start shopping + Run your store +
+
    +
  • Bilingual EN / AR
    • +
  • Works without internet
    • +
  • SAR · VAT included
    • +
+ +
+
+ +
+
+
+

Why Ordenax

+

Grocery made simple for everyone.

+

We built Ordenax around one idea: your neighborhood store should be as easy to reach as a global app — and just as reliable.

+
+
+
+ +
+
+
+

For shoppers

+

Your weekly shop, done in minutes.

+

No more crowded aisles, sold-out shelves, or wondering when your order will arrive.

+
+
+
+ +

Shop stores you already trust

+

Your favorite neighborhood grocer, bakery, and produce stand — all in one place.

+
+
+ +

Get it fast

+

Same-day delivery in as little as 25 minutes, because fresh shouldn't mean waiting.

+
+
+ +

Never guess stock again

+

If it's on the app, it's on the shelf. No substitutions you didn't ask for.

+
+
+ +

Reorder in one tap

+

Save your weekly basket and repeat it whenever life gets busy.

+
+
+
+
+ +
+
+
+

For store owners

+

Run your store, not your paperwork.

+

Everything you need to sell more, stress less, and keep every riyal in your account.

+
+
+
+ +

Keep every sale

+

No commission. No withheld funds. Customer payments go straight to you.

+
+
+ +

One screen, every channel

+

Counter sales, app orders, and wholesale restocking — all flowing into one simple system.

+
+
+ +

Sell even when offline

+

The internet drops. Your sales don't. Everything syncs automatically once you're back online.

+
+
+ +

Grow without the guesswork

+

Real-time inventory, clear reports, and a direct line to nearby shoppers who want what you sell.

+
+
+
+
+ +
+
+
+

One platform, three wins

+

Built for every side of grocery

+
+
+
+ +

Shop local

+

Order fresh groceries from nearby stores with same-day delivery and real stock you can trust.

+ Learn more +
+
+ +

Sell smarter

+

A simple point-of-sale that brings counter sales and online orders together, even during outages.

+ Learn more +
+
+ +

Restock wholesale

+

Stores refill their shelves straight from suppliers, with clear invoices and no hidden inventory traps.

+ Learn more +
+
+
+
+ +
+
+
+

How it works

+

From shelf to doorstep in three steps

+
+
    +
  1. + 1 +

    Order

    +

    A shopper picks products from a nearby store — in English or Arabic.

    +
    2. +
  2. + 2 +

    Prepare

    +

    The store receives, packs and confirms the order on the Ordenax system.

    +
    3. +
  3. + 3 +

    Deliver

    +

    A delivery partner drops it at the door. The store keeps the payment directly.

    +
    4. +
+
+
+ +
+
+
+
+ 0+ + partner stores +
+
+ 0k+ + monthly orders +
+
+ 0 min + average delivery +
+
+ 0 + languages +
+
+
+
+ +
+
+
+

What partners say

+

Loved by stores, trusted by shoppers

+
+
+
+

"We doubled our weekly orders within two months. The system is simple and our customers love ordering in Arabic."

+
— Abdullah, Al-Salam Market
+
+
+

"I can shop from the same grocer I visit every week, but now it comes to my door. Same quality, less hassle."

+
— Noura, Riyadh
+
+
+

"Restocking used to take three phone calls. Now we order once and the invoice is ready before delivery."

+
— Fahad, Green Cart
+
+
+
+
+ +
+
+

Ready to shop, sell, or supply?

+

Join the grocery platform built for the Kingdom.

+ Request a demo +
+
+
+ + + + + + diff --git a/shoppers.html b/shoppers.html new file mode 100644 index 0000000..3b1c56f --- /dev/null +++ b/shoppers.html @@ -0,0 +1,189 @@ + + + + + + For shoppers — Ordenax + + + + + + + + + + + +
+
+ + + ORDENAX + + +
+ + Get started + +
+
+
+ + +
+
+ +
+

For shoppers

+

Your neighborhood store, now in your pocket.

+ +

Order fresh groceries from trusted local stores and get same-day delivery — in Arabic or English.

+
+ Download the app + See how it works +
+
+
+ +
+
+
+

Why shop on Ordenax

+

Fresh, fast and familiar

+ +
+
+
+ +

Same-day delivery

+

Get your groceries in as little as 25 minutes from stores you already know.

+
+
+ +

Real stock

+

If it's on the app, it's on the shelf — no more canceled items after checkout.

+
+
+ +

Bilingual by design

+

Switch between Arabic and English anytime. Product names, search and checkout follow you.

+
+
+ +

Support local

+

Every order goes directly to a store in your community — your money stays in the neighborhood.

+
+
+ +

Easy reorder

+

Repeat your weekly list in one tap. Save favorites and scheduled baskets for busy days.

+
+
+ +

Pay with confidence

+

Choose cash on delivery or trusted local payment options. The store handles your payment directly.

+
+
+
+
+ +
+
+
+
+

Everything you need

+

From pantry to produce

+ +
+

Browse thousands of products across the categories your family uses every day.

+
    +
  • Fresh fruit and vegetables
    • +
  • Dairy, eggs and chilled goods
    • +
  • Rice, oil, spices and staples
    • +
  • Household and personal care
    • +
  • Beverages, snacks and bakery
    • +
+
+
+
🥦
+
🍞
+
🥛
+
🧴
+
+
+
+ +
+
+

Common questions

+ +
+
+ Who delivers my order? +

Your chosen store prepares the order and a local delivery partner brings it to you. You can track the status in the app.

+
+
+ Can I pay with cash? +

Yes. The store collects your payment directly — cash on delivery or local digital payments, whichever you prefer.

+
+
+ What if an item is out of stock? +

Stores update availability in real time. If something changes, they will contact you to suggest a replacement or refund.

+
+
+
+
+ +
+
+

Your first order is waiting

+

Download the app and shop the stores you already trust.

+ Get the app +
+
+
+ + + + + + diff --git a/stores.html b/stores.html new file mode 100644 index 0000000..d73f633 --- /dev/null +++ b/stores.html @@ -0,0 +1,213 @@ + + + + + + For stores — Ordenax + + + + + + + + + + + +
+
+ + + ORDENAX + + +
+ + Get started + +
+
+
+ + +
+
+ +
+

For store owners

+

Turn your counter into a modern grocery business.

+ +

Get more orders, simplify daily work, and keep every payment in your own hands.

+
+ Request a demo + See pricing +
+
+
+ +
+
+
+

Why stores choose Ordenax

+

Everything you need to grow

+ +
+
+
+ +

More orders

+

Reach nearby shoppers through the app and turn your store into a local online brand.

+
+
+ +

Your money, your account

+

You collect customer payments directly. We never hold your funds or take a slice of every sale.

+
+
+ +

One simple screen

+

Counter sales and app orders flow into one place — no switching between apps and notebooks.

+
+
+ +

Works without internet

+

Keep ringing sales even when the connection drops. Everything syncs automatically once you're back online.

+
+
+ +

Bilingual for your team

+

Your staff can use Arabic or English — labels, receipts, and reports switch instantly.

+
+
+ +

Restock in minutes

+

Order wholesale supplies straight from the app, with clear invoices and predictable delivery.

+
+
+
+
+ +
+
+
+

Pricing

+

Simple subscriptions, no hidden cuts

+ +

No marketplace commission. Just pick the POS plan that fits your store.

+
+
+
+

Starter

+

SAR 299/month

+
    +
  • 1 store location
    • +
  • Counter POS
    • +
  • Basic reports
    • +
  • Email support
    • +
+ Choose Starter +
+
+ Most popular +

Growth

+

SAR 599/month

+
    +
  • Up to 3 staff devices
    • +
  • Counter + app orders
    • +
  • Live inventory
    • +
  • Priority support
    • +
+ Choose Growth +
+
+

Enterprise

+

SAR 999/month

+
    +
  • Multiple branches
    • +
  • Advanced analytics
    • +
  • Wholesale integrations
    • +
  • Dedicated account manager
    • +
+ Choose Enterprise +
+
+
+
+ +
+
+
+

Store stories

+

Built for Saudi stores

+ +
+
+
+

"We used to write every order by hand. Now we manage counter, app and wholesale orders in one place."

+
— Khalid, Al-Andalus Market
+
+
+

"The bilingual interface made training our staff effortless. Sales kept flowing even during network issues."

+
— Sara, Fresh Corner
+
+
+

"Our customers pay us directly, and the subscription is predictable. No surprises at the end of the month."

+
— Omar, Daily Mart
+
+
+
+
+ +
+
+

Ready to upgrade your store?

+

Book a 15-minute demo and see how Ordenax fits your counter.

+ Book a demo +
+
+
+ + + + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..715c670 --- /dev/null +++ b/styles.css @@ -0,0 +1,654 @@ +/* Ordenax landing — Apple-inspired design language with Ordenax emerald/gold brand tokens. + Logical properties + RTL-first; animated with IntersectionObserver. */ + +:root { + --emerald-950: #071f17; + --emerald-900: #0b2e22; + --emerald-800: #0f3d2c; + --emerald-700: #14553d; + --emerald-600: #1a6b4a; + --emerald-500: #1f8459; + --emerald-50: #f0f7f3; + --gold-300: #e6cd8e; + --gold-400: #d9b566; + --gold-500: #c6a15b; + --gold-600: #a9823f; + --gold-700: #87662c; + --ivory: #fbf7ee; + --sand: #f4edde; + --ink: #0d1b13; + --ink-soft: #4a5d52; + --hairline: #e7e0cf; + + --radius-sm: 10px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-xl: 32px; + --radius-pill: 9999px; + + --shadow-card: 0 1px 2px rgb(13 27 19 / 0.04), 0 12px 32px -10px rgb(13 27 19 / 0.10); + --shadow-lift: 0 4px 8px rgb(13 27 19 / 0.05), 0 22px 48px -14px rgb(13 27 19 / 0.18); + --shadow-gold: 0 10px 30px -10px rgb(198 161 91 / 0.55); + --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.12); + + --ease-out: cubic-bezier(0.22, 1, 0.36, 1); + --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --ease-apple: cubic-bezier(0.4, 0, 0.2, 1); +} + +* { box-sizing: border-box; } + +html { + scroll-behavior: smooth; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + margin: 0; + background: var(--ivory); + color: var(--ink); + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-size: 1.0625rem; + line-height: 1.6; + opacity: 1; + transition: opacity 0.25s ease; +} + +body.is-switching-lang { opacity: 0.85; } + +[dir="rtl"] body { font-family: "Almarai", "Inter", system-ui, sans-serif; } + +h1, h2, h3, .wordmark { + font-family: "Fraunces", Georgia, "Times New Roman", serif; + line-height: 1.05; + margin: 0; + letter-spacing: -0.02em; +} + +[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: "Almarai", sans-serif; font-weight: 800; letter-spacing: 0; } + +h1 { font-size: clamp(2.8rem, 7vw, 5rem); font-weight: 600; } +h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; color: var(--emerald-900); } +h3 { font-size: 1.35rem; font-weight: 600; color: var(--emerald-800); margin-block-end: 0.5rem; } + +p { margin: 0; } +a { color: inherit; text-decoration: none; } +ul, ol { margin: 0; padding: 0; list-style: none; } + +.container { max-width: 1200px; margin-inline: auto; padding-inline: 1.75rem; } +.container.narrow { max-width: 720px; } +.visually-hidden { + position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); white-space: nowrap; +} + +.centered { text-align: center; margin-inline: auto; } +.centered-rule { margin-inline: auto; } + +/* ---------- Brand ---------- */ +.brand { display: inline-flex; align-items: center; gap: 0.65rem; } +.logo-disc { + display: inline-grid; place-items: center; + width: 38px; height: 38px; border-radius: 50%; + background: var(--emerald-800); color: var(--gold-400); + font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; font-weight: 600; + box-shadow: inset 0 0 0 1.5px var(--gold-500), var(--shadow-gold); + animation: logo-pulse 4s ease-in-out infinite; + transition: transform 0.3s var(--ease-spring); +} +.brand:hover .logo-disc { transform: scale(1.08); } +.wordmark { + font-size: 1rem; font-weight: 700; letter-spacing: 0.18em; + color: var(--emerald-900); +} +[dir="rtl"] .wordmark { font-family: "Fraunces", Georgia, serif; letter-spacing: 0.18em; } +.brand-light .wordmark { color: var(--gold-300); } + +@keyframes logo-pulse { + 0%, 100% { box-shadow: inset 0 0 0 1.5px var(--gold-500), 0 0 0 0 rgb(198 161 91 / 0.28); } + 50% { box-shadow: inset 0 0 0 1.5px var(--gold-500), 0 0 0 12px rgb(198 161 91 / 0); } +} + +/* ---------- Eyebrows, rules, lede ---------- */ +.eyebrow { + font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; + text-transform: uppercase; color: var(--gold-600); margin-block-end: 1rem; +} +[dir="rtl"] .eyebrow { letter-spacing: 0; } +.eyebrow-light { color: var(--gold-400); } + +.gold-rule { + width: 64px; height: 2px; margin-block: 1.2rem 1.6rem; + background: linear-gradient(90deg, var(--gold-500), transparent); + border-radius: 2px; +} +[dir="rtl"] .gold-rule { background: linear-gradient(270deg, var(--gold-500), transparent); } + +.lede { font-size: 1.25rem; color: var(--ink-soft); max-width: 52ch; line-height: 1.55; } +.lede-light { color: #cfe0d6; } + +/* ---------- Buttons ---------- */ +.btn { + position: relative; overflow: hidden; + display: inline-flex; align-items: center; justify-content: center; + padding: 0.85rem 1.8rem; border-radius: var(--radius-pill); + font-weight: 600; font-size: 1rem; border: 1.5px solid transparent; + cursor: pointer; transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-apple), background 0.2s var(--ease-apple), color 0.2s var(--ease-apple); +} +.btn:hover { transform: translateY(-2px) scale(1.02); } +.btn:active { transform: translateY(0) scale(0.98); } +.btn-sm { padding: 0.55rem 1.2rem; font-size: 0.92rem; } +.btn-primary { + background: var(--emerald-700); color: #fff; + box-shadow: 0 4px 14px rgb(20 85 61 / 0.28); +} +.btn-primary:hover { background: var(--emerald-600); box-shadow: 0 6px 20px rgb(20 85 61 / 0.35); } +.btn-gold { + background: linear-gradient(160deg, var(--gold-400), var(--gold-500)); + color: var(--emerald-950); + box-shadow: var(--shadow-gold); +} +.btn-gold:hover { background: linear-gradient(160deg, var(--gold-300), var(--gold-400)); box-shadow: 0 14px 36px -10px rgb(198 161 91 / 0.65); } +.btn-outline-light { border-color: rgb(230 205 142 / 0.55); color: var(--gold-300); } +.btn-outline-light:hover { background: rgb(198 161 91 / 0.12); } +.btn-outline { border-color: var(--emerald-700); color: var(--emerald-700); background: transparent; } +.btn-outline:hover { background: var(--emerald-700); color: #fff; } + +/* Shimmer */ +.shimmer::after { + content: ""; position: absolute; inset: 0; + background: linear-gradient(120deg, transparent 38%, rgb(255 255 255 / 0.5) 50%, transparent 62%); + transform: translateX(-140%); + transition: transform 0s; +} +.shimmer:hover::after { transform: translateX(140%); transition: transform 0.85s var(--ease-out); } + +/* ---------- Header ---------- */ +.site-header { + position: sticky; top: 0; z-index: 50; + background: rgb(251 247 238 / 0.78); + backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: saturate(180%) blur(20px); + border-block-end: 1px solid rgb(231 224 207 / 0.6); + transform: translateY(0); + transition: transform 0.4s var(--ease-out), background 0.3s ease, box-shadow 0.3s ease; +} +.site-header.is-hidden { transform: translateY(-110%); } +.site-header.is-scrolled { background: rgb(251 247 238 / 0.92); box-shadow: 0 4px 24px rgb(13 27 19 / 0.05); } +.header-inner { display: flex; align-items: center; gap: 2rem; padding-block: 0.75rem; } +.nav { display: flex; gap: 2rem; margin-inline-start: auto; margin-inline-end: auto; font-weight: 500; font-size: 0.95rem; color: var(--ink-soft); } +.nav a { position: relative; padding-block: 0.4rem; } +.nav a::after { + content: ""; position: absolute; inset-inline-start: 50%; inset-block-end: 0; + width: 0; height: 2px; background: var(--gold-500); border-radius: 2px; + transform: translateX(-50%); + transition: width 0.25s var(--ease-out); +} +[dir="rtl"] .nav a::after { transform: translateX(50%); } +.nav a:hover { color: var(--emerald-800); } +.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; } +.header-actions { display: flex; align-items: center; gap: 0.75rem; } +.lang-toggle { + background: none; border: 1.5px solid var(--hairline); border-radius: var(--radius-pill); + padding: 0.4rem 1rem; font: inherit; font-weight: 600; font-size: 0.88rem; + color: var(--emerald-700); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease; +} +.lang-toggle:hover { border-color: var(--gold-500); background: rgb(198 161 91 / 0.08); } +.menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(--emerald-800); cursor: pointer; } + +/* Mobile nav */ +.mobile-nav { + position: fixed; inset: 0; z-index: 40; + background: var(--emerald-950); color: #f2f7f3; + display: flex; align-items: center; justify-content: center; + opacity: 0; pointer-events: none; transform: translateY(-12px) scale(0.98); + transition: opacity 0.35s var(--ease-apple), transform 0.35s var(--ease-apple); +} +.mobile-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } +.mobile-nav nav { display: grid; gap: 1.6rem; text-align: center; } +.mobile-nav a { font-size: 1.6rem; font-weight: 600; } +.mobile-nav a:hover { color: var(--gold-300); } + +/* ---------- Hero ---------- */ +.hero { + position: relative; overflow: hidden; + background: + radial-gradient(900px 420px at 75% -15%, rgb(198 161 91 / 0.18), transparent 55%), + radial-gradient(900px 520px at 12% 115%, rgb(31 132 89 / 0.28), transparent 55%), + linear-gradient(165deg, var(--emerald-900), var(--emerald-950)); + color: #f2f7f3; +} +.hero-glow { + position: absolute; inset: 0; pointer-events: none; + background: + radial-gradient(600px 340px at 22% 42%, rgb(198 161 91 / 0.14), transparent 55%), + radial-gradient(700px 420px at 82% 78%, rgb(31 132 89 / 0.16), transparent 55%); + animation: glow-drift 12s ease-in-out infinite alternate; +} +@keyframes glow-drift { + 0% { transform: translate(-2%, -2%) scale(1); opacity: 0.8; } + 100% { transform: translate(2%, 2%) scale(1.05); opacity: 1; } +} + +.hero-inner { position: relative; z-index: 1; padding-block: clamp(5rem, 12vw, 9rem); max-width: 820px; text-align: center; margin-inline: auto; } +.hero-small .hero-inner { padding-block: clamp(4rem, 9vw, 6rem); } + +.hero-eyebrow, .hero-title, .hero-rule, .hero-lede, .hero-ctas, .hero-badges, .hero-visual { opacity: 0; transform: translateY(28px); } +.hero.is-ready .hero-eyebrow { animation: fade-up 0.9s var(--ease-out) 0.1s forwards; } +.hero.is-ready .hero-title { animation: fade-up 1s var(--ease-out) 0.25s forwards; } +.hero.is-ready .hero-rule { animation: fade-up 0.9s var(--ease-out) 0.42s forwards; } +.hero.is-ready .hero-lede { animation: fade-up 0.9s var(--ease-out) 0.55s forwards; } +.hero.is-ready .hero-ctas { animation: fade-up 0.9s var(--ease-out) 0.7s forwards; } +.hero.is-ready .hero-badges { animation: fade-up 0.9s var(--ease-out) 0.85s forwards; } +.hero.is-ready .hero-visual { animation: fade-up 1s var(--ease-out) 0.95s forwards; } + +@keyframes fade-up { + to { opacity: 1; transform: translateY(0); } +} + +.hero-rule { margin-inline: auto; } +.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-block-start: 2.4rem; } +.hero-badges { + display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-block-start: 2.8rem; + font-size: 0.86rem; color: var(--gold-300); +} +.hero-badges li { + border: 1px solid rgb(230 205 142 / 0.35); border-radius: var(--radius-pill); + padding: 0.35rem 1rem; background: rgb(7 31 23 / 0.25); + backdrop-filter: blur(6px); +} + +/* Apple-style full-bleed home hero */ +.hero-apple { min-height: 92vh; display: grid; place-items: center; } +.hero-apple .hero-title { font-size: clamp(3rem, 8.5vw, 6.5rem); font-weight: 600; letter-spacing: -0.045em; } +.hero-apple .hero-lede { font-size: clamp(1.15rem, 2.2vw, 1.45rem); max-width: 58ch; margin-inline: auto; } + +/* Hero visual — app device mockup */ +.hero-visual { margin-block-start: 3.5rem; perspective: 1200px; } +.device-frame { + position: relative; width: min(320px, 78vw); aspect-ratio: 9/19; + margin-inline: auto; border-radius: 42px; + background: linear-gradient(180deg, var(--emerald-800), var(--emerald-950)); + box-shadow: + 0 0 0 10px var(--gold-500), + 0 40px 80px -20px rgb(0 0 0 / 0.45), + 0 0 0 1px rgb(255 255 255 / 0.1) inset; + overflow: hidden; + transform: rotateX(8deg) rotateY(0deg); + animation: device-float 6s ease-in-out infinite; +} +.device-screen { + position: absolute; inset: 10px; border-radius: 34px; + background: linear-gradient(180deg, var(--ivory) 0%, var(--sand) 100%); + overflow: hidden; + display: grid; place-items: center; padding: 1.5rem; +} +.device-notch { + position: absolute; top: 18px; left: 50%; transform: translateX(-50%); + width: 34%; height: 22px; background: var(--emerald-950); border-radius: 12px; z-index: 2; +} +.device-card { + width: 100%; background: #fff; border-radius: 18px; padding: 1rem; box-shadow: var(--shadow-card); + display: grid; gap: 0.75rem; +} +.device-card .row { display: flex; align-items: center; gap: 0.75rem; } +.device-card .thumb { width: 42px; height: 42px; border-radius: 10px; background: var(--emerald-50); display: grid; place-items: center; font-size: 1.3rem; } +.device-card .line { height: 8px; border-radius: 4px; background: var(--hairline); } +.device-card .line.short { width: 45%; } +.device-card .line.medium { width: 70%; } + +@keyframes device-float { + 0%, 100% { transform: rotateX(8deg) translateY(0); } + 50% { transform: rotateX(8deg) translateY(-14px); } +} + +/* ---------- Sections ---------- */ +.section { padding-block: clamp(4.5rem, 10vw, 7.5rem); } +.section-sand { background: var(--sand); } +.section-ivory { background: var(--ivory); } + +.section-heading { text-align: center; max-width: 760px; margin-inline: auto; margin-block-end: 1rem; } +.section-heading h2 { font-size: clamp(2.4rem, 5vw, 3.8rem); letter-spacing: -0.03em; } +.section-heading .lede { margin-inline: auto; margin-block-start: 1rem; font-size: 1.3rem; } +.section-heading .gold-rule { display: none; } + +.grid { display: grid; gap: 1.5rem; margin-block-start: 2.8rem; } +.grid-3 { grid-template-columns: repeat(3, 1fr); } +.grid-2 { grid-template-columns: repeat(2, 1fr); } + +/* Bento grid (Apple-style asymmetric cards) */ +.bento { display: grid; gap: 1.25rem; margin-block-start: 3rem; } +.bento-3 { + grid-template-columns: repeat(3, 1fr); + grid-template-rows: auto auto; +} +.bento-3 .bento-card:first-child { grid-column: span 2; grid-row: span 2; } + +.bento-card { + position: relative; overflow: hidden; + background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-xl); + padding: 2rem; box-shadow: var(--shadow-card); + transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); + display: flex; flex-direction: column; gap: 1rem; +} +.bento-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-lift); } +.bento-card h3 { font-size: 1.5rem; } +.bento-card p { color: var(--ink-soft); font-size: 1.02rem; } +.bento-card .card-link { margin-block-start: auto; } + +.bento-card-dark { + background: linear-gradient(160deg, var(--emerald-800), var(--emerald-950)); + color: #f2f7f3; border-color: rgb(198 161 91 / 0.25); +} +.bento-card-dark h3 { color: #fff; } +.bento-card-dark p { color: #cfe0d6; } + +.card { + background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg); + padding: 1.8rem; box-shadow: var(--shadow-card); + transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); +} +.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); } +.card p { color: var(--ink-soft); } +.card-icon { + display: inline-grid; place-items: center; + width: 54px; height: 54px; border-radius: var(--radius-md); + background: var(--emerald-50); font-size: 1.6rem; margin-block-end: 1.1rem; + transition: transform 0.35s var(--ease-spring); +} +.card:hover .card-icon { transform: scale(1.1) rotate(-4deg); } +.card-link { + display: inline-block; margin-block-start: 1rem; font-weight: 600; + color: var(--emerald-700); border-block-end: 1px solid var(--gold-500); + transition: color 0.2s ease; +} +.card-link:hover { color: var(--gold-600); } + +/* ---------- Reveal animations ---------- */ +.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); } +.reveal.is-visible { opacity: 1; transform: translateY(0); } + +/* ---------- Steps ---------- */ +.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-block-start: 2.8rem; } +.step { position: relative; padding-inline-start: 3.6rem; } +.step p { color: var(--ink-soft); } +.step-num { + position: absolute; inset-inline-start: 0; top: 0; + display: grid; place-items: center; + width: 48px; height: 48px; border-radius: 50%; + background: var(--emerald-800); color: var(--gold-400); + font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; font-weight: 600; + box-shadow: inset 0 0 0 1.5px var(--gold-500); + transition: transform 0.35s var(--ease-spring), box-shadow 0.3s ease; +} +.step:hover .step-num { transform: scale(1.12); box-shadow: inset 0 0 0 1.5px var(--gold-500), var(--shadow-gold); } + +/* ---------- Stats ---------- */ +.stats-section { background: var(--emerald-900); color: #f2f7f3; } +.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; } +.stat { display: grid; gap: 0.35rem; } +.stat-number { font-family: "Fraunces", Georgia, serif; font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 700; color: var(--gold-300); line-height: 1; } +[dir="rtl"] .stat-number { font-family: "Almarai", sans-serif; } +.stat-suffix { font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; color: var(--gold-400); } +.stat-label { font-size: 0.95rem; color: #b9cdc0; } + +/* ---------- Quote cards ---------- */ +.quote-card { + background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg); + padding: 1.8rem; box-shadow: var(--shadow-card); + transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); +} +.quote-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); } +.quote-card p { font-style: italic; color: var(--ink-soft); margin-block-end: 1.2rem; font-size: 1.05rem; } +.quote-card footer { font-weight: 600; color: var(--emerald-800); } + +/* ---------- Split ---------- */ +.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; } +.check-list { margin-block: 1.8rem 2.2rem; display: grid; gap: 0.9rem; } +.check-list li { position: relative; padding-inline-start: 2rem; color: var(--ink-soft); } +.check-list li::before { + content: "✓"; position: absolute; inset-inline-start: 0; top: 0; + color: var(--gold-600); font-weight: 700; +} + +.panel { + background: + radial-gradient(340px 220px at 90% 0%, rgb(198 161 91 / 0.28), transparent 55%), + linear-gradient(150deg, var(--emerald-800), var(--emerald-950)); + border-radius: var(--radius-xl); padding: 2rem; box-shadow: var(--shadow-lift); +} +.panel-card { + background: rgb(251 247 238 / 0.07); border: 1px solid rgb(230 205 142 / 0.25); + border-radius: var(--radius-lg); padding: 1.8rem; color: #e8f0ea; + display: grid; gap: 1.1rem; +} +.panel-eyebrow { + font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; + text-transform: uppercase; color: var(--gold-400); +} +[dir="rtl"] .panel-eyebrow { letter-spacing: 0; } +.panel-line { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; } +.panel-line strong { color: var(--gold-300); font-family: "Fraunces", Georgia, serif; text-align: end; } +[dir="rtl"] .panel-line strong { font-family: "Almarai", sans-serif; } + +/* ---------- Pricing ---------- */ +.pricing-grid { align-items: start; } +.pricing-card { + position: relative; background: #fff; border: 1px solid var(--hairline); + border-radius: var(--radius-xl); padding: 2.2rem; box-shadow: var(--shadow-card); + transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); +} +.pricing-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); } +.pricing-featured { + border-color: var(--gold-500); transform: scale(1.03); z-index: 1; + background: linear-gradient(180deg, #fff, var(--ivory)); +} +.pricing-featured:hover { transform: scale(1.03) translateY(-5px); } +.pricing-badge { + position: absolute; inset-block-start: -12px; inset-inline-start: 50%; + transform: translateX(-50%); + background: var(--gold-500); color: var(--emerald-950); + font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; + padding: 0.35rem 0.9rem; border-radius: var(--radius-pill); +} +.price { font-family: "Fraunces", Georgia, serif; font-size: 2.8rem; font-weight: 700; color: var(--emerald-800); margin-block: 0.8rem 1.2rem; } +[dir="rtl"] .price { font-family: "Almarai", sans-serif; } +.price .currency { font-size: 1.1rem; font-weight: 600; color: var(--gold-600); margin-inline-end: 0.3rem; vertical-align: super; } +.price .period { font-size: 1.05rem; color: var(--ink-soft); font-weight: 500; } +.pricing-features { display: grid; gap: 0.75rem; margin-block: 0 1.8rem; font-size: 0.98rem; color: var(--ink-soft); } +.pricing-features li::before { content: "✓"; color: var(--gold-600); font-weight: 700; margin-inline-end: 0.5rem; } + +/* ---------- FAQ ---------- */ +.faq { display: grid; gap: 1rem; margin-block-start: 2.2rem; } +.faq-item { + background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-md); + padding: 1.1rem 1.4rem; box-shadow: var(--shadow-card); + transition: box-shadow 0.25s ease, transform 0.25s var(--ease-out); +} +.faq-item:hover { box-shadow: var(--shadow-lift); } +.faq-item summary { + font-weight: 600; color: var(--emerald-800); cursor: pointer; list-style: none; + display: flex; justify-content: space-between; align-items: center; gap: 1rem; +} +.faq-item summary::-webkit-details-marker { display: none; } +.faq-item summary::after { + content: "+"; font-size: 1.5rem; color: var(--gold-600); transition: transform 0.3s var(--ease-out); +} +.faq-item[open] summary::after { transform: rotate(45deg); } +.faq-item p { color: var(--ink-soft); padding-block-start: 0.9rem; } + +/* ---------- Category visual ---------- */ +.category-list { margin-block: 1.6rem 2rem; display: grid; gap: 0.9rem; } +.category-list li { position: relative; padding-inline-start: 1.8rem; color: var(--ink-soft); } +.category-list li::before { content: "●"; position: absolute; inset-inline-start: 0; color: var(--gold-600); font-size: 0.6rem; top: 0.45rem; } +.category-visual { position: relative; min-height: 320px; } +.visual-card { + position: absolute; display: grid; place-items: center; + width: 92px; height: 92px; border-radius: var(--radius-lg); + background: #fff; border: 1px solid var(--hairline); font-size: 2.4rem; + box-shadow: var(--shadow-card); animation: float 5s ease-in-out infinite; +} +.visual-card-1 { inset-inline-start: 10%; top: 5%; animation-delay: 0s; } +.visual-card-2 { inset-inline-end: 15%; top: 20%; animation-delay: 1s; } +.visual-card-3 { inset-inline-start: 25%; bottom: 10%; animation-delay: 2s; } +.visual-card-4 { inset-inline-end: 10%; bottom: 25%; animation-delay: 1.5s; } + +@keyframes float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-14px); } +} + +/* ---------- CTA band ---------- */ +.cta-band { + position: relative; overflow: hidden; + background: + radial-gradient(620px 340px at 12% 120%, rgb(31 132 89 / 0.38), transparent 55%), + radial-gradient(620px 340px at 88% -20%, rgb(198 161 91 / 0.22), transparent 55%), + var(--emerald-950); + color: #f2f7f3; padding-block: clamp(4rem, 9vw, 6rem); +} +.cta-inner { position: relative; z-index: 1; text-align: center; max-width: 680px; } +.cta-inner h2 { color: #fff; } +.cta-inner .lede { margin-inline: auto; margin-block-start: 0.9rem; } + +/* ---------- Contact ---------- */ +.contact-form { display: grid; gap: 1.2rem; margin-block-start: 1.8rem; } +.contact-form label { font-weight: 600; font-size: 0.95rem; color: var(--emerald-800); } +.contact-form input, +.contact-form select, +.contact-form textarea { + width: 100%; padding: 0.9rem 1.1rem; + border-radius: var(--radius-md); border: 1.5px solid var(--hairline); + background: #fff; color: var(--ink); font: inherit; + transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; +} +.contact-form input:focus, +.contact-form select:focus, +.contact-form textarea:focus { + outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 4px rgb(198 161 91 / 0.12); + transform: translateY(-1px); +} +.contact-info { display: grid; gap: 1rem; } +.info-card { + background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg); + padding: 1.5rem; box-shadow: var(--shadow-card); + transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); +} +.info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } +.info-card h3 { margin-block-end: 0.35rem; } +.info-card p, .info-card a { color: var(--ink-soft); } +.info-card a:hover { color: var(--emerald-700); } +.form-note { margin-block-start: 0.5rem; font-size: 0.98rem; color: var(--emerald-700); min-height: 1.4em; } + +/* ---------- Section dark ---------- */ +.section-dark { + background: + radial-gradient(800px 360px at 80% -10%, rgb(198 161 91 / 0.14), transparent 55%), + radial-gradient(800px 460px at 10% 110%, rgb(31 132 89 / 0.22), transparent 55%), + linear-gradient(165deg, var(--emerald-900), var(--emerald-950)); + color: #f2f7f3; +} +.section-dark h2 { color: #fff; } +.section-dark h3 { color: #fff; } +.section-dark .lede { color: #cfe0d6; } + +/* ---------- Feature cards ---------- */ +.feature-grid { display: grid; gap: 1.5rem; margin-block-start: 3rem; } +.feature-card { + position: relative; overflow: hidden; + background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-xl); + padding: 2.2rem; box-shadow: var(--shadow-card); + transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); +} +.feature-card::before { + content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0; + width: 100%; height: 4px; + background: linear-gradient(90deg, var(--gold-400), var(--gold-500)); + transform: scaleX(0); transform-origin: inline-start; + transition: transform 0.45s var(--ease-out); +} +.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); } +.feature-card:hover::before { transform: scaleX(1); } +.feature-card h3 { font-size: 1.45rem; margin-block: 1rem 0.6rem; } +.feature-card p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; } +.feature-icon { + display: inline-grid; place-items: center; + width: 64px; height: 64px; border-radius: var(--radius-lg); + background: linear-gradient(135deg, var(--emerald-50), var(--sand)); + font-size: 1.9rem; + box-shadow: 0 4px 12px rgb(20 85 61 / 0.08); + transition: transform 0.35s var(--ease-spring); +} +.feature-card:hover .feature-icon { transform: scale(1.12) rotate(-6deg); } + +.feature-card-dark { + background: rgb(255 255 255 / 0.04); + border-color: rgb(230 205 142 / 0.18); +} +.feature-card-dark p { color: #cfe0d6; } +.feature-card-dark::before { background: linear-gradient(90deg, var(--gold-400), var(--gold-600)); } +.feature-icon-dark { + background: linear-gradient(135deg, var(--emerald-800), var(--emerald-700)); + box-shadow: 0 4px 12px rgb(0 0 0 / 0.25); +} + +/* ---------- Parallax ---------- */ +.parallax { will-change: transform; } + +/* ---------- Text reveal ---------- */ +.hero-title.text-reveal { animation: none !important; opacity: 1; transform: none; } +.text-reveal .word { + display: inline-block; opacity: 0; transform: translateY(18px); + animation: word-up 0.7s var(--ease-out) forwards; +} +@keyframes word-up { + to { opacity: 1; transform: translateY(0); } +} + +/* ---------- Footer ---------- */ +.site-footer { background: var(--emerald-950); color: #b9cdc0; padding-block: 3.5rem 1.5rem; } +.footer-inner { + display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between; + padding-block-end: 2.2rem; border-block-end: 1px solid rgb(230 205 142 / 0.15); +} +.footer-brand { display: grid; gap: 0.9rem; max-width: 320px; font-size: 0.95rem; } +.footer-col { display: grid; gap: 0.65rem; } +.footer-col h4 { color: var(--gold-300); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; margin-block-end: 0.4rem; } +.footer-col a { font-size: 0.95rem; transition: color 0.2s ease; } +.footer-col a:hover { color: var(--gold-300); } +.footer-legal { padding-block-start: 1.6rem; font-size: 0.82rem; color: #7d9488; } + +/* ---------- Responsive ---------- */ +@media (max-width: 980px) { + .grid-2, .grid-3, .steps, .split, .stats-grid { grid-template-columns: 1fr; } + .bento-3 { grid-template-columns: 1fr; } + .bento-3 .bento-card:first-child { grid-column: span 1; grid-row: span 1; } + .pricing-featured { transform: none; } + .pricing-featured:hover { transform: translateY(-5px); } + .nav { display: none; } + .menu-toggle { display: block; } + .header-actions .btn-primary.btn-sm { display: none; } + .category-visual { min-height: 260px; } + .hero-apple .hero-title { font-size: clamp(2.6rem, 10vw, 4rem); } +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + .parallax { transform: none !important; } +} + +@media (max-width: 640px) { + .hero-ctas { flex-direction: column; align-items: stretch; } + .hero-ctas .btn { width: 100%; } + .btn { width: 100%; } + .trust-inner { flex-direction: column; text-align: center; } + .step { padding-inline-start: 3.4rem; } + .panel-line { flex-direction: column; gap: 0.2rem; } + .device-frame { width: min(260px, 72vw); } + .header-inner { gap: 1rem; } +} diff --git a/wholesale.html b/wholesale.html new file mode 100644 index 0000000..12fade9 --- /dev/null +++ b/wholesale.html @@ -0,0 +1,192 @@ + + + + + + Wholesale supply — Ordenax + + + + + + + + + + + +
+
+ + + ORDENAX + + +
+ + Get started + +
+
+
+ + +
+
+ +
+

For suppliers and distributors

+

Supply the stores that feed the Kingdom.

+ +

A digital wholesale channel that connects your products to neighborhood stores across Saudi Arabia.

+
+ Become a supplier + For stores +
+
+
+ +
+
+
+

Why suppliers partner with us

+

Reach more stores with less overhead

+ +
+
+
+ +

Ready store network

+

Access hundreds of active grocery stores already ordering through Ordenax.

+
+
+ +

Demand insights

+

See what stores are buying, when they restock, and which products move fastest.

+
+
+ +

Reliable logistics

+

Coordinate deliveries through your own fleet or our trusted logistics partners.

+
+
+ +

Clear invoices

+

Every order generates an invoice with correct VAT breakdown and payment status.

+
+
+ +

Digital catalog

+

Publish SKUs, photos and prices once. Stores see updates in real time.

+
+
+ +

Local support

+

Work with a Saudi-based team that understands retail, seasons and supply cycles.

+
+
+
+
+ +
+
+
+
+

For stores

+

Restock without the runaround

+ +
+

Find what you need, compare suppliers, and keep your shelves full — all from one screen.

+
    +
  • Wide catalog of groceries, household and chilled goods
    • +
  • Competitive wholesale prices updated daily
    • +
  • Predictable delivery windows you can plan around
    • +
  • One invoice per order with clear VAT
    • +
+ See store plans +
+
+
+

How wholesale works

+

Browse catalog1

+

Place order2

+

Receive delivery3

+

Pay invoice4

+
+
+
+
+ +
+
+

Wholesale questions

+ +
+
+ Who can become a supplier? +

Licensed distributors, manufacturers and importers of food, beverages, household or personal-care products in Saudi Arabia.

+
+
+ How do stores pay? +

Stores pay against the supplier's invoice through agreed payment terms — bank transfer, credit or cash on delivery.

+
+
+ Do I need to list my whole catalog? +

No. Start with your best-moving items and expand as you see demand from the network.

+
+
+
+
+ +
+
+

Grow your wholesale reach

+

Talk to our partnerships team and see how Ordenax fits your distribution business.

+ Talk to sales +
+
+
+ + + + + +