diff --git a/blocks/feature109.tsx b/blocks/feature109.tsx index e6c347a..5db54b7 100644 --- a/blocks/feature109.tsx +++ b/blocks/feature109.tsx @@ -11,34 +11,41 @@ interface Feature109Props { const Feature109 = ({ className }: Feature109Props) => { return ( -
-
-
-
+
+
+
+
کمپین -

+

ردیابی UTM

-

+

گزارش ROI

-
-
+
تحلیل عملکرد کمپین
-
- - +
+ + { رشد برند -
-

+
+

مدیریت کمپین

سگمنت‌بندی مخاطب - +

diff --git a/blocks/feature120.tsx b/blocks/feature120.tsx index 13796a0..a73d835 100644 --- a/blocks/feature120.tsx +++ b/blocks/feature120.tsx @@ -11,7 +11,7 @@ const team = [ alt: "صف اولویت سرنخ‌ها", }, { - name: "Michael Lee", + name: "عملکرد فروش", role: "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.", avatar: "/block-media/shadcnblocks/block/avatar-2.webp", alt: "داشبورد عملکرد فروش", @@ -66,7 +66,7 @@ const Feature120 = ({ className }: Feature120Props) => {
))}
- +
{ return ( -
-
-
+
+
+
ERP

عملیات سازمان را یکپارچه کنید @@ -112,12 +116,12 @@ const Feature154 = ({ className }: Feature154Props) => { گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.

-
+
- {badges.map((badge) => ( + {badges.map((badge, index) => (
{badge.icon} {badge.title} @@ -125,10 +129,10 @@ const Feature154 = ({ className }: Feature154Props) => { ))}
- {badges.map((badge) => ( + {badges.map((badge, index) => (
{badge.icon} {badge.title} diff --git a/blocks/feature183.tsx b/blocks/feature183.tsx index b03526d..e4350a7 100644 --- a/blocks/feature183.tsx +++ b/blocks/feature183.tsx @@ -60,10 +60,14 @@ interface Feature183Props { const Feature183 = ({ className }: Feature183Props) => { return ( -
-
-
-
+
+
+
+
{ -
+
گزارش مالی یکپارچه { />
-
+

گردش تأیید

@@ -131,7 +135,7 @@ const Feature183 = ({ className }: Feature183Props) => {
-
+

ERP

@@ -168,7 +172,7 @@ const Feature183 = ({ className }: Feature183Props) => {
-
+
{DATA.map((item) => ( ))} diff --git a/blocks/feature197.tsx b/blocks/feature197.tsx index 41236bd..c85a2ad 100644 --- a/blocks/feature197.tsx +++ b/blocks/feature197.tsx @@ -66,24 +66,28 @@ const Feature197 = ({ const [activeImage, setActiveImage] = useState(features[0].image); return ( -
-
+
+

عملیات سازمان را یکپارچه کنید

-
-
+
+
{features.map((tab) => ( { @@ -94,7 +98,7 @@ const Feature197 = ({ > -

+

{tab.description}

-
+
{tab.imageAlt}
@@ -119,15 +123,15 @@ const Feature197 = ({ ))}
-
-
+
+
{features.map((feature) => ( {feature.imageAlt} diff --git a/blocks/feature198.tsx b/blocks/feature198.tsx index 7996c22..7eea62d 100644 --- a/blocks/feature198.tsx +++ b/blocks/feature198.tsx @@ -16,27 +16,23 @@ const DATA: DataItem[] = [ { id: "simplify-workflow", title: "سطح دسترسی", - description: - "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.", + description: "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.", icon: , - className: "absolute top-0.5 cursor-pointer", + className: "lg:mt-0", }, { id: "eliminate-clunky-tools", title: "تحلیل پیش‌بین", - description: - "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.", + description: "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.", icon: , - className: - "absolute -end-4 top-5 cursor-pointer xl:end-5 xl:top-0", + className: "lg:mt-10", }, { id: "connect-workflows", title: "اشتراک گزارش", - description: - "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.", + description: "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.", icon: , - className: "absolute bottom-2 start-[25%] cursor-pointer", + className: "lg:mt-4", }, ]; @@ -52,15 +48,20 @@ const CardComponent = ({ className?: string; }) => { return ( -
- -
{icon}
-
-

{title}

-

{description}

-
- -
+ +
{icon}
+
+

{title}

+

+ {description} +

+
+ ); }; @@ -70,30 +71,24 @@ interface Feature198Props { const Feature198 = ({ className }: Feature198Props) => { return ( -
-
-
-

+
+
+
+

ابزارهای شما باید با کسب‌وکار شما سازگار شوند.{" "} - داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند. + + داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون + اینکه هر بار به تیم داده وابسته باشند. +

-
-
- {DATA.map((card) => ( - - ))} -
-
- -
+
{DATA.map((card) => ( { return ( -
-
-
-
+
+
+
+
گزارش عملکرد
-
-
+
+

داده پراکنده را به تصمیم تبدیل کنید

گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.

-
-
+
{FEATURES.map((feature) => { const Icon = feature.icon; return (

diff --git a/blocks/feature216.tsx b/blocks/feature216.tsx index a0cd454..8075149 100644 --- a/blocks/feature216.tsx +++ b/blocks/feature216.tsx @@ -151,6 +151,7 @@ interface Feature216Props { const Feature216 = ({ className }: Feature216Props) => { const [buttonPosition, setButtonPosition] = useState(0); + // Rightmost tab in RTL (`justify-start`) is the first item. const [tabValue, setTabValue] = useState(TAB_ITEMS[0].value); const triggerRefs = useRef([]); const imageRef = useRef(null); @@ -198,6 +199,8 @@ const Feature216 = ({ className }: Feature216Props) => { setTabValue(value as TabValue); }; + const currentIndex = getCurrentTabIndex(); + return (
@@ -205,7 +208,7 @@ const Feature216 = ({ className }: Feature216Props) => { شاخص‌های کلیدی را یکجا ببینید

- + {TAB_ITEMS.map((trigger, index) => { const Icon = trigger.icon; @@ -259,32 +262,34 @@ const Feature216 = ({ className }: Feature216Props) => {

))} -
- -
+ {/* Physical left (end in RTL): previous — moves toward rightmost tabs */}
+
+ {/* Physical right (start in RTL): next — moves toward leftmost tabs */} +
+
diff --git a/blocks/feature242.tsx b/blocks/feature242.tsx index 068adc1..1835418 100644 --- a/blocks/feature242.tsx +++ b/blocks/feature242.tsx @@ -1,6 +1,6 @@ "use client"; -import { ChevronRight, Plus } from "lucide-react"; +import { ChevronLeft, ChevronRight, Plus } from "lucide-react"; import React from "react"; import { Button } from "@/components/ui/button"; @@ -9,8 +9,6 @@ import { Carousel, CarouselContent, CarouselItem, - CarouselNext, - CarouselPrevious, } from "@/components/ui/carousel"; import { cn } from "@/lib/utils"; @@ -49,7 +47,11 @@ const TESTIMONIALS = [ }, ] as const; -const Feature242 = () => { +interface Feature242Props { + className?: string; +} + +const Feature242 = ({ className }: Feature242Props) => { const [api, setApi] = React.useState(); const [current, setCurrent] = React.useState(0); const [count, setCount] = React.useState(0); @@ -71,9 +73,13 @@ const Feature242 = () => { value.toLocaleString("fa-IR", { minimumIntegerDigits: 2 }); return ( -
-
-
+
+
+

با هوش مصنوعی سریع‌تر تصمیم بگیرید

@@ -89,30 +95,31 @@ const Feature242 = () => {

- + - + {/* Override -ml-4 — breaks RTL track sizing */} + {TESTIMONIALS.map((item) => ( -
+
{item.imageAlt} -
-
+
+
{item.title}
{
-
- - + {/* + Embla RTL: scrollNext/scrollPrev are index-based, so default + ChevronLeft→prev / ChevronRight→next feels reversed visually. + Match arrow direction to movement by swapping handlers. + */} +
+ +
@@ -163,7 +193,7 @@ const DottedDiv = ({ children: React.ReactNode; className?: string; }) => ( -
+
diff --git a/blocks/feature246.tsx b/blocks/feature246.tsx index bbf16b9..1b5e37c 100644 --- a/blocks/feature246.tsx +++ b/blocks/feature246.tsx @@ -18,9 +18,13 @@ interface Feature246Props { const Feature246 = ({ className }: Feature246Props) => { return ( -
-
-
+
+
+

ERP
@@ -28,9 +32,9 @@ const Feature246 = ({ className }: Feature246Props) => {

{BENEFITS.map((benefit) => ( -
-
- +
+
+
{benefit.label} @@ -38,22 +42,22 @@ const Feature246 = ({ className }: Feature246Props) => {
))}
-
+
-
-
+
گزارش مالی یکپارچه
diff --git a/blocks/feature249.tsx b/blocks/feature249.tsx index 331978f..34fc6ad 100644 --- a/blocks/feature249.tsx +++ b/blocks/feature249.tsx @@ -13,20 +13,26 @@ interface Feature249Props { const Feature249 = ({ className }: Feature249Props) => { return ( -
-
+
+
-

+

با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.

-

- پیش‌بینی درآمد را دقیق‌تر کنید +

+ + پیش‌بینی درآمد را دقیق‌تر کنید + - چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند. + چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید

@@ -78,7 +84,8 @@ export const ContainerScroll = ({ }, []); const scaleDimensions = () => { - return isMobile ? [0.7, 0.9] : [1.05, 1]; + // Keep scale ≤ 1 so the 3D card never bleeds past the preview frame. + return isMobile ? [0.7, 0.9] : [0.95, 1]; }; const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]); @@ -87,11 +94,11 @@ export const ContainerScroll = ({ return (
{titleComponent} @@ -140,9 +147,9 @@ export const Card = ({ rotateX: rotate, scale, }} - className="-4 mx-auto -mt-12 h-[30rem] w-full max-w-5xl rounded-[30px] p-2 shadow-2xl md:h-[40rem] md:p-6" + className="mx-auto -mt-12 h-[24rem] w-full min-w-0 max-w-5xl overflow-hidden rounded-[30px] p-2 shadow-2xl md:h-[36rem] md:p-6 lg:h-[40rem]" > -
+
{children}
diff --git a/blocks/feature250.tsx b/blocks/feature250.tsx index 58626b2..27f492b 100644 --- a/blocks/feature250.tsx +++ b/blocks/feature250.tsx @@ -14,12 +14,16 @@ interface Feature250Props { const Feature250 = ({ className }: Feature250Props) => { return ( -
-
+
+

با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.

-

+

کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند

@@ -44,14 +48,15 @@ function AnimatedBeamIllustration() { const div7Ref = useRef(null); return (
-
-
+
+ {/* Reserve width on lg so absolute nodes/beams stay inside the frame (avoid lg:w-0 bleed). */} +
@@ -61,7 +66,7 @@ function AnimatedBeamIllustration() {
@@ -71,7 +76,7 @@ function AnimatedBeamIllustration() {
@@ -81,7 +86,7 @@ function AnimatedBeamIllustration() {
@@ -91,7 +96,7 @@ function AnimatedBeamIllustration() {
@@ -102,7 +107,7 @@ function AnimatedBeamIllustration() {
@@ -180,10 +185,10 @@ function AnimatedBeamIllustration() { reverse={REVERSE} /> = ({ height={svgDimensions.height} xmlns="http://www.w3.org/2000/svg" className={cn( - "pointer-events-none absolute start-0 top-0 transform-gpu stroke-2", + "pointer-events-none absolute start-0 top-0 max-w-full overflow-hidden transform-gpu stroke-2", className, )} viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`} diff --git a/blocks/feature252.tsx b/blocks/feature252.tsx index cafebc6..bed74ea 100644 --- a/blocks/feature252.tsx +++ b/blocks/feature252.tsx @@ -10,11 +10,18 @@ interface Feature252Props { const Feature252 = ({ className }: Feature252Props) => { return ( -
-
-
+
+
+
-
-
+
+

گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.

-

+

داده پراکنده را به تصمیم تبدیل کنید

- + {/* Keep ripple circles inside the card: smaller radius + milder offset */} +
diff --git a/blocks/feature253.tsx b/blocks/feature253.tsx index 4c57544..1f49cfa 100644 --- a/blocks/feature253.tsx +++ b/blocks/feature253.tsx @@ -11,11 +11,15 @@ interface Feature253Props { const Feature253 = ({ className }: Feature253Props) => { return ( -
-
-
-
-

+
+
+
+
+

زمان حل مسئله را کوتاه کنید

@@ -23,14 +27,15 @@ const Feature253 = ({ className }: Feature253Props) => {

-
- +
+ {/* Keep globe peek inside the card — avoid -end-100 / scale-150 bleed */} +
diff --git a/blocks/feature254.tsx b/blocks/feature254.tsx index 91a9845..8ae5f97 100644 --- a/blocks/feature254.tsx +++ b/blocks/feature254.tsx @@ -75,70 +75,77 @@ interface Feature254Props { const Feature254 = ({ className }: Feature254Props) => { return ( -
-
-
-
-
-

- با هوش مصنوعی سریع‌تر تصمیم بگیرید -

-

- مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند. -

+
+
+
+
+

+ با هوش مصنوعی سریع‌تر تصمیم بگیرید +

+

+ مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. + تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند. +

- -
-
- - {CIRCLE_1_IMAGES.map((item) => ( -
- {item.imageAlt} -
- ))} - - - {CIRCLE_2_IMAGES.map((item) => ( -
- {item.imageAlt} -
- ))} - - - {CIRCLE_3_IMAGES.map((item) => ( -
- {item.imageAlt} -
- ))} - -
+ +
+ +
+ + {CIRCLE_1_IMAGES.map((item) => ( +
+ {item.imageAlt} +
+ ))} + + + {CIRCLE_2_IMAGES.map((item) => ( +
+ {item.imageAlt} +
+ ))} + + + {CIRCLE_3_IMAGES.map((item) => ( +
+ {item.imageAlt} +
+ ))} +
diff --git a/blocks/feature257.tsx b/blocks/feature257.tsx index ab593ed..3807c36 100644 --- a/blocks/feature257.tsx +++ b/blocks/feature257.tsx @@ -73,16 +73,16 @@ interface Feature257Props { } const ToolCard = ({ tool }: { tool: ToolItem }) => ( - -
+ +
{tool.category}
{tool.imageAlt} -

+

{tool.name}

@@ -90,14 +90,21 @@ const ToolCard = ({ tool }: { tool: ToolItem }) => ( const Feature257 = ({ className }: Feature257Props) => { return ( -
-
-
+
+
+
{TOOLS.slice(0, 2).map((tool) => ( ))}
-
+
{TOOLS.slice(2, 9).map((tool) => ( ))} diff --git a/blocks/feature267.tsx b/blocks/feature267.tsx index 61a2019..e1ff751 100644 --- a/blocks/feature267.tsx +++ b/blocks/feature267.tsx @@ -29,41 +29,44 @@ const Feature267 = ({ className }: Feature267Props) => { dir="rtl" lang="fa" className={cn( - "relative h-full w-screen overflow-hidden py-32", + "relative h-full w-full min-w-0 overflow-hidden py-32", className, )} > -
-
-
- -

+

+
+
+ +

تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.

-

+

فروش تیم‌تان را یکجا مدیریت کنید

از اولین تماس تا تمدید قرارداد، هر مرحله فروش قابل ردیابی است. گزارش‌های لحظه‌ای به مدیران کمک می‌کند گلوگاه‌ها را قبل از از دست دادن درآمد شناسایی کنند.

-
-
+
+
-
-
- +
+
diff --git a/blocks/feature268.tsx b/blocks/feature268.tsx index c5d1638..be9f624 100644 --- a/blocks/feature268.tsx +++ b/blocks/feature268.tsx @@ -49,32 +49,35 @@ const Feature268 = ({ className }: Feature268Props) => {
-
-
+
+

پیش‌بینی درآمد را دقیق‌تر کنید

-

+

با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.

-
+
-
    -
  • -

    +

      +
    • +

      چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.

      • {FEATURES.map((feature) => ( -
    • +
    • -

      +

      {feature.title} {feature.description}

      @@ -83,10 +86,10 @@ const Feature268 = ({ className }: Feature268Props) => {
- + { تیم فروش بستن معامله - + صف اولویت سرنخ‌ها -
+

-
- -

گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.

- +
+ +

+ گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و + نگهداشت مشتری داشته است. +

+
-
    +
      {FEATURES.map((feature) => ( -
    • +
    • -

      +

      {feature.label}

      • @@ -83,46 +86,43 @@ export const AuroraBackground = ({ ...props }: AuroraBackgroundProps) => { return ( -
      +
      -
      -
      - {children} + showRadialGradient && + `[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`, + )} + />
      -
      + {children} +
); }; diff --git a/blocks/feature272.tsx b/blocks/feature272.tsx index 2db8616..b14353d 100644 --- a/blocks/feature272.tsx +++ b/blocks/feature272.tsx @@ -34,12 +34,12 @@ const Feature272 = ({ className }: Feature272Props) => { dir="rtl" lang="fa" className={cn( - "dark h-full w-screen overflow-hidden bg-background py-32 text-foreground", + "dark relative h-full w-full overflow-hidden bg-background py-32 text-foreground", className, )} > -
-

+

+

پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.

@@ -48,11 +48,11 @@ const Feature272 = ({ className }: Feature272Props) => {

رضایت مشتری و زمان حل را پیگیری کنید تا نقاط ضعف فرایند پشتیبانی را بهبود دهید.

-
+
{STEPS.map((step, index) => (

{step.title} @@ -61,14 +61,14 @@ const Feature272 = ({ className }: Feature272Props) => { {step.description}

{index < STEPS.length - 1 && ( -
+
)}
))} -
-
+
+
diff --git a/blocks/feature280.tsx b/blocks/feature280.tsx index a76fe6a..35a09a6 100644 --- a/blocks/feature280.tsx +++ b/blocks/feature280.tsx @@ -83,31 +83,36 @@ const Feature280 = ({ className }: Feature280Props) => {
-
-
+
+

تصمیم استراتژیک را داده‌محور کنید

-
- -

هشدارهای هوشمند زمانی که شاخص از مسیر هدف خارج می‌شود، مدیران را به‌موقع مطلع می‌کند.

- +
+ +

+ هشدارهای هوشمند زمانی که شاخص از مسیر هدف خارج می‌شود، مدیران را به‌موقع مطلع می‌کند. +

+
-
    +
      {FEATURES.map((feature) => ( -
    • +
    • -

      +

      {feature.label}

      • ))}
-
+
diff --git a/blocks/feature281.tsx b/blocks/feature281.tsx index b860c2e..45c8b83 100644 --- a/blocks/feature281.tsx +++ b/blocks/feature281.tsx @@ -120,10 +120,13 @@ const Feature281 = ({ className }: Feature281Props) => {
-
-
+
+

ارتباط با مشتری

@@ -131,7 +134,7 @@ const Feature281 = ({ className }: Feature281Props) => { پایپ‌لاین فروش

-
+
-
+
{IMAGES.map((image, index) => ( { }} onHoverStart={() => setHoveredIndex(index)} onHoverEnd={() => setHoveredIndex(null)} - className={image.className} + className={cn("pointer-events-auto", image.className)} > {
-
-
-
+
+
+
ترافیک ارگانیک @@ -39,24 +42,24 @@ const Feature292 = ({ className }: Feature292Props) => { گزارش رتبه و ترافیک نشان می‌دهد کدام اقدام بیشترین اثر را روی دیده‌شدن داشته است.

-
+
-
-
+
داشبورد SEO
diff --git a/blocks/feature293.tsx b/blocks/feature293.tsx index 0c5ba5b..d8f0925 100644 --- a/blocks/feature293.tsx +++ b/blocks/feature293.tsx @@ -15,32 +15,32 @@ const Feature293 = ({ className }: Feature293Props) => { dir="rtl" lang="fa" className={cn( - "dark relative h-screen w-screen overflow-hidden bg-background py-32 text-foreground", + "dark relative h-svh max-h-[1400px] min-h-[600px] w-full overflow-hidden bg-background py-32 text-foreground", className, )} > -
-
+
+

از خرید تا فروش در یک سیستم

گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.

-
+
-
-
+
diff --git a/blocks/feature294.tsx b/blocks/feature294.tsx index f4539e1..dcb57ee 100644 --- a/blocks/feature294.tsx +++ b/blocks/feature294.tsx @@ -49,12 +49,12 @@ const Feature294 = ({ className }: Feature294Props) => { dir="rtl" lang="fa" className={cn( - "dark relative w-screen overflow-hidden bg-background py-32 text-foreground", + "dark relative w-full overflow-hidden bg-background py-32 text-foreground", className, )} > -
-
+
+

تصمیم استراتژیک را داده‌محور کنید

@@ -62,7 +62,7 @@ const Feature294 = ({ className }: Feature294Props) => { داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.

-
+
@@ -80,13 +80,13 @@ const Feature294 = ({ className }: Feature294Props) => {
-
+
{FEATURES.map((feature) => { const IconComponent = feature.icon; return ( -
+
-
+

{feature.title}

{feature.description} diff --git a/blocks/feature322.tsx b/blocks/feature322.tsx index 66732d5..e1e13c0 100644 --- a/blocks/feature322.tsx +++ b/blocks/feature322.tsx @@ -4,21 +4,14 @@ import type { MotionValue } from "framer-motion"; import { AnimatePresence, motion, + useMotionValueEvent, useScroll, useTransform, } from "framer-motion"; -import React, { useEffect, useRef, useState } from "react"; +import React, { useRef, useState } from "react"; import { cn } from "@/lib/utils"; -const getAnimationRange = (index: number, totalFeatures: number) => { - const cardPosition = index / totalFeatures; - - const range = [0, cardPosition, 1]; - - return range; -}; - interface Statistics { value: string; label: string; @@ -39,52 +32,15 @@ interface Testimonial { designation: string; } -interface AnimationWrapperProps { - children: React.ReactNode; - delay?: number; - className?: string; - duration?: number; -} - -const AnimationWrapper = ({ - children, - delay = 0, - className, - duration = 0.3, -}: AnimationWrapperProps) => { - return ( - - {children} - - ); -}; - interface TestimonialCardProps { testimonial: Testimonial; } const TestimonialCard = ({ testimonial }: TestimonialCardProps) => { return ( -

+
{testimonial.author} { «{testimonial.quote}»

- {testimonial.author}{" "} + {testimonial.author}{" "} {testimonial.designation}

@@ -112,18 +68,13 @@ const ScrollProgressIndicator = ({ activeIndex, scrollYProgress, }: ScrollProgressIndicatorProps) => { - const range = getAnimationRange( - Math.max(0, activeIndex - 0.5), - totalFeatures, + const segmentStart = activeIndex / totalFeatures; + const segmentEnd = (activeIndex + 1) / totalFeatures; + const width = useTransform( + scrollYProgress, + [segmentStart, segmentEnd], + ["0%", "100%"], ); - const nextRange = getAnimationRange( - Math.min(totalFeatures, activeIndex + 0.5), - totalFeatures, - ); - - const currentRange = [range[1], nextRange[1]]; - - const width = useTransform(scrollYProgress, currentRange, ["0%", "100%"]); return (
@@ -137,14 +88,12 @@ const ScrollProgressIndicator = ({ activeIndex > index && "bg-foreground", )} > - {activeIndex === index && ( + {activeIndex === index ? ( - )} + ) : null}
); })} @@ -168,19 +117,13 @@ const FeatureCard = ({ scrollYProgress, }: FeatureCardProps) => { return ( -
-
-
- -

{feature.title}

- - -

{feature.subtitle}

- +
+
+
+

+ {feature.title} +

+

{feature.subtitle}

- -

{feature.statistics.value}

- - -

{feature.statistics.label}

- +

{feature.statistics.value}

+

{feature.statistics.label}

- +
{feature.title} - {index === 0 && } - + {index === 0 ? : null} +
); }; @@ -280,81 +216,88 @@ const DEFAULT_TESTIMONIAL: Testimonial = { designation: "با هوش مصنوعی سریع‌تر تصمیم بگیرید", }; +function getActiveFeatureIndex(progress: number, total: number) { + if (total <= 0) return 0; + if (progress >= 1) return total - 1; + return Math.min(total - 1, Math.floor(progress * total)); +} + const Feature322 = ({ className, features = DEFAULT_FEATURES, testimonial = DEFAULT_TESTIMONIAL, }: Feature322Props) => { - const ref = useRef(null); + const scrollRef = useRef(null); const { scrollYProgress } = useScroll({ - container: ref, + container: scrollRef, }); const [activeIndex, setActiveIndex] = useState(0); - useEffect(() => { - const unsubscribe = scrollYProgress.on("change", (latest) => { - let minDistance = Infinity; - let temp = 0; - features.forEach((_, index) => { - const range = getAnimationRange(index, features.length); - const position = range[1]; - const distance = Math.abs(latest - position); - if (distance < minDistance) { - minDistance = distance; - temp = index; - } - }); - setActiveIndex(temp); - }); + useMotionValueEvent(scrollYProgress, "change", (latest) => { + const nextIndex = getActiveFeatureIndex(latest, features.length); + setActiveIndex((prev) => (prev === nextIndex ? prev : nextIndex)); + }); - return () => unsubscribe(); - }, [features, scrollYProgress]); + const activeFeature = features[activeIndex] ?? features[0]; return (
-
-
-
- - - -
-
-
-
- {features.map((feature, index) => { - return ( - - ); - })} +
+ {/* Desktop: sticky stage + scroll spacer */} +
+
+
+ + {activeFeature ? ( + + + + ) : null} + +
+ +
-
+ {/* Mobile / tablet: stacked cards, no crossfade thrash */} +
+ {features.map((feature, index) => ( + + ))} +
); diff --git a/blocks/feature323.tsx b/blocks/feature323.tsx index 1ddf9e8..b0b9062 100644 --- a/blocks/feature323.tsx +++ b/blocks/feature323.tsx @@ -90,7 +90,7 @@ const FeatureCard = ({ feature, isActive, onClick }: FeatureCardProps) => { style={{ borderRadius: "24px", }} - className="flex cursor-pointer items-start gap-4 overflow-hidden bg-background text-start md:w-fit md:max-w-sm" + className="flex min-w-0 max-w-full cursor-pointer items-start gap-4 overflow-hidden bg-background text-start md:w-fit md:max-w-sm" onClick={onClick} > {isActive ? ( @@ -106,7 +106,7 @@ const FeatureCard = ({ feature, isActive, onClick }: FeatureCardProps) => { delay: 0.3, ease: "easeOut", }} - className="p-6 text-sm md:p-8 md:text-base" + className="min-w-0 p-6 text-sm md:p-8 md:text-base" >

{feature.title}.{" "} @@ -136,7 +136,7 @@ const FeatureCard = ({ feature, isActive, onClick }: FeatureCardProps) => { }} > -

{feature.title}

+

{feature.title}

)} @@ -164,14 +164,14 @@ const FeaturesDesktop = ({ isNextDisabled, }: FeaturesDesktopProps) => { return ( -
+
-
+
{features.map((feature, index) => { return ( ({ opacity: 0, - scale: 0.6, - x: `${dir * -50}%`, + scale: 0.9, + x: `${dir * -20}%`, }), animate: { opacity: 1, @@ -219,17 +219,17 @@ const FeaturesMobile = ({ }, exit: (dir: 1 | -1) => ({ opacity: 0, - scale: 0.6, - x: `${dir * 50}%`, + scale: 0.9, + x: `${dir * 20}%`, }), }; return ( -
+
-
diff --git a/blocks/feature98.tsx b/blocks/feature98.tsx index 5d82318..9ea253d 100644 --- a/blocks/feature98.tsx +++ b/blocks/feature98.tsx @@ -37,25 +37,34 @@ interface Feature98Props { const Feature98 = ({ className }: Feature98Props) => { return ( -
-
-
-
-
-

+

+
+
+
+
+

گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.

-

+

داده پراکنده را به تصمیم تبدیل کنید

-
-

+

+

داده فروش، بازاریابی و پشتیبانی در داشبوردهای یکپارچه جمع می‌شود. مدیران بدون انتظار گزارش دستی، وضعیت واقعی کسب‌وکار را می‌بینند.

-
- - +
@@ -63,17 +72,17 @@ const Feature98 = ({ className }: Feature98Props) => {
-
+
{cards.map((card) => ( -
-
+
+

{card.title}

-

{card.description}

+

{card.description}

@@ -82,7 +91,7 @@ const Feature98 = ({ className }: Feature98Props) => { {card.imageAlt}
diff --git a/blocks/hero145.tsx b/blocks/hero145.tsx index 0b3ad27..2992d89 100644 --- a/blocks/hero145.tsx +++ b/blocks/hero145.tsx @@ -11,44 +11,44 @@ const Hero145 = ({ className }: Hero145Props) => { return (
-
-
-

+
+
+

به استخدام برترین
-
-
+
+
نمایندگان فروش امنیت سایبری
-
+
تست‌کنندگان نفوذ
-
+
مهندسان فروش
-
+
معماران IAM
-
+
مدیران ارشد امنیت اطلاعات
-
+
مهندسان امنیت ابری
-
+
مهندسان امنیت اپلیکیشن

-
-

+

+

فرآیند جذب نیرو را سریع‌تر و هدفمندتر انجام دهید. -

-
-
+

+
+
-
+
تصویر نمونه { return (
-
+
-
-
-

+
+
+

توانایی مراقبت را گسترش دهید

-

+

ناکارآمدی‌ها را حذف و مراقبت از بیمار را با سیستم جامع بهداشت و درمانی که گردش‌کار شما را یکپارچه و بهینه می‌کند، ارتقا دهید.

@@ -29,7 +32,7 @@ const Hero167 = ({ className }: Hero167Props) => {
-
-
-
+
+
+
{
-
+
{ return ( -
-
-
-
-

+
+
+
+
+

راهکارهای هوشمند برای رشد کسب‌وکار -

-

+

+

با استفاده از ابزارهای یکپارچه و هوشمند، بهره‌وری تیم را افزایش دهید و فرایندهای کاری را ساده‌تر کنید. -

+

-
-
+
+
تصویر نمونه -
+
تصویر نمونه تصویر نمونه
تصویر نمونه
diff --git a/blocks/hero178.tsx b/blocks/hero178.tsx index bc0419a..67e9eb4 100644 --- a/blocks/hero178.tsx +++ b/blocks/hero178.tsx @@ -19,7 +19,7 @@ const Hero178 = ({ className }: Hero178Props) => {

پشتیبانی مشتری

-

+

تجربه
پشتیبانی مشتری را متحول کنید diff --git a/blocks/hero179.tsx b/blocks/hero179.tsx index c65e2e9..8110380 100644 --- a/blocks/hero179.tsx +++ b/blocks/hero179.tsx @@ -16,7 +16,7 @@ const Hero179 = ({ className }: Hero179Props) => {

صندوق ورودی مشترک

-

+

صندوق ورودی تیمی
را سازمان‌دهی کنید diff --git a/blocks/hero195.tsx b/blocks/hero195.tsx index 6cfeaac..0de0d27 100644 --- a/blocks/hero195.tsx +++ b/blocks/hero195.tsx @@ -81,10 +81,10 @@ const Hero195 = ({
-

+

{title}

-

+

{description}

diff --git a/blocks/hero202.tsx b/blocks/hero202.tsx index 8d8145a..a98e952 100644 --- a/blocks/hero202.tsx +++ b/blocks/hero202.tsx @@ -46,7 +46,7 @@ const Hero202 = ({ className }: Hero202Props) => {
-
+
{ return ( -
-
-

+
+
+

کتابخانه کامپوننت -

-

+

+

کامپوننت‌های آماده برای توسعه سریع رابط کاربری -

-

+

+

صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند. -

+

-
+
- +
- {/* Iphone mockup with content */} -
+ {/* Iphone mockup with content — centered in preview frame */} +
{

کامپوننت‌های رابط کاربری -
+

آخرین به‌روزرسانی -

+

2025

@@ -72,12 +77,12 @@ const Hero204 = ({ className }: Hero204Props) => { {

بلاک‌های صفحات -
+

به‌روزرسانی جدید -

+

2025

diff --git a/blocks/hero214.tsx b/blocks/hero214.tsx index b66dffe..4baf2b6 100644 --- a/blocks/hero214.tsx +++ b/blocks/hero214.tsx @@ -1,7 +1,7 @@ "use client"; import { AnimatePresence, motion } from "framer-motion"; -import { ArrowRight } from "lucide-react"; +import { ArrowUpRight } from "lucide-react"; import React, { useEffect, useState } from "react"; import { Button } from "@/components/ui/button"; @@ -11,156 +11,134 @@ interface Hero214Props { className?: string; } -const Hero214 = ({ className }: Hero214Props) => { - const images = [ - { - src: "/block-media/shadcnblocks/block/lummi/bw12.jpeg", - alt: "تصویر پرتره", - name: "Joanna Doe", - }, - { - src: "/block-media/shadcnblocks/block/lummi/bw13.jpeg", - alt: "تصویر پرتره", - name: "مریم چناری", - }, - { - src: "/block-media/shadcnblocks/block/lummi/bw14.jpeg", - alt: "تصویر پرتره", - name: "Joanna Doe", - }, - ]; +const IMAGES = [ + { + src: "/block-media/shadcnblocks/block/lummi/landscape1.jpeg", + alt: "نمای معماری مدرن", + }, + { + src: "/block-media/shadcnblocks/block/lummi/landscape2.jpeg", + alt: "فضای معماری مینیمال", + }, + { + src: "/block-media/shadcnblocks/block/lummi/highRise.jpg", + alt: "ساختمان مرتفع معاصر", + }, +] as const; +const Hero214 = ({ className }: Hero214Props) => { const [currentIndex, setCurrentIndex] = useState(0); + const secondaryA = IMAGES[(currentIndex + 1) % IMAGES.length]; + const secondaryB = IMAGES[(currentIndex + 2) % IMAGES.length]; useEffect(() => { const timer = setTimeout(() => { - setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length); + setCurrentIndex((prev) => (prev + 1) % IMAGES.length); }, 2500); return () => clearTimeout(timer); - }, [currentIndex, images.length]); + }, [currentIndex]); return ( -
-
-
-

- خانه ایده‌آل خود را در
شهر خود پیدا کنید -

-
-
- - - - - +
+
+ {/* + Composition matches the reference: + title → top-left cutout, thumbs → top-right cutout, CTA → bottom-left notch. + Physical left/right align with the LTR SVG mask. + */} +
+

+ بلاک‌های آماده با رابط کاربری و Tailwind +

-
- - +
+ + - - - - - - -
+ -
-
- - - -
{" "} -
- - - + {/* Top-right secondary thumbs (sit in the mask cutout) */} +
+ + + + + + + + + +
-
- + {/* Mobile thumbs */} +
+
+ {secondaryA.alt} +
+
+ {secondaryB.alt} +
+
+ + {/* Bottom-left CTA in the mask notch */} + +
@@ -175,10 +153,10 @@ interface SvgPath { width: number; } -type MaskType = "type-1" | "type-2" | "type-3" | "type-4" | "type-5"; +type MaskType = "type-5"; interface MaskedDivProps { - children: React.ReactElement; + children: React.ReactNode; maskType?: MaskType; className?: string; backgroundColor?: string; @@ -186,67 +164,49 @@ interface MaskedDivProps { } const svgPaths: Record = { - "type-1": { - path: "M0.928955 40.9769C0.928955 18.9149 18.7917 1.01844 40.8536 0.976903L289.97 0.507853C308.413 0.473128 323.521 15.1483 324.022 33.5845L324.886 65.4007C325.955 104.745 358.022 136.159 397.38 136.417L432.98 136.65C447.818 136.748 459.797 148.799 459.803 163.637L459.982 550.982C459.992 573.08 442.08 591 419.982 591H40.9289C18.8376 591 0.928955 573.091 0.928955 551V40.9769Z", - height: 591, - width: 460, - }, - "type-2": { - path: "M0.811768 77.2118C0.811768 60.4225 14.4222 46.8121 31.2115 46.8121H180.95C192.496 46.8121 201.855 37.4527 201.855 25.9073V25.9073C201.855 11.9565 213.164 0.647217 227.115 0.647217H529.273C548.014 0.647217 563.206 15.8395 563.206 34.5802V34.5802C563.206 50.0897 575.779 62.6626 591.289 62.6626H820.388C837.177 62.6626 850.787 76.273 850.787 93.0623V350.953C850.787 367.742 837.177 381.353 820.388 381.353H366.165C349.852 381.353 336.627 368.128 336.627 351.814V351.814C336.627 335.501 323.402 322.276 307.089 322.276H31.2114C14.4222 322.276 0.811768 308.666 0.811768 291.876V77.2118Z", - height: 381, - width: 850, - }, - "type-3": { - path: "M0.680664 112.659C0.680664 50.805 50.823 0.662672 112.677 0.662672H413.07C456.315 0.662672 497.495 19.1588 526.221 51.4846V51.4846C554.948 83.8104 596.128 102.307 639.373 102.307H711.793C752.427 102.307 790.787 83.5522 815.744 51.4846V51.4846C840.7 19.417 879.06 0.662644 919.695 0.662597L1225.01 0.66224C1286.86 0.662168 1337.01 50.8046 1337.01 112.658V652.815C1337.01 714.668 1286.86 764.811 1225.01 764.811L670 764.811H335.34H278.376C217.423 764.811 168.01 715.399 168.01 654.446V626.747C168.01 580.208 130.283 542.48 83.7437 542.48V542.48C37.8692 542.48 0.680664 505.292 0.680664 459.417V382.737V112.659Z", - height: 889, - width: 1340, - }, - "type-4": { - path: "M0.811768 34.5451C0.811768 15.7441 16.053 0.502808 34.8541 0.502808H816.745C835.546 0.502808 850.787 15.7441 850.787 34.5452V242.977C850.787 261.778 835.546 277.019 816.745 277.019H638.293H550.537C527.035 277.019 504.789 266.407 490.001 248.141L486.211 243.46C453.263 202.765 390.688 204.378 359.881 246.717V246.717C346.027 265.756 323.901 277.019 300.355 277.019H213.306H34.8541C16.0531 277.019 0.811768 261.778 0.811768 242.977V34.5451Z", - height: 278, - width: 851, - }, + // Notched organic frame: title pocket (top-left), thumbs pocket (top-right), CTA notch (bottom-left) "type-5": { path: "M0.589399 112.279C0.589402 82.1213 25.037 57.6738 55.1946 57.6738H335.688C350.06 57.6738 361.712 46.0226 361.712 31.6502C361.712 14.2835 375.79 0.205078 393.157 0.205078H949.833C983.496 0.205078 1010.78 27.4941 1010.78 61.1568C1010.78 89.0156 1033.37 111.6 1061.23 111.6H1472.74C1502.9 111.6 1527.35 136.047 1527.35 166.205V629.438C1527.35 659.596 1502.9 684.044 1472.74 684.044H639.176C619.635 684.044 603.794 668.203 603.794 648.662C603.794 629.122 587.954 613.281 568.413 613.281H55.1945C25.0369 613.281 0.589358 588.833 0.58936 558.676L0.589399 112.279Z", - height: 700, + height: 684, width: 1528, }, }; +function buildMaskDataUrl(mask: SvgPath): string { + return `data:image/svg+xml,%3Csvg width='${mask.width}' height='${mask.height}' viewBox='0 0 ${mask.width} ${mask.height}' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='${mask.path}' fill='%23D9D9D9'/%3E%3C/svg%3E`; +} + const MaskedDiv: React.FC = ({ children, - maskType = "type-1", + maskType = "type-5", className = "", backgroundColor = "transparent", size = 1, }) => { const selectedMask = svgPaths[maskType]; - - const svgString = `${selectedMask.width}${selectedMask.height}${selectedMask.width} ${selectedMask.height}${selectedMask.path}`; + const maskUrl = buildMaskDataUrl(selectedMask); const containerStyle: React.CSSProperties = { - aspectRatio: `${selectedMask.width}/${selectedMask.height}`, + aspectRatio: `${selectedMask.width} / ${selectedMask.height}`, backgroundColor, - maskImage: `url("${svgString}")`, - WebkitMaskImage: `url("${svgString}")`, + maskImage: `url("${maskUrl}")`, + WebkitMaskImage: `url("${maskUrl}")`, maskRepeat: "no-repeat", WebkitMaskRepeat: "no-repeat", - maskSize: "contain", - WebkitMaskSize: "contain", + maskSize: "100% 100%", + WebkitMaskSize: "100% 100%", + maskPosition: "center", + WebkitMaskPosition: "center", width: `${size * 100}%`, maxWidth: "100%", - margin: "0 auto", }; return ( -
- {React.cloneElement(children, { - className: `w-full h-full object-cover transition-all duration-300 ${children.props.className || "" - }`, - })} -
+ {children} +
); }; diff --git a/blocks/hero215.tsx b/blocks/hero215.tsx index cc1fcab..60ac3da 100644 --- a/blocks/hero215.tsx +++ b/blocks/hero215.tsx @@ -27,7 +27,7 @@ const Hero215 = ({ className }: Hero215Props) => {
-
+
{ return (
-
-
-
- +
+ + - - کامپوننت‌ها - - -
+ کامپوننت‌ها + +
); diff --git a/blocks/hero226.tsx b/blocks/hero226.tsx index 3e69d8a..e380297 100644 --- a/blocks/hero226.tsx +++ b/blocks/hero226.tsx @@ -78,10 +78,12 @@ const Hero226 = ({ className }: Hero226Props) => { > { }), ]} > - + {/* Override -ml-4 / pl-4 — they break RTL single-slide sizing */} + {Images.map((img, index) => ( - -
-
-
- تصویر نمونه -
-
-

- {img.title} -

-

- {img.description} -

-
- + +
+
+ تصویر نمونه +
+
+

+ {img.title} +

+

+ {img.description} +

+
+
))} - {/* Navigation Dots */}
- {Array.from({ length: 5 }).map((_, index) => ( + {Images.map((_, index) => ( -

+

مجموعه بلاک‌های آماده
برای رابط کاربری و استایل‌دهی مدرن -

-

+

+

صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند. -

-
+

+
); diff --git a/blocks/hero230.tsx b/blocks/hero230.tsx index 2740e3b..a7875e4 100644 --- a/blocks/hero230.tsx +++ b/blocks/hero230.tsx @@ -1,7 +1,6 @@ "use client"; import AutoScroll from "embla-carousel-auto-scroll"; -import Autoplay from "embla-carousel-autoplay"; import { ArrowRight } from "lucide-react"; import React from "react"; @@ -186,7 +185,15 @@ const Hero230 = ({ className }: Hero230Props) => {
@@ -211,7 +218,15 @@ const Hero230 = ({ className }: Hero230Props) => {
diff --git a/blocks/hero232.tsx b/blocks/hero232.tsx index 49793d7..17762fa 100644 --- a/blocks/hero232.tsx +++ b/blocks/hero232.tsx @@ -16,12 +16,12 @@ const Hero232 = ({ className }: Hero232Props) => { return (
-
-
+
+
-
-

+
+

تنها اپی که برای ماندن @@ -40,10 +40,10 @@ const Hero232 = ({ className }: Hero232Props) => {

-

+

صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند. -

-
+

+

); diff --git a/blocks/hero233.tsx b/blocks/hero233.tsx index 1580409..f5c7eb5 100644 --- a/blocks/hero233.tsx +++ b/blocks/hero233.tsx @@ -19,11 +19,11 @@ const Hero233 = ({ className }: Hero233Props) => { return (
-
+
-
-

+
+

تنها اپی که برای ماندن @@ -43,10 +43,10 @@ const Hero233 = ({ className }: Hero233Props) => {

-

+

صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند. -

-
+

+
-
+
{Array.from({ length: isMobile ? 7 : 18 }).map((_, i) => ( { delay: i * 0.05, ease: "easeOut", }} - className="w-24 border-l bg-gradient-to-b to-transparent transition-all ease-in-out hover:scale-110 hover:from-black/2" + className="w-24 shrink-0 border-s bg-gradient-to-b to-transparent transition-all ease-in-out hover:scale-110 hover:from-black/2" /> ))}
diff --git a/blocks/hero236.tsx b/blocks/hero236.tsx index 3baacae..5496f4c 100644 --- a/blocks/hero236.tsx +++ b/blocks/hero236.tsx @@ -66,27 +66,27 @@ const Hero236 = ({ className }: Hero236Props) => { return (
-
-
+
+

چرا ما؟

-

+

همه کامپوننت‌هایی که نیاز دارید

-

+

صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند. -

+

    {stats.map((stat, index) => ( -
  • -
    +
  • +
    {stat.icon}
    -
    +

    {stat.title}

    @@ -99,10 +99,8 @@ const Hero236 = ({ className }: Hero236Props) => { ))}
-
-
- -
+
+
@@ -431,7 +429,7 @@ export function IconCloud({ icons, images }: IconCloudProps) { onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} onMouseLeave={handleMouseUp} - className="rounded-lg" + className="max-h-full max-w-full rounded-lg" aria-label="ابر آیکون سه‌بعدی تعاملی" role="img" /> diff --git a/blocks/hero237.tsx b/blocks/hero237.tsx index fbae9b9..e03fe1e 100644 --- a/blocks/hero237.tsx +++ b/blocks/hero237.tsx @@ -62,42 +62,16 @@ const Hero237 = ({ className }: Hero237Props) => { return (
-
-
-

- چرا ما؟ -

-

- همه کامپوننت‌هایی که نیاز دارید -

-

- صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند. -

- -
    - {stats.map((stat, index) => ( -
  • -
    - {stat.icon} -
    -
    -

    - {stat.title} -

    -

    {stat.description}

    -
    - {index !== stats.length - 1 && ( -
    - )} -
    • - ))} -
-
-
+ {/* dir=ltr keeps visual: orbits left, text right; text column stays rtl */} +
+
{circle1Images.map((src, index) => ( @@ -129,6 +103,40 @@ const Hero237 = ({ className }: Hero237Props) => {
+ +
+

+ چرا ما؟ +

+

+ همه کامپوننت‌هایی که نیاز دارید +

+

+ صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند. +

+ +
    + {stats.map((stat, index) => ( +
  • +
    + {stat.icon} +
    +
    +

    + {stat.title} +

    +

    {stat.description}

    +
    + {index !== stats.length - 1 && ( +
    + )} +
    • + ))} +
+
); diff --git a/blocks/hero238.tsx b/blocks/hero238.tsx index 74c7b39..28728dc 100644 --- a/blocks/hero238.tsx +++ b/blocks/hero238.tsx @@ -33,43 +33,46 @@ const Hero238 = ({ className }: Hero238Props) => { return (
- -
-
-

+ +
+
+

با یک بار خرید به تمام کامپوننت‌های حرفه‌ای دسترسی داشته باشید -

-
+

+
-
    +
      {benefits.map((benifit, index) => { const Icon = benifit.icon; return ( -
    • -
      +
    • +
      {benifit.title} {index !== benefits.length - 1 && ( -
      +
      )}
      • ); })}
-
+
ری یو آی @@ -102,46 +105,43 @@ export const AuroraBackground = ({ ...props }: AuroraBackgroundProps) => { return ( -
+
-
-
- {children} + showRadialGradient && + `[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`, + )} + >
-
+ {children} +
); }; diff --git a/blocks/hero239.tsx b/blocks/hero239.tsx index 0aeba33..40e3da0 100644 --- a/blocks/hero239.tsx +++ b/blocks/hero239.tsx @@ -50,26 +50,29 @@ const Hero239 = ({ className }: Hero239Props) => { ]; return ( -
-
+
+

ری یو آی

-

+

با یک بار خرید به تمام کامپوننت‌های حرفه‌ای دسترسی داشته باشید -

-

+

+

صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند. -

-
+

+
-
- +
+
diff --git a/blocks/hero240.tsx b/blocks/hero240.tsx index 015474c..3a09d0a 100644 --- a/blocks/hero240.tsx +++ b/blocks/hero240.tsx @@ -51,37 +51,52 @@ const Hero240 = ({ className }: Hero240Props) => { return (
-
-
- +
+
+

کتابخانه کامپوننت -

+

-

+

کامپوننت‌های آماده برای توسعه سریع‌تر محصولات -

-

+

+

صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند. -

-
-
+

+
+
- +
-
- -
+ {/* + ThreeDMarquee uses an internal 1720px stage. Keep this wrapper + width-bound + overflow-x-clip so it cannot widen #preview-frame. + */} +
+ +
diff --git a/blocks/hero241.tsx b/blocks/hero241.tsx index 61c3717..104b13e 100644 --- a/blocks/hero241.tsx +++ b/blocks/hero241.tsx @@ -13,18 +13,18 @@ const Hero241 = ({ className }: Hero241Props) => { return (
-
-

+
+

سریع‌ترین مسیر برای
رابط‌های کاربری آماده استفاده -

-

+

+

صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند. -

-
+

+
@@ -32,19 +32,19 @@ const Hero241 = ({ className }: Hero241Props) => { شروع رایگان {" "}
-
-
+
+

+۱ میلیون

مورد اعتماد توسعه‌دهندگان

-
-
+
+

95.1%

کاهش زمان توسعه

- +
diff --git a/blocks/hero242.tsx b/blocks/hero242.tsx index 8839fe9..fc64327 100644 --- a/blocks/hero242.tsx +++ b/blocks/hero242.tsx @@ -93,22 +93,24 @@ const Hero242 = ({ className }: Hero242Props) => { } satisfies ChartConfig; return ( -
-
-
-

+
+
+
+

اشتراکی برای رشد رشد شما

-

+

به هزاران توسعه‌دهنده و تیم محصول بپیوندید که با استفاده از این کامپوننت‌ها، توسعه محصولات خود را سریع‌تر و ساده‌تر کرده‌اند. -

+

-
+
+
  • @@ -117,9 +119,9 @@ const Hero242 = ({ className }: Hero242Props) => {

    • {features.map((feature) => ( -
  • - -

    +

  • + +

    {feature.title} {feature.description}

    @@ -127,8 +129,8 @@ const Hero242 = ({ className }: Hero242Props) => { ))}
-
- +
+ { return ( -
-
-
-

- +

+
+
+

+ به‌روزرسانی‌های منظم -

-
-

+

+
+

راهی سریع‌تر برای
توسعه{" "}

-
-
-

- صدها بلاک و کامپوننت آماده مبتنی بر React، Tailwind CSS و shadcn/ui که مستقیماً در پروژه‌های شما قابل استفاده هستند.{" "} +

+
+

+ صدها بلاک و کامپوننت آماده مبتنی بر React، Tailwind CSS و shadcn/ui که مستقیماً در پروژه‌های شما قابل استفاده هستند.

-
    -
  • -
    +
      +
    • +
      -

      +

      توسعه سریع‌تر -

      +

      • -
    • -
      +
    • +
      -

      بیش از ۱۰٬۰۰۰ توسعه‌دهنده

      +

      + بیش از ۱۰٬۰۰۰ توسعه‌دهنده +

      • -
    • -
      +
    • +
      -

      +

      ۲۵٪ افزایش نرخ تبدیل

      • diff --git a/blocks/hero244.tsx b/blocks/hero244.tsx index 37fae61..a503b66 100644 --- a/blocks/hero244.tsx +++ b/blocks/hero244.tsx @@ -61,20 +61,20 @@ const Hero244 = ({ className }: Hero244Props) => { return (
      -
      -
      -

      +
      +
      +

      کنترل کامل محصول سامانه ابری خود را در اختیار بگیرید -

      -

      +

      +

      صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند. -

      +

      -
      +
      @@ -83,22 +83,22 @@ const Hero244 = ({ className }: Hero244Props) => {
      - -

      + +

      به نسخه حرفه‌ای کتابخانه کامپوننت دسترسی پیدا کنید -

      +

      {items.map((item) => ( {item.title}

      {item.title} @@ -107,9 +107,9 @@ const Hero244 = ({ className }: Hero244Props) => { ))}

      -
      +
      {Array.from({ length: 7 }).map((_, index) => ( -
      +
      ))}
      diff --git a/blocks/hero245.tsx b/blocks/hero245.tsx index 76f2100..1ab0c28 100644 --- a/blocks/hero245.tsx +++ b/blocks/hero245.tsx @@ -18,44 +18,47 @@ const Hero245 = ({ className }: Hero245Props) => { return (
      -
      -
      -
      +
      +
      +
      - + در حال استخدام هستیم
      به تیم ما بپیوندید{" "} - +
      -

      +

      پروژه بعدی خود را با{" "} آماده تولید به سطحی حرفه‌ای ارتقا دهید -

      -

      +

+

صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند. -

+

-
+
+ +
-
+
تصویر نمونه { />
-
+
{Array.from({ length: isMobile ? 8 : 18 }).map((_, index) => ( + className="h-full min-w-0 flex-1 bg-gradient-to-l from-transparent to-muted/50" + /> ))}
diff --git a/blocks/hero70.tsx b/blocks/hero70.tsx index 03f603c..a729863 100644 --- a/blocks/hero70.tsx +++ b/blocks/hero70.tsx @@ -1,7 +1,8 @@ "use client"; + import AutoScroll from "embla-carousel-auto-scroll"; -import Autoplay from "embla-carousel-autoplay"; import { ArrowUpRight, CheckCircle } from "lucide-react"; +import { useRef } from "react"; import { Button } from "@/components/ui/button"; import { @@ -15,10 +16,43 @@ interface Hero70Props { className?: string; } +const CAROUSEL_IMAGES = [ + "/block-media/shadcnblocks/block/placeholder-1.svg", + "/block-media/shadcnblocks/block/placeholder-2.svg", + "/block-media/shadcnblocks/block/placeholder-3.svg", + "/block-media/shadcnblocks/block/placeholder-4.svg", + "/block-media/shadcnblocks/block/placeholder-5.svg", + "/block-media/shadcnblocks/block/placeholder-6.svg", + "/block-media/shadcnblocks/block/placeholder-1.svg", + "/block-media/shadcnblocks/block/placeholder-2.svg", +] as const; + +const BENEFITS = [ + "اشتراک ماهانه طراحی", + "تحویل سریع", + "اشتراک انعطاف‌پذیر", +] as const; + const Hero70 = ({ className }: Hero70Props) => { + const autoScroll = useRef( + AutoScroll({ + speed: 1, + startDelay: 0, + playOnInit: true, + stopOnInteraction: false, + stopOnMouseEnter: true, + direction: "forward", + }), + ); + return ( -
-
+
+
{ alt="" />
-
-
-
- - اشتراک ماهانه طراحی -
-
- - تحویل سریع -
-
- - اشتراک انعطاف‌پذیر -
+ +
+
+ {BENEFITS.map((label) => ( +
+ + {label} +
+ ))}
-
-
-

- طراحی نامحدود برای رشد سریع کسب‌وکار -

-

- به خدمات طراحی حرفه‌ای دسترسی داشته باشید،{" "} - بدون نیاز به استخدام تیم داخلی. -

-
+ +
+

+ طراحی نامحدود برای رشد سریع کسب‌وکار +

+

+ به خدمات طراحی حرفه‌ای دسترسی داشته باشید،{" "} + + بدون نیاز به استخدام تیم داخلی. + +

+
-
+ +
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- + {/* Override carousel defaults (-ml-4 / pl-4) — they break RTL track sizing */} + + {CAROUSEL_IMAGES.map((src, index) => ( + +
+ +
+ + ))} +
+
+
+ +
+
-
); }; diff --git a/blocks/hero74.tsx b/blocks/hero74.tsx index 5c0e731..c4e11f5 100644 --- a/blocks/hero74.tsx +++ b/blocks/hero74.tsx @@ -15,87 +15,63 @@ interface Hero74Props { className?: string; } +const FEATURES = [ + { icon: Package, label: "کاملاً قابل سفارشی‌سازی" }, + { icon: AlignCenter, label: "بینش لحظه‌ای" }, + { icon: Vault, label: "فضای ذخیره‌سازی امن" }, + { icon: ReceiptText, label: "رسیدهای هوشمند" }, + { icon: Timer, label: "پیگیری خودکار" }, + { icon: Brain, label: "جستجوی هوشمند" }, +] as const; + const Hero74 = ({ className }: Hero74Props) => { return ( -
-
-
-

+
+
+
+

پلتفرمی یکپارچه برای مدیریت کسب‌وکار -

-

- همه اطلاعات مالی، اسناد و گزارش‌های مدیریتی را در یک محیط امن و قابل جستجو مدیریت کنید. -

+

+

+ همه اطلاعات مالی، اسناد و گزارش‌های مدیریتی را در یک محیط امن و قابل + جستجو مدیریت کنید. +

- +
-
-
- + {FEATURES.map(({ icon: Icon, label }) => ( +
+
+ +
+ {label}
- - کاملاً قابل سفارشی‌سازی - -
-
-
- -
- - بینش لحظه‌ای - -
-
-
- -
- - فضای ذخیره‌سازی امن - -
-
-
- -
- - رسیدهای هوشمند - -
-
-
- -
- - پیگیری خودکار - -
-
-
- -
- - جستجوی هوشمند - -
+ ))}
-
+ +
تصویر نمونه تصویر نمونه تصویر نمونه
diff --git a/blocks/hero78.tsx b/blocks/hero78.tsx index 4b436f1..873fe73 100644 --- a/blocks/hero78.tsx +++ b/blocks/hero78.tsx @@ -9,7 +9,7 @@ const Hero78 = ({ className }: Hero78Props) => { return (
diff --git a/blocks/hero79.tsx b/blocks/hero79.tsx index ba526d0..b52abd1 100644 --- a/blocks/hero79.tsx +++ b/blocks/hero79.tsx @@ -11,28 +11,28 @@ const Hero79 = ({ className }: Hero79Props) => { return (
-
+
-
-
-

+
+
+

خط تولید فیبر نوری خود را راه‌اندازی کنید -

-

+

+

راهکارهای صنعتی با شبکه تأمین و تولید بین‌المللی. -

+