/* eslint-disable @next/next/no-img-element */ "use client"; import { cn } from "@/lib/utils"; import { useTranslations } from "next-intl"; type ScopeItem = { key: string; variant: "yellow" | "blue"; icon?: string; }; export default function OurScope() { const t = useTranslations("aboutUs.scope"); const SCOPE_ITEMS: ScopeItem[] = [ { key: "item1", variant: "yellow", }, { key: "item2", variant: "blue", }, { key: "item3", variant: "yellow", }, { key: "item4", variant: "blue", }, { key: "item5", variant: "blue", }, { key: "item6", variant: "yellow", }, { key: "item7", variant: "blue", }, { key: "item8", variant: "yellow", }, ]; return (
{/* Desktop Layout (lg and up) */}
{/* Container matching Figma's 1200px width layout but responsive */}
{/* Left Column */}
{SCOPE_ITEMS.slice(0, 4).map((item, index) => ( ))}
{/* Center Circle */}
{/* Outer circle - solid light blue */}
{/* Inner circle - blue gradient */}

{t("title")}

{/* Right Column */}
{SCOPE_ITEMS.slice(4, 8).map((item, index) => ( ))}
{/* Decorative Arrows (Desktop only) - Using actual Figma assets */}
{/* Arrow_07 - from القانون */}
{/* Arrow_12 - from الاقتصاد */}
{/* Arrow_12 - flipped (from الرياضات) */}
{/* Arrow_12 - rotated variant 1 (from الدراسات) */}
{/* Arrow_12 - rotated variant 2 (from الحوكمة) */}
{/* Arrow_04 - from البيئة */}
{/* Arrow_04 - rotated (from إدارة السمعة) */}
{/* Arrow_09 */}
{/* Mobile/Tablet Layout (below lg) */}
{/* Center Circle */}
{/* Outer circle - solid light blue */}
{/* Inner circle */}

{t("title")}

{/* Grid Layout */}
{SCOPE_ITEMS.map((item, index) => ( ))}
); } function ScopeCard({ item, t }: { item: ScopeItem; t: (key: string) => string }) { return (

{t(item.key)}

{item.icon && (
{/* Background circle - solid color matching outer circle */}
{/* Icon container */}
)}
); }