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/feature153.tsx
+41 -49
View File
@@ -1,7 +1,6 @@
"use client";
import { ArrowRight } from "lucide-react";
import { useState } from "react";
import {
Carousel,
@@ -14,11 +13,9 @@ import { cn } from "@/lib/utils";
const integrations = [
{
image:
"/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg",
image: "/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg",
title: "بهینه‌سازی محتوا",
description:
"ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
description: "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
info: [
{
title: "تحلیل رقیب",
@@ -37,8 +34,7 @@ const integrations = [
{
image: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
title: "Figma",
description:
"ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
description: "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
info: [
{
title: "پیشنهاد عنوان",
@@ -57,8 +53,7 @@ const integrations = [
{
image: "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
title: "Tailwind",
description:
"ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
description: "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
info: [
{
title: "ردیابی رتبه",
@@ -73,8 +68,7 @@ const integrations = [
{
image: "/block-media/shadcnblocks/block/logos/google-icon.svg",
title: "Google",
description:
"تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
description: "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
info: [
{
title: "تحلیل رقیب",
@@ -97,66 +91,64 @@ interface Feature153Props {
}
const Feature153 = ({ className }: Feature153Props) => {
const [startIndex, setStartIndex] = useState(0);
return (
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
<div className="container">
<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">
<Carousel
opts={{
align: "start",
direction: "rtl",
}}
className="w-full"
className="w-full min-w-0"
>
<div className="mb-6 flex flex-col items-center gap-8 sm:flex-row sm:items-center">
<h1 className="text-center text-xl font-medium sm:text-start">
<div className="mb-6 flex w-full min-w-0 flex-col items-center gap-4 sm:flex-row sm:items-center sm:justify-between sm:gap-8">
<h1 className="max-w-full text-center text-xl font-medium text-balance break-words sm:text-start">
رتبه کلمات کلیدی را پیگیری کنید
</h1>
<div className="mb-[-32px] flex items-center gap-3">
<CarouselPrevious
onClick={() => setStartIndex(startIndex - 1)}
disabled={startIndex === 0}
className="static"
/>
<CarouselNext
onClick={() => setStartIndex(startIndex + 1)}
disabled={startIndex === integrations.length - 1}
className="static"
/>
<div className="flex shrink-0 items-center gap-3">
<CarouselPrevious className="static size-8 translate-y-0 rtl:rotate-180" />
<CarouselNext className="static size-8 translate-y-0 rtl:rotate-180" />
</div>
</div>
<div className="relative">
<CarouselContent
className="ms-6 pt-[5px] pb-5 transition-all duration-300"
style={{
transform: `translateX(${startIndex * 100}%)`,
}}
>
<div className="relative min-w-0">
<CarouselContent className="ml-0 pb-5">
{integrations.map((item) => (
<CarouselItem
key={item.title}
className="flex basis-full md:basis-1/2 xl:basis-1/3"
className="min-w-0 basis-full pl-4 md:basis-1/2 xl:basis-1/3"
>
<div className="flex h-full flex-col justify-between rounded-xl py-14 pe-20 ps-11 text-start shadow-[0px_0px_0px_1px_rgba(17,26,37,0.05),0px_2px_5px_rgba(16,25,36,0.1),0px_5px_20px_rgba(16,25,36,0.1)]">
<div className="mb-6 flex items-center gap-2">
<div className="flex h-full min-w-0 flex-col justify-between rounded-xl px-6 py-10 text-start shadow-[0px_0px_0px_1px_rgba(17,26,37,0.05),0px_2px_5px_rgba(16,25,36,0.1),0px_5px_20px_rgba(16,25,36,0.1)] sm:px-8 sm:py-12 md:px-11 md:py-14">
<div className="mb-6 flex min-w-0 items-center gap-2">
<img
src={item.image}
alt={`لوگوی ${item.title}`}
className="h-7"
className="h-7 shrink-0"
/>
<h2 className="font-semibold">{item.title}</h2>
<h2 className="min-w-0 font-semibold break-words">
{item.title}
</h2>
</div>
<div className="mb-4 text-pretty break-words">
{item.description}
</div>
<div className="mb-4">{item.description}</div>
<div className="mb-10 flex items-center text-sm text-indigo-400">
بیشتر بدانید
<ArrowRight className="ms-2 h-4 rtl:rotate-180" />
<ArrowRight className="ms-2 size-4 shrink-0 rtl:rotate-180" />
</div>
<div className="mt-auto flex flex-col gap-4">
<div className="mt-auto flex min-w-0 flex-col gap-4">
{item.info.map((infoItem) => (
<div key={infoItem.title}>
<h3 className="font-medium">{infoItem.title}</h3>
<p className="text-xs text-muted-foreground">
<div key={infoItem.title} className="min-w-0">
<h3 className="font-medium break-words">
{infoItem.title}
</h3>
<p className="text-xs text-pretty break-words text-muted-foreground">
{infoItem.text}
</p>
</div>
@@ -166,8 +158,8 @@ const Feature153 = ({ className }: Feature153Props) => {
</CarouselItem>
))}
</CarouselContent>
<div className="pointer-events-none absolute inset-0 start-0 z-10 w-[30px] bg-linear-to-e from-background from-10% to-transparent" />
<div className="pointer-events-none absolute inset-0 z-10 bg-linear-to-s from-background via-transparent to-transparent" />
<div className="pointer-events-none absolute inset-y-0 start-0 z-10 w-6 bg-linear-to-e from-background to-transparent sm:w-[30px]" />
<div className="pointer-events-none absolute inset-y-0 end-0 z-10 w-6 bg-linear-to-s from-background to-transparent sm:w-10" />
</div>
</Carousel>
</div>