78 lines
3.3 KiB
TypeScript
78 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import React from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero200Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero200 = ({ className }: Hero200Props) => {
|
|
return (
|
|
<section className={cn("bg-background py-32", className)}>
|
|
<div className="border-b border-foreground/40">
|
|
<div className="container flex flex-col items-center justify-center gap-4 text-center">
|
|
<h2 className="font-semibold tracking-tighter text-foreground/80 md:text-xl">
|
|
پلتفرم کامپوننت
|
|
</h2>
|
|
<h1 className="font-playfair text-xl tracking-tighter text-foreground md:text-2xll">
|
|
مجموعه بلاکهای آماده مبتنی بر
|
|
<br />
|
|
رابط کاربری، استایلدهی مدرن و ری یو آی
|
|
<br />
|
|
مستقیماً در پروژه خود استفاده کنید.
|
|
</h1>
|
|
<Button className="my-10 rounded-2xl px-6 py-6 text-background shadow-[0px_1px_3px_#0000001a,inset_0px_2px_0px_#ffffff40] md:rounded-3xl md:px-12 md:py-8 md:text-lg">
|
|
<p className="me-1 text-xl text-background md:me-3 md:text-xl">
|
|
|
|
</p>{" "}
|
|
شروع رایگان
|
|
</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: 100, 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="قاب گوشی"
|
|
src="/block-media/shadcnblocks/block/mockups/phone-5.png"
|
|
/>
|
|
<div className="h-full w-full">
|
|
<div className="mt-20 flex justify-between px-0">
|
|
<h1 className="flex items-end gap-2 px-12 text-2xll font-semibold tracking-tight text-background md:text-2xll">
|
|
Mon
|
|
<div className="mb-2 size-3 rounded-full bg-red-500 md:size-5" />
|
|
</h1>
|
|
<div className="mt-2 me-8 flex flex-col items-end">
|
|
<p className="text-lg tracking-tight text-muted-foreground md:text-xl">
|
|
آخرین بهروزرسانی
|
|
</p>
|
|
<p className="-mt-1 text-xl font-semibold tracking-tighter text-muted-foreground/50 md:text-xl">
|
|
2025
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<img
|
|
className="z-2 mx-auto mt-20 size-40 object-cover"
|
|
alt="قاب گوشی"
|
|
src="/block-media/shadcnblocks/block/block-white-1.svg"
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero200 };
|