@thorprovider/blocks 0.1.0

package/src/blocks/marketing/logo-clouds/logo-cloud-1.tsx

@@ -0,0 +1,56 @@
+import { Sparkles } from 'lucide-react'
+
+import { LogoCloud1LogoIcon } from './logo-cloud-1-logo-icon'
+
+export interface LogoCloud1Platform {
+  name: string
+  id: string
+}
+
+export interface LogoCloud1Props {
+  platforms: LogoCloud1Platform[]
+  title?: string
+  description?: string
+  moreLabel?: string
+}
+
+export function LogoCloud1({ platforms, title, description, moreLabel }: LogoCloud1Props) {
+  return (
+    <section className='relative w-full py-12 md:py-16'>
+      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        <div className='mx-auto max-w-7xl'>
+          {(title || description) && (
+            <div className='mb-12 flex flex-col gap-4 text-center'>
+              {title && (
+                <div className='flex items-center justify-center gap-2'>
+                  <Sparkles className='text-primary size-5' aria-hidden='true' />
+                  <span className='text-primary text-sm font-medium'>{title}</span>
+                </div>
+              )}
+              {description && <p className='text-muted-foreground'>{description}</p>}
+            </div>
+          )}
+
+          <div className='relative overflow-hidden'>
+            <div className='flex flex-wrap items-center justify-center gap-8 md:gap-12'>
+              {platforms.map(platform => (
+                <div key={platform.id} className='flex items-center gap-2 opacity-85'>
+                  <LogoCloud1LogoIcon iconSlug={platform.id} size={22} />
+                  <span className='text-md font-medium'>{platform.name}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {moreLabel && (
+            <div className='mt-12 text-center'>
+              <p className='text-muted-foreground text-sm'>{moreLabel}</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default LogoCloud1

package/src/blocks/marketing/navbars/navbar-1.tsx

@@ -0,0 +1,267 @@
+'use client'
+
+import { useState } from 'react'
+import { motion, useReducedMotion } from 'motion/react'
+import { Menu, ShoppingCart } from 'lucide-react'
+
+import { Button } from '../../../ui/button'
+import { Separator } from '../../../ui/separator'
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '../../../ui/sheet'
+import { cn } from '../../../lib/utils'
+import type { CTA } from '../../../lib/types'
+
+export interface NavLink {
+  label: string
+  href?: string
+}
+
+export interface Navbar1Props {
+  navLinks: NavLink[]
+  logoText: string
+  logoHref?: string
+  currentPath?: string
+  signIn?: CTA
+  cta?: CTA
+  /** Number of items in the cart. When provided, a cart button with badge is shown. */
+  cartCount?: number
+  /** Fired when the user opens the cart. */
+  onOpenCart?: () => void
+}
+
+function Logo({ text, href }: { text: string; href?: string }) {
+  const className =
+    'focus-visible:ring-ring flex items-center gap-2 rounded-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none'
+
+  const content = (
+    <>
+      <svg viewBox='0 0 32 32' aria-hidden='true' className='text-primary size-7' fill='none' xmlns='http://www.w3.org/2000/svg'>
+        <path
+          d='M26 24.75C26.4142 24.75 26.75 24.4142 26.75 24C26.75 23.5858 26.4142 23.25 26 23.25V24.75ZM26 23.25H11V24.75H26V23.25ZM8.75 21V15H7.25V21H8.75ZM11 23.25C9.75736 23.25 8.75 22.2426 8.75 21H7.25C7.25 23.0711 8.92893 24.75 11 24.75V23.25Z'
+          fill='currentColor'
+        />
+        <path
+          d='M1.5 3.25C1.08579 3.25 0.75 3.58579 0.75 4C0.75 4.41421 1.08579 4.75 1.5 4.75V3.25ZM1.5 4.75H6V3.25H1.5V4.75ZM7.25 6V21H8.75V6H7.25ZM6 4.75C6.69036 4.75 7.25 5.30964 7.25 6H8.75C8.75 4.48122 7.51878 3.25 6 3.25V4.75Z'
+          fill='currentColor'
+        />
+        <path
+          d='M22 21.75C22.4142 21.75 22.75 21.4142 22.75 21C22.75 20.5858 22.4142 20.25 22 20.25V21.75ZM22 20.25H11V21.75H22V20.25ZM8.75 18V12H7.25V18H8.75ZM11 20.25C9.75736 20.25 8.75 19.2426 8.75 18H7.25C7.25 20.0711 8.92893 21.75 11 21.75V20.25Z'
+          fill='currentColor'
+        />
+        <path
+          d='M27.2057 19.754C27.0654 20.1438 26.6357 20.346 26.246 20.2057C25.8562 20.0654 25.654 19.6357 25.7943 19.246L27.2057 19.754ZM30.0361 9.67744L29.3305 9.4234L29.3305 9.4234L30.0361 9.67744ZM25.7943 19.246L29.3305 9.4234L30.7418 9.93148L27.2057 19.754L25.7943 19.246ZM28.1543 7.75L8 7.75V6.25L28.1543 6.25V7.75ZM29.3305 9.4234C29.6237 8.60882 29.0201 7.75 28.1543 7.75V6.25C30.059 6.25 31.3869 8.13941 30.7418 9.93148L29.3305 9.4234Z'
+          fill='currentColor'
+        />
+        <path
+          d='M13.5 21.75C13.0858 21.75 12.75 21.4142 12.75 21C12.75 20.5858 13.0858 20.25 13.5 20.25V21.75ZM26.7111 19.009L27.4174 19.2613L27.4174 19.2613L26.7111 19.009ZM13.5 20.25H23.8858V21.75H13.5V20.25ZM26.0048 18.7568L27.7937 13.7477L29.2063 14.2523L27.4174 19.2613L26.0048 18.7568ZM23.8858 20.25C24.8367 20.25 25.6849 19.6522 26.0048 18.7568L27.4174 19.2613C26.8843 20.7537 25.4706 21.75 23.8858 21.75V20.25Z'
+          fill='currentColor'
+        />
+        <path d='M21.1694 10.5806L14.5651 17.1849' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' />
+        <path d='M22.1694 14.5806L18.5632 18.1868' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' />
+        <circle cx='13.1' cy='26.1' r='1.7' stroke='currentColor' strokeWidth='1.2' />
+        <circle cx='22.1' cy='26.1' r='1.7' stroke='currentColor' strokeWidth='1.2' />
+      </svg>
+      <span className='text-base font-semibold tracking-tight'>{text}</span>
+    </>
+  )
+
+  if (!href) {
+    return <span className={className}>{content}</span>
+  }
+
+  return (
+    <a href={href} className={className}>
+      {content}
+    </a>
+  )
+}
+
+function CartButton({
+  count,
+  onClick,
+  label,
+}: {
+  count: number
+  onClick?: () => void
+  label: string
+}) {
+  const reduceMotion = useReducedMotion()
+
+  return (
+    <Button
+      variant='ghost'
+      size='icon'
+      aria-label={`${label} (${count} artículos)`}
+      className='relative cursor-pointer'
+      onClick={onClick}
+    >
+      <ShoppingCart />
+      {count > 0 && (
+        <motion.span
+          key={count}
+          initial={reduceMotion ? false : { scale: 0.4, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          transition={{ type: 'spring', stiffness: 420, damping: 22 }}
+          className='bg-primary text-primary-foreground absolute -top-1 -right-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-semibold'
+        >
+          {count}
+        </motion.span>
+      )}
+    </Button>
+  )
+}
+
+export function Navbar1({
+  navLinks,
+  logoText,
+  logoHref,
+  currentPath,
+  signIn,
+  cta,
+  cartCount,
+  onOpenCart,
+}: Navbar1Props) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <header className='border-border bg-background w-full border-b'>
+      <div className='mx-auto flex h-16 w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8'>
+        <Logo text={logoText} href={logoHref} />
+
+        <nav aria-label='Main' className='hidden lg:block'>
+          <ul className='flex items-center gap-1'>
+            {navLinks.map(link => {
+              const isActive = link.href !== undefined && link.href === currentPath
+              const className = cn(
+                'hover:text-foreground focus-visible:ring-ring rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:outline-none',
+                isActive ? 'text-foreground' : 'text-muted-foreground'
+              )
+
+              return (
+                <li key={link.label}>
+                  {link.href ? (
+                    <a href={link.href} aria-current={isActive ? 'page' : undefined} className={className}>
+                      {link.label}
+                    </a>
+                  ) : (
+                    <span className={className}>{link.label}</span>
+                  )}
+                </li>
+              )
+            })}
+          </ul>
+        </nav>
+
+        <div className='hidden items-center gap-2 lg:flex'>
+          {signIn &&
+            (signIn.href ? (
+              <Button variant='ghost' size='sm' asChild>
+                <a href={signIn.href}>{signIn.label}</a>
+              </Button>
+            ) : (
+              <Button variant='ghost' size='sm'>
+                {signIn.label}
+              </Button>
+            ))}
+          {cta &&
+            (cta.href ? (
+              <Button size='sm' asChild>
+                <a href={cta.href}>{cta.label}</a>
+              </Button>
+            ) : (
+              <Button size='sm'>{cta.label}</Button>
+            ))}
+          {cartCount !== undefined && onOpenCart && (
+            <CartButton count={cartCount} onClick={onOpenCart} label='Carrito' />
+          )}
+        </div>
+
+        <Sheet open={open} onOpenChange={setOpen}>
+          <SheetTrigger asChild>
+            <Button variant='ghost' size='icon' aria-label='Open menu' className='lg:hidden'>
+              <Menu />
+            </Button>
+          </SheetTrigger>
+          <SheetContent side='right' className='w-full max-w-xs p-0'>
+            <SheetHeader className='border-border border-b'>
+              <SheetTitle className='text-left text-base'>Menu</SheetTitle>
+            </SheetHeader>
+
+            <nav aria-label='Mobile' className='flex flex-col px-2 py-2'>
+              {navLinks.map(link => {
+                const isActive = link.href !== undefined && link.href === currentPath
+                const className = cn(
+                  'hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring rounded-md px-3 py-3 text-base font-medium transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:outline-none',
+                  isActive ? 'text-foreground' : 'text-muted-foreground'
+                )
+
+                return (
+                  <SheetClose key={link.label} asChild>
+                    {link.href ? (
+                      <a href={link.href} aria-current={isActive ? 'page' : undefined} className={className}>
+                        {link.label}
+                      </a>
+                    ) : (
+                      <button type='button' className={className}>
+                        {link.label}
+                      </button>
+                    )}
+                  </SheetClose>
+                )
+              })}
+            </nav>
+
+            <div className='mt-auto flex flex-col gap-4 p-4'>
+              <Separator />
+              <div className='flex flex-col gap-2'>
+                {signIn &&
+                  (signIn.href ? (
+                    <SheetClose asChild>
+                      <Button variant='outline' className='w-full' asChild>
+                        <a href={signIn.href}>{signIn.label}</a>
+                      </Button>
+                    </SheetClose>
+                  ) : (
+                    <SheetClose asChild>
+                      <Button variant='outline' className='w-full'>
+                        {signIn.label}
+                      </Button>
+                    </SheetClose>
+                  ))}
+                {cta &&
+                  (cta.href ? (
+                    <SheetClose asChild>
+                      <Button className='w-full' asChild>
+                        <a href={cta.href}>{cta.label}</a>
+                      </Button>
+                    </SheetClose>
+                  ) : (
+                    <SheetClose asChild>
+                      <Button className='w-full'>{cta.label}</Button>
+                    </SheetClose>
+                  ))}
+                {cartCount !== undefined && onOpenCart && (
+                  <SheetClose asChild>
+                    <Button variant='outline' className='w-full' onClick={onOpenCart}>
+                      <ShoppingCart />
+                      Carrito
+                      {cartCount > 0 ? ` (${cartCount})` : ''}
+                    </Button>
+                  </SheetClose>
+                )}
+              </div>
+            </div>
+          </SheetContent>
+        </Sheet>
+      </div>
+    </header>
+  )
+}
+
+export default Navbar1

package/src/blocks/marketing/navbars/navbar-2.tsx

@@ -0,0 +1,351 @@
+'use client'
+
+import { useState } from 'react'
+import { ArrowRight, Menu, type LucideIcon } from 'lucide-react'
+
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../../ui/accordion'
+import { Button } from '../../../ui/button'
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from '../../../ui/navigation-menu'
+import { Separator } from '../../../ui/separator'
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '../../../ui/sheet'
+import { cn } from '../../../lib/utils'
+import type { CTA } from '../../../lib/types'
+
+export interface MenuItem {
+  /** Icon rendered inside the item tile. */
+  icon: LucideIcon
+  label: string
+  description: string
+  href: string
+}
+
+export interface MenuGroup {
+  trigger: string
+  /** Two columns at `lg` when `items.length > 4`, single column otherwise. */
+  items: MenuItem[]
+}
+
+export interface FeaturedLink {
+  eyebrow: string
+  title: string
+  description: string
+  href: string
+  linkLabel: string
+  /** Featured image URL. */
+  image: string
+  imageAlt: string
+}
+
+export interface NavLink {
+  label: string
+  href: string
+}
+
+export interface Navbar2Props {
+  /** Grouped menu entries rendered as flyout panels on desktop and accordions on mobile. */
+  menuGroups: MenuGroup[]
+  logoText: string
+  logoHref?: string
+  /** Simple top-level links rendered after the menu groups. */
+  plainLinks?: NavLink[]
+  /** Optional sign-in entry. Rendered as a link when `href` is set, otherwise as a button. */
+  signIn?: CTA
+  /** Optional primary call to action. Rendered as a link when `href` is set, otherwise as a button. */
+  cta?: CTA
+  /** Promo card shown on the right of wide flyout panels (groups with more than four items). */
+  featured?: FeaturedLink
+}
+
+function Logo({ text, href }: { text: string; href?: string }) {
+  const className =
+    'focus-visible:ring-ring flex items-center gap-2 rounded-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none'
+
+  const content = (
+    <>
+      <svg viewBox='0 0 32 32' aria-hidden='true' className='text-primary size-7' fill='none' xmlns='http://www.w3.org/2000/svg'>
+        <path
+          d='M26 24.75C26.4142 24.75 26.75 24.4142 26.75 24C26.75 23.5858 26.4142 23.25 26 23.25V24.75ZM26 23.25H11V24.75H26V23.25ZM8.75 21V15H7.25V21H8.75ZM11 23.25C9.75736 23.25 8.75 22.2426 8.75 21H7.25C7.25 23.0711 8.92893 24.75 11 24.75V23.25Z'
+          fill='currentColor'
+        />
+        <path
+          d='M1.5 3.25C1.08579 3.25 0.75 3.58579 0.75 4C0.75 4.41421 1.08579 4.75 1.5 4.75V3.25ZM1.5 4.75H6V3.25H1.5V4.75ZM7.25 6V21H8.75V6H7.25ZM6 4.75C6.69036 4.75 7.25 5.30964 7.25 6H8.75C8.75 4.48122 7.51878 3.25 6 3.25V4.75Z'
+          fill='currentColor'
+        />
+        <path
+          d='M22 21.75C22.4142 21.75 22.75 21.4142 22.75 21C22.75 20.5858 22.4142 20.25 22 20.25V21.75ZM22 20.25H11V21.75H22V20.25ZM8.75 18V12H7.25V18H8.75ZM11 20.25C9.75736 20.25 8.75 19.2426 8.75 18H7.25C7.25 20.0711 8.92893 21.75 11 21.75V20.25Z'
+          fill='currentColor'
+        />
+        <path
+          d='M27.2057 19.754C27.0654 20.1438 26.6357 20.346 26.246 20.2057C25.8562 20.0654 25.654 19.6357 25.7943 19.246L27.2057 19.754ZM30.0361 9.67744L29.3305 9.4234L29.3305 9.4234L30.0361 9.67744ZM25.7943 19.246L29.3305 9.4234L30.7418 9.93148L27.2057 19.754L25.7943 19.246ZM28.1543 7.75L8 7.75V6.25L28.1543 6.25V7.75ZM29.3305 9.4234C29.6237 8.60882 29.0201 7.75 28.1543 7.75V6.25C30.059 6.25 31.3869 8.13941 30.7418 9.93148L29.3305 9.4234Z'
+          fill='currentColor'
+        />
+        <path
+          d='M13.5 21.75C13.0858 21.75 12.75 21.4142 12.75 21C12.75 20.5858 13.0858 20.25 13.5 20.25V21.75ZM26.7111 19.009L27.4174 19.2613L27.4174 19.2613L26.7111 19.009ZM13.5 20.25H23.8858V21.75H13.5V20.25ZM26.0048 18.7568L27.7937 13.7477L29.2063 14.2523L27.4174 19.2613L26.0048 18.7568ZM23.8858 20.25C24.8367 20.25 25.6849 19.6522 26.0048 18.7568L27.4174 19.2613C26.8843 20.7537 25.4706 21.75 23.8858 21.75V20.25Z'
+          fill='currentColor'
+        />
+        <path d='M21.1694 10.5806L14.5651 17.1849' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' />
+        <path d='M22.1694 14.5806L18.5632 18.1868' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' />
+        <circle cx='13.1' cy='26.1' r='1.7' stroke='currentColor' strokeWidth='1.2' />
+        <circle cx='22.1' cy='26.1' r='1.7' stroke='currentColor' strokeWidth='1.2' />
+      </svg>
+      <span className='text-base font-semibold tracking-tight'>{text}</span>
+    </>
+  )
+
+  if (!href) {
+    return <span className={className}>{content}</span>
+  }
+
+  return (
+    <a href={href} className={className}>
+      {content}
+    </a>
+  )
+}
+
+function FeaturedCard({ featured }: { featured: FeaturedLink }) {
+  return (
+    <a
+      href={featured.href}
+      className='border-border focus-visible:ring-ring group relative flex h-full min-h-56 flex-col justify-end overflow-hidden rounded-md border focus-visible:ring-2 focus-visible:outline-none'
+    >
+      <img
+        src={featured.image || undefined}
+        alt={featured.imageAlt}
+        className='absolute inset-0 size-full object-cover transition-transform duration-500 ease-out group-hover:scale-105'
+      />
+      {/* Soft top sheen + deep bottom scrim so copy stays readable on the product shot. */}
+      <div
+        aria-hidden='true'
+        className='absolute inset-0 bg-gradient-to-t from-black/90 via-black/55 to-black/20'
+      />
+      <div
+        aria-hidden='true'
+        className='absolute inset-0 bg-gradient-to-br from-white/15 via-transparent to-transparent opacity-80'
+      />
+      <div className='relative z-10 flex flex-col p-4'>
+        <p className='text-xs font-semibold tracking-wide text-white/70 uppercase'>
+          {featured.eyebrow}
+        </p>
+        <p className='mt-1 text-sm font-medium text-white'>{featured.title}</p>
+        <p className='mt-1 text-sm text-white/75'>{featured.description}</p>
+        <span className='mt-3 inline-flex items-center gap-1 text-sm font-medium text-white'>
+          {featured.linkLabel}
+          <ArrowRight className='size-3.5 transition-transform duration-200 ease-out group-hover:translate-x-0.5' />
+        </span>
+      </div>
+    </a>
+  )
+}
+
+export function Navbar2({
+  menuGroups,
+  logoText,
+  logoHref,
+  plainLinks = [],
+  signIn,
+  cta,
+  featured,
+}: Navbar2Props) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <header className='border-border bg-background w-full border-b'>
+      <div className='mx-auto flex h-16 w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8'>
+        <div className='flex items-center gap-6'>
+          <Logo text={logoText} href={logoHref} />
+
+          <NavigationMenu className='hidden lg:flex' aria-label='Main'>
+            <NavigationMenuList>
+              {menuGroups.map(group => {
+                const isWide = group.items.length > 4
+
+                return (
+                  <NavigationMenuItem key={group.trigger}>
+                    <NavigationMenuTrigger>{group.trigger}</NavigationMenuTrigger>
+                    <NavigationMenuContent>
+                      <div
+                        className={cn(
+                          isWide ? 'grid w-[760px] grid-cols-[1fr_248px] gap-3 p-2' : 'w-[360px] p-2'
+                        )}
+                      >
+                        <ul className={isWide ? 'grid grid-cols-2 gap-1' : 'grid gap-1'}>
+                          {group.items.map(item => (
+                            <li key={item.href}>
+                              <NavigationMenuLink href={item.href} className='items-start gap-3 p-3'>
+                                <span
+                                  aria-hidden='true'
+                                  className='bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-md'
+                                >
+                                  <item.icon className='size-4' />
+                                </span>
+                                <span className='flex flex-col gap-0.5'>
+                                  <span className='text-sm font-medium'>{item.label}</span>
+                                  <span className='text-muted-foreground line-clamp-2 text-sm leading-5'>
+                                    {item.description}
+                                  </span>
+                                </span>
+                              </NavigationMenuLink>
+                            </li>
+                          ))}
+                        </ul>
+                        {isWide && featured ? <FeaturedCard featured={featured} /> : null}
+                      </div>
+                    </NavigationMenuContent>
+                  </NavigationMenuItem>
+                )
+              })}
+
+              {plainLinks.map(link => (
+                <NavigationMenuItem key={link.href}>
+                  <NavigationMenuLink href={link.href} className={navigationMenuTriggerStyle()}>
+                    {link.label}
+                  </NavigationMenuLink>
+                </NavigationMenuItem>
+              ))}
+            </NavigationMenuList>
+          </NavigationMenu>
+        </div>
+
+        <div className='hidden items-center gap-2 lg:flex'>
+          {signIn &&
+            (signIn.href ? (
+              <Button variant='ghost' size='sm' asChild>
+                <a href={signIn.href}>{signIn.label}</a>
+              </Button>
+            ) : (
+              <Button variant='ghost' size='sm'>
+                {signIn.label}
+              </Button>
+            ))}
+          {cta &&
+            (cta.href ? (
+              <Button size='sm' asChild>
+                <a href={cta.href}>{cta.label}</a>
+              </Button>
+            ) : (
+              <Button size='sm'>{cta.label}</Button>
+            ))}
+        </div>
+
+        <Sheet open={open} onOpenChange={setOpen}>
+          <SheetTrigger asChild>
+            <Button variant='ghost' size='icon' aria-label='Open menu' className='lg:hidden'>
+              <Menu />
+            </Button>
+          </SheetTrigger>
+          <SheetContent side='right' className='w-full max-w-sm gap-0 overflow-y-auto p-0'>
+            <SheetHeader className='border-border border-b'>
+              <SheetTitle className='text-left text-base'>Menu</SheetTitle>
+            </SheetHeader>
+
+            {/* Every flyout destination stays reachable on mobile — groups become accordions
+                rather than being dropped. */}
+            <nav aria-label='Mobile' className='px-2 py-2'>
+              <Accordion type='multiple'>
+                {menuGroups.map(group => (
+                  <AccordionItem key={group.trigger} value={group.trigger} className='border-none'>
+                    <AccordionTrigger className='px-3 py-3 text-base font-medium hover:no-underline'>
+                      {group.trigger}
+                    </AccordionTrigger>
+                    <AccordionContent className='pb-1'>
+                      <ul className='flex flex-col'>
+                        {group.items.map(item => (
+                          <li key={item.href}>
+                            <SheetClose asChild>
+                              <a
+                                href={item.href}
+                                className='hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring flex items-start gap-3 rounded-md px-3 py-3 transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:outline-none'
+                              >
+                                <span
+                                  aria-hidden='true'
+                                  className='bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-md'
+                                >
+                                  <item.icon className='size-4' />
+                                </span>
+                                <span className='flex flex-col gap-0.5'>
+                                  <span className='text-sm font-medium'>{item.label}</span>
+                                  <span className='text-muted-foreground text-sm'>
+                                    {item.description}
+                                  </span>
+                                </span>
+                              </a>
+                            </SheetClose>
+                          </li>
+                        ))}
+                      </ul>
+                    </AccordionContent>
+                  </AccordionItem>
+                ))}
+              </Accordion>
+
+              {plainLinks.length > 0 && (
+                <div className='mt-1 flex flex-col'>
+                  {plainLinks.map(link => (
+                    <SheetClose key={link.href} asChild>
+                      <a
+                        href={link.href}
+                        className='text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring rounded-md px-3 py-3 text-base font-medium transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:outline-none'
+                      >
+                        {link.label}
+                      </a>
+                    </SheetClose>
+                  ))}
+                </div>
+              )}
+            </nav>
+
+            <div className='mt-auto flex flex-col gap-4 p-4'>
+              <Separator />
+              <div className='flex flex-col gap-2'>
+                {signIn &&
+                  (signIn.href ? (
+                    <SheetClose asChild>
+                      <Button variant='outline' className='w-full' asChild>
+                        <a href={signIn.href}>{signIn.label}</a>
+                      </Button>
+                    </SheetClose>
+                  ) : (
+                    <SheetClose asChild>
+                      <Button variant='outline' className='w-full'>
+                        {signIn.label}
+                      </Button>
+                    </SheetClose>
+                  ))}
+                {cta &&
+                  (cta.href ? (
+                    <SheetClose asChild>
+                      <Button className='w-full' asChild>
+                        <a href={cta.href}>{cta.label}</a>
+                      </Button>
+                    </SheetClose>
+                  ) : (
+                    <SheetClose asChild>
+                      <Button className='w-full'>{cta.label}</Button>
+                    </SheetClose>
+                  ))}
+              </div>
+            </div>
+          </SheetContent>
+        </Sheet>
+      </div>
+    </header>
+  )
+}
+
+export default Navbar2