104 lines
3.9 KiB
TypeScript
104 lines
3.9 KiB
TypeScript
import {
|
|
Marquee,
|
|
MarqueeContent,
|
|
MarqueeFade,
|
|
MarqueeItem,
|
|
} from "@/components/kibo-ui/marquee";
|
|
import { Globe } from "@/components/magicui/globe";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero249Props {
|
|
className?: string;
|
|
}
|
|
|
|
const LOGOS = [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-8.svg",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-9.svg",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-10.svg",
|
|
},
|
|
];
|
|
|
|
const Hero249 = ({ className }: Hero249Props) => {
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="border-y">
|
|
<div className="container grid xl:grid-cols-2 xl:gap-16">
|
|
<div className="flex flex-col justify-between gap-6 py-12 text-start">
|
|
<h1 className="text-xl font-medium tracking-tight text-balance text-foreground md:text-2xll lg:text-2xll">
|
|
در سراسر جهان ارتباط بگیرید، همکاری کنید و رشد کنید{" "}
|
|
<span className="text-muted-foreground">
|
|
با ابزارهایی که سراسر دنیا را پوشش می‌دهند.
|
|
</span>
|
|
</h1>
|
|
<div className="flex max-w-xl flex-col gap-6">
|
|
<p className="text-muted-foreground md:text-lg">
|
|
یک پلتفرم یکپارچه برای همکاری تیم‌های بین‌المللی، مدیریت پروژه‌ها و ارتباط مؤثر در هر منطقه زمانی.
|
|
</p>
|
|
<p className="md:text-lg">
|
|
ابزارهای همکاری، ارتباطات و مدیریت پروژه را در یک محیط واحد در اختیار تیم خود قرار دهید.
|
|
</p>
|
|
<Button size="lg" className="w-fit">
|
|
رزرو دمو
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="relative flex min-h-[320px] items-center justify-center">
|
|
<Globe className="static max-w-full" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="border-b">
|
|
<div className="container grid items-center gap-10 py-12 lg:grid-cols-2 lg:gap-16">
|
|
<p className="text-center text-sm lg:text-start lg:text-base">
|
|
تیم‌هایی که از مرزها فراتر ارتباط می‌گیرند و رشد می‌کنند
|
|
</p>
|
|
<Marquee className="relative">
|
|
<MarqueeContent>
|
|
{LOGOS.map((logo, index) => (
|
|
<MarqueeItem key={index}>
|
|
<img
|
|
src={logo.src}
|
|
alt={`لوگوی ${(index + 1).toLocaleString("fa-IR")}`}
|
|
className="mx-6 h-6 max-w-24 object-contain opacity-80 grayscale md:h-7 dark:invert"
|
|
/>
|
|
</MarqueeItem>
|
|
))}
|
|
</MarqueeContent>
|
|
<MarqueeFade side="left" />
|
|
<MarqueeFade side="right" />
|
|
</Marquee>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero249 };
|