104 lines
4.4 KiB
TypeScript
104 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowRight } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { OrbitingCircles } from "@/components/magicui/orbiting-circles";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero225Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero225 = ({ className }: Hero225Props) => {
|
|
const circle1Images = [
|
|
"/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
|
|
"/block-media/shadcnblocks/block/logos/react-icon.svg",
|
|
"/block-media/shadcnblocks/block/logos/vue-icon.svg",
|
|
"/block-media/shadcnblocks/block/logos/vite-icon.svg",
|
|
"/block-media/shadcnblocks/block/logos/spotify-icon.svg",
|
|
];
|
|
|
|
const circle2Images = [
|
|
"/block-media/shadcnblocks/block/logos/typescript-icon.svg",
|
|
"/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
|
|
"/block-media/shadcnblocks/block/logos/astro-icon.svg",
|
|
"/block-media/shadcnblocks/block/logos/vercel-icon.svg",
|
|
];
|
|
|
|
const circle3Images = [
|
|
"/block-media/shadcnblocks/block/logos/notion-icon.svg",
|
|
"/block-media/shadcnblocks/block/logos/github-icon.svg",
|
|
"/block-media/shadcnblocks/block/logos/figma-icon.svg",
|
|
"/block-media/shadcnblocks/block/logos/slack-icon.svg",
|
|
"/block-media/shadcnblocks/block/logos/laravel-icon.svg",
|
|
];
|
|
|
|
const circle4Images = [
|
|
"/block-media/shadcnblocks/block/logos/gatsby-icon.svg",
|
|
"/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
|
|
"/block-media/shadcnblocks/block/logos/brave-icon.svg",
|
|
"/block-media/shadcnblocks/block/logos/vscode-icon.svg",
|
|
"/block-media/shadcnblocks/block/logos/sketch-icon.svg",
|
|
"/block-media/shadcnblocks/block/logos/google-icon.svg",
|
|
];
|
|
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="flex flex-col items-center justify-center gap-4">
|
|
<p className="text-lg text-muted-foreground">
|
|
مبتنی بر رابط کاربری، استایلدهی مدرن و ری یو آی
|
|
</p>
|
|
<h1 className="font-calSans max-w-5xl text-center text-2xll lg:text-2xll">
|
|
یک بار تهیه کنید و در تمام پروژههای خود استفاده کنید
|
|
</h1>
|
|
</div>
|
|
<div className="relative h-112 overflow-hidden">
|
|
<div className="relative flex h-[1200px] w-full flex-col items-center justify-center overflow-hidden">
|
|
<OrbitingCircles iconSize={40} radius={310} speed={2}>
|
|
{circle1Images.map((src, index) => (
|
|
<div key={index} className="size-12">
|
|
<img src={src} className="size-full object-contain" alt="تصویر نمونه" />
|
|
</div>
|
|
))}
|
|
</OrbitingCircles>
|
|
<OrbitingCircles iconSize={40} radius={390} reverse speed={2}>
|
|
{circle2Images.map((src, index) => (
|
|
<div key={index} className="size-12">
|
|
<img src={src} className="size-full object-contain" alt="تصویر نمونه" />
|
|
</div>
|
|
))}
|
|
</OrbitingCircles>
|
|
<OrbitingCircles iconSize={40} radius={470} speed={2}>
|
|
{circle3Images.map((src, index) => (
|
|
<div key={index} className="size-12">
|
|
<img src={src} className="size-full object-contain" alt="تصویر نمونه" />
|
|
</div>
|
|
))}
|
|
</OrbitingCircles>
|
|
<OrbitingCircles iconSize={40} radius={550} reverse speed={1}>
|
|
{circle4Images.map((src, index) => (
|
|
<div key={index} className="size-12">
|
|
<img src={src} className="size-full object-contain" alt="تصویر نمونه" />
|
|
</div>
|
|
))}
|
|
</OrbitingCircles>
|
|
</div>
|
|
<div className="absolute bottom-0 h-24 w-full bg-gradient-to-t from-background to-transparent" />
|
|
<Button
|
|
variant="secondary"
|
|
className="text-md group absolute bottom-0 left-1/2 mx-auto mt-24 flex w-fit -translate-x-1/2 items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
|
|
>
|
|
<span>شروع رایگان</span>
|
|
<ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero225 };
|