From 65f9dc561bff1f031efe074581ac70562d167b10 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 31 Mar 2026 00:58:59 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 331 ++++++++++++++++-------------------------------
 1 file changed, 114 insertions(+), 217 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index e0f6811..d330e00 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -17,231 +17,128 @@ export default function LandingPage() {
         defaultButtonVariant="text-shift"
         defaultTextAnimation="entrance-slide"
         borderRadius="rounded"
+        contentWidth="medium"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "AI Chat",
-          id: "#chat",
-        },
-        {
-          name: "Writing",
-          id: "#writing",
-        },
-        {
-          name: "Design",
-          id: "#design",
-        },
-        {
-          name: "Video",
-          id: "#video",
-        },
-        {
-          name: "Business",
-          id: "#business",
-        },
-      ]}
-      brandName="AisToMyAdvantage"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "AI Chat", id: "#chat" },
+              { name: "Writing", id: "#writing" },
+              { name: "Design", id: "#design" },
+              { name: "Video", id: "#video" },
+              { name: "Business", id: "#business" },
+            ]}
+            brandName="AisToMyAdvantage"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardScroll
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      title="How to Use AIs to Your Advantage"
-      description="The ultimate directory of AI tools — organized by category with video tutorials to get you started fast and boost your productivity."
-      buttons={[
-        {
-          text: "Explore Tools",
-          href: "#chat",
-        },
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/a-futuristic-ai-interface-featuring-holo-1774918699183-282fe7bd.png?_wi=1"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroBillboardScroll
+            background={{ variant: "sparkles-gradient" }}
+            title="How to Use AIs to Your Advantage"
+            description="The ultimate directory of AI tools — organized by category with video tutorials to get you started fast and boost your productivity."
+            buttons={[{ text: "Explore Tools", href: "#chat" }]}
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/a-futuristic-ai-interface-featuring-holo-1774918699183-282fe7bd.png"
+          />
+        </div>
 
-  <div id="chat" data-section="chat">
-      <FeatureBento
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "ChatGPT",
-          description: "Writing, coding, business ideas, and task automation.",
-          bentoComponent: "reveal-icon",
-          icon: MessageSquare,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/a-futuristic-ai-interface-featuring-holo-1774918699183-282fe7bd.png?_wi=2",
-          imageAlt: "A futuristic AI interface featuring holographic nodes and glowing connections in blue and white. Hig",
-        },
-        {
-          title: "Claude",
-          description: "Powerful long-form writing, analysis, and document processing.",
-          bentoComponent: "reveal-icon",
-          icon: FileText,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/a-clean-dashboard-showing-writing-tools--1774918699281-0085c692.png?_wi=1",
-          imageAlt: "A clean dashboard showing writing tools and grammar analysis icons in a modern blue glassmorphism st",
-        },
-        {
-          title: "Perplexity AI",
-          description: "Search engine power with cited sources for research.",
-          bentoComponent: "reveal-icon",
-          icon: Search,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/a-digital-canvas-with-design-tools-and-i-1774918700053-e28f1c8c.png?_wi=1",
-          imageAlt: "A digital canvas with design tools and image generation icons, clean blue accents.",
-        },
-      ]}
-      title="General AI Chat & Assistants"
-      description="Most popular AI tools used daily for writing, coding, and automation."
-    />
-  </div>
+        <div id="chat" data-section="chat">
+          <FeatureBento
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            title="General AI Chat & Assistants"
+            description="Most popular AI tools used daily for writing, coding, and automation."
+            features={[
+              {
+                title: "ChatGPT",                description: "Writing, coding, business ideas, and task automation.",                bentoComponent: "reveal-icon",                icon: MessageSquare
+              },
+              {
+                title: "Claude",                description: "Powerful long-form writing, analysis, and document processing.",                bentoComponent: "reveal-icon",                icon: FileText
+              },
+              {
+                title: "Perplexity AI",                description: "Search engine power with cited sources for research.",                bentoComponent: "reveal-icon",                icon: Search
+              }
+            ]}
+          />
+        </div>
 
-  <div id="writing" data-section="writing">
-      <ProductCardTwo
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",
-          brand: "Writing",
-          name: "Jasper AI",
-          price: "High Performance",
-          rating: 5,
-          reviewCount: "5k+",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/a-clean-dashboard-showing-writing-tools--1774918699281-0085c692.png?_wi=2",
-        },
-        {
-          id: "p2",
-          brand: "Design",
-          name: "Midjourney",
-          price: "AI Art",
-          rating: 5,
-          reviewCount: "10k+",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/professional-ai-image-editing-tool-inter-1774918699688-3f01b6b9.png",
-        },
-        {
-          id: "p3",
-          brand: "Design",
-          name: "Canva AI",
-          price: "Graphics & Layout",
-          rating: 4,
-          reviewCount: "8k+",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/a-digital-canvas-with-design-tools-and-i-1774918700053-e28f1c8c.png?_wi=2",
-        },
-      ]}
-      title="AI Writing & Design Tools"
-      description="Tools for content, emails, marketing, graphics, and branding."
-    />
-  </div>
+        <div id="writing" data-section="writing">
+          <ProductCardTwo
+            animationType="slide-up"
+            textboxLayout="split"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            title="AI Writing & Design Tools"
+            description="Tools for content, emails, marketing, graphics, and branding."
+            products={[
+              { id: "p1", brand: "Writing", name: "Jasper AI", price: "High Performance", rating: 5, reviewCount: "5k+", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/a-clean-dashboard-showing-writing-tools--1774918699281-0085c692.png" },
+              { id: "p2", brand: "Design", name: "Midjourney", price: "AI Art", rating: 5, reviewCount: "10k+", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/professional-ai-image-editing-tool-inter-1774918699688-3f01b6b9.png" },
+              { id: "p3", brand: "Design", name: "Canva AI", price: "Graphics & Layout", rating: 4, reviewCount: "8k+", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/a-digital-canvas-with-design-tools-and-i-1774918700053-e28f1c8c.png" },
+            ]}
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "1",
-          title: "How does AI help productivity?",
-          content: "AI automates repetitive tasks and provides smart suggestions to speed up content creation and analysis.",
-        },
-        {
-          id: "2",
-          title: "Which tools should I start with?",
-          content: "Start with general AI assistants like ChatGPT or Claude for immediate daily improvements.",
-        },
-        {
-          id: "3",
-          title: "Are these tools free?",
-          content: "Most tools listed offer a free tier, while professional features often require a subscription.",
-        },
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/professional-research-and-data-analysis--1774918700103-a11ad7ab.png"
-      title="Why Use AI Tools?"
-      description="See how AI can transform your daily workflow — from writing emails to creating Excel formulas in seconds."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitMedia
+            textboxLayout="split"
+            useInvertedBackground={true}
+            title="Why Use AI Tools?"
+            description="See how AI can transform your daily workflow — from writing emails to creating Excel formulas in seconds."
+            faqsAnimation="slide-up"
+            faqs={[
+              { id: "1", title: "How does AI help productivity?", content: "AI automates repetitive tasks and provides smart suggestions to speed up content creation and analysis." },
+              { id: "2", title: "Which tools should I start with?", content: "Start with general AI assistants like ChatGPT or Claude for immediate daily improvements." },
+              { id: "3", title: "Are these tools free?", content: "Most tools listed offer a free tier, while professional features often require a subscription." },
+            ]}
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/professional-research-and-data-analysis--1774918700103-a11ad7ab.png"
+          />
+        </div>
 
-  <div id="metric" data-section="metric">
-      <MetricCardFourteen
-      useInvertedBackground={false}
-      title="Impact of AI Adoption"
-      tag="Productivity Growth"
-      tagAnimation="slide-up"
-      metricsAnimation="slide-up"
-      metrics={[
-        {
-          id: "m1",
-          value: "40%",
-          description: "Reduction in time spent on routine administrative tasks",
-        },
-        {
-          id: "m2",
-          value: "3x",
-          description: "Increase in content production capacity per team member",
-        },
-        {
-          id: "m3",
-          value: "95%",
-          description: "Accuracy in data analysis and automated reporting",
-        },
-        {
-          id: "m4",
-          value: "12+",
-          description: "Hours saved per week on manual project management",
-        },
-        {
-          id: "m5",
-          value: "500+",
-          description: "Automated workflow executions per month",
-        },
-      ]}
-    />
-  </div>
+        <div id="metric" data-section="metric">
+          <MetricCardFourteen
+            useInvertedBackground={false}
+            title="Impact of AI Adoption"
+            tag="Productivity Growth"
+            tagAnimation="slide-up"
+            metricsAnimation="slide-up"
+            metrics={[
+              { id: "m1", value: "40%", description: "Reduction in time spent on routine administrative tasks" },
+              { id: "m2", value: "3x", description: "Increase in content production capacity per team member" },
+              { id: "m3", value: "95%", description: "Accuracy in data analysis and automated reporting" },
+              { id: "m4", value: "12+", description: "Hours saved per week on manual project management" },
+              { id: "m5", value: "500+", description: "Automated workflow executions per month" },
+            ]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseReveal
-      columns={[
-        {
-          title: "Categories",
-          items: [
-            {
-              label: "Writing",
-              href: "#writing",
-            },
-            {
-              label: "Design",
-              href: "#design",
-            },
-            {
-              label: "Business",
-              href: "#business",
-            },
-          ],
-        },
-        {
-          title: "Mastery",
-          items: [
-            {
-              label: "Why AI Matters",
-              href: "#about",
-            },
-            {
-              label: "Quick Reference",
-              href: "#tools",
-            },
-          ],
-        },
-      ]}
-      copyrightText="Created by Jyte Tapere. Built to help you master AI tools — one category at a time."
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            columns={[
+              {
+                title: "Categories",                items: [
+                  { label: "Writing", href: "#writing" },
+                  { label: "Design", href: "#design" },
+                  { label: "Business", href: "#business" },
+                ],
+              },
+              {
+                title: "Mastery",                items: [
+                  { label: "Why AI Matters", href: "#about" },
+                  { label: "Quick Reference", href: "#tools" },
+                ],
+              },
+            ]}
+            copyrightText="Created by Jyte Tapere. Built to help you master AI tools — one category at a time."
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1