aragrp/app/about/page.tsx

export default function AboutPage() {
  return (
    <>
      {/* Hero Section */}
      <section className="bg-background pt-32 pb-20 md:pt-40 md:pb-28">
        <div className="mx-auto max-w-4xl px-6">
          <div className="text-center space-y-6">
            <h1 className="text-4xl font-bold md:text-5xl lg:text-6xl leading-tight tracking-normal">
              درباره ما
            </h1>
            <p className="text-xl leading-relaxed tracking-normal text-muted-foreground max-w-2xl mx-auto">
              ما یک گروه متخصص هستیم که در حوزه اینتگریشن و روش‌های نوین یکپارچه‌سازی فعالیت می‌کنیم. 
              هدف ما ارائه راهکارهای هوشمند و کارآمد برای اتصال سیستم‌ها، داده‌ها و فرآیندهای کسب‌وکار است.
            </p>
          </div>
        </div>
      </section>

      {/* Our Story */}
      <section className="bg-muted/30 py-20 md:py-28">
        <div className="mx-auto max-w-6xl px-6">
          <div className="grid gap-12 lg:grid-cols-2 items-center">
            <div className="space-y-6">
              <h2 className="text-3xl font-bold md:text-4xl leading-tight tracking-normal">
                داستان ما
              </h2>
              <div className="space-y-4 text-muted-foreground leading-relaxed tracking-normal">
                <p>
                  فیپ یک گروه متخصص است که در حوزه اینتگریشن و روش‌های نوین یکپارچه‌سازی فعالیت می‌کند. 
                  ما با استفاده از تکنولوژی‌های پیشرفته و رویکردهای نوآورانه، به کسب‌وکارها کمک می‌کنیم تا 
                  سیستم‌های خود را به شکلی کارآمد و قابل‌اعتماد بهم متصل کنند.
                </p>
                <p>
                  ما در زمینه یکپارچه‌سازی سیستم‌ها، اتوماسیون فرآیندها، ارتباطات چندکاناله و مدیریت داده‌ها 
                  تخصص داریم. با استفاده از روش‌های نوین و ابزارهای پیشرفته، راهکارهای سفارشی برای هر کسب‌وکار 
                  طراحی و پیاده‌سازی می‌کنیم.
                </p>
              </div>
            </div>
            <div className="relative aspect-square rounded-2xl bg-gradient-to-br from-primary/20 to-primary/5 p-8 flex items-center justify-center">
              <div className="text-center space-y-4">
                <div className="text-5xl font-bold text-primary">۱۰+</div>
                <div className="text-lg font-medium">سال تجربه</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Mission & Vision */}
      <section className="bg-background py-20 md:py-28">
        <div className="mx-auto max-w-6xl px-6">
            <div className="grid gap-12 md:grid-cols-2">
            <div className="space-y-6 p-8 rounded-2xl border bg-muted/30 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
              <div className="space-y-4">
                <h2 className="text-3xl font-bold md:text-4xl leading-tight tracking-normal">
                  ماموریت ما
                </h2>
                <p className="leading-relaxed tracking-normal text-muted-foreground text-lg">
                  ماموریت ما این است که با استفاده از روش‌های نوین اینتگریشن، به کسب‌وکارها کمک کنیم تا 
                  بدون پیچیدگی‌های فنی، سیستم‌های خود را بهم متصل کنند و از قدرت اتوماسیون و ارتباطات هوشمند 
                  بهره‌مند شوند.
                </p>
              </div>
            </div>
            <div className="space-y-6 p-8 rounded-2xl border bg-muted/30 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
              <div className="space-y-4">
                <h2 className="text-3xl font-bold md:text-4xl leading-tight tracking-normal">
                  چشم‌انداز ما
                </h2>
                <p className="leading-relaxed tracking-normal text-muted-foreground text-lg">
                  ما می‌خواهیم به گروه پیشرو در حوزه اینتگریشن و روش‌های نوین یکپارچه‌سازی تبدیل شویم. 
                  چشم‌انداز ما این است که هر کسب‌وکاری، از کوچک تا بزرگ، بتواند به راحتی از خدمات ما استفاده کند 
                  و به اهداف خود برسد.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Our Values */}
      <section className="bg-muted/30 py-20 md:py-28">
        <div className="mx-auto max-w-6xl px-6">
          <div className="text-center space-y-12">
            <div className="space-y-4">
              <h2 className="text-3xl font-bold md:text-4xl leading-tight tracking-normal">
                ارزش‌های ما
              </h2>
              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
                ارزش‌هایی که در تمام کارهای ما رعایت می‌شود
              </p>
            </div>
            <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
              <div className="space-y-4 p-6 rounded-xl bg-card border transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <h3 className="font-bold text-xl">کیفیت</h3>
                <p className="text-sm leading-relaxed tracking-normal text-muted-foreground">
                  تعهد به کیفیت و نوآوری در تمام پروژه‌ها و خدمات
                </p>
              </div>
              <div className="space-y-4 p-6 rounded-xl bg-card border transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <h3 className="font-bold text-xl">شفافیت</h3>
                <p className="text-sm leading-relaxed tracking-normal text-muted-foreground">
                  شفافیت کامل در ارتباطات، قیمت‌گذاری و فرآیندها
                </p>
              </div>
              <div className="space-y-4 p-6 rounded-xl bg-card border transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <h3 className="font-bold text-xl">مشتری‌محوری</h3>
                <p className="text-sm leading-relaxed tracking-normal text-muted-foreground">
                  تمرکز بر نیازهای مشتری و رضایت کامل آن‌ها
                </p>
              </div>
              <div className="space-y-4 p-6 rounded-xl bg-card border transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <h3 className="font-bold text-xl">نوآوری</h3>
                <p className="text-sm leading-relaxed tracking-normal text-muted-foreground">
                  استفاده از آخرین تکنولوژی‌ها و روش‌های نوین
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Why Choose Us */}
      <section className="bg-background py-20 md:py-28">
        <div className="mx-auto max-w-6xl px-6">
          <div className="text-center space-y-12">
            <div className="space-y-4">
              <h2 className="text-3xl font-bold md:text-4xl leading-tight tracking-normal">
                چرا فیپ را انتخاب کنید؟
              </h2>
              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
                مزایای رقابتی که ما را از دیگران متمایز می‌کند
              </p>
            </div>
            <div className="grid gap-8 md:grid-cols-3">
              <div className="space-y-4 text-center transition-all duration-300 hover:-translate-y-1">
                <div className="flex justify-center">
                  <div className="flex size-16 items-center justify-center rounded-full bg-primary/10 text-primary transition-transform duration-300 hover:scale-110">
                    <svg className="size-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                  </div>
                </div>
                <h3 className="font-bold text-xl">سادگی</h3>
                <p className="text-muted-foreground leading-relaxed tracking-normal">
                  رابط کاربری ساده و قابل فهم که نیاز به تخصص فنی ندارد
                </p>
              </div>
              <div className="space-y-4 text-center transition-all duration-300 hover:-translate-y-1">
                <div className="flex justify-center">
                  <div className="flex size-16 items-center justify-center rounded-full bg-primary/10 text-primary transition-transform duration-300 hover:scale-110">
                    <svg className="size-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                    </svg>
                  </div>
                </div>
                <h3 className="font-bold text-xl">قابلیت اطمینان</h3>
                <p className="text-muted-foreground leading-relaxed tracking-normal">
                  زیرساخت قدرتمند و پایدار که همیشه در دسترس است
                </p>
              </div>
              <div className="space-y-4 text-center transition-all duration-300 hover:-translate-y-1">
                <div className="flex justify-center">
                  <div className="flex size-16 items-center justify-center rounded-full bg-primary/10 text-primary transition-transform duration-300 hover:scale-110">
                    <svg className="size-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                    </svg>
                  </div>
                </div>
                <h3 className="font-bold text-xl">مقیاس‌پذیری</h3>
                <p className="text-muted-foreground leading-relaxed tracking-normal">
                  قابلیت رشد همراه با نیازهای کسب‌وکار شما
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Our Team */}
      <section className="bg-muted/30 py-20 md:py-28">
        <div className="mx-auto max-w-6xl px-6">
          <div className="text-center space-y-12">
            <div className="space-y-4">
              <h2 className="text-3xl font-bold md:text-4xl leading-tight tracking-normal">
                تیم ما
              </h2>
              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
                تیم فیپ متشکل از متخصصان با تجربه در حوزه‌های اینتگریشن، فناوری اطلاعات، توسعه نرم‌افزار 
                و مدیریت کسب‌وکار است. ما با همکاری یکدیگر و استفاده از روش‌های نوین، راهکارهای نوآورانه و 
                کاربردی برای چالش‌های یکپارچه‌سازی ارائه می‌دهیم.
              </p>
            </div>
            <div className="grid gap-8 md:grid-cols-3">
              <div className="space-y-4 p-8 rounded-2xl bg-card border text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <div className="flex justify-center">
                  <div className="size-24 rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center transition-transform duration-300 hover:scale-110">
                    <span className="text-3xl font-bold text-primary">ت</span>
                  </div>
                </div>
                <h3 className="font-bold text-xl">تخصص</h3>
                <p className="text-sm text-muted-foreground leading-relaxed">
                  متخصصان با تجربه در حوزه اینتگریشن و یکپارچه‌سازی
                </p>
              </div>
              <div className="space-y-4 p-8 rounded-2xl bg-card border text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <div className="flex justify-center">
                  <div className="size-24 rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center transition-transform duration-300 hover:scale-110">
                    <span className="text-3xl font-bold text-primary">ن</span>
                  </div>
                </div>
                <h3 className="font-bold text-xl">نوآوری</h3>
                <p className="text-sm text-muted-foreground leading-relaxed">
                  استفاده از آخرین تکنولوژی‌ها و روش‌های نوین
                </p>
              </div>
              <div className="space-y-4 p-8 rounded-2xl bg-card border text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <div className="flex justify-center">
                  <div className="size-24 rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center transition-transform duration-300 hover:scale-110">
                    <span className="text-3xl font-bold text-primary">پ</span>
                  </div>
                </div>
                <h3 className="font-bold text-xl">پشتیبانی</h3>
                <p className="text-sm text-muted-foreground leading-relaxed">
                  پشتیبانی کامل و مستمر در تمام مراحل پروژه
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-background py-20 md:py-28">
        <div className="mx-auto max-w-4xl px-6">
          <div className="text-center space-y-8 p-12 rounded-2xl border bg-gradient-to-br from-primary/5 to-primary/10">
            <h2 className="text-3xl font-bold md:text-4xl leading-tight tracking-normal">
              آماده شروع هستید؟
            </h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              با ما تماس بگیرید تا درباره نیازهای شما صحبت کنیم و بهترین راهکار را پیشنهاد دهیم
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <a
                href="/pricing"
                className="inline-flex items-center justify-center rounded-lg bg-primary px-8 py-3 text-base font-medium text-white hover:bg-accent hover:text-foreground transition-colors"
              >
                مشاهده قیمت‌ها
              </a>
              <a
                href="#contact"
                className="inline-flex items-center justify-center rounded-lg border border-primary px-8 py-3 text-base font-medium text-primary hover:bg-accent hover:text-foreground hover:border-accent transition-colors"
              >
                تماس با ما
              </a>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}