Merge version_14_1780587851932 into main

Merge version_14_1780587851932 into main

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 BookNowPage from "@/pages/BookNowPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/book-now" element={<BookNowPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -9,32 +9,34 @@ export default function Layout() {
   const navItems = [
   {
     "name": "Home",
-    "href": "#home"
+    "href": "/#home"
   },
   {
     "name": "About Us",
-    "href": "#about"
+    "href": "/#about"
   },
   {
     "name": "Products",
-    "href": "#products"
+    "href": "/#products"
   },
   {
     "name": "Why Us",
-    "href": "#why-us"
+    "href": "/#why-us"
   },
   {
     "name": "Testimonials",
-    "href": "#testimonials"
+    "href": "/#testimonials"
   },
   {
     "name": "FAQ",
-    "href": "#faq"
+    "href": "/#faq"
   },
   {
     "name": "Social Proof",
-    "href": "#social-proof"
-  }
+    "href": "/#social-proof"
+  },
+  { name: "Book Now", href: "/book-now" },
+
 ];
 
   return (
@@ -44,7 +46,7 @@ export default function Layout() {
         <NavbarCentered
       ctaButton={{
         text: "Order Now",
-        href: "#contact",
+        href: "/#contact",
       }}
       logo="Brand"
      navItems={navItems} />
@@ -60,11 +62,11 @@ export default function Layout() {
           items: [
             {
               label: "About Us",
-              href: "#about",
+              href: "/#about",
             },
             {
               label: "Our Menu",
-              href: "#products",
+              href: "/#products",
             },
             {
               label: "Custom Orders",
@@ -81,11 +83,11 @@ export default function Layout() {
           items: [
             {
               label: "FAQ",
-              href: "#faq",
+              href: "/#faq",
             },
             {
               label: "Contact Us",
-              href: "#contact",
+              href: "/#contact",
             },
             {
               label: "Shipping & Delivery",

src/pages/BookNowPage.tsx

@@ -0,0 +1,23 @@
+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";
+
+export default function BookNowPage() {
+  return (
+    <>
+      <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>Book Now</p></div><TextAnimation text="Schedule Your Service with Brand Today" variant="fade-blur" gradientText={true} tag="h1" className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center md:text-left text-balance" /><TextAnimation text="Experience the convenience of booking your next appointment online. Our straightforward process ensures you can secure your preferred time quickly and efficiently, getting you closer to the service you need. Start now and take the first step." variant="fade-blur" 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 Now" href="#booking-form" variant="primary" /><Button text="View Services" href="/services" variant="secondary" animationDelay={0.1} /></div></div></div><ScrollReveal variant="fade-blur" 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/young-woman-using-laptop-booking-online-appointment-clinic-modern-office_236854-47007.jpg" /></ScrollReveal></div></section></div>
+      <div data-webild-section="ContactSplitForm"><ContactSplitForm
+        tag="Book Now"
+        title="Schedule Your Service Today"
+        description="Ready to experience our services? Use the form below to book your appointment quickly and conveniently. We look forward to serving you."
+        inputs={[{"name":"fullName","type":"text","placeholder":"Your Full Name","required":true},{"name":"email","type":"email","placeholder":"Your Email Address","required":true},{"name":"phone","type":"tel","placeholder":"Your Phone Number","required":true},{"name":"service","type":"text","placeholder":"Preferred Service (e.g., Consultation)","required":true}]}
+        textarea={{"name":"message","placeholder":"Any specific requests or questions?","rows":4,"required":false}}
+        buttonText="Confirm Booking"
+        imageSrc="https://img.freepik.com/premium-photo/businesswoman-using-laptop-making-online-appointment-booking-calendar-schedule-management-concept_31965-10336.jpg"
+      /></div>
+    </>
+  );
+}

src/pages/HomePage.tsx

@@ -1,28 +1,38 @@
-// AUTO-GENERATED shell by per-section-migrate.
-// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
-// files directly; this shell only fixes render order.
-
 import React from 'react';
 import HomeSection from './HomePage/sections/Home';
 import AboutSection from './HomePage/sections/About';
 import ProductsSection from './HomePage/sections/Products';
+import HowItWorksSection from './HomePage/sections/HowItWorks';
 import WhyUsSection from './HomePage/sections/WhyUs';
 import TestimonialsSection from './HomePage/sections/Testimonials';
 import SocialProofSection from './HomePage/sections/SocialProof';
+import PricingSection from './HomePage/sections/Pricing';
 import FaqSection from './HomePage/sections/Faq';
+import NewsletterSection from './HomePage/sections/Newsletter';
+import CaseStudiesCardsSection from './HomePage/sections/CaseStudiesCards';
 import ContactSection from './HomePage/sections/Contact';
 
+
+
+{/* webild-stub @2026-06-04T15:44:44.030Z: remove all sections except hero and contact form */}
+
+{/* webild-stub @2026-06-04T15:43:28.905Z: remove all sections except hero and contact form */}
+
 export default function HomePage(): React.JSX.Element {
   return (
     <>
       <HomeSection />
       <AboutSection />
       <ProductsSection />
+      <HowItWorksSection />
       <WhyUsSection />
       <TestimonialsSection />
       <SocialProofSection />
+      <PricingSection />
       <FaqSection />
+      <NewsletterSection />
+      <CaseStudiesCardsSection />
       <ContactSection />
     </>
   );
-}
+}

src/pages/HomePage/sections/CaseStudiesCards.tsx

@@ -0,0 +1,17 @@
+// Created by add_section_from_catalog (BlogSimpleCards).
+
+import React from 'react';
+import BlogSimpleCards from '@/components/sections/blog/BlogSimpleCards';
+
+export default function CaseStudiesCardsSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="case-studies-cards" id="case-studies-cards">
+      <BlogSimpleCards
+        tag="Case Studies"
+        items={[{"imageSrc":"https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800&h=600","title":"Scaling Revenue by 300% in 6 Months","category":"E-commerce","date":"Oct 12, 2023","authorImageSrc":"https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=150&h=150","authorName":"Sarah Jenkins","excerpt":"Learn how we helped a boutique fashion brand optimize their conversion funnel and scale their ad spend profitably."},{"authorName":"David Chen","excerpt":"Discover the strategies we implemented to help a B2B SaaS company reduce their churn rate by 40%.","authorImageSrc":"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=150&h=150","date":"Nov 05, 2023","imageSrc":"https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=800&h=600","category":"SaaS","title":"Reducing Churn and Boosting Retention"},{"authorImageSrc":"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=150&h=150","excerpt":"See how our custom software solution reduced patient onboarding time by 60% for a regional clinic network.","authorName":"Emily Rodriguez","date":"Dec 18, 2023","title":"Streamlining Patient Onboarding","category":"Healthcare","imageSrc":"https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&q=80&w=800&h=600"}]}
+        title="Real Results from Real Clients"
+        description="Dive deep into how we've helped businesses achieve their goals and overcome their biggest challenges."
+      />
+    </div>
+  );
+}

src/pages/HomePage/sections/Home.tsx

@@ -1,88 +1,61 @@
-import React from 'react';
-import HeroTiltedCards from '@/components/sections/hero/HeroTiltedCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
-import ScrollReveal from "@/components/ui/ScrollReveal";
-import Tag from "@/components/ui/Tag";
+import React from "react";
 import Button from "@/components/ui/Button";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
 
-export default function HomeSection(): React.JSX.Element {
+export default function HomeSection() {
   return (
-    <div id="home" data-webild-section="home" className="relative overflow-hidden bg-background">
-  {React.createElement(() => {
-    const [selectedImage, setSelectedImage] = React.useState<string | null>(null);
-    const items = [
-      "http://img.b2bpic.net/free-photo/top-view-challah-dish-hanukkah_23-2151129284.jpg",
-      "http://img.b2bpic.net/free-photo/high-angle-people-wearing-linen-clothing_23-2151030585.jpg",
-      "http://img.b2bpic.net/free-photo/delicious-freshly-bakery-products-wooden-background-close-up-photo-freshly-baked-bread-products_613910-6800.jpg",
-      "https://images.unsplash.com/photo-1509440159596-0249088772ff?q=80&w=2072&auto=format&fit=crop",
-      "https://images.unsplash.com/photo-1558961363-fa8fdf82db35?q=80&w=1965&auto=format&fit=crop"
-    ];
-
-    return (
-      <>
-        <div className="container mx-auto px-4 text-center">
+    <div data-webild-section="home">
+      <section id="home" className="relative w-full overflow-hidden flex flex-col items-center justify-center text-center py-20 md:py-32">
+        <div className="container px-4 md:px-6 z-10">
           <ScrollReveal variant="slide-up">
-            <Tag text="Welcome to Our Bakery" className="mb-6 mx-auto" />
-            <h1 className="text-5xl md:text-7xl font-bold text-foreground mb-6 tracking-tight">
-              Freshly Baked, Made<br />Daily, Just for You
-            </h1>
-            <p className="text-xl text-muted-foreground max-w-content-width mx-auto">
+            <span className="text-sm uppercase tracking-widest text-muted-foreground mb-4 block">
+              Welcome to Our Bakery
+            </span>
+          </ScrollReveal>
+          
+          <TextAnimation
+            text="Start Your Day Right with Oven-Fresh Artisan Breads & Pastries"
+            variant="slide-up"
+            gradientText={false}
+            tag="h1"
+            className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight text-foreground mb-6 max-w-content-width mx-auto"
+          />
+          
+          <ScrollReveal variant="slide-up" delay={0.2}>
+            <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-content-width mx-auto">
               Handcrafted pastries, custom cakes, and artisan breads using premium ingredients. Order online or visit us today.
             </p>
-            <div className="flex flex-wrap justify-center gap-4">
-              <Button text="Order Now" variant="primary" href="#contact" />
-              <Button text="Our Menu" variant="secondary" href="#products" />
+          </ScrollReveal>
+          
+          <ScrollReveal variant="slide-up" delay={0.3}>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+              <Button text="Order Now" variant="primary" href="/#contact" />
+              <Button text="Our Menu" variant="secondary" href="/#products" />
             </div>
           </ScrollReveal>
 
-          <ScrollReveal variant="slide-up">
-            <div className="relative max-w-content-width mx-auto h-[400px] flex justify-center items-center">
-              {items.map((src, idx) => {
-                const rotations = ['-rotate-12', '-rotate-6', 'rotate-0', 'rotate-6', 'rotate-12'];
-                const zIndexes = ['z-10', 'z-20', 'z-30', 'z-20', 'z-10'];
-                const translates = ['-translate-x-40', '-translate-x-20', 'translate-x-0', 'translate-x-20', 'translate-x-40'];
-                
-                return (
-                  <div 
-                    key={idx}
-                    className={`absolute w-48 h-64 md:w-64 md:h-80 rounded-theme overflow-hidden border-8 border-white shadow-xl cursor-pointer transition-transform hover:scale-110 hover:z-50 ${rotations[idx]} ${zIndexes[idx]} ${translates[idx]}`}
-                    onClick={() => setSelectedImage(src)}
-                  >
-                    <ImageOrVideo imageSrc={src} className="w-full h-full object-cover" />
-                  </div>
-                );
-              })}
+          <ScrollReveal variant="slide-up" delay={0.4}>
+            <div className="flex w-full max-w-content-width mx-auto h-[300px] md:h-[400px] gap-2 md:gap-4 mt-12">
+              <div className="group relative flex-1 hover:flex-[3] transition-all duration-500 ease-in-out overflow-hidden rounded-theme shadow-md cursor-pointer">
+                <img src="https://images.unsplash.com/photo-1509440159596-0249088772ff?w=800&q=80" alt="Freshly baked pastry" className="w-full h-full object-cover" />
+              </div>
+              <div className="group relative flex-1 hover:flex-[3] transition-all duration-500 ease-in-out overflow-hidden rounded-theme shadow-md cursor-pointer">
+                <img src="https://images.unsplash.com/photo-1483695028939-5bb13f8648b0?w=800&q=80" alt="Artisan bread loaf" className="w-full h-full object-cover" />
+              </div>
+              <div className="group relative flex-1 hover:flex-[3] transition-all duration-500 ease-in-out overflow-hidden rounded-theme shadow-md cursor-pointer">
+                <img src="https://images.unsplash.com/photo-1549931319-a545dcf3bc73?w=800&q=80" alt="Sourdough bread" className="w-full h-full object-cover" />
+              </div>
+              <div className="group relative flex-1 hover:flex-[3] transition-all duration-500 ease-in-out overflow-hidden rounded-theme shadow-md cursor-pointer">
+                <img src="https://images.unsplash.com/photo-1550617931-e17a7b70dce2?w=800&q=80" alt="Custom cake" className="w-full h-full object-cover" />
+              </div>
+              <div className="group relative flex-1 hover:flex-[3] transition-all duration-500 ease-in-out overflow-hidden rounded-theme shadow-md cursor-pointer">
+                <img src="https://images.unsplash.com/photo-1608198093002-ad4e005484ec?w=800&q=80" alt="Chocolate chip cookies" className="w-full h-full object-cover" />
+              </div>
             </div>
           </ScrollReveal>
         </div>
-
-        {selectedImage && (
-          <div 
-            className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 p-4 backdrop-blur-sm"
-            onClick={() => setSelectedImage(null)}
-          >
-            <button 
-              className="absolute top-6 right-6 text-white hover:text-gray-300 transition-colors"
-              onClick={() => setSelectedImage(null)}
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-            <div 
-              className="relative max-w-content-width max-h-[90vh] w-full h-full flex items-center justify-center"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <img 
-                src={selectedImage} 
-                alt="Expanded view" 
-                className="max-w-full max-h-full object-contain rounded-lg shadow-2xl" 
-              />
-            </div>
-          </div>
-        )}
-      </>
-    );
-  })}
-</div>
+      </section>
+    </div>
   );
 }

src/pages/HomePage/sections/HowItWorks.tsx

@@ -0,0 +1,17 @@
+// Created by add_section_from_catalog (FeaturesDetailedSteps).
+
+import React from 'react';
+import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
+
+export default function HowItWorksSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="how-it-works" id="how-it-works">
+      <FeaturesDetailedSteps
+        title="Get started in 3 simple steps"
+        steps={[{"tag":"Step 1","imageSrc":"https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop","description":"Enter your details and verify your email to get instant access to our platform.","title":"Create your account","subtitle":"Sign up in seconds"},{"subtitle":"Tailor it to your needs","imageSrc":"https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015&auto=format&fit=crop","tag":"Step 2","title":"Configure your workspace","description":"Set up your preferences, invite team members, and connect your favorite tools."},{"subtitle":"See results immediately","imageSrc":"https://images.unsplash.com/photo-1551434678-e076c223a692?q=80&w=2070&auto=format&fit=crop","tag":"Step 3","title":"Start achieving goals","description":"Launch your first project and track your progress with our intuitive dashboard."}]}
+        description="Our onboarding process is designed to be quick and painless so you can start seeing value immediately."
+        tag="How It Works"
+      />
+    </div>
+  );
+}

src/pages/HomePage/sections/Newsletter.tsx

@@ -0,0 +1,18 @@
+// Created by add_section_from_catalog (ContactCenter).
+
+import React from 'react';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+
+export default function NewsletterSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="newsletter" id="newsletter">
+      <ContactCenter
+        inputPlaceholder="Enter your email address"
+        title="Stay in the Loop"
+        description="Join our newsletter to get the latest news, updates, and special offers delivered directly to your inbox."
+        tag="Newsletter"
+        buttonText="Subscribe"
+      />
+    </div>
+  );
+}

src/pages/HomePage/sections/Pricing.tsx

@@ -0,0 +1,17 @@
+// Created by add_section_from_catalog (PricingHighlightedCards).
+
+import React from 'react';
+import PricingHighlightedCards from '@/components/sections/pricing/PricingHighlightedCards';
+
+export default function PricingSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="pricing" id="pricing">
+      <PricingHighlightedCards
+        title="Simple, Transparent Pricing"
+        plans={[{"features":["1 Artisan Loaf per week","Choice of Sourdough or Rye","Free in-store pickup"],"tag":"Basic","primaryButton":{"href":"#","text":"Subscribe Now"},"price":"$15/wk","description":"Perfect for individuals who want fresh bread weekly."},{"highlight":"Most Popular","tag":"Family","description":"Ideal for families who love fresh baked goods.","price":"$35/wk","primaryButton":{"href":"#","text":"Subscribe Now"},"features":["3 Artisan Loaves per week","Assorted Pastries box (4 pcs)","Free local delivery"]},{"features":["Custom cake orders","Large pastry platters","Dedicated catering manager"],"description":"For parties, corporate events, and special occasions.","primaryButton":{"href":"#","text":"Contact Us"},"price":"Custom","tag":"Event"}]}
+        tag="Pricing"
+        description="Choose the perfect plan for your daily bread and pastry needs."
+      />
+    </div>
+  );
+}

src/routes.ts

@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/book-now', label: 'Book Now', pageFile: 'BookNowPage' },
 ];