products and product/slug page done
This commit is contained in:
nabijonovdavronbek619@gmail.com
@@ -71,7 +71,7 @@ export function Navbar() {
|
||||
Services
|
||||
</Link>
|
||||
<Link
|
||||
href="/services"
|
||||
href="/blog"
|
||||
className="block px-4 py-2 text-black text-sm hover:bg-red-600 hover:text-white rounded-b-md"
|
||||
>
|
||||
Blog
|
||||
@@ -80,7 +80,7 @@ export function Navbar() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Link href="/blog" className="text-white text-sm font-semibold hover:text-red-500 transition">
|
||||
<Link href="/products" className="text-white text-sm font-semibold hover:text-red-500 transition">
|
||||
Products
|
||||
</Link>
|
||||
<Link href="/contact" className="text-white text-sm font-semibold hover:text-red-500 transition">
|
||||
|
||||
5
components/pages/products/index.ts
Normal file
5
components/pages/products/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export { ProductBanner } from "./productBanner";
|
||||
export { Products } from "./products";
|
||||
export { SliderComp } from "./slug/slider";
|
||||
export { RightSide } from "./slug/rightSide";
|
||||
export { Features } from "./slug/features";
|
||||
43
components/pages/products/productBanner.tsx
Normal file
43
components/pages/products/productBanner.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
|
||||
|
||||
export function ProductBanner() {
|
||||
return (
|
||||
<section className="relative w-full h-[60vh] min-h-100 overflow-hidden pt-10">
|
||||
{/* Background Image */}
|
||||
<div
|
||||
className="absolute inset-0 z-0"
|
||||
style={{
|
||||
backgroundImage: "url(/images/blog/banner.jpg)",
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Gradient Overlay - Bottom-left to top-right */}
|
||||
<div
|
||||
className="absolute inset-0 z-10"
|
||||
style={{
|
||||
background: `linear-gradient(to top right, #d2610a 0%, #1e1d1ce3 30%, #1e1d1ce3 100%)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="max-w-250 w-full mx-auto px-4">
|
||||
<div className="relative z-20 h-full flex max-lg:flex-col items-start justify-between gap-5 pt-30">
|
||||
<div className="spacw-y-4 ">
|
||||
<DotAnimatsiya />
|
||||
<p
|
||||
className=" bg-linear-to-br from-white via-white to-black
|
||||
text-transparent bg-clip-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty"
|
||||
>
|
||||
Ignum technology <br /> At The Ready
|
||||
</p>
|
||||
</div>
|
||||
<div className="lg:w-[40%] text-gray-300 lg:mt-20 md:mt-10 sm:mt-5 ">
|
||||
It emphasizes that these firefighters are there not just as public
|
||||
servants but as a vital part of the community.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
70
components/pages/products/productCard.tsx
Normal file
70
components/pages/products/productCard.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
"use client";
|
||||
|
||||
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-70 w-[90%] mx-auto overflow-hidden bg-white">
|
||||
<Image
|
||||
src={image || "/placeholder.svg"}
|
||||
alt={title}
|
||||
fill
|
||||
className="object-contain transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
{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>
|
||||
);
|
||||
}
|
||||
24
components/pages/products/products.tsx
Normal file
24
components/pages/products/products.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import ProductCard from "./productCard";
|
||||
|
||||
export function Products() {
|
||||
return (
|
||||
<div className="bg-[#1e1d1c] py-20">
|
||||
<div className="max-w-250 mx-auto w-full sm:-mt-50 -mt-30 z-20 relative">
|
||||
<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"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
components/pages/products/slug/features.tsx
Normal file
27
components/pages/products/slug/features.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
export function Features({ features }: { features: string[] }) {
|
||||
return (
|
||||
<table className="w-full rounded-xl overflow-hidden">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-700 bg-black">
|
||||
<th className="px-4 py-4 md:px-6 text-left text-sm md:text-base font-semibold text-white">
|
||||
Feature
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{features.map((feature, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
className={` border-gray-700 transition-colors hover:bg-opacity-80 ${
|
||||
index % 2 === 0 ? "bg-[#323232]" : "bg-black/20"
|
||||
}`}
|
||||
>
|
||||
<td className="px-4 py-4 md:px-6 text-sm md:text-base text-white font-medium">
|
||||
{feature}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
112
components/pages/products/slug/rightSide.tsx
Normal file
112
components/pages/products/slug/rightSide.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
|
||||
import { Facebook } from "lucide-react";
|
||||
|
||||
const socialLinks = [
|
||||
{ name: "telegram", icon: "✈️", color: "#0088cc" },
|
||||
{ name: "facebook", icon: <Facebook />, color: "#1877F2" },
|
||||
{ name: "odnoklassniki", icon: "ok", color: "#ED7100" },
|
||||
{ name: "vkontakte", icon: "VK", color: "#0077FF" },
|
||||
{ name: "twitter", icon: "𝕏", color: "#1DA1F2" },
|
||||
{ name: "whatsapp", icon: "W", color: "#25D366" },
|
||||
];
|
||||
|
||||
interface RightSideProps {
|
||||
title: string;
|
||||
name: string;
|
||||
description: string;
|
||||
statusText: string;
|
||||
statusColor: string;
|
||||
}
|
||||
|
||||
export function RightSide({
|
||||
title,
|
||||
name,
|
||||
description,
|
||||
statusColor,
|
||||
statusText,
|
||||
}: RightSideProps) {
|
||||
return (
|
||||
<div className="flex flex-col justify-center">
|
||||
{/* Title */}
|
||||
<h1 className="text-xl md:text-2xl lg:text-3xl font-bold text-white mb-4 leading-tight">
|
||||
{title}
|
||||
</h1>
|
||||
|
||||
{/* Article ID */}
|
||||
<div className="mb-3">
|
||||
<p className="text-gray-400">
|
||||
Artikul:
|
||||
<span className="text-white font-semibold">{name}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Status Badge */}
|
||||
<div className="mb-2">
|
||||
<span
|
||||
className={`inline-block py-2 rounded text-sm font-semibold ${statusColor}`}
|
||||
>
|
||||
{statusText}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* description */}
|
||||
<div className="mb-2">
|
||||
<p className="text-sm font-bold text-white mb-4 leading-tight">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Price Section */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-red-700 mb-6">
|
||||
17.00$
|
||||
</h2>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-6">
|
||||
{/* <button
|
||||
onClick={onPriceClick}
|
||||
className="flex-1 bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105"
|
||||
>
|
||||
Narxni bilish
|
||||
</button> */}
|
||||
<button
|
||||
onClick={() => {}}
|
||||
className="flex-1 border-2 border-red-700 text-red-700 hover:bg-red-50 font-bold py-3 px-6 rounded-lg transition duration-300"
|
||||
>
|
||||
Xabar yuborish
|
||||
</button>
|
||||
{/* <button
|
||||
onClick={() => setIsFavorite(!isFavorite)}
|
||||
className="p-3 border-2 border-gray-600 rounded-lg hover:border-red-700 transition duration-300"
|
||||
title="Add to favorites"
|
||||
>
|
||||
<Heart
|
||||
size={24}
|
||||
className={
|
||||
isFavorite ? "fill-red-700 text-red-700" : "text-gray-600"
|
||||
}
|
||||
/>
|
||||
</button> */}
|
||||
</div>
|
||||
|
||||
{/* Social Share Icons */}
|
||||
<div className="flex gap-3 items-center">
|
||||
<div className="flex gap-2">
|
||||
{socialLinks.map((social) => (
|
||||
<a
|
||||
key={social.name}
|
||||
href="#"
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center text-white text-sm font-bold transition duration-300 hover:scale-110"
|
||||
style={{ backgroundColor: social.color }}
|
||||
title={social.name}
|
||||
>
|
||||
{social.icon}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
59
components/pages/products/slug/slider.tsx
Normal file
59
components/pages/products/slug/slider.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Navigation } from "swiper/modules";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import { DATA } from "@/lib/demoData";
|
||||
|
||||
// The custom CSS selectors for navigation
|
||||
const navigationPrevEl = ".custom-swiper-prev";
|
||||
const navigationNextEl = ".custom-swiper-next";
|
||||
|
||||
export function SliderComp({ imgs }: { imgs: string[] }) {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-center relative">
|
||||
<Swiper
|
||||
modules={[Navigation]}
|
||||
navigation={{
|
||||
// Pass the class selectors here
|
||||
prevEl: navigationPrevEl,
|
||||
nextEl: navigationNextEl,
|
||||
}}
|
||||
pagination={{ clickable: true }}
|
||||
className="w-full h-96 md:h-125 bg-white rounded-lg overflow-hidden shadow-lg"
|
||||
>
|
||||
{imgs.map((image, index) => (
|
||||
<SwiperSlide
|
||||
key={index}
|
||||
className="bg-white flex items-center justify-center"
|
||||
>
|
||||
<img
|
||||
src={image || "/placeholder.svg"}
|
||||
alt={`${DATA[0].title} - ${index + 1}`}
|
||||
className="w-full h-full object-contain p-4"
|
||||
/>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
{/* Custom buttons */}
|
||||
<button
|
||||
className={`${navigationPrevEl.replace(
|
||||
".",
|
||||
"",
|
||||
)} absolute z-10 top-1/2 left-5 rounded-sm pb-2 w-8 h-8 bg-primary text-[30px] text-center
|
||||
text-white flex items-center justify-center hover:cursor-pointer transition`}
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<button
|
||||
className={`${navigationNextEl.replace(
|
||||
".",
|
||||
"",
|
||||
)} absolute z-10 top-1/2 right-5 rounded-sm pb-2 w-8 h-8 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:cursor-pointer transition `}
|
||||
>
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user