From 1a479e15ae752be2fa126968b3627607cad2cf49 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 15 May 2026 14:11:46 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 125 +++++++++++++++++++++++++----------------------
 1 file changed, 67 insertions(+), 58 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4effc5b..f9cdd45 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,13 +3,14 @@
 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 MediaAbout from "@/components/sections/about/MediaAbout";
-import FeatureCardTwentyNine from "@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine";
-import TeamCardOne from "@/components/sections/team/TeamCardOne";
-import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
-import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
-import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
+import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
+import SplitAbout from "@/components/sections/about/SplitAbout";
+import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
+import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
+import TeamCardTen from "@/components/sections/team/TeamCardTen";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Sparkles, Zap, Brain, Target } from "lucide-react";
 
 export default function BloxlyLandingPage() {
   return (
@@ -36,88 +37,96 @@ export default function BloxlyLandingPage() {
         />
 
         <div id="hero">
-          <HeroLogo
-            logoText="Bloxly"
-            description="The AI coding agent for Roblox Studio. Accelerate your Luau development with precision and speed."
+          <HeroSplitTestimonial
+            title="The AI Coding Agent for Roblox Studio"
+            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={[
+              {
+                name: "Alex Dev",                handle: "@alexdev",                testimonial: "Bloxly cut my development time by 70%. It's a game-changer for Roblox creators.",                rating: 5,
+              }
+            ]}
             buttons={[{ text: "Get Beta Access", href: "#beta" }]}
+            mediaAnimation="slide-up"
           />
         </div>
 
         <div id="capabilities">
-          <MetricCardSeven
-            title="AI-Native Luau Capabilities"
-            description="Designed specifically for the Roblox engine, Bloxly transforms complex game logic into clean, performant code."
+          <MetricCardEleven
+            title="AI-Native Luau Power"
+            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"
-            useInvertedBackground={false}
+            textboxLayout="split-actions"
           />
         </div>
 
         <div id="features">
-          <FeatureCardTwentyNine
-            title="Precision Coding Engine"
-            description="Bloxly interprets your vision and translates it into high-performance Luau scripts."
-            textboxLayout="default"
-            gridVariant="three-columns-all-equal-width"
+          <FeatureCardSeven
+            title="Precision Engine Tools"
+            description="Automate the mundane, focus on the fun. Bloxly handles your backend complexity."
             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: "Smart UI Construction", description: "Generate interactive screens using AI-assisted layout constraints.", imageSrc: "", titleImageSrc: "", buttonText: "Learn More" },
-              { title: "Deep Optimization", description: "Detect bottlenecks and resolve memory leaks automatically.", 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: "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: "Automatic detection of bottlenecked Luau code.", 
+                imageSrc: "https://images.unsplash.com/photo-1587620962725-abab7fe55159?auto=format&fit=crop&q=80&w=600"
+              }
             ]}
           />
         </div>
 
         <div id="how-it-works">
-          <TeamCardOne
-            title="How It Works"
-            description="Four simple steps to transform your development workflow."
-            textboxLayout="default"
-            gridVariant="four-items-2x2-equal-grid"
-            animationType="slide-up"
-            useInvertedBackground={false}
+          <TeamCardTen
+            title="Four Steps to Success"
+            tag="Workflow"
+            membersAnimation="slide-up"
+            memberVariant="card"
             members={[
-              { id: "1", name: "Describe Vision", role: "Input your game mechanics" },
-              { id: "2", name: "Generate Logic", role: "AI writes optimized Luau" },
-              { id: "3", name: "Iterate Fast", role: "Debug and refine in real-time" },
-              { id: "4", name: "Ship Experience", role: "Push updates directly to Roblox" }
+              { id: "1", name: "Describe your Vision" },
+              { id: "2", name: "Generate AI Logic" },
+              { id: "3", name: "Refine & Debug" },
+              { id: "4", name: "Ship Experience" }
             ]}
           />
         </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
-            title="Beta Access"
-            description="Join the select group of builders pioneering the next wave of Roblox game development."
-            inputs={[
-              { name: "email", type: "email", placeholder: "Email address" },
-              { name: "project", type: "text", placeholder: "Project name (optional)" }
-            ]}
-            buttonText="Secure Beta Spot"
-            useInvertedBackground={false}
+          <ContactCTA
+            tag="Get Early Access"
+            tagIcon={Sparkles}
+            title="Join the Builder Revolution"
+            description="Secure your spot in the Bloxly beta program and start shipping better games faster."
+            buttons={[{ text: "Request Access" }]}
+            background={{ variant: "sparkles-gradient" }}
           />
         </div>
 
         <div id="footer">
-          <FooterLogoEmphasis
-            logoText="Bloxly"
+          <FooterSimple
             columns={[
-              { items: [{ label: "Documentation", href: "#" }, { label: "API Reference", href: "#" }] },
-              { items: [{ label: "Discord", href: "#" }, { label: "Terms of Service", href: "#" }] }
+              { title: "Bloxly", items: [{ label: "Documentation" }, { label: "API Reference" }] },
+              { title: "Community", items: [{ label: "Discord" }, { label: "Terms of Service" }] }
             ]}
+            bottomLeftText="© 2024 Bloxly. All rights reserved."
           />
         </div>
       </ReactLenis>