Update src/app/page.tsx

Update src/app/styles/base.css
2026-05-15 14:10:07 +00:00 · 2026-05-15 14:09:41 +00:00 · 2026-05-15 14:09:40 +00:00 · 2026-05-15 14:09:40 +00:00 · 2026-05-15 14:07:57 +00:00
3 changed files with 80 additions and 75 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,20 +6,17 @@ import "@/lib/gsap-setup";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 import { Space_Grotesk } from "next/font/google";
 const halant = Halant({
  variable: "--font-halant",
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700"],
 });
 const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
 });
 export const metadata: Metadata = { title: 'Webild Agency | Premium Web Design & Digital Strategy', description: 'Elevate your brand with Webild. We craft high-performance, custom websites and digital experiences designed to drive growth and captivate your audience.' };
 const spaceGrotesk = Space_Grotesk({
  variable: "--font-space-grotesk",  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700"],
 });
 export default function RootLayout({
  children,
 }: Readonly<{
@@ -28,9 +25,7 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
-        <body
+        <body className={`${spaceGrotesk.variable} antialiased`}>
          className={`${halant.variable} ${inter.variable} antialiased`}
        >
          <Tag />
          {children}
          <script
--- 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 HeroLogo from "@/components/sections/hero/HeroLogo";
-import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
+import MediaAbout from "@/components/sections/about/MediaAbout";
-import TeamCardEleven from "@/components/sections/team/TeamCardEleven";
+import FeatureCardTwentyNine from "@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
+import TeamCardOne from "@/components/sections/team/TeamCardOne";
-import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
-import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
-import { Sparkles, Code, Zap } from "lucide-react";
+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"
+      background="none"
-      cardStyle="glass-depth"
+      cardStyle="solid"
-      primaryButtonStyle="primary-glow"
+      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
@@ -31,83 +31,93 @@ 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
+          <HeroLogo
-            title="Build Roblox Experiences at the Speed of AI"
+            logoText="Bloxly"
-            description="The enterprise-grade coding platform built for Roblox developers. Ship faster, scale smarter, and focus on the mechanics that matter."
+            description="The AI coding agent for Roblox Studio. Accelerate your Luau development with precision and speed."
-            background={{ variant: "sparkles-gradient" }}
+            buttons={[{ text: "Get Beta Access", href: "#beta" }]}
            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 }]}
          />
        </div>
        <div id="capabilities">
-          <SocialProofOne 
+          <MetricCardSeven
-            names={["Optimized Luau Engine", "Real-time Debugging", "Asset Streaming API", "Multiplayer Scaling", "Auto-documented Code"]}
+            title="AI-Native Luau Capabilities"
-            title="Built for Scale"
+            description="Designed specifically for the Roblox engine, Bloxly transforms complex game logic into clean, performant code."
-            description="Everything you need to ship world-class games."
+            metrics={[
-            textboxLayout="default"
+              { 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
+          <FeatureCardTwentyNine
-            title="What Bloxly Does"
+            title="Precision Coding Engine"
-            description="Automate the mundane and amplify your creativity with our suite of AI-driven dev tools."
+            description="Bloxly interprets your vision and translates it into high-performance Luau scripts."
            animationType="slide-up"
            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"] },
+              { title: "Game Logic Automation", description: "Automate complex character controllers and inventory systems.", imageSrc: "", titleImageSrc: "", buttonText: "Learn More" },
-              { id: "f2", title: "Visual Mechanics", descriptions: ["Drag-and-drop logic nodes", "Auto-layout UI generation", "Live-preview world states"] },
+              { title: "Smart UI Construction", description: "Generate interactive screens using AI-assisted layout constraints.", imageSrc: "", titleImageSrc: "", buttonText: "Learn More" },
-              { id: "f3", title: "Optimization Engine", descriptions: ["Automated bottleneck detection", "Memory footprint reduction", "Network throttling smart-fixes"] }
+              { 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"
            useInvertedBackground={false}
            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
+          <MediaAbout
-             title="Manifesto: Own What You Build"
+            title="Own What You Build"
-             description="Powered by MultiversX, Bloxly ensures your IP stays yours. Your assets, your code, your future."
+            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."
-             textboxLayout="split"
+            useInvertedBackground={true}
             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." }]
               }
             ]}
          />
        </div>
        <div id="beta">
-           <ContactCenter
+          <ContactSplitForm
-             tag="Join the Beta"
+            title="Beta Access"
-             title="Shape the Future of Roblox Development"
+            description="Join the select group of builders pioneering the next wave of Roblox game development."
-             description="Secure your spot in the Bloxly Beta program and get exclusive access to our AI tools before the public launch."
+            inputs={[
-             background={{ variant: "rotated-rays-animated" }}
+              { name: "email", type: "email", placeholder: "Email address" },
-             buttonText="Join Now"
+              { name: "project", type: "text", placeholder: "Project name (optional)" }
            ]}
            buttonText="Secure Beta Spot"
            useInvertedBackground={false}
          />
        </div>
        <div id="footer">
-          <FooterBaseReveal
+          <FooterLogoEmphasis
            logoText="Bloxly"
-             columns={[{ title: "Product", items: [{ label: "Features", href: "#" }, { label: "Security", href: "#" }] }, { title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] }]}
+            columns={[
-             copyrightText="© 2024 Bloxly. All rights reserved."
+              { items: [{ label: "Documentation", href: "#" }, { label: "API Reference", href: "#" }] },
              { items: [{ label: "Discord", href: "#" }, { label: "Terms of Service", href: "#" }] }
            ]}
          />
        </div>
      </ReactLenis>
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
  background-color: var(--background);
  color: var(--foreground);
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-space-grotesk), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-space-grotesk), sans-serif;
 }
Author	SHA1	Message	Date
bender	b049dfcce8	Update src/app/page.tsx	2026-05-15 14:10:07 +00:00
bender	23d07236ef	Update src/app/styles/base.css	2026-05-15 14:09:41 +00:00
bender	cf92e81eba	Update src/app/page.tsx	2026-05-15 14:09:40 +00:00
bender	d8ef2d4d30	Update src/app/layout.tsx	2026-05-15 14:09:40 +00:00
bender	cefafc7659	Merge version_3 into main Merge version_3 into main	2026-05-15 14:07:57 +00:00