@thorprovider/blocks 1.0.0 → 2.0.0

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

@@ -1,303 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useState, type ComponentProps, type Ref } from 'react'
-import { Menu } 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 Navbar3Props {
-  navLinks: NavLink[]
-  /** Brand text shown next to the logo mark. */
-  logoText: string
-  logoHref?: string
-  /** Current path used to highlight the active nav link. */
-  currentPath?: string
-  /** Sign-in action. Rendered as a link when `href` is set, otherwise as a button. */
-  signIn?: CTA
-  /** Primary call-to-action. Rendered as a link when `href` is set, otherwise as a button. */
-  cta?: CTA
-  /**
-   * When `true` (default), the header condenses into a floating rounded pill once scrolled.
-   * Set to `false` for a plain solid bar instead of the condensing pill.
-   */
-  floatingPill?: boolean
-  /** Fired when the sign-in button (no `href`) is clicked. */
-  onSignIn?: () => void
-  /** Fired when the CTA button (no `href`) is clicked. */
-  onCtaClick?: () => void
-}
-
-/**
- * Composition contract
- * --------------------
- * The header is `fixed`, so the first section of the page must clear it with `pt-16`,
- * and `html { scroll-padding-top: 4rem }` keeps in-page anchors from landing underneath it.
- *
- * Set `floatingPill` to false for a plain solid bar on scroll instead of the condensing pill.
- */
-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 ActionButton({
-  cta,
-  onClick,
-  variant,
-  className,
-  rounded,
-  ref,
-}: {
-  cta: CTA
-  onClick?: () => void
-  variant?: ComponentProps<typeof Button>['variant']
-  className?: string
-  rounded?: boolean
-  ref?: Ref<HTMLButtonElement>
-}) {
-  const classes = cn(rounded && 'rounded-full', className)
-
-  if (cta.href && !onClick) {
-    return (
-      <Button variant={variant} size='sm' className={classes} asChild ref={ref}>
-        <a href={cta.href}>{cta.label}</a>
-      </Button>
-    )
-  }
-
-  return (
-    <Button variant={variant} size='sm' className={classes} onClick={onClick} ref={ref}>
-      {cta.label}
-    </Button>
-  )
-}
-
-export function Navbar3({
-  navLinks,
-  logoText,
-  logoHref,
-  currentPath,
-  signIn,
-  cta,
-  floatingPill = true,
-  onSignIn,
-  onCtaClick,
-}: Navbar3Props) {
-  const sentinelRef = useRef<HTMLDivElement>(null)
-  const [scrolled, setScrolled] = useState(false)
-  const [open, setOpen] = useState(false)
-
-  /**
-   * Scroll detection:
-   * - Inside the store preview the scroller is an overflow ancestor (not the viewport).
-   *   IntersectionObserver + an out-of-flow sentinel is unreliable there, so use scrollTop.
-   * - On a normal page, an IntersectionObserver on the 8px sentinel gives hysteresis without
-   *   flickering at a hard `scrollY > 8` threshold.
-   */
-  useEffect(() => {
-    const sentinel = sentinelRef.current
-    if (!sentinel) {
-      return
-    }
-
-    let scrollParent: HTMLElement | null = null
-    let ancestor: HTMLElement | null = sentinel.parentElement
-    while (ancestor) {
-      const { overflowY } = getComputedStyle(ancestor)
-      if (
-        (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') &&
-        ancestor.scrollHeight > ancestor.clientHeight + 1
-      ) {
-        scrollParent = ancestor
-        break
-      }
-      ancestor = ancestor.parentElement
-    }
-
-    if (scrollParent) {
-      const scroller = scrollParent
-      const update = () => setScrolled(scroller.scrollTop > 8)
-      update()
-      scroller.addEventListener('scroll', update, { passive: true })
-      return () => scroller.removeEventListener('scroll', update)
-    }
-
-    const observer = new IntersectionObserver(([entry]) => setScrolled(!entry.isIntersecting), {
-      threshold: 0,
-    })
-
-    observer.observe(sentinel)
-    return () => observer.disconnect()
-  }, [])
-
-  return (
-    <>
-      {/*
-        Absolute + out of flow: keeps an 8px hysteresis target for the observer
-        without painting a blank strip under the transparent (unscrolled) header.
-      */}
-      <div
-        ref={sentinelRef}
-        aria-hidden='true'
-        className='pointer-events-none absolute inset-x-0 top-0 h-2'
-      />
-
-      <header className='fixed inset-x-0 top-0 z-50'>
-        <div
-          className={cn(
-            'mx-auto flex h-14 items-center justify-between gap-4 transition-all duration-300 ease-out motion-reduce:transition-none',
-            scrolled
-              ? floatingPill
-                ? 'border-border/60 bg-background/80 mt-3 max-w-5xl rounded-full border px-4 shadow-sm backdrop-blur-md sm:px-5'
-                : 'border-border/60 bg-background/90 max-w-full border-b px-4 backdrop-blur-md sm:px-6 lg:px-8'
-              : 'max-w-7xl border border-transparent 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-full 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 && <ActionButton cta={signIn} onClick={onSignIn} variant='ghost' />}
-            {cta && <ActionButton cta={cta} onClick={onCtaClick} rounded={floatingPill} />}
-          </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 && (
-                    <SheetClose asChild>
-                      <ActionButton cta={signIn} onClick={onSignIn} variant='outline' className='w-full' />
-                    </SheetClose>
-                  )}
-                  {cta && (
-                    <SheetClose asChild>
-                      <ActionButton cta={cta} onClick={onCtaClick} className='w-full' />
-                    </SheetClose>
-                  )}
-                </div>
-              </div>
-            </SheetContent>
-          </Sheet>
-        </div>
-      </header>
-    </>
-  )
-}
-
-export default Navbar3

package/src/blocks/marketing/navbars/navbar-4-like-button.tsx

@@ -1,177 +0,0 @@
-'use client'
-
-import { useRef, useState } from 'react'
-import { useReducedMotion } from 'motion/react'
-
-import { Button } from '../../../ui/button'
-import { cn } from '../../../lib/utils'
-
-const PARTICLE_COUNT = 8
-const PARTICLE_DIST = 20
-
-export interface Navbar4LikeButtonProps {
-  liked?: boolean
-  onLikedChange?: (liked: boolean) => void
-  className?: string
-  'aria-label'?: string
-}
-
-/**
- * Heart like control — Transitions.dev `like-button`:
- * fill + spring pop on an HTML wrapper (never the SVG) + 8-dot particle burst.
- */
-export function Navbar4LikeButton({
-  liked: likedProp,
-  onLikedChange,
-  className,
-  'aria-label': ariaLabel,
-}: Navbar4LikeButtonProps) {
-  const [uncontrolledLiked, setUncontrolledLiked] = useState(false)
-  const [bursting, setBursting] = useState(false)
-  const particlesRef = useRef<HTMLSpanElement>(null)
-  const reduceMotion = useReducedMotion()
-
-  const liked = likedProp ?? uncontrolledLiked
-
-  const setLiked = (next: boolean) => {
-    onLikedChange?.(next)
-    if (likedProp === undefined) {
-      setUncontrolledLiked(next)
-    }
-  }
-
-  const seedParticles = () => {
-    const dots = particlesRef.current?.querySelectorAll<HTMLElement>('i')
-    if (!dots) {
-      return
-    }
-
-    dots.forEach((dot, index) => {
-      const angle = (360 / PARTICLE_COUNT) * index + (Math.random() * 2 - 1) * 16
-      const mag = PARTICLE_DIST * (0.68 + Math.random() * 0.5)
-      const rad = (angle * Math.PI) / 180
-      dot.style.setProperty('--px', `${(Math.cos(rad) * mag).toFixed(2)}px`)
-      dot.style.setProperty('--py', `${(Math.sin(rad) * mag).toFixed(2)}px`)
-      dot.style.setProperty('--pdur', `${Math.round(600 * (0.78 + Math.random() * 0.44))}ms`)
-      dot.style.setProperty('--pdelay', `${Math.round(Math.random() * 70)}ms`)
-      dot.style.setProperty('--p-end-scale', (0.35 + Math.random() * 0.4).toFixed(2))
-      dot.style.setProperty('--psize', (0.6 + Math.random() * 0.8).toFixed(2))
-    })
-  }
-
-  const toggle = () => {
-    if (liked) {
-      setLiked(false)
-      setBursting(false)
-      return
-    }
-
-    setLiked(true)
-    if (reduceMotion) {
-      return
-    }
-
-    setBursting(false)
-    seedParticles()
-    requestAnimationFrame(() => setBursting(true))
-  }
-
-  return (
-    <Button
-      type='button'
-      variant='ghost'
-      size='icon'
-      className={cn(
-        'navbar-4-like bg-background/80 relative size-8 cursor-pointer overflow-visible rounded-full p-0 backdrop-blur-xs',
-        className,
-      )}
-      data-liked={liked ? 'true' : 'false'}
-      data-bursting={bursting ? 'true' : 'false'}
-      aria-pressed={liked}
-      aria-label={ariaLabel ?? (liked ? 'Remove from wishlist' : 'Add to wishlist')}
-      onClick={toggle}
-    >
-      <span
-        className={cn(
-          'navbar-4-like-icon inline-flex size-4 items-center justify-center',
-          liked && !reduceMotion && 'navbar-4-like-icon--pop',
-        )}
-      >
-        <svg width='16' height='16' viewBox='0 0 16 16' fill='none' aria-hidden='true'>
-          <path
-            d='M7.99511 3.42388C6.66221 1.8656 4.4395 1.44643 2.76947 2.87334C1.09944 4.30026 0.86432 6.68598 2.17581 8.3736C3.26622 9.77674 6.56619 12.7361 7.64774 13.6939C7.76874 13.801 7.82925 13.8546 7.89982 13.8757C7.96141 13.8941 8.02881 13.8941 8.0904 13.8757C8.16097 13.8546 8.22147 13.801 8.34248 13.6939C9.42403 12.7361 12.724 9.77674 13.8144 8.3736C15.1259 6.68598 14.9195 4.28525 13.2207 2.87334C11.522 1.46144 9.32801 1.8656 7.99511 3.42388Z'
-            className='navbar-4-like-path'
-            stroke='currentColor'
-            strokeWidth='1.5'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-        </svg>
-      </span>
-      <span ref={particlesRef} className='navbar-4-like-particles' aria-hidden='true'>
-        {Array.from({ length: PARTICLE_COUNT }, (_, index) => (
-          <i key={index} />
-        ))}
-      </span>
-
-      <style>{`
-        .navbar-4-like {
-          --like-color: oklch(0.6 0.24 15);
-          color: var(--foreground);
-        }
-        .navbar-4-like[data-liked='true'] {
-          color: var(--like-color);
-        }
-        .navbar-4-like-path {
-          fill: transparent;
-          stroke: currentColor;
-          transition: fill 150ms cubic-bezier(0.22, 1, 0.36, 1), stroke 150ms cubic-bezier(0.22, 1, 0.36, 1);
-        }
-        .navbar-4-like[data-liked='true'] .navbar-4-like-path {
-          fill: currentColor;
-        }
-        .navbar-4-like-icon--pop {
-          animation: navbar-4-like-pop 350ms cubic-bezier(0.34, 1.96, 0.64, 1);
-        }
-        @keyframes navbar-4-like-pop {
-          0% { transform: scale(1); }
-          30% { transform: scale(0.82); }
-          100% { transform: scale(1); }
-        }
-        .navbar-4-like-particles {
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          width: 0;
-          height: 0;
-          pointer-events: none;
-          color: var(--like-color);
-        }
-        .navbar-4-like-particles i {
-          position: absolute;
-          left: calc(2.5px * var(--psize, 1) / -2);
-          top: calc(2.5px * var(--psize, 1) / -2);
-          width: calc(2.5px * var(--psize, 1));
-          height: calc(2.5px * var(--psize, 1));
-          border-radius: 50%;
-          background: currentColor;
-          opacity: 0;
-        }
-        @keyframes navbar-4-like-burst {
-          0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
-          20% { opacity: 1; transform: translate(calc(var(--px) * 0.25), calc(var(--py) * 0.25)) scale(1); }
-          100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(var(--p-end-scale, 0.6)); }
-        }
-        .navbar-4-like[data-bursting='true'] .navbar-4-like-particles i {
-          animation: navbar-4-like-burst var(--pdur, 600ms) ease-out var(--pdelay, 0ms) forwards;
-        }
-        @media (prefers-reduced-motion: reduce) {
-          .navbar-4-like-icon--pop,
-          .navbar-4-like-particles i {
-            animation: none !important;
-          }
-        }
-      `}</style>
-    </Button>
-  )
-}

package/src/blocks/marketing/navbars/navbar-4-product-grid.tsx

@@ -1,219 +0,0 @@
-'use client'
-
-import type { JSX } from 'react'
-import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
-import { Flame, ShoppingBag, Sparkles, Star, Trophy } from 'lucide-react'
-
-import { Badge } from '../../../ui/badge'
-import { Button } from '../../../ui/button'
-import { Card, CardContent } from '../../../ui/card'
-import { cn } from '../../../lib/utils'
-
-import { Navbar4LikeButton } from './navbar-4-like-button'
-
-export interface CatalogProduct {
-  id: string
-  title: string
-  subtitle: string
-  image: string
-  price: number
-  originalPrice: number
-  rating: number
-  reviewCount: number
-  discountPercentage: number
-  isLowStock?: boolean
-  badge?: {
-    text: string
-    variant: 'trending' | 'bestseller' | 'new'
-  }
-}
-
-export interface Navbar4ProductGridProps {
-  products: CatalogProduct[]
-  searchQuery: string
-  /** When omitted, the section heading is hidden. */
-  heading?: string
-  currencySymbol?: string
-  onAddToCart?: (product: CatalogProduct) => void
-}
-
-const filterEase = [0.22, 1, 0.36, 1] as const
-
-interface BadgeStyle {
-  bg: string
-  icon: JSX.Element | null
-}
-
-const badgeStyles: Record<string, BadgeStyle> = {
-  trending: {
-    bg: 'bg-black',
-    icon: <Flame className='size-3' />,
-  },
-  bestseller: {
-    bg: 'bg-black',
-    icon: <Trophy className='size-3' />,
-  },
-  new: {
-    bg: 'bg-black',
-    icon: <Sparkles className='size-3' />,
-  },
-}
-
-interface Navbar4ProductCardProps {
-  product: CatalogProduct
-  currencySymbol?: string
-  onAddToCart?: (product: CatalogProduct) => void
-}
-
-function Navbar4ProductCard({
-  product,
-  currencySymbol = '$',
-  onAddToCart,
-}: Navbar4ProductCardProps) {
-  const badgeStyle = product.badge ? badgeStyles[product.badge.variant] || badgeStyles.new : null
-
-  return (
-    <Card className='relative overflow-hidden rounded-md py-0 shadow-none transition-shadow hover:shadow-md'>
-      <CardContent className='px-0'>
-        <div className='relative aspect-square w-full overflow-hidden'>
-          <img src={product.image || undefined} alt={product.title} className='size-full object-cover' loading='lazy' />
-
-          {product.badge && badgeStyle ? (
-            <div className='absolute start-2 top-2 z-20'>
-              <Badge
-                className={cn(
-                  'flex h-auto items-center gap-1 px-2 py-1 font-semibold text-white backdrop-blur-xs',
-                  badgeStyle.bg,
-                )}
-              >
-                {badgeStyle.icon}
-                <span className='text-xs font-medium'>{product.badge.text}</span>
-              </Badge>
-            </div>
-          ) : null}
-
-          {product.rating > 0 ? (
-            <div className='bg-background/80 absolute start-2 bottom-2 z-10 flex items-center gap-1 rounded-md border px-2 py-1 text-sm backdrop-blur-xs'>
-              <Star className='fill-foreground text-foreground size-4' />
-              <span>{product.rating}</span>
-              {product.reviewCount > 0 ? (
-                <span className='text-muted-foreground'>
-                  |{' '}
-                  {product.reviewCount >= 1000
-                    ? `${(product.reviewCount / 1000).toFixed(1)}k`
-                    : product.reviewCount}
-                </span>
-              ) : null}
-            </div>
-          ) : null}
-
-          <Navbar4LikeButton className='absolute end-2 top-2 z-20' />
-        </div>
-
-        <div className='flex flex-col gap-3 p-4'>
-          <div className='flex flex-col gap-1.5'>
-            <h3 className='font-medium text-balance'>{product.title}</h3>
-            <p className='text-muted-foreground text-sm text-balance'>{product.subtitle}</p>
-          </div>
-
-          <div className='flex items-center gap-2'>
-            <span className='font-semibold'>
-              {currencySymbol}
-              {product.price}
-            </span>
-            <span className='text-muted-foreground text-sm line-through'>
-              {currencySymbol}
-              {product.originalPrice}
-            </span>
-            <span className='text-sm'>({product.discountPercentage}% OFF)</span>
-          </div>
-
-          {product.isLowStock ? <p className='text-destructive text-sm'>Only few items left!</p> : null}
-
-          <Button className='w-full' onClick={onAddToCart ? () => onAddToCart(product) : undefined}>
-            <ShoppingBag data-icon='inline-start' />
-            Add to cart
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function Navbar4ProductGrid({
-  products,
-  searchQuery,
-  heading,
-  currencySymbol,
-  onAddToCart,
-}: Navbar4ProductGridProps) {
-  const reduceMotion = useReducedMotion()
-  const query = searchQuery.trim().toLowerCase()
-  const filtered = query
-    ? products.filter(
-        product =>
-          product.title.toLowerCase().includes(query) || product.subtitle.toLowerCase().includes(query),
-      )
-    : products
-
-  return (
-    <section aria-label='Featured products' className='mx-auto w-full max-w-7xl px-4 py-10 sm:px-6 lg:px-8'>
-      <div className='mb-6 flex items-end justify-between gap-4'>
-        <div>
-          {heading ? (
-            <h2 className='text-lg font-semibold tracking-tight'>{heading}</h2>
-          ) : null}
-          <p className='text-muted-foreground text-sm'>
-            {query
-              ? `${filtered.length} ${filtered.length === 1 ? 'result' : 'results'} for “${searchQuery.trim()}”`
-              : 'Shop the latest pieces — add anything to your bag.'}
-          </p>
-        </div>
-      </div>
-
-      {filtered.length === 0 ? (
-        <div className='border-border bg-muted/30 flex min-h-64 items-center justify-center rounded-xl border border-dashed px-6 text-center'>
-          <div>
-            <p className='font-medium'>No products match your search</p>
-            <p className='text-muted-foreground mt-1 text-sm'>Try a different keyword or clear the search.</p>
-          </div>
-        </div>
-      ) : (
-        <motion.ul
-          layout
-          className='grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3'
-          transition={{ duration: 0.28, ease: filterEase }}
-        >
-          <AnimatePresence mode='popLayout'>
-            {filtered.map(product => (
-              <motion.li
-                key={product.id}
-                layout={!reduceMotion}
-                initial={reduceMotion ? false : { opacity: 0, y: 12, scale: 0.97 }}
-                animate={{ opacity: 1, y: 0, scale: 1 }}
-                exit={
-                  reduceMotion
-                    ? undefined
-                    : {
-                        opacity: 0,
-                        y: -8,
-                        scale: 0.98,
-                        filter: 'blur(4px)',
-                        transition: { duration: 0.2, ease: 'easeIn' },
-                      }
-                }
-                transition={{ duration: 0.28, ease: filterEase }}
-              >
-                <Navbar4ProductCard
-                  product={product}
-                  currencySymbol={currencySymbol}
-                  onAddToCart={onAddToCart}
-                />
-              </motion.li>
-            ))}
-          </AnimatePresence>
-        </motion.ul>
-      )}
-    </section>
-  )
-}