Update src/app/brands/page.tsx

src/app/brands/page.tsx

@@ -1,91 +1,46 @@
-'use client';
+"use client";
 
-import { ThemeProvider } from '@/components/theme/ThemeProvider';
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import BlurBottomBackground from '@/components/background/BlurBottomBackground';
-import { useState } from 'react';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 
-const navItems = [
-  { name: 'Home', id: '/' },
-  { name: 'Brands', id: '/brands' },
-  { name: 'Search', id: '/search' },
-  { name: 'Browse', id: '/browse' },
-];
-
-const brands = [
-  { id: '1', name: 'Premium Essentials Co', price: 'Featured', imageSrc: '/placeholders/placeholder.jpg', imageAlt: 'Premium Essentials Co' },
-  { id: '2', name: 'Luxury Design Studio', price: 'Featured', imageSrc: '/placeholders/placeholder.jpg', imageAlt: 'Luxury Design Studio' },
-  { id: '3', name: 'TechFlow Innovations', price: 'Featured', imageSrc: '/placeholders/placeholder.jpg', imageAlt: 'TechFlow Innovations' },
-  { id: '4', name: 'Fashion Forward Collective', price: 'Featured', imageSrc: '/placeholders/placeholder.jpg', imageAlt: 'Fashion Forward Collective' },
-  { id: '5', name: 'Eco Conscious Brand', price: 'Featured', imageSrc: '/placeholders/placeholder.jpg', imageAlt: 'Eco Conscious Brand' },
-  { id: '6', name: 'Artisan Marketplace', price: 'Featured', imageSrc: '/placeholders/placeholder.jpg', imageAlt: 'Artisan Marketplace' },
+const testCarImages = [
+  'https://images.unsplash.com/photo-1552519507-da3a142c6e3d?w=800&q=80',
+  'https://images.unsplash.com/photo-1494976866105-d32a481b81b4?w=800&q=80',
+  'https://images.unsplash.com/photo-1527524330007-3ea4e06ed667?w=800&q=80',
 ];
 
 export default function BrandsPage() {
-  const [favorites, setFavorites] = useState<Set<string>>(new Set());
-
-  const handleFavorite = (id: string) => {
-    const newFavorites = new Set(favorites);
-    if (newFavorites.has(id)) {
-      newFavorites.delete(id);
-    } else {
-      newFavorites.add(id);
-    }
-    setFavorites(newFavorites);
-  };
-
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
+      defaultButtonVariant="text-stagger"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
       contentWidth="medium"
-      sizing="mediumLarge"
+      sizing="medium"
       background="circleGradient"
       cardStyle="glass-elevated"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      headingFontWeight="normal"
     >
-      <NavbarLayoutFloatingInline
-        navItems={navItems}
-        brandName="Webild"
-        button={{ text: 'Get Started', href: 'https://example.com' }}
-        animateOnLoad={true}
-      />
-
-      <div id="brands-hero" data-section="brands-hero">
-        <HeroOverlay
-          title="Explore Our Brand Directory"
-          description="Discover curated brands offering premium products and exceptional experiences."
-          tag="Brand Directory"
-          textPosition="center"
-          showBlur={true}
-          buttons={[{ text: 'Back to Home', href: '/' }]}
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Browse", id: "browse" },
+            { name: "Compare", id: "compare" },
+          ]}
+          brandName="Webild"
+          button={{ text: "Search", href: "search" }}
         />
       </div>
 
-      <div id="brands-grid" data-section="brands-grid" className="py-20">
-        <ProductCardOne
-          products={brands.map((brand) => ({
-            ...brand,
-            isFavorited: favorites.has(brand.id),
-            onFavorite: () => handleFavorite(brand.id),
-            onProductClick: () => console.log(`Clicked brand: ${brand.name}`),
-          }))}
-          title="All Brands"
-          description="Browse our complete collection of partner brands"
-          tag="Brands"
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
+      <div className="min-h-screen flex items-center justify-center p-4">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4">Car Brands</h1>
+          <p className="text-lg text-gray-600">Browse all car brands in our database</p>
+        </div>
       </div>
-
-      <BlurBottomBackground />
     </ThemeProvider>
   );
 }