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

---
 src/app/page.tsx | 130 +++++++++++++++++++++++++----------------------
 1 file changed, 69 insertions(+), 61 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6fde161..9773694 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,25 +3,25 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroCentered from "@/components/sections/hero/HeroCentered";
-import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
-import TeamCardEleven from "@/components/sections/team/TeamCardEleven";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
-import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
-import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
-import { Sparkles, Code, Zap } from "lucide-react";
+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";
 
 export default function BloxlyLandingPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
+      defaultButtonVariant="hover-bubble"
       defaultTextAnimation="reveal-blur"
       borderRadius="rounded"
       contentWidth="medium"
       sizing="mediumLargeSizeLargeTitles"
-      background="noise"
-      cardStyle="glass-depth"
-      primaryButtonStyle="primary-glow"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="flat"
       secondaryButtonStyle="solid"
       headingFontWeight="extrabold"
     >
@@ -31,83 +31,91 @@ export default function BloxlyLandingPage() {
           navItems={[
             { name: "Capabilities", id: "capabilities" },
             { name: "Manifesto", id: "manifesto" },
-            { name: "Beta", id: "beta" },
+            { name: "Beta Access", id: "beta" },
           ]}
-          button={{ text: "Get Early Access", href: "#beta" }}
         />
-        
+
         <div id="hero">
-          <HeroCentered
-            title="Build Roblox Experiences at the Speed of AI"
-            description="The enterprise-grade coding platform built for Roblox developers. Ship faster, scale smarter, and focus on the mechanics that matter."
-            background={{ variant: "sparkles-gradient" }}
-            avatars={[
-              { src: "https://avatar.vercel.sh/1", alt: "Dev" },
-              { src: "https://avatar.vercel.sh/2", alt: "Dev" },
-              { src: "https://avatar.vercel.sh/3", alt: "Dev" }
-            ]}
-            avatarText="10,000+ developers joined"
-            buttons={[{ text: "Get Started", href: "#beta" }]}
-            marqueeItems={[{ type: 'text-icon', text: 'AI-Native Engine', icon: Sparkles }, { type: 'text-icon', text: 'Roblox Optimized', icon: Code }, { type: 'text-icon', text: 'Instant Deployment', icon: Zap }]}
+          <HeroLogo
+            logoText="Bloxly"
+            description="The AI coding agent for Roblox Studio. Accelerate your Luau development with precision and speed."
+            buttons={[{ text: "Get Beta Access", href: "#beta" }]}
           />
         </div>
 
         <div id="capabilities">
-          <SocialProofOne 
-            names={["Optimized Luau Engine", "Real-time Debugging", "Asset Streaming API", "Multiplayer Scaling", "Auto-documented Code"]}
-            title="Built for Scale"
-            description="Everything you need to ship world-class games."
-            textboxLayout="default"
+          <MetricCardSeven
+            title="AI-Native Luau Capabilities"
+            description="Designed specifically for the Roblox engine, Bloxly transforms complex game logic into clean, performant code."
+            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"] }
+            ]}
+            textboxLayout="split-description"
+            animationType="slide-up"
             useInvertedBackground={false}
           />
         </div>
 
         <div id="features">
-          <FeatureCardTwentySeven
-            title="What Bloxly Does"
-            description="Automate the mundane and amplify your creativity with our suite of AI-driven dev tools."
-            animationType="slide-up"
+          <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"
+            animationType="slide-up"
             useInvertedBackground={true}
             features={[
-              { id: "f1", title: "Code Acceleration", descriptions: ["Context-aware Luau completion", "Auto-generated boilerplate code", "AI-refactored scripts"] },
-              { id: "f2", title: "Visual Mechanics", descriptions: ["Drag-and-drop logic nodes", "Auto-layout UI generation", "Live-preview world states"] },
-              { id: "f3", title: "Optimization Engine", descriptions: ["Automated bottleneck detection", "Memory footprint reduction", "Network throttling smart-fixes"] }
+              { 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" }
+            ]}
+          />
+        </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"
+            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" }
             ]}
           />
         </div>
 
         <div id="manifesto">
-          <TeamCardEleven
-             title="Manifesto: Own What You Build"
-             description="Powered by MultiversX, Bloxly ensures your IP stays yours. Your assets, your code, your future."
-             textboxLayout="split"
-             animationType="slide-up"
-             useInvertedBackground={false}
-             groups={[
-               {
-                 id: "g1",                 groupTitle: "The Bloxly Standard",                 members: [{ id: "m1", title: "On-Chain Security", subtitle: "Verification", detail: "Every asset is anchored in trust with MultiversX integration." }]
-               }
-             ]}
+          <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">
-           <ContactCenter
-             tag="Join the Beta"
-             title="Shape the Future of Roblox Development"
-             description="Secure your spot in the Bloxly Beta program and get exclusive access to our AI tools before the public launch."
-             background={{ variant: "rotated-rays-animated" }}
-             buttonText="Join Now"
-             useInvertedBackground={false}
-           />
+          <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"
+          />
         </div>
 
         <div id="footer">
-          <FooterBaseReveal
-             logoText="Bloxly"
-             columns={[{ title: "Product", items: [{ label: "Features", href: "#" }, { label: "Security", href: "#" }] }, { title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] }]}
-             copyrightText="© 2024 Bloxly. All rights reserved."
+          <FooterLogoEmphasis
+            logoText="Bloxly"
+            columns={[
+              { items: [{ label: "Documentation", href: "#" }, { label: "API Reference", href: "#" }] },
+              { items: [{ label: "Discord", href: "#" }, { label: "Terms of Service", href: "#" }] }
+            ]}
           />
         </div>
       </ReactLenis>