love-ui 1.0.0

package/packages/patterns/navigation-menu/marketing/navigation-menu-marketing-2.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { Check } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+
+export const title = "Pricing Tiers Preview";
+
+const pricingTiers = [
+  {
+    name: "Starter",
+    price: "$9",
+    period: "/month",
+    description: "Perfect for individuals",
+    features: ["5 projects", "10 GB storage", "Basic support"],
+    cta: "Get Started →",
+    href: "#",
+    highlighted: false,
+    badge: null,
+  },
+  {
+    name: "Professional",
+    price: "$29",
+    period: "/month",
+    description: "For growing teams",
+    features: ["Unlimited projects", "100 GB storage", "Priority support"],
+    cta: "Get Started →",
+    href: "#",
+    highlighted: true,
+    badge: "Popular",
+  },
+  {
+    name: "Enterprise",
+    price: "Custom",
+    period: null,
+    description: "For large organizations",
+    features: ["Everything in Pro", "Unlimited storage", "24/7 support"],
+    cta: "Contact Sales →",
+    href: "#",
+    highlighted: false,
+    badge: null,
+  },
+];
+
+const Example = () => (
+  <div className="pr-[50vw] pb-[50vh]">
+    <div className="w-full max-w-md rounded-md border bg-background p-px">
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Pricing</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <div className="w-[700px] p-4">
+                <div className="grid grid-cols-3 gap-4">
+                  {pricingTiers.map((tier, index) => (
+                    <div
+                      className={`relative space-y-3 rounded-lg p-4 ${
+                        tier.highlighted ? "border-2 border-primary" : "border"
+                      }`}
+                      key={index}
+                    >
+                      {tier.badge && (
+                        <Badge className="-top-3 -translate-x-1/2 absolute left-1/2">
+                          {tier.badge}
+                        </Badge>
+                      )}
+                      <div>
+                        <h4 className="font-semibold">{tier.name}</h4>
+                        <div className="mt-2 flex items-baseline gap-1">
+                          <span className="font-bold text-3xl">
+                            {tier.price}
+                          </span>
+                          {tier.period && (
+                            <span className="text-muted-foreground">
+                              {tier.period}
+                            </span>
+                          )}
+                        </div>
+                        <p className="mt-2 text-muted-foreground text-sm">
+                          {tier.description}
+                        </p>
+                      </div>
+                      <div className="space-y-2">
+                        {tier.features.map((feature, featureIndex) => (
+                          <div
+                            className="flex items-center gap-2 text-sm"
+                            key={featureIndex}
+                          >
+                            <Check className="h-4 w-4" />
+                            <span>{feature}</span>
+                          </div>
+                        ))}
+                      </div>
+                      <NavigationMenuLink className="block" href={tier.href}>
+                        <span className="font-medium">{tier.cta}</span>
+                      </NavigationMenuLink>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>
+    </div>
+  </div>
+);
+
+export default Example;

package/packages/patterns/navigation-menu/marketing/navigation-menu-marketing-3.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { ArrowRight, Star } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+
+export const title = "Case Studies & Testimonials";
+
+const testimonials = [
+  {
+    company: "Vercel",
+    avatarSrc: "https://github.com/vercel.png",
+    avatarFallback: "VC",
+    rating: 5,
+    quote:
+      "Increased deployment speed by 300% and reduced infrastructure costs significantly.",
+    href: "#",
+  },
+  {
+    company: "Stripe",
+    avatarSrc: "https://github.com/stripe.png",
+    avatarFallback: "ST",
+    rating: 5,
+    quote:
+      "Scaled to process millions of transactions with 99.99% uptime guarantee.",
+    href: "#",
+  },
+  {
+    company: "Airbnb",
+    avatarSrc: "https://github.com/airbnb.png",
+    avatarFallback: "AB",
+    rating: 5,
+    quote:
+      "Improved user experience and reduced page load times by 50% globally.",
+    href: "#",
+  },
+  {
+    company: "Shopify",
+    avatarSrc: "https://github.com/shopify.png",
+    avatarFallback: "SH",
+    rating: 5,
+    quote:
+      "Handled Black Friday traffic spike with zero downtime and seamless scaling.",
+    href: "#",
+  },
+];
+
+const Example = () => (
+  <div className="pr-[50vw] pb-[50vh]">
+    <div className="w-full max-w-md rounded-md border bg-background p-px">
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Success Stories</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <div className="w-[700px] p-4">
+                <div className="mb-4">
+                  <h3 className="font-semibold text-muted-foreground text-sm">
+                    CUSTOMER STORIES
+                  </h3>
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  {testimonials.map((testimonial) => (
+                    <NavigationMenuLink
+                      href={testimonial.href}
+                      key={testimonial.company}
+                    >
+                      <div className="space-y-2">
+                        <div className="flex items-center gap-2">
+                          <Avatar className="size-6">
+                            <AvatarImage src={testimonial.avatarSrc} />
+                            <AvatarFallback>
+                              {testimonial.avatarFallback}
+                            </AvatarFallback>
+                          </Avatar>
+                          <div className="flex items-center gap-2">
+                            <div className="font-medium">
+                              {testimonial.company}
+                            </div>
+                            <div className="flex gap-0.5">
+                              {new Array(testimonial.rating)
+                                .fill(null)
+                                .map((_, i) => (
+                                  <Star
+                                    className="size-3 fill-yellow-500 text-yellow-500"
+                                    key={i}
+                                  />
+                                ))}
+                            </div>
+                          </div>
+                        </div>
+                        <p className="text-muted-foreground text-sm">
+                          "{testimonial.quote}"
+                        </p>
+                        <div className="flex items-center gap-1 font-medium text-sm">
+                          Read case study
+                          <ArrowRight className="size-4" />
+                        </div>
+                      </div>
+                    </NavigationMenuLink>
+                  ))}
+                </div>
+              </div>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>
+    </div>
+  </div>
+);
+
+export default Example;

package/packages/patterns/navigation-menu/marketing/navigation-menu-marketing-4.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { BookOpen, Download, FileText, Play, Video } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+
+export const title = "Resources with Lead Magnets";
+
+const resources = [
+  {
+    icon: FileText,
+    label: "Documentation",
+    description: "Complete guides and API references",
+    href: "#",
+    badge: null,
+  },
+  {
+    icon: Video,
+    label: "Video Tutorials",
+    description: "Learn with step-by-step video courses",
+    href: "#",
+    badge: { label: "Free", variant: "secondary" as const },
+  },
+  {
+    icon: BookOpen,
+    label: "Blog",
+    description: "Latest insights and best practices",
+    href: "#",
+    badge: null,
+  },
+];
+
+const featuredContent = {
+  badge: { label: "Featured", variant: "default" as const },
+  title: "Complete Platform Guide",
+  description: "80-page comprehensive guide to mastering our platform",
+  button: {
+    icon: Download,
+    label: "Download Free",
+  },
+};
+
+const webinar = {
+  title: "Webinar: Advanced Strategies",
+  description: "Join our next live session on Friday at 2 PM EST",
+  button: {
+    icon: Play,
+    label: "Register Now",
+  },
+};
+
+const Example = () => (
+  <div className="pr-[50vw] pb-[50vh]">
+    <div className="w-full max-w-md rounded-md border bg-background p-px">
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <div className="w-[600px] p-4">
+                <div className="grid grid-cols-[1fr_240px] gap-4">
+                  <div className="space-y-3">
+                    {resources.map((resource) => (
+                      <NavigationMenuLink
+                        className="flex flex-row items-start gap-2"
+                        href={resource.href}
+                        key={resource.label}
+                      >
+                        <resource.icon className="mt-1 size-5" />
+                        <div>
+                          {resource.badge ? (
+                            <div className="flex items-center gap-2">
+                              <span className="block font-medium">
+                                {resource.label}
+                              </span>
+                              <Badge variant={resource.badge.variant}>
+                                {resource.badge.label}
+                              </Badge>
+                            </div>
+                          ) : (
+                            <span className="block font-medium">
+                              {resource.label}
+                            </span>
+                          )}
+                          <span className="block text-muted-foreground">
+                            {resource.description}
+                          </span>
+                        </div>
+                      </NavigationMenuLink>
+                    ))}
+                  </div>
+                  <div className="space-y-3 rounded-lg bg-muted p-4">
+                    <div className="aspect-video overflow-hidden rounded bg-background" />
+                    <div className="space-y-2">
+                      <Badge variant={featuredContent.badge.variant}>
+                        {featuredContent.badge.label}
+                      </Badge>
+                      <h4 className="font-semibold">{featuredContent.title}</h4>
+                      <p className="text-muted-foreground text-xs">
+                        {featuredContent.description}
+                      </p>
+                    </div>
+                    <Button className="w-full" size="sm">
+                      <featuredContent.button.icon />
+                      {featuredContent.button.label}
+                    </Button>
+                  </div>
+                </div>
+                <div className="mt-4 rounded-lg bg-primary/5 p-4">
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-1">
+                      <h4 className="font-semibold">{webinar.title}</h4>
+                      <p className="text-muted-foreground text-sm">
+                        {webinar.description}
+                      </p>
+                    </div>
+                    <Button size="sm">
+                      <webinar.button.icon />
+                      {webinar.button.label}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>
+    </div>
+  </div>
+);
+
+export default Example;

package/packages/patterns/navigation-menu/marketing/navigation-menu-marketing-5.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import {
+  Briefcase,
+  Building2,
+  GraduationCap,
+  Heart,
+  Home,
+  ShoppingCart,
+} from "lucide-react";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+
+export const title = "Industry Solutions";
+
+const industries = [
+  {
+    icon: Building2,
+    name: "Financial Services",
+    description: "Secure, compliant solutions for banking and fintech",
+    href: "#",
+  },
+  {
+    icon: ShoppingCart,
+    name: "E-commerce",
+    description: "Scale your online store with powerful tools",
+    href: "#",
+  },
+  {
+    icon: GraduationCap,
+    name: "Education",
+    description: "Empower learning with modern technology",
+    href: "#",
+  },
+  {
+    icon: Heart,
+    name: "Healthcare",
+    description: "HIPAA-compliant solutions for providers",
+    href: "#",
+  },
+  {
+    icon: Briefcase,
+    name: "Professional Services",
+    description: "Tools for consultants and agencies",
+    href: "#",
+  },
+  {
+    icon: Home,
+    name: "Real Estate",
+    description: "Streamline property management workflows",
+    href: "#",
+  },
+];
+
+const Example = () => (
+  <div className="pr-[50vw] pb-[50vh]">
+    <div className="w-full max-w-md rounded-md border bg-background p-px">
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Industries</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <div className="w-[700px] p-4">
+                <div className="mb-4">
+                  <h3 className="font-semibold text-muted-foreground text-sm">
+                    SOLUTIONS BY INDUSTRY
+                  </h3>
+                  <p className="mt-1 text-muted-foreground text-sm">
+                    Tailored solutions for your specific industry needs
+                  </p>
+                </div>
+                <div className="grid grid-cols-3 gap-4">
+                  {industries.map((industry, index) => {
+                    const Icon = industry.icon;
+                    return (
+                      <NavigationMenuLink href={industry.href} key={index}>
+                        <div className="flex flex-col items-start gap-3">
+                          <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                            <Icon className="h-6 w-6 text-primary" />
+                          </div>
+                          <div>
+                            <div className="font-medium">{industry.name}</div>
+                            <p className="text-muted-foreground text-sm">
+                              {industry.description}
+                            </p>
+                          </div>
+                        </div>
+                      </NavigationMenuLink>
+                    );
+                  })}
+                </div>
+              </div>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>
+    </div>
+  </div>
+);
+
+export default Example;

package/packages/patterns/navigation-menu/standard/navigation-menu-standard-1.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+
+export const title = "Simple Navigation";
+
+const menuItems = [
+  {
+    type: "dropdown" as const,
+    trigger: "Products",
+    items: [
+      { label: "Product 1", href: "#" },
+      { label: "Product 2", href: "#" },
+      { label: "Product 3", href: "#" },
+    ],
+  },
+  {
+    type: "dropdown" as const,
+    trigger: "Solutions",
+    items: [
+      { label: "Solution 1", href: "#" },
+      { label: "Solution 2", href: "#" },
+      { label: "Solution 3", href: "#" },
+    ],
+  },
+  {
+    type: "link" as const,
+    label: "Pricing",
+    href: "#",
+  },
+];
+
+const Example = () => (
+  <div className="pr-[50vw] pb-[50vh]">
+    <div className="w-full max-w-md rounded-md border bg-background p-px">
+      <NavigationMenu>
+        <NavigationMenuList>
+          {menuItems.map((item, index) =>
+            item.type === "dropdown" ? (
+              <NavigationMenuItem key={index}>
+                <NavigationMenuTrigger>{item.trigger}</NavigationMenuTrigger>
+                <NavigationMenuContent>
+                  <div className="w-48 p-2">
+                    {item.items.map((subItem, subIndex) => (
+                      <NavigationMenuLink href={subItem.href} key={subIndex}>
+                        {subItem.label}
+                      </NavigationMenuLink>
+                    ))}
+                  </div>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+            ) : (
+              <NavigationMenuItem key={index}>
+                <NavigationMenuLink href={item.href}>
+                  {item.label}
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+            )
+          )}
+        </NavigationMenuList>
+      </NavigationMenu>
+    </div>
+  </div>
+);
+
+export default Example;

package/packages/patterns/navigation-menu/standard/navigation-menu-standard-2.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { Heart, Package, Shield, Zap } from "lucide-react";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+
+export const title = "Navigation with Icons";
+
+const features = [
+  { icon: Package, label: "Components", href: "#" },
+  { icon: Zap, label: "Performance", href: "#" },
+  { icon: Shield, label: "Security", href: "#" },
+  { icon: Heart, label: "Accessibility", href: "#" },
+];
+
+const Example = () => (
+  <div className="pr-[50vw] pb-[50vh]">
+    <div className="w-full max-w-md rounded-md border bg-background p-px">
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Features</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <div className="w-56 p-2">
+                {features.map((feature, index) => {
+                  const Icon = feature.icon;
+                  return (
+                    <NavigationMenuLink href={feature.href} key={index}>
+                      <Icon />
+                      <div>
+                        <span className="font-medium">{feature.label}</span>
+                      </div>
+                    </NavigationMenuLink>
+                  );
+                })}
+              </div>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>
+    </div>
+  </div>
+);
+
+export default Example;

package/packages/patterns/navigation-menu/standard/navigation-menu-standard-3.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { Book, FileText, Video } from "lucide-react";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+
+export const title = "Navigation with Descriptions";
+
+const resources = [
+  {
+    icon: FileText,
+    label: "Documentation",
+    description: "Learn how to integrate our tools",
+    href: "#",
+  },
+  {
+    icon: Book,
+    label: "Guides & Tutorials",
+    description: "Step-by-step guides to get started",
+    href: "#",
+  },
+  {
+    icon: Video,
+    label: "Video Courses",
+    description: "Learn at your own pace with videos",
+    href: "#",
+  },
+];
+
+const Example = () => (
+  <div className="pr-[50vw] pb-[50vh]">
+    <div className="w-full max-w-md rounded-md border bg-background p-px">
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <div className="w-80 p-2">
+                {resources.map((resource, index) => {
+                  const Icon = resource.icon;
+                  return (
+                    <NavigationMenuLink href={resource.href} key={index}>
+                      <Icon />
+                      <div>
+                        <span className="font-medium">{resource.label}</span>
+                        <span className="text-muted-foreground">
+                          {resource.description}
+                        </span>
+                      </div>
+                    </NavigationMenuLink>
+                  );
+                })}
+              </div>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>
+    </div>
+  </div>
+);
+
+export default Example;