src/App.tsx

@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+import LandingPage from "@/pages/LandingPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/landing" element={<LandingPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -34,7 +34,9 @@ export default function Layout() {
   {
     "name": "Social",
     "href": "#social"
-  }
+  },
+  { name: "Landing", href: "/landing" },
+
 ];
 
   return (

src/pages/LandingPage.tsx

@@ -0,0 +1,19 @@
+import Button from "@/components/ui/Button";
+import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import AutoFillText from "@/components/ui/AutoFillText";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+
+export default function LandingPage() {
+  return (
+    <>
+      <div data-webild-section="HeroBrand"><section aria-label="Hero section" className="relative w-full h-svh overflow-hidden flex flex-col justify-end mb-20"><HeroBackgroundSlot /><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/beautiful-woman-with-long-straight-blonde-hair_273609-16690.jpg" className="absolute inset-0 w-full h-full object-cover rounded-none" /><div className="absolute z-10 w-full h-[50svh] md:h-[75svh] left-0 bottom-0 backdrop-blur-xl mask-[linear-gradient(to_bottom,transparent,black_60%)]" aria-hidden="true" /><div className="relative z-10 w-content-width mx-auto pb-5"><div className="flex flex-col"><div className="w-full flex flex-col md:flex-row md:justify-between items-start md:items-end gap-3 md:gap-5"><TextAnimation text="Step into the ultimate luxury hair experience. Discover premium extensions designed for the dolls who demand effortless glamour and unmatched quality." variant="fade-blur" gradientText={false} tag="p" className="w-full md:w-1/2 text-lg md:text-2xl text-balance font-normal text-white leading-snug" /><div className="w-full md:w-1/2 flex justify-start md:justify-end"><div className="flex flex-wrap gap-3"><Button text="Enter The Dollhouse" href="/shop" variant="primary" /><Button text="View Collections" href="/collections" variant="secondary" animationDelay={0.1} /></div></div></div><AutoFillText className="font-semibold text-white">The Dollhouse Collective</AutoFillText></div></div></section></div>
+      <div data-webild-section="FeaturesMediaGrid"><section aria-label="Features section" className="py-20"><div className="flex flex-col gap-8 md:gap-10"><div className="flex flex-col items-center w-content-width mx-auto gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>The Dollhouse</p></div><TextAnimation text="Step Into The Dollhouse" variant="fade" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Discover luxury hair extensions designed for the dolls who demand confidence, quality, and effortless glamour." variant="fade" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Enter Boutique" href="/shop" variant="primary" /><Button text="View Collections" href="/collections" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade"><GridOrCarousel><div key="Premium Extensions" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 h-full"><div className="aspect-square overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/premium-photo/beautiful-woman-with-long-straight-blonde-hair_273443-1636.jpg" className="rounded" /></div><div className="flex flex-col gap-1"><h3 className="text-3xl font-semibold leading-snug text-balance">Premium Extensions</h3><p className="text-base leading-snug text-balance">Ethically sourced, 100% virgin hair for a flawless, natural blend.</p></div></div>
+<div key="Effortless Glamour" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 h-full"><div className="aspect-square overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/portrait-beautiful-young-woman-with-long-wavy-hair_158595-5026.jpg" className="rounded" /></div><div className="flex flex-col gap-1"><h3 className="text-3xl font-semibold leading-snug text-balance">Effortless Glamour</h3><p className="text-base leading-snug text-balance">Transform your look instantly with our signature seamless clip-ins.</p></div></div>
+<div key="The Doll Lifestyle" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 h-full"><div className="aspect-square overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/premium-photo/fashion-portrait-young-elegant-woman_1301-7622.jpg" className="rounded" /></div><div className="flex flex-col gap-1"><h3 className="text-3xl font-semibold leading-snug text-balance">The Doll Lifestyle</h3><p className="text-base leading-snug text-balance">More than just hair—it's a statement of confidence and high fashion.</p></div></div>
+<div key="Exclusive Textures" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 h-full"><div className="aspect-square overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/beautiful-brunette-woman-with-long-wavy-hair_158595-4988.jpg" className="rounded" /></div><div className="flex flex-col gap-1"><h3 className="text-3xl font-semibold leading-snug text-balance">Exclusive Textures</h3><p className="text-base leading-snug text-balance">From silky straight to voluminous waves, find your perfect match.</p></div></div></GridOrCarousel></ScrollReveal></div></section></div>
+    </>
+  );
+}

src/routes.ts

@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/landing', label: 'Landing', pageFile: 'LandingPage' },
 ];