Update src/app/page.tsx

src/app/page.tsx

@@ -21,7 +21,7 @@ export default function LandingPage() {
       contentWidth="compact"
       sizing="mediumLargeSizeLargeTitles"
       background="circleGradient"
-      cardStyle="subtle-shadow"
+      cardStyle="glass-elevated"
       primaryButtonStyle="double-inset"
       secondaryButtonStyle="solid"
       headingFontWeight="bold"
@@ -38,6 +38,7 @@ export default function LandingPage() {
           button={{
             text: "Start Exploring",            href: "#hero"
           }}
+          className="backdrop-blur-md bg-white/10 border border-white/20 shadow-xl"
         />
       </div>
 
@@ -133,6 +134,8 @@ export default function LandingPage() {
           mediaAnimation="slide-up"
           metricsAnimation="slide-up"
           useInvertedBackground={false}
+          metricsContainerClassName="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6"
+          metricCardClassName="backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl p-6 shadow-lg hover:bg-white/15 transition-all duration-300"
           ariaLabel="About Wanderlust section"
         />
       </div>
@@ -160,6 +163,7 @@ export default function LandingPage() {
           ]}
           textboxLayout="default"
           useInvertedBackground={false}
+          cardClassName="backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl p-6 shadow-lg hover:bg-white/15 transition-all duration-300"
           ariaLabel="Testimonials section"
         />
       </div>
@@ -189,6 +193,8 @@ export default function LandingPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           carouselMode="buttons"
+          cardClassName="backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl p-6 shadow-lg hover:bg-white/15 transition-all duration-300"
+          valueClassName="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent"
           ariaLabel="Metrics and statistics section"
         />
       </div>
@@ -229,6 +235,8 @@ export default function LandingPage() {
           useInvertedBackground={false}
           showCard={true}
           animationType="smooth"
+          accordionClassName="backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl p-4 hover:bg-white/15 transition-all duration-300"
+          contentClassName="bg-gradient-to-br from-white/5 to-white/10 backdrop-blur-sm rounded-lg"
           ariaLabel="FAQ section"
         />
       </div>
@@ -271,6 +279,10 @@ export default function LandingPage() {
               ]
             }
           ]}
+          containerClassName="backdrop-blur-md bg-white/10 border-t border-white/20 shadow-xl"
+          columnsClassName="grid grid-cols-2 md:grid-cols-4 gap-8"
+          columnItemClassName="text-white/70 hover:text-white transition-colors duration-200"
+          copyrightContainerClassName="border-t border-white/10 bg-white/5 backdrop-blur-sm"
           ariaLabel="Site footer"
         />
       </div>