Add src/app/catalog/page.tsx
This commit is contained in:
147
src/app/catalog/page.tsx
Normal file
147
src/app/catalog/page.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
|
||||
const allProducts = [
|
||||
{
|
||||
id: "1", name: "Qizil Roza Buket", price: "250,000 so'm", imageSrc: "http://img.b2bpic.net/free-photo/beautifully-wrapped-gift-bouquet-roses_169016-8520.jpg?_wi=2", imageAlt: "Premium red rose bouquet", category: "roses", onProductClick: () => (window.location.href = "/catalog/1"),
|
||||
},
|
||||
{
|
||||
id: "2", name: "Tula Aralash", price: "180,000 so'm", imageSrc: "http://img.b2bpic.net/free-photo/side-view-yellow-red-tulip-flower-grey_140725-12248.jpg?_wi=2", imageAlt: "Colorful mixed tulip arrangement", category: "tulips", onProductClick: () => (window.location.href = "/catalog/2"),
|
||||
},
|
||||
{
|
||||
id: "3", name: "Oyoq Buket", price: "220,000 so'm", imageSrc: "http://img.b2bpic.net/free-photo/top-view-sunflowers-frame-with-copy-space_23-2150250788.jpg?_wi=2", imageAlt: "Bright sunflower bouquet", category: "sunflowers", onProductClick: () => (window.location.href = "/catalog/3"),
|
||||
},
|
||||
{
|
||||
id: "4", name: "Oq Lililar", price: "280,000 so'm", imageSrc: "http://img.b2bpic.net/free-photo/side-view-bouquet-peach-cream-color-roses-with-asparagus-grey-wooden-background_141793-7974.jpg?_wi=2", imageAlt: "Elegant white lily arrangement", category: "lilies", onProductClick: () => (window.location.href = "/catalog/4"),
|
||||
},
|
||||
{
|
||||
id: "5", name: "Orchid Elegance", price: "300,000 so'm", imageSrc: "http://img.b2bpic.net/free-photo/beautifully-wrapped-gift-bouquet-roses_169016-8520.jpg?_wi=2", imageAlt: "Elegant orchid bouquet", category: "orchids", onProductClick: () => (window.location.href = "/catalog/5"),
|
||||
},
|
||||
{
|
||||
id: "6", name: "Dahlia Dream", price: "200,000 so'm", imageSrc: "http://img.b2bpic.net/free-photo/side-view-yellow-red-tulip-flower-grey_140725-12248.jpg?_wi=2", imageAlt: "Beautiful dahlia arrangement", category: "dahlias", onProductClick: () => (window.location.href = "/catalog/6"),
|
||||
},
|
||||
{
|
||||
id: "7", name: "Mixed Spring", price: "240,000 so'm", imageSrc: "http://img.b2bpic.net/free-photo/top-view-sunflowers-frame-with-copy-space_23-2150250788.jpg?_wi=2", imageAlt: "Mixed spring flowers", category: "mixed", onProductClick: () => (window.location.href = "/catalog/7"),
|
||||
},
|
||||
{
|
||||
id: "8", name: "Premium Exotic", price: "320,000 so'm", imageSrc: "http://img.b2bpic.net/free-photo/side-view-bouquet-peach-cream-color-roses-with-asparagus-grey-wooden-background_141793-7974.jpg?_wi=2", imageAlt: "Premium exotic bouquet", category: "exotic", onProductClick: () => (window.location.href = "/catalog/8"),
|
||||
},
|
||||
];
|
||||
|
||||
const categories = [
|
||||
{ id: "all", name: "Barchasi" },
|
||||
{ id: "roses", name: "Rozalar" },
|
||||
{ id: "tulips", name: "Tulalar" },
|
||||
{ id: "sunflowers", name: "Oyoqlar" },
|
||||
{ id: "lilies", name: "Lililar" },
|
||||
{ id: "orchids", name: "Orkideya" },
|
||||
{ id: "dahlias", name: "Dalialar" },
|
||||
{ id: "mixed", name: "Aralash" },
|
||||
{ id: "exotic", name: "Ekzotik" },
|
||||
];
|
||||
|
||||
export default function CatalogPage() {
|
||||
const [selectedCategory, setSelectedCategory] = useState("all");
|
||||
|
||||
const filteredProducts =
|
||||
selectedCategory === "all"
|
||||
? allProducts
|
||||
: allProducts.filter((product) => product.category === selectedCategory);
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Fatinur Flowers"
|
||||
navItems={[
|
||||
{ name: "Бош сахифа", id: "/" },
|
||||
{ name: "Каталог", id: "/catalog" },
|
||||
{ name: "Категорияlar", id: "#features" },
|
||||
{ name: "Биз хақимизда", id: "#about" },
|
||||
{ name: "Aloqa", id: "#contact" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="py-20 px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h1 className="text-5xl font-bold text-center mb-4">Gullar Katalogi</h1>
|
||||
<p className="text-center text-lg text-foreground/75 mb-12">
|
||||
Bizning eng chiroyli buketlarni kategoriya bo'yicha tanlang
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-3 justify-center mb-12">
|
||||
{categories.map((category) => (
|
||||
<button
|
||||
key={category.id}
|
||||
onClick={() => setSelectedCategory(category.id)}
|
||||
className={`px-6 py-2 rounded-full font-medium transition-all ${
|
||||
selectedCategory === category.id
|
||||
? "bg-primary-cta text-background"
|
||||
: "bg-card text-foreground border border-foreground/20 hover:border-foreground/40"
|
||||
}`}
|
||||
>
|
||||
{category.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
title={selectedCategory === "all" ? "Barchasi" : categories.find(c => c.id === selectedCategory)?.name}
|
||||
description="Har bir buket sifat va sevgi bilan tayyorlanadi"
|
||||
products={filteredProducts}
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Fatinur Flowers"
|
||||
columns={[
|
||||
{
|
||||
title: "Mahsulotlar", items: [
|
||||
{ label: "Gullar katalogi", href: "/catalog" },
|
||||
{ label: "Eng mashhur buketlar", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Kompaniya", items: [
|
||||
{ label: "Biз haqimizda", href: "/#about" },
|
||||
{ label: "Aloqa", href: "/#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Aloqa", items: [
|
||||
{ label: "Telegram", href: "https://t.me/fatinur_flowers" },
|
||||
{ label: "Instagram", href: "https://instagram.com/fatinur_flowers" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 Fatinur Flowers. Barcha huquqlar himoyalangan."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user