97 lines
4.7 KiB
TypeScript
97 lines
4.7 KiB
TypeScript
"use client";
|
||
import { Play } from "lucide-react";
|
||
import { Fragment, useState } from "react";
|
||
|
||
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
||
import { Button } from "@/components/ui/button";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "@/components/ui/dialog";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
interface Hero146Props {
|
||
className?: string;
|
||
}
|
||
|
||
const Hero146 = ({ className }: Hero146Props) => {
|
||
const [isVideoOpen, setIsVideoOpen] = useState(false);
|
||
return (
|
||
<Fragment>
|
||
<section
|
||
className={cn(
|
||
"border-muted2 border-b bg-[url(/block-media/shadcnblocks/block/patterns/grid-1.svg)] bg-[length:100%_100%] bg-center bg-no-repeat font-sans",
|
||
className,
|
||
)}
|
||
>
|
||
<div className="container pt-12 md:pt-24">
|
||
<div className="flex flex-col items-center gap-5">
|
||
<h1 className="max-w-[25rem] bg-linear-to-r from-neutral-900 via-neutral-700 to-neutral-800 bg-clip-text py-2 text-center text-xl leading-tight font-semibold tracking-tighter text-transparent md:max-w-[43.75rem] md:text-2xll lg:max-w-[56.25rem] lg:text-[5rem]">
|
||
عامل‌های هوش مصنوعی سازمانی، در کمترین زمان مستقر می‌شوند
|
||
</h1>
|
||
<p className="max-w-[22.5rem] text-center text-base text-muted-foreground md:max-w-[35rem] lg:text-lg">
|
||
عامل‌های هوش مصنوعی اختصاصی را بدون نیاز به برنامه‌نویسی طراحی، استقرار و به سرویس‌های مختلف متصل کنید.
|
||
</p>
|
||
<div className="pt-6">
|
||
<Button className="block h-fit w-fit animate-shadow-ping rounded-md border border-neutral-950 bg-[linear-gradient(180deg,var(--color-neutral-600),var(--color-neutral-700),var(--color-neutral-900))] px-6 py-3.5 text-center text-lg text-white">
|
||
<a href="#">شروع رایگان</a>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<div className="relative mx-auto w-full max-w-[72rem] after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-20 after:block after:h-[45%] after:w-full after:bg-linear-to-t after:from-white after:to-transparent after:content-['']">
|
||
<div className="mt-14 flex w-full flex-col items-center gap-5 rounded-2xl border border-neutral-200 bg-neutral-100 p-3">
|
||
<p className="text-center text-xs font-medium text-foreground sm:text-sm md:text-lg">
|
||
مشاهده ساخت یک عامل هوش مصنوعی در{" "}
|
||
<span className="underline">۵ دقیقه</span> چند دقیقه.
|
||
</p>
|
||
<div className="relative w-full rounded-xl border border-neutral-200 bg-neutral-50">
|
||
<AspectRatio
|
||
ratio={3.002666667 / 1}
|
||
className="overflow-hidden"
|
||
>
|
||
<div>
|
||
<img
|
||
src="/block-media/shadcnblocks/block/placeholder-aspect-video-1.svg"
|
||
alt="تصویر نمونه"
|
||
className="w-full object-cover object-top-left"
|
||
/>
|
||
<Button
|
||
onClick={() => setIsVideoOpen(true)}
|
||
size="icon"
|
||
className="absolute top-1/2 left-1/2 z-30 flex h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-neutral-500 shadow-[0_0_0_14px_var(--color-neutral-300)] transition-all hover:bg-neutral-600 hover:shadow-[0_0_0_0px_var(--color-neutral-300)] md:h-14 md:w-14 lg:h-20 lg:w-20"
|
||
>
|
||
<div className="m-auto aspect-square w-[45%]">
|
||
<Play className="h-full! w-full! fill-white stroke-white" />
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
</AspectRatio>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<Dialog open={isVideoOpen} onOpenChange={setIsVideoOpen}>
|
||
<DialogContent className="sm:max-w-[800px]">
|
||
<DialogHeader>
|
||
<DialogTitle>ویدیوی معرفی</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="aspect-video">
|
||
<iframe
|
||
className="h-full w-full"
|
||
src="https://www.youtube.com/embed/your-video-id"
|
||
title="ویدیوی معرفی"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||
allowFullScreen
|
||
></iframe>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</Fragment>
|
||
);
|
||
};
|
||
|
||
export { Hero146 };
|