You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.9 KiB
51 lines
1.9 KiB
import React from "react";
|
|
import type { Floor } from "../types";
|
|
import { ProductCard } from "./ProductCard";
|
|
|
|
interface ProductsSectionProps {
|
|
data: Floor;
|
|
basePath?: string;
|
|
}
|
|
|
|
export function ProductsSection({ data, basePath = "" }: ProductsSectionProps) {
|
|
const heroTitle = data.hero?.title ?? data.title;
|
|
const heroEyebrow = data.hero?.eyebrow;
|
|
const heroDescription = data.hero?.description ?? data.hero?.subtitle;
|
|
|
|
return (
|
|
<section className="relative bg-[#f5f7fb] text-[#0f1f39]">
|
|
<div className="absolute inset-0">
|
|
<div className="pointer-events-none absolute inset-x-0 top-0 h-[320px] bg-gradient-to-b from-white via-[#f5f7fb] to-transparent opacity-60" />
|
|
<div className="pointer-events-none absolute left-[-120px] top-[-140px] h-[360px] w-[360px] rounded-full bg-[radial-gradient(circle,rgba(17,138,244,0.14)_0%,rgba(17,138,244,0)_70%)] blur-3xl opacity-70" />
|
|
</div>
|
|
|
|
<div className="relative mx-auto w-full max-w-5xl px-4 pb-16 pt-16 text-center md:px-6 md:pt-20">
|
|
{heroEyebrow && (
|
|
<p className="mb-3 text-xs font-semibold uppercase tracking-[0.46em] text-[#118af4]">
|
|
{heroEyebrow}
|
|
</p>
|
|
)}
|
|
<h2 className="mx-auto mb-4 max-w-3xl text-3xl font-semibold leading-tight text-[#0f1f39] md:text-[34px]">
|
|
{heroTitle}
|
|
</h2>
|
|
{heroDescription && (
|
|
<p className="mx-auto max-w-3xl text-base leading-relaxed text-[#4b5565] md:text-lg">
|
|
{heroDescription}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="relative z-10 -mt-10 pb-16 md:-mt-12 md:pb-20">
|
|
<div className="mx-auto w-full max-w-6xl px-4 md:px-6">
|
|
<div className="grid grid-cols-1 gap-7 md:grid-cols-2">
|
|
{data.products.map((product) => (
|
|
<ProductCard key={product.id} item={product} basePath={basePath} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
|
|
|