reui-blocks/blocks/service4.tsx

"use client";

import { BookOpen, Map, Palette, Pen, TestTube, Users } from "lucide-react";

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

interface Service4Props {
  className?: string;
}

const Service4 = ({ className }: Service4Props) => {
  const services = [
    {
      icon: Users,
      title: "تحقیق کاربر و توسعه پرسونا",
    },
    {
      icon: Map,
      title: "معماری اطلاعات و نقشه‌برداری سفر کاربر",
    },
    {
      icon: Pen,
      title: "وایرفریم و نمونه‌سازی تعاملی",
    },
    {
      icon: Palette,
      title: "طراحی بصری و یکپارچه‌سازی برند",
    },
    {
      icon: TestTube,
      title: "آزمایش کاربردپذیری و اعتبارسنجی طراحی",
    },
    {
      icon: BookOpen,
      title: "ایجاد و مستندسازی سیستم طراحی",
    },
  ];

  const stats = [
    {
      icon: "/block-media/shadcnblocks/block/logos/adobe-icon.png",
      title: "مجموعه طراحی حرفه‌ای",
      value: "۱۰۰٪",
      description: "تسلط طراحی",
    },
    {
      icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
      title: "Figma",
      value: "۵+",
      description: "سال تجربه",
    },
    {
      icon: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
      title: "Sketch",
      value: "۲۰۰+",
      description: "پروژه تکمیل‌شده",
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("pb-32", className)}>
      {/* Simple Hero */}
      <div className="bg-muted py-32">
        <div className="container">
          <div className="flex items-center justify-center gap-4">
            <img
              src="/block-media/shadcnblocks/block/symbols/ux.svg"
              alt="طراحی تجربه و رابط کاربری"
              className="h-16 dark:invert"
            />
            <h1 className="text-xl font-medium tracking-tight md:text-2xll lg:text-2xll">
              طراحی تجربه و رابط کاربری
            </h1>
          </div>
        </div>
      </div>

      {/* Main Content with Sidebar */}
      <div className="py-16">
        <div className="container max-w-5xl">
          <div className="grid gap-12 lg:grid-cols-3">
            {/* Content Section */}
            <div className="lg:col-span-2">
              <div className="prose prose-sm max-w-none dark:prose-invert">
                <h2>طراحی کاربرمحور با تمرکز بر تبدیل</h2>
                <p>
                  ما معتقدیم طراحی خوب باید برای هر کاربری که با محصول شما
                  تعامل دارد، شهودی، دسترس‌پذیر و هدفمند باشد. رویکرد طراحی
                  تجربه و رابط کاربری ما بر درک نیازها، رفتارها و نقاط درد کاربران تمرکز
                  دارد تا رابط‌هایی بسازیم که نه‌تنها زیبا به نظر برسند، بلکه
                  بی‌نقص کار کنند.
                </p>

                <h2>خلق تجربه‌های دیجیتال معنادار</h2>
                <p>
                  ما تحقیق کاربر، معماری اطلاعات و طراحی بصری را ترکیب
                  می‌کنیم تا تجربه‌هایی ارائه دهیم که تعامل و تبدیل را افزایش
                  می‌دهند.
                </p>

                <p>
                  از طریق تحقیق و آزمایش جامع کاربر، تصمیم‌های طراحی را با
                  داده‌های واقعی اعتبارسنجی می‌کنیم. فرآیند طراحی تکراری ما
                  تضمین می‌کند هر عنصر هدفی دارد و هم به اهداف کسب‌وکار شما
                  کمک می‌کند و هم تجربه کاربری استثنایی ارائه می‌دهد.
                </p>

                <p>
                  ما در ساخت سیستم‌های طراحی تخصص داریم که با رشد کسب‌وکار شما
                  مقیاس‌پذیرند؛ یکپارچگی در تمام نقاط تماس را حفظ می‌کنند و در
                  عین حال انعطاف لازم برای رشد و تحول آینده را دارند.
                </p>

                <p>
                  رویکرد همکاری ما ذینفعان را در تمام فرآیند طراحی  از
                  وایرفریم‌های اولیه تا نمونه‌های نهایی  درگیر می‌کند. این
                  هم‌راستایی بین اهداف کسب‌وکار و نیازهای کاربر را تضمین
                  می‌کند و محصولاتی می‌سازد که در بازار موفق می‌شوند.
                </p>

                <p>
                  هر تصمیم طراحی بر پایه تحقیق و آزمایش است؛ راه‌حل‌هایی که
                  نه‌تنها از نظر بصری جذاب‌اند، بلکه از نظر استراتژیک درست و
                  از سوی کاربران تأیید شده‌اند.
                </p>

                <h2>خدمات طراحی تجربه و رابط کاربری ما</h2>
                <div className="space-y-3">
                  {services.map((service, index) => {
                    const Icon = service.icon;
                    return (
                      <div key={index} className="flex items-center gap-3">
                        <Icon className="h-5 w-5 text-primary" />
                        <span>{service.title}</span>
                      </div>
                    );
                  })}
                </div>

                <h2>طراحی استراتژیک برای موفقیت کسب‌وکار</h2>
                <p>
                  فلسفه طراحی ما بر خلق رابط‌هایی استوار است که فاصله بین
                  نیازهای کاربر و اهداف کسب‌وکار را پر می‌کنند. ما می‌دانیم
                  طراحی تجربه و رابط کاربری عالی فقط به زیبایی‌شناسی محدود نیست  بلکه به
                  خلق تعامل‌های معناداری مربوط است که نتیجه می‌دهند.
                </p>

                <p>
                  از مفهوم اولیه تا پیاده‌سازی نهایی، تضمین می‌کنیم هر عنصر
                  طراحی به تجربه کاربری یکپارچه‌ای کمک کند که ارزش‌های برند
                  شما را منعکس و اهداف کسب‌وکارتان را پشتیبانی کند. طراحی‌های
                  ما برای عملکرد، دسترس‌پذیری و مقیاس‌پذیری در تمام
                  دستگاه‌ها و پلتفرم‌ها بهینه شده‌اند.
                </p>
              </div>
            </div>

            {/* Stats Sidebar */}
            <div className="lg:col-span-1">
              <div className="rounded-lg bg-muted/50 p-6 lg:sticky lg:top-8">
                <h3 className="mb-6 text-lg font-semibold">تخصص ما</h3>
                <div className="space-y-6">
                  {stats.map((stat, index) => (
                    <div key={index} className="flex items-center gap-4">
                      <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center">
                        <img
                          src={stat.icon}
                          alt={stat.title}
                          className="h-6 w-6 object-contain"
                        />
                      </div>
                      <div className="flex-1">
                        <div className="text-sm font-medium">{stat.title}</div>
                        <div className="text-xs text-muted-foreground">
                          {stat.description}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Service4 };