Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -6,7 +6,7 @@ import ContactText from '@/components/sections/contact/ContactText';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
-import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
@@ -45,42 +45,16 @@ export default function LandingPage() {
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboard
+      <HeroBillboardScroll
-      background={{
+      background={{ variant: "gradient-bars"}}
-        variant: "gradient-bars"}}
       title="Build Apps at the Speed of Thought"
       description="Usta is your AI-powered companion for rapid application development. From ideation to production, build anything in minutes."
       tag="Revolutionizing Software Development"
       buttons={[
-        {
+        { text: "Start Building", href: "#" },
-          text: "Start Building",          href: "#"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/3d-abstract-techno-background-with-particle-design_1048-12576.jpg"
       imageAlt="AI Builder Platform"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/3d-digital-background-with-connecting-lines-dots_1048-11639.jpg",          alt: "User avatar"},
-        {
-          src: "http://img.b2bpic.net/free-photo/abstract-orange-glowing-lines-background_1017-3201.jpg",          alt: "User avatar"},
-        {
-          src: "http://img.b2bpic.net/free-photo/woman-watching-business-conference-computer-screen-looking-statistics_482257-125563.jpg",          alt: "User avatar"},
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg",          alt: "User avatar"},
-        {
-          src: "http://img.b2bpic.net/free-photo/solar-panels-male-worker-analyzing-performance-data-laptop-optimizing-efficiency_482257-135442.jpg",          alt: "User avatar"},
-      ]}
-      marqueeItems={[
-        {
-          type: "text",          text: "Next.js"},
-        {
-          type: "text",          text: "TypeScript"},
-        {
-          type: "text",          text: "Tailwind CSS"},
-        {
-          type: "text",          text: "Supabase"},
-        {
-          type: "text",          text: "PostgreSQL"},
-      ]}
     />
   </div>
 
@@ -91,12 +65,9 @@ export default function LandingPage() {
       title="Built for Modern Developers"
       description="Stop struggling with boilerplate and infrastructure. Usta abstracts the complexity, allowing you to focus on the business logic while our AI handles the architecture."
       bulletPoints={[
-        {
+        { title: "Zero Setup Time", description: "Start coding instantly with our pre-configured environments." },
-          title: "Zero Setup Time",          description: "Start coding instantly with our pre-configured environments."},
+        { title: "Intelligent Generation", description: "Leverage LLMs to write, debug, and optimize your application logic." },
-        {
+        { title: "Scale Instantly", description: "From prototype to global scale with a single click deployment." },
-          title: "Intelligent Generation",          description: "Leverage LLMs to write, debug, and optimize your application logic."},
-        {
-          title: "Scale Instantly",          description: "From prototype to global scale with a single click deployment."},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/neat-tidy-workspace-with-laptop_23-2148592306.jpg"
       imageAlt="Usta platform interface"
@@ -109,12 +80,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       features={[
-        {
+        { id: "f1", title: "Smart Coding", subtitle: "AI-assisted completion.", category: "AI", value: "High" },
-          id: "f1",          title: "Smart Coding",          subtitle: "AI-assisted completion.",          category: "AI",          value: "High"},
+        { id: "f2", title: "Auto-Deployment", subtitle: "Ship with one click.", category: "Ops", value: "Instant" },
-        {
+        { id: "f3", title: "Secure Infrastructure", subtitle: "Enterprise grade security.", category: "Security", value: "Built-in" },
-          id: "f2",          title: "Auto-Deployment",          subtitle: "Ship with one click.",          category: "Ops",          value: "Instant"},
-        {
-          id: "f3",          title: "Secure Infrastructure",          subtitle: "Enterprise grade security.",          category: "Security",          value: "Built-in"},
       ]}
       title="Features That Empower You"
       description="Everything you need to ship world-class software."
@@ -126,7 +94,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       names={[
-        "TechCorp",        "Innovate",        "SpeedBuild",        "StartNow",        "GrowthLabs",        "CloudSystems",        "LogicAI"]}
+        "TechCorp", "Innovate", "SpeedBuild", "StartNow", "GrowthLabs", "CloudSystems", "LogicAI"]}
       title="Used by 1000+ Teams"
       description="Trusted by innovative engineering teams worldwide."
     />
@@ -138,12 +106,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       metrics={[
-        {
+        { id: "m1", value: "10x", title: "Faster Delivery", description: "Faster than traditional methods.", imageSrc: "http://img.b2bpic.net/free-photo/abstract-technology-background-connecting-dots-digital-network-design_53876-160267.jpg" },
-          id: "m1",          value: "10x",          title: "Faster Delivery",          description: "Faster than traditional methods.",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-technology-background-connecting-dots-digital-network-design_53876-160267.jpg"},
+        { id: "m2", value: "99.9%", title: "Uptime", description: "Always ready when you are.", imageSrc: "http://img.b2bpic.net/free-photo/woman-typing-computer-chatting-with-ai-assistant_482257-122996.jpg" },
-        {
+        { id: "m3", value: "5M+", title: "Apps Built", description: "Proved by our global community.", imageSrc: "http://img.b2bpic.net/free-photo/abstract-neon-lights-wonder-wheel_23-2148328075.jpg" },
-          id: "m2",          value: "99.9%",          title: "Uptime",          description: "Always ready when you are.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-typing-computer-chatting-with-ai-assistant_482257-122996.jpg"},
-        {
-          id: "m3",          value: "5M+",          title: "Apps Built",          description: "Proved by our global community.",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-neon-lights-wonder-wheel_23-2148328075.jpg"},
       ]}
       title="The Numbers Don't Lie"
       description="Our platform has accelerated development for thousands."
@@ -155,16 +120,11 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
-        {
+        { id: "t1", title: "Amazing Tool", quote: "Usta has changed how we build.", name: "Sarah J.", role: "CTO", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-handsome-afro-american-male-elegant-brown-jacket-hat-isolated-dark-background_613910-17815.jpg" },
-          id: "t1",          title: "Amazing Tool",          quote: "Usta has changed how we build.",          name: "Sarah J.",          role: "CTO",          imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-handsome-afro-american-male-elegant-brown-jacket-hat-isolated-dark-background_613910-17815.jpg"},
+        { id: "t2", title: "Life Saver", quote: "Finally, a platform that understands developers.", name: "Mike D.", role: "Developer", imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-man-using-tablet-street-cafe_1262-19056.jpg" },
-        {
+        { id: "t3", title: "Incredible Speed", quote: "Built my startup in 48 hours.", name: "Elena R.", role: "Founder", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-darkroom_23-2149893830.jpg" },
-          id: "t2",          title: "Life Saver",          quote: "Finally, a platform that understands developers.",          name: "Mike D.",          role: "Developer",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-man-using-tablet-street-cafe_1262-19056.jpg"},
+        { id: "t4", title: "Best in Class", quote: "Unmatched developer experience.", name: "John K.", role: "Engineer", imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-glasses-portrait_1262-1461.jpg" },
-        {
+        { id: "t5", title: "Game Changer", quote: "I can't imagine building without Usta now.", name: "Alice T.", role: "Product Lead", imageSrc: "http://img.b2bpic.net/free-photo/financial-department-team-leader-researching-marketing-ideas-while-analyzing-company-expenses-report-startup-project-manager-developing-budget-growth-solutions-while-brainstorming-promoting-strategy_482257-38904.jpg" },
-          id: "t3",          title: "Incredible Speed",          quote: "Built my startup in 48 hours.",          name: "Elena R.",          role: "Founder",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-darkroom_23-2149893830.jpg"},
-        {
-          id: "t4",          title: "Best in Class",          quote: "Unmatched developer experience.",          name: "John K.",          role: "Engineer",          imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-glasses-portrait_1262-1461.jpg"},
-        {
-          id: "t5",          title: "Game Changer",          quote: "I can't imagine building without Usta now.",          name: "Alice T.",          role: "Product Lead",          imageSrc: "http://img.b2bpic.net/free-photo/financial-department-team-leader-researching-marketing-ideas-while-analyzing-company-expenses-report-startup-project-manager-developing-budget-growth-solutions-while-brainstorming-promoting-strategy_482257-38904.jpg"},
       ]}
       title="Love from Our Community"
       description="Don't just take our word for it."
@@ -176,12 +136,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       faqs={[
-        {
+        { id: "q1", title: "What is Usta?", content: "Usta is an AI platform to build applications." },
-          id: "q1",          title: "What is Usta?",          content: "Usta is an AI platform to build applications."},
+        { id: "q2", title: "Is it free?", content: "We have a generous free tier." },
-        {
+        { id: "q3", title: "How do I start?", content: "Just sign up and follow our quick tutorial." },
-          id: "q2",          title: "Is it free?",          content: "We have a generous free tier."},
-        {
-          id: "q3",          title: "How do I start?",          content: "Just sign up and follow our quick tutorial."},
       ]}
       title="Frequently Asked Questions"
       description="Common questions about Usta."
@@ -192,12 +149,10 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactText
       useInvertedBackground={false}
-      background={{
+      background={{ variant: "sparkles-gradient" }}
-        variant: "sparkles-gradient"}}
       text="Ready to get started with Usta? Let's build the future together."
       buttons={[
-        {
+        { text: "Contact Support", href: "#" },
-          text: "Contact Support",          href: "#"},
       ]}
     />
   </div>
@@ -207,22 +162,8 @@ export default function LandingPage() {
       imageSrc="http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150104511.jpg"
       logoText="Usta"
       columns={[
-        {
+        { title: "Platform", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#" }] },
-          title: "Platform",          items: [
+        { title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#contact" }] },
-            {
-              label: "Features",              href: "#features"},
-            {
-              label: "Pricing",              href: "#"},
-          ],
-        },
-        {
-          title: "Company",          items: [
-            {
-              label: "About",              href: "#"},
-            {
-              label: "Contact",              href: "#contact"},
-          ],
-        },
       ]}
     />
   </div>