67 lines
2.7 KiB
TypeScript
67 lines
2.7 KiB
TypeScript
import { ArrowRight, CirclePlay } from "lucide-react";
|
|
|
|
import { badgeVariants } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero175Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero175 = ({ className }: Hero175Props) => {
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"font-public_sans dark relative bg-background py-12 before:absolute before:top-0 before:left-0 before:z-10 before:block before:h-[15rem] before:w-full before:bg-linear-to-b before:from-muted before:to-transparent before:content-[''] md:py-32",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="relative z-20 container">
|
|
<div className="relative z-20 mx-auto flex max-w-[56.25rem] flex-col items-center gap-6">
|
|
<a
|
|
href="#"
|
|
className={`${badgeVariants({ variant: "outline" })} border-muted2 mb-4 flex w-fit items-center gap-1 rounded-full border bg-muted px-2.5 py-1.5 hover:border-primary`}
|
|
>
|
|
<p className="text-sm font-semibold text-primary">
|
|
ویژگیهای جدید ما را ببینید
|
|
</p>
|
|
<ArrowRight className="h-4 w-4 stroke-primary rtl:rotate-180" />
|
|
</a>
|
|
<h1 className="w-full text-center text-2xll font-bold text-foreground md:text-2xll">
|
|
چارچوبی مدرن برای توسعه وب{" "}
|
|
<span className="text-primary">مناسب توسعهدهندگان</span>
|
|
</h1>
|
|
<p className="text-center text-lg text-muted-foreground">
|
|
چارچوبی متنباز که توسعه وب را ساده میکند و در عین حال قدرتمند
|
|
است. اپلیکیشنها و وبسایتهای فولاستک با کارایی بالا و آماده
|
|
تولید را با اطمینان بسازید.
|
|
</p>
|
|
<div className="mt-4 flex items-center gap-2">
|
|
<Button
|
|
asChild
|
|
className="flex h-fit items-center gap-2 rounded-md px-3.5 py-2.5 text-sm font-medium"
|
|
>
|
|
<a href="#">
|
|
<div>شروع رایگان</div>
|
|
<ArrowRight className="size-5! rtl:rotate-180" />
|
|
</a>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
variant="ghost"
|
|
className="flex h-fit items-center gap-2 rounded-md px-3.5 py-2.5 text-sm font-medium text-white"
|
|
>
|
|
<a href="#">
|
|
<div>تماشای دمو</div>
|
|
<CirclePlay className="size-5! stroke-white" />
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero175 };
|