690 lines
31 KiB
TypeScript
690 lines
31 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
ArrowUpRight,
|
|
BarChart,
|
|
Bitcoin,
|
|
Building,
|
|
Building2,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
Cloud,
|
|
Cpu,
|
|
Film,
|
|
Fingerprint,
|
|
GraduationCap,
|
|
HeartPulse,
|
|
Leaf,
|
|
Lock,
|
|
Menu,
|
|
X,
|
|
} from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
import {
|
|
Logo,
|
|
LogoImageDesktop,
|
|
LogoImageMobile,
|
|
} from "@/components/shadcnblocks/logo";
|
|
import { Badge } from "@/components/ui/badge";
|
|
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 = [
|
|
{
|
|
title: "اتوماسیون ایمیل",
|
|
description: "ارسال کمپین، سگمنت و پرورش لید در مقیاس سازمانی.",
|
|
href: "#",
|
|
icon: Cloud,
|
|
},
|
|
{
|
|
title: "امتیازدهی لید",
|
|
description: "اولویت‌بندی خودکار لیدها بر اساس رفتار و تعامل.",
|
|
href: "#",
|
|
icon: Lock,
|
|
},
|
|
{
|
|
title: "گزارش Attribution",
|
|
description: "اثر هر کانال روی فرصت و درآمد را ببینید.",
|
|
href: "#",
|
|
icon: Fingerprint,
|
|
},
|
|
];
|
|
|
|
const useCases = [
|
|
{ title: "SaaS", href: "#", icon: Building2 },
|
|
{ title: "خدمات B2B", href: "#", icon: HeartPulse },
|
|
{ title: "فناوری", href: "#", icon: Cpu },
|
|
{ title: "آموزش سازمانی", href: "#", icon: GraduationCap },
|
|
{ title: "تولید", href: "#", icon: Leaf },
|
|
{ title: "فروش سازمانی", href: "#", icon: Building },
|
|
{ title: "رسانه", href: "#", icon: Film },
|
|
{ title: "SaaS", href: "#", icon: BarChart },
|
|
{ title: "فین‌تک", href: "#", icon: Bitcoin },
|
|
];
|
|
|
|
const documentationLinks = [
|
|
{ title: "مرجع API", href: "#" },
|
|
{ title: "مستندات SDK", href: "#" },
|
|
{ title: "راهنمای یکپارچه‌سازی سامانه مدیریت ارتباط با مشتری", href: "#" },
|
|
{ title: "نمونه جریان کمپین", href: "#" },
|
|
];
|
|
|
|
const resources = [
|
|
{
|
|
title: "وبلاگ",
|
|
description: "آموزش سازمانی‌های تقاضا و بهترین روش‌های اتوماسیون.",
|
|
href: "#",
|
|
},
|
|
{
|
|
title: "اخبار محصول",
|
|
description: "قابلیت‌های جدید، اعلان‌ها و گزارش‌های رشد.",
|
|
href: "#",
|
|
},
|
|
];
|
|
|
|
interface Navbar3Props {
|
|
contained?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const mobileMenuOverlayClass = (contained: boolean) =>
|
|
cn(
|
|
"flex w-full flex-col overflow-scroll border-t border-border bg-background text-start lg:hidden",
|
|
contained
|
|
? "absolute inset-x-0 top-full z-50 max-h-[min(70vh,32rem)]"
|
|
: "fixed inset-0 top-[72px] z-50 h-[calc(100vh-72px)]",
|
|
);
|
|
|
|
const Navbar3 = ({ contained = false, className }: Navbar3Props) => {
|
|
const [open, setOpen] = useState(false);
|
|
const [submenu, setSubmenu] = useState<
|
|
"platform" | "usecases" | "developers" | "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(
|
|
"min-w-full text-start",
|
|
contained
|
|
? "[&>div:last-child]:inset-x-0 [&>div:last-child]:w-full [&>div:last-child]:justify-center [&>div:last-child>div]:w-full [&>div:last-child>div]:max-w-full"
|
|
: "[&>div:last-child]:left-1/2 [&>div:last-child]:-translate-x-1/2",
|
|
)}
|
|
>
|
|
<div className="flex w-full items-center justify-between gap-12 py-4">
|
|
{/* Logo */}
|
|
<div>
|
|
{(!open || !submenu) && (
|
|
<>
|
|
<Logo url="https://ShadcnBlocks">
|
|
<LogoImageDesktop
|
|
src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo-word.svg"
|
|
className="h-7 dark:invert"
|
|
alt="لوگو"
|
|
/>
|
|
<LogoImageMobile
|
|
src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
|
|
className="h-7 dark:invert"
|
|
alt="لوگو"
|
|
/>
|
|
</Logo>
|
|
</>
|
|
)}
|
|
{open && submenu && (
|
|
<Button variant="outline" onClick={() => setSubmenu(null)}>
|
|
<ChevronLeft />
|
|
بازگشت
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<NavigationMenuList className="hidden lg:flex">
|
|
<NavigationMenuItem>
|
|
<NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!ml-0">
|
|
پلتفرم
|
|
</NavigationMenuTrigger>
|
|
<NavigationMenuContent
|
|
dir="rtl"
|
|
className="min-w-[min(900px,100%)] max-w-full p-6 text-start"
|
|
>
|
|
<div className="flex justify-between gap-8">
|
|
<NavigationMenuLink
|
|
href="#"
|
|
className="group w-1/3 p-0 hover:bg-transparent"
|
|
>
|
|
<div className="overflow-clip rounded-lg border border-input bg-background">
|
|
<div>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="پیش‌نمایش داشبورد کمپین‌پرو"
|
|
className="aspect-[4/3] object-cover object-center"
|
|
/>
|
|
</div>
|
|
<div className="p-5 xl:p-8">
|
|
<div className="mb-2 text-base">نمای کلی پلتفرم</div>
|
|
<div className="text-sm font-normal text-muted-foreground">
|
|
ببینید کمپین‌پرو چگونه قیف بازاریابی را شفاف می‌کند.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</NavigationMenuLink>
|
|
<div className="max-w-[760px] flex-1">
|
|
<div className="mb-6 text-start text-xs tracking-widest text-muted-foreground uppercase">
|
|
راه‌حل‌ها
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2 lg:gap-8">
|
|
{solutions.map((solution, index) => (
|
|
<NavigationMenuLink
|
|
key={index}
|
|
href={solution.href}
|
|
className="group block p-4"
|
|
>
|
|
<div className="mb-5 group-hover:opacity-60">
|
|
<solution.icon className="size-5" />
|
|
</div>
|
|
<div className="mb-1 text-base">
|
|
{solution.title}
|
|
</div>
|
|
<div className="text-sm font-normal text-muted-foreground">
|
|
{solution.description}
|
|
</div>
|
|
</NavigationMenuLink>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</NavigationMenuContent>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!ml-0">
|
|
موارد استفاده
|
|
</NavigationMenuTrigger>
|
|
<NavigationMenuContent
|
|
dir="rtl"
|
|
className="min-w-[min(900px,100%)] max-w-full p-6 text-start"
|
|
>
|
|
<div className="flex justify-between gap-4">
|
|
<div className="w-1/2 max-w-[510px]">
|
|
<div className="mb-6 text-start text-xs tracking-widest text-muted-foreground uppercase">
|
|
موارد استفاده
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{useCases.map((useCase, index) => (
|
|
<NavigationMenuLink
|
|
key={index}
|
|
href={useCase.href}
|
|
className="group flex flex-row items-center gap-5"
|
|
>
|
|
<div className="group-hover:opacity-60">
|
|
<useCase.icon className="size-4" />
|
|
</div>
|
|
<div className="text-base">{useCase.title}</div>
|
|
</NavigationMenuLink>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<NavigationMenuLink
|
|
href="#"
|
|
className="group flex-1 p-0 hover:bg-transparent"
|
|
>
|
|
<div className="flex h-full rounded-lg border border-input bg-background p-0 hover:bg-transparent">
|
|
<div className="w-2/5 max-w-[310px] shrink-0 overflow-clip rounded-ss-lg rounded-es-lg">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="پیش‌نمایش داشبورد کمپین‌پرو"
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col p-5 xl:p-8">
|
|
<div className="mb-8 text-start text-xs tracking-widest text-muted-foreground uppercase">
|
|
برای تیم بازاریابی
|
|
</div>
|
|
<div className="mt-auto text-start">
|
|
<div className="mb-4 text-xl">
|
|
اجرای کمپین بدون اصطکاک بین ابزارها
|
|
</div>
|
|
<div className="text-sm font-normal text-muted-foreground">
|
|
راه‌حل‌های اتوماسیون متناسب با قیف درآمد شما.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</NavigationMenuLink>
|
|
</div>
|
|
</NavigationMenuContent>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!ml-0">
|
|
توسعه‌دهندگان
|
|
</NavigationMenuTrigger>
|
|
<NavigationMenuContent
|
|
dir="rtl"
|
|
className="min-w-[min(900px,100%)] max-w-full p-6 text-start"
|
|
>
|
|
<div className="flex justify-between gap-8">
|
|
<div className="w-1/3 max-w-[404px]">
|
|
<div className="mb-4 text-start text-xs tracking-widest text-muted-foreground uppercase">
|
|
مستندات
|
|
</div>
|
|
<div className="mb-6 text-start text-sm font-normal text-muted-foreground">
|
|
API و وب‌هوک برای تیم فنی
|
|
</div>
|
|
<div className="-me-2.5 space-y-2.5">
|
|
{documentationLinks.map((documentationLink, index) => (
|
|
<NavigationMenuLink
|
|
key={index}
|
|
href={documentationLink.href}
|
|
className="group flex flex-row items-center gap-2.5 rounded-md p-2.5 focus:text-accent-foreground"
|
|
>
|
|
<ArrowUpRight className="size-4 rtl:rotate-180" />
|
|
<div className="text-base">
|
|
{documentationLink.title}
|
|
</div>
|
|
</NavigationMenuLink>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="max-w-[716px] flex-1 space-y-6">
|
|
<NavigationMenuLink
|
|
href="#"
|
|
className="flex flex-row items-center overflow-clip rounded-lg border border-input bg-background p-0 hover:bg-transparent"
|
|
>
|
|
<div className="flex-1 p-5 xl:p-8">
|
|
<div className="mb-2 text-base">نمونه پیاده‌سازی</div>
|
|
<div className="text-sm font-normal text-muted-foreground">
|
|
مطالعات موردی تیم‌هایی که نرخ تبدیل لید را بالا بردند.
|
|
</div>
|
|
</div>
|
|
<div className="h-[154px] max-w-[264px] shrink-0">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="پیش‌نمایش داشبورد کمپین‌پرو"
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</NavigationMenuLink>
|
|
<NavigationMenuLink
|
|
href="#"
|
|
className="flex flex-row items-center overflow-clip rounded-lg border border-input bg-background p-0 hover:bg-transparent"
|
|
>
|
|
<div className="flex-1 p-5 xl:p-8">
|
|
<div className="mb-2 text-base">لینک نمونه دیگر</div>
|
|
<div className="text-sm font-normal text-muted-foreground">
|
|
بهترین روش‌ها برای Attribution و پرورش لید
|
|
سازمانی.
|
|
</div>
|
|
</div>
|
|
<div className="h-[154px] max-w-[264px] shrink-0">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="پیش‌نمایش داشبورد کمپین‌پرو"
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</NavigationMenuLink>
|
|
</div>
|
|
</div>
|
|
</NavigationMenuContent>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem>
|
|
<NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!ml-0">
|
|
منابع
|
|
</NavigationMenuTrigger>
|
|
<NavigationMenuContent
|
|
dir="rtl"
|
|
className="min-w-[min(900px,100%)] max-w-full p-8 text-start"
|
|
>
|
|
<div className="grid grid-cols-2 gap-8">
|
|
<div className="flex flex-1 flex-col">
|
|
<div className="mb-6 text-start text-xs tracking-widest text-muted-foreground uppercase">
|
|
منابع
|
|
</div>
|
|
<div className="grid flex-1 grid-cols-1 gap-6 md:grid-cols-2">
|
|
{resources.map((resource, index) => (
|
|
<NavigationMenuLink
|
|
key={index}
|
|
href={resource.href}
|
|
className="flex h-full flex-col overflow-clip rounded-lg border border-input bg-background p-5 hover:bg-accent hover:text-accent-foreground xl:p-8"
|
|
>
|
|
<div className="mt-auto">
|
|
<div className="mb-2 text-base">
|
|
{resource.title}
|
|
</div>
|
|
<div className="text-sm font-normal text-muted-foreground">
|
|
{resource.description}
|
|
</div>
|
|
</div>
|
|
</NavigationMenuLink>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="">
|
|
<div className="mb-6 text-start text-xs tracking-widest text-muted-foreground uppercase">
|
|
مشتریان
|
|
</div>
|
|
<NavigationMenuLink
|
|
href="#"
|
|
className="mb-6 flex flex-row overflow-clip rounded-lg border border-input bg-background p-0 hover:bg-transparent"
|
|
>
|
|
<div className="flex-1 p-5 xl:p-8 text-start">
|
|
<div className="mb-2 text-base">مشتریان</div>
|
|
<div className="text-sm font-normal text-muted-foreground">
|
|
ببینید شرکت‌های پیشرو چگونه از پلتفرم ما برای نوآوری
|
|
به کمپین‌پرو اعتماد می‌کنند.
|
|
</div>
|
|
</div>
|
|
<div className="w-1/3 max-w-[130px] shrink-0">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="پیش‌نمایش داشبورد کمپین‌پرو"
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</NavigationMenuLink>
|
|
<NavigationMenuLink
|
|
href="#"
|
|
className="flex flex-row items-center gap-3 rounded-lg bg-secondary/30 p-3 hover:bg-secondary/80 focus:bg-secondary/80"
|
|
>
|
|
<Badge variant="secondary">جدید</Badge>
|
|
<span className="text-sm text-ellipsis text-secondary-foreground">
|
|
جدید: داشبورد Attribution چندلمسی
|
|
</span>
|
|
</NavigationMenuLink>
|
|
</div>
|
|
</div>
|
|
</NavigationMenuContent>
|
|
</NavigationMenuItem>
|
|
</NavigationMenuList>
|
|
<div className="hidden items-center gap-2 lg:flex">
|
|
<Button variant="ghost">ورود</Button>
|
|
<Button variant="outline">
|
|
شروع رایگان
|
|
<ChevronRight className="size-4 rtl:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
<div className="flex items-center gap-4 lg:hidden">
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
aria-label="منوی اصلی"
|
|
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 (Root) */}
|
|
{open && (
|
|
<div className={mobileMenuOverlayClass(contained)}>
|
|
<div>
|
|
<button
|
|
type="button"
|
|
className="flex w-full items-center border-b border-border px-8 py-7 text-start"
|
|
onClick={() => setSubmenu("platform")}
|
|
>
|
|
<span className="flex-1">پلتفرم</span>
|
|
<span className="shrink-0">
|
|
<ChevronRight className="size-4 rtl:rotate-180" />
|
|
</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="flex w-full items-center border-b border-border px-8 py-7 text-start"
|
|
onClick={() => setSubmenu("usecases")}
|
|
>
|
|
<span className="flex-1">موارد استفاده</span>
|
|
<span className="shrink-0">
|
|
<ChevronRight className="size-4 rtl:rotate-180" />
|
|
</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="flex w-full items-center border-b border-border px-8 py-7 text-start"
|
|
onClick={() => setSubmenu("developers")}
|
|
>
|
|
<span className="flex-1">توسعه‌دهندگان</span>
|
|
<span className="shrink-0">
|
|
<ChevronRight className="size-4 rtl:rotate-180" />
|
|
</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="flex w-full items-center border-b border-border px-8 py-7 text-start"
|
|
onClick={() => setSubmenu("resources")}
|
|
>
|
|
<span className="flex-1">منابع</span>
|
|
<span className="shrink-0">
|
|
<ChevronRight className="size-4 rtl:rotate-180" />
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div className="mx-8 mt-auto flex flex-col gap-4 py-12">
|
|
<Button variant="outline" className="relative" size="lg">
|
|
ورود
|
|
</Button>
|
|
<Button className="relative" size="lg">
|
|
شروع رایگان
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* Mobile Menu > Platform */}
|
|
{open && submenu === "platform" && (
|
|
<div className={mobileMenuOverlayClass(contained)}>
|
|
<a href="#" className="block space-y-6 px-8 py-8 text-start">
|
|
<div className="w-full overflow-clip rounded-lg">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="پیش‌نمایش داشبورد کمپین‌پرو"
|
|
className="aspect-2/1 h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div className="mb-2 text-base">نمای کلی پلتفرم</div>
|
|
<div className="text-sm font-normal text-muted-foreground">
|
|
ببینید کمپین‌پرو چگونه قیف بازاریابی را شفاف می‌کند.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<div className="px-8 py-3.5 text-start text-xs tracking-widest text-muted-foreground uppercase">
|
|
راه‌حل‌ها
|
|
</div>
|
|
<div className="border-t border-border pb-16">
|
|
{solutions.map((solution, index) => (
|
|
<a
|
|
key={index}
|
|
href={solution.href}
|
|
className="group flex w-full items-start gap-x-4 border-b border-border px-8 py-7 text-start hover:bg-accent"
|
|
>
|
|
<div className="shrink-0">
|
|
<solution.icon className="size-6" />
|
|
</div>
|
|
<div>
|
|
<div className="mb-1.5 text-base">{solution.title}</div>
|
|
<div className="text-sm font-normal text-muted-foreground">
|
|
{solution.description}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* Mobile Menu > Use cases */}
|
|
{open && submenu === "usecases" && (
|
|
<div className={mobileMenuOverlayClass(contained)}>
|
|
<div className="px-8 py-3.5 text-start text-xs tracking-widest text-muted-foreground uppercase">
|
|
موارد استفاده
|
|
</div>
|
|
<div>
|
|
{useCases.map((useCase, index) => (
|
|
<a
|
|
key={index}
|
|
href={useCase.href}
|
|
className="group flex w-full items-start gap-x-4 border-t border-border px-8 py-7 text-start hover:bg-accent"
|
|
>
|
|
<div className="shrink-0">
|
|
<useCase.icon className="size-6" />
|
|
</div>
|
|
<div className="text-base">{useCase.title}</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
<div className="bg-secondary/30 px-8 pt-8 pb-16">
|
|
<div className="mb-7 text-start text-xs tracking-widest text-muted-foreground uppercase">
|
|
برای تیم بازاریابی
|
|
</div>
|
|
<a href="#" className="block space-y-6 text-start">
|
|
<div className="overflow-clip rounded-lg">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="پیش‌نمایش داشبورد کمپین‌پرو"
|
|
className="aspect-2/1 h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div className="mb-1.5 text-base">
|
|
اجرای کمپین بدون اصطکاک بین ابزارها
|
|
</div>
|
|
<div className="text-sm font-normal text-muted-foreground">
|
|
راه‌حل‌های اتوماسیون متناسب با قیف درآمد شما.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* Mobile Menu > Developers */}
|
|
{open && submenu === "developers" && (
|
|
<div className={mobileMenuOverlayClass(contained)}>
|
|
<a href="#" className="block space-y-6 px-8 py-8 text-start">
|
|
<div className="w-full overflow-clip rounded-lg">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="پیش‌نمایش داشبورد کمپین‌پرو"
|
|
className="aspect-2/1 h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div className="mb-2 text-base">شروع با اتصال هوشمند ما</div>
|
|
<div className="text-sm font-normal text-muted-foreground">
|
|
مستندات برای اتصال سریع به سامانه مدیریت ارتباط با مشتری و ابزارهای رشد.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="block space-y-6 border-t border-border px-8 py-8 text-start"
|
|
>
|
|
<div className="w-full overflow-clip rounded-lg">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="پیش‌نمایش داشبورد کمپین‌پرو"
|
|
className="aspect-2/1 h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div className="mb-2 text-base">شروع سریع</div>
|
|
<div className="text-sm font-normal text-muted-foreground">
|
|
با جریان‌های آماده، اولین کمپین را در چند دقیقه اجرا کنید.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<div className="px-8 py-3.5 text-start text-xs tracking-widest text-muted-foreground uppercase">
|
|
مستندات
|
|
</div>
|
|
<div className="-mx-2.5 space-y-2.5 px-8 pb-16">
|
|
{documentationLinks.map((documentationLink, index) => (
|
|
<NavigationMenuLink
|
|
key={index}
|
|
href={documentationLink.href}
|
|
className="group flex flex-row items-center gap-2.5 rounded-md px-2.5 py-[18px] focus:text-accent-foreground"
|
|
>
|
|
<div className="flex size-5 items-center justify-center rounded">
|
|
<ArrowUpRight className="size-3 rtl:rotate-180" />
|
|
</div>
|
|
<div className="text-sm">{documentationLink.title}</div>
|
|
</NavigationMenuLink>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* Mobile Menu > Resources */}
|
|
{open && submenu === "resources" && (
|
|
<div className={mobileMenuOverlayClass(contained)}>
|
|
<div className="px-8 py-3.5 text-start text-xs tracking-widest text-muted-foreground uppercase">
|
|
منابع
|
|
</div>
|
|
<div>
|
|
{resources.map((resource, index) => (
|
|
<a
|
|
key={index}
|
|
href={resource.href}
|
|
className="group flex w-full items-start gap-x-4 border-t border-border px-8 py-7 text-start hover:bg-accent"
|
|
>
|
|
<div>
|
|
<div className="mb-1.5 text-base">{resource.title}</div>
|
|
<div className="text-sm font-normal text-muted-foreground">
|
|
{resource.description}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
<div className="px-8 pt-8 pb-16">
|
|
<div className="mb-7 text-start text-xs tracking-widest text-muted-foreground uppercase">
|
|
مشتریان
|
|
</div>
|
|
<a href="#" className="block space-y-6 text-start">
|
|
<div className="overflow-clip rounded-lg">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="پیش‌نمایش داشبورد کمپین‌پرو"
|
|
className="aspect-2/1 h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div className="mb-1.5 text-base">مشتریان</div>
|
|
<div className="text-sm font-normal text-muted-foreground">
|
|
ببینید شرکت‌های پیشرو چگونه از پلتفرم ما برای نوآوری
|
|
به کمپین‌پرو اعتماد می‌کنند.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</NavigationMenu>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Navbar3 };
|