Update src/app/page.tsx

Merge version_5 into main

src/app/page.tsx

@@ -3,13 +3,13 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroLogo from "@/components/sections/hero/HeroLogo";
+import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
-import MediaAbout from "@/components/sections/about/MediaAbout";
+import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
-import FeatureCardTwentyNine from "@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine";
+import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
-import TeamCardOne from "@/components/sections/team/TeamCardOne";
+import TeamCardTen from "@/components/sections/team/TeamCardTen";
-import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
-import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
-import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
+import { Sparkles } from "lucide-react";
 
 export default function BloxlyLandingPage() {
   return (
@@ -26,6 +26,7 @@ export default function BloxlyLandingPage() {
       headingFontWeight="extrabold"
     >
       <ReactLenis root>
+        <div id="nav" data-section="nav">
           <NavbarLayoutFloatingOverlay
             brandName="Bloxly"
             navItems={[
@@ -34,90 +35,88 @@ export default function BloxlyLandingPage() {
               { name: "Beta Access", id: "beta" },
             ]}
           />
+        </div>
 
         <div id="hero">
-          <HeroLogo
+          <HeroSplitTestimonial
-            logoText="Bloxly"
+            title="The AI Coding Agent for Roblox Studio"
-            description="The AI coding agent for Roblox Studio. Accelerate your Luau development with precision and speed."
+            description="Accelerate your Luau development with Bloxly's precision coding engine. Generate high-performance, network-safe game logic in seconds."
+            background={{ variant: "gradient-bars" }}
+            testimonials={[]}
             buttons={[{ text: "Get Beta Access", href: "#beta" }]}
+            mediaAnimation="slide-up"
           />
         </div>
 
         <div id="capabilities">
-          <MetricCardSeven
+          <MetricCardEleven
-            title="AI-Native Luau Capabilities"
+            title="AI-Native Luau Power"
-            description="Designed specifically for the Roblox engine, Bloxly transforms complex game logic into clean, performant code."
+            description="Built for scale and performance, Bloxly translates your game ideas into clean, efficient Luau scripts."
             metrics={[
-              { id: "m1", value: "10x", title: "Coding Velocity", items: ["Context-aware autocomplete", "Real-time syntax correction", "Instant boilerplate generation"] },
+              {
-              { id: "m2", value: "Zero", title: "Technical Debt", items: ["Optimized memory management", "Network-safe scripting", "Auto-documented modular code"] }
+                id: "1", value: "10x", title: "Development Velocity", description: "Automated boilerplate and real-time syntax correction.", imageSrc: "https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&q=80&w=800"
+              },
+              {
+                id: "2", value: "Zero", title: "Technical Debt", description: "Memory-optimized, clean, and modular code structures.", imageSrc: "https://images.unsplash.com/photo-1633356122544-f134324a6cee?auto=format&fit=crop&q=80&w=800"
+              }
             ]}
-            textboxLayout="split-description"
             animationType="slide-up"
+            textboxLayout="split-actions"
             useInvertedBackground={false}
           />
         </div>
 
         <div id="features">
-          <FeatureCardTwentyNine
+          <FeatureCardSeven
-            title="Precision Coding Engine"
+            title="Precision Engine Tools"
-            description="Bloxly interprets your vision and translates it into high-performance Luau scripts."
+            description="Automate the mundane, focus on the fun. Bloxly handles your backend complexity."
-            textboxLayout="default"
-            gridVariant="three-columns-all-equal-width"
             animationType="slide-up"
-            useInvertedBackground={true}
+            textboxLayout="default"
             features={[
-              { title: "Game Logic Automation", description: "Automate complex character controllers and inventory systems.", imageSrc: "", titleImageSrc: "", buttonText: "Learn More" },
+              { title: "Game Logic Automation", description: "Instant creation of complex mechanics.", imageSrc: "https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&q=80&w=600" },
-              { title: "Smart UI Construction", description: "Generate interactive screens using AI-assisted layout constraints.", imageSrc: "", titleImageSrc: "", buttonText: "Learn More" },
+              { title: "Smart UI Construction", description: "Responsive, high-fidelity UI layouts in seconds.", imageSrc: "https://images.unsplash.com/photo-1551033406-611cf9a28f67?auto=format&fit=crop&q=80&w=600" },
-              { title: "Deep Optimization", description: "Detect bottlenecks and resolve memory leaks automatically.", imageSrc: "", titleImageSrc: "", buttonText: "Learn More" }
+              { title: "Deep Optimization", description: "Automatic detection of bottlenecked Luau code.", imageSrc: "https://images.unsplash.com/photo-1587620962725-abab7fe55159?auto=format&fit=crop&q=80&w=600" }
             ]}
+            useInvertedBackground={false}
           />
         </div>
 
         <div id="how-it-works">
-          <TeamCardOne
+          <TeamCardTen
-            title="How It Works"
+            title="Four Steps to Success"
-            description="Four simple steps to transform your development workflow."
+            tag="Workflow"
-            textboxLayout="default"
+            membersAnimation="slide-up"
-            gridVariant="four-items-2x2-equal-grid"
+            memberVariant="card"
-            animationType="slide-up"
-            useInvertedBackground={false}
             members={[
-              { id: "1", name: "Describe Vision", role: "Input your game mechanics" },
+              { id: "1", name: "Describe your Vision" },
-              { id: "2", name: "Generate Logic", role: "AI writes optimized Luau" },
+              { id: "2", name: "Generate AI Logic" },
-              { id: "3", name: "Iterate Fast", role: "Debug and refine in real-time" },
+              { id: "3", name: "Refine & Debug" },
-              { id: "4", name: "Ship Experience", role: "Push updates directly to Roblox" }
+              { id: "4", name: "Ship Experience" }
             ]}
-          />
+            useInvertedBackground={false}
-        </div>
-
-        <div id="manifesto">
-          <MediaAbout
-            title="Own What You Build"
-            description="In an era of abstraction, Bloxly maintains the integrity of your hard work. By leveraging decentralized verification, your IP remains securely yours. Build with confidence, knowing your creations are protected and verified on the MultiversX network."
-            useInvertedBackground={true}
           />
         </div>
 
         <div id="beta">
-          <ContactSplitForm
+          <ContactCTA
-            title="Beta Access"
+            tag="Get Early Access"
-            description="Join the select group of builders pioneering the next wave of Roblox game development."
+            tagIcon={Sparkles}
-            inputs={[
+            title="Join the Builder Community"
-              { name: "email", type: "email", placeholder: "Email address" },
+            description="Closed beta. Limited seats."
-              { name: "project", type: "text", placeholder: "Project name (optional)" }
+            buttons={[{ text: "Request Access" }]}
-            ]}
+            background={{ variant: "sparkles-gradient" }}
-            buttonText="Secure Beta Spot"
             useInvertedBackground={false}
           />
         </div>
 
         <div id="footer">
-          <FooterLogoEmphasis
+          <FooterSimple
-            logoText="Bloxly"
             columns={[
-              { items: [{ label: "Documentation", href: "#" }, { label: "API Reference", href: "#" }] },
+              { title: "Bloxly", items: [{ label: "Documentation" }, { label: "API Reference" }] },
-              { items: [{ label: "Discord", href: "#" }, { label: "Terms of Service", href: "#" }] }
+              { title: "Community", items: [{ label: "Discord" }, { label: "Terms of Service" }] }
             ]}
+            bottomLeftText="© 2026 Strop de Aer SRL · Cluj-Napoca, Romania"
+            bottomRightText="Built for Roblox creators."
           />
         </div>
       </ReactLenis>