From 925b56a19da44b86b162d57949689342c231c346 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 7 May 2026 23:07:05 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 455 ++++++++++++++---------------------------------
 1 file changed, 133 insertions(+), 322 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 327e342..f1a8fa0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -29,337 +29,148 @@ export default function LandingPage() {
         headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Services",
-          id: "features",
-        },
-        {
-          name: "Pricing",
-          id: "pricing",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="WebBuild Pros"
-      button={{
-        text: "Get Started",
-        href: "#contact",
-      }}
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "Services", id: "features" },
+              { name: "Pricing", id: "pricing" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="WebBuild Pros"
+            button={{ text: "Get Started", href: "#contact" }}
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogoBillboard
-      background={{
-        variant: "radial-gradient",
-      }}
-      logoText="WebBuild Pros"
-      description="We craft professional, high-performance websites that elevate your business identity and boost your digital presence."
-      buttons={[
-        {
-          text: "Start Project",
-          href: "#contact",
-        },
-        {
-          text: "Our Services",
-          href: "#features",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/mid-section-businessman-showing-open-laptop-with-blank-white-screen_23-2148041564.jpg"
-      mediaAnimation="slide-up"
-      imageAlt="clean workspace web design"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroLogoBillboard
+            background={{ variant: "radial-gradient" }}
+            logoText="WebBuild Pros"
+            description="We craft professional, high-performance websites that elevate your business identity and boost your digital presence."
+            buttons={[
+              { text: "Start Project", href: "#contact" },
+              { text: "Our Services", href: "#features" },
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/mid-section-businessman-showing-open-laptop-with-blank-white-screen_23-2148041564.jpg"
+            mediaAnimation="slide-up"
+            imageAlt="clean workspace web design"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <InlineImageSplitTextAbout
-      useInvertedBackground={false}
-      heading={[
-        {
-          type: "text",
-          content: "Crafting Digital Excellence",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/adult-male-illustrator-working-tablet-device_23-2149863236.jpg",
-          alt: "web design collaboration professionals",
-        },
-      ]}
-    />
-  </div>
+        <div id="about" data-section="about">
+          <InlineImageSplitTextAbout
+            useInvertedBackground={false}
+            heading={[
+              { type: "text", content: "Crafting Digital Excellence" },
+              { type: "image", src: "http://img.b2bpic.net/free-photo/adult-male-illustrator-working-tablet-device_23-2149863236.jpg", alt: "web design collaboration professionals" },
+            ]}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardOne
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Responsive Design",
-          description: "Beautiful, accessible interfaces that work perfectly across all devices.",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-designer-working-floor_23-2149930985.jpg",
-          imageAlt: "responsive web design icon",
-        },
-        {
-          title: "SEO Optimized",
-          description: "Built from the ground up for maximum visibility and better ranking.",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-science-background-with-low-poly-plexus-design_1048-13265.jpg",
-          imageAlt: "seo growth icon digital",
-        },
-        {
-          title: "Secure Hosting",
-          description: "Fast, scalable, and secure infrastructure for maximum uptime.",
-          imageSrc: "http://img.b2bpic.net/free-photo/cloud-with-open-lock_1048-1662.jpg",
-          imageAlt: "web hosting security icon",
-        },
-      ]}
-      title="Our Web Solutions"
-      description="Comprehensive design and development tailored for growth."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardOne
+            animationType="slide-up"
+            textboxLayout="split"
+            gridVariant="uniform-all-items-equal"
+            useInvertedBackground={false}
+            features={[
+              { title: "Responsive Design", description: "Beautiful, accessible interfaces that work perfectly across all devices.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-designer-working-floor_23-2149930985.jpg", imageAlt: "responsive web design icon" },
+              { title: "SEO Optimized", description: "Built from the ground up for maximum visibility and better ranking.", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-science-background-with-low-poly-plexus-design_1048-13265.jpg", imageAlt: "seo growth icon digital" },
+              { title: "Secure Hosting", description: "Fast, scalable, and secure infrastructure for maximum uptime.", imageSrc: "http://img.b2bpic.net/free-photo/cloud-with-open-lock_1048-1662.jpg", imageAlt: "web hosting security icon" },
+            ]}
+            title="Our Web Solutions"
+            description="Comprehensive design and development tailored for growth."
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardOne
-      textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          value: "150+",
-          title: "Projects Completed",
-          description: "Successful web deployments",
-          icon: CheckCircle,
-        },
-        {
-          id: "m2",
-          value: "99%",
-          title: "Client Satisfaction",
-          description: "Highly satisfied partners",
-          icon: Award,
-        },
-        {
-          id: "m3",
-          value: "24/7",
-          title: "Support Availability",
-          description: "Always ready to help",
-          icon: Zap,
-        },
-      ]}
-      title="Proven Results"
-      description="Our work speaks for itself in hard numbers."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardOne
+            animationType="slide-up"
+            textboxLayout="split"
+            gridVariant="uniform-all-items-equal"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "m1", value: "150+", title: "Projects Completed", description: "Successful web deployments", icon: CheckCircle },
+              { id: "m2", value: "99%", title: "Client Satisfaction", description: "Highly satisfied partners", icon: Award },
+              { id: "m3", value: "24/7", title: "Support Availability", description: "Always ready to help", icon: Zap },
+            ]}
+            title="Proven Results"
+            description="Our work speaks for itself in hard numbers."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Sarah J.",
-          role: "CEO",
-          testimonial: "Exceptional work! My business grew significantly with the new site.",
-          imageSrc: "http://img.b2bpic.net/free-photo/coffee-time-me-please_329181-17310.jpg",
-          imageAlt: "professional client portrait smile",
-        },
-        {
-          id: "2",
-          name: "Michael C.",
-          role: "Director",
-          testimonial: "Professional, fast, and responsive. Highly recommend.",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5370.jpg",
-          imageAlt: "professional male client portrait",
-        },
-        {
-          id: "3",
-          name: "Emily R.",
-          role: "Marketing",
-          testimonial: "They truly understand our branding and delivery was seamless.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-smiling-kitchen_107420-12357.jpg",
-          imageAlt: "professional office client portrait",
-        },
-        {
-          id: "4",
-          name: "David K.",
-          role: "Founder",
-          testimonial: "The best investment for my company this year.",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-with-cup-coffee_23-2149330971.jpg",
-          imageAlt: "business executive portrait professional",
-        },
-        {
-          id: "5",
-          name: "Laura S.",
-          role: "Manager",
-          testimonial: "Efficient workflow and stunning design results.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-blue-jacket_23-2149020770.jpg",
-          imageAlt: "creative business owner portrait",
-        },
-      ]}
-      title="Client Success"
-      description="What our clients say about us."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardTwo
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "1", name: "Sarah J.", role: "CEO", testimonial: "Exceptional work! My business grew significantly with the new site.", imageSrc: "http://img.b2bpic.net/free-photo/coffee-time-me-please_329181-17310.jpg", imageAlt: "professional client portrait smile" },
+              { id: "2", name: "Michael C.", role: "Director", testimonial: "Professional, fast, and responsive. Highly recommend.", imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5370.jpg", imageAlt: "professional male client portrait" },
+              { id: "3", name: "Emily R.", role: "Marketing", testimonial: "They truly understand our branding and delivery was seamless.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-smiling-kitchen_107420-12357.jpg", imageAlt: "professional office client portrait" },
+              { id: "4", name: "David K.", role: "Founder", testimonial: "The best investment for my company this year.", imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-with-cup-coffee_23-2149330971.jpg", imageAlt: "business executive portrait professional" },
+              { id: "5", name: "Laura S.", role: "Manager", testimonial: "Efficient workflow and stunning design results.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-blue-jacket_23-2149020770.jpg", imageAlt: "creative business owner portrait" },
+            ]}
+            title="Client Success"
+            description="What our clients say about us."
+          />
+        </div>
 
-  <div id="pricing" data-section="pricing">
-      <PricingCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      plans={[
-        {
-          id: "starter",
-          badge: "Essential",
-          price: "$1,999",
-          subtitle: "Perfect for new businesses",
-          features: [
-            "Landing Page",
-            "Mobile Optimized",
-            "Standard SEO",
-          ],
-          buttons: [
-            {
-              text: "Contact Us",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          id: "pro",
-          badge: "Popular",
-          price: "$4,999",
-          subtitle: "Great for growing companies",
-          features: [
-            "Full Website",
-            "Custom UI",
-            "Advanced SEO",
-            "Support",
-          ],
-          buttons: [
-            {
-              text: "Contact Us",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          id: "premium",
-          badge: "Enterprise",
-          price: "$9,999+",
-          subtitle: "For established brands",
-          features: [
-            "Custom App",
-            "E-commerce",
-            "Full Maintenance",
-            "24/7 Priority",
-          ],
-          buttons: [
-            {
-              text: "Contact Us",
-              href: "#contact",
-            },
-          ],
-        },
-      ]}
-      title="Pricing Plans"
-      description="Choose the perfect package for your project."
-    />
-  </div>
+        <div id="pricing" data-section="pricing">
+          <PricingCardTwo
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            plans={[
+              { id: "starter", badge: "Essential", price: "$1,999", subtitle: "Perfect for new businesses", features: ["Landing Page", "Mobile Optimized", "Standard SEO"], buttons: [{ text: "Contact Us", href: "#contact" }] },
+              { id: "pro", badge: "Popular", price: "$4,999", subtitle: "Great for growing companies", features: ["Full Website", "Custom UI", "Advanced SEO", "Support"], buttons: [{ text: "Contact Us", href: "#contact" }] },
+              { id: "premium", badge: "Enterprise", price: "$9,999+", subtitle: "For established brands", features: ["Custom App", "E-commerce", "Full Maintenance", "24/7 Priority"], buttons: [{ text: "Contact Us", href: "#contact" }] },
+            ]}
+            title="Pricing Plans"
+            description="Choose the perfect package for your project."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "How long does a build take?",
-          content: "Typically 2-6 weeks depending on project complexity.",
-        },
-        {
-          id: "f2",
-          title: "Do you provide support?",
-          content: "Yes, we offer ongoing maintenance and support packages.",
-        },
-        {
-          id: "f3",
-          title: "Can I edit content?",
-          content: "Yes, all sites are delivered with an intuitive CMS.",
-        },
-      ]}
-      title="Common Questions"
-      description="Get answers to everything you need to know."
-      faqsAnimation="blur-reveal"
-      imageSrc="http://img.b2bpic.net/free-photo/african-american-manager-corporate-office-reviewing-company-reports_482257-116898.jpg"
-      imageAlt="African american manager in corporate office reviewing company reports"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitMedia
+            textboxLayout="split"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "f1", title: "How long does a build take?", content: "Typically 2-6 weeks depending on project complexity." },
+              { id: "f2", title: "Do you provide support?", content: "Yes, we offer ongoing maintenance and support packages." },
+              { id: "f3", title: "Can I edit content?", content: "Yes, all sites are delivered with an intuitive CMS." },
+            ]}
+            title="Common Questions"
+            description="Get answers to everything you need to know."
+            faqsAnimation="blur-reveal"
+            imageSrc="http://img.b2bpic.net/free-photo/african-american-manager-corporate-office-reviewing-company-reports_482257-116898.jpg"
+            imageAlt="African american manager in corporate office reviewing company reports"
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={false}
-      background={{
-        variant: "rotated-rays-animated",
-      }}
-      tag="Get Started"
-      title="Let's Build Something Great"
-      description="Send us your details and we will schedule a consultation."
-      imageSrc="http://img.b2bpic.net/free-photo/modern-minimalist-office-black-white_23-2151777528.jpg"
-      mediaAnimation="slide-up"
-      imageAlt="modern office reception desk"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactSplit
+            useInvertedBackground={false}
+            background={{ variant: "rotated-rays-animated" }}
+            tag="Get Started"
+            title="Let's Build Something Great"
+            description="Send us your details and we will schedule a consultation."
+            imageSrc="http://img.b2bpic.net/free-photo/modern-minimalist-office-black-white_23-2151777528.jpg"
+            mediaAnimation="slide-up"
+            imageAlt="modern office reception desk"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="WebBuild Pros"
-      columns={[
-        {
-          title: "Navigation",
-          items: [
-            {
-              label: "Services",
-              href: "#features",
-            },
-            {
-              label: "Pricing",
-              href: "#pricing",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy",
-              href: "#",
-            },
-            {
-              label: "Terms",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="WebBuild Pros"
+            columns={[
+              { title: "Navigation", items: [{ label: "Services", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Contact", href: "#contact" }] },
+              { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );