catalog part is done
This commit is contained in:
nabijonovdavronbek619@gmail.com
@@ -2,7 +2,7 @@ import "./back.css";
|
||||
|
||||
export default function BackAnimatsiya() {
|
||||
return (
|
||||
<div className="fixed inset-0 w-full h-full flex items-center justify-center pointer-events-none z-0 opacity-50">
|
||||
<div className="fixed inset-0 w-full h-full flex items-center justify-center pointer-events-none z-0 opacity-10">
|
||||
<svg
|
||||
id="Layer_2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@@ -1,40 +1,13 @@
|
||||
import Image from "next/image";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
|
||||
import { useTranslations } from "next-intl";
|
||||
import ProductCard from "../products/productCard";
|
||||
import { ProductCatalog } from "@/lib/demoData";
|
||||
import CatalogCard from "../products/catalog";
|
||||
|
||||
export function Blog() {
|
||||
const t = useTranslations();
|
||||
const blogPosts = [
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/img14.webp",
|
||||
category: "Tips & Trick",
|
||||
title: t("home.blog.articles.article1"),
|
||||
author: "John Doe",
|
||||
date: "July 24, 2025",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/img15.webp",
|
||||
category: "Insight",
|
||||
title: t("home.blog.articles.article2"),
|
||||
author: "John Doe",
|
||||
date: "July 24, 2025",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/img16.webp",
|
||||
category: "News",
|
||||
title: t("home.blog.articles.article3"),
|
||||
author: "John Doe",
|
||||
date: "July 24, 2025",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="bg-[#1f1f1f] py-45">
|
||||
<section className="bg-[#1f1f1f] py-30">
|
||||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<div className="mb-12 text-center">
|
||||
@@ -53,57 +26,16 @@ export function Blog() {
|
||||
</div>
|
||||
|
||||
{/* Blog Cards Grid */}
|
||||
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3 max-sm:place-items-center">
|
||||
{/* {blogPosts.map((post) => (
|
||||
<article key={post.id} className="group">
|
||||
|
||||
<div className="relative mb-6 aspect-4/2 md:aspect-4/3 overflow-hidden rounded-lg">
|
||||
<Image
|
||||
src={post.image || "/placeholder.svg"}
|
||||
alt={post.title}
|
||||
fill
|
||||
className="object-cover transition-transform duration-300 group-hover:scale-105"
|
||||
/>
|
||||
|
||||
<div className="absolute bottom-4 left-4">
|
||||
<span className="font-almarai rounded bg-red-600 px-4 py-2 text-sm font-medium text-white">
|
||||
{post.category}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-unbounded uppercase mb-3 text-lg font-bold leading-tight tracking-wide text-white md:text-xl">
|
||||
{post.title}
|
||||
</h3>
|
||||
<p className="font-almarai mb-4 text-sm text-gray-400">
|
||||
<span className="text-gray-500">by </span>
|
||||
<span className="text-white">{post.author}</span>
|
||||
<span className="mx-2 text-gray-500">•</span>
|
||||
<span className="text-gray-400">{post.date}</span>
|
||||
</p>
|
||||
<a
|
||||
href="#"
|
||||
className="font-almarai inline-flex items-center gap-1 text-sm font-semibold tracking-wider text-red-600 uppercase transition-colors hover:text-red-500"
|
||||
>
|
||||
{t("home.blog.readMore")}
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
))} */}
|
||||
{Array(3)
|
||||
.fill(null)
|
||||
.map((_, index) => (
|
||||
<ProductCard
|
||||
key={index}
|
||||
title="Elektr yong'in detektori-Ypres ver.2"
|
||||
name="P-0834404"
|
||||
image="/images/products/products.webp"
|
||||
slug="P_0834404"
|
||||
status="full"
|
||||
/>
|
||||
))}
|
||||
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3 place-items-center">
|
||||
{ProductCatalog.map((item, index) => (
|
||||
<CatalogCard
|
||||
key={index}
|
||||
id={item.id}
|
||||
title={item.title}
|
||||
description={item.description}
|
||||
image={item.image}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
133
components/pages/products/catalog.tsx
Normal file
133
components/pages/products/catalog.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
// import { useTranslations } from "next-intl";
|
||||
// import Image from "next/image";
|
||||
// import Link from "next/link";
|
||||
|
||||
// interface CatalogProps {
|
||||
// image: string;
|
||||
// title: string;
|
||||
// slug: string;
|
||||
// description: string;
|
||||
// id:string;
|
||||
// }
|
||||
|
||||
// export default function CatalogCard({
|
||||
// image,
|
||||
// title,
|
||||
// slug,
|
||||
// description,
|
||||
// id,
|
||||
// }: CatalogProps) {
|
||||
// const t = useTranslations();
|
||||
// return (
|
||||
// <Link
|
||||
// href={`/products?category=${id}`}
|
||||
// className="group h-118 flex flex-col items-center justify-start" // Added 'group' here
|
||||
// >
|
||||
// <div className="h-full flex flex-col justify-between group-hover:scale-105 transition ease-in-out">
|
||||
// <p className="text-white text-2xl font-unbounded font-semibold text-center transition-colors">
|
||||
// {title}
|
||||
// </p>
|
||||
// <p className="text-white/50 font-almarai font-medium text-center">
|
||||
// {t(`${description}`)}
|
||||
// </p>
|
||||
// <Image
|
||||
// src={image}
|
||||
// alt="image"
|
||||
// width={400}
|
||||
// height={90}
|
||||
// className="h-90! rounded-xl object-contain bg-[#444242] transition-colors duration-300" // Added smooth transition
|
||||
// />
|
||||
// </div>
|
||||
// </Link>
|
||||
// );
|
||||
// }
|
||||
|
||||
// bg-[#444242]
|
||||
"use client";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { ArrowUpRight } from "lucide-react";
|
||||
|
||||
interface CatalogProps {
|
||||
id: string;
|
||||
image: string;
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export default function CatalogCard({
|
||||
image,
|
||||
title,
|
||||
description,
|
||||
id,
|
||||
}: CatalogProps) {
|
||||
const t = useTranslations();
|
||||
const locale = useLocale();
|
||||
console.log("category id: ", id);
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={`/${locale}/products?category=${id}`}
|
||||
className="group relative h-[450px] w-full overflow-hidden rounded-2xl bg-linear-to-br from-[#444242] to-black border border-white/10 transition-all duration-500 hover:border-red-500/50 hover:-translate-y-1"
|
||||
>
|
||||
{/* Background glow effect */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-red-600/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
|
||||
{/* Decorative corner accent */}
|
||||
<div className="absolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-red-500/20 to-transparent rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
|
||||
{/* Content container */}
|
||||
<div className="relative h-full flex flex-col p-6">
|
||||
{/* Title section */}
|
||||
<div className="mb-4">
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<h3 className="text-2xl font-unbounded font-bold text-white leading-tight group-hover:text-red-400 transition-colors duration-300">
|
||||
{title}
|
||||
</h3>
|
||||
<div className="shrink-0 w-8 h-8 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-red-500 transition-all duration-300 group-hover:scale-110">
|
||||
<ArrowUpRight className="w-4 h-4 text-white" strokeWidth={2.5} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-sm font-almarai text-white/60 line-clamp-2 group-hover:text-white/80 transition-colors duration-300">
|
||||
{t(description)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Image container with elegant frame */}
|
||||
<div className="relative flex-1 rounded-xl overflow-hidden bg-gradient-to-br from-[#444242] to-gray-900/50 border border-white/5 group-hover:border-white/20 transition-all duration-500">
|
||||
{/* Animated gradient overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent z-10" />
|
||||
|
||||
{/* Image */}
|
||||
<div className="relative w-full h-full">
|
||||
<Image
|
||||
src={image}
|
||||
alt={title}
|
||||
fill
|
||||
className="object-contain p-4 transition-transform duration-700 group-hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Hover shimmer effect */}
|
||||
{/* <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000" />
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
{/* Bottom accent bar */}
|
||||
<div className="mt-4 h-1 w-0 bg-gradient-to-r from-red-500 to-red-600 group-hover:w-full transition-all duration-500 rounded-full" />
|
||||
</div>
|
||||
|
||||
{/* Subtle noise texture overlay */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-[0.03] mix-blend-overlay"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' /%3E%3C/svg%3E")`,
|
||||
}}
|
||||
/>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -2,41 +2,23 @@
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
|
||||
interface ProductCardProps {
|
||||
title: string;
|
||||
name: string;
|
||||
image: string;
|
||||
slug: string;
|
||||
status: "full" | "empty" | "withOrder";
|
||||
}
|
||||
|
||||
export default function ProductCard({
|
||||
title,
|
||||
name,
|
||||
image,
|
||||
slug,
|
||||
status,
|
||||
}: ProductCardProps) {
|
||||
const statusColor =
|
||||
status === "full"
|
||||
? "text-green-500"
|
||||
: status === "empty"
|
||||
? "text-red-600"
|
||||
: "text-yellow-800";
|
||||
|
||||
const statusText =
|
||||
status === "full"
|
||||
? "Sotuvda mavjud"
|
||||
: status === "empty"
|
||||
? "Sotuvda qolmagan"
|
||||
: "Buyurtma asosida";
|
||||
return (
|
||||
<Link href={`/products/${slug}`}>
|
||||
<article className="group transition-all duration-300 hover:cursor-pointer max-sm:max-w-100 max-sm:mx-auto max-sm:w-full ">
|
||||
{/* Image Container */}
|
||||
<div className="relative rounded-2xl h-45 sm:h-55 md:h-65 lg:w-[95%] w-[90%] mx-auto overflow-hidden bg-white">
|
||||
<div className="relative rounded-2xl h-45 sm:h-55 md:h-65 lg:w-[95%] w-[90%] mx-auto overflow-hidden">
|
||||
<Image
|
||||
src={image || "/placeholder.svg"}
|
||||
alt={title}
|
||||
@@ -48,21 +30,9 @@ export default function ProductCard({
|
||||
{/* Content Container */}
|
||||
<div className="p-6 sm:p-4">
|
||||
{/* Title */}
|
||||
<h3 className="text-lg sm:text-xl md:text-2xl font-bold text-white mb-4 line-clamp-3 group-hover:text-red-400 transition-colors duration-300">
|
||||
<h3 className="text-lg text-center sm:text-xl md:text-2xl font-bold text-white mb-4 line-clamp-3 group-hover:text-red-400 transition-colors duration-300">
|
||||
{title}
|
||||
</h3>
|
||||
|
||||
{/* Meta Information */}
|
||||
<div className="flex flex-col items-start gap-0 text-gray-400 text-sm sm:text-base mb-6">
|
||||
<span className="font-medium">{name}</span>
|
||||
<span className={`font-medium ${statusColor}`}>{statusText}</span>
|
||||
</div>
|
||||
|
||||
{/* Read More Link */}
|
||||
<span className="inline-flex items-center gap-2 text-red-600 font-bold text-base sm:text-lg uppercase tracking-wide hover:gap-4 transition-all duration-300 group/link">
|
||||
Read More
|
||||
<ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover/link:translate-x-1" />
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
</Link>
|
||||
|
||||
@@ -1,31 +1,45 @@
|
||||
import { ca, lede, slt } from "@/lib/demoData";
|
||||
import Filter from "./filter";
|
||||
import FilterInfo from "./filterInfo";
|
||||
import ProductCard from "./productCard";
|
||||
|
||||
export function Products() {
|
||||
// slt , ca , lede
|
||||
|
||||
export function Products({ categoryName }: { categoryName: string | null }) {
|
||||
console.log("category name: ",categoryName)
|
||||
const getProducts = () => {
|
||||
switch (categoryName) {
|
||||
case "slt":
|
||||
return slt;
|
||||
case "ca":
|
||||
return ca;
|
||||
case "lede":
|
||||
return lede;
|
||||
default:
|
||||
return [...slt, ...ca, ...lede];
|
||||
}
|
||||
};
|
||||
|
||||
const products = getProducts();
|
||||
return (
|
||||
<div className="bg-[#1e1d1c] py-20">
|
||||
<div className="max-w-300 mx-auto w-full z-20 relative">
|
||||
<div className="flex items-start gap-5">
|
||||
{/* filter part */}
|
||||
<Filter/>
|
||||
<Filter />
|
||||
|
||||
{/* main products */}
|
||||
<div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
|
||||
{Array(9)
|
||||
.fill(null)
|
||||
.map((_, index) => (
|
||||
<ProductCard
|
||||
key={index}
|
||||
title="Elektr yong'in detektori-Ypres ver.2"
|
||||
name="P-0834404"
|
||||
image="/images/products/products.webp"
|
||||
slug="P_0834404"
|
||||
status="full"
|
||||
/>
|
||||
))}
|
||||
{products.map((item, index) => (
|
||||
<ProductCard
|
||||
key={index}
|
||||
title={item.name}
|
||||
image={item.image}
|
||||
slug={item.slug}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<FilterInfo/>
|
||||
<FilterInfo />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user