From 233da47d89f22a6928d09e9333c3b1ff244724f5 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sat, 18 Apr 2026 15:07:22 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 372 ++++++++++++++++-------------------------------
 1 file changed, 127 insertions(+), 245 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index b6c2833..7de74c1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -19,261 +19,143 @@ export default function LandingPage() {
         defaultButtonVariant="shift-hover"
         defaultTextAnimation="reveal-blur"
         borderRadius="pill"
+        contentWidth="medium"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        {
-          name: "Features",
-          id: "#features",
-        },
-        {
-          name: "FAQ",
-          id: "#faq",
-        },
-        {
-          name: "Templates",
-          id: "#templates",
-        },
-        {
-          name: "Pricing",
-          id: "#pricing",
-        },
-      ]}
-      brandName="Webild"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Features", id: "#features" },
+              { name: "FAQ", id: "#faq" },
+              { name: "Templates", id: "#templates" },
+              { name: "Pricing", id: "#pricing" },
+            ]}
+            brandName="Webild"
+            button={{ text: "Contact", href: "#contact" }}
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogoBillboard
-      background={{
-        variant: "gradient-bars",
-      }}
-      logoText="Webild"
-      description="Generate Websites Instantly, Customize to Perfection. Start with a single prompt and watch Webild turn your idea into a professional site tailored to your needs."
-      buttons={[
-        {
-          text: "Get Started",
-          href: "#contact",
-        },
-        {
-          text: "View Templates",
-          href: "#templates",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/3d-render-low-poly-network-communications-background-with-plexus-design_1048-14304.jpg"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroLogoBillboard
+            background={{ variant: "gradient-bars" }}
+            logoText="Webild"
+            description="Generate Websites Instantly, Customize to Perfection. Start with a single prompt and watch Webild turn your idea into a professional site tailored to your needs."
+            buttons={[
+              { text: "Get Started", href: "#contact" },
+              { text: "View Templates", href: "#templates" },
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/3d-render-low-poly-network-communications-background-with-plexus-design_1048-14304.jpg"
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <TestimonialAboutCard
-      useInvertedBackground={false}
-      tag="How It Works"
-      title="Bring Your Brand To Life"
-      description="Customize anything on your site with a single click. Edit text, swap images, and move elements so everything feels made for you."
-      subdescription="Launch your site in seconds with your own domain. Enjoy free built-in hosting and go live without ever leaving Webild."
-      icon={Zap}
-      imageSrc="http://img.b2bpic.net/free-photo/executive-manager-analyzing-marketing-statistics-working-late-night-project-strategy-startup-office-businessman-planning-business-investment-help-increase-company-profit_482257-63809.jpg"
-      mediaAnimation="blur-reveal"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <TestimonialAboutCard
+            useInvertedBackground={false}
+            tag="How It Works"
+            title="Bring Your Brand To Life"
+            description="Customize anything on your site with a single click. Edit text, swap images, and move elements so everything feels made for you."
+            subdescription="Launch your site in seconds with your own domain. Enjoy free built-in hosting and go live without ever leaving Webild."
+            icon={Zap}
+            imageSrc="http://img.b2bpic.net/free-photo/executive-manager-analyzing-marketing-statistics-working-late-night-project-strategy-startup-office-businessman-planning-business-investment-help-increase-company-profit_482257-63809.jpg"
+            mediaAnimation="blur-reveal"
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardTwentyEight
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={true}
-      features={[
-        {
-          id: "f1",
-          title: "AI Crafting",
-          subtitle: "Get on-brand images instantly.",
-          category: "Creativity",
-          value: "Powered by AI",
-        },
-        {
-          id: "f2",
-          title: "Smart SEO",
-          subtitle: "Boost your traffic and reach.",
-          category: "Performance",
-          value: "Data Driven",
-        },
-        {
-          id: "f3",
-          title: "Free Hosting",
-          subtitle: "Go live in seconds.",
-          category: "Deployment",
-          value: "Built-in",
-        },
-      ]}
-      title="Everything you need to grow online"
-      description="Build, sell, blog, and connect with your audience using our integrated platform tools."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardTwentyEight
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={true}
+            features={[
+              { id: "f1", title: "AI Crafting", subtitle: "Get on-brand images instantly.", category: "Creativity", value: "Powered by AI" },
+              { id: "f2", title: "Smart SEO", subtitle: "Boost your traffic and reach.", category: "Performance", value: "Data Driven" },
+              { id: "f3", title: "Free Hosting", subtitle: "Go live in seconds.", category: "Deployment", value: "Built-in" },
+            ]}
+            title="Everything you need to grow online"
+            description="Build, sell, blog, and connect with your audience using our integrated platform tools."
+          />
+        </div>
 
-  <div id="templates" data-section="templates">
-      <ProductCardOne
-      textboxLayout="default"
-      gridVariant="four-items-2x2-equal-grid"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",
-          name: "Web Agency",
-          price: "Custom",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-techno-background-with-male-head-programming-code_1048-5828.jpg",
-        },
-        {
-          id: "p2",
-          name: "SaaS Platform",
-          price: "Custom",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241200.jpg",
-        },
-        {
-          id: "p3",
-          name: "E-Commerce",
-          price: "Custom",
-          imageSrc: "http://img.b2bpic.net/free-photo/global-business-internet-network-connection-iot-internet-things-business-intelligence-concept-busines-global-network-futuristic-technology-background-ai-generative_1258-176791.jpg",
-        },
-        {
-          id: "p4",
-          name: "Personal Portfolio",
-          price: "Custom",
-          imageSrc: "http://img.b2bpic.net/free-photo/african-american-entrepreneur-writing-reports-while-working-late-computer-office_637285-2622.jpg",
-        },
-        {
-          id: "p5",
-          name: "Restaurant",
-          price: "Custom",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-low-poly-background-with-connecting-lines-dots_1048-14634.jpg",
-        },
-        {
-          id: "p6",
-          name: "Real Estate",
-          price: "Custom",
-          imageSrc: "http://img.b2bpic.net/free-photo/remote-employee-holding-chroma-key-device-analyzing-business-graphics_482257-82851.jpg",
-        },
-      ]}
-      title="Browse our collection"
-      description="Start with a template tailored to your specific industry."
-    />
-  </div>
+        <div id="templates" data-section="templates">
+          <ProductCardOne
+            textboxLayout="default"
+            gridVariant="four-items-2x2-equal-grid"
+            animationType="blur-reveal"
+            useInvertedBackground={false}
+            products={[
+              { id: "p1", name: "Web Agency", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-techno-background-with-male-head-programming-code_1048-5828.jpg" },
+              { id: "p2", name: "SaaS Platform", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241200.jpg" },
+              { id: "p3", name: "E-Commerce", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/global-business-internet-network-connection-iot-internet-things-business-intelligence-concept-busines-global-network-futuristic-technology-background-ai-generative_1258-176791.jpg" },
+            ]}
+            title="Browse our collection"
+            description="Start with a template tailored to your specific industry."
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardTwo
-      animationType="depth-3d"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={true}
-      metrics={[
-        {
-          id: "m1",
-          value: "100%",
-          description: "Uptime Guaranteed",
-        },
-        {
-          id: "m2",
-          value: "5M+",
-          description: "Monthly Visitors Supported",
-        },
-        {
-          id: "m3",
-          value: "24/7",
-          description: "Global Support",
-        },
-      ]}
-      title="Scale Without Changing Platforms"
-      description="Powerful metrics and insights to help you grow."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardTwo
+            animationType="depth-3d"
+            textboxLayout="default"
+            gridVariant="uniform-all-items-equal"
+            useInvertedBackground={true}
+            metrics={[
+              { id: "m1", value: "100%", description: "Uptime Guaranteed" },
+              { id: "m2", value: "5M+", description: "Monthly Visitors Supported" },
+              { id: "m3", value: "24/7", description: "Global Support" },
+            ]}
+            title="Scale Without Changing Platforms"
+            description="Powerful metrics and insights to help you grow."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "q1",
-          title: "What is Webild?",
-          content: "An AI-powered builder that lets you create websites with a single prompt.",
-        },
-        {
-          id: "q2",
-          title: "Can I edit everything?",
-          content: "Yes, customize layouts, images, and content instantly.",
-        },
-        {
-          id: "q3",
-          title: "What can I build?",
-          content: "Portfolios, stores, blogs, and business sites.",
-        },
-      ]}
-      sideTitle="Frequently Asked Questions"
-      sideDescription="Still have questions about Webild?"
-      faqsAnimation="blur-reveal"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitText
+            useInvertedBackground={false}
+            faqs={[
+              { id: "q1", title: "What is Webild?", content: "An AI-powered builder that lets you create websites with a single prompt." },
+              { id: "q2", title: "Can I edit everything?", content: "Yes, customize layouts, images, and content instantly." },
+              { id: "q3", title: "What can I build?", content: "Portfolios, stores, blogs, and business sites." },
+            ]}
+            sideTitle="Frequently Asked Questions"
+            sideDescription="Still have questions about Webild?"
+            faqsAnimation="blur-reveal"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCenter
-      useInvertedBackground={true}
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      tag="Launch Now"
-      title="Ready to get started?"
-      description="Start with a single prompt and watch Webild turn your idea into a professional site."
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactCenter
+            useInvertedBackground={true}
+            background={{ variant: "sparkles-gradient" }}
+            tag="Launch Now"
+            title="Ready to get started?"
+            description="Start with a single prompt and watch Webild turn your idea into a professional site."
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseReveal
-      logoText="Webild"
-      columns={[
-        {
-          title: "Product",
-          items: [
-            {
-              label: "Features",
-              href: "#features",
-            },
-            {
-              label: "Pricing",
-              href: "#pricing",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About",
-              href: "#",
-            },
-            {
-              label: "Support",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy",
-              href: "#",
-            },
-            {
-              label: "Terms",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="Webild"
+            columns={[
+              {
+                title: "Product",                items: [
+                  { label: "Features", href: "#features" },
+                  { label: "Pricing", href: "#pricing" },
+                ],
+              },
+              { title: "Company", items: [{ label: "About", href: "#" }, { label: "Support", href: "#" }] },
+              { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
+            ]
+            }
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1