74 lines
4.1 KiB
TypeScript
74 lines
4.1 KiB
TypeScript
import { TrendingUp, Users, Zap } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { ContainerTextFlip } from "@/components/aceternity/container-text-flip";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero243Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero243 = ({ className }: Hero243Props) => {
|
|
return (
|
|
<section
|
|
className={cn("relative h-full w-full overflow-hidden py-32", className)}
|
|
>
|
|
<div className="container min-w-0 border-t border-b border-dashed">
|
|
<div className="relative flex w-full min-w-0 max-w-5xl flex-col justify-start overflow-x-clip border border-t-0 border-dashed px-5 py-12 md:items-center md:justify-center lg:mx-auto">
|
|
<p className="flex items-center gap-3 text-sm text-muted-foreground">
|
|
<span className="inline-block size-2 shrink-0 rounded bg-green-500" />
|
|
بهروزرسانیهای منظم
|
|
</p>
|
|
<div className="relative mt-3 mb-7 w-full min-w-0 max-w-xl text-2xll font-medium font-semibold tracking-tighter md:mb-10 md:text-center md:text-2xll lg:mb-0 lg:text-start lg:text-2xll">
|
|
<h1 className="relative z-10 inline text-balance md:ms-3">
|
|
راهی سریعتر برای <br className="block md:hidden" /> توسعه{" "}
|
|
<br className="block md:hidden" />
|
|
</h1>
|
|
<ContainerTextFlip
|
|
className="absolute start-0 text-xl font-medium font-semibold tracking-tighter md:bottom-4 md:start-1/2 md:-translate-x-1/2 md:text-2xll lg:-bottom-4 lg:start-auto lg:translate-x-0 lg:text-2xll rtl:md:translate-x-1/2 rtl:lg:translate-x-0"
|
|
words={["محصولات", "خدمات", "ویژگیها", "کامپوننتها"]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="mx-auto flex w-full min-w-0 max-w-5xl flex-col items-center justify-center border border-t-0 border-b-0 border-dashed py-20">
|
|
<div className="w-full min-w-0 max-w-2xl space-y-5 md:text-center">
|
|
<p className="px-5 text-balance text-muted-foreground lg:text-lg">
|
|
صدها بلاک و کامپوننت آماده مبتنی بر React، Tailwind CSS و shadcn/ui که مستقیماً در پروژههای شما قابل استفاده هستند.
|
|
</p>
|
|
<Button className="mx-5 h-12 rounded-lg">همین امروز شروع کنید</Button>
|
|
</div>
|
|
</div>
|
|
<ul className="mx-auto grid h-44 w-full min-w-0 max-w-5xl grid-cols-1 border border-b-0 border-dashed md:h-34 md:grid-cols-2 lg:h-24 lg:grid-cols-3">
|
|
<li className="flex h-full min-w-0 items-center justify-between gap-10 px-5 md:gap-3 lg:justify-center">
|
|
<div className="flex size-12 shrink-0 items-center justify-center rounded-lg bg-muted">
|
|
<Zap className="size-6 text-muted-foreground" />
|
|
</div>
|
|
<p className="text-balance text-lg text-muted-foreground">
|
|
توسعه سریعتر
|
|
</p>
|
|
</li>
|
|
<li className="flex h-full min-w-0 items-center justify-between gap-10 border-t border-s border-dashed px-5 md:gap-3 lg:justify-center lg:border-t-0">
|
|
<div className="flex size-12 shrink-0 items-center justify-center rounded-lg bg-muted">
|
|
<Users className="size-6 text-muted-foreground" />
|
|
</div>
|
|
<p className="text-balance text-lg text-muted-foreground">
|
|
بیش از ۱۰٬۰۰۰ توسعهدهنده
|
|
</p>
|
|
</li>
|
|
<li className="col-span-1 flex h-full min-w-0 items-center justify-between gap-10 border-t border-s border-dashed px-5 md:col-span-2 md:justify-center md:gap-3 lg:col-span-1 lg:border-t-0">
|
|
<div className="flex size-12 shrink-0 items-center justify-center rounded-lg bg-muted">
|
|
<TrendingUp className="size-6 text-muted-foreground" />
|
|
</div>
|
|
<p className="text-balance text-lg text-muted-foreground">
|
|
۲۵٪ افزایش نرخ تبدیل
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero243 };
|