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

---
 src/app/page.tsx | 441 ++++++++++++++---------------------------------
 1 file changed, 134 insertions(+), 307 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index d2c7d13..7393875 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -20,324 +20,151 @@ 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: "Pricing",
-          id: "pricing",
-        },
-        {
-          name: "Testimonials",
-          id: "testimonials",
-        },
-      ]}
-      brandName="ViralClip AI"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingInline
+              navItems={[
+                { name: "Features", id: "features" },
+                { name: "Pricing", id: "pricing" },
+                { name: "Testimonials", id: "testimonials" },
+              ]}
+              brandName="ViralClip AI"
+              button={{ text: "Get Started", href: "#contact" }}
+            />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroSplitKpi
-      background={{
-        variant: "plain",
-      }}
-      title="Turn 1 YouTube Link into 10 Viral TikToks in 60 Seconds."
-      description="The No-Watermark AI engine that re-frames, transcribes, and captions your long-form content into high-converting vertical clips automatically."
-      kpis={[
-        {
-          value: "100%",
-          label: "Watermark Free",
-        },
-        {
-          value: "60s",
-          label: "Processing Time",
-        },
-        {
-          value: "10x",
-          label: "Growth Engine",
-        },
-      ]}
-      enableKpiAnimation={true}
-      buttons={[
-        {
-          text: "Start Clipping",
-          href: "#",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/3d-abstract-techno-background-with-connecting-lines-dots_1048-11693.jpg?_wi=1"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/happy-girl-is-working-laptop-girl-with-laptop-emotion-concept_169016-66637.jpg",
-          alt: "User avatar 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/young-female-student-stands-with-digital-tablet-her-hands-outside_169016-25043.jpg",
-          alt: "User avatar 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/modern-man-checking-social-media-laptop_23-2148422225.jpg",
-          alt: "User avatar 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-hacker_23-2148165965.jpg",
-          alt: "User avatar 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-smiley-businesswoman-indoors-with-arms-closed_23-2148824828.jpg",
-          alt: "User avatar 5",
-        },
-      ]}
-      avatarText="Trusted by 5,000+ creators"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "AI Clipping",
-        },
-        {
-          type: "text",
-          text: "Viral Analytics",
-        },
-        {
-          type: "text",
-          text: "Auto-Subtitles",
-        },
-        {
-          type: "text",
-          text: "Face-Tracking",
-        },
-        {
-          type: "text",
-          text: "Seamless Workflow",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroSplitKpi
+            background={{ variant: "plain" }}
+            title="Turn 1 YouTube Link into 10 Viral TikToks in 60 Seconds."
+            description="The No-Watermark AI engine that re-frames, transcribes, and captions your long-form content into high-converting vertical clips automatically."
+            kpis={[
+              { value: "100%", label: "Watermark Free" },
+              { value: "60s", label: "Processing Time" },
+              { value: "10x", label: "Growth Engine" },
+            ]}
+            enableKpiAnimation={true}
+            buttons={[{ text: "Start Clipping", href: "#" }]}
+            imageSrc="http://img.b2bpic.net/free-photo/3d-abstract-techno-background-with-connecting-lines-dots_1048-11693.jpg"
+            mediaAnimation="slide-up"
+            avatars={[
+              { src: "http://img.b2bpic.net/free-photo/happy-girl-is-working-laptop-girl-with-laptop-emotion-concept_169016-66637.jpg", alt: "User 1" },
+              { src: "http://img.b2bpic.net/free-photo/young-female-student-stands-with-digital-tablet-her-hands-outside_169016-25043.jpg", alt: "User 2" },
+              { src: "http://img.b2bpic.net/free-photo/modern-man-checking-social-media-laptop_23-2148422225.jpg", alt: "User 3" },
+              { src: "http://img.b2bpic.net/free-photo/portrait-hacker_23-2148165965.jpg", alt: "User 4" },
+              { src: "http://img.b2bpic.net/free-photo/portrait-smiley-businesswoman-indoors-with-arms-closed_23-2148824828.jpg", alt: "User 5" },
+            ]}
+            avatarText="Trusted by 5,000+ creators"
+            marqueeItems={[{ type: "text", text: "AI Clipping" }, { type: "text", text: "Viral Analytics" }, { type: "text", text: "Auto-Subtitles" }, { type: "text", text: "Face-Tracking" }, { type: "text", text: "Seamless Workflow" }]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <TestimonialAboutCard
-      useInvertedBackground={false}
-      tag="How it works"
-      title="The Viral Pipeline Engine"
-      description="Our open-source rendering engine ensures your content remains yours. We don't bake branding into your files—just high-energy clips ready to perform."
-      subdescription="From YouTube URL to perfectly formatted TikTok assets, our stack handles the heavy lifting, including face-tracking reframing and AI-burnt subtitles."
-      icon={Zap}
-      imageSrc="http://img.b2bpic.net/free-photo/technology-circuit-processor-innovation-network-concept_53876-133726.jpg?_wi=1"
-      mediaAnimation="blur-reveal"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <TestimonialAboutCard
+            tag="How it works"
+            title="The Viral Pipeline Engine"
+            description="Our open-source rendering engine ensures your content remains yours. We don't bake branding into your files—just high-energy clips ready to perform."
+            subdescription="From YouTube URL to perfectly formatted TikTok assets, our stack handles the heavy lifting, including face-tracking reframing and AI-burnt subtitles."
+            icon={Zap}
+            imageSrc="http://img.b2bpic.net/free-photo/technology-circuit-processor-innovation-network-concept_53876-133726.jpg"
+            mediaAnimation="blur-reveal"
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardEight
-      textboxLayout="default"
-      useInvertedBackground={true}
-      features={[
-        {
-          title: "Auto-Reframing",
-          description: "AI-powered face tracking follows your speakers in 9:16 vertical crop.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=aiduuu",
-          imageAlt: "tech brand minimalist logo",
-        },
-        {
-          title: "Dynamic Subtitles",
-          description: "Word-by-word highlight animations with custom TikTok-ready fonts.",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-techno-background-with-connecting-lines-dots_1048-11693.jpg?_wi=2",
-          imageAlt: "tech brand minimalist logo",
-        },
-        {
-          title: "Hook Detection",
-          description: "LLM-based analysis finds high-retention moments automatically.",
-          imageSrc: "http://img.b2bpic.net/free-photo/technology-circuit-processor-innovation-network-concept_53876-133726.jpg?_wi=2",
-          imageAlt: "tech brand minimalist logo",
-        },
-      ]}
-      title="Viral-First Features"
-      description="Built for creators, by engineers who know what works."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardEight
+            textboxLayout="default"
+            useInvertedBackground={true}
+            features={[
+              { title: "Auto-Reframing", description: "AI-powered face tracking follows your speakers in 9:16 vertical crop.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=aiduuu", imageAlt: "reframing" },
+              { title: "Dynamic Subtitles", description: "Word-by-word highlight animations with custom TikTok-ready fonts.", imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-techno-background-with-connecting-lines-dots_1048-11693.jpg", imageAlt: "subtitles" },
+              { title: "Hook Detection", description: "LLM-based analysis finds high-retention moments automatically.", imageSrc: "http://img.b2bpic.net/free-photo/technology-circuit-processor-innovation-network-concept_53876-133726.jpg", imageAlt: "hook" },
+            ]}
+            title="Viral-First Features"
+            description="Built for creators, by engineers who know what works."
+          />
+        </div>
 
-  <div id="socialProof" data-section="socialProof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "ClipLab",
-        "Trendify",
-        "ViralMakers",
-        "SnapStudio",
-        "GrowthVids",
-        "ClipBoost",
-        "FastForward",
-      ]}
-      title="Trusted by Top Creators"
-      description="Join the creators who build content at scale."
-    />
-  </div>
+        <div id="socialProof" data-section="socialProof">
+          <SocialProofOne
+            textboxLayout="default"
+            names={["ClipLab", "Trendify", "ViralMakers", "SnapStudio", "GrowthVids", "ClipBoost", "FastForward"]}
+            title="Trusted by Top Creators"
+            description="Join the creators who build content at scale."
+          />
+        </div>
 
-  <div id="pricing" data-section="pricing">
-      <PricingCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      plans={[
-        {
-          id: "basic",
-          badge: "Starter",
-          price: "$19/mo",
-          subtitle: "For individual creators",
-          features: [
-            "50 clips/mo",
-            "Standard Subtitles",
-            "Watermark-Free",
-          ],
-        },
-        {
-          id: "pro",
-          badge: "Pro",
-          price: "$49/mo",
-          subtitle: "For growing teams",
-          features: [
-            "Unlimited clips",
-            "Advanced Analytics",
-            "Priority Rendering",
-          ],
-        },
-      ]}
-      title="Simple Viral Pricing"
-      description="Scale your production without the platform tax."
-    />
-  </div>
+        <div id="pricing" data-section="pricing">
+          <PricingCardOne
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            plans={[
+              { id: "basic", badge: "Starter", price: "$19/mo", subtitle: "For individual creators", features: ["50 clips/mo", "Standard Subtitles", "Watermark-Free"] },
+              { id: "pro", badge: "Pro", price: "$49/mo", subtitle: "For growing teams", features: ["Unlimited clips", "Advanced Analytics", "Priority Rendering"] },
+            ]}
+            title="Simple Viral Pricing"
+            description="Scale your production without the platform tax."
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          value: "100k+",
-          description: "Clips processed",
-        },
-        {
-          id: "m2",
-          value: "95%",
-          description: "User growth rate",
-        },
-        {
-          id: "m3",
-          value: "2ms",
-          description: "Transcription speed",
-        },
-      ]}
-      title="Impact by the Numbers"
-      description="Our pipeline consistently delivers results for viral content."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardTwo
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="uniform-all-items-equal"
+            metrics={[
+              { id: "m1", value: "100k+", description: "Clips processed" },
+              { id: "m2", value: "95%", description: "User growth rate" },
+              { id: "m3", value: "2ms", description: "Transcription speed" },
+            ]}
+            title="Impact by the Numbers"
+            description="Our pipeline consistently delivers results for viral content."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTen
-      textboxLayout="default"
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "1",
-          title: "Game Changer",
-          quote: "I stopped spending hours editing. My TikToks now go viral consistently.",
-          name: "Sarah Johnson",
-          role: "CEO",
-          imageSrc: "http://img.b2bpic.net/free-photo/bearded-male-eyeglasses-with-tattoo-his-arm-sits-chair-using-tablet-pc_613910-12174.jpg",
-        },
-        {
-          id: "2",
-          title: "Incredible Engine",
-          quote: "The no-watermark output is exactly what I needed for my brand.",
-          name: "Michael Chen",
-          role: "CTO",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-with-digital-tablet-cafe_23-2147778648.jpg",
-        },
-        {
-          id: "3",
-          title: "Scale Multiplied",
-          quote: "My workflow is 10x faster now. Highly recommended.",
-          name: "Emily Rodriguez",
-          role: "Marketing",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-handsome-man-sitting-cafe-table_1262-975.jpg",
-        },
-        {
-          id: "4",
-          title: "Best in Class",
-          quote: "The caption animations look professional and high-effort.",
-          name: "David Kim",
-          role: "Manager",
-          imageSrc: "http://img.b2bpic.net/free-photo/male-graphic-designer-using-digital-tablet_1170-1092.jpg",
-        },
-        {
-          id: "5",
-          title: "So Smooth",
-          quote: "The auto-reframe feature saved me so much time every single day.",
-          name: "Alex Smith",
-          role: "Editor",
-          imageSrc: "http://img.b2bpic.net/free-photo/military-girl-camouflage-uniform-against-army-background-shooting-range_627829-8532.jpg",
-        },
-      ]}
-      title="Voices of the Viral Engine"
-      description="Hear what creators say about their workflow transformation."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardTen
+            textboxLayout="default"
+            useInvertedBackground={true}
+            testimonials={[
+              { id: "1", title: "Game Changer", quote: "I stopped spending hours editing. My TikToks now go viral consistently.", name: "Sarah Johnson", role: "CEO", imageSrc: "http://img.b2bpic.net/free-photo/bearded-male-eyeglasses-with-tattoo-his-arm-sits-chair-using-tablet-pc_613910-12174.jpg" },
+              { id: "2", title: "Incredible Engine", quote: "The no-watermark output is exactly what I needed for my brand.", name: "Michael Chen", role: "CTO", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-digital-tablet-cafe_23-2147778648.jpg" },
+              { id: "3", title: "Scale Multiplied", quote: "My workflow is 10x faster now. Highly recommended.", name: "Emily Rodriguez", role: "Marketing", imageSrc: "http://img.b2bpic.net/free-photo/happy-young-handsome-man-sitting-cafe-table_1262-975.jpg" },
+              { id: "4", title: "Best in Class", quote: "The caption animations look professional and high-effort.", name: "David Kim", role: "Manager", imageSrc: "http://img.b2bpic.net/free-photo/male-graphic-designer-using-digital-tablet_1170-1092.jpg" },
+              { id: "5", title: "So Smooth", quote: "The auto-reframe feature saved me so much time every single day.", name: "Alex Smith", role: "Editor", imageSrc: "http://img.b2bpic.net/free-photo/military-girl-camouflage-uniform-against-army-background-shooting-range_627829-8532.jpg" },
+            ]}
+            title="Voices of the Viral Engine"
+            description="Hear what creators say about their workflow transformation."
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCenter
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      title="Start Your Viral Engine Today"
-      description="Enter your email to get early access to our beta."
-      tag="Early Access"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactCenter
+            tag="Early Access"
+            title="Start Your Viral Engine Today"
+            description="Enter your email to get early access to our beta."
+            background={{ variant: "plain" }}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "Product",
-          items: [
-            {
-              label: "Features",
-              href: "#features",
-            },
-            {
-              label: "Pricing",
-              href: "#pricing",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About",
-              href: "#",
-            },
-            {
-              label: "Legal",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="ViralClip AI"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            logoText="ViralClip AI"
+            columns={[
+              { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
+              { title: "Company", items: [{ label: "About", href: "#" }, { label: "Legal", href: "#" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1