72 lines
2.8 KiB
TypeScript
72 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero201Props {
|
|
className?: string;
|
|
smallTitle?: string;
|
|
mainTitle?: string;
|
|
description?: string;
|
|
}
|
|
|
|
const Hero201 = ({
|
|
className,
|
|
smallTitle = "Just Copy Paste",
|
|
mainTitle = "Amazing components",
|
|
description = "Discover our collection of beautifully designed, ready-to-use components that you can easily integrate into your projects.",
|
|
}: Hero201Props) => {
|
|
return (
|
|
<section className={cn("py-16 md:py-24 lg:py-32", className)} dir="rtl">
|
|
<div className="relative container mx-auto flex flex-col items-center overflow-hidden px-6">
|
|
{/* دایرههای تزئینی پشت متن تا لرزش ایجاد نکنند */}
|
|
<div className="pointer-events-none absolute inset-0 z-0 hidden overflow-hidden md:block" aria-hidden>
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.6 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ ease: "easeInOut", duration: 0.6 }}
|
|
className="absolute -top-80 -right-80 h-240 w-240 will-change-transform"
|
|
style={{ contain: "layout paint" }}
|
|
>
|
|
<img
|
|
className="h-full w-full rotate-12 opacity-30 dark:invert animate-[spin_15s_linear_infinite]"
|
|
src="https://deifkwefumgah.cloudfront.net/shadcnblocks/block/illustrations/tokyo-solar-system-around-a-smiley.svg"
|
|
alt=""
|
|
/>
|
|
</motion.div>
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.6 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ ease: "easeInOut", duration: 0.6 }}
|
|
className="absolute -bottom-80 -left-80 h-240 w-240 will-change-transform"
|
|
style={{ contain: "layout paint" }}
|
|
>
|
|
<img
|
|
className="h-full w-full rotate-12 opacity-30 dark:invert animate-[spin_15s_linear_infinite]"
|
|
src="https://deifkwefumgah.cloudfront.net/shadcnblocks/block/illustrations/tokyo-solar-system-around-a-smiley.svg"
|
|
alt=""
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<div className="relative z-10 flex flex-col items-center">
|
|
<p className="text-heading-5 mb-4 text-center font-semibold leading-[var(--line-height-heading)] tracking-tight text-foreground">
|
|
{smallTitle}
|
|
</p>
|
|
|
|
<h2 className="text-heading-2 mx-auto max-w-4xl text-center font-bold leading-[var(--line-height-heading)] tracking-tight text-foreground">
|
|
{mainTitle}
|
|
</h2>
|
|
|
|
<p className="text-body mx-auto mt-6 max-w-3xl text-center leading-[var(--line-height-body)] text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero201 };
|