124 lines
3.5 KiB
TypeScript
124 lines
3.5 KiB
TypeScript
import React from "react";
|
|
import { Heading } from "./heading";
|
|
import { Subheading } from "./subheading";
|
|
import { cn } from "@/lib/utils";
|
|
import { GridLineHorizontal, GridLineVertical } from "./grid-lines";
|
|
import { SkeletonOne } from "./skeletons/first";
|
|
import { SkeletonTwo } from "./skeletons/second";
|
|
import { SkeletonFour } from "./skeletons/fourth";
|
|
import { SkeletonThree } from "./skeletons/third";
|
|
|
|
export const Features = () => {
|
|
const features = [
|
|
{
|
|
title: "Viande de qualité",
|
|
description:
|
|
"Nous utilisons uniquement de la viande fraîche et de qualité supérieure, marinée avec nos épices spéciales.",
|
|
skeleton: null,
|
|
className:
|
|
"col-span-1 lg:col-span-4 border-b border-r dark:border-neutral-800",
|
|
},
|
|
{
|
|
title: "Pain fait maison",
|
|
description:
|
|
"Notre pain est préparé quotidiennement pour garantir une fraîcheur et un goût incomparables.",
|
|
skeleton: null,
|
|
className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800",
|
|
},
|
|
{
|
|
title: "Sauces maison",
|
|
description:
|
|
"Nos sauces sont préparées avec des ingrédients frais et selon des recettes traditionnelles.",
|
|
skeleton: null,
|
|
className: "col-span-1 lg:col-span-3 border-r dark:border-neutral-800",
|
|
},
|
|
{
|
|
title: "Service rapide",
|
|
description:
|
|
"Nous préparons vos kebabs rapidement sans compromettre la qualité, pour que vous puissiez profiter de votre repas sans attendre.",
|
|
skeleton: null,
|
|
className: "col-span-1 lg:col-span-3",
|
|
},
|
|
];
|
|
return (
|
|
<div className="relative z-20 py-10 lg:py-40 overflow-hidden">
|
|
<Heading as="h2">Pourquoi choisir BG Kebab</Heading>
|
|
<Subheading className="text-center ">
|
|
Découvrez ce qui fait de BG Kebab le meilleur choix pour vos envies de kebab
|
|
</Subheading>
|
|
|
|
<div className="relative overflow-hidden">
|
|
<div className="grid grid-cols-1 lg:grid-cols-6 mt-12">
|
|
{features.map((feature) => (
|
|
<FeatureCard key={feature.title} className={feature.className}>
|
|
<FeatureTitle>{feature.title}</FeatureTitle>
|
|
<FeatureDescription>{feature.description}</FeatureDescription>
|
|
<div className=" h-full w-full">{feature.skeleton}</div>
|
|
</FeatureCard>
|
|
))}
|
|
</div>
|
|
<GridLineHorizontal
|
|
style={{
|
|
top: 0,
|
|
left: "-10%",
|
|
width: "120%",
|
|
}}
|
|
/>
|
|
|
|
<GridLineHorizontal
|
|
style={{
|
|
bottom: 0,
|
|
left: "-10%",
|
|
width: "120%",
|
|
}}
|
|
/>
|
|
|
|
<GridLineVertical
|
|
style={{
|
|
top: "-10%",
|
|
right: 0,
|
|
height: "120%",
|
|
}}
|
|
/>
|
|
<GridLineVertical
|
|
style={{
|
|
top: "-10%",
|
|
left: 0,
|
|
height: "120%",
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const FeatureCard = ({
|
|
children,
|
|
className,
|
|
}: {
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
}) => {
|
|
return (
|
|
<div className={cn(`p-4 sm:p-8 relative overflow-hidden`, className)}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const FeatureTitle = ({ children }: { children?: React.ReactNode }) => {
|
|
return (
|
|
<Heading as="h3" size="sm" className="text-left">
|
|
{children}
|
|
</Heading>
|
|
);
|
|
};
|
|
|
|
const FeatureDescription = ({ children }: { children?: React.ReactNode }) => {
|
|
return (
|
|
<Subheading className="text-left max-w-sm mx-0 lg:text-sm my-2">
|
|
{children}
|
|
</Subheading>
|
|
);
|
|
};
|