ar.badiei/reui-blocks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

some edit

Browse Source
This commit is contained in:
mr.sabri
2026-08-13 20:38:45 +03:30
parent 1cea5b78cb
commit 031e0cc413
24 changed files with 462 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blocks/feature224.tsx
+24 -21
View File
@@ -120,10 +120,14 @@ const Feature224 = ({ className }: Feature224Props) => {
};
return (
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
<div className="container">
<div className="flex w-full flex-col items-center justify-center gap-4">
<h2 className="mx-auto max-w-87.5 text-center text-xl leading-none font-medium text-balance md:max-w-112.5 md:text-2xll lg:max-w-140 lg:text-2xll">
<section
dir="rtl"
lang="fa"
className={cn("w-full min-w-0 overflow-x-hidden py-12 sm:py-20 lg:py-32", className)}
>
<div className="container min-w-0 px-4 sm:px-6">
<div className="flex w-full min-w-0 flex-col items-center justify-center gap-4">
<h2 className="mx-auto max-w-full text-center text-xl leading-none font-medium text-balance md:max-w-112.5 md:text-2xll lg:max-w-140 lg:text-2xll">
فرایندها را استاندارد و سریع کنید
</h2>
</div>
@@ -132,27 +136,27 @@ const Feature224 = ({ className }: Feature224Props) => {
align: "start",
direction: "rtl",
}}
className="w-full"
className="w-full min-w-0 max-w-full"
setApi={setApi}
>
<CarouselContent className="-ms-8 pt-20">
<CarouselContent className="pt-12 sm:pt-20">
{FEATURES.map((card) => (
<CarouselItem
key={card.id}
className="ps-8 md:basis-1/2 lg:basis-1/3"
className="min-w-0 basis-[85%] sm:basis-1/2 lg:basis-1/3"
>
<div className="p-1">
<Card className="border-0 py-0 shadow-none dark:bg-background">
<CardContent className="flex flex-col p-0">
<div className="min-w-0 p-1">
<Card className="min-w-0 border-0 py-0 shadow-none dark:bg-background">
<CardContent className="flex min-w-0 flex-col p-0">
<div
style={{ backgroundImage: `url("${card.background}")` }}
className="relative flex aspect-[0.935802469] w-full flex-col items-center justify-between overflow-hidden rounded-2xl bg-cover bg-center bg-no-repeat p-7"
className="relative flex aspect-[0.935802469] w-full min-w-0 flex-col items-center justify-between overflow-hidden rounded-2xl bg-cover bg-center bg-no-repeat p-4 sm:p-7"
role="img"
aria-label={card.imageAlt}
>
<div className="flex size-full flex-1" />
<div className="h-12 w-full">
<div className="mx-auto mb-8 flex w-full max-w-60 items-center gap-4 rounded-full bg-primary px-3 py-2.5 shadow-xl dark:bg-background">
<div className="h-12 w-full min-w-0">
<div className="mx-auto mb-6 flex w-full max-w-full min-w-0 items-center gap-3 rounded-full bg-primary px-3 py-2.5 shadow-xl sm:mb-8 sm:max-w-60 sm:gap-4 dark:bg-background">
<div className="shrink-0">
<div className="flex -space-x-2 rtl:space-x-reverse">
<div className="flex size-7 rounded-full border border-black bg-background dark:bg-primary">
@@ -163,14 +167,14 @@ const Feature224 = ({ className }: Feature224Props) => {
</div>
</div>
</div>
<div className="text-sm font-medium text-white">
<div className="min-w-0 text-sm font-medium text-white">
{card.label}
</div>
</div>
</div>
</div>
<div className="flex w-full flex-col gap-1 pt-6 text-start">
<h3 className="text-xl font-medium text-balance text-foreground">
<div className="flex w-full min-w-0 flex-col gap-1 pt-6 text-start">
<h3 className="text-lg font-medium text-balance text-foreground sm:text-xl">
{card.title}
</h3>
<p className="text-sm text-pretty text-muted-foreground">
@@ -182,12 +186,11 @@ const Feature224 = ({ className }: Feature224Props) => {
</div>
</CarouselItem>
))}
</CarouselContent>
<div className="mt-8 hidden items-center justify-center gap-4 md:flex">
<CarouselPrevious className="static size-12 translate-y-0" />
<CarouselNext className="static size-12 translate-y-0" />
</CarouselContent> <div className="mt-8 hidden items-center justify-center gap-4 md:flex">
<CarouselPrevious className="static size-12 translate-y-0 rtl:rotate-180" />
<CarouselNext className="static size-12 translate-y-0 rtl:rotate-180" />
</div>
<div className="mt-6 flex w-full items-center gap-2 md:hidden">
<div className="mt-6 flex w-full min-w-0 items-center gap-2 md:hidden">
{Array.from({ length: FEATURES.length }).map((_, i) => (
<button
type="button"