1153 lines
38 KiB
TypeScript
1153 lines
38 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
AppWindow,
|
|
ArrowLeft,
|
|
ArrowRight,
|
|
ArrowRightLeft,
|
|
Book,
|
|
Building,
|
|
Building2,
|
|
Calculator,
|
|
Calendar,
|
|
CheckCircle2,
|
|
Clock,
|
|
Code,
|
|
Computer,
|
|
DollarSign,
|
|
File,
|
|
Flag,
|
|
Gavel,
|
|
Globe,
|
|
Globe2,
|
|
Lightbulb,
|
|
Lock,
|
|
Menu,
|
|
Mic,
|
|
Newspaper,
|
|
Phone,
|
|
PieChart,
|
|
Play,
|
|
PlayCircle,
|
|
Puzzle,
|
|
Pyramid,
|
|
Rocket,
|
|
Scale,
|
|
Search,
|
|
ShieldCheck,
|
|
Speech,
|
|
Table,
|
|
UserPlus,
|
|
UserRound,
|
|
Users,
|
|
X,
|
|
} from "lucide-react";
|
|
import { Fragment, useState } from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
NavigationMenu,
|
|
NavigationMenuContent,
|
|
NavigationMenuItem,
|
|
NavigationMenuLink,
|
|
NavigationMenuList,
|
|
NavigationMenuTrigger,
|
|
} from "@/components/ui/navigation-menu";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const solutions = [
|
|
{
|
|
id: "solution-1",
|
|
title: "مدیریت تیم",
|
|
description: "همکاری تیم فروش و عملیات را در یک فضای واحد ساده کنید.",
|
|
href: "#",
|
|
subpages: [
|
|
{
|
|
id: "subpage-1",
|
|
title: "مدیریت فعالیت‌ها",
|
|
href: "#",
|
|
icon: File,
|
|
},
|
|
{
|
|
id: "subpage-2",
|
|
title: "برنامه‌ریزی تیم",
|
|
href: "#",
|
|
icon: Building,
|
|
},
|
|
{
|
|
id: "subpage-3",
|
|
title: "تخصیص ظرفیت",
|
|
href: "#",
|
|
icon: Search,
|
|
},
|
|
{
|
|
id: "subpage-4",
|
|
title: "ردیابی زمان",
|
|
href: "#",
|
|
icon: File,
|
|
},
|
|
{
|
|
id: "subpage-5",
|
|
title: "گزارش عملکرد تیم",
|
|
href: "#",
|
|
icon: UserPlus,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "solution-2",
|
|
title: "مدیریت کمپین و پروژه",
|
|
description: "کمپین‌ها و پروژه‌های درآمدی را با مالکیت شفاف پیش ببرید.",
|
|
href: "#",
|
|
subpages: [
|
|
{
|
|
id: "subpage-6",
|
|
title: "قالب‌های گردش‌کار",
|
|
href: "#",
|
|
icon: CheckCircle2,
|
|
},
|
|
{
|
|
id: "subpage-7",
|
|
title: "نمای خط زمانی",
|
|
href: "#",
|
|
icon: UserRound,
|
|
},
|
|
{
|
|
id: "subpage-8",
|
|
title: "هشدار تأخیر",
|
|
href: "#",
|
|
icon: ShieldCheck,
|
|
},
|
|
{
|
|
id: "subpage-9",
|
|
title: "پیگیری بودجه",
|
|
href: "#",
|
|
icon: Scale,
|
|
},
|
|
{
|
|
id: "subpage-10",
|
|
title: "تیم‌های توزیع‌شده",
|
|
href: "#",
|
|
icon: Globe,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "solution-3",
|
|
title: "اتوماسیون گردش کار",
|
|
description: "تأییدها و اعلان‌های تکراری را خودکار کنید و روی کار باارزش تمرکز کنید.",
|
|
href: "#",
|
|
subpages: [
|
|
{
|
|
id: "subpage-11",
|
|
title: "جریان‌های سفارشی",
|
|
href: "#",
|
|
icon: Globe2,
|
|
},
|
|
{
|
|
id: "subpage-12",
|
|
title: "قالب فرایند",
|
|
href: "#",
|
|
icon: Clock,
|
|
},
|
|
{
|
|
id: "subpage-13",
|
|
title: "قوانین کسب‌وکار",
|
|
href: "#",
|
|
icon: DollarSign,
|
|
},
|
|
{
|
|
id: "subpage-14",
|
|
title: "یکپارچه‌سازی‌ها",
|
|
href: "#",
|
|
icon: Phone,
|
|
},
|
|
{
|
|
id: "subpage-15",
|
|
title: "دسترسی API",
|
|
href: "#",
|
|
icon: Speech,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "solution-4",
|
|
title: "راه‌حل‌های سازمانی",
|
|
description: "عملیات درآمد را با کنترل دسترسی و گزارش سازمانی مقیاس دهید.",
|
|
href: "#",
|
|
subpages: [
|
|
{
|
|
id: "subpage-16",
|
|
title: "تحلیل پیشرفته",
|
|
href: "#",
|
|
icon: PieChart,
|
|
},
|
|
{
|
|
id: "subpage-17",
|
|
title: "کنترل‌های امنیتی",
|
|
href: "#",
|
|
icon: Calculator,
|
|
},
|
|
{
|
|
id: "subpage-18",
|
|
title: "گزارش‌دهی سفارشی",
|
|
href: "#",
|
|
icon: Table,
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const solutionTechnologies = [
|
|
{
|
|
id: "technology-1",
|
|
title: "پلتفرم یکپارچه‌سازی",
|
|
href: "#",
|
|
icon: Puzzle,
|
|
},
|
|
{
|
|
id: "technology-2",
|
|
title: "امنیت سازمانی",
|
|
href: "#",
|
|
icon: Lock,
|
|
},
|
|
{
|
|
id: "technology-3",
|
|
title: "API توسعه‌دهندگان",
|
|
href: "#",
|
|
icon: Code,
|
|
},
|
|
];
|
|
|
|
const productCategories = [
|
|
{
|
|
title: "محصولات اصلی",
|
|
products: [
|
|
{
|
|
id: "product-1",
|
|
title: "مدیریت فعالیت‌ها",
|
|
description: "کار تیم درآمد را با اولویت و مالک مشخص پیگیری کنید.",
|
|
href: "#",
|
|
image:
|
|
"/block-media/shadcnblocks/block/block-1.svg",
|
|
},
|
|
{
|
|
id: "product-2",
|
|
title: "تقویم تیم",
|
|
description: "مهلت کمپین و جلسه فروش را هماهنگ کنید.",
|
|
href: "#",
|
|
image:
|
|
"/block-media/shadcnblocks/block/block-2.svg",
|
|
},
|
|
{
|
|
id: "product-3",
|
|
title: "گردش‌های کار",
|
|
description: "فرایندهای فروش و بازاریابی را خودکار کنید.",
|
|
href: "#",
|
|
image:
|
|
"/block-media/shadcnblocks/block/block-3.svg",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "قابلیت‌های پیشرفته",
|
|
products: [
|
|
{
|
|
id: "product-4",
|
|
title: "مدیریت پورتفوی پروژه",
|
|
description: "سبد پروژه‌های درآمدی را در مقیاس سازمانی پیگیری کنید.",
|
|
href: "#",
|
|
image:
|
|
"/block-media/shadcnblocks/block/block-4.svg",
|
|
},
|
|
{
|
|
id: "product-5",
|
|
title: "برنامه‌ریزی منابع",
|
|
description: "بار کاری تیم فروش و بازاریابی را متعادل کنید.",
|
|
href: "#",
|
|
image:
|
|
"/block-media/shadcnblocks/block/block-5.svg",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const globalCategories = [
|
|
{
|
|
title: "راه‌حل‌های سازمانی",
|
|
features: [
|
|
{
|
|
id: "feature-1",
|
|
title: "تحول عملیات درآمد",
|
|
description: "نحوه همکاری تیم‌های درآمد را با هم‌آهنگ متحول کنید.",
|
|
href: "#",
|
|
icon: Rocket,
|
|
},
|
|
{
|
|
id: "feature-2",
|
|
title: "مدیریت تغییر",
|
|
description: "هدایت پذیرش ابزار و آموزش تیم برای استقرار موفق.",
|
|
href: "#",
|
|
icon: Building2,
|
|
},
|
|
{
|
|
id: "feature-3",
|
|
title: "استقرار چندمنطقه‌ای",
|
|
description: "برای تیم‌های چندمنطقه‌ای با کنترل نقش گسترش دهید.",
|
|
href: "#",
|
|
icon: Globe2,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "راه‌حل‌های کسب‌وکار",
|
|
features: [
|
|
{
|
|
id: "feature-4",
|
|
title: "موفقیت مشتری",
|
|
description: "همراهی اختصاصی برای افزایش نرخ تمدید و رضایت.",
|
|
href: "#",
|
|
icon: Phone,
|
|
},
|
|
{
|
|
id: "feature-5",
|
|
title: "انطباق",
|
|
description: "استانداردهای امنیتی و حریم خصوصی را رعایت کنید.",
|
|
href: "#",
|
|
icon: Gavel,
|
|
},
|
|
{
|
|
id: "feature-6",
|
|
title: "محاسبه‌گر ROI",
|
|
description: "تأثیر اتوماسیون بر بهره‌وری تیم را بسنجید.",
|
|
href: "#",
|
|
icon: DollarSign,
|
|
},
|
|
{
|
|
id: "feature-7",
|
|
title: "راه‌حل‌های فناوری",
|
|
description: "امنیت، نقش‌ها و مدیریت در سطح سازمانی.",
|
|
href: "#",
|
|
icon: Computer,
|
|
},
|
|
{
|
|
id: "feature-8",
|
|
title: "برنامه‌ریزی راهبردی",
|
|
description: "اهداف فصلی تیم‌های درآمد را هم‌راستا کنید.",
|
|
href: "#",
|
|
icon: Flag,
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const regions = [
|
|
{
|
|
title: "آسیا و اقیانوسیه",
|
|
locations: [
|
|
{
|
|
title: "چین",
|
|
href: "#",
|
|
icon: "🇨🇳",
|
|
},
|
|
{
|
|
title: "هند",
|
|
href: "#",
|
|
icon: "🇮🇳",
|
|
},
|
|
{
|
|
title: "ژاپن",
|
|
href: "#",
|
|
icon: "🇯🇵",
|
|
},
|
|
{
|
|
title: "تایلند",
|
|
href: "#",
|
|
icon: "🇹🇭",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "اروپا",
|
|
locations: [
|
|
{
|
|
title: "ایتالیا",
|
|
href: "#",
|
|
icon: "🇮🇹",
|
|
},
|
|
{
|
|
title: "آلمان",
|
|
href: "#",
|
|
icon: "🇩🇪",
|
|
},
|
|
{
|
|
title: "لهستان",
|
|
href: "#",
|
|
icon: "🇵🇱",
|
|
},
|
|
{
|
|
title: "بریتانیا",
|
|
href: "#",
|
|
icon: "🇬🇧",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "قاره آمریکا",
|
|
locations: [
|
|
{
|
|
title: "برزیل",
|
|
href: "#",
|
|
icon: "🇧🇷",
|
|
},
|
|
{
|
|
title: "کانادا",
|
|
href: "#",
|
|
icon: "🇨🇦",
|
|
},
|
|
{
|
|
title: "مکزیک",
|
|
href: "#",
|
|
icon: "🇲🇽",
|
|
},
|
|
{
|
|
title: "ایالات متحده",
|
|
href: "#",
|
|
icon: "🇺🇸",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "خاورمیانه و آفریقا",
|
|
locations: [
|
|
{
|
|
title: "مصر",
|
|
href: "#",
|
|
icon: "🇸🇦",
|
|
},
|
|
{
|
|
title: "نیجریه",
|
|
href: "#",
|
|
icon: "🇳🇬",
|
|
},
|
|
{
|
|
title: "ترکیه",
|
|
href: "#",
|
|
icon: "🇹🇷",
|
|
},
|
|
{
|
|
title: "امارات متحده عربی",
|
|
href: "#",
|
|
icon: "🇦🇪",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const resources = [
|
|
{
|
|
id: "resource-1",
|
|
title: "رویدادها و وبینارها",
|
|
description: "از متخصصان عملیات فروش و همکاری بیاموزید.",
|
|
href: "#",
|
|
icon: Calendar,
|
|
},
|
|
{
|
|
id: "resource-2",
|
|
title: "پادکست‌ها",
|
|
description: "بینش درباره بهره‌وری تیم‌های درآمد.",
|
|
href: "#",
|
|
icon: Mic,
|
|
},
|
|
{
|
|
id: "resource-3",
|
|
title: "وبلاگ",
|
|
description: "به‌روزرسانی محصول و بهترین روش‌های همکاری.",
|
|
href: "#",
|
|
icon: Newspaper,
|
|
},
|
|
{
|
|
id: "resource-4",
|
|
title: "آموزش ویدیویی",
|
|
description: "با ویدیوهای کوتاه راه‌اندازی را سریع شروع کنید.",
|
|
href: "#",
|
|
icon: PlayCircle,
|
|
},
|
|
{
|
|
id: "resource-5",
|
|
title: "پایگاه دانش",
|
|
description: "راهنماها و مستندات استقرار.",
|
|
href: "#",
|
|
icon: Book,
|
|
},
|
|
{
|
|
id: "resource-6",
|
|
title: "مطالعات موردی",
|
|
description: "ببینید تیم‌ها چگونه زمان هماهنگی را کاهش دادند.",
|
|
href: "#",
|
|
icon: Lightbulb,
|
|
},
|
|
];
|
|
|
|
const topicGroups = [
|
|
{
|
|
title: "منابع یادگیری",
|
|
topics: [
|
|
{
|
|
id: "topic-1",
|
|
title: "راهنمای شروع",
|
|
href: "#",
|
|
icon: Globe,
|
|
},
|
|
{
|
|
id: "topic-2",
|
|
title: "به‌روزرسانی محصول",
|
|
href: "#",
|
|
icon: Rocket,
|
|
},
|
|
{
|
|
id: "topic-3",
|
|
title: "بهترین روش‌ها",
|
|
href: "#",
|
|
icon: Pyramid,
|
|
},
|
|
{
|
|
id: "topic-4",
|
|
title: "یکپارچه‌سازی‌ها",
|
|
href: "#",
|
|
icon: ArrowRightLeft,
|
|
},
|
|
{
|
|
id: "topic-5",
|
|
title: "مستندات API",
|
|
href: "#",
|
|
icon: AppWindow,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "انجمن",
|
|
topics: [
|
|
{
|
|
id: "topic-6",
|
|
title: "انجمن کاربران",
|
|
href: "#",
|
|
icon: Play,
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const SolutionsMenu = () => (
|
|
<div className="grid gap-8 sm:grid-cols-2">
|
|
<a
|
|
href="#"
|
|
className="group relative flex h-full flex-row overflow-hidden rounded-lg bg-primary px-0 pt-8 text-primary-foreground lg:rounded-xl lg:px-6"
|
|
>
|
|
<div className="relative flex w-full flex-col space-y-12 text-start md:space-y-8 lg:w-full lg:flex-row lg:justify-between lg:space-y-0 lg:space-x-6 xl:space-x-8">
|
|
<div className="relative flex flex-col px-6 lg:mb-6 lg:px-0">
|
|
<span className="mb-6 text-xs font-medium tracking-wider uppercase md:mb-8">
|
|
همکاری تیم را متحول کنید
|
|
</span>
|
|
<div className="mt-auto flex items-center gap-1 text-xs">
|
|
هم‌آهنگ را کشف کنید
|
|
<ArrowRight className="size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
|
|
</div>
|
|
<p className="mt-2 text-xs text-primary-foreground/85">
|
|
همکاری را ساده کنید، گردش کار را خودکار کنید و بهره‌وری تیم درآمد را
|
|
بالا ببرید.
|
|
</p>
|
|
</div>
|
|
<div className="relative aspect-2/1 overflow-clip rounded-t ps-6 lg:max-w-64 lg:ps-0 xl:max-w-96">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="پیش‌نمایش فضای کاری هم‌آهنگ"
|
|
className="aspect-2/1 h-full w-full translate-y-px object-cover object-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<div className="order-last mt-3 sm:order-none sm:mt-0 sm:py-2 md:p-6">
|
|
<div className="mb-4 text-start leading-none md:col-span-2 lg:col-span-4 lg:mb-6">
|
|
<strong className="text-start text-xs font-medium tracking-wider text-muted-foreground uppercase">
|
|
پلتفرم API
|
|
</strong>
|
|
</div>
|
|
<div className="grid gap-4 lg:grid-cols-2">
|
|
{solutionTechnologies.map((technology) => (
|
|
<NavigationMenuLink
|
|
key={technology.id}
|
|
href="#"
|
|
className="group flex flex-row items-center gap-4"
|
|
>
|
|
<technology.icon className="size-4" />
|
|
<div className="flex-1 text-sm font-medium">{technology.title}</div>
|
|
<ArrowRight className="size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 lg:hidden" />
|
|
</NavigationMenuLink>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="col-span-full grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4 lg:gap-8">
|
|
{solutions.map((solution) => (
|
|
<div key={solution.id} className="rounded-md border border-border p-5">
|
|
<div className="border-b border-border pb-4">
|
|
<a href={solution.href} className="group flex flex-col text-start">
|
|
<div className="flex items-center">
|
|
<strong className="text-sm font-medium">
|
|
{solution.title}
|
|
</strong>
|
|
<ArrowRight className="ms-1 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
|
|
</div>
|
|
<p className="mt-1 text-xs text-muted-foreground">
|
|
{solution.description}
|
|
</p>
|
|
</a>
|
|
</div>
|
|
<menu className="mt-6 grid gap-y-4">
|
|
{solution.subpages.map((subpage) => (
|
|
<NavigationMenuLink
|
|
key={subpage.id}
|
|
href={subpage.href}
|
|
className="group flex flex-row items-center space-x-4 text-start text-foreground/85 hover:text-foreground lg:space-x-4 lg:border-0"
|
|
>
|
|
<subpage.icon className="size-4" />
|
|
<div className="flex-1 text-sm font-medium">
|
|
{subpage.title}
|
|
</div>
|
|
<ArrowRight className="size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 lg:hidden" />
|
|
</NavigationMenuLink>
|
|
))}
|
|
</menu>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const ProductsMenu = () => (
|
|
<div className="grid gap-y-12 lg:flex lg:space-x-8">
|
|
<div className="w-full shrink-0 lg:max-w-[18rem]">
|
|
<a
|
|
href="#"
|
|
className="group relative flex h-full flex-row overflow-hidden rounded-lg px-0 text-primary-foreground lg:rounded-xl"
|
|
>
|
|
<div className="relative z-10 flex w-full flex-col text-start">
|
|
<div className="relative flex aspect-2/1 max-h-[11rem] w-full flex-1 justify-center">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-2.svg"
|
|
alt="پیش‌نمایش فضای کاری هم‌آهنگ"
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
<div className="relative z-20 flex flex-col rounded-b-xl bg-primary p-6">
|
|
<div className="flex items-center space-x-1 text-xs">
|
|
راه‌حل‌های سازمانی
|
|
<ArrowRight className="ms-1 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
|
|
</div>
|
|
<p className="mt-2 text-xs text-primary-foreground/70">
|
|
سازمان خود را با کنترل دسترسی و پشتیبانی سازمانی مقیاس دهید.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div className="grid w-full gap-y-12 lg:gap-y-6">
|
|
{productCategories.map((category) => (
|
|
<div key={category.title} className="grid gap-y-2 lg:gap-y-6">
|
|
<div className="border-border text-start lg:border-b lg:pb-3">
|
|
<strong className="text-start text-xs font-medium tracking-wider text-muted-foreground uppercase">
|
|
{category.title}
|
|
</strong>
|
|
</div>
|
|
<menu className="grid md:grid-cols-3 md:gap-x-5 lg:gap-y-7">
|
|
{category.products.map((product) => (
|
|
<NavigationMenuLink
|
|
key={product.id}
|
|
href="#"
|
|
className="group flex flex-row items-center space-x-6 border-b border-border py-5 text-start sm:py-7 lg:space-x-4 lg:border-0 lg:py-2"
|
|
>
|
|
<div className="relative flex aspect-square w-6 shrink-0 items-center justify-center overflow-clip rounded md:size-9 md:p-2">
|
|
<img
|
|
src={product.image}
|
|
alt={product.title}
|
|
className="dark:invert"
|
|
/>
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="text-sm font-medium text-foreground/85 group-hover:text-foreground">
|
|
{product.title}
|
|
</div>
|
|
<p className="mt-1 text-xs text-muted-foreground group-hover:text-foreground">
|
|
{product.description}
|
|
</p>
|
|
</div>
|
|
<ArrowRight className="size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 lg:hidden" />
|
|
</NavigationMenuLink>
|
|
))}
|
|
</menu>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const GlobalGuidanceMenu = () => (
|
|
<div>
|
|
<div className="space-y-6 lg:flex lg:space-y-0 lg:space-x-8">
|
|
<div className="w-full shrink-0 lg:max-w-[18rem]">
|
|
<a
|
|
href="#"
|
|
className="group relative flex h-full flex-row overflow-hidden rounded-lg p-0 text-primary-foreground lg:rounded-xl"
|
|
>
|
|
<div className="relative z-10 flex w-full flex-col-reverse text-start lg:flex-col">
|
|
<div className="relative flex aspect-4/3 max-h-[18rem] w-full flex-1 justify-center">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-3.svg"
|
|
alt="پیش‌نمایش فضای کاری هم‌آهنگ"
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
<div className="relative z-20 flex flex-col rounded-b-xl bg-primary p-6">
|
|
<div className="flex items-center gap-1 text-xs">
|
|
راه‌حل‌های سازمانی
|
|
<ArrowRight className="size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
|
|
</div>
|
|
<p className="mt-2 text-xs text-primary-foreground/85">
|
|
سازمان خود را با کنترل دسترسی و پشتیبانی سازمانی مقیاس دهید.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div className="grid w-full gap-y-12 lg:gap-y-6">
|
|
{globalCategories.map((category) => (
|
|
<div key={category.title} className="grid gap-y-2 lg:gap-y-6">
|
|
<div className="border-border text-start lg:border-b lg:pb-3">
|
|
<strong className="text-start text-xs font-medium tracking-wider text-muted-foreground uppercase">
|
|
{category.title}
|
|
</strong>
|
|
</div>
|
|
<menu className="grid md:grid-cols-3 md:gap-x-6 lg:gap-y-6">
|
|
{category.features.map((feature) => (
|
|
<NavigationMenuLink
|
|
key={feature.id}
|
|
href="#"
|
|
className="group flex flex-row items-center space-x-4 border-b border-border py-5 text-start sm:py-7 lg:border-0 lg:py-0"
|
|
>
|
|
<div className="flex aspect-square size-9 shrink-0 items-center justify-center">
|
|
<feature.icon className="size-5" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="text-sm font-medium text-foreground/85 group-hover:text-foreground">
|
|
{feature.title}
|
|
</div>
|
|
<p className="mt-1 text-xs text-muted-foreground group-hover:text-foreground">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
<ArrowRight className="size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 lg:hidden" />
|
|
</NavigationMenuLink>
|
|
))}
|
|
</menu>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="mt-8">
|
|
<div className="mb-6 border-border pb-1 text-start lg:border-b">
|
|
<strong className="text-start text-xs font-medium tracking-wider text-muted-foreground uppercase">
|
|
مناطق فعال
|
|
</strong>
|
|
</div>
|
|
<div className="grid gap-6 md:grid-cols-3 lg:grid-cols-4">
|
|
{regions.map((region) => (
|
|
<div
|
|
key={region.title}
|
|
className="space-y-6 rounded-md border border-border p-6 lg:border-0 lg:p-0"
|
|
>
|
|
<div className="text-start text-xs text-muted-foreground">
|
|
{region.title}
|
|
</div>
|
|
<menu className="grid gap-y-3 border-t border-border pt-6 lg:border-0 lg:pt-0">
|
|
{region.locations.map((location) => (
|
|
<NavigationMenuLink
|
|
key={location.title}
|
|
href={location.href}
|
|
className="group flex flex-row items-center space-x-4 text-start text-foreground/85 hover:text-foreground lg:space-x-4 lg:border-0 lg:py-0"
|
|
>
|
|
<div className="flex size-4 items-center justify-center">
|
|
{location.icon}
|
|
</div>
|
|
<div className="flex-1 text-sm font-medium">
|
|
{location.title}
|
|
</div>
|
|
<ArrowRight className="size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 lg:hidden" />
|
|
</NavigationMenuLink>
|
|
))}
|
|
</menu>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const PartnersMenu = () => (
|
|
<div className="grid gap-y-6 md:grid-cols-2 md:gap-x-6 lg:grid-cols-4">
|
|
<div className="md:col-span-2">
|
|
<a
|
|
href="#"
|
|
className="group relative flex h-full flex-row overflow-hidden rounded-lg bg-primary p-0 text-primary-foreground lg:rounded-xl"
|
|
>
|
|
<div className="relative z-10 flex w-full flex-col-reverse text-start">
|
|
<div className="relative z-20 flex flex-col px-6 pt-6 pb-[14rem] md:pt-40 md:pb-6">
|
|
<div className="mt-auto flex items-center space-x-1 text-xs font-medium">
|
|
برنامه شرکا
|
|
<ArrowRight className="ms-1 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
|
|
</div>
|
|
<p className="mt-2 text-xs">
|
|
به شبکه شرکای ما بپیوندید و با پلتفرم بهره‌وری پیشرو کسب‌وکار خود
|
|
را با اکوسیستم هم‌آهنگ رشد دهید.
|
|
</p>
|
|
</div>
|
|
<div className="absolute inset-0 top-[32%] bg-accent invert md:top-0">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="پیش‌نمایش فضای کاری هم‌آهنگ"
|
|
className="object-fit h-full w-full object-top-right opacity-100 md:h-2/3 md:object-top"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div className="md:col-span-1">
|
|
<a
|
|
href="#"
|
|
className="group relative flex h-full flex-row overflow-hidden rounded-lg bg-accent p-0 text-accent-foreground lg:rounded-xl"
|
|
>
|
|
<div className="relative z-10 flex w-full flex-col-reverse text-start">
|
|
<div className="relative z-20 flex flex-col px-6 pt-6 pb-[14rem] md:pt-40 md:pb-6">
|
|
<div className="mt-auto flex items-center space-x-1 text-xs font-medium">
|
|
شرکای راه‌حل
|
|
<ArrowRight className="ms-1 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
|
|
</div>
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|
راه‌حل‌هایی بسازید که همکاری و اتوماسیون را برای مشتریان تسریع کند
|
|
و زودتر نتیجه بگیرند.
|
|
</p>
|
|
</div>
|
|
<div className="absolute inset-0 top-[32%] md:top-0">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-2.svg"
|
|
alt="پیش‌نمایش فضای کاری هم‌آهنگ"
|
|
className="object-fit h-full w-full object-top-right md:h-2/3 md:object-top"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div className="grid gap-4 md:col-span-1">
|
|
<NavigationMenuLink
|
|
href="#"
|
|
className="group flex w-full flex-row items-center rounded-lg border border-border lg:rounded-xl"
|
|
>
|
|
<div className="flex items-start p-6 text-start">
|
|
<Users className="size-8" />
|
|
<div className="ms-4">
|
|
<div className="mt-auto mb-1 text-sm font-bold text-foreground/85 hover:text-foreground">
|
|
شرکای پیاده‌سازی
|
|
</div>
|
|
<p className="text-xs text-muted-foreground group-hover:text-foreground">
|
|
همراهی در استقرار و آموزش تیم‌های درآمد.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</NavigationMenuLink>
|
|
<NavigationMenuLink
|
|
href="#"
|
|
className="group flex w-full flex-row items-center rounded-lg border border-border lg:rounded-xl"
|
|
>
|
|
<div className="flex items-start p-6 text-start">
|
|
<Computer className="size-8" />
|
|
<div className="ms-4">
|
|
<div className="mt-auto mb-1 text-sm font-bold text-foreground/85 hover:text-foreground">
|
|
شرکای فناوری
|
|
</div>
|
|
<p className="text-xs text-muted-foreground group-hover:text-foreground">
|
|
یکپارچه با سامانه مدیریت ارتباط با مشتری، پشتیبانی و ابزارهای تحلیل شما.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</NavigationMenuLink>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const ResourcesMenu = () => (
|
|
<div className="grid gap-y-12 md:grid-cols-2 md:gap-x-6 lg:grid-cols-4 lg:gap-6">
|
|
<div className="col-span-1">
|
|
<a
|
|
href="#"
|
|
className="group relative flex h-full flex-row overflow-hidden rounded-lg bg-primary p-0 text-primary-foreground lg:rounded-xl"
|
|
>
|
|
<div className="relative z-10 flex w-full flex-col-reverse text-start">
|
|
<div className="relative z-20 flex flex-col px-6 pt-6 pb-[14rem] md:pt-40 md:pb-6">
|
|
<div className="mt-auto flex items-center space-x-1 text-xs">
|
|
مرکز منابع
|
|
<ArrowRight className="ms-1 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
|
|
</div>
|
|
<p className="mt-2 text-xs">
|
|
به راهنماها و بهترین روش‌های همکاری تیمی دسترسی
|
|
داشته باشید.
|
|
</p>
|
|
</div>
|
|
<div className="absolute inset-0">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-4.svg"
|
|
alt="پیش‌نمایش فضای کاری هم‌آهنگ"
|
|
className="h-full w-full object-cover object-center invert"
|
|
/>
|
|
</div>
|
|
<div className="absolute inset-x-0 top-0 z-10 h-[60%] bg-[linear-gradient(hsl(var(--color-primary))_50%,transparent)] md:top-auto md:bottom-[-10%] md:h-[50%] md:bg-[linear-gradient(transparent,hsl(var(--color-primary))_50%)]"></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div className="lg:col-span-2 lg:flex lg:flex-col">
|
|
<div>
|
|
<div className="mb-4 border-border pb-3 text-start md:mb-6 lg:border-b">
|
|
<strong className="text-start text-xs font-medium tracking-wider text-muted-foreground uppercase">
|
|
منابع برجسته
|
|
</strong>
|
|
</div>
|
|
</div>
|
|
<menu className="grid gap-y-4 lg:h-full lg:grid-cols-2 lg:gap-6">
|
|
{resources.map((resource) => (
|
|
<NavigationMenuLink
|
|
key={resource.id}
|
|
href={resource.href}
|
|
className="group flex flex-row items-center space-x-4 rounded-md border-border bg-accent px-6 py-5 text-start md:space-x-5 lg:border lg:bg-background lg:p-5"
|
|
>
|
|
<resource.icon className="size-6 sm:size-7" />
|
|
<div className="ml-4 flex-1">
|
|
<div className="text-sm font-medium text-foreground/85 group-hover:text-foreground">
|
|
{resource.title}
|
|
</div>
|
|
<p className="mt-1 text-xs text-muted-foreground group-hover:text-foreground">
|
|
{resource.description}
|
|
</p>
|
|
</div>
|
|
<ArrowRight className="size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 lg:hidden" />
|
|
</NavigationMenuLink>
|
|
))}
|
|
</menu>
|
|
</div>
|
|
<div className="col-span-1 md:col-span-2 lg:col-span-1">
|
|
{topicGroups.map((group) => (
|
|
<Fragment key={group.title}>
|
|
<div className="mb-4 border-border pb-3 text-start md:col-span-2 md:mb-7 lg:border-b">
|
|
<strong className="text-start text-xs font-medium tracking-wider text-muted-foreground uppercase">
|
|
{group.title}
|
|
</strong>
|
|
</div>
|
|
<menu className="mb-7 grid md:grid-cols-2 md:gap-x-6 lg:grid-cols-1 lg:gap-x-0">
|
|
{group.topics.map((topic) => (
|
|
<NavigationMenuLink
|
|
key={topic.id}
|
|
href={topic.href}
|
|
className="group flex flex-row items-center space-x-6 border-b border-border py-5 text-start sm:py-8 lg:space-x-4 lg:border-0 lg:py-0"
|
|
>
|
|
<div className="flex aspect-square size-9 shrink-0 items-center justify-center">
|
|
<topic.icon className="size-5" />
|
|
</div>
|
|
<div className="flex-1 text-xs font-medium text-foreground/85 group-hover:text-foreground md:text-sm">
|
|
{topic.title}
|
|
</div>
|
|
<ArrowRight className="size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 lg:hidden" />
|
|
</NavigationMenuLink>
|
|
))}
|
|
</menu>
|
|
</Fragment>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const navigationMenuItems = [
|
|
{
|
|
key: "solutions",
|
|
label: "راه‌حل‌ها",
|
|
component: SolutionsMenu,
|
|
},
|
|
{
|
|
key: "products",
|
|
label: "محصولات",
|
|
component: ProductsMenu,
|
|
},
|
|
{
|
|
key: "global",
|
|
label: "شرکت",
|
|
component: GlobalGuidanceMenu,
|
|
},
|
|
{
|
|
key: "partners",
|
|
label: "شرکا",
|
|
component: PartnersMenu,
|
|
},
|
|
{
|
|
key: "resources",
|
|
label: "منابع",
|
|
component: ResourcesMenu,
|
|
},
|
|
] as const;
|
|
|
|
interface Navbar4Props {
|
|
contained?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const mobileMenuOverlayClass = (contained: boolean) =>
|
|
cn(
|
|
"container flex w-full flex-col overflow-auto border-t border-border bg-background text-start lg:hidden",
|
|
contained
|
|
? "absolute inset-x-0 top-full z-50 max-h-[min(85vh,40rem)]"
|
|
: "fixed inset-0 top-[72px] h-[calc(100vh-72px)]",
|
|
);
|
|
|
|
const Navbar4 = ({ contained = false, className }: Navbar4Props) => {
|
|
const [open, setOpen] = useState(false);
|
|
const [submenu, setSubmenu] = useState<
|
|
"solutions" | "products" | "global" | "partners" | "resources" | null
|
|
>(null);
|
|
|
|
return (
|
|
<section
|
|
lang="fa"
|
|
className={cn(
|
|
"z-20 bg-background text-start",
|
|
contained ? "relative overflow-visible" : "inset-x-0 top-0",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="container">
|
|
<NavigationMenu
|
|
dir="rtl"
|
|
className={cn(
|
|
"relative z-50 w-full max-w-full text-start",
|
|
"[&>div:last-child]:inset-x-0 [&>div:last-child]:w-full [&>div:last-child]:justify-center",
|
|
"[&>div:last-child>div]:mt-1.5 [&>div:last-child>div]:w-full [&>div:last-child>div]:max-w-full",
|
|
"[&>div:last-child>div]:rounded-md [&>div:last-child>div]:border [&>div:last-child>div]:bg-popover [&>div:last-child>div]:shadow",
|
|
)}
|
|
>
|
|
<div className="flex w-full justify-between gap-2 py-4">
|
|
<a
|
|
href="https://www.ShadcnBlocks"
|
|
className="flex items-center gap-2"
|
|
>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg"
|
|
className="max-h-8 dark:invert"
|
|
alt="لوگو"
|
|
/>
|
|
<span className="text-lg font-semibold tracking-tighter">
|
|
هم‌آهنگ
|
|
</span>
|
|
</a>
|
|
<div className="flex items-center gap-2 xl:gap-8">
|
|
<NavigationMenuList className="hidden gap-0 lg:flex">
|
|
{navigationMenuItems.map((item) => (
|
|
<NavigationMenuItem key={item.key}>
|
|
<NavigationMenuTrigger className="text-start text-xs [&_svg]:ms-1 [&_svg]:!ml-0 xl:text-sm">
|
|
{item.label}
|
|
</NavigationMenuTrigger>
|
|
<NavigationMenuContent
|
|
dir="rtl"
|
|
className="inset-x-0 start-0 end-0 left-auto right-auto w-full p-6 text-start 2xl:p-12"
|
|
>
|
|
<item.component />
|
|
</NavigationMenuContent>
|
|
</NavigationMenuItem>
|
|
))}
|
|
</NavigationMenuList>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button className="hidden md:block">ورود</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
aria-label="منوی اصلی"
|
|
className="lg:hidden"
|
|
onClick={() => {
|
|
if (open) {
|
|
setOpen(false);
|
|
setSubmenu(null);
|
|
} else {
|
|
setOpen(true);
|
|
}
|
|
}}
|
|
>
|
|
{!open && <Menu className="size-4" />}
|
|
{open && <X className="size-4" />}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{open && (
|
|
<div className={mobileMenuOverlayClass(contained)}>
|
|
{submenu && (
|
|
<div className="mt-3">
|
|
<Button
|
|
variant="link"
|
|
onClick={() => setSubmenu(null)}
|
|
className="relative -start-4"
|
|
>
|
|
<ArrowLeft className="size-4 rtl:rotate-180" />
|
|
بازگشت
|
|
</Button>
|
|
</div>
|
|
)}
|
|
{submenu === null && (
|
|
<div>
|
|
{navigationMenuItems.map((item) => (
|
|
<button
|
|
key={item.key}
|
|
type="button"
|
|
className="flex w-full items-center border-b border-border py-6 text-start"
|
|
onClick={() => setSubmenu(item.key)}
|
|
>
|
|
<span className="flex-1 text-sm font-medium">
|
|
{item.label}
|
|
</span>
|
|
<span className="shrink-0">
|
|
<ArrowRight className="size-4 rtl:rotate-180" />
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
{navigationMenuItems.map(
|
|
(item) =>
|
|
submenu === item.key && (
|
|
<div key={item.key}>
|
|
<h2 className="pt-4 pb-6 text-lg font-medium">
|
|
{item.label}
|
|
</h2>
|
|
<item.component />
|
|
</div>
|
|
),
|
|
)}
|
|
{/* Mobile menu footer */}
|
|
<div className="mx-8 mt-auto flex flex-col items-center gap-8 py-12">
|
|
<Button>ورود</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</NavigationMenu>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Navbar4 };
|