// sections.jsx — content sections for the Olvire site // Exposes: Nav, Hero, Marquee, WhatYouGet, MobileTour, DashboardTour, Process, Pricing, FAQ, Contact, Footer // (useState/useEffect/useRef already destructured in mockups.jsx) // ────────────────────────────────────────────────────────────── // Nav // ────────────────────────────────────────────────────────────── function Nav() { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener('scroll', onScroll); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); return ( ); } // ────────────────────────────────────────────────────────────── // Hero // ────────────────────────────────────────────────────────────── function Hero({ heroVariant, accent, preview }) { return (

Your regulars already love you.
Now you can actually keep them.

Most coffee shops have loyal customers but no way to reach them between visits. Your own Android and iOS app gives you their phone: push notifications, loyalty beans, one-tap reorder. They stay longer, come back more often, and bring friends. Payments go straight to your Stripe account. No per-order fees, no revenue cut.

Claim your spot See what you get
); } // HeroStage shows the dashboard with phone floating in front function HeroStage({ variant = "stack", preview = "abstract" }) { // variants: 'stack' (dashboard + phone overlapping), 'phone' (phone only, large), 'dash' (dashboard only) const Phone = preview === "abstract" ? PhoneAbstract : PhoneMockup; const AndroidPhone = preview === "abstract" ? PhoneAbstract : AndroidPhoneMockup; const Dash = preview === "screenshot" ? () => (
yourshop.olvire.com/admin
Menu dashboard
) : preview === "abstract" ? DashboardAbstract : DashboardMockup; if (preview === "hidden") { return (
PRODUCT PREVIEW · BY APPOINTMENT
O
We'd rather show you a live build than a screenshot.
REQUEST A DEMO ↓
); } if (variant === "phone") { return (
); } if (variant === "dash") { return (
{/* Warm ambient glow behind the dashboard */}
); } // default: stack — dashboard fills top, phones rise from bottom corners as proof return (
{/* Warm ambient glow behind dashboard */}
{/* Dashboard — full width, top-anchored, slight 3D recede */}
{/* iPhone — bottom-left corner, small so dashboard stays dominant */}
{/* Android — bottom-right corner, mirrored */}
); } // ────────────────────────────────────────────────────────────── // What You Get — two columns side by side // ────────────────────────────────────────────────────────────── function WhatYouGet() { return (
WHAT YOU GET

The digital relationship your regulars want. The tools your team needs.

Two things that work together: an app your customers download and keep on their phone, and a dashboard your whole team runs the floor from. Both carry your brand. Both work from day one. Built, launched, and looked after end to end.

{/* Customer app card */}
CUSTOMER · ANDROID + iOS

Your app, on Android and iOS

A real app your customers download and keep on their phone. Not a punch card, not a website link, not a generic loyalty tab inside Square. Your name, your colors, your menu.

  • Full menu with customisations Milks, shots, syrups, sizes. Customers build their order exactly how they like it.
  • Order ahead · drive through lane or counter pickup Customers choose how they're collecting. Their order is ready when they arrive.
  • Pay in the app · cards, Google Pay, Apple Pay Checkout takes seconds. Payment goes straight to your bank. No middleman, no cut.
  • Loyalty beans, referrals & favorites Beans on every order, redeemable for free items you configure. Regulars refer friends and both get rewarded.
  • Order tracking & one-tap reorder Customers watch their order move from new to ready. Their usual is one tap away next time.
{/* Dashboard card */}
YOUR TEAM · WEB DASHBOARD

One dashboard, two views

Baristas get a live order board. Orders appear the moment a customer places them and move through stages as they're made. You get everything else: menu, deals, analytics, customers. All in one place.

  • FOR BARISTAS
  • Live order board · New · Making · Ready Orders land instantly. Baristas work from any browser: tablet, laptop, or a screen behind the counter.
  • FOR OWNERS
  • Menu, modifiers & availability Pause an item in one tap when you run out of oat milk at 8:14am.
  • Deals, promo codes & broadcast notifications Happy hour discounts, item deals, flash promo codes. Push to every customer's phone in one tap.
  • Orders, refunds & analytics Full order history with search, filters, CSV export. Refunds in two taps.
  • Customer lookup, team roles & permissions Search any customer, adjust loyalty beans, view their order history. Owner, admin and barista roles: invite, scope, remove.
); } // ────────────────────────────────────────────────────────────── // Mobile Tour — phone with steppable feature list // ────────────────────────────────────────────────────────────── const MOBILE_STEPS = [ { title: "A direct line between visits", body: "Push notifications, loyalty progress, referral bonuses and drop announcements. Your customers see your brand outside the shop, not just at the counter." }, { title: "One-tap reorder, surfaced on launch", body: "The home screen leads with the customer's last order and quick favorites. Most repeat orders close in under 15 seconds." }, { title: "Loyalty without the punch card", body: "Customers earn beans on every order. When a reward unlocks they tap to apply it at checkout — the item comes through free in their cart. No punch card, no separate app, no third-party platform." }, { title: "Drive through or counter, their choice", body: "Customers pick how they're collecting at checkout. Live tracking shows them their order status and the barista sees exactly where to direct the handoff." }, ]; // Map each tour step index to a phone screen name // notif → account (beans + referral + notif toggle), reorder → menucat, loyalty → rewards, tracking → tracking const STEP_SCREENS = ['account', 'menucat', 'rewards', 'tracking']; function MobileTour({ preview = "abstract" }) { const [active, setActive] = useState(0); const Phone = preview === "abstract" ? PhoneAbstract : PhoneMockup; return (
FOR YOUR CUSTOMERS

Their next order, opened in 15 seconds.

Between visits, the app keeps your brand on their screen. Push notifications, loyalty rewards and referrals that turn regulars into recruiters.

{MOBILE_STEPS.map((s, i) => (
setActive(i)}>
{String(i+1).padStart(2, '0')}

{s.title}

{s.body}

))}
{preview !== "hidden" && (
)}
Get your app built
); } // ────────────────────────────────────────────────────────────── // Dashboard Tour — large dashboard with tabs // ────────────────────────────────────────────────────────────── function DashboardTour({ preview = "abstract" }) { const [tab, setTab] = useState("queue"); return (
FOR YOUR TEAM

A live order board for your baristas. Full controls for you.

Your baristas see every order the moment it's placed and work through them in sequence. You manage the menu, run deals, check revenue and issue refunds from anywhere, on any device. Same dashboard, different view depending on who's logged in.

{preview === "detailed" && (
{[ { id: "queue", label: "Live queue", icon: "activity" }, { id: "menu", label: "Menu", icon: "coffee" }, { id: "analytics", label: "Analytics", icon: "bar-chart-3" }, ].map(t => ( ))}
)} {preview !== "hidden" && (
{preview === "abstract" ? : preview === "screenshot" ? (
yourshop.olvire.com/admin
Live order board
) : }
)}
{[ { t: "Run a flash deal in under a minute", b: "Type a message, pick a discount, hit send. Every customer gets a push notification. Works for seasonal drops, early-close notices, or just a quiet Tuesday that needs a lift." }, { t: "Your regulars look after themselves", b: "Loyalty beans, referral bonuses and free item rewards run in the background. Customers come back because the app keeps nudging them. You don't have to." }, { t: "Run the shop from your phone", b: "Pause a menu item, check today's revenue, issue a refund or see who's waiting. Do it from wherever you are. You don't need to be behind the counter to stay in control." }, ].map((c, i) => (
{String(i+1).padStart(2,'0')}
{c.t}
{c.b}
))}
); } // ────────────────────────────────────────────────────────────── // Process — 4 steps // ────────────────────────────────────────────────────────────── function Process() { const steps = [ { n: "01", phase: "PHASE 1", title: "Discovery & brand kit", body: "Your menu, modifiers, brand assets, and payments are sorted. You get a working preview before anything is built.", checklist: ["Menu walkthrough", "Brand assets", "Stripe onboarding", "Working preview"] }, { n: "02", phase: "PHASE 2", title: "Custom build", body: "Your Android and iOS apps are built, the dashboard is configured, and payments go straight to your Stripe account.", checklist: ["Android app", "iOS app", "Dashboard configured", "Payments connected"] }, { n: "03", phase: "PHASE 3", title: "Soft launch", body: "Your team gets early access. A small group of your regulars pilots the app. Any tweaks are made before going wide.", checklist: ["Early team access", "Pilot with regulars", "Live monitoring", "Any tweaks needed"] }, { n: "04", phase: "PHASE 4", title: "Launch & ongoing", body: "You go live. Hosting, updates, and fixes are handled from here. You get a direct line to me, not a support ticket.", checklist: ["Public launch", "Ongoing updates & fixes", "Hosting & uptime", "Direct line to me"] }, ]; return (
HOW IT GETS BUILT

Four phases. One launch. Ongoing support.

From discovery to public launch and beyond, handled end to end. No unfinished handoffs, no scattered freelancers, no template you have to configure yourself.

{steps.map(s => (
{s.phase}

{s.title}

{s.body}

    {s.checklist.map((c, i) =>
  • {c}
    • )}
))}
); } // ────────────────────────────────────────────────────────────── // Pricing — single founding-rate card // ────────────────────────────────────────────────────────────── function Pricing() { const features = [ { h: "The customer app", items: ["Your own Android and iOS apps. Feels like it belongs on their phone, not a website in disguise", "Full menu with customisations, cart, checkout, loyalty, referrals, favourites", "Order ahead: drive through lane or counter pickup, live order tracking", "Pay in the app: cards, Google Pay, Apple Pay", "Push notifications: order updates, promos, announcements"] }, { h: "The admin dashboard", items: ["Live order board for baristas: New · Making · Ready", "Menu, modifier and availability management. Pause any item instantly", "Deals, promo codes and broadcast notifications in one tap", "Loyalty rules, referral bonuses and welcome rewards", "Customer lookup: search, view order history, adjust loyalty beans", "Full order history, refunds and CSV export", "Three roles: owner, admin, barista. Each sees only what they need"] }, { h: "What's included in the monthly", items: ["Hosting and uptime. Always on, looked after by me", "App and dashboard updates as the product improves", "Direct support line. Not a ticketing system, not offshore", "No per-order fee. No revenue cut. Ever."] }, ]; return (
SUMMER LAUNCH · 3 SPOTS

One price. Everything included.

We're building with three shops this summer. The first three get the launch rate: $1,997 setup instead of $3,997, and $199 a month that locks in and never goes up. When these spots fill, the launch rate is gone.

SUMMER LAUNCH · 3 SPOTS
Your own branded app, configured for your shop
One price covers the design, the Android and iOS apps, the dashboard, payment setup, the launch, and everything after.
ONE-TIME SETUP
$3,997 $1,997
Launch rate · 3 spots remaining
THEN MONTHLY
$199 / month
Hosting, updates, support. Locks in forever
{features.map((g, i) => (
{g.h}
    {g.items.map((it, j) => (
  • {it}
    • ))}
))}
Summer launch · 3 spots · by application only
Reserve my spot
Stripe charges its standard processing fees (2.9% + 30¢ US, lower in the EU/UK) directly on top. Those go to Stripe. No cut of your revenue, ever.
); } // ────────────────────────────────────────────────────────────── // FAQ // ────────────────────────────────────────────────────────────── function FAQ() { const [open, setOpen] = useState(0); const items = [ { q: "Who owns the app, the data, and the Stripe account?", a: "You own your customer data, your Stripe account, and the branded customer-facing app. It's your shop's brand. The Olvire platform itself (the dashboard, the backend) stays under my maintenance as part of your monthly. If you ever stop the engagement, you keep your customers, your Stripe revenue, and your brand. Nothing of yours leaves with me." }, { q: "Can I fully customize the brand, or is it a template?", a: "Everything is built around your shop. I start from your menu, your colours, your brand assets and the way your floor actually runs. The loyalty structure, the modifier names, the deal types, the reward thresholds are all configured to how you operate. Two shops built on Olvire won't look or feel alike." }, { q: "How does payment flow work? Do you take a cut?", a: "Stripe processes payments directly into your Stripe account. I never touch funds and I never take a cut of your revenue. Stripe charges its standard processing fees (2.9% + 30¢ in the US, lower in the EU/UK). Those are Stripe's, not mine." }, { q: "Will it be reliable? What happens if something goes wrong?", a: "Orders land on your board in real time. There's no meaningful delay between a customer placing an order and it appearing in front of your baristas. The infrastructure runs on Google's cloud, so uptime is solid. If something does break, you message me directly on Slack and I fix it. There's no support ticket queue, no call centre. It's just me, and I'm accountable." }, { q: "How does loyalty actually work?", a: "Customers earn beans on every order at a rate you set. Rewards are specific items you configure: a free latte, a free pastry, whatever you like. When a customer hits the bean threshold, the reward unlocks on their Rewards screen. They tap to apply it at checkout and the item comes through free in their cart. They place the order exactly as normal. No punch cards, no separate app, no separate login." }, { q: "Does this replace my POS or Square?", a: "No, and it's not meant to. Your POS handles in-person transactions. The app handles mobile orders and the customer relationship between visits. They run side by side. If you're on Square, Toast, or anything else, keep it. Nothing changes at the counter." }, { q: "Who runs support after launch?", a: "I do, personally. You get a private Slack channel with me, ongoing, with coverage across core US business hours (9am to 6pm ET), so timezones aren't a friction even though I'm based in London. Customer-facing support (refunds, missing orders) is handled by your team via the dashboard." }, ]; return (
FAQ

Questions, answered straight.

Couldn't find what you need? Drop me a line. I reply within a day.

{items.map((it, i) => (
{it.a}
))}
); } // ────────────────────────────────────────────────────────────── // Contact // ────────────────────────────────────────────────────────────── function Contact() { const [submitted, setSubmitted] = useState(false); const [submitting, setSubmitting] = useState(false); const [error, setError] = useState(null); const handleSubmit = async (e) => { e.preventDefault(); if (submitting) return; setSubmitting(true); setError(null); const data = new FormData(e.target); try { const res = await fetch("https://formspree.io/f/mvzyzrly", { method: "POST", body: data, headers: { Accept: "application/json" }, }); if (res.ok) { setSubmitted(true); e.target.reset(); } else { const body = await res.json().catch(() => ({})); setError(body?.errors?.[0]?.message || "Something went wrong. Please email haseeb@olvire.com directly."); } } catch (err) { setError("Network error. Please email haseeb@olvire.com directly."); } finally { setSubmitting(false); } }; return (
3 SPOTS REMAINING

Tell me about your shop.

30 minutes on a call, with me, personally. I'll show you a live build, walk you through the dashboard, and answer everything. You'll know exactly what you're getting before you commit to anything.

You'll talk to
Muhammad Haseeb
Muhammad Haseeb
FOUNDER · OLVIRE
haseeb@olvire.com
128 City Road · London EC1V 2NX
United Kingdom
{submitted ? (
Application received.
I'll review it personally and get back to you within 24 hours to schedule a call.
) : (
{error && (
{error}
)}
Application-based. I review every one personally.
)}
); } // ────────────────────────────────────────────────────────────── // Footer // ────────────────────────────────────────────────────────────── function Footer() { return ( ); } Object.assign(window, { Nav, Hero, WhatYouGet, MobileTour, DashboardTour, Process, Pricing, FAQ, Contact, Footer });