Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -3,11 +3,11 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
+import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import { BarChart, TrendingUp, Users } from "lucide-react";
+import { BarChart, TrendingUp, Users, Github, Twitter, Linkedin } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -15,120 +15,90 @@ export default function LandingPage() {
         defaultButtonVariant="bounce-effect"
         defaultTextAnimation="reveal-blur"
         borderRadius="pill"
-        contentWidth="small"
+        contentWidth="medium"
-        sizing="largeSmallSizeLargeTitles"
+        sizing="largeSizeMediumTitles"
-        background="floatingGradient"
+        background="noise"
-        cardStyle="subtle-shadow"
+        cardStyle="glass-elevated"
-        primaryButtonStyle="flat"
+        primaryButtonStyle="gradient"
-        secondaryButtonStyle="radial-glow"
+        secondaryButtonStyle="layered"
-        headingFontWeight="light"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
+          <NavbarLayoutFloatingInline
-      navItems={[
+            navItems={[
-        {
+              { name: "Generator", id: "generator" },
-          name: "Dashboard",          id: "dashboard"},
+              { name: "Analytics", id: "analytics" },
-        {
+            ]}
-          name: "Generator",          id: "generator"},
+            brandName="AI Suite"
-        {
+            button={{ text: "Contact", href: "#contact" }}
-          name: "Analytics",          id: "analytics"},
+          />
-        {
+        </div>
-          name: "Script AI",          id: "script-ai"},
-      ]}
-      brandName="AI Suite"
-      button={{
-        text: "15/50 Credits Left"}}
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroBillboardTestimonial
+          <HeroBillboardTestimonial
-      useInvertedBackground={true}
+            useInvertedBackground={true}
-      background={{
+            background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars"}}
+            title="All-in-One AI Creator Suite"
-      title="All-in-One AI Creator Suite"
+            description="Generate viral UGC content, track analytics, and automate scripts. Everything you need to scale your creator business in one place."
-      description="Generate viral UGC content, track analytics, and automate scripts. Everything you need to scale your creator business in one place."
+            testimonials={[]}
-      testimonials={[]}
+            buttons={[
-      buttons={[
+              { text: "Get Started", href: "#" },
-        {
+              { text: "See How It Works", href: "#generator" },
-          text: "Get Started",          href: "/auth"},
+            ]}
-        {
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWfbobpgUKOEquVVZyWN3qFCdB/a-professional-ai-creator-suite-dashboar-1774609900956-19ba42e1.png"
-          text: "See How It Works",          href: "#generator"},
+          />
-      ]}
+        </div>
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWfbobpgUKOEquVVZyWN3qFCdB/a-professional-ai-creator-suite-dashboar-1774609900956-19ba42e1.png"
-    />
-  </div>
 
-  <div id="generator" data-section="generator">
+        <div id="generator" data-section="generator">
-      <FeatureCardSix
+          <FeatureCardSix
-      textboxLayout="split"
+            textboxLayout="split"
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      features={[
+            features={[
-        {
+              {
-          id: 1,
+                id: 1,
-          title: "Base Image Upload",          description: "Upload high-quality character references for consistent video output.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWfbobpgUKOEquVVZyWN3qFCdB/ugc-video-generator-interface-for-ai-cha-1774609903370-29358a3a.png?_wi=1"},
+                title: "Base Image Upload",                description: "Upload high-quality character references for consistent video output.",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWfbobpgUKOEquVVZyWN3qFCdB/ugc-video-generator-interface-for-ai-cha-1774609903370-29358a3a.png?_wi=1"
-        {
+              },
-          id: 2,
+              {
-          title: "Motion Transfer",          description: "Upload reference MP4s to define the movement of your AI character.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWfbobpgUKOEquVVZyWN3qFCdB/ugc-video-generator-interface-for-ai-cha-1774609903370-29358a3a.png?_wi=2"},
+                id: 2,
-        {
+                title: "Motion Transfer",                description: "Upload reference MP4s to define the movement of your AI character.",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWfbobpgUKOEquVVZyWN3qFCdB/ugc-video-generator-interface-for-ai-cha-1774609903370-29358a3a.png?_wi=2"
-          id: 3,
+              },
-          title: "Instant Generation",          description: "Process your content in seconds with our high-performance GPU cluster.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWfbobpgUKOEquVVZyWN3qFCdB/ugc-video-generator-interface-for-ai-cha-1774609903370-29358a3a.png?_wi=3"},
+              {
-      ]}
+                id: 3,
-      title="AI UGC Video Generator"
+                title: "Instant Generation",                description: "Process your content in seconds with our high-performance GPU cluster.",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWfbobpgUKOEquVVZyWN3qFCdB/ugc-video-generator-interface-for-ai-cha-1774609903370-29358a3a.png?_wi=3"
-      description="Transform base images into realistic UGC videos using motion transfer technology."
+              },
-    />
+            ]}
-  </div>
+            title="AI UGC Video Generator"
+            description="Transform base images into realistic UGC videos using motion transfer technology."
+          />
+        </div>
 
-  <div id="analytics" data-section="analytics">
+        <div id="analytics" data-section="analytics">
-      <MetricCardThree
+          <MetricCardThree
-      animationType="slide-up"
+            animationType="slide-up"
-      textboxLayout="split"
+            textboxLayout="split"
-      useInvertedBackground={true}
+            useInvertedBackground={true}
-      metrics={[
+            metrics={[
-        {
+              { id: "views", icon: BarChart, title: "Total Views", value: "2.4M+" },
-          id: "views",          icon: BarChart,
+              { id: "subs", icon: Users, title: "Subscribers", value: "150K" },
-          title: "Total Views",          value: "2.4M+"},
+              { id: "eng", icon: TrendingUp, title: "Engagement Rate", value: "8.4%" },
-        {
+            ]}
-          id: "subs",          icon: Users,
+            title="Analytics Hub"
-          title: "Subscribers",          value: "150K"},
+            description="Master your niche with data-driven insights."
-        {
+          />
-          id: "eng",          icon: TrendingUp,
+        </div>
-          title: "Engagement Rate",          value: "8.4%"},
-      ]}
-      title="Analytics Hub"
-      description="Master your niche with data-driven insights."
-    />
-  </div>
 
-  <div id="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterSimple
+          <FooterCard
-      columns={[
+            logoText="AI Suite"
-        {
+            copyrightText="© 2025 AI Suite. All rights reserved."
-          title: "Product",          items: [
+            socialLinks={[
-            {
+              { icon: Github, href: "#", ariaLabel: "Github" },
-              label: "AI Generator",              href: "#generator"},
+              { icon: Twitter, href: "#", ariaLabel: "Twitter" },
-            {
+              { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
-              label: "Analytics",              href: "#analytics"},
+            ]}
-            {
+          />
-              label: "Script AI",              href: "#script-ai"},
+        </div>
-          ],
-        },
-        {
-          title: "Company",          items: [
-            {
-              label: "About Us",              href: "/about"},
-            {
-              label: "Privacy Policy",              href: "#"},
-            {
-              label: "Terms of Service",              href: "#"},
-          ],
-        },
-      ]}
-      bottomLeftText="© 2024 AI Creator Suite. All rights reserved."
-      bottomRightText="Built for Creators."
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );