Merge version_2 into main #4
@@ -1,55 +1,20 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Halant } from "next/font/google";
|
||||
import { Inter } from "next/font/google";
|
||||
import { Nunito_Sans } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
|
||||
const halant = Halant({
|
||||
variable: "--font-halant", subsets: ["latin"],
|
||||
weight: ["300", "400", "500", "600", "700"],
|
||||
});
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter", subsets: ["latin"],
|
||||
});
|
||||
|
||||
const nunitoSans = Nunito_Sans({
|
||||
variable: "--font-nunito-sans", subsets: ["latin"],
|
||||
});
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "SWN Streetwear | Premium Hoodies & T-Shirts", description: "Discover authentic urban streetwear. Shop premium hoodies and t-shirts from SWN. Quality crafted pieces for modern style.", keywords: "streetwear, hoodies, t-shirts, urban fashion, premium apparel, SWN", robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
openGraph: {
|
||||
title: "SWN Streetwear | Premium Hoodies & T-Shirts", description: "Discover authentic urban streetwear. Shop premium hoodies and t-shirts from SWN.", type: "website", siteName: "SWN Streetwear", images: [
|
||||
{
|
||||
url: "http://img.b2bpic.net/free-photo/shallow-focus-two-black-men-standing-against-red-wall_181624-56204.jpg", alt: "SWN Streetwear Collection"},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image", title: "SWN Streetwear | Premium Hoodies & T-Shirts", description: "Discover authentic urban streetwear. Shop premium hoodies and t-shirts.", images: [
|
||||
"http://img.b2bpic.net/free-photo/shallow-focus-two-black-men-standing-against-red-wall_181624-56204.jpg"],
|
||||
},
|
||||
};
|
||||
title: "SWN Streetwear", description: "Premium urban fashion and streetwear"};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${halant.variable} ${inter.variable} ${nunitoSans.variable} antialiased`}
|
||||
>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
<html lang="en">
|
||||
<body className={inter.className}>{children}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@@ -1417,7 +1382,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -29,10 +29,8 @@ export default function LandingPage() {
|
||||
<NavbarStyleFullscreen
|
||||
brandName="SWN"
|
||||
navItems={[
|
||||
{ name: "Shop", id: "products" },
|
||||
{ name: "Shop", id: "/products" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Hoodies", id: "hoodies" },
|
||||
{ name: "Tees", id: "tees" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
bottomLeftText="Premium Streetwear"
|
||||
@@ -54,15 +52,17 @@ export default function LandingPage() {
|
||||
testimonials={[
|
||||
{
|
||||
name: "Marcus J.", handle: "Fashion Enthusiast", testimonial: "SWN's quality and design are unmatched. My go-to brand for premium streetwear.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg?_wi=1", imageAlt: "Marcus J."},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg?_wi=1", imageAlt: "Marcus J."
|
||||
},
|
||||
{
|
||||
name: "Alex R.", handle: "Streetwear Collector", testimonial: "Every piece feels like an investment. The attention to detail is incredible.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg?_wi=2", imageAlt: "Alex R."},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg?_wi=2", imageAlt: "Alex R."
|
||||
},
|
||||
]}
|
||||
testimonialRotationInterval={5000}
|
||||
buttons={[
|
||||
{ text: "Shop Now", href: "products" },
|
||||
{ text: "Explore Collection", href: "products" },
|
||||
{ text: "Shop Now", href: "/products" },
|
||||
{ text: "Explore Collection", href: "/products" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
@@ -81,13 +81,16 @@ export default function LandingPage() {
|
||||
products={[
|
||||
{
|
||||
id: "1", brand: "SWN", name: "Classic Black Hoodie", price: "$89.00", rating: 5,
|
||||
reviewCount: "2.3k", imageSrc: "http://img.b2bpic.net/free-photo/shallow-focus-two-black-men-standing-against-red-wall_181624-56204.jpg?_wi=2", imageAlt: "Classic Black Hoodie"},
|
||||
reviewCount: "2.3k", imageSrc: "http://img.b2bpic.net/free-photo/shallow-focus-two-black-men-standing-against-red-wall_181624-56204.jpg?_wi=2", imageAlt: "Classic Black Hoodie"
|
||||
},
|
||||
{
|
||||
id: "2", brand: "SWN", name: "Oversized Gray Tee", price: "$45.00", rating: 5,
|
||||
reviewCount: "1.8k", imageSrc: "http://img.b2bpic.net/free-photo/upset-european-man-white-shirt-with-tattooed-arms-sitting-outdoors_181624-59916.jpg?_wi=1", imageAlt: "Oversized Gray Tee"},
|
||||
reviewCount: "1.8k", imageSrc: "http://img.b2bpic.net/free-photo/upset-european-man-white-shirt-with-tattooed-arms-sitting-outdoors_181624-59916.jpg?_wi=1", imageAlt: "Oversized Gray Tee"
|
||||
},
|
||||
{
|
||||
id: "3", brand: "SWN", name: "Premium White Hoodie", price: "$95.00", rating: 5,
|
||||
reviewCount: "3.1k", imageSrc: "http://img.b2bpic.net/free-photo/positive-sportswoman-wears-sweatshirt-carries-fitness-mat-has-good-mood-after-practicing-yoga-workout-sits-relaxed-outdoors-urban-setting-has-happy-expression-people-active-lifestyle_273609-61335.jpg", imageAlt: "Premium White Hoodie"},
|
||||
reviewCount: "3.1k", imageSrc: "http://img.b2bpic.net/free-photo/positive-sportswoman-wears-sweatshirt-carries-fitness-mat-has-good-mood-after-practicing-yoga-workout-sits-relaxed-outdoors-urban-setting-has-happy-expression-people-active-lifestyle_273609-61335.jpg", imageAlt: "Premium White Hoodie"
|
||||
},
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
@@ -118,16 +121,20 @@ export default function LandingPage() {
|
||||
products={[
|
||||
{
|
||||
id: "p1", brand: "SWN", name: "Essential Black Hoodie", price: "$89.00", rating: 5,
|
||||
reviewCount: "456", imageSrc: "http://img.b2bpic.net/free-photo/shallow-focus-two-black-men-standing-against-red-wall_181624-56204.jpg?_wi=3", imageAlt: "Essential Black Hoodie"},
|
||||
reviewCount: "456", imageSrc: "http://img.b2bpic.net/free-photo/shallow-focus-two-black-men-standing-against-red-wall_181624-56204.jpg?_wi=3", imageAlt: "Essential Black Hoodie"
|
||||
},
|
||||
{
|
||||
id: "p2", brand: "SWN", name: "Classic White Tee", price: "$39.00", rating: 5,
|
||||
reviewCount: "823", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-black-woman-with-afro-curls-hairstylesmiling-hipster-model-white-tshirt-sexy-carefree-female-posing-street-near-brown-wall-cheerful-happy-sunglasses_158538-21447.jpg", imageAlt: "Classic White Tee"},
|
||||
reviewCount: "823", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-black-woman-with-afro-curls-hairstylesmiling-hipster-model-white-tshirt-sexy-carefree-female-posing-street-near-brown-wall-cheerful-happy-sunglasses_158538-21447.jpg", imageAlt: "Classic White Tee"
|
||||
},
|
||||
{
|
||||
id: "p3", brand: "SWN", name: "Charcoal Grey Hoodie", price: "$89.00", rating: 5,
|
||||
reviewCount: "612", imageSrc: "http://img.b2bpic.net/free-photo/young-male-performer-dancing-building-stairs_23-2149344057.jpg", imageAlt: "Charcoal Grey Hoodie"},
|
||||
reviewCount: "612", imageSrc: "http://img.b2bpic.net/free-photo/young-male-performer-dancing-building-stairs_23-2149344057.jpg", imageAlt: "Charcoal Grey Hoodie"
|
||||
},
|
||||
{
|
||||
id: "p4", brand: "SWN", name: "Minimalist Black Tee", price: "$42.00", rating: 5,
|
||||
reviewCount: "734", imageSrc: "http://img.b2bpic.net/free-photo/upset-european-man-white-shirt-with-tattooed-arms-sitting-outdoors_181624-59916.jpg?_wi=2", imageAlt: "Minimalist Black Tee"},
|
||||
reviewCount: "734", imageSrc: "http://img.b2bpic.net/free-photo/upset-european-man-white-shirt-with-tattooed-arms-sitting-outdoors_181624-59916.jpg?_wi=2", imageAlt: "Minimalist Black Tee"
|
||||
},
|
||||
]}
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
@@ -144,7 +151,8 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"Highsnobiety", "Hypebeast", "Complex", "Sneaker News", "Grailed", "The Source", "Sole Collector", "Hundreds"]}
|
||||
"Highsnobiety", "Hypebeast", "Complex", "Sneaker News", "Grailed", "The Source", "Sole Collector", "Hundreds"
|
||||
]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
buttonAnimation="slide-up"
|
||||
@@ -162,17 +170,23 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1", name: "Jordan Lee", handle: "@streetwear.daily", testimonial: "SWN's hoodies are game-changers. The fit, comfort, and quality are exceptional. Worth every penny.", imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg?_wi=3", imageAlt: "Jordan Lee"},
|
||||
id: "t1", name: "Jordan Lee", handle: "@streetwear.daily", testimonial: "SWN's hoodies are game-changers. The fit, comfort, and quality are exceptional. Worth every penny.", imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg?_wi=3", imageAlt: "Jordan Lee"
|
||||
},
|
||||
{
|
||||
id: "t2", name: "Casey Chen", handle: "@fashion.curator", testimonial: "Finally found a brand that understands true streetwear. SWN delivers authentic style without gimmicks.", imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg?_wi=4", imageAlt: "Casey Chen"},
|
||||
id: "t2", name: "Casey Chen", handle: "@fashion.curator", testimonial: "Finally found a brand that understands true streetwear. SWN delivers authentic style without gimmicks.", imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg?_wi=4", imageAlt: "Casey Chen"
|
||||
},
|
||||
{
|
||||
id: "t3", name: "Samara Williams", handle: "@style.influencer", testimonial: "The customer service is incredible. They actually care about their product and their customers.", imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg?_wi=5", imageAlt: "Samara Williams"},
|
||||
id: "t3", name: "Samara Williams", handle: "@style.influencer", testimonial: "The customer service is incredible. They actually care about their product and their customers.", imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg?_wi=5", imageAlt: "Samara Williams"
|
||||
},
|
||||
{
|
||||
id: "t4", name: "Tyler Kim", handle: "@urban.aesthetic", testimonial: "Every release sells out for a reason. SWN pieces hold their value and style for years.", imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg?_wi=6", imageAlt: "Tyler Kim"},
|
||||
id: "t4", name: "Tyler Kim", handle: "@urban.aesthetic", testimonial: "Every release sells out for a reason. SWN pieces hold their value and style for years.", imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg?_wi=6", imageAlt: "Tyler Kim"
|
||||
},
|
||||
{
|
||||
id: "t5", name: "Aisha Rodriguez", handle: "@minimalist.fashion", testimonial: "Perfect minimalist designs with premium quality. SWN is my wardrobe staple now.", imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg?_wi=7", imageAlt: "Aisha Rodriguez"},
|
||||
id: "t5", name: "Aisha Rodriguez", handle: "@minimalist.fashion", testimonial: "Perfect minimalist designs with premium quality. SWN is my wardrobe staple now.", imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg?_wi=7", imageAlt: "Aisha Rodriguez"
|
||||
},
|
||||
{
|
||||
id: "t6", name: "Marco Davos", handle: "@collector.mindset", testimonial: "As a collector, I appreciate the attention to detail and craftsmanship in every piece. Highly recommend.", imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg?_wi=8", imageAlt: "Marco Davos"},
|
||||
id: "t6", name: "Marco Davos", handle: "@collector.mindset", testimonial: "As a collector, I appreciate the attention to detail and craftsmanship in every piece. Highly recommend.", imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg?_wi=8", imageAlt: "Marco Davos"
|
||||
},
|
||||
]}
|
||||
speed={40}
|
||||
topMarqueeDirection="left"
|
||||
@@ -205,10 +219,10 @@ export default function LandingPage() {
|
||||
columns={[
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "Hoodies", href: "#hoodies" },
|
||||
{ label: "T-Shirts", href: "#tees" },
|
||||
{ label: "New Arrivals", href: "#products" },
|
||||
{ label: "All Products", href: "#products" },
|
||||
{ label: "Hoodies", href: "/products" },
|
||||
{ label: "T-Shirts", href: "/products" },
|
||||
{ label: "New Arrivals", href: "/products" },
|
||||
{ label: "All Products", href: "/products" },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -233,4 +247,4 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
164
src/app/products/page.tsx
Normal file
164
src/app/products/page.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import { Package } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ProductsPage() {
|
||||
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
||||
|
||||
const allProducts = [
|
||||
// Hoodies
|
||||
{
|
||||
id: "h1", name: "Classic Black Hoodie", price: "$89.00", variant: "Black 3 Colors", imageSrc: "http://img.b2bpic.net/free-photo/shallow-focus-two-black-men-standing-against-red-wall_181624-56204.jpg?_wi=1", imageAlt: "Classic Black Hoodie", category: "hoodies"},
|
||||
{
|
||||
id: "h2", name: "Premium White Hoodie", price: "$95.00", variant: "White 2 Colors", imageSrc: "http://img.b2bpic.net/free-photo/positive-sportswoman-wears-sweatshirt-carries-fitness-mat-has-good-mood-after-practicing-yoga-workout-sits-relaxed-outdoors-urban-setting-has-happy-expression-people-active-lifestyle_273609-61335.jpg", imageAlt: "Premium White Hoodie", category: "hoodies"},
|
||||
{
|
||||
id: "h3", name: "Charcoal Grey Hoodie", price: "$89.00", variant: "Grey 4 Colors", imageSrc: "http://img.b2bpic.net/free-photo/young-male-performer-dancing-building-stairs_23-2149344057.jpg", imageAlt: "Charcoal Grey Hoodie", category: "hoodies"},
|
||||
{
|
||||
id: "h4", name: "Navy Blue Hoodie", price: "$92.00", variant: "Navy 2 Colors", imageSrc: "http://img.b2bpic.net/free-photo/upset-european-man-white-shirt-with-tattooed-arms-sitting-outdoors_181624-59916.jpg?_wi=1", imageAlt: "Navy Blue Hoodie", category: "hoodies"},
|
||||
// T-Shirts
|
||||
{
|
||||
id: "t1", name: "Oversized Gray Tee", price: "$45.00", variant: "Gray 5 Colors", imageSrc: "http://img.b2bpic.net/free-photo/upset-european-man-white-shirt-with-tattooed-arms-sitting-outdoors_181624-59916.jpg?_wi=2", imageAlt: "Oversized Gray Tee", category: "tees"},
|
||||
{
|
||||
id: "t2", name: "Classic White Tee", price: "$39.00", variant: "White 3 Colors", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-black-woman-with-afro-curls-hairstylesmiling-hipster-model-white-tshirt-sexy-carefree-female-posing-street-near-brown-wall-cheerful-happy-sunglasses_158538-21447.jpg", imageAlt: "Classic White Tee", category: "tees"},
|
||||
{
|
||||
id: "t3", name: "Minimalist Black Tee", price: "$42.00", variant: "Black 2 Colors", imageSrc: "http://img.b2bpic.net/free-photo/upset-european-man-white-shirt-with-tattooed-arms-sitting-outdoors_181624-59916.jpg?_wi=3", imageAlt: "Minimalist Black Tee", category: "tees"},
|
||||
{
|
||||
id: "t4", name: "Vintage Navy Tee", price: "$48.00", variant: "Navy 4 Colors", imageSrc: "http://img.b2bpic.net/free-photo/shallow-focus-two-black-men-standing-against-red-wall_181624-56204.jpg?_wi=3", imageAlt: "Vintage Navy Tee", category: "tees"},
|
||||
];
|
||||
|
||||
const displayedProducts = selectedCategory
|
||||
? allProducts.filter((p) => p.category === selectedCategory)
|
||||
: allProducts;
|
||||
|
||||
const hoodieCount = allProducts.filter((p) => p.category === "hoodies").length;
|
||||
const teeCount = allProducts.filter((p) => p.category === "tees").length;
|
||||
|
||||
const products = displayedProducts.map((p) => ({
|
||||
id: p.id,
|
||||
name: p.name,
|
||||
price: p.price,
|
||||
variant: p.variant,
|
||||
imageSrc: p.imageSrc,
|
||||
imageAlt: p.imageAlt,
|
||||
}));
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
brandName="SWN"
|
||||
navItems={[
|
||||
{ name: "Shop", id: "/products" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
bottomLeftText="Premium Streetwear"
|
||||
bottomRightText="shop@swn.co"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ paddingTop: "120px", paddingBottom: "60px" }}>
|
||||
<div className="w-full max-w-[90vw] mx-auto px-4 md:px-8">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-2">Our Products</h1>
|
||||
<p className="text-lg text-gray-600">Browse our complete collection of premium hoodies and t-shirts</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 mb-12 flex-wrap">
|
||||
<button
|
||||
onClick={() => setSelectedCategory(null)}
|
||||
className={`px-6 py-2 rounded-full font-medium transition-all ${
|
||||
selectedCategory === null
|
||||
? "bg-black text-white"
|
||||
: "bg-gray-200 text-black hover:bg-gray-300"
|
||||
}`}
|
||||
>
|
||||
All Products ({allProducts.length})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedCategory("hoodies")}
|
||||
className={`px-6 py-2 rounded-full font-medium transition-all ${
|
||||
selectedCategory === "hoodies"
|
||||
? "bg-black text-white"
|
||||
: "bg-gray-200 text-black hover:bg-gray-300"
|
||||
}`}
|
||||
>
|
||||
Hoodies ({hoodieCount})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedCategory("tees")}
|
||||
className={`px-6 py-2 rounded-full font-medium transition-all ${
|
||||
selectedCategory === "tees"
|
||||
? "bg-black text-white"
|
||||
: "bg-gray-200 text-black hover:bg-gray-300"
|
||||
}`}
|
||||
>
|
||||
T-Shirts ({teeCount})
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
title=""
|
||||
description=""
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
products={products}
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer" style={{ marginTop: "80px" }}>
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "Hoodies", href: "/products?category=hoodies" },
|
||||
{ label: "T-Shirts", href: "/products?category=tees" },
|
||||
{ label: "New Arrivals", href: "/products" },
|
||||
{ label: "All Products", href: "/products" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/#about" },
|
||||
{ label: "Contact", href: "/#contact" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping Info", href: "#" },
|
||||
{ label: "Returns", href: "#" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "FAQ", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 SWN Streetwear. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user