From 8a2d34772316083fd650f7c027a08968574a808a Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Tue, 28 Oct 2025 12:48:51 +0000
Subject: [PATCH] feat: Implement card-style tab buttons

---
 src/components/homepage/ContentTabs.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/homepage/ContentTabs.tsx b/src/components/homepage/ContentTabs.tsx
index 9059fa95..e824148d 100644
--- a/src/components/homepage/ContentTabs.tsx
+++ b/src/components/homepage/ContentTabs.tsx
@@ -260,23 +260,23 @@ export function ContentTabs() {
       <div className="container mx-auto px-4">
         <Tabs defaultValue="trending-parks" className="w-full">
           <div className="text-center mb-8">
-            <TabsList className="grid w-full max-w-5xl mx-auto grid-cols-3 md:grid-cols-6 h-auto p-2 bg-gradient-to-r from-primary/10 via-secondary/10 to-accent/10 dark:from-primary/20 dark:via-secondary/20 dark:to-accent/20 dark:bg-card/50 border border-primary/20 dark:border-primary/30 rounded-xl shadow-lg backdrop-blur-sm">
-              <TabsTrigger value="trending-parks" className="text-xs md:text-sm px-2 py-3 data-[state=active]:shadow-[0_0_12px_rgba(139,92,246,0.4)] transition-shadow duration-300">
+            <TabsList className="grid w-full max-w-5xl mx-auto grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 md:gap-2 p-3 bg-gradient-to-r from-primary/5 via-secondary/5 to-accent/5 dark:from-primary/10 dark:via-secondary/10 dark:to-accent/10 border border-primary/10 dark:border-primary/20 rounded-xl backdrop-blur-sm">
+              <TabsTrigger value="trending-parks" className="text-sm md:text-xs lg:text-sm px-3 py-4 md:px-2 md:py-3 rounded-lg border border-border/30 bg-card/50 backdrop-blur-sm shadow-sm hover:shadow-md hover:border-primary/40 hover:-translate-y-0.5 data-[state=active]:border-primary/60 data-[state=active]:bg-gradient-to-br data-[state=active]:from-primary/15 data-[state=active]:to-accent/10 data-[state=active]:shadow-[0_0_20px_rgba(139,92,246,0.4)] data-[state=active]:translate-y-0 transition-all duration-300 font-medium">
                 Trending Parks
               </TabsTrigger>
-              <TabsTrigger value="trending-rides" className="text-xs md:text-sm px-2 py-3 data-[state=active]:shadow-[0_0_12px_rgba(139,92,246,0.4)] transition-shadow duration-300">
+              <TabsTrigger value="trending-rides" className="text-sm md:text-xs lg:text-sm px-3 py-4 md:px-2 md:py-3 rounded-lg border border-border/30 bg-card/50 backdrop-blur-sm shadow-sm hover:shadow-md hover:border-primary/40 hover:-translate-y-0.5 data-[state=active]:border-primary/60 data-[state=active]:bg-gradient-to-br data-[state=active]:from-primary/15 data-[state=active]:to-accent/10 data-[state=active]:shadow-[0_0_20px_rgba(139,92,246,0.4)] data-[state=active]:translate-y-0 transition-all duration-300 font-medium">
                 Trending Rides
               </TabsTrigger>
-              <TabsTrigger value="recent-parks" className="text-xs md:text-sm px-2 py-3 data-[state=active]:shadow-[0_0_12px_rgba(139,92,246,0.4)] transition-shadow duration-300">
+              <TabsTrigger value="recent-parks" className="text-sm md:text-xs lg:text-sm px-3 py-4 md:px-2 md:py-3 rounded-lg border border-border/30 bg-card/50 backdrop-blur-sm shadow-sm hover:shadow-md hover:border-primary/40 hover:-translate-y-0.5 data-[state=active]:border-primary/60 data-[state=active]:bg-gradient-to-br data-[state=active]:from-primary/15 data-[state=active]:to-accent/10 data-[state=active]:shadow-[0_0_20px_rgba(139,92,246,0.4)] data-[state=active]:translate-y-0 transition-all duration-300 font-medium">
                 New Parks
               </TabsTrigger>
-              <TabsTrigger value="recent-rides" className="text-xs md:text-sm px-2 py-3 data-[state=active]:shadow-[0_0_12px_rgba(139,92,246,0.4)] transition-shadow duration-300">
+              <TabsTrigger value="recent-rides" className="text-sm md:text-xs lg:text-sm px-3 py-4 md:px-2 md:py-3 rounded-lg border border-border/30 bg-card/50 backdrop-blur-sm shadow-sm hover:shadow-md hover:border-primary/40 hover:-translate-y-0.5 data-[state=active]:border-primary/60 data-[state=active]:bg-gradient-to-br data-[state=active]:from-primary/15 data-[state=active]:to-accent/10 data-[state=active]:shadow-[0_0_20px_rgba(139,92,246,0.4)] data-[state=active]:translate-y-0 transition-all duration-300 font-medium">
                 New Rides
               </TabsTrigger>
-              <TabsTrigger value="recent-changes" className="text-xs md:text-sm px-2 py-3 data-[state=active]:shadow-[0_0_12px_rgba(139,92,246,0.4)] transition-shadow duration-300">
+              <TabsTrigger value="recent-changes" className="text-sm md:text-xs lg:text-sm px-3 py-4 md:px-2 md:py-3 rounded-lg border border-border/30 bg-card/50 backdrop-blur-sm shadow-sm hover:shadow-md hover:border-primary/40 hover:-translate-y-0.5 data-[state=active]:border-primary/60 data-[state=active]:bg-gradient-to-br data-[state=active]:from-primary/15 data-[state=active]:to-accent/10 data-[state=active]:shadow-[0_0_20px_rgba(139,92,246,0.4)] data-[state=active]:translate-y-0 transition-all duration-300 font-medium">
                 Recent Changes
               </TabsTrigger>
-              <TabsTrigger value="recently-opened" className="text-xs md:text-sm px-2 py-3 data-[state=active]:shadow-[0_0_12px_rgba(139,92,246,0.4)] transition-shadow duration-300">
+              <TabsTrigger value="recently-opened" className="text-sm md:text-xs lg:text-sm px-3 py-4 md:px-2 md:py-3 rounded-lg border border-border/30 bg-card/50 backdrop-blur-sm shadow-sm hover:shadow-md hover:border-primary/40 hover:-translate-y-0.5 data-[state=active]:border-primary/60 data-[state=active]:bg-gradient-to-br data-[state=active]:from-primary/15 data-[state=active]:to-accent/10 data-[state=active]:shadow-[0_0_20px_rgba(139,92,246,0.4)] data-[state=active]:translate-y-0 transition-all duration-300 font-medium">
                 Recently Opened
               </TabsTrigger>
             </TabsList>