88 lines
3.7 KiB
TypeScript
88 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { Layout, UserPlus, Users, Zap } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
import { useContent } from "@/components/layout/content-provider";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
|
|
const iconClass = "size-10 stroke-white transition-all ease-in-out group-hover:scale-105";
|
|
const stepIcons = [
|
|
<UserPlus key="0" className={iconClass} aria-hidden />,
|
|
<Layout key="1" className={iconClass} aria-hidden />,
|
|
<Zap key="2" className={iconClass} aria-hidden />,
|
|
<Users key="3" className={iconClass} aria-hidden />,
|
|
];
|
|
|
|
interface Feature243GoldStoreProps {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature243GoldStore = ({ className }: Feature243GoldStoreProps) => {
|
|
const content = useContent();
|
|
const { heading, steps: stepsContent } = content.pages.product.forushgahSazTala.feature243;
|
|
const steps = stepsContent.map((step, index) => ({
|
|
title: step.title,
|
|
description: step.description,
|
|
icon: stepIcons[index] ?? stepIcons[0],
|
|
}));
|
|
|
|
return (
|
|
<section className={cn("overflow-visible bg-background", className)} dir="rtl">
|
|
<div className="container mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-24 md:py-28 lg:py-32">
|
|
<header className="relative z-10 flex flex-col items-center justify-center gap-6 bg-background text-center">
|
|
<h2 className="text-heading-2 font-semibold leading-[var(--line-height-heading)] tracking-tight text-foreground">
|
|
{heading}
|
|
</h2>
|
|
</header>
|
|
|
|
<div className="mt-44 flex flex-wrap items-stretch justify-center gap-6 sm:mt-48 md:mt-52 lg:gap-8">
|
|
{steps.map((step, index) => (
|
|
<div
|
|
key={index}
|
|
className="relative flex w-full max-w-[18rem] flex-col items-center overflow-visible sm:w-64 sm:max-w-none md:w-72"
|
|
>
|
|
<div
|
|
className={cn(
|
|
"absolute -top-[174px] left-1/2 h-0.5 w-[120%] -translate-x-1/2 rounded-full bg-muted",
|
|
index === 3 ? "hidden" : "",
|
|
index === 2 ? "hidden lg:block" : "",
|
|
index === 1 ? "hidden lg:block" : "",
|
|
index === 0 ? "hidden sm:block" : "",
|
|
)}
|
|
/>
|
|
<div className="absolute -top-[174px] left-1/2 h-full w-0.5 -translate-x-1/2 rounded-full bg-muted" />
|
|
<div className="relative z-10 flex h-8 w-5 flex-shrink-0 items-center justify-center rounded-full bg-background p-1 pb-5">
|
|
<div className="relative z-10 size-3 rounded-full bg-foreground" />
|
|
</div>
|
|
|
|
<Card className="group relative z-10 h-full w-full overflow-hidden rounded-4xl border-none bg-muted shadow-none">
|
|
<CardContent className="flex h-full flex-col items-center gap-5 p-0 pt-10 pb-5">
|
|
<div className="flex size-20 shrink-0 items-center justify-center rounded-3xl bg-foreground dark:bg-background">
|
|
{step.icon}
|
|
</div>
|
|
|
|
<div className="flex w-full flex-col items-center gap-4 px-4 pt-5 pb-3">
|
|
<h3 className="text-heading-3 w-full text-center font-semibold leading-[var(--line-height-heading)] tracking-tight text-foreground">
|
|
{step.title}
|
|
</h3>
|
|
{step.description ? (
|
|
<p className="text-body w-full max-w-sm text-center text-muted-foreground/70">
|
|
{step.description}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature243GoldStore };
|