231 lines
7.3 KiB
TypeScript
231 lines
7.3 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import AutoScroll from "embla-carousel-auto-scroll";
|
|||
|
|
import React from "react";
|
|||
|
|
|
|||
|
|
import { Button } from "@/components/ui/button";
|
|||
|
|
import {
|
|||
|
|
Carousel,
|
|||
|
|
CarouselContent,
|
|||
|
|
CarouselItem,
|
|||
|
|
} from "@/components/ui/carousel";
|
|||
|
|
import { cn } from "@/lib/utils";
|
|||
|
|
|
|||
|
|
const bgPattern = {
|
|||
|
|
backgroundImage:
|
|||
|
|
"linear-gradient(135deg, var(--muted) 25%, transparent 25.5%, transparent 50%, var(--muted) 50.5%, var(--muted) 75%, transparent 75.5%, transparent)",
|
|||
|
|
backgroundSize: "10px 10px",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
interface Logos11Props {
|
|||
|
|
className?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const Logos11 = ({ className }: Logos11Props) => {
|
|||
|
|
const logos = [
|
|||
|
|
{
|
|||
|
|
id: "logo-1",
|
|||
|
|
description: "لوگوی ۱",
|
|||
|
|
image:
|
|||
|
|
"/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
|
|||
|
|
className: "h-7 w-auto",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "logo-2",
|
|||
|
|
fill: true,
|
|||
|
|
description: "لوگوی ۲",
|
|||
|
|
image:
|
|||
|
|
"/block-media/shadcnblocks/block/guri3/arc-white.svg",
|
|||
|
|
className: "h-7 w-auto",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "logo-3",
|
|||
|
|
description: "لوگوی ۳",
|
|||
|
|
image:
|
|||
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
|
|||
|
|
className: "h-7 w-auto",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "logo-4",
|
|||
|
|
description: "لوگوی ۴",
|
|||
|
|
image:
|
|||
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
|
|||
|
|
className: "h-7 w-auto",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "logo-5",
|
|||
|
|
description: "لوگوی ۵",
|
|||
|
|
image:
|
|||
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
|
|||
|
|
className: "h-7 w-auto",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "logo-6",
|
|||
|
|
description: "لوگوی ۶",
|
|||
|
|
image:
|
|||
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
|
|||
|
|
className: "h-5 w-auto",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "logo-7",
|
|||
|
|
description: "لوگوی ۷",
|
|||
|
|
image:
|
|||
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
|
|||
|
|
className: "h-7 w-auto",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "logo-8",
|
|||
|
|
description: "لوگوی ۸",
|
|||
|
|
image:
|
|||
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
|
|||
|
|
className: "h-7 w-auto",
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<section
|
|||
|
|
dir="rtl"
|
|||
|
|
lang="fa"
|
|||
|
|
className={cn("relative grid w-screen overflow-hidden py-32", className)}
|
|||
|
|
>
|
|||
|
|
<div className="relative z-10 container h-full items-center justify-center gap-6">
|
|||
|
|
<div className="relative flex h-20 w-full items-center justify-center border border-x-0">
|
|||
|
|
<h1 className="text-3xl font-medium tracking-tighter md:text-xl">
|
|||
|
|
با حمایت بهترینها
|
|||
|
|
</h1>
|
|||
|
|
<BgPattern />
|
|||
|
|
</div>
|
|||
|
|
<div className="w-full py-20">
|
|||
|
|
<Carousel
|
|||
|
|
opts={{ loop: true, align: "start", direction: "rtl" }}
|
|||
|
|
plugins={[AutoScroll({ playOnInit: true })]}
|
|||
|
|
>
|
|||
|
|
<CarouselContent className="ms-0">
|
|||
|
|
{logos.map((logo) => (
|
|||
|
|
<CarouselItem
|
|||
|
|
key={logo.id}
|
|||
|
|
className={cn(
|
|||
|
|
"relative flex h-35 basis-1/2 justify-center border border-t-0 border-e-0 border-border ps-0 sm:basis-1/4 md:basis-1/3 lg:basis-1/6",
|
|||
|
|
logo.fill && "bg-orange-500",
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<div className="flex flex-col items-center justify-center lg:mx-10">
|
|||
|
|
<img
|
|||
|
|
src={logo.image}
|
|||
|
|
alt={logo.description}
|
|||
|
|
className={logo.className}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</CarouselItem>
|
|||
|
|
))}
|
|||
|
|
</CarouselContent>
|
|||
|
|
</Carousel>
|
|||
|
|
<Carousel
|
|||
|
|
opts={{ loop: true, align: "end", direction: "rtl" }}
|
|||
|
|
plugins={[AutoScroll({ playOnInit: true })]}
|
|||
|
|
>
|
|||
|
|
<CarouselContent className="ms-0">
|
|||
|
|
{logos.map((logo) => (
|
|||
|
|
<CarouselItem
|
|||
|
|
key={logo.id}
|
|||
|
|
className={cn(
|
|||
|
|
"relative flex h-35 basis-1/2 justify-center border border-t-0 border-e-0 border-b-0 border-border ps-0 sm:basis-1/4 md:basis-1/3 lg:basis-1/6",
|
|||
|
|
logo.fill && "bg-orange-500",
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<div className="flex flex-col items-center justify-center lg:mx-10">
|
|||
|
|
<img
|
|||
|
|
src={logo.image}
|
|||
|
|
alt={logo.description}
|
|||
|
|
className={logo.className}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</CarouselItem>
|
|||
|
|
))}
|
|||
|
|
</CarouselContent>
|
|||
|
|
</Carousel>
|
|||
|
|
</div>
|
|||
|
|
<div className="relative flex h-20 w-full items-center justify-center border border-x-0">
|
|||
|
|
<Button className="h-12 rounded-none px-8!">همین الان شروع کنید</Button>
|
|||
|
|
<Button
|
|||
|
|
variant="ghost"
|
|||
|
|
className="flex h-12 items-center gap-3 rounded-none px-8!"
|
|||
|
|
>
|
|||
|
|
نحوه کار
|
|||
|
|
<PlayIcon className="rtl:rotate-180" />
|
|||
|
|
</Button>
|
|||
|
|
<BgPattern sideLines={false} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export { Logos11 };
|
|||
|
|
|
|||
|
|
const PlayIcon = ({ className }: { className?: string }) => {
|
|||
|
|
return (
|
|||
|
|
<svg
|
|||
|
|
width="15"
|
|||
|
|
height="18"
|
|||
|
|
viewBox="0 0 15 18"
|
|||
|
|
fill="none"
|
|||
|
|
xmlns="http://www.w3.org/2000/svg"
|
|||
|
|
className={className}
|
|||
|
|
>
|
|||
|
|
<path
|
|||
|
|
d="M1.11523 3.94458C1.11523 2.36225 2.86573 1.40657 4.19675 2.26222L12.4982 7.59889C13.7229 8.38617 13.7229 10.1763 12.4982 10.9636L4.19675 16.3003C2.86573 17.1559 1.11523 16.2003 1.11523 14.6179V3.94458Z"
|
|||
|
|
fill="black"
|
|||
|
|
stroke="black"
|
|||
|
|
strokeWidth="2"
|
|||
|
|
strokeLinecap="round"
|
|||
|
|
strokeLinejoin="round"
|
|||
|
|
/>
|
|||
|
|
</svg>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const BgPattern = ({ sideLines = true }: { sideLines?: boolean }) => {
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
{/* bg pattern left */}
|
|||
|
|
<div
|
|||
|
|
className="absolute top-1/2 left-0 z-20 size-20 -translate-x-full -translate-y-1/2 border border-e-0"
|
|||
|
|
style={bgPattern}
|
|||
|
|
>
|
|||
|
|
<span className="absolute -top-1 -end-1 z-20 size-2 bg-foreground" />
|
|||
|
|
<span className="absolute -end-1 -bottom-1 z-20 size-2 bg-foreground" />
|
|||
|
|
<span className="absolute -bottom-1 -start-1 z-20 size-2 bg-foreground" />
|
|||
|
|
<span className="absolute -top-1 -start-1 z-20 size-2 bg-foreground" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* bg pattern right */}
|
|||
|
|
<div
|
|||
|
|
className="absolute top-1/2 right-0 z-20 size-20 translate-x-full -translate-y-1/2 border border-s-0"
|
|||
|
|
style={bgPattern}
|
|||
|
|
>
|
|||
|
|
<span className="absolute -top-1 -end-1 z-20 size-2 bg-foreground" />
|
|||
|
|
<span className="absolute -end-1 -bottom-1 z-20 size-2 bg-foreground" />
|
|||
|
|
<span className="absolute -bottom-1 -start-1 z-20 size-2 bg-foreground" />
|
|||
|
|
<span className="absolute -top-1 -start-1 z-20 size-2 bg-foreground" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* bg Lines left */}
|
|||
|
|
{sideLines && (
|
|||
|
|
<div className="absolute left-0 z-10 h-[200vh] w-px border-s" />
|
|||
|
|
)}
|
|||
|
|
{sideLines && (
|
|||
|
|
<div className="absolute -left-20 z-10 h-[200vh] w-px border-s" />
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* bg Lines right */}
|
|||
|
|
{sideLines && (
|
|||
|
|
<div className="absolute right-0 z-10 h-[200vh] w-px border-s" />
|
|||
|
|
)}
|
|||
|
|
{sideLines && (
|
|||
|
|
<div className="absolute -right-20 z-10 h-[200vh] w-px border-s" />
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
};
|