diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx
index 52bf4f0..b3e28a0 100644
--- a/src/AppRouter.tsx
+++ b/src/AppRouter.tsx
@@ -88,7 +88,7 @@ export function AppRouter({
                     } />
 
                     {/* Home Route */}
-                    <Route path="/:cityName/:cityId" element={
+                    <Route path="/:cityName" element={
                         <motion.div key="home" {...pageTransition}>
                             <MelbournePage {...commonNavHandlers} />
                         </motion.div>
@@ -106,7 +106,7 @@ export function AppRouter({
                     } />
 
                     {/* Attractions Routes */}
-                    <Route path="/:cityName/:cityId/attractions" element={
+                    <Route path="/:cityName/attractions" element={
                         <motion.div key="attractions" {...pageTransition}>
                             <AttractionsPage {...commonNavHandlers} />
                         </motion.div>
@@ -265,7 +265,7 @@ export function AppRouter({
                         </motion.div>
                     } />
 
-                    <Route path="/super-savings" element={
+                    <Route path="/:cityName/super-savings" element={
                         <motion.div key="super-savings" {...pageTransition}>
                             <SuperSavingsPage {...commonNavHandlers} />
                         </motion.div>
diff --git a/src/Redux/services/cities.service.ts b/src/Redux/services/cities.service.ts
index 9754016..acc5b31 100644
--- a/src/Redux/services/cities.service.ts
+++ b/src/Redux/services/cities.service.ts
@@ -20,15 +20,28 @@ export const citiesApi = createApi({
         }),
 
         getUpcomingCities: builder.query({
-            
             query: (listType) => `/cities/list/all?listType=${listType}`,
 
         }),
 
-        getSelectedCityDetails:builder.query({
-             query: (cityId) => `/website/${cityId}`,
-        })
+        getSelectedCityDetails: builder.query({
+            query: (cityId) => `/website/${cityId}`,
+        }),
+
+        getSelectedCityOffers: builder.query({
+            query: ({ cityId, categoryId, page, limit }) => {
+                const params = new URLSearchParams()
+
+                params.append('cityXid', cityId);
+
+                if (categoryId) params.append('categoryXid', categoryId);
+                if (page) params.append('page', page);
+                if (limit) params.append('limit', limit);
+
+                return `/website/super-savings/list/offers?${params.toString()}`;
+            }
+        }),
     }),
 });
 
-export const { useGetCityListWithBannerQuery,useGetUpcomingCitiesQuery,useGetSelectedCityDetailsQuery } = citiesApi;
\ No newline at end of file
+export const { useGetCityListWithBannerQuery, useGetUpcomingCitiesQuery, useGetSelectedCityDetailsQuery, useGetSelectedCityOffersQuery } = citiesApi;
\ No newline at end of file
diff --git a/src/components/CitySelectionDialog.tsx b/src/components/CitySelectionDialog.tsx
index d478f84..188d4a0 100644
--- a/src/components/CitySelectionDialog.tsx
+++ b/src/components/CitySelectionDialog.tsx
@@ -42,20 +42,9 @@ export function CitySelectionDialog({
 
   const handleCityClick = (city: City) => {
     console.log('Selected city:', city.cityName);
-
-    // ✅ Call the onCitySelect callback if provided (passing cityId)
-    if (onCitySelect) {
-      // onCitySelect(String(city.cityName));
-      // navigate(`/${city.cityName}/${city.id}`)
-
-      navigate(`/${slugify(city.cityName)}`);
-      localStorage.setItem("cityId", String(city.id))
-      localStorage.setItem("cityName", String(city.cityName))
-    } else {
-      // ✅ Default behavior: navigate to passes page
-      navigate(`/passes?city=${encodeURIComponent(city.cityName)}`);
-    }
-
+    navigate(`/${slugify(city.cityName)}`);
+    localStorage.setItem("cityId", String(city.id))
+    localStorage.setItem("cityName", String(city.cityName))
     onClose();
   };
 
diff --git a/src/pages/SuperSavingsPage.tsx b/src/pages/SuperSavingsPage.tsx
index eb8263d..8b9e680 100644
--- a/src/pages/SuperSavingsPage.tsx
+++ b/src/pages/SuperSavingsPage.tsx
@@ -15,6 +15,8 @@ import { MobileAppSection } from '../components/MobileAppSection';
 import { ReviewsSection } from '../components/ReviewsSection';
 import { TrustedCompanies } from '../components/TrustedCompanies';
 import { Layout } from '../Layout';
+import { useGetSelectedCityOffersQuery } from '../Redux/services/cities.service';
+import LoadingSpinner from '../components/LoadingSpinner';
 
 interface SuperSavingsPageProps {
     onBackClick: () => void;
@@ -44,138 +46,6 @@ interface SuperSavingsPageProps {
     user?: { email: string; name: string; } | null;
 }
 
-// Mock super savings data
-const savingsData = [
-    {
-        id: '1',
-        business: 'Grand Hotels Melbourne',
-        title: 'Up to 50% Off on luxury hotel stays across Melbourne',
-        discount: '50% OFF',
-        savedAmount: 'Save up to $300',
-        image: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=400',
-        category: 'hotels'
-    },
-    {
-        id: '2',
-        business: 'Adventure Tours',
-        title: '40% Off on guided adventure tours and experiences',
-        discount: '40% OFF',
-        savedAmount: 'Save up to $150',
-        image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400',
-        category: 'tours'
-    },
-    {
-        id: '3',
-        business: 'Premium Spa & Wellness',
-        title: '45% Off on spa packages and wellness treatments',
-        discount: '45% OFF',
-        savedAmount: 'Save up to $200',
-        image: 'https://images.unsplash.com/photo-1544161515-4ab6ce6db874?w=400',
-        category: 'wellness'
-    },
-    {
-        id: '4',
-        business: 'Culinary Delights',
-        title: '35% Off on fine dining at Michelin-starred restaurants',
-        discount: '35% OFF',
-        savedAmount: 'Save up to $120',
-        image: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400',
-        category: 'dining'
-    },
-    {
-        id: '5',
-        business: 'Entertainment Pass',
-        title: '60% Off on theater shows and concert tickets',
-        discount: '60% OFF',
-        savedAmount: 'Save up to $250',
-        image: 'https://images.unsplash.com/photo-1514306191717-452ec28c7814?w=400',
-        category: 'entertainment'
-    },
-    {
-        id: '6',
-        business: 'Museum Pass',
-        title: '55% Off on museum entries and special exhibitions',
-        discount: '55% OFF',
-        savedAmount: 'Save up to $180',
-        image: 'https://images.unsplash.com/photo-1566127992631-137a642a90f4?w=400',
-        category: 'museums'
-    },
-    {
-        id: '7',
-        business: 'Luxury Shopping',
-        title: '30% Off on designer boutiques and luxury shopping',
-        discount: '30% OFF',
-        savedAmount: 'Save up to $500',
-        image: 'https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=400',
-        category: 'shopping'
-    },
-    {
-        id: '8',
-        business: 'Water Sports',
-        title: '45% Off on water sports and beach activities',
-        discount: '45% OFF',
-        savedAmount: 'Save up to $175',
-        image: 'https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=400',
-        category: 'sports'
-    },
-    {
-        id: '9',
-        business: 'Wine Tasting Tours',
-        title: '40% Off on wine country tours and tastings',
-        discount: '40% OFF',
-        savedAmount: 'Save up to $160',
-        image: 'https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?w=400',
-        category: 'tours'
-    },
-    {
-        id: '10',
-        business: 'Family Fun Parks',
-        title: '50% Off on family entertainment and theme parks',
-        discount: '50% OFF',
-        savedAmount: 'Save up to $220',
-        image: 'https://images.unsplash.com/photo-1524850011238-e3d235c7d4c9?w=400',
-        category: 'entertainment'
-    },
-    {
-        id: '11',
-        business: 'Boutique Stays',
-        title: '55% Off on boutique hotels and bed & breakfasts',
-        discount: '55% OFF',
-        savedAmount: 'Save up to $280',
-        image: 'https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?w=400',
-        category: 'hotels'
-    },
-    {
-        id: '12',
-        business: 'Art Galleries',
-        title: '35% Off on contemporary art galleries and workshops',
-        discount: '35% OFF',
-        savedAmount: 'Save up to $140',
-        image: 'https://images.unsplash.com/photo-1561214115-f2f134cc4912?w=400',
-        category: 'museums'
-    },
-    {
-        id: '13',
-        business: 'Luxury Cruises',
-        title: '65% Off on harbor cruises and yacht experiences',
-        discount: '65% OFF',
-        savedAmount: 'Save up to $400',
-        image: 'https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=400',
-        category: 'tours'
-    }
-];
-
-const filterCategories = [
-    { value: 'hotels', label: 'Hotels', count: 2 },
-    { value: 'tours', label: 'Tours', count: 3 },
-    { value: 'wellness', label: 'Wellness', count: 1 },
-    { value: 'dining', label: 'Dining', count: 1 },
-    { value: 'entertainment', label: 'Entertainment', count: 2 },
-    { value: 'museums', label: 'Museums', count: 2 },
-    { value: 'shopping', label: 'Shopping', count: 1 },
-    { value: 'sports', label: 'Sports', count: 1 }
-];
-
 // Categories data for the Super Savings Categories section
 const categoriesData = [
     {
@@ -242,504 +112,504 @@ export function SuperSavingsPage({
     currentPage,
     user
 }: SuperSavingsPageProps) {
-    const [searchQuery, setSearchQuery] = useState('');
-    const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
-    const [currentPage_, setCurrentPage_] = useState(1);
-    const [showLoadMore, setShowLoadMore] = useState(true);
 
-    const toggleCategory = (category: string) => {
-        setSelectedCategories(prev =>
-            prev.includes(category)
-                ? prev.filter(c => c !== category)
-                : [...prev, category]
-        );
-    };
+    const [categoryId, setCategoryId] = useState(null)
+    const [page, setPage] = useState(1)
+    const [limit, setLimit] = useState(4)
+    const cityId = localStorage.getItem("cityId")
+    const { data, isLoading } = useGetSelectedCityOffersQuery({ cityId, categoryId, page, limit })
 
-    const filteredSavings = savingsData.filter(saving => {
-        const matchesSearch = saving.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-            saving.business.toLowerCase().includes(searchQuery.toLowerCase());
-        const matchesCategory = selectedCategories.length === 0 || selectedCategories.includes(saving.category);
+    // optional chaining ensures no crash if data is undefined
+    const offers = data?.offers ?? [];
+    const categories = data?.categories ?? [];
 
-        return matchesSearch && matchesCategory;
-    });
+    const totalOffers = data?.paginationData.total ?? 0;
+    const totalPages = Math.ceil(totalOffers / limit);
 
-    const itemsPerPage = 12;
-    const displayedSavings = filteredSavings.slice(0, currentPage_ * itemsPerPage);
-    const hasMoreItems = filteredSavings.length > displayedSavings.length;
+    const baseUrl = import.meta.env.VITE_BASE_URL;
 
-    const handleLoadMore = () => {
-        setCurrentPage_(prev => prev + 1);
-        if (!hasMoreItems) setShowLoadMore(false);
-    };
-
-    // Show different layouts based on login state
-    if (!user) {
-        // Not logged in - show marketing/landing page
+    if (isLoading) {
         return (
-            <Layout
-                activeCity="Melbourne"
-                onSignInClick={onSignInClick}
-                onSignOutClick={onSignOutClick}
-                user={user}
-            >
-                <div className="min-h-screen bg-background">
+            <LoadingSpinner />
+        );
+    }
 
-                    {/* Hero Section */}
-                    <section className="relative pt-52 pb-20 overflow-hidden">
-                        {/* Background gradient */}
-                        <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-secondary/5 to-background">
-                            <ImageWithFallback
-                                src="https://images.unsplash.com/photo-1758787397603-bbd85bd06a2c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjB0cmF2ZWwlMjBkZXN0aW5hdGlvbnxlbnwxfHx8fDE3NjI0MjQ3NTV8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
-                                alt="Melbourne Travel Destination"
-                                className="w-full h-full object-cover opacity-20"
-                            />
-                            <div className="absolute inset-0 bg-gradient-to-b from-white/40 via-white/60 to-white/90"></div>
-                        </div>
+    return (
+        <Layout
+            activeCity="Melbourne"
+            onSignInClick={onSignInClick}
+            onSignOutClick={onSignOutClick}
+            user={user}
+        >
+            <div className="min-h-screen bg-background">
 
-                        <div className="container mx-auto px-4 relative z-10">
-                            <motion.div
-                                className="max-w-4xl mx-auto text-center"
-                                initial={{ opacity: 0, y: 30 }}
-                                animate={{ opacity: 1, y: 0 }}
-                                transition={{ duration: 0.6 }}
+                {/* Hero Section */}
+                <section className="relative pt-52 pb-20 overflow-hidden">
+                    {/* Background gradient */}
+                    <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-secondary/5 to-background">
+                        <ImageWithFallback
+                            src="https://images.unsplash.com/photo-1758787397603-bbd85bd06a2c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjB0cmF2ZWwlMjBkZXN0aW5hdGlvbnxlbnwxfHx8fDE3NjI0MjQ3NTV8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
+                            alt="Melbourne Travel Destination"
+                            className="w-full h-full object-cover opacity-20"
+                        />
+                        <div className="absolute inset-0 bg-gradient-to-b from-white/40 via-white/60 to-white/90"></div>
+                    </div>
+
+                    <div className="container mx-auto px-4 relative z-10">
+                        <motion.div
+                            className="max-w-4xl mx-auto text-center"
+                            initial={{ opacity: 0, y: 30 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ duration: 0.6 }}
+                        >
+                            <h1 className="font-poppins text-4xl md:text-5xl lg:text-6xl leading-tight mb-6">
+                                <span className="font-light">Unlock</span>{' '}
+                                <span className="pr-2 font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                                    Super Savings
+                                </span>
+                            </h1>
+                            <p className="font-poppins text-lg md:text-xl leading-relaxed text-gray-600 mb-8 max-w-2xl mx-auto">
+                                Experience incredible discounts up to 65% off on premium experiences, luxury stays, and unforgettable attractions.
+                            </p>
+                            <Button
+                                onClick={onSignInClick}
+                                className="bg-primary hover:bg-primary/90 text-white px-8 py-6 font-poppins font-semibold"
                             >
-                                <h1 className="font-poppins text-4xl md:text-5xl lg:text-6xl leading-tight mb-6">
-                                    <span className="font-light">Unlock</span>{' '}
-                                    <span className="pr-2 font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
-                                        Super Savings
-                                    </span>
-                                </h1>
-                                <p className="font-poppins text-lg md:text-xl leading-relaxed text-gray-600 mb-8 max-w-2xl mx-auto">
-                                    Experience incredible discounts up to 65% off on premium experiences, luxury stays, and unforgettable attractions.
-                                </p>
-                                <Button
-                                    onClick={onSignInClick}
-                                    className="bg-primary hover:bg-primary/90 text-white px-8 py-6 font-poppins font-semibold"
-                                >
-                                    Start Saving Now
-                                </Button>
-                            </motion.div>
-                        </div>
+                                Start Saving Now
+                            </Button>
+                        </motion.div>
+                    </div>
 
-                        {/* Decorative elements */}
-                        <div className="absolute top-20 left-10 w-20 h-20 bg-primary/10 rounded-full blur-xl"></div>
-                        <div className="absolute bottom-20 right-10 w-32 h-32 bg-secondary/10 rounded-full blur-xl"></div>
-                    </section>
+                    {/* Decorative elements */}
+                    <div className="absolute top-20 left-10 w-20 h-20 bg-primary/10 rounded-full blur-xl"></div>
+                    <div className="absolute bottom-20 right-10 w-32 h-32 bg-secondary/10 rounded-full blur-xl"></div>
+                </section>
 
-                    {/* Trusted By Companies Section */}
-                    <section className="py-12 bg-background">
-                        <div className="container mx-auto px-4">
-                            <div className="max-w-6xl mx-auto text-center">
-                                <div className="mb-10">
-                                    <h2 className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-tight mb-4">
-                                        <span>Trusted by the </span>
-                                        <span className="font-semibold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">world's best</span>
-                                    </h2>
-                                    <p className="font-poppins leading-relaxed text-muted-foreground max-w-2xl mx-auto">
-                                        Join thousands of savvy travelers enjoying massive savings on premium experiences
-                                    </p>
-                                </div>
-                                <TrustedCompanies />
-                            </div>
-                        </div>
-                    </section>
-
-                    {/* Featured Super Savings Section */}
-                    <section className="py-20">
-                        <div className="container mx-auto px-4">
-                            <motion.div
-                                className="text-center mb-12"
-                                initial={{ opacity: 0, y: 20 }}
-                                animate={{ opacity: 1, y: 0 }}
-                                transition={{ duration: 0.6 }}
-                            >
-                                <h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
-                                    <span className="font-light">Featured</span>{' '}
-                                    <span className="pr-2 font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
-                                        Super Savings
-                                    </span>
+                {/* Trusted By Companies Section */}
+                <section className="py-12 bg-background">
+                    <div className="container mx-auto px-4">
+                        <div className="max-w-6xl mx-auto text-center">
+                            <div className="mb-10">
+                                <h2 className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-tight mb-4">
+                                    <span>Trusted by the </span>
+                                    <span className="font-semibold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">world's best</span>
                                 </h2>
-                                <p className="font-poppins leading-relaxed text-gray-600 max-w-2xl mx-auto">
-                                    Check out our biggest discounts and start saving on premium experiences
+                                <p className="font-poppins leading-relaxed text-muted-foreground max-w-2xl mx-auto">
+                                    Join thousands of savvy travelers enjoying massive savings on premium experiences
                                 </p>
-                            </motion.div>
+                            </div>
+                            <TrustedCompanies />
+                        </div>
+                    </div>
+                </section>
 
-                            <div className="container mx-auto px-4 pt-51 pb-16">
-                                <div className="flex gap-8">
-                                    {/* Left Sidebar - Filters */}
-                                    <div className="w-64 flex-shrink-0">
-                                        <Card className="p-8 sticky top-48">
-                                            <div className="space-y-6">
-                                                {/* Search by header */}
-                                                <div className="flex items-center gap-4">
-                                                    <div className="h-0 w-6 border-t-[3px] border-gray-800 rotate-90"></div>
-                                                    <h3 className="font-poppins font-medium text-gray-800">Search by</h3>
-                                                </div>
+                {/* Featured Super Savings Section */}
+                <section className="py-20">
+                    <div className="container mx-auto px-4">
+                        <motion.div
+                            className="text-center mb-12"
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ duration: 0.6 }}
+                        >
+                            <h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
+                                <span className="font-light">Featured</span>{' '}
+                                <span className="pr-2 font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                                    Super Savings
+                                </span>
+                            </h2>
+                            <p className="font-poppins leading-relaxed text-gray-600 max-w-2xl mx-auto">
+                                Check out our biggest discounts and start saving on premium experiences
+                            </p>
+                        </motion.div>
 
-                                                {/* Filter categories */}
-                                                <div className="space-y-4">
-                                                    {filterCategories.map(category => (
-                                                        <div key={category.value} className="flex items-center gap-3">
-                                                            <Checkbox
-                                                                id={category.value}
-                                                                checked={selectedCategories.includes(category.value)}
-                                                                onCheckedChange={() => toggleCategory(category.value)}
-                                                                className="border-gray-400"
-                                                            />
-                                                            <label
-                                                                htmlFor={category.value}
-                                                                className="font-poppins text-sm text-gray-700 cursor-pointer flex-1"
-                                                            >
-                                                                {category.label} ({category.count})
-                                                            </label>
-                                                        </div>
-                                                    ))}
-                                                </div>
+                        <div className="container mx-auto px-4 pt-51 pb-16">
+                            <div className="flex gap-8">
+                                {/* Left Sidebar - Filters */}
+                                <div className="w-64 flex-shrink-0">
+                                    <Card className="p-8 sticky top-48">
+                                        <div className="space-y-6">
+                                            {/* Search by header */}
+                                            <div className="flex items-center gap-4">
+                                                <div className="h-0 w-6 border-t-[3px] border-gray-800 rotate-90"></div>
+                                                <h3 className="font-poppins font-medium text-gray-800">Search by</h3>
                                             </div>
-                                        </Card>
-                                    </div>
 
-                                    {/* Main Content */}
-                                    <div className="flex-1">
-                                        {/* Breadcrumb */}
-                                        <div className="mb-8">
-                                            <p className="font-poppins text-sm text-gray-800">
-                                                {fromSource === 'passes' ? (
-                                                    <>
-                                                        <span>My Profile{'>'}My passes{'>'}</span>
-                                                        <span className="font-semibold">Super Savings</span>
-                                                    </>
-                                                ) : (
-                                                    <>
-                                                        <span>Our Products{'>'}</span>
-                                                        <span className="font-semibold">Super Savings</span>
-                                                    </>
-                                                )}
-                                            </p>
-                                        </div>
-
-                                        {/* Header Section */}
-                                        <div className="mb-8">
-                                            <h1 className="font-poppins md:text-5xl font-medium text-gray-800 leading-tight text-[24px]">
-                                                Super Savings
-                                            </h1>
-                                            <p className="font-poppins text-gray-600 mt-2">
-                                                Exclusive discounts up to 65% off on premium experiences
-                                            </p>
-                                        </div>
-
-                                        {/* Savings Grid */}
-                                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6 mb-16">
-                                            {displayedSavings.map((saving, index) => (
-                                                <motion.div
-                                                    key={saving.id}
-                                                    initial={{ opacity: 0, y: 20 }}
-                                                    animate={{ opacity: 1, y: 0 }}
-                                                    transition={{ duration: 0.5, delay: index * 0.1 }}
-                                                >
-                                                    <Card className="bg-white border border-gray-200 rounded-xl overflow-hidden h-full hover:shadow-lg transition-shadow duration-300 relative">
-                                                        {/* Image */}
-                                                        <div className="relative h-52 bg-gray-300">
-                                                            <ImageWithFallback
-                                                                src={saving.image}
-                                                                alt={saving.title}
-                                                                className="w-full h-full object-cover"
-                                                            />
-                                                            <Button className="absolute bottom-4 right-3 bg-white rounded-full shadow-lg w-9 h-9 p-0 hover:bg-gray-100 transition-colors">
-                                                                <Heart className="w-4 h-4 text-gray-800" />
-                                                            </Button>
-
-                                                            {/* Discount Badge */}
-                                                            <div className="absolute top-4 left-4 bg-primary text-white px-3 py-1.5 rounded-lg">
-                                                                <span className="font-poppins font-semibold text-sm">{saving.discount}</span>
-                                                            </div>
-                                                        </div>
-
-                                                        <CardContent className="space-y-4 px-4 py-4">
-                                                            {/* Business Name */}
-                                                            <div className="flex items-center gap-2">
-                                                                <div className="w-4 h-4 bg-gray-300 rounded"></div>
-                                                                <span className="font-poppins text-sm text-gray-500">{saving.business}</span>
-                                                            </div>
-
-                                                            {/* Title */}
-                                                            <h3 className="font-poppins font-medium text-gray-900 leading-relaxed min-h-[48px]">
-                                                                {saving.title}
-                                                            </h3>
-
-                                                            {/* Saved Amount Display */}
-                                                            <div className="bg-gradient-to-r from-primary/10 to-secondary/10 h-12 flex items-center justify-center rounded-lg">
-                                                                <div className="flex items-center gap-2">
-                                                                    <Percent className="w-4 h-4 text-primary" />
-                                                                    <span className="font-poppins font-semibold text-primary">
-                                                                        {saving.savedAmount}
-                                                                    </span>
-                                                                </div>
-                                                            </div>
-                                                        </CardContent>
-                                                    </Card>
-                                                </motion.div>
-                                            ))}
-                                        </div>
-
-                                        {/* Minimal Pagination */}
-                                        <div className="flex justify-center py-8">
-                                            <div className="flex items-center gap-2">
-                                                <Button
-                                                    variant="outline"
-                                                    size="sm"
-                                                    className="w-8 h-8 p-0 font-poppins"
-                                                    disabled={currentPage_ === 1}
-                                                >
-                                                    <ChevronRight className="w-4 h-4 rotate-180" />
-                                                </Button>
-
-                                                <div className="flex items-center gap-1">
-                                                    {[1, 2, 3].map((page) => (
-                                                        <Button
-                                                            key={page}
-                                                            variant={currentPage_ === page ? "default" : "ghost"}
-                                                            size="sm"
-                                                            className={`w-8 h-8 p-0 font-poppins ${currentPage_ === page ? 'bg-primary hover:bg-primary/90' : ''}`}
-                                                            onClick={() => setCurrentPage_(page)}
+                                            {/* Filter categories */}
+                                            <div className="space-y-4">
+                                                {categories.map((category: any) => (
+                                                    <div key={category.id} className="flex items-center gap-3">
+                                                        <Checkbox
+                                                            id={category.id}
+                                                            checked={categoryId === category.id}
+                                                            onCheckedChange={(checked: boolean) => {
+                                                                if (checked) {
+                                                                    setCategoryId(category.id); // select this category
+                                                                } else {
+                                                                    setCategoryId(null); // unselect if unchecked
+                                                                }
+                                                            }}
+                                                            className="border-gray-400"
+                                                        />
+                                                        <label
+                                                            htmlFor={category.id}
+                                                            className="font-poppins text-sm text-gray-700 cursor-pointer flex-1"
                                                         >
-                                                            {page}
-                                                        </Button>
-                                                    ))}
-                                                </div>
-
-                                                <Button
-                                                    variant="outline"
-                                                    size="sm"
-                                                    className="w-8 h-8 p-0 font-poppins"
-                                                    disabled={currentPage_ === 3}
-                                                >
-                                                    <ChevronRight className="w-4 h-4" />
-                                                </Button>
+                                                            {category.categoryName} ({category.offerCount})
+                                                        </label>
+                                                    </div>
+                                                ))}
                                             </div>
                                         </div>
+                                    </Card>
+                                </div>
+
+                                {/* Main Content */}
+                                <div className="flex-1">
+                                    {/* Breadcrumb */}
+                                    <div className="mb-8">
+                                        <p className="font-poppins text-sm text-gray-800">
+                                            {fromSource === 'passes' ? (
+                                                <>
+                                                    <span>My Profile{'>'}My passes{'>'}</span>
+                                                    <span className="font-semibold">Super Savings</span>
+                                                </>
+                                            ) : (
+                                                <>
+                                                    <span>Our Products{'>'}</span>
+                                                    <span className="font-semibold">Super Savings</span>
+                                                </>
+                                            )}
+                                        </p>
+                                    </div>
+
+                                    {/* Header Section */}
+                                    <div className="mb-8">
+                                        <h1 className="font-poppins md:text-5xl font-medium text-gray-800 leading-tight text-[24px]">
+                                            Super Savings
+                                        </h1>
+                                        <p className="font-poppins text-gray-600 mt-2">
+                                            Exclusive discounts up to 65% off on premium experiences
+                                        </p>
+                                    </div>
+
+                                    {/* Offers Grid */}
+                                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6 mb-16">
+                                        {offers.map((offer: any, index: number) => (
+                                            <motion.div
+                                                key={offer.id}
+                                                initial={{ opacity: 0, y: 20 }}
+                                                animate={{ opacity: 1, y: 0 }}
+                                                transition={{ duration: 0.5, delay: index * 0.1 }}
+                                            >
+                                                <Card className="bg-white border border-gray-200 rounded-xl overflow-hidden h-full hover:shadow-lg transition-shadow duration-300 relative">
+                                                    {/* Image */}
+                                                    <div className="relative h-52 bg-gray-300">
+                                                        <ImageWithFallback
+                                                            src={`${baseUrl}/${offer.websiteBannerImage}`}
+                                                            alt={offer.title}
+                                                            className="w-full h-full object-cover"
+                                                        />
+                                                        {/* <Button className="absolute bottom-4 right-3 bg-white rounded-full shadow-lg w-9 h-9 p-0 hover:bg-gray-100 transition-colors">
+                                                            <Heart className="w-4 h-4 text-gray-800" />
+                                                        </Button> */}
+
+                                                        {/* Discount Badge */}
+                                                        <div className="absolute top-4 left-4 bg-primary text-white px-3 py-1.5 rounded-lg">
+                                                            <span className="font-poppins font-semibold text-sm">{offer.offerCode}</span>
+                                                        </div>
+                                                    </div>
+
+                                                    <CardContent className="space-y-4 px-4 py-4">
+                                                        {/* Business Name */}
+                                                        <div className="flex items-center gap-2">
+                                                            <div className="w-4 h-4 bg-gray-300 rounded"></div>
+                                                            <span className="font-poppins text-sm text-gray-500">{offer.partnerName}</span>
+                                                        </div>
+
+                                                        {/* Title */}
+                                                        <h3 className="font-poppins font-medium text-gray-900 leading-relaxed min-h-[48px]">
+                                                            {offer.description}
+                                                        </h3>
+
+                                                        {/* Saved Amount Display */}
+                                                        <div className="bg-gradient-to-r from-primary/10 to-secondary/10 h-12 flex items-center justify-center rounded-lg">
+                                                            <div className="flex items-center gap-2">
+                                                                {/* <Percent className="w-4 h-4 text-primary" /> */}
+                                                                <span className="font-poppins font-semibold text-primary">
+                                                                    {offer.title}
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                    </CardContent>
+                                                </Card>
+                                            </motion.div>
+                                        ))}
+                                    </div>
+
+                                    {/* Minimal Pagination */}
+                                    <div className="flex justify-center py-8">
+                                        <div className="flex items-center gap-2">
+                                            {/* Previous button */}
+                                            <Button
+                                                variant="outline"
+                                                size="sm"
+                                                className="w-8 h-8 p-0 font-poppins"
+                                                disabled={page === 1}
+                                                onClick={() => setPage(prev => Math.max(prev - 1, 1))}
+                                            >
+                                                <ChevronRight className="w-4 h-4 rotate-180" />
+                                            </Button>
+
+                                            {/* Page numbers */}
+                                            <div className="flex items-center gap-1">
+                                                {Array.from({ length: totalPages }, (_, i) => i + 1).map(p => (
+                                                    <Button
+                                                        key={p}
+                                                        variant={page === p ? "default" : "ghost"}
+                                                        size="sm"
+                                                        className={`w-8 h-8 p-0 font-poppins ${page === p ? 'bg-primary hover:bg-primary/90' : ''}`}
+                                                        onClick={() => setPage(p)}
+                                                    >
+                                                        {p}
+                                                    </Button>
+                                                ))}
+                                            </div>
+
+                                            {/* Next button */}
+                                            <Button
+                                                variant="outline"
+                                                size="sm"
+                                                className="w-8 h-8 p-0 font-poppins"
+                                                disabled={page === totalPages}
+                                                onClick={() => setPage(prev => Math.min(prev + 1, totalPages))}
+                                            >
+                                                <ChevronRight className="w-4 h-4" />
+                                            </Button>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
-
-                            <div className="text-center">
-                                <Button
-                                    onClick={onSignInClick}
-                                    variant="outline"
-                                    className="font-poppins font-medium border-primary text-primary hover:bg-primary hover:text-white"
-                                >
-                                    View All Super Savings
-                                </Button>
-                            </div>
                         </div>
-                    </section>
 
-                    {/* How It Works Section */}
-                    <section className="py-24 relative overflow-hidden bg-[#FFF5F5]/50">
-                        {/* Background decorative elements */}
-                        <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-primary/5 rounded-full blur-[100px] pointer-events-none -mr-40 -mt-40"></div>
-                        <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-primary/5 rounded-full blur-[80px] pointer-events-none -ml-20 -mb-20"></div>
-
-                        <div className="container mx-auto px-4 relative z-10">
-                            <motion.div
-                                className="text-center mb-20"
-                                initial={{ opacity: 0, y: 20 }}
-                                animate={{ opacity: 1, y: 0 }}
-                                transition={{ duration: 0.6 }}
+                        <div className="text-center">
+                            <Button
+                                onClick={onSignInClick}
+                                variant="outline"
+                                className="font-poppins font-medium border-primary text-primary hover:bg-primary hover:text-white"
                             >
-                                <div className="flex items-center justify-center gap-3 mb-4">
-                                    <div className="h-px w-8 bg-primary"></div>
-                                    <span className="text-primary font-semibold tracking-widest uppercase text-xs font-poppins">Simple Process</span>
-                                    <div className="h-px w-8 bg-primary"></div>
-                                </div>
-                                <h2 className="font-merchant text-4xl md:text-5xl lg:text-6xl text-gray-900 mb-6">
-                                    Start Saving in <span className="text-primary italic">Minutes</span>
-                                </h2>
-                                <p className="font-poppins text-lg text-gray-500 font-light max-w-xl mx-auto leading-relaxed">
-                                    Your journey to smarter travel and bigger savings begins with three simple steps.
-                                </p>
-                            </motion.div>
-
-                            <div className="relative max-w-6xl mx-auto">
-                                {/* Connecting line for desktop */}
-                                <div className="hidden md:block absolute top-12 left-[16%] right-[16%] h-0.5 border-t-2 border-dashed border-primary/20 z-0"></div>
-
-                                <div className="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-8">
-                                    {[
-                                        {
-                                            step: '01',
-                                            title: 'Unlock Access',
-                                            description: 'Get your CityCards pass to instantly activate membership perks.',
-                                            icon: MapPinned
-                                        },
-                                        {
-                                            step: '02',
-                                            title: 'Discover Deals',
-                                            description: 'Browse exclusive offers on hotels, flights, and experiences.',
-                                            icon: Search
-                                        },
-                                        {
-                                            step: '03',
-                                            title: 'Enjoy Savings',
-                                            description: 'Redeem discounts instantly and watch your travel budget grow.',
-                                            icon: Percent
-                                        }
-                                    ].map((item, index) => (
-                                        <motion.div
-                                            key={item.step}
-                                            initial={{ opacity: 0, y: 20 }}
-                                            animate={{ opacity: 1, y: 0 }}
-                                            transition={{ duration: 0.5, delay: index * 0.2 }}
-                                            className="relative z-10 group"
-                                        >
-                                            <div className="flex flex-col items-center text-center">
-                                                {/* Icon Container */}
-                                                <div className="relative mb-8">
-                                                    <div className="w-24 h-24 rounded-[2rem] bg-white flex items-center justify-center shadow-[0_8px_30px_rgb(0,0,0,0.06)] group-hover:scale-110 group-hover:-rotate-3 transition-transform duration-300 border border-primary/10 relative overflow-hidden">
-                                                        <div className="absolute inset-0 bg-primary/5 group-hover:bg-primary/10 transition-colors duration-300"></div>
-                                                        <item.icon className="w-10 h-10 text-primary relative z-10" />
-                                                    </div>
-                                                    <div className="absolute -top-3 -right-3 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold font-poppins text-sm border-4 border-white shadow-md">
-                                                        {index + 1}
-                                                    </div>
-                                                </div>
-
-                                                <h3 className="font-merchant text-2xl text-gray-900 mb-3 group-hover:text-primary transition-colors">
-                                                    {item.title}
-                                                </h3>
-                                                <p className="font-poppins text-gray-500 font-light leading-relaxed max-w-xs">
-                                                    {item.description}
-                                                </p>
-                                            </div>
-                                        </motion.div>
-                                    ))}
-                                </div>
-                            </div>
-
-
+                                View All Super Savings
+                            </Button>
                         </div>
-                    </section>
+                    </div>
+                </section>
 
-                    {/* Categories Section */}
-                    <section className="py-24 bg-gray-50/50 relative overflow-hidden">
-                        {/* Abstract Travel Patterns */}
-                        <div className="absolute top-0 right-0 w-[800px] h-[800px] bg-gradient-to-bl from-primary/5 via-secondary/5 to-transparent rounded-full blur-3xl pointer-events-none -mr-40 -mt-40"></div>
+                {/* How It Works Section */}
+                <section className="py-24 relative overflow-hidden bg-[#FFF5F5]/50">
+                    {/* Background decorative elements */}
+                    <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-primary/5 rounded-full blur-[100px] pointer-events-none -mr-40 -mt-40"></div>
+                    <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-primary/5 rounded-full blur-[80px] pointer-events-none -ml-20 -mb-20"></div>
 
-                        <div className="container mx-auto px-4 relative z-10">
-                            {/* Section Header */}
-                            <div className="flex flex-col md:flex-row items-end justify-between mb-12 gap-6">
-                                <motion.div
-                                    className="max-w-2xl"
-                                    initial={{ opacity: 0, x: -20 }}
-                                    animate={{ opacity: 1, x: 0 }}
-                                    transition={{ duration: 0.6 }}
-                                >
-                                    <div className="flex items-center gap-2 mb-4">
-                                        <div className="h-px w-8 bg-primary"></div>
-                                        <span className="text-primary font-semibold tracking-widest uppercase text-xs font-poppins">Explore Collections</span>
-                                    </div>
-                                    <h2 className="font-merchant text-4xl md:text-5xl lg:text-6xl text-gray-900 mb-4 leading-tight">
-                                        Curated for the <span className="text-primary italic">Modern Traveler</span>
-                                    </h2>
-                                    <p className="font-poppins text-lg text-gray-500 font-light max-w-lg leading-relaxed">
-                                        Discover exclusive savings across our most sought-after travel categories.
-                                    </p>
-                                </motion.div>
-
-                                <motion.div
-                                    initial={{ opacity: 0, x: 20 }}
-                                    animate={{ opacity: 1, x: 0 }}
-                                    transition={{ duration: 0.6 }}
-                                    className="hidden md:block"
-                                >
-                                    <Button
-                                        onClick={onSignInClick}
-                                        variant="ghost"
-                                        className="group gap-2 text-gray-600 hover:text-primary font-poppins text-lg"
-                                    >
-                                        View All Categories
-                                        <span className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all duration-300">
-                                            <ChevronRight className="w-4 h-4" />
-                                        </span>
-                                    </Button>
-                                </motion.div>
+                    <div className="container mx-auto px-4 relative z-10">
+                        <motion.div
+                            className="text-center mb-20"
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ duration: 0.6 }}
+                        >
+                            <div className="flex items-center justify-center gap-3 mb-4">
+                                <div className="h-px w-8 bg-primary"></div>
+                                <span className="text-primary font-semibold tracking-widest uppercase text-xs font-poppins">Simple Process</span>
+                                <div className="h-px w-8 bg-primary"></div>
                             </div>
+                            <h2 className="font-merchant text-4xl md:text-5xl lg:text-6xl text-gray-900 mb-6">
+                                Start Saving in <span className="text-primary italic">Minutes</span>
+                            </h2>
+                            <p className="font-poppins text-lg text-gray-500 font-light max-w-xl mx-auto leading-relaxed">
+                                Your journey to smarter travel and bigger savings begins with three simple steps.
+                            </p>
+                        </motion.div>
 
-                            {/* Bento Grid Layout */}
-                            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                                {categoriesData.map((category, index) => (
+                        <div className="relative max-w-6xl mx-auto">
+                            {/* Connecting line for desktop */}
+                            <div className="hidden md:block absolute top-12 left-[16%] right-[16%] h-0.5 border-t-2 border-dashed border-primary/20 z-0"></div>
+
+                            <div className="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-8">
+                                {[
+                                    {
+                                        step: '01',
+                                        title: 'Unlock Access',
+                                        description: 'Get your CityCards pass to instantly activate membership perks.',
+                                        icon: MapPinned
+                                    },
+                                    {
+                                        step: '02',
+                                        title: 'Discover Deals',
+                                        description: 'Browse exclusive offers on hotels, flights, and experiences.',
+                                        icon: Search
+                                    },
+                                    {
+                                        step: '03',
+                                        title: 'Enjoy Savings',
+                                        description: 'Redeem discounts instantly and watch your travel budget grow.',
+                                        icon: Percent
+                                    }
+                                ].map((item, index) => (
                                     <motion.div
-                                        key={category.title}
+                                        key={item.step}
                                         initial={{ opacity: 0, y: 20 }}
                                         animate={{ opacity: 1, y: 0 }}
-                                        transition={{ duration: 0.4, delay: index * 0.1 }}
-                                        className={`${index === 0 ? 'md:col-span-2' : ''} group`}
+                                        transition={{ duration: 0.5, delay: index * 0.2 }}
+                                        className="relative z-10 group"
                                     >
-                                        <div
-                                            onClick={onSignInClick}
-                                            className={`
+                                        <div className="flex flex-col items-center text-center">
+                                            {/* Icon Container */}
+                                            <div className="relative mb-8">
+                                                <div className="w-24 h-24 rounded-[2rem] bg-white flex items-center justify-center shadow-[0_8px_30px_rgb(0,0,0,0.06)] group-hover:scale-110 group-hover:-rotate-3 transition-transform duration-300 border border-primary/10 relative overflow-hidden">
+                                                    <div className="absolute inset-0 bg-primary/5 group-hover:bg-primary/10 transition-colors duration-300"></div>
+                                                    <item.icon className="w-10 h-10 text-primary relative z-10" />
+                                                </div>
+                                                <div className="absolute -top-3 -right-3 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold font-poppins text-sm border-4 border-white shadow-md">
+                                                    {index + 1}
+                                                </div>
+                                            </div>
+
+                                            <h3 className="font-merchant text-2xl text-gray-900 mb-3 group-hover:text-primary transition-colors">
+                                                {item.title}
+                                            </h3>
+                                            <p className="font-poppins text-gray-500 font-light leading-relaxed max-w-xs">
+                                                {item.description}
+                                            </p>
+                                        </div>
+                                    </motion.div>
+                                ))}
+                            </div>
+                        </div>
+
+
+                    </div>
+                </section>
+
+                {/* Categories Section */}
+                <section className="py-24 bg-gray-50/50 relative overflow-hidden">
+                    {/* Abstract Travel Patterns */}
+                    <div className="absolute top-0 right-0 w-[800px] h-[800px] bg-gradient-to-bl from-primary/5 via-secondary/5 to-transparent rounded-full blur-3xl pointer-events-none -mr-40 -mt-40"></div>
+
+                    <div className="container mx-auto px-4 relative z-10">
+                        {/* Section Header */}
+                        <div className="flex flex-col md:flex-row items-end justify-between mb-12 gap-6">
+                            <motion.div
+                                className="max-w-2xl"
+                                initial={{ opacity: 0, x: -20 }}
+                                animate={{ opacity: 1, x: 0 }}
+                                transition={{ duration: 0.6 }}
+                            >
+                                <div className="flex items-center gap-2 mb-4">
+                                    <div className="h-px w-8 bg-primary"></div>
+                                    <span className="text-primary font-semibold tracking-widest uppercase text-xs font-poppins">Explore Collections</span>
+                                </div>
+                                <h2 className="font-merchant text-4xl md:text-5xl lg:text-6xl text-gray-900 mb-4 leading-tight">
+                                    Curated for the <span className="text-primary italic">Modern Traveler</span>
+                                </h2>
+                                <p className="font-poppins text-lg text-gray-500 font-light max-w-lg leading-relaxed">
+                                    Discover exclusive savings across our most sought-after travel categories.
+                                </p>
+                            </motion.div>
+
+                            <motion.div
+                                initial={{ opacity: 0, x: 20 }}
+                                animate={{ opacity: 1, x: 0 }}
+                                transition={{ duration: 0.6 }}
+                                className="hidden md:block"
+                            >
+                                <Button
+                                    onClick={onSignInClick}
+                                    variant="ghost"
+                                    className="group gap-2 text-gray-600 hover:text-primary font-poppins text-lg"
+                                >
+                                    View All Categories
+                                    <span className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all duration-300">
+                                        <ChevronRight className="w-4 h-4" />
+                                    </span>
+                                </Button>
+                            </motion.div>
+                        </div>
+
+                        {/* Bento Grid Layout */}
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                            {categoriesData.map((category, index) => (
+                                <motion.div
+                                    key={category.title}
+                                    initial={{ opacity: 0, y: 20 }}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    transition={{ duration: 0.4, delay: index * 0.1 }}
+                                    className={`${index === 0 ? 'md:col-span-2' : ''} group`}
+                                >
+                                    <div
+                                        onClick={onSignInClick}
+                                        className={`
                       relative h-full bg-white rounded-[2rem] p-8 border border-gray-100 
                       shadow-[0_4px_20px_-4px_rgba(0,0,0,0.05)] hover:shadow-[0_20px_40px_-10px_rgba(0,0,0,0.1)] 
                       transition-all duration-500 cursor-pointer overflow-hidden flex flex-col justify-between
                       group-hover:border-primary/20
                     `}
-                                        >
-                                            {/* Background Gradient Hover */}
-                                            <div className={`absolute inset-0 bg-gradient-to-br ${category.color} opacity-0 group-hover:opacity-[0.03] transition-opacity duration-500`}></div>
+                                    >
+                                        {/* Background Gradient Hover */}
+                                        <div className={`absolute inset-0 bg-gradient-to-br ${category.color} opacity-0 group-hover:opacity-[0.03] transition-opacity duration-500`}></div>
 
-                                            {/* Large Watermark Icon for visual depth */}
-                                            <category.icon className="absolute -bottom-8 -right-8 w-48 h-48 text-gray-50 group-hover:text-primary/5 transition-colors duration-500 -rotate-12" />
+                                        {/* Large Watermark Icon for visual depth */}
+                                        <category.icon className="absolute -bottom-8 -right-8 w-48 h-48 text-gray-50 group-hover:text-primary/5 transition-colors duration-500 -rotate-12" />
 
-                                            <div className="relative z-10">
-                                                <div className="flex justify-between items-start mb-6">
-                                                    <div className={`
+                                        <div className="relative z-10">
+                                            <div className="flex justify-between items-start mb-6">
+                                                <div className={`
                            w-14 h-14 rounded-2xl flex items-center justify-center shadow-sm transition-all duration-300
                            ${index === 0 ? 'bg-primary text-white shadow-primary/20' : 'bg-gray-50 text-gray-600 group-hover:bg-primary group-hover:text-white'}
                          `}>
-                                                        <category.icon className="w-7 h-7" />
-                                                    </div>
-                                                    <Badge className="bg-emerald-50 text-emerald-600 border-emerald-100 font-poppins font-medium px-3 py-1.5">
-                                                        {category.savings}
-                                                    </Badge>
+                                                    <category.icon className="w-7 h-7" />
                                                 </div>
-
-                                                <h3 className={`font-merchant text-gray-900 mb-2 group-hover:text-primary transition-colors ${index === 0 ? 'text-4xl' : 'text-2xl'}`}>
-                                                    {category.title}
-                                                </h3>
-                                                <p className="font-poppins text-gray-500 font-light leading-relaxed max-w-md">
-                                                    {category.description}
-                                                </p>
+                                                <Badge className="bg-emerald-50 text-emerald-600 border-emerald-100 font-poppins font-medium px-3 py-1.5">
+                                                    {category.savings}
+                                                </Badge>
                                             </div>
 
-                                            <div className="relative z-10 mt-8 flex items-center gap-2 text-primary font-poppins font-medium text-sm opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300">
-                                                <span>Explore Deals</span>
-                                                <ArrowLeft className="w-4 h-4 rotate-180" />
-                                            </div>
+                                            <h3 className={`font-merchant text-gray-900 mb-2 group-hover:text-primary transition-colors ${index === 0 ? 'text-4xl' : 'text-2xl'}`}>
+                                                {category.title}
+                                            </h3>
+                                            <p className="font-poppins text-gray-500 font-light leading-relaxed max-w-md">
+                                                {category.description}
+                                            </p>
                                         </div>
-                                    </motion.div>
-                                ))}
-                            </div>
 
-                            {/* Mobile View All Button */}
-                            <div className="mt-8 md:hidden text-center">
-                                <Button
-                                    onClick={onSignInClick}
-                                    className="w-full bg-primary hover:bg-primary/90 text-white font-poppins font-semibold py-6 rounded-xl shadow-lg shadow-primary/20"
-                                >
-                                    Browse All Categories
-                                </Button>
-                            </div>
+                                        <div className="relative z-10 mt-8 flex items-center gap-2 text-primary font-poppins font-medium text-sm opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300">
+                                            <span>Explore Deals</span>
+                                            <ArrowLeft className="w-4 h-4 rotate-180" />
+                                        </div>
+                                    </div>
+                                </motion.div>
+                            ))}
                         </div>
-                    </section>
 
-                    {/* Access Your CityCards Section */}
-                    <section className="py-20 bg-muted/30">
-                        <MobileAppSection />
-                    </section>
+                        {/* Mobile View All Button */}
+                        <div className="mt-8 md:hidden text-center">
+                            <Button
+                                onClick={onSignInClick}
+                                className="w-full bg-primary hover:bg-primary/90 text-white font-poppins font-semibold py-6 rounded-xl shadow-lg shadow-primary/20"
+                            >
+                                Browse All Categories
+                            </Button>
+                        </div>
+                    </div>
+                </section>
+
+                {/* Access Your CityCards Section */}
+                <section className="py-20 bg-muted/30">
+                    <MobileAppSection />
+                </section>
+
+            </div>
+        </Layout>
+    );
 
-                </div>
-            </Layout>
-        );
-    }
 
 }