Update src/app/page.tsx

Merge version_1 into main

src/app/auth/page.tsx

@@ -14,7 +14,7 @@ export default function AuthPage() {
     { name: "Pricing", id: "pricing" },
     { name: "Testimonials", id: "testimonials" },
     { name: "Blog", id: "blog" },
-    { name: "Contact", id: "contact" },
+    { name: "Customize", id: "customize" },
   ];
 
   return (
@@ -35,9 +35,7 @@ export default function AuthPage() {
           brandName="CodeFlow"
           navItems={navItems}
           button={{
-            text: "Get Started",
+            text: "Get Started",            href: "/auth/signup"}}
-            href: "/auth/signup",
-          }}
         />
       </div>
 
@@ -50,33 +48,13 @@ export default function AuthPage() {
           tagAnimation="slide-up"
           features={[
             {
-              id: "1",
+              id: "1",              title: "Secure Account",              description: "Your code, designs, and projects are protected with enterprise-grade security and encryption. Full control over your data.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-modern-ai-code-generator-dashboard-int-1772875139557-80999b87.png?_wi=2",              imageAlt: "Secure dashboard interface"},
-              title: "Secure Account",
-              description: "Your code, designs, and projects are protected with enterprise-grade security and encryption. Full control over your data.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-modern-ai-code-generator-dashboard-int-1772875139557-80999b87.png?_wi=2",
-              imageAlt: "Secure dashboard interface",
-            },
             {
-              id: "2",
+              id: "2",              title: "Generation History",              description: "Access all your past generations instantly. Track your progress, review previous projects, and reuse successful patterns.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-generation-history-and-analytics-dashb-1772875140500-d6340221.png?_wi=2",              imageAlt: "Generation history dashboard"},
-              title: "Generation History",
-              description: "Access all your past generations instantly. Track your progress, review previous projects, and reuse successful patterns.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-generation-history-and-analytics-dashb-1772875140500-d6340221.png?_wi=2",
-              imageAlt: "Generation history dashboard",
-            },
             {
-              id: "3",
+              id: "3",              title: "Team Collaboration",              description: "Invite team members, share projects, and collaborate in real-time. Perfect for agencies and development teams.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-responsive-website-preview-interface-s-1772875139361-87942715.png?_wi=2",              imageAlt: "Team collaboration interface"},
-              title: "Team Collaboration",
-              description: "Invite team members, share projects, and collaborate in real-time. Perfect for agencies and development teams.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-responsive-website-preview-interface-s-1772875139361-87942715.png?_wi=2",
-              imageAlt: "Team collaboration interface",
-            },
             {
-              id: "4",
+              id: "4",              title: "Priority Support",              description: "Get fast access to our support team. Priority email and chat support to help you succeed with CodeFlow.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-live-preview-window-showing-a-generate-1772875139391-4b6b8923.png?_wi=2",              imageAlt: "Support interface"},
-              title: "Priority Support",
-              description: "Get fast access to our support team. Priority email and chat support to help you succeed with CodeFlow.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-live-preview-window-showing-a-generate-1772875139391-4b6b8923.png?_wi=2",
-              imageAlt: "Support interface",
-            },
           ]}
           gridVariant="bento-grid"
           animationType="slide-up"
@@ -85,9 +63,7 @@ export default function AuthPage() {
           carouselMode="buttons"
           buttons={[
             {
-              text: "Sign Up Now",
+              text: "Sign Up Now",              href: "/auth/signup"},
-              href: "/auth/signup",
-            },
           ]}
         />
       </div>
@@ -101,29 +77,17 @@ export default function AuthPage() {
           tagAnimation="slide-up"
           metrics={[
             {
-              id: "1",
+              id: "1",              icon: Users,
-              icon: Users,
+              title: "Free Tier",              value: "5 Gens"},
-              title: "Free Tier",
-              value: "5 Gens",
-            },
             {
-              id: "2",
+              id: "2",              icon: Gauge,
-              icon: Gauge,
+              title: "Setup Time",              value: "2 mins"},
-              title: "Setup Time",
-              value: "2 mins",
-            },
             {
-              id: "3",
+              id: "3",              icon: Shield,
-              icon: Shield,
+              title: "Security",              value: "Enterprise"},
-              title: "Security",
-              value: "Enterprise",
-            },
             {
-              id: "4",
+              id: "4",              icon: TrendingUp,
-              icon: TrendingUp,
+              title: "Upgrade",              value: "Anytime"},
-              title: "Upgrade",
-              value: "Anytime",
-            },
           ]}
           animationType="scale-rotate"
           textboxLayout="default"
@@ -131,9 +95,7 @@ export default function AuthPage() {
           carouselMode="buttons"
           buttons={[
             {
-              text: "Create Account",
+              text: "Create Account",              href: "/auth/signup"},
-              href: "/auth/signup",
-            },
           ]}
         />
       </div>
@@ -142,16 +104,12 @@ export default function AuthPage() {
         <FooterLogoReveal
           logoText="CodeFlow"
           leftLink={{
-            text: "Privacy Policy",
+            text: "Privacy Policy",            href: "/privacy"}}
-            href: "/privacy",
-          }}
           rightLink={{
-            text: "Terms of Service",
+            text: "Terms of Service",            href: "/terms"}}
-            href: "/terms",
-          }}
           ariaLabel="Site footer with brand information"
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/dashboard/page.tsx

@@ -27,7 +27,7 @@ export default function DashboardPage() {
             { name: "Pricing", id: "pricing" },
             { name: "Testimonials", id: "testimonials" },
             { name: "Blog", id: "blog" },
-            { name: "Contact", id: "contact" },
+            { name: "Customize", id: "customize" },
           ]}
           button={{ text: "Get Started", href: "/auth/signup" }}
           brandName="CodeFlow"
@@ -135,4 +135,4 @@ export default function DashboardPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -10,7 +10,7 @@ import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
 import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
 import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
-import { Sparkles, Zap, Play, DollarSign, MessageCircle, Rocket, Users, Code, Clock, TrendingUp } from "lucide-react";
+import { Sparkles, Zap, Play, DollarSign, MessageCircle, Rocket, Users, Code, Clock, TrendingUp, Settings } from "lucide-react";
 
 export default function HomePage() {
   return (
@@ -33,7 +33,7 @@ export default function HomePage() {
             { name: "Pricing", id: "pricing" },
             { name: "Testimonials", id: "testimonials" },
             { name: "Blog", id: "blog" },
-            { name: "Contact", id: "contact" },
+            { name: "Customize", id: "customize" },
           ]}
           button={{ text: "Get Started", href: "/auth/signup" }}
           brandName="CodeFlow"
@@ -55,25 +55,15 @@ export default function HomePage() {
           buttonAnimation="slide-up"
           mediaItems={[
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-modern-ai-code-generator-dashboard-int-1772875139557-80999b87.png?_wi=1",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-modern-ai-code-generator-dashboard-int-1772875139557-80999b87.png?_wi=1",              imageAlt: "AI code generation dashboard interface"},
-              imageAlt: "AI code generation dashboard interface",
-            },
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-responsive-website-preview-interface-s-1772875139361-87942715.png?_wi=1",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-responsive-website-preview-interface-s-1772875139361-87942715.png?_wi=1",              imageAlt: "Website preview with generated code"},
-              imageAlt: "Website preview with generated code",
-            },
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/an-advanced-code-editor-with-ai-powered--1772875142374-2829c90f.png",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/an-advanced-code-editor-with-ai-powered--1772875142374-2829c90f.png?_wi=1",              imageAlt: "Code editor with AI suggestions"},
-              imageAlt: "Code editor with AI suggestions",
-            },
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-mobile-responsive-design-preview-showc-1772875139224-d75ce864.png",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-mobile-responsive-design-preview-showc-1772875139224-d75ce864.png?_wi=1",              imageAlt: "Mobile responsive design preview"},
-              imageAlt: "Mobile responsive design preview",
-            },
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-generation-history-and-analytics-dashb-1772875140500-d6340221.png?_wi=1",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-generation-history-and-analytics-dashb-1772875140500-d6340221.png?_wi=1",              imageAlt: "Generation history and analytics"},
-              imageAlt: "Generation history and analytics",
-            },
           ]}
           ariaLabel="Hero section for AI code generator platform"
           className="w-full"
@@ -92,33 +82,13 @@ export default function HomePage() {
           tagAnimation="slide-up"
           features={[
             {
-              id: "1",
+              id: "1",              title: "Screenshot Upload",              description: "Upload website screenshots and let our AI analyze the design, layout, and styling to generate matching code instantly.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-closeup-of-a-website-screenshot-being--1772875139815-8877cddd.png",              imageAlt: "Screenshot upload feature"},
-              title: "Screenshot Upload",
-              description: "Upload website screenshots and let our AI analyze the design, layout, and styling to generate matching code instantly.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-closeup-of-a-website-screenshot-being--1772875139815-8877cddd.png",
-              imageAlt: "Screenshot upload feature",
-            },
             {
-              id: "2",
+              id: "2",              title: "Video Analysis",              description: "Upload screen recordings and videos. Our AI extracts key frames and generates comprehensive frontend code from motion designs.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-screen-recording-video-file-with-multi-1772875139030-772b49a4.png",              imageAlt: "Video analysis feature"},
-              title: "Video Analysis",
-              description: "Upload screen recordings and videos. Our AI extracts key frames and generates comprehensive frontend code from motion designs.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-screen-recording-video-file-with-multi-1772875139030-772b49a4.png",
-              imageAlt: "Video analysis feature",
-            },
             {
-              id: "3",
+              id: "3",              title: "URL Import",              description: "Paste a live website URL and our AI crawls and reverse-engineers the frontend code structure automatically.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-browser-address-bar-showing-a-website--1772875140058-7d598fb7.png",              imageAlt: "URL import feature"},
-              title: "URL Import",
-              description: "Paste a live website URL and our AI crawls and reverse-engineers the frontend code structure automatically.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-browser-address-bar-showing-a-website--1772875140058-7d598fb7.png",
-              imageAlt: "URL import feature",
-            },
             {
-              id: "4",
+              id: "4",              title: "Live Preview",              description: "View generated code in real-time with a live iframe preview. See how your website looks before downloading.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-live-preview-window-showing-a-generate-1772875139391-4b6b8923.png?_wi=1",              imageAlt: "Live preview feature"},
-              title: "Live Preview",
-              description: "View generated code in real-time with a live iframe preview. See how your website looks before downloading.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-live-preview-window-showing-a-generate-1772875139391-4b6b8923.png?_wi=1",
-              imageAlt: "Live preview feature",
-            },
           ]}
           gridVariant="bento-grid"
           animationType="slide-up"
@@ -138,29 +108,11 @@ export default function HomePage() {
           tagAnimation="slide-up"
           products={[
             {
-              id: "demo-1",
+              id: "demo-1",              name: "E-commerce Store",              price: "Generated",              variant: "Full HTML + CSS + JS",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-modern-e-commerce-store-interface-with-1772875139441-f6ade702.png",              imageAlt: "E-commerce store example"},
-              name: "E-commerce Store",
-              price: "Generated",
-              variant: "Full HTML + CSS + JS",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-modern-e-commerce-store-interface-with-1772875139441-f6ade702.png",
-              imageAlt: "E-commerce store example",
-            },
             {
-              id: "demo-2",
+              id: "demo-2",              name: "SaaS Landing Page",              price: "Generated",              variant: "Responsive Design",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-modern-saas-landing-page-with-hero-sec-1772875140000-50418702.png",              imageAlt: "SaaS landing page example"},
-              name: "SaaS Landing Page",
-              price: "Generated",
-              variant: "Responsive Design",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-modern-saas-landing-page-with-hero-sec-1772875140000-50418702.png",
-              imageAlt: "SaaS landing page example",
-            },
             {
-              id: "demo-3",
+              id: "demo-3",              name: "Portfolio Website",              price: "Generated",              variant: "Interactive Elements",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-creative-portfolio-website-showcasing--1772875146877-59accfc8.png",              imageAlt: "Portfolio website example"},
-              name: "Portfolio Website",
-              price: "Generated",
-              variant: "Interactive Elements",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-creative-portfolio-website-showcasing--1772875146877-59accfc8.png",
-              imageAlt: "Portfolio website example",
-            },
           ]}
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
@@ -180,46 +132,19 @@ export default function HomePage() {
           tagAnimation="slide-up"
           plans={[
             {
-              id: "free",
+              id: "free",              badge: "Starter",              badgeIcon: Zap,
-              badge: "Starter",
+              price: "Free",              subtitle: "Perfect for trying out",              features: [
-              badgeIcon: Zap,
+                "5 generations per month",                "Basic HTML/CSS output",                "Community support",                "Standard preview quality"],
-              price: "Free",
-              subtitle: "Perfect for trying out",
-              features: [
-                "5 generations per month",
-                "Basic HTML/CSS output",
-                "Community support",
-                "Standard preview quality",
-              ],
             },
             {
-              id: "pro",
+              id: "pro",              badge: "Most Popular",              badgeIcon: Sparkles,
-              badge: "Most Popular",
+              price: "$29/mo",              subtitle: "For professional developers",              features: [
-              badgeIcon: Sparkles,
+                "200 generations per month",                "Advanced JavaScript support",                "Priority email support",                "High-resolution exports",                "Custom component library"],
-              price: "$29/mo",
-              subtitle: "For professional developers",
-              features: [
-                "200 generations per month",
-                "Advanced JavaScript support",
-                "Priority email support",
-                "High-resolution exports",
-                "Custom component library",
-              ],
             },
             {
-              id: "unlimited",
+              id: "unlimited",              badge: "Enterprise",              badgeIcon: TrendingUp,
-              badge: "Enterprise",
+              price: "$99/mo",              subtitle: "Unlimited possibilities",              features: [
-              badgeIcon: TrendingUp,
+                "Unlimited generations",                "Full AI customization",                "24/7 priority support",                "API access",                "Team collaboration",                "Advanced analytics"],
-              price: "$99/mo",
-              subtitle: "Unlimited possibilities",
-              features: [
-                "Unlimited generations",
-                "Full AI customization",
-                "24/7 priority support",
-                "API access",
-                "Team collaboration",
-                "Advanced analytics",
-              ],
             },
           ]}
           animationType="depth-3d"
@@ -239,53 +164,17 @@ export default function HomePage() {
           tagAnimation="slide-up"
           testimonials={[
             {
-              id: "1",
+              id: "1",              name: "Sarah Chen",              role: "Full-Stack Developer",              testimonial: "CodeFlow cut my design-to-code time in half. The AI perfectly captures the design intent and generates clean, maintainable code. Absolutely game-changing.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-confident-asi-1772875139056-a4eed9f1.png",              imageAlt: "Sarah Chen"},
-              name: "Sarah Chen",
-              role: "Full-Stack Developer",
-              testimonial: "CodeFlow cut my design-to-code time in half. The AI perfectly captures the design intent and generates clean, maintainable code. Absolutely game-changing.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-confident-asi-1772875139056-a4eed9f1.png",
-              imageAlt: "Sarah Chen",
-            },
             {
-              id: "2",
+              id: "2",              name: "Marcus Rodriguez",              role: "Frontend Lead, TechStartup",              testimonial: "We've integrated CodeFlow into our workflow. Our team now focuses on logic and interactions while AI handles the tedious code generation. Best decision we made.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-confident-lat-1772875138045-9a63d28c.png",              imageAlt: "Marcus Rodriguez"},
-              name: "Marcus Rodriguez",
-              role: "Frontend Lead, TechStartup",
-              testimonial: "We've integrated CodeFlow into our workflow. Our team now focuses on logic and interactions while AI handles the tedious code generation. Best decision we made.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-confident-lat-1772875138045-9a63d28c.png",
-              imageAlt: "Marcus Rodriguez",
-            },
             {
-              id: "3",
+              id: "3",              name: "Emma Williams",              role: "UI/UX Designer",              testimonial: "As a designer, I love that I can now go from Figma to actual, working code instantly. No more miscommunication with developers. CodeFlow bridges that gap perfectly.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-creative-fema-1772875138367-861d42f2.png",              imageAlt: "Emma Williams"},
-              name: "Emma Williams",
-              role: "UI/UX Designer",
-              testimonial: "As a designer, I love that I can now go from Figma to actual, working code instantly. No more miscommunication with developers. CodeFlow bridges that gap perfectly.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-creative-fema-1772875138367-861d42f2.png",
-              imageAlt: "Emma Williams",
-            },
             {
-              id: "4",
+              id: "4",              name: "Alex Kumar",              role: "Agency Director",              testimonial: "Our client delivery time improved dramatically. We're handling 3x more projects with the same team size. The ROI has been incredible.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-director-busi-1772875138660-e6615b66.png",              imageAlt: "Alex Kumar"},
-              name: "Alex Kumar",
-              role: "Agency Director",
-              testimonial: "Our client delivery time improved dramatically. We're handling 3x more projects with the same team size. The ROI has been incredible.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-director-busi-1772875138660-e6615b66.png",
-              imageAlt: "Alex Kumar",
-            },
             {
-              id: "5",
+              id: "5",              name: "Jessica Park",              role: "Product Manager",              testimonial: "CodeFlow isn't just a tool, it's a productivity multiplier. The quality of generated code is production-ready. Highly recommended.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-female-produc-1772875138590-40fc5835.png",              imageAlt: "Jessica Park"},
-              name: "Jessica Park",
-              role: "Product Manager",
-              testimonial: "CodeFlow isn't just a tool, it's a productivity multiplier. The quality of generated code is production-ready. Highly recommended.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-female-produc-1772875138590-40fc5835.png",
-              imageAlt: "Jessica Park",
-            },
             {
-              id: "6",
+              id: "6",              name: "David Thompson",              role: "Freelance Web Developer",              testimonial: "I used to spend days turning design mockups into code. Now I can deliver projects in hours. This tool is a must-have for any serious developer.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-freelance-web-1772875139211-6b501cc1.png",              imageAlt: "David Thompson"},
-              name: "David Thompson",
-              role: "Freelance Web Developer",
-              testimonial: "I used to spend days turning design mockups into code. Now I can deliver projects in hours. This tool is a must-have for any serious developer.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-freelance-web-1772875139211-6b501cc1.png",
-              imageAlt: "David Thompson",
-            },
           ]}
           animationType="slide-up"
           textboxLayout="default"
@@ -295,6 +184,32 @@ export default function HomePage() {
         />
       </div>
 
+      <div id="customize" data-section="customize">
+        <FeatureCardTwentySeven
+          title="Fully Customizable Code Output"
+          description="Tailor every aspect of your generated code to match your project requirements and coding standards."
+          tag="Customization"
+          tagIcon={Settings}
+          tagAnimation="slide-up"
+          features={[
+            {
+              id: "1",              title: "Code Templates",              description: "Choose from multiple code templates. Select your preferred framework, styling approach, and component structure before generation.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-modern-ai-code-generator-dashboard-int-1772875139557-80999b87.png?_wi=1",              imageAlt: "Code templates customization"},
+            {
+              id: "2",              title: "Framework Selection",              description: "Generate code for your framework of choice: React, Vue, Svelte, or vanilla JavaScript. Each with full TypeScript support.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-responsive-website-preview-interface-s-1772875139361-87942715.png?_wi=1",              imageAlt: "Framework selection options"},
+            {
+              id: "3",              title: "Styling Options",              description: "Choose your CSS approach: Tailwind CSS, SCSS, CSS Modules, or vanilla CSS. Customize breakpoints and design tokens easily.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/an-advanced-code-editor-with-ai-powered--1772875142374-2829c90f.png?_wi=2",              imageAlt: "Styling customization settings"},
+            {
+              id: "4",              title: "Component Settings",              description: "Fine-tune component naming conventions, export patterns, and folder structure to match your project's architecture.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-mobile-responsive-design-preview-showc-1772875139224-d75ce864.png?_wi=2",              imageAlt: "Component settings configuration"},
+          ]}
+          gridVariant="bento-grid"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          carouselMode="buttons"
+          buttons={[{ text: "Start Customizing", href: "/auth/signup" }]}
+        />
+      </div>
+
       <div id="cta" data-section="cta">
         <MetricCardThree
           title="Join the AI Code Revolution"
@@ -326,4 +241,4 @@ export default function HomePage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/pricing/page.tsx

@@ -14,7 +14,7 @@ export default function PricingPage() {
     { name: "Pricing", id: "pricing" },
     { name: "Testimonials", id: "testimonials" },
     { name: "Blog", id: "blog" },
-    { name: "Contact", id: "contact" },
+    { name: "Customize", id: "customize" },
   ];
 
   return (
@@ -35,9 +35,7 @@ export default function PricingPage() {
           brandName="CodeFlow"
           navItems={navItems}
           button={{
-            text: "Get Started",
+            text: "Get Started",            href: "/auth/signup"}}
-            href: "/auth/signup",
-          }}
         />
       </div>
 
@@ -50,46 +48,19 @@ export default function PricingPage() {
           tagAnimation="slide-up"
           plans={[
             {
-              id: "free",
+              id: "free",              badge: "Starter",              badgeIcon: Zap,
-              badge: "Starter",
+              price: "Free",              subtitle: "Perfect for trying out",              features: [
-              badgeIcon: Zap,
+                "5 generations per month",                "Basic HTML/CSS output",                "Community support",                "Standard preview quality"],
-              price: "Free",
-              subtitle: "Perfect for trying out",
-              features: [
-                "5 generations per month",
-                "Basic HTML/CSS output",
-                "Community support",
-                "Standard preview quality",
-              ],
             },
             {
-              id: "pro",
+              id: "pro",              badge: "Most Popular",              badgeIcon: Sparkles,
-              badge: "Most Popular",
+              price: "$29/mo",              subtitle: "For professional developers",              features: [
-              badgeIcon: Sparkles,
+                "200 generations per month",                "Advanced JavaScript support",                "Priority email support",                "High-resolution exports",                "Custom component library"],
-              price: "$29/mo",
-              subtitle: "For professional developers",
-              features: [
-                "200 generations per month",
-                "Advanced JavaScript support",
-                "Priority email support",
-                "High-resolution exports",
-                "Custom component library",
-              ],
             },
             {
-              id: "unlimited",
+              id: "unlimited",              badge: "Enterprise",              badgeIcon: Crown,
-              badge: "Enterprise",
+              price: "$99/mo",              subtitle: "Unlimited possibilities",              features: [
-              badgeIcon: Crown,
+                "Unlimited generations",                "Full AI customization",                "24/7 priority support",                "API access",                "Team collaboration",                "Advanced analytics"],
-              price: "$99/mo",
-              subtitle: "Unlimited possibilities",
-              features: [
-                "Unlimited generations",
-                "Full AI customization",
-                "24/7 priority support",
-                "API access",
-                "Team collaboration",
-                "Advanced analytics",
-              ],
             },
           ]}
           animationType="depth-3d"
@@ -98,9 +69,7 @@ export default function PricingPage() {
           carouselMode="buttons"
           buttons={[
             {
-              text: "Choose Plan",
+              text: "Choose Plan",              href: "/auth/signup"},
-              href: "/auth/signup",
-            },
           ]}
         />
       </div>
@@ -114,29 +83,17 @@ export default function PricingPage() {
           tagAnimation="slide-up"
           metrics={[
             {
-              id: "1",
+              id: "1",              icon: Users,
-              icon: Users,
+              title: "Active Users",              value: "15,000+"},
-              title: "Active Users",
-              value: "15,000+",
-            },
             {
-              id: "2",
+              id: "2",              icon: Code,
-              icon: Code,
+              title: "Code Generated",              value: "2.5M+ Lines"},
-              title: "Code Generated",
-              value: "2.5M+ Lines",
-            },
             {
-              id: "3",
+              id: "3",              icon: Clock,
-              icon: Clock,
+              title: "Time Saved",              value: "500K+ Hours"},
-              title: "Time Saved",
-              value: "500K+ Hours",
-            },
             {
-              id: "4",
+              id: "4",              icon: TrendingUp,
-              icon: TrendingUp,
+              title: "Month Growth",              value: "145%"},
-              title: "Month Growth",
-              value: "145%",
-            },
           ]}
           animationType="scale-rotate"
           textboxLayout="default"
@@ -144,9 +101,7 @@ export default function PricingPage() {
           carouselMode="buttons"
           buttons={[
             {
-              text: "Start Free Trial",
+              text: "Start Free Trial",              href: "/auth/signup"},
-              href: "/auth/signup",
-            },
           ]}
         />
       </div>
@@ -155,16 +110,12 @@ export default function PricingPage() {
         <FooterLogoReveal
           logoText="CodeFlow"
           leftLink={{
-            text: "Privacy Policy",
+            text: "Privacy Policy",            href: "/privacy"}}
-            href: "/privacy",
-          }}
           rightLink={{
-            text: "Terms of Service",
+            text: "Terms of Service",            href: "/terms"}}
-            href: "/terms",
-          }}
           ariaLabel="Site footer with brand information"
         />
       </div>
     </ThemeProvider>
   );
-}
+}