aragrp/app/about/page.tsx

export const metadata = {
  title: "درباره ما",
  description:
    "فیپ یک گروه متخصص در حوزه اینتگریشن و روش‌های نوین یکپارچه‌سازی. ماموریت، چشم‌انداز و ارزش‌های ما.",
};
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { type, typeSpacing } from "@/lib/typography";
import { cn } from "@/lib/utils";

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={cn("text-center", typeSpacing.heroStack)}>
            <h1 className={type.h1}>
              درباره ما
            </h1>
            <p className={cn(type["body-lg"], "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={type.h2}>
                داستان ما
              </h2>
              <div className={cn(typeSpacing.paragraphStack, "text-muted-foreground")}>
                <p className={type.body}>
                  فیپ یک گروه متخصص است که در حوزه اینتگریشن و روش‌های نوین یکپارچه‌سازی فعالیت می‌کند.
                  ما با استفاده از تکنولوژی‌های پیشرفته و رویکردهای نوآورانه، به کسب‌وکارها کمک می‌کنیم تا
                  سیستم‌های خود را به شکلی کارآمد و قابل‌اعتماد بهم متصل کنند.
                </p>
                <p className={type.body}>
                  ما در زمینه یکپارچه‌سازی سیستم‌ها، اتوماسیون فرآیندها، ارتباطات چندکاناله و مدیریت داده‌ها
                  تخصص داریم. با استفاده از روش‌های نوین و ابزارهای پیشرفته، راهکارهای سفارشی برای هر کسب‌وکار
                  طراحی و پیاده‌سازی می‌کنیم.
                </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={type.stat}>۱۰+</div>
                <div className={cn(type["body-lg"], "font-medium text-foreground")}>سال تجربه</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={type.h2}>
                  ماموریت ما
                </h2>
                <p className={cn(type["section-intro"])}>
                  ماموریت ما این است که با استفاده از روش‌های نوین اینتگریشن، به کسب‌وکارها کمک کنیم تا
                  بدون پیچیدگی‌های فنی، سیستم‌های خود را بهم متصل کنند و از قدرت اتوماسیون و ارتباطات هوشمند
                  بهره‌مند شوند.
                </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={type.h2}>
                  چشم‌انداز ما
                </h2>
                <p className={cn(type["section-intro"])}>
                  ما می‌خواهیم به گروه پیشرو در حوزه اینتگریشن و روش‌های نوین یکپارچه‌سازی تبدیل شویم.
                  چشم‌انداز ما این است که هر کسب‌وکاری، از کوچک تا بزرگ، بتواند به راحتی از خدمات ما استفاده کند
                  و به اهداف خود برسد.
                </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={type.h2}>
                ارزش‌های ما
              </h2>
              <p className={cn(type["section-intro"], "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={type.h3}>کیفیت</h3>
                <p className={cn(type["body-sm"], "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={type.h3}>شفافیت</h3>
                <p className={cn(type["body-sm"], "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={type.h3}>مشتری‌محوری</h3>
                <p className={cn(type["body-sm"], "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={type.h3}>نوآوری</h3>
                <p className={cn(type["body-sm"], "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={type.h2}>
                چرا فیپ را انتخاب کنید؟
              </h2>
              <p className={cn(type["section-intro"], "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={type.h3}>سادگی</h3>
                <p className={cn(type.body, "text-muted-foreground")}>
                  رابط کاربری ساده و قابل فهم که نیاز به تخصص فنی ندارد
                </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={type.h3}>قابلیت اطمینان</h3>
                <p className={cn(type.body, "text-muted-foreground")}>
                  زیرساخت قدرتمند و پایدار که همیشه در دسترس است
                </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={type.h3}>مقیاس‌پذیری</h3>
                <p className={cn(type.body, "text-muted-foreground")}>
                  قابلیت رشد همراه با نیازهای کسب‌وکار شما
                </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={type.h2}>
                تیم ما
              </h2>
              <p className={cn(type["section-intro"], "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={cn(type.h2, "text-primary")}>ت</span>
                  </div>
                </div>
                <h3 className={type.h3}>تخصص</h3>
                <p className={cn(type["body-sm"], "text-muted-foreground")}>
                  متخصصان با تجربه در حوزه اینتگریشن و یکپارچه‌سازی
                </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={cn(type.h2, "text-primary")}>ن</span>
                  </div>
                </div>
                <h3 className={type.h3}>نوآوری</h3>
                <p className={cn(type["body-sm"], "text-muted-foreground")}>
                  استفاده از آخرین تکنولوژی‌ها و روش‌های نوین
                </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={cn(type.h2, "text-primary")}>پ</span>
                  </div>
                </div>
                <h3 className={type.h3}>پشتیبانی</h3>
                <p className={cn(type["body-sm"], "text-muted-foreground")}>
                  پشتیبانی کامل و مستمر در تمام مراحل پروژه
                </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={type["cta-title"]}>
              آماده شروع هستید؟
            </h2>
            <p className={cn(type["section-intro"], "max-w-2xl mx-auto")}>
              با ما تماس بگیرید تا درباره نیازهای شما صحبت کنیم و بهترین راهکار را پیشنهاد دهیم
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button asChild size="lg">
                <Link href="/pricing">مشاهده قیمت‌ها</Link>
              </Button>
              <Button asChild size="lg" variant="outline">
                <Link href="/consulting#consulting-form">تماس با ما</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}