47 lines
2.1 KiB
TypeScript
47 lines
2.1 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { Globe } from "@/components/magicui/globe";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Feature253Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature253 = ({ className }: Feature253Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("relative w-full min-w-0 overflow-hidden py-32", className)}
|
|
>
|
|
<div className="container min-w-0">
|
|
<div className="relative flex h-92 w-full min-w-0 max-w-full flex-col justify-between overflow-hidden rounded-4xl border bg-muted p-6 sm:p-8 md:flex-row">
|
|
<div className="relative z-10 flex h-full min-w-0 max-w-lg flex-col justify-center gap-4 text-start">
|
|
<h1 className="text-xl font-medium tracking-tighter text-balance break-words md:text-2xll">
|
|
زمان حل مسئله را کوتاه کنید
|
|
</h1>
|
|
<p className="text-pretty text-muted-foreground/70">
|
|
پاسخهای آماده و پایگاه دانش، زمان پاسخ را کم میکند و کیفیت را در کل تیم یکسان نگه میدارد.
|
|
</p>
|
|
<Button
|
|
variant="default"
|
|
className="group relative z-10 w-fit rounded-full! border border-none bg-background px-10 tracking-tighter text-foreground shadow-none! hover:bg-background"
|
|
>
|
|
تیکت
|
|
<ArrowRight className="ms-2 -rotate-45 rounded-full bg-foreground p-px text-background transition-all ease-in-out group-hover:rotate-0 rtl:rotate-[135deg] rtl:group-hover:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
<div className="relative mt-6 min-h-40 min-w-0 w-full flex-1 overflow-hidden md:mt-0 md:max-w-md">
|
|
{/* Keep globe peek inside the card — avoid -end-100 / scale-150 bleed */}
|
|
<Globe className="absolute end-0 top-0 size-full max-w-none origin-top md:-end-8 md:top-6 md:scale-110" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature253 };
|