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.
50 lines
1.7 KiB
50 lines
1.7 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-[#f3f6fc] text-[#0f1f39]">
|
|
<div className="absolute inset-0 pointer-events-none">
|
|
<div className="h-full w-full bg-[radial-gradient(circle_at_top_left,_rgba(88,133,255,0.08),_transparent_55%)]" />
|
|
</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>
|
|
);
|
|
}
|
|
|
|
|
|
|