This commit is contained in:
mr.sabri
2026-07-27 12:56:06 +03:30
parent d5488386ff
commit 1cea5b78cb
45 changed files with 1406 additions and 936 deletions
+17 -9
View File
@@ -31,33 +31,41 @@ interface Feature66Props {
const Feature66 = ({ className }: Feature66Props) => {
return (
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
<div className="container flex flex-col items-start gap-8 lg:gap-12 lg:px-16">
<h3 className="text-3xl font-semibold text-pretty md:text-xl lg:max-w-3xl lg:text-2xll">
<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 grid-cols-1 gap-4 max-md:grid-rows-[1fr_1fr] md:grid-cols-2 lg:gap-6">
<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="h-full">
<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] max-w-full overflow-hidden rounded-xl md:aspect-5/4 lg:aspect-16/9",
"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 h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
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-6 text-primary-foreground md:p-8">
<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-white">
<p className="text-xl font-semibold text-balance break-words text-white">
{card.description}
</p>
</div>