477 lines
18 KiB
TypeScript
477 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import type { LucideIcon } from "lucide-react";
|
|
import {
|
|
Banknote,
|
|
BarChart,
|
|
BookOpen,
|
|
Brain,
|
|
Cloud,
|
|
Code,
|
|
CreditCard,
|
|
Database,
|
|
Factory,
|
|
Fingerprint,
|
|
Gamepad2,
|
|
Globe,
|
|
Home,
|
|
Lock,
|
|
Menu,
|
|
MessageSquare,
|
|
Plane,
|
|
Settings,
|
|
Shield,
|
|
ShoppingCart,
|
|
Sparkle,
|
|
Truck,
|
|
Users,
|
|
X,
|
|
} from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
NavigationMenu,
|
|
NavigationMenuContent,
|
|
NavigationMenuItem,
|
|
NavigationMenuLink,
|
|
NavigationMenuList,
|
|
NavigationMenuTrigger,
|
|
} from "@/components/ui/navigation-menu";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Solution {
|
|
title: string;
|
|
description: string;
|
|
href: string;
|
|
icon: LucideIcon;
|
|
}
|
|
|
|
const DATA_SOLUTIONS: Solution[] = [
|
|
{
|
|
title: "کوچینگ فروش",
|
|
description: "اسکریپت و بازخورد مکالمه برای نمایندگان در حال رشد.",
|
|
href: "#",
|
|
icon: Cloud,
|
|
},
|
|
{
|
|
title: "کتابخانه محتوا",
|
|
description: "محتوای فروش تأییدشده با کنترل دسترسی سازمانی.",
|
|
href: "#",
|
|
icon: Lock,
|
|
},
|
|
{
|
|
title: "تحلیل مکالمه",
|
|
description: "تحلیل تماس و شناسایی موانع بستن معامله.",
|
|
href: "#",
|
|
icon: Fingerprint,
|
|
},
|
|
{
|
|
title: "همسویی درآمد",
|
|
description: "همسویی بازاریابی و فروش روی یک منبع محتوا.",
|
|
href: "#",
|
|
icon: Cloud,
|
|
},
|
|
];
|
|
|
|
interface Platfrom {
|
|
title: string;
|
|
href: string;
|
|
icon: LucideIcon;
|
|
}
|
|
|
|
const DATA_PLATFORM_CASE: Platfrom[] = [
|
|
{ title: "SaaS", href: "#", icon: CreditCard },
|
|
{ title: "فین‌تک", href: "#", icon: Banknote },
|
|
{ title: "B2B خدمات", href: "#", icon: ShoppingCart },
|
|
{ title: "خدمات سازمانی", href: "#", icon: Plane },
|
|
{ title: "املاک تجاری", href: "#", icon: Home },
|
|
{ title: "رسانه", href: "#", icon: Gamepad2 },
|
|
{ title: "تولید", href: "#", icon: Factory },
|
|
{ title: "لجستیک", href: "#", icon: Truck },
|
|
];
|
|
|
|
interface Resource {
|
|
title: string;
|
|
description: string;
|
|
href: string;
|
|
icon: LucideIcon;
|
|
}
|
|
|
|
const DATA_RESOURCES: Resource[] = [
|
|
{
|
|
title: "هوش سیگنا",
|
|
description: "ابزارهای هوشمند توانمندسازی فروش را کشف کنید",
|
|
href: "#",
|
|
icon: Sparkle,
|
|
},
|
|
{
|
|
title: "امتیازدهی فرصت",
|
|
description: "مدل‌های پیشنهاد اقدام بعدی برای معامله",
|
|
href: "#",
|
|
icon: Code,
|
|
},
|
|
{
|
|
title: "پیش‌بینی برد",
|
|
description: "مدل‌های احتمال بستن بر اساس تاریخچه معامله",
|
|
href: "#",
|
|
icon: Brain,
|
|
},
|
|
{
|
|
title: "مدیریت دانش فروش",
|
|
description: "بهترین روش‌های نگهداری محتوای فروش",
|
|
href: "#",
|
|
icon: Database,
|
|
},
|
|
{
|
|
title: "تحلیل مکالمه ابری",
|
|
description: "تحلیل تماس و ایمیل در مقیاس تیم",
|
|
href: "#",
|
|
icon: Cloud,
|
|
},
|
|
{
|
|
title: "حریم خصوصی داده",
|
|
description: "داده مکالمات فروش را ایمن نگه دارید",
|
|
href: "#",
|
|
icon: Shield,
|
|
},
|
|
{
|
|
title: "پیکربندی مدل",
|
|
description: "مدل‌های کوچینگ را با قیف خود هم‌تراز کنید",
|
|
href: "#",
|
|
icon: Settings,
|
|
},
|
|
{
|
|
title: "گزارش اثرگذاری",
|
|
description: "اثر محتوا و کوچینگ روی نرخ برد را بسنجید",
|
|
href: "#",
|
|
icon: BarChart,
|
|
},
|
|
{
|
|
title: "روندهای فروش",
|
|
description: "با روندهای توانمندسازی فروش به‌روز بمانید",
|
|
href: "#",
|
|
icon: Globe,
|
|
},
|
|
{
|
|
title: "انجمن سیگنا",
|
|
description: "به انجمن رهبران فروش بپیوندید",
|
|
href: "#",
|
|
icon: Users,
|
|
},
|
|
{
|
|
title: "آکادمی فروش",
|
|
description: "از بهترین روش‌های تیم‌های درآمد بیاموزید",
|
|
href: "#",
|
|
icon: BookOpen,
|
|
},
|
|
{
|
|
title: "پشتیبانی",
|
|
description: "پشتیبانی برای استقرار و آموزش تیم",
|
|
href: "#",
|
|
icon: MessageSquare,
|
|
},
|
|
];
|
|
|
|
interface Navbar7Props {
|
|
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(85vh,40rem)]"
|
|
: "absolute inset-0 top-[72px] h-[calc(100vh-72px)]",
|
|
);
|
|
|
|
const Navbar7 = ({ contained = false, className }: Navbar7Props) => {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<section
|
|
lang="fa"
|
|
className={cn(
|
|
"bg-background text-start",
|
|
contained ? "relative z-30 overflow-visible" : "inset-x-0 top-0 z-20",
|
|
className,
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"container px-4 sm:px-6 md:px-8",
|
|
!contained && "lg:px-40 xl:px-52",
|
|
)}
|
|
>
|
|
<NavigationMenu
|
|
dir="rtl"
|
|
viewport={false}
|
|
className="relative z-50 max-w-none overflow-visible text-start"
|
|
>
|
|
<div className="relative z-30 flex w-full items-center justify-between gap-12 overflow-visible py-4">
|
|
<a href="#" 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="relative hidden flex-1 justify-center overflow-visible lg:flex">
|
|
<NavigationMenuList>
|
|
<NavigationMenuItem className="static">
|
|
<NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!ml-0">
|
|
پلتفرم
|
|
</NavigationMenuTrigger>
|
|
<NavigationMenuContent
|
|
dir="rtl"
|
|
className={cn(
|
|
"top-full start-auto end-auto left-1/2 right-auto z-[200] -translate-x-1/2 !overflow-visible p-4 text-start shadow-md",
|
|
"!w-[760px] !min-w-[760px] !max-w-[calc(100vw-2rem)] md:!w-[760px]",
|
|
contained &&
|
|
"!w-[min(760px,calc(100%-1rem))] !min-w-0",
|
|
)}
|
|
>
|
|
<div className="grid w-full grid-cols-2 gap-8">
|
|
<div className="min-w-[280px]">
|
|
<div className="text-start text-xs tracking-widest text-muted-foreground">
|
|
راه‌حل‌ها
|
|
</div>
|
|
<div className="mt-4 grid gap-4">
|
|
{DATA_SOLUTIONS.map((solution, index) => (
|
|
<NavigationMenuLink
|
|
key={index}
|
|
href={solution.href}
|
|
className="group flex min-w-0 flex-row items-center hover:bg-transparent"
|
|
>
|
|
<div className="me-4 rounded-lg bg-muted p-4 shadow-sm">
|
|
<solution.icon className="size-6 text-muted-foreground transition-all fade-in group-hover:text-foreground" />
|
|
</div>
|
|
<div className="flex min-w-0 flex-col gap-1 text-sm text-start">
|
|
<div className="font-medium text-foreground">
|
|
{solution.title}
|
|
</div>
|
|
<div className="text-sm font-normal text-muted-foreground">
|
|
{solution.description}
|
|
</div>
|
|
</div>
|
|
</NavigationMenuLink>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="min-w-[280px]">
|
|
<div className="text-start text-xs tracking-widest text-muted-foreground">
|
|
بر اساس صنعت
|
|
</div>
|
|
<div className="mt-4 grid grid-cols-2 gap-3">
|
|
{DATA_PLATFORM_CASE.map((solution, index) => (
|
|
<NavigationMenuLink
|
|
key={index}
|
|
href={solution.href}
|
|
className="group flex min-w-0 flex-row items-center hover:bg-transparent"
|
|
>
|
|
<div className="me-3 shrink-0 rounded-lg bg-muted p-2 shadow-sm">
|
|
<solution.icon className="size-4 text-muted-foreground transition-all fade-in group-hover:text-foreground" />
|
|
</div>
|
|
<div className="min-w-0 text-sm font-medium">
|
|
{solution.title}
|
|
</div>
|
|
</NavigationMenuLink>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</NavigationMenuContent>
|
|
</NavigationMenuItem>
|
|
<NavigationMenuItem className="static">
|
|
<NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!ml-0">
|
|
منابع
|
|
</NavigationMenuTrigger>
|
|
<NavigationMenuContent
|
|
dir="rtl"
|
|
className={cn(
|
|
"top-full start-auto end-auto left-1/2 right-auto z-[200] -translate-x-1/2 !overflow-visible p-4 text-start shadow-md",
|
|
"!w-[820px] !min-w-[820px] !max-w-[calc(100vw-2rem)] md:!w-[820px]",
|
|
contained &&
|
|
"!w-[min(820px,calc(100%-1rem))] !min-w-0",
|
|
)}
|
|
>
|
|
<div className="grid w-full grid-cols-3 gap-4">
|
|
{DATA_RESOURCES.map((solution, index) => (
|
|
<NavigationMenuLink
|
|
key={index}
|
|
href={solution.href}
|
|
className="group flex flex-row items-center hover:bg-transparent"
|
|
>
|
|
<div className="me-4 rounded-lg bg-muted p-4 shadow-sm">
|
|
<solution.icon className="size-6 text-muted-foreground transition-all fade-in group-hover:text-foreground" />
|
|
</div>
|
|
<div className="flex min-w-0 flex-col gap-1 text-start text-sm font-normal text-muted-foreground">
|
|
<div className="font-medium text-foreground">
|
|
{solution.title}
|
|
</div>
|
|
<div className="font-normal text-muted-foreground">
|
|
{solution.description}
|
|
</div>
|
|
</div>
|
|
</NavigationMenuLink>
|
|
))}
|
|
</div>
|
|
</NavigationMenuContent>
|
|
</NavigationMenuItem>
|
|
<Button variant="ghost" className="text-start">
|
|
API
|
|
</Button>
|
|
</NavigationMenuList>
|
|
</div>
|
|
<div className="hidden items-center gap-4 lg:flex">
|
|
<Button variant="ghost">ورود</Button>
|
|
<Button>شروع کنید</Button>
|
|
</div>
|
|
<div className="flex items-center gap-4 lg:hidden">
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
aria-label="منوی اصلی"
|
|
onClick={() => setOpen(!open)}
|
|
>
|
|
{!open && <Menu className="size-4" />}
|
|
{open && <X className="size-4" />}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{open && (
|
|
<div className={mobileMenuOverlayClass(contained)}>
|
|
<Accordion
|
|
type="single"
|
|
collapsible
|
|
dir="rtl"
|
|
className="w-full text-start"
|
|
>
|
|
<AccordionItem
|
|
value="platform"
|
|
className="border-b-2 border-dashed"
|
|
>
|
|
<AccordionTrigger className="px-2 py-4 text-start hover:no-underline">
|
|
پلتفرم
|
|
</AccordionTrigger>
|
|
<AccordionContent className="px-2 pb-4">
|
|
<div className="space-y-6">
|
|
<div>
|
|
<div className="mb-4 text-start text-xs tracking-widest text-muted-foreground uppercase">
|
|
راه‌حل‌ها
|
|
</div>
|
|
<div className="space-y-4">
|
|
{DATA_SOLUTIONS.map((solution, index) => (
|
|
<a
|
|
key={index}
|
|
href={solution.href}
|
|
className="group flex items-center gap-4 rounded-lg p-2 text-start hover:bg-muted"
|
|
>
|
|
<div className="rounded-lg bg-muted p-2 shadow-sm">
|
|
<solution.icon className="size-4 text-muted-foreground transition-all group-hover:text-foreground" />
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-sm font-medium text-foreground">
|
|
{solution.title}
|
|
</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{solution.description}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="mb-4 text-start text-xs tracking-widest text-muted-foreground uppercase">
|
|
بر اساس صنعت
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{DATA_PLATFORM_CASE.map((useCase, index) => (
|
|
<a
|
|
key={index}
|
|
href={useCase.href}
|
|
className="group flex items-center gap-2 rounded-lg p-2 text-start hover:bg-muted"
|
|
>
|
|
<div className="rounded-lg bg-muted p-1.5 shadow-sm">
|
|
<useCase.icon className="size-3 text-muted-foreground transition-all group-hover:text-foreground" />
|
|
</div>
|
|
<div className="truncate text-sm font-medium">
|
|
{useCase.title}
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
|
|
<AccordionItem
|
|
value="resources"
|
|
className="border-b-2 border-dashed"
|
|
>
|
|
<AccordionTrigger className="px-2 py-4 text-start hover:no-underline">
|
|
منابع
|
|
</AccordionTrigger>
|
|
<AccordionContent className="px-2 pb-4">
|
|
<div className="space-y-3">
|
|
{DATA_RESOURCES.map((resource, index) => (
|
|
<a
|
|
key={index}
|
|
href={resource.href}
|
|
className="group flex items-center gap-4 rounded-lg p-2 text-start hover:bg-muted"
|
|
>
|
|
<div className="rounded-lg bg-muted p-2 shadow-sm">
|
|
<resource.icon className="size-4 text-muted-foreground transition-all group-hover:text-foreground" />
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-sm font-medium text-foreground">
|
|
{resource.title}
|
|
</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{resource.description}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
<a
|
|
href="#"
|
|
className="w-full border-y-2 border-dashed px-2 py-4 text-start text-sm font-medium"
|
|
>
|
|
API
|
|
</a>
|
|
|
|
<div className="mx-8 mt-auto flex flex-col gap-4 py-12">
|
|
<span className="text-center text-sm">
|
|
مشتری هستید؟ <b>ورود</b>
|
|
</span>
|
|
<Button className="relative" size="lg">
|
|
همین حالا شروع کنید
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</NavigationMenu>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Navbar7 };
|