440 lines
14 KiB
TypeScript
440 lines
14 KiB
TypeScript
"use client";
|
||
import { useState } from "react";
|
||
import {
|
||
Headphones, FileText, Truck, ShieldCheck, CircleDashed,
|
||
Disc,
|
||
Hexagon,
|
||
Settings,
|
||
Wrench,
|
||
Droplets, Square, MoreVertical, Circle, Target, CookingPot, Minus, MessageCircleCheckIcon,
|
||
} from "lucide-react";
|
||
import ProductCard from "@/components/productcard";
|
||
import ArticleCard from "@/components/articlecard";
|
||
import FAQItem from "@/components/faq";
|
||
import { products } from "@/lib/data";
|
||
import { articles } from "@/lib/data";
|
||
import Link from "next/link";
|
||
import { useCategories } from "@/components/context/categoryprovider";
|
||
import { getProducts } from "@/public/src/services/products/api";
|
||
|
||
|
||
|
||
|
||
export default async function Home() {
|
||
const [activeTab, setActiveTab] = useState(0);
|
||
const brands = ["NTN", "KOYO", "NACHI", "TIMKEN", "FAG", "SKF"];
|
||
const latestArticles = articles.slice(-4);
|
||
const { rootCategories } = useCategories();
|
||
const data = await getProducts(1, 20);
|
||
|
||
const products = data.items.map((p: any) => ({
|
||
id: p.id,
|
||
title: p.title,
|
||
brand: p.brand,
|
||
slug: p.slug,
|
||
price: p.calculated_price,
|
||
stock: p.stock,
|
||
image: p.mainImageUrl || "/placeholder.png",
|
||
attributes: p.attributes
|
||
}));
|
||
|
||
const features = [
|
||
{
|
||
icon: Headphones,
|
||
title: "مشاوره فنی رایگان",
|
||
desc: "انتخاب بهترین قطعه با توجه به نیاز شما",
|
||
},
|
||
{
|
||
icon: FileText,
|
||
title: "فاکتور رسمی",
|
||
desc: "صدور فاکتور برای شرکتها",
|
||
},
|
||
{
|
||
icon: Truck,
|
||
title: "ارسال فوری",
|
||
desc: "ارسال در سریعترین زمان ممکن",
|
||
},
|
||
{
|
||
icon: ShieldCheck,
|
||
title: "ضمانت اصالت کالا",
|
||
desc: "تضمین اورجینال بودن محصولات",
|
||
},
|
||
];
|
||
|
||
|
||
const tabs = ["پرفروشترینها", "تخفیفدار", "جدیدترینها"];
|
||
|
||
|
||
const faqs = [
|
||
{
|
||
question: "آیا تمامی قطعات دارای ضمانت اصالت هستند؟",
|
||
answer:
|
||
"بله، تمامی محصولات ارائه شده دارای ضمانت اصالت کالا بوده و از برندهای معتبر جهانی تأمین میشوند.",
|
||
},
|
||
{
|
||
question: "امکان صدور فاکتور رسمی برای شرکتها وجود دارد؟",
|
||
answer:
|
||
"بله، برای تمامی سفارشات امکان صدور فاکتور رسمی وجود دارد.",
|
||
},
|
||
{
|
||
question: "سفارشها چه زمانی ارسال میشوند؟",
|
||
answer:
|
||
"سفارشها در سریعترین زمان ممکن پردازش شده و از طریق روشهای ارسال معتبر ارسال میشوند.",
|
||
},
|
||
];
|
||
|
||
|
||
const categoryIcons = [
|
||
CircleDashed,
|
||
Disc,
|
||
Hexagon,
|
||
Wrench,
|
||
Droplets
|
||
];
|
||
|
||
return (
|
||
<main className=" bg-gray-50">
|
||
|
||
{/* hero section */}
|
||
<section className="bg-[#0b1d36] text-white py-16">
|
||
<div className="container mx-auto text-center">
|
||
{/* Badge */}
|
||
<div className="inline-block border mb-4 px-3 py-2 bg-[#443A27] text-[#ffb900] text-xs rounded-full">
|
||
تأمینکننده برتر قطعات
|
||
</div>
|
||
|
||
{/* Heading */}
|
||
<h1 className=" leading-snug md:text-5xl font-extrabold mb-4">
|
||
تخصصیترین مرجع
|
||
<br></br>
|
||
بلبرینگ و قطعات صنعتی
|
||
</h1>
|
||
|
||
{/* Subtitle */}
|
||
<p className=" text-[15px] text-[#9a9a9a] mb-10">
|
||
|
||
دسترسی به بیش از 10.000 قطعه با ضمانت اصالت کالا
|
||
</p>
|
||
|
||
|
||
</div>
|
||
|
||
</section>
|
||
|
||
{/* hero search */}
|
||
<div className="w-full px-4">
|
||
<div className=" max-w-[70.5rem] mx-auto px-4 bg-white -mt-20 text-gray-800 rounded-2xl shadow-lg p-6 flex flex-col md:flex-row gap-4 md:gap-2 items-center justify-between">
|
||
{/* Filters */}
|
||
<div className="grid grid-cols-1 md:grid-cols-6 w-full gap-4 justify-between">
|
||
|
||
<div className="flex flex-col md:col-span-2">
|
||
<label htmlFor="partNumber" className="text-xs mb-3 text-black font-bold">
|
||
شماره فنی (Part Number)
|
||
</label>
|
||
<input
|
||
id="partNumber"
|
||
type="text"
|
||
placeholder="Part Number"
|
||
className="px-4 py-3 bg-[#f9f9f9] rounded-xl border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-[#e6d3a3]"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex flex-col">
|
||
<label htmlFor="innerDiameter" className="text-xs mb-3 text-black font-bold">
|
||
قطر داخل
|
||
</label>
|
||
<input
|
||
id="innerDiameter"
|
||
type="text"
|
||
placeholder="mm"
|
||
className="px-4 bg-[#f9f9f9] py-3 rounded-xl border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-[#e6d3a3]"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex flex-col">
|
||
<label htmlFor="outerDiameter" className="text-xs mb-3 text-black font-bold">
|
||
قطر خارج
|
||
</label>
|
||
<input
|
||
id="outerDiameter"
|
||
type="text"
|
||
placeholder="mm"
|
||
className="px-4 bg-[#f9f9f9] py-3 rounded-xl border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-[#e6d3a3]"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex flex-col">
|
||
<label htmlFor="thickness" className="text-xs mb-3 text-black font-bold">
|
||
ضخامت
|
||
</label>
|
||
<input
|
||
id="thickness"
|
||
type="text"
|
||
placeholder="mm"
|
||
className="px-4 bg-[#f9f9f9] py-3 rounded-xl border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-[#e6d3a3]"
|
||
/>
|
||
</div>
|
||
|
||
|
||
{/* Button */}
|
||
<button
|
||
className="mt-6 rounded-xl border-2 md:w-auto md:h-auto w-[100px] h-[48px] border-[#e6d3a3] bg-[#ffb900] text-black font-semibold text-xs transition-all hover:bg-[#da9800]">
|
||
جستجوی قطعه
|
||
</button>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
{/* feature cards */}
|
||
<div className="w-full py-6 mt-12">
|
||
<div className="max-w-6xl px-4 mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
{features.map((item, index) => {
|
||
const Icon = item.icon;
|
||
return (
|
||
<div
|
||
key={index}
|
||
className="flex items-center gap-4 px-4 py-7 border bg-white shadow-sm hover:shadow-md transition-shadow duration-300 border-[#e3e3e3] rounded-xl "
|
||
>
|
||
<div className="p-3 bg-gray-100 rounded-lg">
|
||
<Icon size={24} className="text-gray-700" />
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="font-semibold text-gray-800 text-sm">
|
||
{item.title}
|
||
</h3>
|
||
<p className="text-xs text-gray-500">{item.desc}</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* categories card */}
|
||
<section className="w-full py-12 bg-gray-50">
|
||
<div className="max-w-6xl mx-auto px-4">
|
||
|
||
{/* title */}
|
||
<div className="w-full mb-10">
|
||
<div className="flex">
|
||
<h2 className="text-xl font-bold text-gray-800">
|
||
دسته بندی های بلبرینگ
|
||
</h2>
|
||
</div>
|
||
|
||
{/* line */}
|
||
<div className="relative mt-3 h-[2px] bg-gray-200 w-full">
|
||
<div className="absolute right-0 top-0 h-[2px] w-24 bg-yellow-500"></div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
{/* cards */}
|
||
<div className="grid justify-center grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
|
||
|
||
|
||
|
||
{rootCategories.map((cat, index) => {
|
||
const Icon = categoryIcons[index % categoryIcons.length];
|
||
|
||
return (
|
||
<Link
|
||
key={cat.id}
|
||
href={`/category/${cat.slug}`}
|
||
className="bg-white border gap-2 border-gray-200 rounded-xl shadow-sm hover:shadow-md hover:border-blue-400 transition-all duration-300 flex flex-col items-center justify-center py-8 cursor-pointer group"
|
||
>
|
||
<Icon size={34} strokeWidth={1} className="text-gray-400 mb-3 group-hover:text-blue-500 transition-colors" />
|
||
<span className="text-sm font-medium text-gray-700 group-hover:text-blue-600">{cat.name}</span>
|
||
|
||
</Link>
|
||
);
|
||
})}
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* products */}
|
||
<section className="py-12">
|
||
<div className="max-w-6xl mx-auto px-4">
|
||
<div className="items-center justify-between mb-8">
|
||
|
||
{/* title */}
|
||
<div className="flex flex-wrap md:flex-nowrap justify-between w-full mb-4">
|
||
<div className="flex">
|
||
<h3 className="text-xl font-bold text-gray-800">
|
||
پیشنهاد ویژه صنعتی
|
||
</h3>
|
||
</div>
|
||
{/* tabs */}
|
||
<div className="flex mt-6 mb-4 md:mt-0 md:mb-0 gap-8 text-sm">
|
||
{tabs.map((tab, index) => (
|
||
<button
|
||
key={index}
|
||
onClick={() => setActiveTab(index)}
|
||
className={`pb-2 cursor-pointer border-b-2 transition
|
||
${activeTab === index
|
||
? "border-yellow-500 text-black"
|
||
: "border-transparent text-gray-400"
|
||
}`}
|
||
>
|
||
{tab}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* line */}
|
||
<div className="relative mt-3 h-[2px] bg-gray-200 w-full">
|
||
<div className="absolute right-0 top-0 h-[2px] w-24 bg-yellow-500"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||
{products.slice(-4).map((product: any) => (
|
||
<ProductCard key={product.id} product={product} />
|
||
))}
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
{/* blog */}
|
||
<section className="py-16 bg-white">
|
||
<div className="max-w-6xl mx-auto px-4">
|
||
|
||
{/* header */}
|
||
<div className="mb-8">
|
||
<div className="flex justify-between w-full mb-4">
|
||
<h3 className="text-xl font-bold text-gray-800">
|
||
مجله فنی و مهندسی
|
||
</h3>
|
||
|
||
<a className="text-[#ffb900] text-sm cursor-pointer">
|
||
مشاهده آرشیو
|
||
</a>
|
||
</div>
|
||
|
||
<div className="relative h-[2px] bg-gray-200 w-full">
|
||
<div className="absolute right-0 top-0 h-[2px] w-24 bg-yellow-500" />
|
||
</div>
|
||
</div>
|
||
|
||
{/* grid */}
|
||
<div className="grid md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||
{latestArticles.map((article, i) => (
|
||
<ArticleCard key={i} article={article} />
|
||
))}
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
{/* search */}
|
||
<section className="py-16">
|
||
<div className="max-w-6xl mx-auto px-4">
|
||
|
||
<div className="bg-[#0b1e3b] rounded-2xl p-10 flex flex-col lg:flex-row items-center justify-between gap-8 relative overflow-hidden">
|
||
|
||
{/* right content */}
|
||
<div className="text-right text-white max-w-md">
|
||
<h2 className="text-2xl font-bold text-amber-400 mb-3">
|
||
قطعه خاصی مد نظرتان است؟
|
||
</h2>
|
||
|
||
<p className="text-sm text-gray-300 leading-7">
|
||
تیم فنی ما آماده است تا قطعات صنعتی مورد نیاز شما را در سریعترین زمان
|
||
ممکن تأمین کند. مشخصات قطعه را وارد کنید.
|
||
</p>
|
||
|
||
<div className="flex items-center gap-2 mt-3 text-sm text-gray-300">
|
||
<MessageCircleCheckIcon size={16} />
|
||
پاسخگویی سریع در واتساپ
|
||
</div>
|
||
</div>
|
||
|
||
{/* search box */}
|
||
<div className="bg-[#2a3548] p-4 flex-wrap rounded-xl flex items-center gap-3 w-full max-w-xl">
|
||
|
||
<input
|
||
type="text"
|
||
placeholder="شماره تماس"
|
||
className="flex-1 bg-gray-200 rounded-lg md:px-4 px-0 py-3 outline-none text-xs"
|
||
/>
|
||
|
||
<input
|
||
type="text"
|
||
placeholder=" کد فنی قطعه"
|
||
className="flex-1 bg-gray-200 rounded-lg px-0 md:px-4 py-3 outline-none text-xs"
|
||
/>
|
||
|
||
<button className="bg-amber-500 hover:bg-amber-600 text-black px-3 py-3 rounded-lg flex items-center gap-2 text-xs cursor-pointer">
|
||
ثبت درخواست
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* faq */}
|
||
<section className="py-6">
|
||
|
||
<div className="max-w-3xl mx-auto px-4">
|
||
|
||
<h2 className="text-center text-xl font-bold mb-10">
|
||
سوالات پرتکرار مشتریان
|
||
</h2>
|
||
|
||
{/* faq list */}
|
||
<div className="space-y-4">
|
||
{faqs.map((faq, index) => (
|
||
<FAQItem
|
||
key={index}
|
||
question={faq.question}
|
||
answer={faq.answer}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</section>
|
||
|
||
{/* brands */}
|
||
<section className="w-full py-20 px-6">
|
||
<div className="max-w-6xl mx-auto text-center">
|
||
|
||
<h2 className="text-gray-500 text-sm font-semibold mb-10">
|
||
تامین کننده برندهای معتبر جهان
|
||
</h2>
|
||
|
||
<div className="flex flex-wrap justify-center items-center gap-8">
|
||
{brands.map((brand) => (
|
||
<div
|
||
key={brand}
|
||
className="w-40 h-16 flex items-center justify-center border border-gray-200 rounded-md bg-white"
|
||
>
|
||
<span className="text-gray-300 font-semibold tracking-wider text-lg">
|
||
{brand}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
</main>
|
||
);
|
||
}
|