reui-blocks/blocks/service7.tsx

"use client";

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

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

interface Service7Props {
  className?: string;
}

const Service7 = ({ className }: Service7Props) => {
  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: "مجموعه طراحی حرفه‌ای",
      description: "تسلط طراحی",
    },
    {
      icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
      title: "Figma",
      description: "سال تجربه",
    },
    {
      icon: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
      title: "Sketch",
      description: "پروژه تکمیل‌شده",
    },
  ];

  const relatedServices = [
    {
      icon: Droplet,
      title: "هویت برند",
      description: "طراحی لوگو و راهنمای برند",
      link: "#",
    },
    {
      icon: Code,
      title: "توسعه وب",
      description: "توسعه وب‌سایت اختصاصی",
      link: "#",
    },
    {
      icon: Smartphone,
      title: "طراحی اپلیکیشن موبایل",
      description: "رابط کاربری موبایل اپل و موبایل اندروید",
      link: "#",
    },
    {
      icon: Layout,
      title: "سیستم‌های طراحی",
      description: "کتابخانه‌های کامپوننت مقیاس‌پذیر",
      link: "#",
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("py-16", className)}>
      <div className="container max-w-4xl">
        {/* Icon and Intro */}
        <div className="mb-16 space-y-8">
          <div className="flex justify-start">
            <div className="rounded-full bg-muted p-6">
              <img
                src="/block-media/shadcnblocks/block/symbols/ux.svg"
                alt="طراحی تجربه و رابط کاربری"
                className="h-16 dark:invert"
              />
            </div>
          </div>

          <div className="space-y-6">
            <h1 className="text-xl font-medium tracking-tight md:text-2xll lg:text-2xll">
              طراحی تجربه و رابط کاربری
            </h1>
            <p className="max-w-3xl text-xl leading-relaxed text-muted-foreground">
              ما معتقدیم طراحی خوب باید برای هر کاربری که با محصول شما تعامل
              دارد، شهودی، دسترس‌پذیر و هدفمند باشد. رویکرد طراحی تجربه و رابط کاربری ما بر
              درک نیازها، رفتارها و نقاط درد کاربران تمرکز دارد تا رابط‌هایی
              بسازیم که نه‌تنها زیبا به نظر برسند، بلکه بی‌نقص کار کنند.
            </p>
          </div>
        </div>

        {/* Expertise Section */}
        <div className="mb-16">
          <div className="mb-8">
            <h2 className="text-xl font-semibold tracking-tight md:text-xl">
              تخصص ما
            </h2>
            <p className="mt-2 text-muted-foreground">
              ابزارهای حرفه‌ای و تجربه اثبات‌شده
            </p>
          </div>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
            {stats.map((stat, index) => (
              <div
                key={index}
                className="flex items-center gap-3 rounded-lg border p-4"
              >
                <div className="flex h-10 w-10 items-center justify-center">
                  <img
                    src={stat.icon}
                    alt={stat.title}
                    className="h-6 w-6 object-contain"
                  />
                </div>
                <div>
                  <div className="text-sm font-medium">{stat.title}</div>
                  <div className="text-xs text-muted-foreground">
                    {stat.description}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Main Content */}
        <div className="prose prose-sm mb-16 max-w-none dark:prose-invert">
          <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>

        {/* Related Services */}
        <div>
          <div className="mb-8">
            <h2 className="text-xl font-semibold tracking-tight md:text-xl">
              خدمات مرتبط
            </h2>
            <p className="mt-2 text-muted-foreground">
              سایر خدمات طراحی و توسعه ما را ببینید
            </p>
          </div>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            {relatedServices.map((service, index) => {
              const Icon = service.icon;
              return (
                <div key={index} className="group">
                  <a
                    href={service.link}
                    className="block space-y-3 rounded-lg border p-6 transition-colors hover:bg-muted/50"
                  >
                    <div className="flex items-center gap-2">
                      <Icon className="h-5 w-5 text-muted-foreground group-hover:text-primary" />
                      <div className="font-medium group-hover:text-primary">
                        {service.title}
                      </div>
                    </div>
                    <div className="text-sm leading-relaxed text-muted-foreground">
                      {service.description}
                    </div>
                  </a>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Service7 };