From 4d4a50bed987f1eabda0fb3cb99f6aeac804c1d4 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sun, 19 Oct 2025 21:12:01 +0000
Subject: [PATCH] Wire up GamifiedBanner and extend BannerSettings with style
 selector

cgen-52fe3f74318d497aa9780b02fc59678a
---
 client/pages/Index.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/client/pages/Index.tsx b/client/pages/Index.tsx
index 599eb5d3..352b9da9 100644
--- a/client/pages/Index.tsx
+++ b/client/pages/Index.tsx
@@ -12,6 +12,7 @@ import { Badge } from "@/components/ui/badge";
 import LoadingScreen from "@/components/LoadingScreen";
 import { SkeletonStats, SkeletonUserPath } from "@/components/Skeleton";
 import { Link } from "react-router-dom";
+import GamifiedBanner from "@/components/GamifiedBanner";
 import {
   ArrowRight,
   CheckCircle,
@@ -267,16 +268,11 @@ export default function Index() {
     <Layout hideFooter>
       {/* Top Banner (editable via Admin → Operations) */}
       {homeBanner?.enabled !== false && (
-        <>
-          {/* Gamified top banner */}
-          {/* eslint-disable-next-line react/no-unknown-property */}
-          <div data-home-banner>
-            {/* @ts-ignore - component default export */}
-            {/* Using dynamic styling keyed by homeBanner.style */}
-            {/* Prefer emoji prefix in text for style */}
-            {/* The component handles disabled state upstream */}
-          </div>
-        </>
+        <GamifiedBanner
+          text={homeBanner?.text || "ROBLOX AUTH SOON"}
+          enabled={homeBanner?.enabled !== false}
+          style={(homeBanner as any)?.style || null}
+        />
       )}
 
       {/* Hero Section - Geometric Design */}