65 lines
2.6 KiB
TypeScript
65 lines
2.6 KiB
TypeScript
import { ArrowRightIcon } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero202Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero202 = ({ className }: Hero202Props) => {
|
|
return (
|
|
<section className={cn("bg-background py-32", className)}>
|
|
<div className="container">
|
|
<Card className="group relative w-full overflow-hidden rounded-4xl border border-none bg-muted shadow-none">
|
|
<CardContent className="py-12 lg:px-18 lg:py-24">
|
|
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
|
<div className="flex flex-col justify-center space-y-6">
|
|
<p className="flex items-center gap-2 text-xl font-medium tracking-tight text-foreground">
|
|
<img
|
|
className="size-6"
|
|
alt="آیکون کپی و چسباندن"
|
|
src="/block-media/shadcnblocks/block/block-1.svg"
|
|
/>
|
|
بلاکهای کپی و چسباندن
|
|
</p>
|
|
|
|
<h1 className="mt-3 text-8xl font-bold tracking-tighter text-foreground">
|
|
بیایید محصولی
|
|
<span className="bg-linear-to-b from-background to-foreground bg-clip-text text-transparent">
|
|
{" "}
|
|
فوقالعاده بسازیم
|
|
</span>
|
|
</h1>
|
|
|
|
<div className="mt-4 flex gap-2">
|
|
<Button className="h-13 w-fit rounded-full px-8 text-lg">
|
|
شروع همکاری
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="size-13 -rotate-45 rounded-full transition-all ease-in-out hover:rotate-0 rtl:rotate-[135deg] rtl:hover:rotate-0"
|
|
>
|
|
<ArrowRightIcon className="rtl:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="absolute -left-70 -bottom-70 -rotate-45 transition-all ease-in-out group-hover:-rotate-0">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/illustrations/tokyo-solar-system-around-a-smiley.svg"
|
|
className="size-150 md:size-220"
|
|
alt="تصویر نمونه"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero202 };
|