diff --git a/frontend/public/assets/campaign-burger.png b/frontend/public/assets/campaign-burger.png
new file mode 100644
index 00000000..ab5790c7
Binary files /dev/null and b/frontend/public/assets/campaign-burger.png differ
diff --git a/frontend/public/assets/campaign-cafe.png b/frontend/public/assets/campaign-cafe.png
new file mode 100644
index 00000000..cd9e9e66
Binary files /dev/null and b/frontend/public/assets/campaign-cafe.png differ
diff --git a/frontend/public/assets/campaign-patio.png b/frontend/public/assets/campaign-patio.png
new file mode 100644
index 00000000..ffb35880
Binary files /dev/null and b/frontend/public/assets/campaign-patio.png differ
diff --git a/frontend/public/assets/moola-lockup.svg b/frontend/public/assets/moola-lockup.svg
new file mode 100644
index 00000000..2b6737ff
--- /dev/null
+++ b/frontend/public/assets/moola-lockup.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="140" height="28" viewBox="0 0 140 28"><g><g><path fill="#fff" d="M99.07 21.233c-2.542 0-4.603-2.097-4.603-4.684s2.061-4.685 4.603-4.685 4.603 2.098 4.603 4.685c0 2.587-2.06 4.684-4.603 4.684zm-9.208-4.684c0 5.175 4.123 9.37 9.208 9.37 5.086 0 9.208-4.195 9.208-9.37 0-5.176-4.122-9.371-9.208-9.371-5.085 0-9.208 4.195-9.208 9.37zm-11.5 4.684c-2.542 0-4.603-2.097-4.603-4.684s2.061-4.685 4.603-4.685c2.543 0 4.603 2.098 4.603 4.685 0 2.587-2.06 4.684-4.603 4.684zm-9.208-4.684c0 5.175 4.123 9.37 9.208 9.37 5.086 0 9.208-4.195 9.208-9.37 0-5.176-4.122-9.371-9.208-9.371-5.085 0-9.208 4.195-9.208 9.37zm66.084 4.685h-4.604c-2.54 0-4.605-2.102-4.605-4.685 0-2.584 2.066-4.686 4.605-4.686 2.538 0 4.604 2.101 4.604 4.686zm-13.813-4.685c0 5.175 4.123 9.37 9.209 9.37h9.207v-9.37c0-5.176-4.122-9.372-9.207-9.372-5.086 0-9.209 4.196-9.209 9.372zm-6.253 0V.15h-4.604v16.399c0 5.162 4.1 9.349 9.169 9.37v-4.685c-2.522-.022-4.565-2.115-4.565-4.685M57.629 7.177c-2.744 0-5.208 1.223-6.895 3.162-1.688-1.939-4.15-3.162-6.896-3.162-5.085 0-9.208 4.196-9.208 9.371v9.372h4.604v-9.372c0-2.583 2.065-4.685 4.604-4.685 2.419 0 4.408 1.908 4.59 4.323-.004.12-.007 9.734-.007 9.734h4.625s-.003-9.614-.007-9.734c.183-2.415 2.172-4.323 4.59-4.323 2.539 0 4.604 2.102 4.604 4.685v9.372h4.604v-9.372c0-5.175-4.123-9.37-9.208-9.37"></path></g><g><path fill="#fff" d="M2.078 8.852l6.99 4.094a3.893 3.893 0 0 0 4.013 0l9.971-5.84a1.973 1.973 0 0 1 2.067 0c.666.39 1.034 1.037 1.034 1.817v9.11c0 .78-.368 1.427-1.034 1.816l-9.97 5.84c-.666.389-1.402.389-2.068 0l-9.97-5.84c-.666-.39-1.034-1.036-1.034-1.815V8.923zm8.499 1.433c.33.19.647.193.977 0l1.466-.856L6.447 5.59c-.933-.545-1.303-.687-2.08-.74a3.958 3.958 0 0 0-2.281.548C.813 6.142.07 7.442.07 8.929v9.13c0 1.487.742 2.787 2.016 3.531l10.018 5.85a3.922 3.922 0 0 0 4.032 0l10.018-5.85c1.273-.744 2.016-2.044 2.016-3.532V8.93c0-1.487-.742-2.787-2.016-3.531a3.921 3.921 0 0 0-4.032 0l-10.018 5.85c-.669.39-1.408.39-2.077 0L3.003 7.146l.06-.036a1.987 1.987 0 0 1 2.077 0z"></path></g></g></svg> 
\ No newline at end of file
diff --git a/frontend/public/assets/restaurant-hero.png b/frontend/public/assets/restaurant-hero.png
new file mode 100644
index 00000000..db295412
Binary files /dev/null and b/frontend/public/assets/restaurant-hero.png differ
diff --git a/frontend/public/assets/sushi-offer.png b/frontend/public/assets/sushi-offer.png
new file mode 100644
index 00000000..59da9ccf
Binary files /dev/null and b/frontend/public/assets/sushi-offer.png differ
diff --git a/frontend/src/app/ContactTabs.tsx b/frontend/src/app/ContactTabs.tsx
new file mode 100644
index 00000000..edbde9a6
--- /dev/null
+++ b/frontend/src/app/ContactTabs.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { useState } from "react";
+
+type ContactMode = "demo" | "info";
+
+const ContactTabs = () => {
+  const [mode, setMode] = useState<ContactMode>("demo");
+
+  return (
+    <div className="rounded-[1.35rem] border border-white/10 bg-[#08070d] p-6 shadow-[0_28px_80px_rgba(0,0,0,0.35)] sm:p-8">
+      <div
+        className="grid grid-cols-2 rounded-full border border-white/10 bg-[#14131b] p-1"
+        role="tablist"
+        aria-label="Contact options"
+      >
+        <button
+          type="button"
+          role="tab"
+          aria-selected={mode === "demo"}
+          className={`h-11 rounded-full text-sm font-bold transition ${
+            mode === "demo"
+              ? "bg-[#8c00ff] text-white shadow-[0_12px_28px_rgba(140,0,255,0.35)]"
+              : "text-white/62 hover:text-white"
+          }`}
+          onClick={() => setMode("demo")}
+        >
+          Book a demo
+        </button>
+        <button
+          type="button"
+          role="tab"
+          aria-selected={mode === "info"}
+          className={`h-11 rounded-full text-sm font-bold transition ${
+            mode === "info"
+              ? "bg-[#8c00ff] text-white shadow-[0_12px_28px_rgba(140,0,255,0.35)]"
+              : "text-white/62 hover:text-white"
+          }`}
+          onClick={() => setMode("info")}
+        >
+          Request info
+        </button>
+      </div>
+
+      {mode === "demo" ? <DemoPanel /> : <InfoPanel />}
+    </div>
+  );
+};
+
+const DemoPanel = () => (
+  <div className="pt-8" role="tabpanel">
+    <h3 className="text-[1.55rem] font-black tracking-[-0.04em] text-white">
+      Pick a time that works.
+    </h3>
+    <p className="mt-4 max-w-[410px] text-sm font-medium leading-7 text-white/64">
+      30 minutes with a strategist. We&apos;ll walk through your concept, run
+      the ROAS math, and show you a working drop tailored to your locations.
+    </p>
+    <a
+      href="#calendar"
+      className="mt-8 inline-flex h-12 w-full items-center justify-center gap-3 rounded-full bg-[#8c00ff] px-6 text-sm font-black text-white shadow-[0_14px_32px_rgba(140,0,255,0.35)] transition hover:bg-[#9b20ff]"
+    >
+      Open calendar
+      <ArrowIcon />
+    </a>
+  </div>
+);
+
+const InfoPanel = () => (
+  <form className="pt-8" role="tabpanel">
+    <h3 className="text-[1.55rem] font-black tracking-[-0.04em] text-white">
+      Request more info.
+    </h3>
+    <div className="mt-7 space-y-4">
+      <Field label="Full name" placeholder="Jane Smith" />
+      <Field label="Work email" placeholder="jane@hellonori.com" />
+      <Field label="Company" placeholder="Hello Nori" />
+      <label className="block">
+        <span className="text-[0.62rem] font-black uppercase tracking-[0.32em] text-white/46">
+          What would you like to talk about? (optional)
+        </span>
+        <textarea
+          className="mt-2 min-h-20 w-full resize-none rounded-lg border border-white/10 bg-[#14131b] px-4 py-4 text-sm font-medium text-white outline-none transition placeholder:text-white/42 focus:border-[#8c00ff]"
+          placeholder="What you'd like to know more about"
+        />
+      </label>
+    </div>
+    <button
+      type="button"
+      className="mt-8 inline-flex h-12 w-full items-center justify-center gap-3 rounded-full bg-[#5c079d] px-6 text-sm font-black text-white/55 shadow-[0_14px_32px_rgba(140,0,255,0.18)] transition hover:bg-[#8c00ff] hover:text-white"
+    >
+      Send request
+      <ArrowIcon />
+    </button>
+  </form>
+);
+
+const Field = ({ label, placeholder }: { label: string; placeholder: string }) => (
+  <label className="block">
+    <span className="text-[0.62rem] font-black uppercase tracking-[0.32em] text-white/46">
+      {label}
+    </span>
+    <input
+      className="mt-2 h-12 w-full rounded-lg border border-white/10 bg-[#14131b] px-4 text-sm font-medium text-white outline-none transition placeholder:text-white/42 focus:border-[#8c00ff]"
+      placeholder={placeholder}
+    />
+  </label>
+);
+
+const ArrowIcon = () => (
+  <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path
+      d="M5 12h14m-6-6 6 6-6 6"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default ContactTabs;
diff --git a/frontend/src/app/Hero.tsx b/frontend/src/app/Hero.tsx
new file mode 100644
index 00000000..d3b3ca69
--- /dev/null
+++ b/frontend/src/app/Hero.tsx
@@ -0,0 +1,186 @@
+import Image from "next/image";
+
+const Hero = () => {
+  return (
+    <section className="relative isolate min-h-screen overflow-hidden bg-[#08070d] pt-20 text-white">
+      <Image
+        src="/assets/restaurant-hero.png"
+        alt=""
+        fill
+        priority
+        sizes="100vw"
+        className="absolute inset-0 -z-20 object-cover"
+      />
+      <div className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_14%_32%,rgba(140,0,255,0.25),transparent_30%),linear-gradient(90deg,rgba(8,7,13,0.86)_0%,rgba(8,7,13,0.66)_45%,rgba(8,7,13,0.88)_100%)]" />
+      <div className="absolute inset-x-0 bottom-0 -z-10 h-64 bg-gradient-to-t from-[#08070d] to-transparent" />
+
+      <div className="mx-auto grid min-h-[calc(100vh-5rem)] w-full max-w-[1190px] items-center gap-12 px-5 py-14 sm:px-8 lg:grid-cols-2 lg:gap-8 lg:px-4 lg:py-6">
+        <div className="max-w-[620px]">
+          <h1 className="text-[clamp(3.2rem,5.7vw,5.55rem)] font-extrabold leading-[1.02] tracking-[-0.04em] text-white">
+            Stop guessing.
+            <br />
+            Know exactly
+            <br />
+            what your
+            <br />
+            marketing
+            <br className="hidden md:block"/>
+            <span className="text-[#8c00ff] font-normal italic tracking-normal ps-2">
+              earns
+            </span>
+            .
+          </h1>
+
+          <p className="mt-8 max-w-[560px] text-lg font-medium leading-8 text-white/68 sm:text-xl">
+            Attach a Moola Drop to any campaign. Track every customer who walks
+            in, every dollar they spend, every channel that worked. Pay only on
+            redemption.
+          </p>
+
+          <div className="mt-9 flex gap-4 sm:flex-row sm:items-center sm:gap-10">
+            <a
+              className="inline-flex flex-1/2 h-14 w-full items-center justify-center gap-3 rounded-full bg-[#8c00ff] px-7 text-sm font-extrabold text-white shadow-[0_0_35px_rgba(140,0,255,0.5)] transition hover:bg-[#9b20ff] sm:w-auto"
+              href="#demo"
+            >
+              Book a demo
+              <svg
+                className="h-5 w-5"
+                viewBox="0 0 24 24"
+                fill="none"
+                aria-hidden="true"
+              >
+                <path
+                  d="M5 12h14m-6-6 6 6-6 6"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </a>
+
+            <a
+              className="inline-flex flex-1/2 h-14 items-center justify-center text-sm font-extrabold text-white transition hover:text-[#b86cff]"
+              href="#results"
+            >
+              See live results
+            </a>
+          </div>
+
+          <div className="mt-9 flex flex-wrap gap-x-8 gap-y-3 text-sm font-medium text-white/70">
+            <ProofPoint label="Avg. 500%+ ROAS" />
+            <ProofPoint label="Pay only on redemption" />
+          </div>
+        </div>
+
+        <div className="relative mx-auto w-full max-w-[505px] pb-8 pt-3 sm:pt-8 lg:mr-0 2xl:max-w-[540px]">
+          <div className="absolute -right-2 top-10 z-20 hidden rounded-xl border border-white/10 bg-[#1a1824] px-5 py-4 shadow-2xl sm:block lg:-right-8 lg:top-12">
+            <p className="text-[0.6rem] font-black uppercase tracking-[0.32em] text-white/45">
+              ROAS - LIVE
+            </p>
+            <p className="mt-2 text-2xl font-black text-white">597%</p>
+          </div>
+
+          <div className="absolute bottom-7 left-0 z-20 hidden -rotate-1 rounded-xl border border-white/10 bg-[#1a1824] px-5 py-4 shadow-2xl sm:block lg:-left-10">
+            <p className="text-[0.58rem] font-black uppercase tracking-[0.32em] text-white/45">
+              Today&apos;s revenue
+            </p>
+            <div className="mt-2 flex items-end gap-2">
+              <p className="text-2xl font-black text-white">$8,420</p>
+              <p className="pb-1 text-xs font-black text-[#56d37f]">+24%</p>
+            </div>
+          </div>
+
+          <div className="relative rounded-[1.35rem] bg-white p-4 text-[#111118] shadow-[0_30px_80px_rgba(0,0,0,0.45)] sm:rotate-[-1.8deg] sm:p-7">
+            <div className="relative h-32 overflow-hidden rounded-xl bg-[#1f1f1f] sm:h-36">
+              <Image
+                src="/assets/sushi-offer.png"
+                alt="Sushi offer preview"
+                fill
+                sizes="(min-width: 1024px) 520px, 90vw"
+                className="object-cover"
+              />
+              <div className="absolute left-3 top-3 flex h-20 w-24 rotate-[-2deg] flex-col justify-center bg-[#c92c17] px-3 text-[1.5rem] font-black uppercase leading-[0.85] tracking-[0.03em] text-white sm:h-[5.4rem] sm:w-[6.8rem] sm:text-[1.8rem]">
+                <span>Hello</span>
+                <span>Nori</span>
+              </div>
+            </div>
+
+            <div className="px-1 pt-6">
+              <h2 className="text-2xl font-black tracking-[-0.03em] text-[#111118]">
+                Free $10 Gift Card
+              </h2>
+              <p className="mt-1 text-sm font-medium text-[#6d6879]">
+                For dine-in at any Hello Nori location
+              </p>
+
+              <p className="mt-6 text-lg font-black text-[#8c00ff]">
+                10,000{" "}
+                <span className="text-sm font-extrabold">
+                  already claimed
+                </span>
+              </p>
+
+              <div className="mt-4 flex items-center justify-center gap-2 text-[#8c00ff]">
+                {[
+                  ["06", "D"],
+                  ["14", "H"],
+                  ["27", "M"],
+                  ["51", "S"],
+                ].map(([value, label], index) => (
+                  <div className="flex items-center gap-2" key={label}>
+                    {index > 0 ? (
+                      <span className="text-xl font-black">:</span>
+                    ) : null}
+                    <div className="flex h-11 w-11 flex-col items-center justify-center rounded-md bg-[#8c00ff] text-white shadow-[0_8px_20px_rgba(140,0,255,0.25)]">
+                      <span className="text-base font-black leading-none">
+                        {value}
+                      </span>
+                      <span className="mt-0.5 text-[0.55rem] font-black leading-none">
+                        {label}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              <div className="mt-6 space-y-2">
+                <div className="h-9 rounded-lg bg-[#efeee9]" />
+                <div className="h-9 rounded-lg bg-[#efeee9]" />
+              </div>
+
+              <a
+                className="mt-4 flex h-14 items-center justify-center rounded-lg bg-[#8c00ff] text-sm font-black text-white transition hover:bg-[#9b20ff]"
+                href="#claim"
+              >
+                Claim my gift
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const ProofPoint = ({ label }: { label: string }) => (
+  <span className="inline-flex items-center gap-2">
+    <svg
+      className="h-4 w-4 text-[#8c00ff]"
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        d="m5 12 4 4L19 6"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+    {label}
+  </span>
+);
+
+export default Hero
diff --git a/frontend/src/app/HomeSections.tsx b/frontend/src/app/HomeSections.tsx
new file mode 100644
index 00000000..f191d136
--- /dev/null
+++ b/frontend/src/app/HomeSections.tsx
@@ -0,0 +1,530 @@
+import Image from "next/image";
+import type { ReactNode } from "react";
+import ContactTabs from "./ContactTabs";
+
+const stats = [
+  ["500%+", "Avg. ROAS", true],
+  ["$60+", "Avg. bill on redemption", false],
+  ["22%+", "Avg. redemption rate", false],
+  ["$0", "Fees until redemption", false],
+] as const;
+
+const resultCards = [
+  {
+    label: "A-Frame QR campaign",
+    image: "/assets/campaign-cafe.png",
+    eyebrow: "Generated revenue",
+    value: "$197,966",
+    featured: false,
+    metrics: [
+      ["605%", "ROAS", true],
+      ["3,271", "Customers in", false],
+      ["7,414", "Claimed", false],
+    ],
+  },
+  {
+    label: "Takeout box sticker",
+    image: "/assets/campaign-burger.png",
+    eyebrow: "Generated revenue",
+    value: "$30,645",
+    featured: false,
+    metrics: [
+      ["27.5%", "Redemption", true],
+      ["1,751", "Claimed", false],
+      ["6,828", "Boxes", false],
+    ],
+  },
+  {
+    label: "SMS retargeting drive",
+    image: "/assets/campaign-patio.png",
+    eyebrow: "Incremental revenue",
+    value: "$169,458",
+    featured: true,
+    metrics: [
+      ["+22.9%", "YoY lift", true],
+      ["2,255", "Customers back", false],
+      ["$138K", "Direct revenue", false],
+    ],
+  },
+] as const;
+
+const featureItems = [
+  {
+    title: "Pay-per-redemption",
+    text: "No clicks, no impressions, no fluff. You pay platform fees only when a card is actually spent in-store.",
+    icon: "target",
+  },
+  {
+    title: "Trackable everywhere",
+    text: "QR-coded across A-frames, takeout boxes, social, programmatic: one source of truth, one dashboard.",
+    icon: "grid",
+  },
+  {
+    title: "Closed-loop attribution",
+    text: "POS-integrated tracking from impression to bill total. See average ticket, repeat rate, true incremental lift.",
+    icon: "chart",
+  },
+  {
+    title: "Multi-unit ready",
+    text: "Roll out one campaign across 5 or 500 locations. Per-store performance, brand-level rollups.",
+    icon: "store",
+  },
+  {
+    title: "Re-marketing built in",
+    text: "Every claim ties a customer to their in-store spend. Build a database of proven high-spenders you can SMS-retarget when traffic dips.",
+    icon: "users",
+  },
+  {
+    title: "Creator attribution",
+    text: "See which influencers actually drove paying customers, not just likes. Stop paying creators who can't move bills.",
+    icon: "mic",
+  },
+] as const;
+
+const HomeSections = () => {
+  return (
+    <>
+      <ProblemSection />
+      <ResultsSection />
+      <HowItWorksSection />
+      <FeaturesSection />
+      <PosPartnersSection />
+      <ContactSection />
+    </>
+  );
+};
+
+const SectionShell = ({
+  id,
+  className = "",
+  children,
+}: {
+  id?: string;
+  className?: string;
+  children: ReactNode;
+}) => (
+  <section id={id} className={`scroll-mt-24 ${className}`}>
+    <div className="mx-auto w-full max-w-[1176px] px-5 sm:px-8 xl:px-0">
+      {children}
+    </div>
+  </section>
+);
+
+const Eyebrow = ({ children }: { children: ReactNode }) => (
+  <p className="mb-5 flex items-center gap-2 text-[0.68rem] font-black uppercase tracking-[0.34em] text-[#8c00ff]">
+    <span className="h-1.5 w-1.5 rounded-full bg-[#8c00ff]" />
+    {children}
+  </p>
+);
+
+const SectionTitle = ({
+  children,
+  className = "",
+}: {
+  children: ReactNode;
+  className?: string;
+}) => (
+  <h2
+    className={`text-[clamp(2.55rem,4.15vw,4rem)] font-black leading-[1.08] tracking-[-0.055em] text-white ${className}`}
+  >
+    {children}
+  </h2>
+);
+
+const ProblemSection = () => (
+  <SectionShell className="border-t border-white/[0.06] bg-[#08070d] py-20 sm:py-24 lg:py-28">
+    <div className="grid gap-12 lg:grid-cols-[1fr_0.95fr] lg:gap-20">
+      <div>
+        <Eyebrow>The problem</Eyebrow>
+        <SectionTitle className="max-w-[480px]">
+          You&apos;re spending on marketing you can&apos;t measure.
+        </SectionTitle>
+      </div>
+      <div className="border-[#8c00ff] lg:border-l lg:pl-10">
+        <h3 className="text-[clamp(2.2rem,3.2vw,3.3rem)] font-black leading-none tracking-[-0.055em] text-[#8c00ff]">
+          We fixed that.
+        </h3>
+        <p className="mt-6 max-w-[520px] text-base font-medium leading-8 text-white/64 sm:text-lg">
+          Customers claim a small digital gift card with their phone number.
+          When they redeem it at your POS, Moola captures the visit, the spend,
+          and exactly which channel brought them in: down to the dollar.
+        </p>
+        <ul className="mt-8 space-y-5 text-sm font-black text-white">
+          {["Track every channel", "Zero upfront cost", "Know your real ROI"].map(
+            (item) => (
+              <li className="flex items-center gap-3" key={item}>
+                <CheckIcon />
+                {item}
+              </li>
+            ),
+          )}
+        </ul>
+      </div>
+    </div>
+  </SectionShell>
+);
+
+const ResultsSection = () => (
+  <SectionShell id="results" className="bg-[#08070d] pb-20 sm:pb-24 lg:pb-28">
+    <Eyebrow>Real campaigns, real numbers</Eyebrow>
+    <SectionTitle className="max-w-[620px]">
+      Ads that pay for themselves &mdash; measurably.
+    </SectionTitle>
+    <p className="mt-6 max-w-[690px] text-base font-medium leading-8 text-white/64 sm:text-lg">
+      Every drop is tracked end-to-end. We close the loop from impression to
+      redeemed gift card to in-store spend, so you see exactly what worked.
+    </p>
+
+    <div className="mt-16 overflow-hidden rounded-[1.35rem] border border-white/10 bg-[#14131b]">
+      <div className="grid sm:grid-cols-2 lg:grid-cols-4">
+        {stats.map(([value, label, accent], index) => (
+          <div
+            className={`px-8 py-9 sm:px-9 lg:px-8 ${
+              index > 0 ? "border-white/10 lg:border-l" : ""
+            } ${index > 1 ? "sm:border-t lg:border-t-0" : ""}`}
+            key={label}
+          >
+            <p
+              className={`text-[clamp(2rem,3vw,3rem)] font-black leading-none tracking-[-0.055em] ${
+                accent ? "text-[#8c00ff]" : "text-white"
+              }`}
+            >
+              {value}
+            </p>
+            <p className="mt-4 text-[0.66rem] font-black uppercase tracking-[0.32em] text-white/45">
+              {label}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <div className="mt-7 grid gap-5 lg:grid-cols-3">
+      {resultCards.map((card) => (
+        <article
+          className={`rounded-[1.35rem] border bg-[#14131b] p-7 shadow-[0_22px_60px_rgba(0,0,0,0.26)] border-white/10 hover:border-[#8c00ff] hover:-translate-y-1 transition-all`}
+          key={card.label}
+        >
+          <div className="relative aspect-[1.62] overflow-hidden rounded-lg bg-white/5">
+            <Image
+              src={card.image}
+              alt=""
+              fill
+              sizes="(min-width: 1024px) 330px, 90vw"
+              className="object-cover"
+            />
+            <span className="absolute left-4 top-4 rounded-full bg-white px-4 py-2 text-xs font-black text-[#14131b]">
+              {card.label}
+            </span>
+          </div>
+          <p className="mt-7 text-[0.68rem] font-black uppercase tracking-[0.32em] text-white/45">
+            {card.eyebrow}
+          </p>
+          <p className="mt-6 text-[clamp(2rem,3vw,2.55rem)] font-black leading-none tracking-[-0.05em] text-white">
+            {card.value}
+          </p>
+          <div className="mt-7 grid grid-cols-3 gap-3 border-t border-white/10 pt-6">
+            {card.metrics.map(([value, label, accent]) => (
+              <div key={label}>
+                <p
+                  className={`text-lg font-black leading-none ${
+                    accent ? "text-[#8c00ff]" : "text-white"
+                  }`}
+                >
+                  {value}
+                </p>
+                <p className="mt-3 text-[0.55rem] font-black uppercase tracking-[0.25em] text-white/42">
+                  {label}
+                </p>
+              </div>
+            ))}
+          </div>
+        </article>
+      ))}
+    </div>
+  </SectionShell>
+);
+
+const HowItWorksSection = () => (
+  <SectionShell
+    id="how-it-works"
+    className="border-t border-white/[0.06] bg-[#08070d] py-20 sm:py-24 lg:py-28"
+  >
+    <Eyebrow>How it works</Eyebrow>
+    <SectionTitle>Three steps.</SectionTitle>
+
+    <div className="mt-20 grid gap-8 lg:grid-cols-3 lg:gap-0">
+      <StepCard
+        step="Step 01"
+        title="Design your drop"
+        text="Pick a creative: A-frame QR, social post, takeout sticker. Attach a stored-value gift card, and set the redemption window. We help you tune the offer to your margins."
+      >
+        <div className="rounded-xl border border-white/10 bg-[#14131b] p-5 text-xs">
+          <div className="flex items-center justify-between border-b border-white/10 pb-4">
+            <span className="flex items-center gap-2 text-[#8c00ff]">
+              <span className="h-1.5 w-1.5 rounded-full bg-[#8c00ff]" />
+              Drop builder
+            </span>
+            <span className="text-white/45">draft</span>
+          </div>
+          {[
+            ["offer.amount", "$10.00"],
+            ["redemption.window", "7 days"],
+            ["locations", "14 active"],
+          ].map(([label, value]) => (
+            <div className="mt-4 flex items-center justify-between" key={label}>
+              <span className="text-white/58">{label}</span>
+              <span className="font-black text-white">{value}</span>
+            </div>
+          ))}
+          <div className="mt-6 flex items-center justify-between">
+            <span className="text-white/45">est. ROAS</span>
+            <span className="text-[#8c00ff]">~520%</span>
+          </div>
+        </div>
+      </StepCard>
+
+      <StepCard
+        step="Step 02"
+        title="Distribute everywhere"
+        text="QR codes, programmatic placements, geo-targeted social, door-hangers: every surface drives back to one trackable landing page tied to your locations."
+      >
+        <div className="rounded-xl border border-white/10 bg-[#14131b] p-6">
+          <div className="grid grid-cols-2 gap-2">
+            {[
+              ["QR - A-frame", "4,201"],
+              ["Social - IG", "8,402"],
+              ["Programmatic", "11,540"],
+              ["Sticker - Box", "3,214"],
+            ].map(([label, value]) => (
+              <div className="rounded-md bg-white/[0.04] p-3" key={label}>
+                <p className="text-[0.56rem] font-black uppercase tracking-[0.22em] text-white/44">
+                  {label}
+                </p>
+                <p className="mt-2 text-xl font-black tracking-[-0.04em]">
+                  {value}
+                </p>
+              </div>
+            ))}
+          </div>
+          <p className="mt-4 text-[0.65rem] font-bold text-white/42">
+            views · last 24h
+          </p>
+        </div>
+      </StepCard>
+
+      <StepCard
+        step="Step 03"
+        title="Pay only when they show"
+        text="Customers redeem in-store. We track average bill, repeat visits, and full attribution. You only pay platform fees on cards that actually get spent."
+      >
+        <div className="rounded-xl border border-white/10 bg-[#14131b] p-5 text-xs">
+          <div className="mb-4 flex items-center justify-between">
+            <span className="text-white/58">Recent redemptions</span>
+            <span className="flex items-center gap-2 text-[#5ee678]">
+              <span className="h-1.5 w-1.5 rounded-full bg-[#5ee678]" />
+              live
+            </span>
+          </div>
+          {[
+            ["12:42 Williams Ave", "$58.20"],
+            ["12:38 Downtown", "$74.10"],
+            ["12:31 Northside", "$41.90"],
+          ].map(([place, amount]) => (
+            <div
+              className="flex justify-between border-t border-dashed border-white/10 py-3"
+              key={place}
+            >
+              <span className="text-white/58">{place}</span>
+              <span className="font-black text-white">{amount}</span>
+            </div>
+          ))}
+        </div>
+      </StepCard>
+    </div>
+  </SectionShell>
+);
+
+const StepCard = ({
+  step,
+  title,
+  text,
+  children,
+}: {
+  step: string;
+  title: string;
+  text: string;
+  children: ReactNode;
+}) => (
+  <article className="border-white/10 lg:border-l lg:px-12 first:lg:border-l-0 first:lg:pl-0 last:lg:pr-0">
+    <p className="flex items-center gap-3 text-[0.72rem] font-black tracking-[0.26em] text-[#8c00ff]">
+      <span className="h-px w-6 bg-[#8c00ff]" />
+      {step}
+    </p>
+    <h3 className="mt-5 text-2xl font-black tracking-[-0.055em] text-white sm:text-[1.7rem]">
+      {title}
+    </h3>
+    <p className="mt-5 min-h-[6.5rem] text-base font-medium leading-7 text-white/64">
+      {text}
+    </p>
+    <div className="mt-7">{children}</div>
+  </article>
+);
+
+const FeaturesSection = () => (
+  <SectionShell id="features" className="bg-[#08070d] py-20 sm:py-24 lg:py-28">
+    <Eyebrow>Built for chain operators</Eyebrow>
+    <SectionTitle className="max-w-[760px]">
+      Marketing infrastructure, not a marketing campaign.
+    </SectionTitle>
+
+    <div className="mt-16 overflow-hidden rounded-[1.35rem] border border-white/10">
+      <div className="grid md:grid-cols-2 lg:grid-cols-3">
+        {featureItems.map((item, index) => (
+          <article
+            className={`min-h-60 p-9 sm:p-10 ${featureBorders(index)}`}
+            key={item.title}
+          >
+            <IconBox name={item.icon} />
+            <h3 className="mt-8 text-xl font-black tracking-[-0.04em] text-white">
+              {item.title}
+            </h3>
+            <p className="mt-5 text-base font-medium leading-7 text-white/64">
+              {item.text}
+            </p>
+          </article>
+        ))}
+      </div>
+    </div>
+  </SectionShell>
+);
+
+const PosPartnersSection = () => (
+  <section
+    id="pos-partners"
+    className="border-y border-white/[0.06] bg-[radial-gradient(circle_at_center,rgba(140,0,255,0.14),transparent_34%),#08070d] py-20 text-center sm:py-24"
+  >
+    <div className="mx-auto w-full max-w-[1176px] px-5 sm:px-8 xl:px-0">
+      <Eyebrow>POS partners</Eyebrow>
+      <SectionTitle>Plugs into the POS you already run.</SectionTitle>
+      <div className="mt-16 flex items-center justify-center gap-4 text-white/72">
+        <span className="grid h-16 w-16 place-items-center rounded-full border-4 border-white/72 text-3xl font-black tracking-[-0.08em]">
+          ap
+        </span>
+        <span className="text-[clamp(2.6rem,4vw,3.4rem)] font-medium tracking-[-0.06em]">
+          Auphan
+        </span>
+      </div>
+    </div>
+  </section>
+);
+
+const ContactSection = () => (
+  <section id="demo" className="bg-[#08070d] py-20 sm:py-24">
+    <div className="mx-auto w-full max-w-[1176px] px-5 sm:px-8 xl:px-0">
+      <div className="overflow-hidden rounded-[1.6rem] border border-white/10 bg-[linear-gradient(110deg,#15141d_0%,#15141d_67%,#3a0d65_100%)] p-8 shadow-[0_30px_90px_rgba(0,0,0,0.35)] sm:p-12 lg:p-16">
+        <div className="grid gap-12 lg:grid-cols-[1fr_0.9fr] lg:items-start">
+          <div>
+            <Eyebrow>Get in touch</Eyebrow>
+            <SectionTitle className="max-w-[520px]">
+              Ready to make every marketing dollar accountable?
+            </SectionTitle>
+            <p className="mt-6 max-w-[500px] text-base font-medium leading-8 text-white/64 sm:text-lg">
+              Two ways to start the conversation. Book a discovery call with
+              our team, or send a quick note and we&apos;ll get back to you.
+            </p>
+            <ul className="mt-9 space-y-5 text-sm font-medium text-white/68">
+              {[
+                "Concept-fit discussion",
+                "Honest ROAS expectations",
+                "POS integration discovery",
+              ].map((item) => (
+                <li className="flex items-center gap-3" key={item}>
+                  <CheckIcon />
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <ContactTabs />
+        </div>
+      </div>
+      <footer className="pt-16 text-center text-sm font-medium text-white/45">
+        &copy; 2026 Moola Drops &middot; Performance marketing for restaurants
+      </footer>
+    </div>
+  </section>
+);
+
+const CheckIcon = () => (
+  <span className="grid h-5 w-5 shrink-0 place-items-center rounded-full bg-[#8c00ff]/12 text-[#8c00ff]">
+    <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="m6 12 4 4 8-9"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  </span>
+);
+
+const featureBorders = (index: number) => {
+  const mobile = index < featureItems.length - 1 ? "border-b border-white/10" : "";
+  const tabletBottom = index < 4 ? "md:border-b" : "md:border-b-0";
+  const tabletColumn = index % 2 === 0 ? "md:border-r md:border-white/10" : "";
+  const desktopBottom = index < 3 ? "lg:border-b" : "lg:border-b-0";
+  const desktopColumn =
+    index % 3 !== 2 ? "lg:border-r lg:border-white/10" : "lg:border-r-0";
+
+  return `${mobile} ${tabletBottom} ${tabletColumn} ${desktopBottom} ${desktopColumn}`;
+};
+
+const IconBox = ({ name }: { name: string }) => (
+  <span className="grid h-11 w-11 place-items-center rounded-lg bg-[#8c00ff]/10 text-[#8c00ff]">
+    <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      {name === "target" ? (
+        <>
+          <circle cx="12" cy="12" r="7" stroke="currentColor" strokeWidth="2" />
+          <circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="2" />
+        </>
+      ) : null}
+      {name === "grid" ? (
+        <>
+          <rect x="4" y="4" width="6" height="6" rx="1.5" stroke="currentColor" strokeWidth="2" />
+          <rect x="14" y="4" width="6" height="6" rx="1.5" stroke="currentColor" strokeWidth="2" />
+          <rect x="4" y="14" width="6" height="6" rx="1.5" stroke="currentColor" strokeWidth="2" />
+          <path d="M17 14v6m-3-3h6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+        </>
+      ) : null}
+      {name === "chart" ? (
+        <>
+          <path d="M5 19h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+          <path d="M7 16v-4m5 4V8m5 8V5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+        </>
+      ) : null}
+      {name === "store" ? (
+        <>
+          <path d="M5 10h14l-1-5H6l-1 5Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" />
+          <path d="M7 10v9h10v-9M10 19v-5h4v5" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" />
+        </>
+      ) : null}
+      {name === "users" ? (
+        <>
+          <path d="M9 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM15 10a2.5 2.5 0 1 0 0-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+          <path d="M4 19a5 5 0 0 1 10 0M14 15a4 4 0 0 1 5 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+        </>
+      ) : null}
+      {name === "mic" ? (
+        <>
+          <rect x="9" y="4" width="6" height="10" rx="3" stroke="currentColor" strokeWidth="2" />
+          <path d="M6 11a6 6 0 0 0 12 0M12 17v3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+        </>
+      ) : null}
+    </svg>
+  </span>
+);
+
+export default HomeSections;
diff --git a/frontend/src/app/Navbar.tsx b/frontend/src/app/Navbar.tsx
new file mode 100644
index 00000000..6777dbbb
--- /dev/null
+++ b/frontend/src/app/Navbar.tsx
@@ -0,0 +1,116 @@
+const Navbar = () => {
+  return (
+    <header className="fixed inset-x-0 top-0 z-50 border-b border-white/5 bg-[#08070d]/95 text-white backdrop-blur-xl">
+      <nav
+        className="mx-auto flex h-20 w-full max-w-[1190px] items-center justify-between px-5 sm:px-8 lg:px-4"
+        aria-label="Main navigation"
+      >
+        <a href="#" className="flex items-center gap-2" aria-label="Moola home">
+          <svg
+            className="h-7 w-7"
+            viewBox="0 0 32 32"
+            fill="none"
+            aria-hidden="true"
+          >
+            <path
+              d="M6 9.4 16 4l10 5.4v9.2L16 28 6 18.6V9.4Z"
+              stroke="currentColor"
+              strokeWidth="2.4"
+              strokeLinejoin="round"
+            />
+            <path
+              d="m9.6 10.8 6.4 3.7 6.4-3.7"
+              stroke="currentColor"
+              strokeWidth="2.4"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+          <span className="text-[2rem] font-black leading-none tracking-[-0.04em]">
+            moola
+          </span>
+        </a>
+
+        <ul className="hidden items-center gap-11 text-sm font-bold text-white/60 lg:flex">
+          <li>
+            <a className="transition hover:text-white" href="#how-it-works">
+              How it works
+            </a>
+          </li>
+          <li>
+            <a className="transition hover:text-white" href="#results">
+              Results
+            </a>
+          </li>
+          <li>
+            <a className="transition hover:text-white" href="#features">
+              Features
+            </a>
+          </li>
+        </ul>
+
+        <div className="hidden items-center gap-9 text-sm font-extrabold lg:flex">
+          <a className="transition hover:text-[#8c00ff]" href="#marketplace">
+            Marketplace
+          </a>
+          <a className="transition hover:text-[#8c00ff]" href="#login">
+            Login
+          </a>
+          <a
+            className="rounded-full bg-[#8c00ff] px-4 py-2 text-white shadow-[0_0_28px_rgba(140,0,255,0.5)] transition hover:bg-[#9b20ff]"
+            href="#demo"
+          >
+            Book a demo
+          </a>
+        </div>
+
+        <div className="flex items-center gap-3 lg:hidden">
+          <a
+            className="rounded-full bg-[#8c00ff] px-4 py-3 text-xs font-extrabold text-white shadow-[0_0_22px_rgba(140,0,255,0.45)] sm:px-5 sm:text-sm"
+            href="#demo"
+          >
+            Book a demo
+          </a>
+
+          <details className="mobile-menu relative">
+            <summary
+              className="flex h-11 w-11 cursor-pointer list-none items-center justify-center rounded-full border border-white/10 bg-white/[0.04] text-white"
+              aria-label="Open menu"
+            >
+              <svg
+                className="h-5 w-5"
+                viewBox="0 0 24 24"
+                fill="none"
+                aria-hidden="true"
+              >
+                <path
+                  d="M4 7h16M4 12h16M4 17h16"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </summary>
+
+            <div className="absolute right-0 top-14 w-48 rounded-2xl border border-white/10 bg-[#111018]/95 p-3 text-sm font-bold shadow-2xl backdrop-blur-xl">
+              {[
+                ["Marketplace", "#marketplace"],
+                ["Login", "#login"],
+              ].map(([label, href]) => (
+                <a
+                  key={label}
+                  className="block rounded-xl px-4 py-3 text-white/75 transition hover:bg-white/10 hover:text-white"
+                  href={href}
+                >
+                  {label}
+                </a>
+              ))}
+            </div>
+          </details>
+        </div>
+      </nav>
+    </header>
+  )
+}
+
+export default Navbar
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index a2dc41ec..c68c083b 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -1,26 +1,39 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #08070d;
+  --foreground: #ffffff;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: Roboto, system-ui, sans-serif;
+  --font-mono: Roboto, system-ui, sans-serif;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Roboto, Arial, Helvetica, sans-serif;
+  margin: 0;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.mobile-menu summary::-webkit-details-marker {
+  display: none;
 }
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index f7fa87eb..497fc821 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,20 +1,9 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Moola",
+  description: "Performance marketing drops for restaurants.",
 };
 
 export default function RootLayout({
@@ -24,11 +13,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
+      <body className="antialiased">{children}</body>
     </html>
   );
 }
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index e68abe6b..098d07f7 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,103 +1,15 @@
-import Image from "next/image";
+import Hero from "./Hero";
+import HomeSections from "./HomeSections";
+import Navbar from "./Navbar";
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
+    <>
+      <Navbar />
+      <main>
+        <Hero />
+        <HomeSections />
       </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
+    </>
   );
 }