Initial import of 1407 block sources under blocks/
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
ar.badiei
@@ -0,0 +1,187 @@
|
||||
"use client";
|
||||
|
||||
import { ArrowRight } from "lucide-react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface DataItem {
|
||||
key: number;
|
||||
src: string;
|
||||
alt: string;
|
||||
href: string;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
const DATA: DataItem[] = [
|
||||
{
|
||||
key: 1,
|
||||
src: "/block-media/shadcnblocks/block/logos/astro-icon.svg",
|
||||
alt: "Astro",
|
||||
href: "https://astro.build",
|
||||
width: 64,
|
||||
height: 64,
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
src: "/block-media/shadcnblocks/block/logos/github-icon.svg",
|
||||
alt: "GitHub",
|
||||
href: "https://github.com",
|
||||
width: 64,
|
||||
height: 64,
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
src: "/block-media/shadcnblocks/block/logos/google-icon.svg",
|
||||
alt: "Google",
|
||||
href: "https://google.com",
|
||||
width: 64,
|
||||
height: 64,
|
||||
},
|
||||
{
|
||||
key: 4,
|
||||
src: "/block-media/shadcnblocks/block/logos/notion-icon.svg",
|
||||
alt: "Notion",
|
||||
href: "https://notion.so",
|
||||
width: 64,
|
||||
height: 64,
|
||||
},
|
||||
{
|
||||
key: 5,
|
||||
src: "/block-media/shadcnblocks/block/logos/slack-icon.svg",
|
||||
alt: "Slack",
|
||||
href: "https://slack.com",
|
||||
width: 64,
|
||||
height: 64,
|
||||
},
|
||||
{
|
||||
key: 6,
|
||||
src: "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
|
||||
alt: "استایلدهی مدرن",
|
||||
href: "https://tailwindcss.com",
|
||||
width: 64,
|
||||
height: 64,
|
||||
},
|
||||
{
|
||||
key: 8,
|
||||
src: "/block-media/shadcnblocks/block/logos/vscode-icon.svg",
|
||||
alt: "ویرایشگر کد",
|
||||
href: "https://code.visualstudio.com",
|
||||
width: 64,
|
||||
height: 64,
|
||||
},
|
||||
{
|
||||
key: 12,
|
||||
src: "/block-media/shadcnblocks/block/logos/react-icon.svg",
|
||||
alt: "React",
|
||||
href: "https://reactjs.org",
|
||||
width: 64,
|
||||
height: 64,
|
||||
},
|
||||
{
|
||||
key: 13,
|
||||
src: "/block-media/shadcnblocks/block/logos/vue-icon.svg",
|
||||
alt: "Vue.js",
|
||||
href: "https://vuejs.org",
|
||||
width: 64,
|
||||
height: 64,
|
||||
},
|
||||
{
|
||||
key: 15,
|
||||
src: "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
|
||||
alt: "Spotify",
|
||||
href: "https://spotify.com",
|
||||
width: 64,
|
||||
height: 64,
|
||||
},
|
||||
{
|
||||
key: 16,
|
||||
src: "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
|
||||
alt: "Dropbox",
|
||||
href: "https://dropbox.com",
|
||||
width: 64,
|
||||
height: 64,
|
||||
},
|
||||
];
|
||||
|
||||
interface Integration2Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const Integration2 = ({ className }: Integration2Props) => {
|
||||
return (
|
||||
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
||||
<div className="container">
|
||||
{/* Heading Section */}
|
||||
<div className="flex flex-col items-center justify-center gap-4 text-center">
|
||||
<h4 className="text-3xl font-medium lg:text-xl">
|
||||
پشتوانه بهترین تیمهای محصول جهان
|
||||
</h4>
|
||||
<p className="text-xl text-muted-foreground lg:-mt-1">
|
||||
از استارتاپهای نوآور تا سازمانهای تثبیتشده
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Marquee Section */}
|
||||
<div className="relative my-20 overflow-hidden">
|
||||
<div className="flex w-full">
|
||||
{/* First marquee group */}
|
||||
<div className="flex shrink-0 animate-marquee items-center gap-4">
|
||||
{DATA.map((logo) => (
|
||||
<a
|
||||
href={logo.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
key={logo.key}
|
||||
className="p-4"
|
||||
>
|
||||
<img
|
||||
src={logo.src}
|
||||
alt={logo.alt}
|
||||
width={logo.width}
|
||||
height={logo.height}
|
||||
className="object-contain transition-opacity hover:opacity-70"
|
||||
/>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
{/* Second marquee group */}
|
||||
<div className="flex shrink-0 animate-marquee items-center gap-4">
|
||||
{DATA.map((logo) => (
|
||||
<a
|
||||
href={logo.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
key={logo.key}
|
||||
className="p-4"
|
||||
>
|
||||
<img
|
||||
src={logo.src}
|
||||
alt={logo.alt}
|
||||
width={logo.width}
|
||||
height={logo.height}
|
||||
className="object-contain transition-opacity hover:opacity-70"
|
||||
/>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Gradient overlays */}
|
||||
<div className="pointer-events-none absolute inset-y-0 start-0 z-10 w-24 bg-linear-to-r from-background to-transparent" />
|
||||
<div className="pointer-events-none absolute inset-y-0 end-0 z-10 w-24 bg-linear-to-l from-background to-transparent" />
|
||||
</div>
|
||||
|
||||
{/* Explore Button */}
|
||||
<div className="mt-8 flex justify-center">
|
||||
<Button className="gap-2 rounded-full">
|
||||
مشاهده همه ابزارها
|
||||
<ArrowRight className="h-4 w-4 rtl:rotate-180" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export { Integration2 };
|
||||
Reference in New Issue
Block a user