82 lines
2.9 KiB
TypeScript
82 lines
2.9 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
const cards = [
|
|
{
|
|
href: "#",
|
|
image:
|
|
"/block-media/external/unsplash/photo-1548324215-9133768e4094.jpg",
|
|
imageAlt: "گزارشساز",
|
|
logo: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
|
|
logoAlt: "داده سازمانی",
|
|
description:
|
|
"گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
|
|
cardClassName: "bg-red-100",
|
|
},
|
|
{
|
|
href: "#",
|
|
image:
|
|
"/block-media/external/unsplash/photo-1550070881-a5d71eda5800.jpg",
|
|
imageAlt: "تحلیل داده سازمان",
|
|
logo: "/block-media/shadcnblocks/block/logos/nextjs-wordmark.svg",
|
|
logoAlt: "هوش تجاری",
|
|
description:
|
|
"ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
|
|
cardClassName: "",
|
|
},
|
|
];
|
|
|
|
interface Feature66Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature66 = ({ className }: Feature66Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("w-full max-w-full py-32", className)}
|
|
>
|
|
<div className="mx-auto flex w-full min-w-0 max-w-full flex-col items-stretch gap-8 px-4 sm:container sm:px-6 lg:gap-12 lg:px-16">
|
|
<h3 className="w-full text-3xl font-semibold text-pretty md:text-xl lg:max-w-3xl lg:text-2xll">
|
|
سطح دسترسی
|
|
</h3>
|
|
<div className="grid w-full min-w-0 grid-cols-1 gap-4 max-md:grid-rows-[1fr_1fr] md:grid-cols-2 lg:gap-6">
|
|
{cards.map((card) => (
|
|
<a
|
|
key={card.logoAlt}
|
|
href={card.href}
|
|
className="block h-full w-full min-w-0"
|
|
>
|
|
<div
|
|
className={cn(
|
|
"group relative h-full min-h-[27rem] w-full max-w-full overflow-hidden rounded-xl md:aspect-5/4 lg:aspect-16/9",
|
|
card.cardClassName,
|
|
)}
|
|
>
|
|
<img
|
|
src={card.image}
|
|
alt={card.imageAlt}
|
|
className="absolute size-full max-w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
|
|
/>
|
|
<div className="absolute inset-x-0 bottom-0 mt-auto max-h-[50%] min-h-[50%] bg-[linear-gradient(transparent,var(--primary)_80%)] mix-blend-multiply" />
|
|
<div className="absolute inset-x-0 bottom-0 flex flex-col items-start p-5 text-primary-foreground sm:p-6 md:p-8">
|
|
<img
|
|
src={card.logo}
|
|
alt={card.logoAlt}
|
|
className="mb-3 h-8 invert"
|
|
/>
|
|
<p className="text-xl font-semibold text-balance break-words text-white">
|
|
{card.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature66 };
|