Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
@@ -11,9 +12,18 @@ import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll'
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
-import { Award, CheckCircle, Shield, Star, TrendingUp, Zap, MessageSquare, Phone } from "lucide-react";
+import { CheckCircle, Shield, Zap, MessageSquare, Phone, Palette } from "lucide-react";
 
 export default function LandingPage() {
+  const [bgVariant, setBgVariant] = useState<any>("noiseDiagonalGradient");
+
+  const backgroundOptions = [
+    "noiseDiagonalGradient", 
+    "floatingGradient", 
+    "grid", 
+    "aurora"
+  ];
+
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
@@ -21,13 +31,27 @@ export default function LandingPage() {
         borderRadius="rounded"
         contentWidth="smallMedium"
         sizing="largeSmall"
-        background="noiseDiagonalGradient"
+        background={bgVariant}
         cardStyle="inset"
         primaryButtonStyle="diagonal-gradient"
         secondaryButtonStyle="layered"
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
+        <div className="fixed bottom-6 right-6 z-50 flex gap-2">
+            {backgroundOptions.map((opt) => (
+                <button 
+                    key={opt}
+                    onClick={() => setBgVariant(opt)}
+                    className={`w-10 h-10 rounded-full border-2 transition-all ${bgVariant === opt ? 'border-foreground scale-110' : 'border-transparent opacity-60'}`}
+                    style={{ background: opt === 'noiseDiagonalGradient' ? '#ccc' : opt === 'floatingGradient' ? 'linear-gradient(45deg, #6139e6, #b3a8e8)' : '#333' }}
+                    aria-label={`Set background to ${opt}`}
+                >
+                    <Palette className="mx-auto" size={16} />
+                </button>
+            ))}
+        </div>
+
         <div id="nav" data-section="nav">
             <NavbarStyleApple
               navItems={[