bender/fc56726c-3e3f-41e4-a921-51ecfa3c8806
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Update src/app/brands/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-06 19:41:57 +00:00
parent 621fa0db66
commit fe03e0affd
1 changed files with 65 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/app/brands/page.tsx
View File

@@ -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>
);
}