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

six bug

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
blocks/feature152.tsx
+76 -46
View File
@@ -6,14 +6,48 @@ import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
const icons = [
{
image: "/block-media/shadcnblocks/block/block-1.svg",
title: "فروش آنلاین را مقیاس‌پذیر کنید",
},
{
image: "/block-media/shadcnblocks/block/block-2.svg",
title: "تجربه خرید را روان‌تر بسازید",
},
{
image: "/block-media/shadcnblocks/block/block-3.svg",
title: "هر سفارش را از انبار تا تحویل ببینید",
},
{
image: "/block-media/shadcnblocks/block/block-4.svg",
title: "نرخ تبدیل فروشگاه را بالا ببرید",
},
{
image: "/block-media/shadcnblocks/block/block-5.svg",
title: "موجودی و سفارش را یکجا مدیریت کنید",
},
{
image: "/block-media/shadcnblocks/block/block-6.svg",
title: "مشتری را به خرید دوباره برگردانید",
},
{
image: "/block-media/shadcnblocks/block/block-1.svg",
title: "فروش آنلاین را مقیاس‌پذیر کنید",
},
] as const;
const IconElem = ({ image, title }: { image: string; title: string }) => (
<div className="flex flex-col items-center">
<div className="flex min-w-0 max-w-full flex-col items-center">
<img
src={image}
alt={`لوگوی ${title}`}
className="mb-3 hidden h-14 w-14 rounded-lg object-cover p-2 shadow-[rgba(50,50,105,0.15)_0px_2px_5px_0px,rgba(0,0,0,0.05)_0px_1px_1px_0px] md:block dark:invert"
className="mb-3 hidden size-14 rounded-lg object-cover p-2 shadow-[rgba(50,50,105,0.15)_0px_2px_5px_0px,rgba(0,0,0,0.05)_0px_1px_1px_0px] md:block dark:invert"
/>
<Badge variant="secondary" className="font-mono text-xs font-semibold">
<Badge
variant="secondary"
className="h-auto max-w-[9.5rem] px-2 py-1 text-center font-mono text-[10px] leading-snug font-semibold whitespace-normal sm:max-w-[11rem] sm:text-xs md:max-w-none"
>
{title}
</Badge>
</div>
@@ -25,69 +59,65 @@ interface Feature152Props {
const Feature152 = ({ className }: Feature152Props) => {
return (
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
<div className="container">
<div className="mb-16 flex flex-col items-center md:mb-6">
<section
dir="rtl"
lang="fa"
className={cn(
"relative w-full max-w-full overflow-hidden py-32",
className,
)}
>
<div className="container min-w-0 max-w-full">
<div className="mb-12 flex w-full min-w-0 flex-col items-center md:mb-16">
<Badge variant="secondary" className="mb-6 bg-muted">
فروش آنلاین
</Badge>
<h1 className="mb-3 max-w-md text-center text-xl font-medium md:text-xl">
<h1 className="mb-3 max-w-md text-center text-xl font-medium text-balance break-words md:text-xl">
تجربه خرید را روان‌تر بسازید
</h1>
<p className="mb-3 max-w-80 text-center">
<p className="mb-3 max-w-80 text-center text-pretty break-words">
هر سفارش را از انبار تا تحویل ببینید
</p>
<Button variant="link" asChild className="text-blue-700">
<a href="#">
نرخ تبدیل فروشگاه را بالا ببرید
<ArrowRight className="ms-2 size-4 rtl:rotate-180" />
<Button
variant="link"
asChild
className="h-auto max-w-full px-2 text-blue-700 whitespace-normal"
>
<a
href="#"
className="inline-flex max-w-full flex-wrap items-center justify-center gap-1 text-center"
>
<span className="text-pretty break-words">
نرخ تبدیل فروشگاه را بالا ببرید
</span>
<ArrowRight className="size-4 shrink-0 rtl:rotate-180" />
</a>
</Button>
</div>
<div className="relative mx-auto flex max-w-3xl flex-col gap-5 overflow-hidden pb-8 md:gap-0">
<div className="flex justify-around md:mb-[-30px]">
<IconElem
image="/block-media/shadcnblocks/block/block-1.svg"
title="فروش آنلاین را مقیاس‌پذیر کنید"
/>
<IconElem
image="/block-media/shadcnblocks/block/block-2.svg"
title="تجربه خرید را روان‌تر بسازید"
/>
<div className="relative mx-auto flex w-full min-w-0 max-w-3xl flex-col gap-5 overflow-hidden pb-8 md:gap-0">
<div className="grid grid-cols-2 justify-items-center gap-3 md:mb-[-30px] md:flex md:justify-around md:gap-0">
<IconElem {...icons[0]} />
<IconElem {...icons[1]} />
</div>
<div className="flex justify-center md:mb-[-30px]">
<IconElem
image="/block-media/shadcnblocks/block/block-3.svg"
title="هر سفارش را از انبار تا تحویل ببینید"
/>
<IconElem {...icons[2]} />
</div>
<div className="flex justify-evenly md:mb-[-30px]">
<IconElem
image="/block-media/shadcnblocks/block/block-4.svg"
title="نرخ تبدیل فروشگاه را بالا ببرید"
/>
<IconElem
image="/block-media/shadcnblocks/block/block-5.svg"
title="موجودی و سفارش را یکجا مدیریت کنید"
/>
<div className="grid grid-cols-2 justify-items-center gap-3 md:mb-[-30px] md:flex md:justify-evenly md:gap-0">
<IconElem {...icons[3]} />
<IconElem {...icons[4]} />
</div>
<div className="flex justify-between">
<IconElem
image="/block-media/shadcnblocks/block/block-6.svg"
title="مشتری را به خرید دوباره برگردانید"
/>
<IconElem
image="/block-media/shadcnblocks/block/block-1.svg"
title="فروش آنلاین را مقیاس‌پذیر کنید"
/>
<div className="grid grid-cols-2 justify-items-center gap-3 md:flex md:justify-between md:gap-0">
<IconElem {...icons[5]} />
<IconElem {...icons[6]} />
</div>
{[...Array(11)].map((_, index) => (
<div
key={index}
className="absolute -bottom-2 start-1/2 z-[-2] aspect-square rounded-full border border-indigo-200"
className="absolute -bottom-2 start-1/2 z-[-2] aspect-square max-w-none rounded-full border border-indigo-200"
style={{
width: 60 + 80 * index + "px",
width: `${60 + 80 * index}px`,
opacity: 0.5,
filter: "saturate(10%)",
transform: "translateX(-50%) translateY(50%)",