87 lines
3.6 KiB
TypeScript
87 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { ArrowRight } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { LineShadowText } from "@/components/magicui/line-shadow-text";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useIsMobile } from "@/hooks/use-mobile";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero233Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero233 = ({ className }: Hero233Props) => {
|
|
const isMobile = useIsMobile();
|
|
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"relative h-svh max-h-[1400px] min-h-[600px] w-full overflow-hidden bg-background py-32",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="relative z-20 container flex min-w-0 flex-col items-center justify-center gap-4 py-10 text-center md:mt-22">
|
|
<div className="absolute -z-1 size-full max-w-3xl bg-background blur-xl" />
|
|
<Button
|
|
variant="secondary"
|
|
className="text-md group my-16 flex w-fit items-center justify-center gap-3 rounded-full bg-muted/60 px-5 py-1 tracking-tight md:my-5"
|
|
>
|
|
<span className="size-2 rounded-full bg-foreground" />
|
|
<span>پلن مناسب برای هر تیم</span>
|
|
</Button>
|
|
<div className="relative flex w-full min-w-0 max-w-4xl items-center justify-center text-center text-2xll font-medium tracking-tight md:text-2xll">
|
|
<h1 className="relative z-10 text-balance break-words">
|
|
<span className="ms-3 text-muted-foreground/50">
|
|
تنها اپی که برای ماندن
|
|
</span>
|
|
<LineShadowText> بهرهوری </LineShadowText>
|
|
<span className="text-muted-foreground/50"> توسعه سریع</span>
|
|
<span>.</span>
|
|
</h1>
|
|
</div>
|
|
|
|
<p className="mt-5 max-w-xl text-balance bg-background text-muted-foreground/80">
|
|
صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایلدهی مدرن و ری یو آی که مستقیماً در پروژههای شما قابل استفاده هستند.
|
|
</p>
|
|
<div className="my-5 flex min-w-0 flex-wrap items-center justify-center gap-4">
|
|
<Button
|
|
variant="secondary"
|
|
className="text-md group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
|
|
>
|
|
<span>مشاهده مستندات</span>
|
|
<ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
|
|
</Button>
|
|
<Button
|
|
variant="default"
|
|
className="text-md group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
|
|
>
|
|
<span>شروع رایگان</span>
|
|
<ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pointer-events-none absolute inset-0 z-0 flex justify-center overflow-hidden">
|
|
{Array.from({ length: isMobile ? 7 : 18 }).map((_, i) => (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ opacity: 0, height: 0 }}
|
|
animate={{ opacity: 1, height: "100%" }}
|
|
transition={{
|
|
duration: 0.8,
|
|
delay: i * 0.05,
|
|
ease: "easeOut",
|
|
}}
|
|
className="w-24 shrink-0 border-s bg-gradient-to-b to-transparent transition-all ease-in-out hover:scale-110 hover:from-black/2"
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero233 };
|