Ordenax landing website — initial release
This commit is contained in:
Ordenax Lead Engineer committed
commit
f59f8503eb
10 files changed
+2469
No files matched your search
@@ -0,0 +1,7 @@
|
||||
# OS / editors
|
||||
.DS_Store
|
||||
.idea/
|
||||
.vscode/
|
||||
|
||||
# logs
|
||||
*.log
|
||||
@@ -0,0 +1,3 @@
|
||||
FROM nginx:alpine
|
||||
COPY . /usr/share/nginx/html
|
||||
EXPOSE 80
|
||||
@@ -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 `<link rel="canonical">` once the domain is known.
|
||||
@@ -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() ? `<span class="word" style="animation-delay: ${0.25 + i * 0.08}s">${word}</span>` : 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();
|
||||
+153
@@ -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>
|
||||
+294
@@ -0,0 +1,294 @@
|
||||
<!doctype html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Ordenax — Groceries from your local stores, delivered</title>
|
||||
<meta name="description" content="Ordenax is the Saudi grocery platform that lets shoppers buy from local stores, helps stores sell smarter, and powers wholesale restocking — bilingual EN/AR." />
|
||||
<meta property="og:title" content="Ordenax — Groceries from your local stores, delivered" />
|
||||
<meta property="og:description" content="Shop local, run your store, and restock wholesale on one platform built for Saudi Arabia." />
|
||||
<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="home">
|
||||
<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-apple">
|
||||
<div class="hero-glow" aria-hidden="true"></div>
|
||||
<div class="container hero-inner">
|
||||
<p class="eyebrow eyebrow-light hero-eyebrow" data-i18n="home.hero.eyebrow">Saudi grocery platform</p>
|
||||
<h1 class="hero-title" data-i18n="home.hero.title">Groceries from your local stores, delivered.</h1>
|
||||
<div class="gold-rule hero-rule" aria-hidden="true"></div>
|
||||
<p class="lede lede-light hero-lede" data-i18n="home.hero.lede">
|
||||
The platform that helps neighborhoods shop, sell and restock — in Arabic and English, online or off.
|
||||
</p>
|
||||
<div class="hero-ctas">
|
||||
<a class="btn btn-gold shimmer" href="shoppers.html" data-i18n="home.hero.cta1">Start shopping</a>
|
||||
<a class="btn btn-outline-light" href="stores.html" data-i18n="home.hero.cta2">Run your store</a>
|
||||
</div>
|
||||
<ul class="hero-badges">
|
||||
<li data-i18n="home.hero.badge1">Bilingual EN / AR</li>
|
||||
<li data-i18n="home.hero.badge2">Works without internet</li>
|
||||
<li data-i18n="home.hero.badge3">SAR · VAT included</li>
|
||||
</ul>
|
||||
<div class="hero-visual parallax" data-parallax="-0.06" aria-hidden="true">
|
||||
<div class="device-frame">
|
||||
<div class="device-notch"></div>
|
||||
<div class="device-screen">
|
||||
<div class="device-card">
|
||||
<div class="row"><span class="thumb">🥦</span><div style="flex:1"><div class="line medium"></div><div class="line short"></div></div></div>
|
||||
<div class="row"><span class="thumb">🍞</span><div style="flex:1"><div class="line medium"></div><div class="line short"></div></div></div>
|
||||
<div class="row"><span class="thumb">🥛</span><div style="flex:1"><div class="line medium"></div><div class="line short"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-ivory" id="why">
|
||||
<div class="container narrow">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow" data-i18n="home.why.eyebrow">Why Ordenax</p>
|
||||
<h2 data-i18n="home.why.title">Grocery made simple for everyone.</h2>
|
||||
<p class="lede" data-i18n="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.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="shoppers">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow" data-i18n="home.shoppers.eyebrow">For shoppers</p>
|
||||
<h2 data-i18n="home.shoppers.title">Your weekly shop, done in minutes.</h2>
|
||||
<p class="lede" data-i18n="home.shoppers.lede">No more crowded aisles, sold-out shelves, or wondering when your order will arrive.</p>
|
||||
</div>
|
||||
<div class="grid grid-2 feature-grid">
|
||||
<article class="feature-card reveal" data-animate="card">
|
||||
<div class="feature-icon" aria-hidden="true">🏪</div>
|
||||
<h3 data-i18n="home.shoppers.b1.title">Shop stores you already trust</h3>
|
||||
<p data-i18n="home.shoppers.b1.body">Your favorite neighborhood grocer, bakery, and produce stand — all in one place.</p>
|
||||
</article>
|
||||
<article class="feature-card reveal" data-animate="card">
|
||||
<div class="feature-icon" aria-hidden="true">⚡</div>
|
||||
<h3 data-i18n="home.shoppers.b2.title">Get it fast</h3>
|
||||
<p data-i18n="home.shoppers.b2.body">Same-day delivery in as little as 25 minutes, because fresh shouldn't mean waiting.</p>
|
||||
</article>
|
||||
<article class="feature-card reveal" data-animate="card">
|
||||
<div class="feature-icon" aria-hidden="true">✓</div>
|
||||
<h3 data-i18n="home.shoppers.b3.title">Never guess stock again</h3>
|
||||
<p data-i18n="home.shoppers.b3.body">If it's on the app, it's on the shelf. No substitutions you didn't ask for.</p>
|
||||
</article>
|
||||
<article class="feature-card reveal" data-animate="card">
|
||||
<div class="feature-icon" aria-hidden="true">🔄</div>
|
||||
<h3 data-i18n="home.shoppers.b4.title">Reorder in one tap</h3>
|
||||
<p data-i18n="home.shoppers.b4.body">Save your weekly basket and repeat it whenever life gets busy.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-dark" id="owners">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow eyebrow-light" data-i18n="home.owners.eyebrow">For store owners</p>
|
||||
<h2 data-i18n="home.owners.title">Run your store, not your paperwork.</h2>
|
||||
<p class="lede lede-light" data-i18n="home.owners.lede">Everything you need to sell more, stress less, and keep every riyal in your account.</p>
|
||||
</div>
|
||||
<div class="grid grid-2 feature-grid">
|
||||
<article class="feature-card feature-card-dark reveal" data-animate="card">
|
||||
<div class="feature-icon feature-icon-dark" aria-hidden="true">💰</div>
|
||||
<h3 data-i18n="home.owners.b1.title">Keep every sale</h3>
|
||||
<p data-i18n="home.owners.b1.body">No commission. No withheld funds. Customer payments go straight to you.</p>
|
||||
</article>
|
||||
<article class="feature-card feature-card-dark reveal" data-animate="card">
|
||||
<div class="feature-icon feature-icon-dark" aria-hidden="true">🖥️</div>
|
||||
<h3 data-i18n="home.owners.b2.title">One screen, every channel</h3>
|
||||
<p data-i18n="home.owners.b2.body">Counter sales, app orders, and wholesale restocking — all flowing into one simple system.</p>
|
||||
</article>
|
||||
<article class="feature-card feature-card-dark reveal" data-animate="card">
|
||||
<div class="feature-icon feature-icon-dark" aria-hidden="true">🌐</div>
|
||||
<h3 data-i18n="home.owners.b3.title">Sell even when offline</h3>
|
||||
<p data-i18n="home.owners.b3.body">The internet drops. Your sales don't. Everything syncs automatically once you're back online.</p>
|
||||
</article>
|
||||
<article class="feature-card feature-card-dark reveal" data-animate="card">
|
||||
<div class="feature-icon feature-icon-dark" aria-hidden="true">📈</div>
|
||||
<h3 data-i18n="home.owners.b4.title">Grow without the guesswork</h3>
|
||||
<p data-i18n="home.owners.b4.body">Real-time inventory, clear reports, and a direct line to nearby shoppers who want what you sell.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="marketplace">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow" data-i18n="home.pillars.eyebrow">One platform, three wins</p>
|
||||
<h2 data-i18n="home.pillars.title">Built for every side of grocery</h2>
|
||||
</div>
|
||||
<div class="bento bento-3">
|
||||
<article class="bento-card bento-card-dark reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">🛒</div>
|
||||
<h3 data-i18n="home.pillars.m.title">Shop local</h3>
|
||||
<p data-i18n="home.pillars.m.body">Order fresh groceries from nearby stores with same-day delivery and real stock you can trust.</p>
|
||||
<a class="card-link" href="shoppers.html" data-i18n="common.learnMore">Learn more</a>
|
||||
</article>
|
||||
<article class="bento-card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">🧾</div>
|
||||
<h3 data-i18n="home.pillars.p.title">Sell smarter</h3>
|
||||
<p data-i18n="home.pillars.p.body">A simple point-of-sale that brings counter sales and online orders together, even during outages.</p>
|
||||
<a class="card-link" href="stores.html" data-i18n="common.learnMore">Learn more</a>
|
||||
</article>
|
||||
<article class="bento-card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">📦</div>
|
||||
<h3 data-i18n="home.pillars.w.title">Restock wholesale</h3>
|
||||
<p data-i18n="home.pillars.w.body">Stores refill their shelves straight from suppliers, with clear invoices and no hidden inventory traps.</p>
|
||||
<a class="card-link" href="wholesale.html" data-i18n="common.learnMore">Learn more</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-sand">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow" data-i18n="home.how.eyebrow">How it works</p>
|
||||
<h2 data-i18n="home.how.title">From shelf to doorstep in three steps</h2>
|
||||
</div>
|
||||
<ol class="steps">
|
||||
<li class="step reveal" data-animate="step">
|
||||
<span class="step-num">1</span>
|
||||
<h3 data-i18n="home.how.s1.title">Order</h3>
|
||||
<p data-i18n="home.how.s1.body">A shopper picks products from a nearby store — in English or Arabic.</p>
|
||||
</li>
|
||||
<li class="step reveal" data-animate="step">
|
||||
<span class="step-num">2</span>
|
||||
<h3 data-i18n="home.how.s2.title">Prepare</h3>
|
||||
<p data-i18n="home.how.s2.body">The store receives, packs and confirms the order on the Ordenax system.</p>
|
||||
</li>
|
||||
<li class="step reveal" data-animate="step">
|
||||
<span class="step-num">3</span>
|
||||
<h3 data-i18n="home.how.s3.title">Deliver</h3>
|
||||
<p data-i18n="home.how.s3.body">A delivery partner drops it at the door. The store keeps the payment directly.</p>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section stats-section">
|
||||
<div class="container">
|
||||
<div class="stats-grid">
|
||||
<div class="stat reveal" data-animate="stat">
|
||||
<span class="stat-number" data-target="500">0</span><span class="stat-suffix">+</span>
|
||||
<span class="stat-label" data-i18n="home.stats.s1">partner stores</span>
|
||||
</div>
|
||||
<div class="stat reveal" data-animate="stat">
|
||||
<span class="stat-number" data-target="120">0</span><span class="stat-suffix">k+</span>
|
||||
<span class="stat-label" data-i18n="home.stats.s2">monthly orders</span>
|
||||
</div>
|
||||
<div class="stat reveal" data-animate="stat">
|
||||
<span class="stat-number" data-target="25">0</span><span class="stat-suffix" data-i18n="home.stats.s3suffix"> min</span>
|
||||
<span class="stat-label" data-i18n="home.stats.s3">average delivery</span>
|
||||
</div>
|
||||
<div class="stat reveal" data-animate="stat">
|
||||
<span class="stat-number" data-target="2">0</span>
|
||||
<span class="stat-label" data-i18n="home.stats.s4">languages</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-sand">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow" data-i18n="home.testimonials.eyebrow">What partners say</p>
|
||||
<h2 data-i18n="home.testimonials.title">Loved by stores, trusted by shoppers</h2>
|
||||
</div>
|
||||
<div class="grid grid-3">
|
||||
<blockquote class="quote-card reveal" data-animate="card">
|
||||
<p data-i18n="home.testimonials.t1.body">"We doubled our weekly orders within two months. The system is simple and our customers love ordering in Arabic."</p>
|
||||
<footer>— <span data-i18n="home.testimonials.t1.name">Abdullah, Al-Salam Market</span></footer>
|
||||
</blockquote>
|
||||
<blockquote class="quote-card reveal" data-animate="card">
|
||||
<p data-i18n="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."</p>
|
||||
<footer>— <span data-i18n="home.testimonials.t2.name">Noura, Riyadh</span></footer>
|
||||
</blockquote>
|
||||
<blockquote class="quote-card reveal" data-animate="card">
|
||||
<p data-i18n="home.testimonials.t3.body">"Restocking used to take three phone calls. Now we order once and the invoice is ready before delivery."</p>
|
||||
<footer>— <span data-i18n="home.testimonials.t3.name">Fahad, Green Cart</span></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-band" id="cta">
|
||||
<div class="container cta-inner reveal" data-animate="fade">
|
||||
<h2 data-i18n="home.cta.title">Ready to shop, sell, or supply?</h2>
|
||||
<p class="lede lede-light" data-i18n="home.cta.lede">Join the grocery platform built for the Kingdom.</p>
|
||||
<a class="btn btn-gold shimmer" href="contact.html" data-i18n="home.cta.button">Request a demo</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>
|
||||
+189
@@ -0,0 +1,189 @@
|
||||
<!doctype html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>For shoppers — Ordenax</title>
|
||||
<meta name="description" content="Order groceries from local stores on Ordenax. Same-day delivery, real stock, bilingual Arabic/English support." />
|
||||
<meta property="og:title" content="For shoppers — Ordenax" />
|
||||
<meta property="og:description" content="Your neighborhood grocery store, now in your pocket." />
|
||||
<meta property="og:type" content="website" />
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%230F3D2C'/%3E%3Ccircle cx='32' cy='32' r='29' fill='none' stroke='%23C6A15B' stroke-width='1.5'/%3E%3Ctext x='32' y='42' font-family='Georgia,serif' font-size='30' fill='%23C6A15B' text-anchor='middle'%3EO%3C/text%3E%3C/svg%3E" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Almarai:wght@400;700;800&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body data-page="shoppers">
|
||||
<header class="site-header" data-animate="nav">
|
||||
<div class="container header-inner">
|
||||
<a class="brand" href="index.html" aria-label="Ordenax home">
|
||||
<span class="logo-disc" aria-hidden="true">O</span>
|
||||
<span class="wordmark">ORDENAX</span>
|
||||
</a>
|
||||
<nav class="nav" aria-label="Primary">
|
||||
<a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
|
||||
<a href="stores.html" data-i18n="nav.stores">Stores</a>
|
||||
<a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
|
||||
<a href="contact.html" data-i18n="nav.contact">Contact</a>
|
||||
</nav>
|
||||
<div class="header-actions">
|
||||
<button id="lang-toggle" class="lang-toggle" type="button" aria-label="Switch language">العربية</button>
|
||||
<a class="btn btn-primary btn-sm" href="contact.html" data-i18n="nav.cta">Get started</a>
|
||||
<button class="menu-toggle" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-nav">☰</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div id="mobile-nav" class="mobile-nav" aria-hidden="true">
|
||||
<nav aria-label="Mobile">
|
||||
<a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
|
||||
<a href="stores.html" data-i18n="nav.stores">Stores</a>
|
||||
<a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
|
||||
<a href="contact.html" data-i18n="nav.contact">Contact</a>
|
||||
<a class="btn btn-primary" href="contact.html" data-i18n="nav.cta">Get started</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<section class="hero hero-small">
|
||||
<div class="hero-glow" aria-hidden="true"></div>
|
||||
<div class="container hero-inner">
|
||||
<p class="eyebrow eyebrow-light hero-eyebrow" data-i18n="shoppers.hero.eyebrow">For shoppers</p>
|
||||
<h1 class="hero-title" data-i18n="shoppers.hero.title">Your neighborhood store, now in your pocket.</h1>
|
||||
<div class="gold-rule hero-rule" aria-hidden="true"></div>
|
||||
<p class="lede lede-light hero-lede" data-i18n="shoppers.hero.lede">Order fresh groceries from trusted local stores and get same-day delivery — in Arabic or English.</p>
|
||||
<div class="hero-ctas">
|
||||
<a class="btn btn-gold shimmer" href="contact.html" data-i18n="shoppers.hero.cta">Download the app</a>
|
||||
<a class="btn btn-outline-light" href="#benefits" data-i18n="common.seeHow">See how it works</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="benefits">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow" data-i18n="shoppers.benefits.eyebrow">Why shop on Ordenax</p>
|
||||
<h2 data-i18n="shoppers.benefits.title">Fresh, fast and familiar</h2>
|
||||
<div class="gold-rule" aria-hidden="true"></div>
|
||||
</div>
|
||||
<div class="grid grid-3">
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">⚡</div>
|
||||
<h3 data-i18n="shoppers.benefits.b1.title">Same-day delivery</h3>
|
||||
<p data-i18n="shoppers.benefits.b1.body">Get your groceries in as little as 25 minutes from stores you already know.</p>
|
||||
</article>
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">✓</div>
|
||||
<h3 data-i18n="shoppers.benefits.b2.title">Real stock</h3>
|
||||
<p data-i18n="shoppers.benefits.b2.body">If it's on the app, it's on the shelf — no more canceled items after checkout.</p>
|
||||
</article>
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">🌙</div>
|
||||
<h3 data-i18n="shoppers.benefits.b3.title">Bilingual by design</h3>
|
||||
<p data-i18n="shoppers.benefits.b3.body">Switch between Arabic and English anytime. Product names, search and checkout follow you.</p>
|
||||
</article>
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">🤝</div>
|
||||
<h3 data-i18n="shoppers.benefits.b4.title">Support local</h3>
|
||||
<p data-i18n="shoppers.benefits.b4.body">Every order goes directly to a store in your community — your money stays in the neighborhood.</p>
|
||||
</article>
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">🔄</div>
|
||||
<h3 data-i18n="shoppers.benefits.b5.title">Easy reorder</h3>
|
||||
<p data-i18n="shoppers.benefits.b5.body">Repeat your weekly list in one tap. Save favorites and scheduled baskets for busy days.</p>
|
||||
</article>
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">🔒</div>
|
||||
<h3 data-i18n="shoppers.benefits.b6.title">Pay with confidence</h3>
|
||||
<p data-i18n="shoppers.benefits.b6.body">Choose cash on delivery or trusted local payment options. The store handles your payment directly.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-sand">
|
||||
<div class="container split">
|
||||
<div class="reveal" data-animate="fade">
|
||||
<div class="section-heading" style="text-align: start; margin-inline: 0;">
|
||||
<p class="eyebrow" data-i18n="shoppers.categories.eyebrow">Everything you need</p>
|
||||
<h2 data-i18n="shoppers.categories.title">From pantry to produce</h2>
|
||||
<div class="gold-rule" aria-hidden="true"></div>
|
||||
</div>
|
||||
<p class="lede" data-i18n="shoppers.categories.lede">Browse thousands of products across the categories your family uses every day.</p>
|
||||
<ul class="category-list">
|
||||
<li data-i18n="shoppers.categories.l1">Fresh fruit and vegetables</li>
|
||||
<li data-i18n="shoppers.categories.l2">Dairy, eggs and chilled goods</li>
|
||||
<li data-i18n="shoppers.categories.l3">Rice, oil, spices and staples</li>
|
||||
<li data-i18n="shoppers.categories.l4">Household and personal care</li>
|
||||
<li data-i18n="shoppers.categories.l5">Beverages, snacks and bakery</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="category-visual reveal" data-animate="fade">
|
||||
<div class="visual-card visual-card-1">🥦</div>
|
||||
<div class="visual-card visual-card-2">🍞</div>
|
||||
<div class="visual-card visual-card-3">🥛</div>
|
||||
<div class="visual-card visual-card-4">🧴</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container narrow">
|
||||
<h2 class="centered" data-i18n="shoppers.faq.title">Common questions</h2>
|
||||
<div class="gold-rule centered-rule" aria-hidden="true"></div>
|
||||
<div class="faq">
|
||||
<details class="faq-item reveal" data-animate="card">
|
||||
<summary data-i18n="shoppers.faq.q1">Who delivers my order?</summary>
|
||||
<p data-i18n="shoppers.faq.a1">Your chosen store prepares the order and a local delivery partner brings it to you. You can track the status in the app.</p>
|
||||
</details>
|
||||
<details class="faq-item reveal" data-animate="card">
|
||||
<summary data-i18n="shoppers.faq.q2">Can I pay with cash?</summary>
|
||||
<p data-i18n="shoppers.faq.a2">Yes. The store collects your payment directly — cash on delivery or local digital payments, whichever you prefer.</p>
|
||||
</details>
|
||||
<details class="faq-item reveal" data-animate="card">
|
||||
<summary data-i18n="shoppers.faq.q3">What if an item is out of stock?</summary>
|
||||
<p data-i18n="shoppers.faq.a3">Stores update availability in real time. If something changes, they will contact you to suggest a replacement or refund.</p>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-band">
|
||||
<div class="container cta-inner reveal" data-animate="fade">
|
||||
<h2 data-i18n="shoppers.cta.title">Your first order is waiting</h2>
|
||||
<p class="lede lede-light" data-i18n="shoppers.cta.lede">Download the app and shop the stores you already trust.</p>
|
||||
<a class="btn btn-gold shimmer" href="contact.html" data-i18n="shoppers.cta.button">Get the app</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container footer-inner">
|
||||
<div class="footer-brand">
|
||||
<a class="brand brand-light" href="index.html" aria-label="Ordenax home">
|
||||
<span class="logo-disc" aria-hidden="true">O</span>
|
||||
<span class="wordmark">ORDENAX</span>
|
||||
</a>
|
||||
<p data-i18n="footer.tag">Marketplace · POS · Wholesale — bilingual by construction.</p>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4 data-i18n="footer.product">Product</h4>
|
||||
<a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
|
||||
<a href="stores.html" data-i18n="nav.stores">Stores</a>
|
||||
<a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4 data-i18n="footer.company">Company</h4>
|
||||
<a href="contact.html" data-i18n="nav.contact">Contact</a>
|
||||
<a href="#" data-i18n="footer.privacy">Privacy</a>
|
||||
<a href="#" data-i18n="footer.terms">Terms</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container footer-legal">
|
||||
<p data-i18n="footer.legal">© 2026 Ordenax. Made in Saudi Arabia.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+213
@@ -0,0 +1,213 @@
|
||||
<!doctype html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>For stores — Ordenax</title>
|
||||
<meta name="description" content="Grow your grocery store with Ordenax. More orders, simple point-of-sale, direct payments, and wholesale restocking — bilingual for Saudi Arabia." />
|
||||
<meta property="og:title" content="For stores — Ordenax" />
|
||||
<meta property="og:description" content="Turn your counter into a modern grocery business with Ordenax." />
|
||||
<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="stores">
|
||||
<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="stores.hero.eyebrow">For store owners</p>
|
||||
<h1 class="hero-title" data-i18n="stores.hero.title">Turn your counter into a modern grocery business.</h1>
|
||||
<div class="gold-rule hero-rule" aria-hidden="true"></div>
|
||||
<p class="lede lede-light hero-lede" data-i18n="stores.hero.lede">Get more orders, simplify daily work, and keep every payment in your own hands.</p>
|
||||
<div class="hero-ctas">
|
||||
<a class="btn btn-gold shimmer" href="contact.html" data-i18n="stores.hero.cta">Request a demo</a>
|
||||
<a class="btn btn-outline-light" href="#pricing" data-i18n="common.seePricing">See pricing</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow" data-i18n="stores.benefits.eyebrow">Why stores choose Ordenax</p>
|
||||
<h2 data-i18n="stores.benefits.title">Everything you need to grow</h2>
|
||||
<div class="gold-rule" aria-hidden="true"></div>
|
||||
</div>
|
||||
<div class="grid grid-3">
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">📈</div>
|
||||
<h3 data-i18n="stores.benefits.b1.title">More orders</h3>
|
||||
<p data-i18n="stores.benefits.b1.body">Reach nearby shoppers through the app and turn your store into a local online brand.</p>
|
||||
</article>
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">💰</div>
|
||||
<h3 data-i18n="stores.benefits.b2.title">Your money, your account</h3>
|
||||
<p data-i18n="stores.benefits.b2.body">You collect customer payments directly. We never hold your funds or take a slice of every sale.</p>
|
||||
</article>
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">🖥️</div>
|
||||
<h3 data-i18n="stores.benefits.b3.title">One simple screen</h3>
|
||||
<p data-i18n="stores.benefits.b3.body">Counter sales and app orders flow into one place — no switching between apps and notebooks.</p>
|
||||
</article>
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">🌐</div>
|
||||
<h3 data-i18n="stores.benefits.b4.title">Works without internet</h3>
|
||||
<p data-i18n="stores.benefits.b4.body">Keep ringing sales even when the connection drops. Everything syncs automatically once you're back online.</p>
|
||||
</article>
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">🗣️</div>
|
||||
<h3 data-i18n="stores.benefits.b5.title">Bilingual for your team</h3>
|
||||
<p data-i18n="stores.benefits.b5.body">Your staff can use Arabic or English — labels, receipts, and reports switch instantly.</p>
|
||||
</article>
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">📦</div>
|
||||
<h3 data-i18n="stores.benefits.b6.title">Restock in minutes</h3>
|
||||
<p data-i18n="stores.benefits.b6.body">Order wholesale supplies straight from the app, with clear invoices and predictable delivery.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-sand" id="pricing">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow" data-i18n="stores.pricing.eyebrow">Pricing</p>
|
||||
<h2 data-i18n="stores.pricing.title">Simple subscriptions, no hidden cuts</h2>
|
||||
<div class="gold-rule" aria-hidden="true"></div>
|
||||
<p class="lede" data-i18n="stores.pricing.lede">No marketplace commission. Just pick the POS plan that fits your store.</p>
|
||||
</div>
|
||||
<div class="grid grid-3 pricing-grid">
|
||||
<article class="pricing-card reveal" data-animate="card">
|
||||
<h3 data-i18n="stores.pricing.p1.title">Starter</h3>
|
||||
<p class="price"><span class="currency">SAR</span> 299<span class="period" data-i18n="stores.pricing.period">/month</span></p>
|
||||
<ul class="pricing-features">
|
||||
<li data-i18n="stores.pricing.p1.f1">1 store location</li>
|
||||
<li data-i18n="stores.pricing.p1.f2">Counter POS</li>
|
||||
<li data-i18n="stores.pricing.p1.f3">Basic reports</li>
|
||||
<li data-i18n="stores.pricing.p1.f4">Email support</li>
|
||||
</ul>
|
||||
<a class="btn btn-outline" href="contact.html" data-i18n="stores.pricing.cta">Choose Starter</a>
|
||||
</article>
|
||||
<article class="pricing-card pricing-featured reveal" data-animate="card">
|
||||
<span class="pricing-badge" data-i18n="stores.pricing.badge">Most popular</span>
|
||||
<h3 data-i18n="stores.pricing.p2.title">Growth</h3>
|
||||
<p class="price"><span class="currency">SAR</span> 599<span class="period" data-i18n="stores.pricing.period">/month</span></p>
|
||||
<ul class="pricing-features">
|
||||
<li data-i18n="stores.pricing.p2.f1">Up to 3 staff devices</li>
|
||||
<li data-i18n="stores.pricing.p2.f2">Counter + app orders</li>
|
||||
<li data-i18n="stores.pricing.p2.f3">Live inventory</li>
|
||||
<li data-i18n="stores.pricing.p2.f4">Priority support</li>
|
||||
</ul>
|
||||
<a class="btn btn-primary shimmer" href="contact.html" data-i18n="stores.pricing.cta">Choose Growth</a>
|
||||
</article>
|
||||
<article class="pricing-card reveal" data-animate="card">
|
||||
<h3 data-i18n="stores.pricing.p3.title">Enterprise</h3>
|
||||
<p class="price"><span class="currency">SAR</span> 999<span class="period" data-i18n="stores.pricing.period">/month</span></p>
|
||||
<ul class="pricing-features">
|
||||
<li data-i18n="stores.pricing.p3.f1">Multiple branches</li>
|
||||
<li data-i18n="stores.pricing.p3.f2">Advanced analytics</li>
|
||||
<li data-i18n="stores.pricing.p3.f3">Wholesale integrations</li>
|
||||
<li data-i18n="stores.pricing.p3.f4">Dedicated account manager</li>
|
||||
</ul>
|
||||
<a class="btn btn-outline" href="contact.html" data-i18n="stores.pricing.cta">Choose Enterprise</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow" data-i18n="stores.testimonials.eyebrow">Store stories</p>
|
||||
<h2 data-i18n="stores.testimonials.title">Built for Saudi stores</h2>
|
||||
<div class="gold-rule" aria-hidden="true"></div>
|
||||
</div>
|
||||
<div class="grid grid-3">
|
||||
<blockquote class="quote-card reveal" data-animate="card">
|
||||
<p data-i18n="stores.testimonials.t1.body">"We used to write every order by hand. Now we manage counter, app and wholesale orders in one place."</p>
|
||||
<footer>— <span data-i18n="stores.testimonials.t1.name">Khalid, Al-Andalus Market</span></footer>
|
||||
</blockquote>
|
||||
<blockquote class="quote-card reveal" data-animate="card">
|
||||
<p data-i18n="stores.testimonials.t2.body">"The bilingual interface made training our staff effortless. Sales kept flowing even during network issues."</p>
|
||||
<footer>— <span data-i18n="stores.testimonials.t2.name">Sara, Fresh Corner</span></footer>
|
||||
</blockquote>
|
||||
<blockquote class="quote-card reveal" data-animate="card">
|
||||
<p data-i18n="stores.testimonials.t3.body">"Our customers pay us directly, and the subscription is predictable. No surprises at the end of the month."</p>
|
||||
<footer>— <span data-i18n="stores.testimonials.t3.name">Omar, Daily Mart</span></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-band">
|
||||
<div class="container cta-inner reveal" data-animate="fade">
|
||||
<h2 data-i18n="stores.cta.title">Ready to upgrade your store?</h2>
|
||||
<p class="lede lede-light" data-i18n="stores.cta.lede">Book a 15-minute demo and see how Ordenax fits your counter.</p>
|
||||
<a class="btn btn-gold shimmer" href="contact.html" data-i18n="stores.cta.button">Book a demo</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>
|
||||
+654
@@ -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; }
|
||||
}
|
||||
+192
@@ -0,0 +1,192 @@
|
||||
<!doctype html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Wholesale supply — Ordenax</title>
|
||||
<meta name="description" content="Supply stores across Saudi Arabia through Ordenax. Digital catalog, demand insights, reliable logistics and clear invoicing." />
|
||||
<meta property="og:title" content="Wholesale supply — Ordenax" />
|
||||
<meta property="og:description" content="Supply the stores that feed the Kingdom with Ordenax wholesale." />
|
||||
<meta property="og:type" content="website" />
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%230F3D2C'/%3E%3Ccircle cx='32' cy='32' r='29' fill='none' stroke='%23C6A15B' stroke-width='1.5'/%3E%3Ctext x='32' y='42' font-family='Georgia,serif' font-size='30' fill='%23C6A15B' text-anchor='middle'%3EO%3C/text%3E%3C/svg%3E" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Almarai:wght@400;700;800&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body data-page="wholesale">
|
||||
<header class="site-header" data-animate="nav">
|
||||
<div class="container header-inner">
|
||||
<a class="brand" href="index.html" aria-label="Ordenax home">
|
||||
<span class="logo-disc" aria-hidden="true">O</span>
|
||||
<span class="wordmark">ORDENAX</span>
|
||||
</a>
|
||||
<nav class="nav" aria-label="Primary">
|
||||
<a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
|
||||
<a href="stores.html" data-i18n="nav.stores">Stores</a>
|
||||
<a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
|
||||
<a href="contact.html" data-i18n="nav.contact">Contact</a>
|
||||
</nav>
|
||||
<div class="header-actions">
|
||||
<button id="lang-toggle" class="lang-toggle" type="button" aria-label="Switch language">العربية</button>
|
||||
<a class="btn btn-primary btn-sm" href="contact.html" data-i18n="nav.cta">Get started</a>
|
||||
<button class="menu-toggle" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-nav">☰</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div id="mobile-nav" class="mobile-nav" aria-hidden="true">
|
||||
<nav aria-label="Mobile">
|
||||
<a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
|
||||
<a href="stores.html" data-i18n="nav.stores">Stores</a>
|
||||
<a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
|
||||
<a href="contact.html" data-i18n="nav.contact">Contact</a>
|
||||
<a class="btn btn-primary" href="contact.html" data-i18n="nav.cta">Get started</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<section class="hero hero-small">
|
||||
<div class="hero-glow" aria-hidden="true"></div>
|
||||
<div class="container hero-inner">
|
||||
<p class="eyebrow eyebrow-light hero-eyebrow" data-i18n="wholesale.hero.eyebrow">For suppliers and distributors</p>
|
||||
<h1 class="hero-title" data-i18n="wholesale.hero.title">Supply the stores that feed the Kingdom.</h1>
|
||||
<div class="gold-rule hero-rule" aria-hidden="true"></div>
|
||||
<p class="lede lede-light hero-lede" data-i18n="wholesale.hero.lede">A digital wholesale channel that connects your products to neighborhood stores across Saudi Arabia.</p>
|
||||
<div class="hero-ctas">
|
||||
<a class="btn btn-gold shimmer" href="contact.html" data-i18n="wholesale.hero.cta">Become a supplier</a>
|
||||
<a class="btn btn-outline-light" href="#for-stores" data-i18n="wholesale.hero.cta2">For stores</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="for-suppliers">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow" data-i18n="wholesale.suppliers.eyebrow">Why suppliers partner with us</p>
|
||||
<h2 data-i18n="wholesale.suppliers.title">Reach more stores with less overhead</h2>
|
||||
<div class="gold-rule" aria-hidden="true"></div>
|
||||
</div>
|
||||
<div class="grid grid-3">
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">🌐</div>
|
||||
<h3 data-i18n="wholesale.suppliers.b1.title">Ready store network</h3>
|
||||
<p data-i18n="wholesale.suppliers.b1.body">Access hundreds of active grocery stores already ordering through Ordenax.</p>
|
||||
</article>
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">📊</div>
|
||||
<h3 data-i18n="wholesale.suppliers.b2.title">Demand insights</h3>
|
||||
<p data-i18n="wholesale.suppliers.b2.body">See what stores are buying, when they restock, and which products move fastest.</p>
|
||||
</article>
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">🚚</div>
|
||||
<h3 data-i18n="wholesale.suppliers.b3.title">Reliable logistics</h3>
|
||||
<p data-i18n="wholesale.suppliers.b3.body">Coordinate deliveries through your own fleet or our trusted logistics partners.</p>
|
||||
</article>
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">📄</div>
|
||||
<h3 data-i18n="wholesale.suppliers.b4.title">Clear invoices</h3>
|
||||
<p data-i18n="wholesale.suppliers.b4.body">Every order generates an invoice with correct VAT breakdown and payment status.</p>
|
||||
</article>
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">🛒</div>
|
||||
<h3 data-i18n="wholesale.suppliers.b5.title">Digital catalog</h3>
|
||||
<p data-i18n="wholesale.suppliers.b5.body">Publish SKUs, photos and prices once. Stores see updates in real time.</p>
|
||||
</article>
|
||||
<article class="card reveal" data-animate="card">
|
||||
<div class="card-icon" aria-hidden="true">🤝</div>
|
||||
<h3 data-i18n="wholesale.suppliers.b6.title">Local support</h3>
|
||||
<p data-i18n="wholesale.suppliers.b6.body">Work with a Saudi-based team that understands retail, seasons and supply cycles.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-sand" id="for-stores">
|
||||
<div class="container split">
|
||||
<div class="reveal" data-animate="fade">
|
||||
<div class="section-heading" style="text-align: start; margin-inline: 0;">
|
||||
<p class="eyebrow" data-i18n="wholesale.stores.eyebrow">For stores</p>
|
||||
<h2 data-i18n="wholesale.stores.title">Restock without the runaround</h2>
|
||||
<div class="gold-rule" aria-hidden="true"></div>
|
||||
</div>
|
||||
<p class="lede" data-i18n="wholesale.stores.lede">Find what you need, compare suppliers, and keep your shelves full — all from one screen.</p>
|
||||
<ul class="check-list">
|
||||
<li data-i18n="wholesale.stores.f1">Wide catalog of groceries, household and chilled goods</li>
|
||||
<li data-i18n="wholesale.stores.f2">Competitive wholesale prices updated daily</li>
|
||||
<li data-i18n="wholesale.stores.f3">Predictable delivery windows you can plan around</li>
|
||||
<li data-i18n="wholesale.stores.f4">One invoice per order with clear VAT</li>
|
||||
</ul>
|
||||
<a class="btn btn-primary" href="stores.html" data-i18n="wholesale.stores.cta">See store plans</a>
|
||||
</div>
|
||||
<div class="panel reveal" data-animate="fade">
|
||||
<div class="panel-card">
|
||||
<p class="panel-eyebrow" data-i18n="wholesale.stores.panel.eyebrow">How wholesale works</p>
|
||||
<p class="panel-line"><span data-i18n="wholesale.stores.panel.l1">Browse catalog</span><strong data-i18n="wholesale.stores.panel.v1">1</strong></p>
|
||||
<p class="panel-line"><span data-i18n="wholesale.stores.panel.l2">Place order</span><strong data-i18n="wholesale.stores.panel.v2">2</strong></p>
|
||||
<p class="panel-line"><span data-i18n="wholesale.stores.panel.l3">Receive delivery</span><strong data-i18n="wholesale.stores.panel.v3">3</strong></p>
|
||||
<p class="panel-line"><span data-i18n="wholesale.stores.panel.l4">Pay invoice</span><strong data-i18n="wholesale.stores.panel.v4">4</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container narrow">
|
||||
<h2 class="centered" data-i18n="wholesale.faq.title">Wholesale questions</h2>
|
||||
<div class="gold-rule centered-rule" aria-hidden="true"></div>
|
||||
<div class="faq">
|
||||
<details class="faq-item reveal" data-animate="card">
|
||||
<summary data-i18n="wholesale.faq.q1">Who can become a supplier?</summary>
|
||||
<p data-i18n="wholesale.faq.a1">Licensed distributors, manufacturers and importers of food, beverages, household or personal-care products in Saudi Arabia.</p>
|
||||
</details>
|
||||
<details class="faq-item reveal" data-animate="card">
|
||||
<summary data-i18n="wholesale.faq.q2">How do stores pay?</summary>
|
||||
<p data-i18n="wholesale.faq.a2">Stores pay against the supplier's invoice through agreed payment terms — bank transfer, credit or cash on delivery.</p>
|
||||
</details>
|
||||
<details class="faq-item reveal" data-animate="card">
|
||||
<summary data-i18n="wholesale.faq.q3">Do I need to list my whole catalog?</summary>
|
||||
<p data-i18n="wholesale.faq.a3">No. Start with your best-moving items and expand as you see demand from the network.</p>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-band">
|
||||
<div class="container cta-inner reveal" data-animate="fade">
|
||||
<h2 data-i18n="wholesale.cta.title">Grow your wholesale reach</h2>
|
||||
<p class="lede lede-light" data-i18n="wholesale.cta.lede">Talk to our partnerships team and see how Ordenax fits your distribution business.</p>
|
||||
<a class="btn btn-gold shimmer" href="contact.html" data-i18n="wholesale.cta.button">Talk to sales</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container footer-inner">
|
||||
<div class="footer-brand">
|
||||
<a class="brand brand-light" href="index.html" aria-label="Ordenax home">
|
||||
<span class="logo-disc" aria-hidden="true">O</span>
|
||||
<span class="wordmark">ORDENAX</span>
|
||||
</a>
|
||||
<p data-i18n="footer.tag">Marketplace · POS · Wholesale — bilingual by construction.</p>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4 data-i18n="footer.product">Product</h4>
|
||||
<a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
|
||||
<a href="stores.html" data-i18n="nav.stores">Stores</a>
|
||||
<a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4 data-i18n="footer.company">Company</h4>
|
||||
<a href="contact.html" data-i18n="nav.contact">Contact</a>
|
||||
<a href="#" data-i18n="footer.privacy">Privacy</a>
|
||||
<a href="#" data-i18n="footer.terms">Terms</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container footer-legal">
|
||||
<p data-i18n="footer.legal">© 2026 Ordenax. Made in Saudi Arabia.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user