112 lines
4.4 KiB
TypeScript
112 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { Check } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
import {
|
|
CardBody,
|
|
CardContainer,
|
|
CardItem,
|
|
} from "@/components/aceternity/3d-card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useContent } from "@/components/layout/content-provider";
|
|
|
|
interface Feature269GoldStoreProps {
|
|
className?: string;
|
|
cardImage?: string;
|
|
}
|
|
|
|
const defaultCardImage =
|
|
"https://deifkwefumgah.cloudfront.net/shadcnblocks/block/guri3/img7.jpeg";
|
|
|
|
const Feature269GoldStore = ({ className, cardImage }: Feature269GoldStoreProps) => {
|
|
const content = useContent();
|
|
const { heading, description, featuresLabel, cardTitle1, cardTitle2, cardWelcome, cardWelcomeBrand, features } = content.pages.product.forushgahSazTala.feature269;
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"h-full w-full max-w-full overflow-x-hidden overflow-y-hidden py-16 sm:py-24 lg:py-32",
|
|
className
|
|
)}
|
|
dir="rtl"
|
|
>
|
|
<div className="relative container mx-auto px-4 md:px-6">
|
|
<div className="flex h-full flex-col items-center justify-center gap-10 lg:mx-auto lg:max-w-7xl lg:flex-row lg:justify-center">
|
|
<div className="w-full space-y-5 lg:w-3/5">
|
|
<h2 className="text-heading-2 mt-3 w-full max-w-2xl font-semibold leading-[var(--line-height-heading)] tracking-tight text-foreground">
|
|
{heading}
|
|
</h2>
|
|
<p className="text-body max-w-xl leading-[var(--line-height-body)] text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
<div className="mb-6 mt-10 flex flex-wrap gap-4">
|
|
<Button asChild variant="primary" className="rounded-full">
|
|
<Link href="/contact">شروع کنید</Link>
|
|
</Button>
|
|
<Button asChild variant="secondary" className="rounded-full">
|
|
<Link href="/contact">بیشتر بدانید</Link>
|
|
</Button>
|
|
</div>
|
|
<ul className="space-y-4">
|
|
<li className="mb-3">
|
|
<p className="text-caption font-medium text-muted-foreground">{featuresLabel}</p>
|
|
</li>
|
|
{features.map((featureTitle) => (
|
|
<li key={featureTitle} className="flex items-center gap-2">
|
|
<Check className="size-4 shrink-0 text-primary" />
|
|
<span className="text-body-sm font-medium text-foreground">
|
|
{featureTitle}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<CardContainer
|
|
className="w-full"
|
|
containerClassName="h-full w-full p-0 m-0 lg:w-2/5"
|
|
>
|
|
<CardBody className="group/card flex h-full !w-full flex-col items-center justify-center rounded-3xl bg-muted/70 px-5 py-10 sm:py-15">
|
|
<CardItem
|
|
translateZ="60"
|
|
className="text-heading-3 mb-2 max-w-xs text-center font-semibold leading-[var(--line-height-heading)] tracking-tight text-foreground"
|
|
>
|
|
<span className="block">{cardTitle1}</span>
|
|
<span className="block">{cardTitle2}</span>
|
|
</CardItem>
|
|
<CardItem
|
|
as="p"
|
|
translateZ="25"
|
|
className="my-4 flex w-full max-w-sm items-center justify-center gap-2 text-body-sm font-medium tracking-tight text-foreground"
|
|
>
|
|
<span className="opacity-50">{cardWelcome}</span>
|
|
<span className="whitespace-nowrap font-semibold">{cardWelcomeBrand}</span>
|
|
</CardItem>
|
|
<CardItem translateZ="60" className="mt-4 w-full max-w-[1000px]">
|
|
<img
|
|
src={cardImage ?? defaultCardImage}
|
|
height="1000"
|
|
width="1000"
|
|
className="h-70 w-full rounded-3xl object-cover group-hover/card:shadow-xl lg:h-60"
|
|
alt="فروشگاه آنلاین طلا"
|
|
/>
|
|
</CardItem>
|
|
<div className="flex w-full flex-col items-center justify-center">
|
|
<img
|
|
className="h-8 w-auto object-contain mt-4"
|
|
src="/assets/mzLogo.png"
|
|
alt="مستر دکور"
|
|
/>
|
|
</div>
|
|
</CardBody>
|
|
</CardContainer>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature269GoldStore };
|