96 lines
4.0 KiB
TypeScript
96 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import Link from "next/link";
|
|
import React from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { useContent } from "@/components/layout/content-provider";
|
|
|
|
interface Hero200Props {
|
|
className?: string;
|
|
/** تصویر داخل قاب موبایل (پیشنمایش اپ) */
|
|
phoneImage?: { src: string; alt: string };
|
|
}
|
|
|
|
const Hero200 = ({ className, phoneImage }: Hero200Props) => {
|
|
const content = useContent();
|
|
const hero = content.pages.product.forushgahSazTala.hero200;
|
|
const appPreviewSrc = phoneImage?.src ?? "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/block-white-1.svg";
|
|
const appPreviewAlt = phoneImage?.alt ?? "Gold store app";
|
|
return (
|
|
<section className={cn("bg-background pt-24 md:pt-32 lg:pt-40 pb-8 md:pb-12 lg:pb-16", className)}>
|
|
<div className="border-b border-foreground/40">
|
|
<div className="container mx-auto flex max-w-7xl flex-col items-center justify-center gap-4 px-6 text-center">
|
|
<h2 className="text-heading-2 font-semibold leading-snug tracking-tight text-foreground/80" dir="rtl">
|
|
{hero.subtitle}
|
|
</h2>
|
|
<div className="w-full overflow-hidden" dir="rtl">
|
|
<h1 className="text-heading-1 font-bold leading-snug tracking-tight text-foreground">
|
|
{hero.titleLine1}
|
|
<br />
|
|
{hero.titleLine2}
|
|
<br />
|
|
{hero.titleLine3}
|
|
</h1>
|
|
</div>
|
|
<Button size="lg" variant="primary" className="my-10" dir="rtl" asChild>
|
|
<Link href="/consultation">{hero.button}</Link>
|
|
</Button>
|
|
|
|
{/* Iphone mockup with content */}
|
|
<div className="h-[500px] w-full overflow-hidden">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 200, scale: 0.8 }}
|
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
|
transition={{ ease: [0, 0.71, 0.2, 1.01], duration: 0.8 }}
|
|
className="relative mx-auto mt-6 flex h-[850px] w-[400px] items-center justify-center rounded-[75px] bg-black md:mt-12 md:h-[920px] md:w-[450px]"
|
|
>
|
|
<img
|
|
className="absolute z-[2] scale-105 object-cover"
|
|
alt="Gold phone frame"
|
|
src="https://deifkwefumgah.cloudfront.net/shadcnblocks/block/mockups/phone-5.png"
|
|
/>
|
|
<div className="relative z-[1] h-full w-full overflow-hidden rounded-[3.25rem]">
|
|
{phoneImage ? (
|
|
<img
|
|
className="h-full w-full object-cover object-top"
|
|
alt={appPreviewAlt}
|
|
src={appPreviewSrc}
|
|
/>
|
|
) : (
|
|
<>
|
|
<div className="mt-20 flex justify-between px-0">
|
|
<div className="flex items-end gap-2 px-12 text-heading-1 font-bold leading-snug tracking-tight text-background" dir="rtl" aria-hidden>
|
|
طلا
|
|
<div className="mb-2 size-3 rounded-full bg-primary md:size-5" />
|
|
</div>
|
|
<div className="mt-2 mr-8 flex flex-col items-end">
|
|
<p className="text-body-sm leading-normal tracking-tight text-muted-foreground md:text-body">
|
|
{hero.dateLabel}
|
|
</p>
|
|
<p className="-mt-1 text-heading-5 font-semibold leading-snug tracking-tight text-muted-foreground/50">
|
|
{hero.appLabel}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<img
|
|
className="z-2 mx-auto mt-20 size-40 object-cover"
|
|
alt={appPreviewAlt}
|
|
src={appPreviewSrc}
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero200 };
|