From fe03e0affdc396870079795d28c8c4e5c5c9c456 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 6 Mar 2026 19:41:57 +0000
Subject: [PATCH] Update src/app/brands/page.tsx

---
 src/app/brands/page.tsx | 127 ++++++++++++++++++++--------------------
 1 file changed, 65 insertions(+), 62 deletions(-)

diff --git a/src/app/brands/page.tsx b/src/app/brands/page.tsx
index 1f38cc3..2292035 100644
--- a/src/app/brands/page.tsx
+++ b/src/app/brands/page.tsx
@@ -1,31 +1,40 @@
 'use client';
 
-import { ThemeProvider } from '@/components/ThemeProvider';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+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';
 
+const navItems = [
+  { name: 'Home', id: '/' },
+  { name: 'Brands', id: '/brands' },
+  { name: 'Search', id: '/search' },
+  { name: 'Browse', id: '/browse' },
+];
+
 const brands = [
-  { id: '1', name: 'TechFlow', category: 'Technology', description: 'Leading technology solutions provider' },
-  { id: '2', name: 'Innovate Inc', category: 'Innovation', description: 'Pioneering innovation and design' },
-  { id: '3', name: 'CloudSync', category: 'Cloud Services', description: 'Enterprise cloud infrastructure' },
-  { id: '4', name: 'Design Studio', category: 'Design', description: 'Premium design services' },
-  { id: '5', name: 'Acme Corp', category: 'General', description: 'Comprehensive business solutions' },
-  { id: '6', name: 'Digital Wave', category: 'Digital Marketing', description: 'Digital transformation experts' },
+  { 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' },
 ];
 
 export default function BrandsPage() {
-  const [selectedCategory, setSelectedCategory] = useState<string>('All');
+  const [favorites, setFavorites] = useState<Set<string>>(new Set());
 
-  const navItems = [
-    { name: 'Home', id: '/' },
-    { name: 'Brands', id: '/brands' },
-    { name: 'Search', id: '/search' },
-    { name: 'Browse', id: '/browse' },
-  ];
-
-  const categories = ['All', ...new Set(brands.map((b) => b.category))];
-  const filteredBrands =
-    selectedCategory === 'All' ? brands : brands.filter((b) => b.category === selectedCategory);
+  const handleFavorite = (id: string) => {
+    const newFavorites = new Set(favorites);
+    if (newFavorites.has(id)) {
+      newFavorites.delete(id);
+    } else {
+      newFavorites.add(id);
+    }
+    setFavorites(newFavorites);
+  };
 
   return (
     <ThemeProvider
@@ -34,55 +43,49 @@ export default function BrandsPage() {
       borderRadius="rounded"
       contentWidth="medium"
       sizing="mediumLarge"
-      background="none"
-      cardStyle="solid"
+      background="circleGradient"
+      cardStyle="glass-elevated"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <NavbarStyleApple navItems={navItems} brandName="Brand Hub" />
-      <main className="w-full min-h-screen py-12">
-        <div className="max-w-6xl mx-auto px-4">
-          <div className="mb-12">
-            <h1 className="text-4xl font-bold mb-2">Our Brands</h1>
-            <p className="text-lg text-foreground/70">Discover our collection of premium brands</p>
-          </div>
+      <NavbarLayoutFloatingInline
+        navItems={navItems}
+        brandName="Webild"
+        button={{ text: 'Get Started', href: 'https://example.com' }}
+        animateOnLoad={true}
+      />
 
-          {/* Category Filter */}
-          <div className="mb-8 flex flex-wrap gap-2">
-            {categories.map((category) => (
-              <button
-                key={category}
-                onClick={() => setSelectedCategory(category)}
-                className={`px-4 py-2 rounded-lg transition-colors ${
-                  selectedCategory === category
-                    ? 'bg-primary-cta text-white'
-                    : 'border border-primary-cta text-primary-cta hover:bg-primary-cta/10'
-                }`}
-              >
-                {category}
-              </button>
-            ))}
-          </div>
+      <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>
 
-          {/* Brands Grid */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {filteredBrands.map((brand) => (
-              <div
-                key={brand.id}
-                className="p-6 border border-card rounded-lg hover:shadow-lg transition-all hover:border-primary-cta"
-              >
-                <h3 className="text-xl font-semibold mb-2">{brand.name}</h3>
-                <p className="text-sm text-foreground/60 mb-2">{brand.category}</p>
-                <p className="text-foreground/80 mb-4">{brand.description}</p>
-                <button className="px-4 py-2 bg-primary-cta text-white rounded hover:opacity-80 w-full">
-                  View Brand
-                </button>
-              </div>
-            ))}
-          </div>
-        </div>
-      </main>
+      <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>
+
+      <BlurBottomBackground />
     </ThemeProvider>
   );
 }