reui-blocks/blocks/about3.tsx

import {
  Marquee,
  MarqueeContent,
  MarqueeFade,
  MarqueeItem,
} from "@/components/kibo-ui/marquee";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface About3Props {
  className?: string;
  title: string;
  description?: string;
  mainImage: {
    src: string;
    alt: string;
  };
  secondaryImage: {
    src: string;
    alt: string;
  };
  breakout: {
    src?: string;
    alt?: string;
    title: string;
    description: string;
    buttonText?: string;
    buttonUrl?: string;
  };
  companies?: Array<{
    src: string;
    alt: string;
  }> | null;
  achievementsTitle?: string;
  achievementsDescription?: string;
  achievements?: Array<{
    label: string;
    value: string;
  }>;
  contentSections?: Array<{
    title: string;
    content: string;
  }>;
}

const About3 = ({
  className,
  title = "درباره ما",
  description = "ما تیمی پرشور هستیم که به خلق راهکارهای نوآورانه برای توانمندسازی کسب‌وکارها در عصر دیجیتال متعهدیم. با سال‌ها تجربه در طراحی و توسعه، مؤلفه‌هایی زیبا و در دسترس خلق می‌کنیم که به تیم‌ها کمک می‌کند سریع‌تر بسازند.",
  mainImage = {
    src: "/block-media/shadcnblocks/block/photos/annie-spratt-MChSQHxGZrQ-unsplash.jpg",
    alt: "about",
  },
  secondaryImage = {
    src: "/block-media/shadcnblocks/block/photos/annie-spratt-AkftcHujUmk-unsplash.jpg",
    alt: "about",
  },
  breakout = {
    src: "/block-media/shadcnblocks/block/block-1.svg",
    alt: "logo",
    title: "هزاران بلاک آماده در ری یو آی",
    description:
      "ارائه ابزارهای مؤثر به کسب‌وکارها برای بهبود روند کار، افزایش کارایی و تشویق رشد",
    buttonText: "بیشتر بدانید",
    buttonUrl: "https://www.ShadcnBlocks",
  },
  companies = [
    {
      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
      alt: "Arc",
    },
    {
      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
      alt: "Descript",
    },
    {
      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
      alt: "Mercury",
    },
    {
      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
      alt: "Ramp",
    },
    {
      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
      alt: "Retool",
    },
    {
      src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
      alt: "Watershed",
    },
  ],
  achievementsTitle = "دستاوردهای ما به عدد و رقم",
  achievementsDescription = "ارائه ابزارهای مؤثر به کسب‌وکارها برای بهبود گردش‌کار، افزایش کارایی و تقویت رشد.",
  achievements = [
    { label: "شرکت‌ها", value: "300+" },
    { label: "پروژه‌های تکمیل‌شده", value: "800+" },
    { label: "مشتریان خوشحال", value: "99%" },
    { label: "جوایز و افتخارات", value: "10+" },
  ],
  contentSections = [
    {
      title: "دیدگاه ما",
      content:
        "سال‌هاست فرایند ساخت نرم‌افزار سفارشی دشوار مانده است؛ امروز ابزارهای بصری هست، اما راهکارهای دقیق همچنان به تخصص فنی و زمان زیاد نیاز دارند و این برای کسب‌وکارها و افراد دردساز است.\n\nاگر می‌توانستید بدون نوشتن حتی یک خط کد، نرم‌افزار سفارشی بسازید چه؟ اگر می‌توانستید ابزارهای خودتان را بسازید؟\n\nبا پلتفرم ما می‌توانید! ابزارهای ما به شما اجازه می‌دهند چیدمان طراحی کنید و قابلیت بسازیدهمه این‌ها بدون نیاز به کدنویسی.\n\nما باور داریم هر کسی باید بتواند راهکار خودش را بسازد، فارغ از پیشینه فنی.",
    },
    {
      title: "سازندگان",
      content:
        "شرکت ما بیش از یک دهه است ابزارهای وب می‌سازد و در هر پروژه بر کارایی و کنترل کاربر تمرکز دارد. می‌دانیم بهترین راهکارها همان‌هایی‌اند که خودتان می‌توانید بسازید.\n\nابتدا این راهکارها را برای تیم خودمان توسعه دادیم و حالا همه می‌توانند از آن‌ها بهره ببرند. افتخار می‌کنیم پلتفرمی در دسترس همه ارائه می‌دهیم، بدون توجه به تخصص فنی.\n\nتیم ما از افراد بااستعداد و مشتاق ساخت ابزاری تشکیل شده که به کاربران قدرت می‌دهد راهکارهایشان را به‌سادگی بسازند. در دستیابی شما به اهدافتان کنار شما هستیم.",
    },
  ],
}: About3Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-14 flex flex-col gap-5 lg:w-2/3">
          <h1 className="text-2xll font-semibold tracking-tighter lg:text-2xll">
            {title}
          </h1>
          <p className="text-lg text-muted-foreground md:text-xl">
            {description}
          </p>
        </div>
        <div className="grid gap-7 lg:grid-cols-3">
          <img
            src={mainImage.src}
            alt={mainImage.alt}
            className="size-full max-h-[620px] rounded-xl object-cover lg:col-span-2"
          />
          <div className="flex flex-col gap-7 md:flex-row lg:flex-col">
            <div className="flex flex-col justify-between gap-6 rounded-xl bg-muted p-7 md:w-1/2 lg:w-auto">
              <img
                src={breakout.src}
                alt={breakout.alt}
                className="mr-auto h-12 dark:invert"
              />
              <div>
                <p className="mb-2 text-lg font-semibold">{breakout.title}</p>
                <p className="text-muted-foreground">{breakout.description}</p>
              </div>
              <Button variant="outline" className="mr-auto" asChild>
                <a href={breakout.buttonUrl} target="_blank">
                  {breakout.buttonText}
                </a>
              </Button>
            </div>
            <img
              src={secondaryImage.src}
              alt={secondaryImage.alt}
              className="grow basis-0 rounded-xl object-cover md:w-1/2 lg:min-h-0 lg:w-auto"
            />
          </div>
        </div>
        {companies && (
          <div className="py-32">
            <Marquee>
              <MarqueeContent speed={40}>
                {companies.map((company, idx) => (
                  <MarqueeItem
                    key={company.src + idx}
                    className="mx-8 flex items-center"
                  >
                    <img
                      src={company.src}
                      alt={company.alt}
                      className="h-7 w-auto md:h-8 dark:invert"
                    />
                  </MarqueeItem>
                ))}
              </MarqueeContent>
              <MarqueeFade side="left" />
              <MarqueeFade side="right" />
            </Marquee>
          </div>
        )}
        <div className="relative overflow-hidden rounded-xl bg-muted p-7 md:p-16">
          <div className="flex flex-col gap-4 text-center md:text-start">
            <h2
              className="text-3xl font-medium md:text-xl text-end"
              dir="rtl"
            >
              {achievementsTitle}
            </h2>
            <p className="max-w-xl text-muted-foreground">
              {achievementsDescription}
            </p>
          </div>
          <div className="mt-10 grid grid-cols-2 gap-x-4 gap-y-8 md:flex md:flex-wrap md:justify-between">
            {achievements.map((item, idx) => (
              <div
                className="flex flex-col gap-2 text-center md:text-start"
                key={item.label + idx}
              >
                <span className="font-mono text-xl font-semibold md:text-2xll">
                  {item.value}
                </span>
                <p className="text-sm md:text-base">{item.label}</p>
              </div>
            ))}
          </div>
        </div>
        {contentSections && contentSections.length > 0 && (
          <div className="mx-auto grid max-w-5xl gap-16 py-28 md:grid-cols-2 md:gap-28">
            {contentSections.map((section, idx) => (
              <div key={section.title + idx}>
                <h2 className="mb-5 text-xl font-medium">{section.title}</h2>
                <p className="text-lg leading-7 whitespace-pre-line text-muted-foreground">
                  {section.content}
                </p>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
};

export { About3 };