reui-blocks/blocks/about18.tsx

import React from "react";

import { cn } from "@/lib/utils";

interface About18Props {
  className?: string;
}

const About18 = ({ className }: About18Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="grid grid-cols-1 gap-15 lg:grid-cols-7 lg:gap-12">
          <p className="col-span-2 font-medium">مأموریت ما</p>

          <div className="col-span-4 ml-auto max-w-4xl space-y-10 lg:pl-15">
            <h1 className="text-xl font-medium tracking-tight">
              ایده‌ها را به پلتفرم‌های B2B مؤثر تبدیل می‌کنیم. هر پروژه فرصتی است تا با داده و اتوماسیون، رشد درآمد مشتریان را تسریع کنیم.
                                      </h1>
            <p className="w-fit text-lg text-foreground/40 lg:translate-y-2">
              رویکرد ما بر پژوهش عمیق، طراحی هدفمند و اجرای باکیفیت استوار است. به همکاری، یادگیری مستمر و نوآوری باور داریم.
                                      </p>
          </div>
        </div>
        <div className="my-20 grid grid-cols-2 items-center gap-4">
          <img
            src="/block-media/shadcnblocks/block/guri4/img2.png"
            alt=""
            className="h-150 w-full object-cover saturate-0"
          />
          <img
            src="/block-media/shadcnblocks/block/guri4/img1.png"
            alt=""
            className="h-150 w-full object-cover"
          />
        </div>
        <div className="grid grid-cols-1 gap-15 lg:grid-cols-7 lg:gap-12">
          <p className="col-span-2 font-medium">آنچه ما را به پیش می‌راند</p>

          <div className="col-span-4 ml-auto max-w-4xl space-y-10 lg:pl-15">
            <h1 className="text-xl font-medium tracking-tight">
              ما تیمی از متخصصان محصول، فروش و بازاریابی هستیم. پلتفرم‌های
              B2B می‌سازیم که به تیم‌ها کمک می‌کند درآمد را افزایش دهند.
              مأموریت ما بر نوآوری، کارایی و رشد پایدار مشتریان بنا شده است.
            </h1>
            <p className="w-fit text-lg text-foreground/40 lg:translate-y-2">
              همیشه از خود می‌پرسیم: هدف چیست، مخاطب کیست و چگونه می‌توان تجربه‌ای ساده‌تر و بهتر خلق کرد؟
                                        <br className="hidden lg:block" />
              همه‌چیز را از شناخت نیاز، مخاطب و بهترین راه‌حل آغاز می‌کنیم.
                                      </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export { About18 };