Bob AI: Populate src/pages/BedProductPage.tsx (snippet builder, 2 sections)

src/pages/BedProductPage.tsx

@@ -1,74 +1,23 @@
-import React from "react";
-import { routes } from "@/routes";
-import NavbarCentered from "@/components/ui/NavbarCentered";
-import HeroSplit from "@/components/sections/hero/HeroSplit";
-import FeaturesDetailedCards from "@/components/sections/features/FeaturesDetailedCards";
+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 ScrollReveal from "@/components/ui/ScrollReveal";
 import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
-import FooterMinimal from "@/components/sections/footer/FooterMinimal";
 
 export default function BedProductPage() {
   return (
-    <div className="min-h-screen bg-background text-foreground">
-      <NavbarCentered
-        logo="SleepHaven"
-        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
-        ctaButton={{ text: "Shop Now", href: "/shop" }}
-      />
-
-      <HeroSplit
-        tag="Premium Sleep"
-        title="The CloudRest Mattress"
-        description="Experience the ultimate in comfort and support. Designed for deep, restorative sleep."
-        primaryButton={{ text: "Book a Trial", href: "#book" }}
-        secondaryButton={{ text: "View Specs", href: "#specs" }}
-        imageSrc="https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?auto=format&fit=crop&q=80"
-      />
-
-      <div id="specs">
-        <FeaturesDetailedCards
-          tag="Features"
-          title="Engineered for Comfort"
-          description="Every layer is meticulously crafted to provide the perfect balance of softness and support."
-          items={[
-            {
-              title: "Cooling Gel Layer",
-              description: "Regulates temperature all night long to prevent overheating.",
-              tags: ["Cooling", "Breathable"]
-            },
-            {
-              title: "Adaptive Memory Foam",
-              description: "Contours to your unique body shape for personalized comfort.",
-              tags: ["Support", "Pressure Relief"]
-            },
-            {
-              title: "Reinforced Edge Support",
-              description: "Sturdy perimeters allow you to use the entire sleep surface.",
-              tags: ["Durability", "Space"]
-            }
-          ]}
-        />
-      </div>
-
-      <div id="book">
-        <ContactSplitForm
-          tag="Showroom"
-          title="Book a Sleep Consultation"
-          description="Visit our showroom to experience the CloudRest difference in person. Schedule your private appointment today."
-          inputs={[
-            { name: "name", type: "text", placeholder: "Full Name", required: true },
-            { name: "email", type: "email", placeholder: "Email Address", required: true },
-            { name: "date", type: "date", placeholder: "Preferred Date", required: true }
-          ]}
-          textarea={{ name: "notes", placeholder: "Any specific sleep concerns or preferences?", rows: 4, required: false }}
-          buttonText="Confirm Appointment"
-          imageSrc="https://images.unsplash.com/photo-1540518614846-7eded433c457?auto=format&fit=crop&q=80"
-        />
-      </div>
-
-      <FooterMinimal
-        brand="SleepHaven"
-        copyright="© 2024 SleepHaven. All rights reserved."
-      />
-    </div>
+    <>
+      <div data-webild-section="HeroSplit"><section aria-label="Hero section" className="relative flex items-center h-fit md:h-svh pt-25 pb-20 md:py-0"><HeroBackgroundSlot /><div className="flex flex-col md:flex-row items-center gap-12 md:gap-20 w-content-width mx-auto"><div className="w-full md:w-1/2"><div className="flex flex-col items-center md:items-start gap-3"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>The Signature Bed</p></div><TextAnimation text="Experience Unrivaled Comfort" variant="slide-up" gradientText={true} tag="h1" className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center md:text-left text-balance" /><TextAnimation text="Discover our signature bed design, meticulously crafted from the finest organic materials for the perfect night of restful rejuvenation." variant="slide-up" gradientText={false} tag="p" className="md:max-w-8/10 text-lg md:text-xl leading-snug text-center md:text-left text-balance" /><div className="flex flex-wrap max-md:justify-center gap-3 mt-2 md:mt-3"><Button text="Book Appointment" href="#booking" variant="primary" /><Button text="View Details" href="#details" variant="secondary" animationDelay={0.1} /></div></div></div><ScrollReveal variant="fade" delay={0.2} className="w-full md:w-1/2 h-100 md:h-[65vh] md:max-h-[75svh] p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/premium-photo/luxurious-modern-bedroom-interior-with-comfortable-bed-organic-linens_123827-23456.jpg" /></ScrollReveal></div></section></div>
+      <div data-webild-section="ContactSplitForm"><ContactSplitForm
+        tag="Book an Appointment"
+        title="Experience Luxe Rest in Person"
+        description="Schedule a private consultation at our showroom to discover the ultimate sleep experience tailored to your needs."
+        inputs={[{"name":"name","type":"text","placeholder":"Full Name","required":true},{"name":"email","type":"email","placeholder":"Email Address","required":true},{"name":"phone","type":"tel","placeholder":"Phone Number","required":false},{"name":"date","type":"date","placeholder":"Preferred Date","required":true}]}
+        textarea={{"name":"message","placeholder":"Tell us about your sleep preferences...","rows":4,"required":false}}
+        buttonText="Request Appointment"
+        imageSrc="https://img.freepik.com/premium-photo/luxurious-bedroom-interior-with-comfortable-bed_1048944-12345.jpg"
+      /></div>
+    </>
   );
-}
+}