import React from "react";

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

interface About9Props {
  className?: string;
}

const About9 = ({ className }: About9Props) => {
  return (
    <section className={cn("py-16 md:py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-6xl">
          <h1 className="mb-6 max-w-4xl text-3xl leading-tight font-medium tracking-tight md:text-xl">
            سلام، ما تیمی از توسعه‌دهندگان هستیم که با اشتیاق، اپلیکیشن‌های وب مقیاس‌پذیر، سریع و قابل اعتماد می‌سازیم.
                                </h1>

          <div className="mb-8 flex justify-center">
            <img
              src="/block-media/shadcnblocks/block/photos/nubelson-fernandes-tAJYoec13xk-unsplash.jpg"
              alt="تیم در حال کار"
              className="w-full rounded-sm object-cover"
            />
          </div>

          <div className="mx-auto mb-16 flex w-full max-w-6xl flex-col justify-between gap-12 md:flex-row">
            <div className="text-base font-medium">
              <span className="block text-muted-foreground">
                توسعه‌دهنده فول‌استک
              </span>
              <span className="font-semibold text-foreground">
                San Francisco CA
                <img
                  src="/block-media/shadcnblocks/block/flags/united-states.png"
                  alt="ایالات متحده"
                  className="h-4 w-4"
                />
              </span>
            </div>

            <div className="mt-8 w-full md:mt-0 md:w-2/3">
              <p className="font-base w-full text-lg leading-[28px] text-muted-foreground md:w-3/4">
                من یک توسعه‌دهنده فول‌استک با بیش از ۶ سال تجربه در طراحی و توسعه اپلیکیشن‌های وب مقیاس‌پذیر هستم. علاقه به حل مسئله و فناوری، مسیر حرفه‌ای من را شکل داده است.
                                              <br />
                <br />
                در رابط کاربری، سرور برنامه و فناوری‌های ابری تخصص دارم و به کسب‌وکار نوپا‌ها و سازمان‌ها کمک کرده‌ام محصولات دیجیتال مقیاس‌پذیر توسعه دهند. تمرکز من بر تجربه کاربری، معماری تمیز و کدی است که در بلندمدت به‌سادگی نگهداری شود.
                                            </p>

              <div className="mt-12">
                <img
                  src="/block-media/shadcnblocks/block/photos/nastuh-abootalebi-eHD8Y1Znfpk-unsplash.jpg"
                  alt="محیط کار"
                  className="w-full rounded-sm object-cover"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { About9 };