251 lines
12 KiB
TypeScript
251 lines
12 KiB
TypeScript
import Link from "next/link";
|
||
import { getPayload } from "payload";
|
||
import config from "@payload-config";
|
||
import { ProductCard } from "@/components/ProductCard";
|
||
|
||
export const dynamic = "force-dynamic";
|
||
|
||
export default async function HomePage() {
|
||
const payload = await getPayload({ config });
|
||
|
||
const { docs: featured } = await payload.find({
|
||
collection: "products",
|
||
limit: 8,
|
||
sort: "-createdAt",
|
||
depth: 1,
|
||
});
|
||
|
||
const { docs: categories } = await payload.find({
|
||
collection: "categories",
|
||
limit: 20,
|
||
where: { parent: { exists: false } },
|
||
sort: "name",
|
||
depth: 0,
|
||
});
|
||
|
||
return (
|
||
<>
|
||
{/* Hero */}
|
||
<section className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-700 text-white">
|
||
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wMyI+PHBhdGggZD0iTTM2IDE4YzMuMzEzIDAgNiAyLjY4NyA2IDZzLTIuNjg3IDYtNiA2LTYtMi42ODctNi02IDIuNjg3LTYgNi02eiIvPjwvZz48L2c+PC9zdmc+')] opacity-50" />
|
||
<div className="relative mx-auto max-w-7xl px-4 py-20 sm:px-6 sm:py-28 lg:px-8 lg:py-36">
|
||
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
|
||
Финские двери
|
||
<span className="block text-amber-400">в Москве и России</span>
|
||
</h1>
|
||
<p className="mt-6 max-w-xl text-lg leading-relaxed text-slate-300">
|
||
Входные и межкомнатные двери KASKI, SWEDOOR by JELD-WEN, ALAVUS.
|
||
Оригинальная продукция с гарантией от производителя. Работаем с 1994
|
||
года.
|
||
</p>
|
||
<div className="mt-10 flex flex-wrap gap-4">
|
||
<Link
|
||
href="/catalog"
|
||
className="rounded-lg bg-amber-500 px-6 py-3.5 font-semibold text-slate-900 shadow-lg shadow-amber-500/25 transition hover:bg-amber-400"
|
||
>
|
||
Каталог дверей
|
||
</Link>
|
||
<Link
|
||
href="/contacts"
|
||
className="rounded-lg border border-white/20 px-6 py-3.5 font-semibold text-white backdrop-blur transition hover:bg-white/10"
|
||
>
|
||
Контакты
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Brands bar */}
|
||
<section className="border-b bg-white py-10">
|
||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||
<div className="flex flex-wrap items-center justify-center gap-x-12 gap-y-4 text-xl font-bold tracking-wide text-slate-300">
|
||
{["KASKI", "SWEDOOR", "JELD-WEN", "ALAVUS", "MATTIOVI", "ABLOY"].map(
|
||
(brand) => (
|
||
<Link
|
||
key={brand}
|
||
href={`/catalog?brand=${brand}`}
|
||
className="transition hover:text-amber-600"
|
||
>
|
||
{brand}
|
||
</Link>
|
||
),
|
||
)}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Categories */}
|
||
{categories.length > 0 && (
|
||
<section className="py-16">
|
||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||
<h2 className="text-center text-2xl font-bold text-slate-900 sm:text-3xl">
|
||
Категории
|
||
</h2>
|
||
<div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||
{categories.map((cat) => (
|
||
<Link
|
||
key={cat.id}
|
||
href={`/catalog?category=${cat.slug}`}
|
||
className="group flex items-center gap-4 rounded-xl border bg-white p-5 shadow-sm transition hover:border-amber-200 hover:shadow-md"
|
||
>
|
||
<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-amber-50 text-amber-600 transition group-hover:bg-amber-100">
|
||
<svg
|
||
className="h-6 w-6"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={1.5}
|
||
d="M3.75 9.75h16.5m-16.5 0A2.25 2.25 0 015.25 7.5h13.5a2.25 2.25 0 012.25 2.25m-16.5 0v7.5A2.25 2.25 0 005.25 19.5h13.5a2.25 2.25 0 002.25-2.25v-7.5"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<span className="font-semibold text-slate-900 group-hover:text-amber-600">
|
||
{cat.name}
|
||
</span>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* Why Finnish doors */}
|
||
<section className="border-t bg-slate-50 py-16">
|
||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||
<h2 className="text-center text-2xl font-bold sm:text-3xl">
|
||
Почему финские двери?
|
||
</h2>
|
||
<div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||
{[
|
||
{
|
||
icon: "M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.047 8.287 8.287 0 009 9.601a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z",
|
||
title: "Теплоизоляция",
|
||
desc: "Коэффициент теплопередачи U ≤ 0,7–1,0 W/m²K — сохраняют тепло в суровом климате.",
|
||
},
|
||
{
|
||
icon: "M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z",
|
||
title: "Надёжность",
|
||
desc: "Каркас из массива сосны, усиленный брусом LVL и листовым алюминием с двух сторон.",
|
||
},
|
||
{
|
||
icon: "M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z",
|
||
title: "Безопасность",
|
||
desc: "Замки Abloy, противовзломные петли, силиконовый уплотнитель по периметру.",
|
||
},
|
||
{
|
||
icon: "M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42",
|
||
title: "Качество отделки",
|
||
desc: "MDF влагостойкий, атмосферная краска. Окраска по каталогам NCS/RAL.",
|
||
},
|
||
{
|
||
icon: "M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z",
|
||
title: "Гарантия",
|
||
desc: "Оригинальная продукция от производителей с гарантией качества.",
|
||
},
|
||
{
|
||
icon: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z",
|
||
title: "Опыт с 1994",
|
||
desc: "Более 30 лет работы с финскими дверями — знаем продукцию досконально.",
|
||
},
|
||
].map((item) => (
|
||
<div
|
||
key={item.title}
|
||
className="rounded-xl border bg-white p-6 shadow-sm"
|
||
>
|
||
<div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-amber-50">
|
||
<svg
|
||
className="h-5 w-5 text-amber-600"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth={1.5}
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
d={item.icon}
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<h3 className="text-lg font-semibold">{item.title}</h3>
|
||
<p className="mt-2 text-sm leading-relaxed text-slate-600">
|
||
{item.desc}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Featured products */}
|
||
{featured.length > 0 && (
|
||
<section className="py-16">
|
||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||
<h2 className="text-center text-2xl font-bold sm:text-3xl">
|
||
Новые поступления
|
||
</h2>
|
||
<div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||
{featured.map((product) => (
|
||
<ProductCard
|
||
key={product.id}
|
||
product={{
|
||
id: product.id,
|
||
slug: product.slug,
|
||
name: product.name,
|
||
articleNumber: product.articleNumber,
|
||
price: product.price,
|
||
discountPrice: product.discountPrice,
|
||
availability: product.availability,
|
||
images: product.images as unknown[],
|
||
}}
|
||
/>
|
||
))}
|
||
</div>
|
||
<div className="mt-10 text-center">
|
||
<Link
|
||
href="/catalog"
|
||
className="inline-flex rounded-lg bg-slate-900 px-8 py-3.5 font-semibold text-white transition hover:bg-slate-800"
|
||
>
|
||
Весь каталог →
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* CTA */}
|
||
<section className="border-t bg-amber-50 py-16">
|
||
<div className="mx-auto max-w-3xl px-4 text-center sm:px-6 lg:px-8">
|
||
<h2 className="text-2xl font-bold sm:text-3xl">
|
||
Нужна консультация?
|
||
</h2>
|
||
<p className="mt-4 text-slate-600">
|
||
Поможем подобрать дверь под ваш проём, рассчитаем стоимость с
|
||
доставкой и установкой.
|
||
</p>
|
||
<div className="mt-8 flex flex-wrap justify-center gap-4">
|
||
<a
|
||
href="tel:+74957181212"
|
||
className="rounded-lg bg-amber-500 px-6 py-3 font-semibold text-slate-900 transition hover:bg-amber-400"
|
||
>
|
||
+7 495 718 1212
|
||
</a>
|
||
<a
|
||
href="https://wa.me/79851232828"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="rounded-lg border border-slate-300 bg-white px-6 py-3 font-semibold text-slate-900 transition hover:bg-slate-50"
|
||
>
|
||
WhatsApp
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</>
|
||
);
|
||
}
|