@thorprovider/blocks 0.1.0

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

@@ -0,0 +1,411 @@
+'use client'
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
+import { Menu, Search, ShoppingBag, X } from 'lucide-react'
+
+import { Button } from '../../../ui/button'
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '../../../ui/sheet'
+import { cn } from '../../../lib/utils'
+
+import { Navbar4AccountMenu, type AccountMenuItem, type StoreUser } from './navbar-4-account-menu'
+import { Navbar4CartSheet, type CartItem } from './navbar-4-cart-sheet'
+import type { UtilityLink } from './navbar-4-mobile-nav'
+import { Navbar4SearchBar } from './navbar-4-search-bar'
+import { MegaMenu } from '../../e-commerce/navigation/mega-menu'
+import { MobileCategoryDrawer } from '../../e-commerce/navigation/mobile-category-drawer'
+import type { MenuItem } from '../../../lib/types/menu'
+import type { StoreCategory } from '../../../lib/contracts'
+
+function toMenuItem(category: StoreCategory): MenuItem {
+  return {
+    id: category.href,
+    label: category.label,
+    href: category.href,
+    children: category.children?.map(toMenuItem),
+  }
+}
+
+/**
+ * Drawer entries come from three sources (categories, utility links, account
+ * link). Hosts may reuse the same href across sources (e.g. a placeholder
+ * href), which would produce duplicate React keys if passed through as-is.
+ * Dedupe by href so every rendered item gets a unique id.
+ */
+function uniqueById<T extends { id: string }>(items: T[]): T[] {
+  const seen = new Set<string>()
+  return items.filter((item) => {
+    if (seen.has(item.id)) return false
+    seen.add(item.id)
+    return true
+  })
+}
+
+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>
+  )
+}
+
+type CartBadgeProps = {
+  count: number
+}
+
+/**
+ * Transitions.dev `notification-badge`: diagonal slide + spring pop when the
+ * count appears or changes. Positioned outside the bag so it never covers the icon.
+ */
+function CartBadge({ count }: CartBadgeProps) {
+  const reduceMotion = useReducedMotion()
+
+  return (
+    <AnimatePresence>
+      {count > 0 ? (
+        <motion.span
+          key='badge-shell'
+          className='bg-foreground text-background pointer-events-none absolute -top-2.5 -end-3.5 flex size-[1.125rem] items-center justify-center overflow-hidden rounded-full text-[10px] font-medium tabular-nums shadow-sm ring-2 ring-background'
+          initial={
+            reduceMotion
+              ? false
+              : { scale: 0, x: -8.2, y: 12.4, opacity: 0, filter: 'blur(2px)' }
+          }
+          animate={{ scale: 1, x: 0, y: 0, opacity: 1, filter: 'blur(0px)' }}
+          exit={
+            reduceMotion
+              ? { opacity: 0 }
+              : {
+                  scale: 0,
+                  opacity: 0,
+                  filter: 'blur(2px)',
+                  transition: { duration: 0.18, ease: [0.4, 0, 0.2, 1] },
+                }
+          }
+          transition={
+            reduceMotion
+              ? { duration: 0 }
+              : { type: 'spring', stiffness: 520, damping: 18, mass: 0.6 }
+          }
+          style={{ willChange: 'transform, opacity, filter' }}
+        >
+          <AnimatePresence mode='popLayout' initial={false}>
+            <motion.span
+              key={count}
+              className='block'
+              initial={reduceMotion ? false : { y: 8, opacity: 0, filter: 'blur(2px)' }}
+              animate={{ y: 0, opacity: 1, filter: 'blur(0px)' }}
+              exit={reduceMotion ? undefined : { y: -8, opacity: 0, filter: 'blur(2px)' }}
+              transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}
+            >
+              {count > 99 ? '99+' : count}
+            </motion.span>
+          </AnimatePresence>
+        </motion.span>
+      ) : null}
+    </AnimatePresence>
+  )
+}
+
+export interface Navbar4Props {
+  storeCategories: StoreCategory[]
+  shippingNote: string
+  utilityLinks: UtilityLink[]
+  logoText: string
+  logoHref?: string
+  /** When provided, a mobile-only "Account" link is appended to the utility links. */
+  accountHref?: string
+  searchQuery?: string
+  onSearchChange?: (value: string) => void
+  items?: CartItem[]
+  onQtyChange?: (id: string, delta: number) => void
+  onRemove?: (id: string) => void
+  user?: StoreUser
+  accountMenuItems?: AccountMenuItem[]
+  onHelp?: () => void
+  onSignOut?: () => void
+  onCheckout?: () => void
+  onViewCart?: () => void
+}
+
+export function Navbar4({
+  storeCategories,
+  shippingNote,
+  utilityLinks,
+  logoText,
+  logoHref,
+  accountHref,
+  searchQuery: searchQueryProp,
+  onSearchChange,
+  items: itemsProp,
+  onQtyChange: onQtyChangeProp,
+  onRemove: onRemoveProp,
+  user,
+  accountMenuItems,
+  onHelp,
+  onSignOut,
+  onCheckout,
+  onViewCart,
+}: Navbar4Props) {
+  /**
+   * Integration seam
+   * ----------------
+   * Pass cart + search from your storefront, or leave uncontrolled for a
+   * self-contained demo. Controlled props win when provided.
+   */
+  const [internalItems, setInternalItems] = useState<CartItem[]>([])
+  const [internalSearch, setInternalSearch] = useState('')
+  const [searchOpen, setSearchOpen] = useState(false)
+  const [menuOpen, setMenuOpen] = useState(false)
+  const searchTriggerRef = useRef<HTMLButtonElement>(null)
+
+  const items = itemsProp ?? internalItems
+  const searchQuery = searchQueryProp ?? internalSearch
+
+  const setSearchQuery = (value: string) => {
+    onSearchChange?.(value)
+    if (searchQueryProp === undefined) {
+      setInternalSearch(value)
+    }
+  }
+
+  const changeQty =
+    onQtyChangeProp ??
+    ((id: string, delta: number) =>
+      setInternalItems(current =>
+        current.flatMap(item => {
+          if (item.id !== id) {
+            return item
+          }
+
+          const qty = item.qty + delta
+          return qty <= 0 ? [] : [{ ...item, qty }]
+        }),
+      ))
+
+  const removeItem =
+    onRemoveProp ?? ((id: string) => setInternalItems(current => current.filter(item => item.id !== id)))
+
+  const count = useMemo(() => items.reduce((total, item) => total + item.qty, 0), [items])
+
+  useEffect(() => {
+    if (!searchOpen) {
+      return
+    }
+
+    document.getElementById('store-search-mobile')?.focus()
+  }, [searchOpen])
+
+  const dismissSearch = () => {
+    setSearchOpen(false)
+    searchTriggerRef.current?.focus()
+  }
+
+  return (
+    <header className='border-border bg-background/95 sticky top-0 z-40 w-full border-b backdrop-blur-md supports-backdrop-filter:bg-background/80'>
+      <div className='bg-foreground text-background hidden lg:block'>
+        <div className='mx-auto flex h-9 w-full max-w-7xl items-center justify-between px-4 text-xs tracking-wide sm:px-6 lg:px-8'>
+          <p className='text-background/80'>{shippingNote}</p>
+          <ul className='flex items-center gap-5'>
+            {utilityLinks.map(link => (
+              <li key={`${link.href}:${link.label}`}>
+                <a
+                  href={link.href}
+                  className='text-background/80 hover:text-background transition-colors duration-150'
+                >
+                  {link.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+
+      <div className='mx-auto flex h-16 w-full max-w-7xl items-center gap-3 px-4 sm:px-6 lg:px-8'>
+        <Button
+          variant='ghost'
+          size='icon'
+          className='lg:hidden'
+          aria-label='Open menu'
+          aria-expanded={menuOpen}
+          onClick={() => setMenuOpen(open => !open)}
+        >
+          <Menu />
+        </Button>
+
+        <MobileCategoryDrawer
+          categories={uniqueById([
+            ...storeCategories.map(toMenuItem),
+            ...utilityLinks.map(link => ({ id: link.href, label: link.label, href: link.href })),
+            ...(accountHref ? [{ id: accountHref, label: 'Account', href: accountHref }] : []),
+          ])}
+          collections={[]}
+          open={menuOpen}
+          onClose={() => setMenuOpen(false)}
+          viewAllHref=''
+        />
+
+        <div className='flex-1 lg:flex-none'>
+          <Logo text={logoText} href={logoHref} />
+        </div>
+
+        <nav aria-label='Store' className='hidden flex-1 lg:block'>
+          <ul className='flex items-center gap-0.5'>
+            {storeCategories.map(category =>
+              category.children && category.children.length > 0 ? (
+                <li key={category.href} className='group relative'>
+                  <a
+                    href={category.href}
+                    className={cn(
+                      'hover:bg-muted focus-visible:ring-ring rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-none',
+                      category.emphasis ? 'text-destructive' : 'text-foreground',
+                    )}
+                  >
+                    {category.label}
+                  </a>
+                  <div className='invisible absolute left-0 top-full z-50 pt-2 opacity-0 transition-opacity duration-150 group-hover:visible group-hover:opacity-100'>
+                    <MegaMenu
+                      categories={[toMenuItem(category)]}
+                      collections={[]}
+                      collectionsHref=''
+                      categoryColumnTitle={category.label}
+                    />
+                  </div>
+                </li>
+              ) : (
+                <li key={category.href}>
+                  <a
+                    href={category.href}
+                    className={cn(
+                      'hover:bg-muted focus-visible:ring-ring rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-none',
+                      category.emphasis ? 'text-destructive' : 'text-foreground',
+                    )}
+                  >
+                    {category.label}
+                  </a>
+                </li>
+              ),
+            )}
+          </ul>
+        </nav>
+
+        <div className='flex items-center gap-1.5'>
+          <div className='hidden lg:block lg:w-64'>
+            <Navbar4SearchBar
+              id='store-search'
+              value={searchQuery}
+              onValueChange={setSearchQuery}
+            />
+          </div>
+
+          <Button
+            ref={searchTriggerRef}
+            variant='ghost'
+            size='icon'
+            className='lg:hidden'
+            aria-label='Search products'
+            aria-expanded={searchOpen}
+            onClick={() => setSearchOpen(open => !open)}
+          >
+            {searchOpen ? <X /> : <Search />}
+          </Button>
+
+          {user ? (
+            <div className='hidden lg:block'>
+              <Navbar4AccountMenu
+                user={user}
+                items={accountMenuItems}
+                onHelp={onHelp}
+                onSignOut={onSignOut}
+              />
+            </div>
+          ) : null}
+
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button
+                variant='ghost'
+                size='icon'
+                className='relative overflow-visible'
+                aria-label={`Cart, ${count} ${count === 1 ? 'item' : 'items'}`}
+              >
+                <ShoppingBag className='size-5' />
+                <CartBadge count={count} />
+              </Button>
+            </SheetTrigger>
+            <SheetContent side='right' className='flex w-full max-w-sm flex-col gap-0 p-0'>
+              <SheetHeader className='border-border border-b'>
+                <SheetTitle className='text-left text-base'>
+                  Cart{count > 0 ? ` (${count})` : ''}
+                </SheetTitle>
+              </SheetHeader>
+              <Navbar4CartSheet
+                items={items}
+                onQtyChange={changeQty}
+                onRemove={removeItem}
+                onCheckout={onCheckout}
+                onViewCart={onViewCart}
+              />
+            </SheetContent>
+          </Sheet>
+        </div>
+      </div>
+
+      <p aria-live='polite' className='sr-only'>
+        {`Cart contains ${count} ${count === 1 ? 'item' : 'items'}`}
+      </p>
+
+      {searchOpen ? (
+        <div className='border-border flex flex-col gap-0 border-t p-4 lg:hidden'>
+          <Navbar4SearchBar
+            id='store-search-mobile'
+            value={searchQuery}
+            onValueChange={setSearchQuery}
+            onDismiss={dismissSearch}
+          />
+        </div>
+      ) : null}
+    </header>
+  )
+}
+
+export default Navbar4

package/src/blocks/marketing/pricing/pricing-section-1.tsx

@@ -0,0 +1,94 @@
+import { ArrowRight, Check } from 'lucide-react'
+import { Button } from '../../../ui/button'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '../../../ui/card'
+import { cn } from '../../../lib/utils'
+import { Badge } from '../../../ui/badge'
+
+export interface PricingTier {
+  id: string
+  name: string
+  description: string
+  /** Precio sin símbolo de moneda; el símbolo se pasa aparte en `currencySymbol`. */
+  price: string
+  /** Frecuencia de facturación, p. ej. '/mes'. */
+  frequency: string
+  features: string[]
+  popular?: boolean
+}
+
+export interface PricingSection1Props {
+  tiers: PricingTier[]
+  currencySymbol?: string
+  sectionTitle?: string
+  sectionLabel?: string
+  popularBadgeLabel?: string
+  getStartedLabel?: string
+  onSelectTier?: (tier: PricingTier) => void
+}
+
+export function PricingSection1({
+  tiers,
+  currencySymbol = '$',
+  sectionTitle = 'El plan perfecto para tu negocio',
+  sectionLabel = 'Nuestros precios',
+  popularBadgeLabel = 'Popular',
+  getStartedLabel = 'Empezar',
+  onSelectTier,
+}: PricingSection1Props) {
+  return (
+    <section className='py-16' id='pricing'>
+      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        <header className='mb-12 text-center'>
+          <p className='text-muted-foreground mb-2 text-sm font-medium'>{sectionLabel}</p>
+          <h2 className='text-3xl font-bold text-balance lg:text-5xl'>{sectionTitle}</h2>
+        </header>
+
+        <div className='grid gap-6 lg:grid-cols-3 lg:gap-8'>
+          {tiers.map(tier => (
+            <Card key={tier.id} className={cn('overflow-hidden py-6', { 'shadow-lg': tier.popular })}>
+              <CardHeader className='px-6'>
+                <div className='flex items-center justify-between gap-4'>
+                  <CardTitle className='text-xl font-bold lg:text-2xl'>{tier.name}</CardTitle>
+                  {tier.popular && (
+                    <Badge className='px-2.5 py-0.5 font-semibold rounded-full'>{popularBadgeLabel}</Badge>
+                  )}
+                </div>
+                <p className='text-muted-foreground text-sm'>{tier.description}</p>
+              </CardHeader>
+              <CardContent className='flex flex-col flex-1 px-6'>
+                <div className='mb-6 flex items-baseline gap-2'>
+                  <span className='text-3xl font-bold lg:text-5xl'>
+                    {currencySymbol}
+                    {tier.price}
+                  </span>
+                  <span className='text-muted-foreground text-sm'>{tier.frequency}</span>
+                </div>
+                <ul className='flex flex-col gap-3'>
+                  {tier.features.map(feature => (
+                    <li key={feature} className='flex items-center gap-2'>
+                      <Check className='size-4 shrink-0' />
+                      <span className='text-muted-foreground text-sm'>{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+              <CardFooter className='border-0 bg-transparent px-6 pb-6'>
+                <Button
+                  className='h-10 px-8 w-full cursor-pointer gap-2'
+                  size='lg'
+                  variant={tier.popular ? 'default' : 'outline'}
+                  aria-label={`${getStartedLabel} con ${tier.name}`}
+                  onClick={onSelectTier ? () => onSelectTier(tier) : undefined}
+                >
+                  {getStartedLabel} <ArrowRight />
+                </Button>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default PricingSection1

package/src/blocks/marketing/statistics/statistic-1.tsx

@@ -0,0 +1,93 @@
+import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
+import { Badge } from '../../../ui/badge'
+import { Progress } from '../../../ui/progress'
+import { BarChart3 } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+
+export interface StatisticItem {
+  id: string
+  title: string
+  value: string
+  description: string
+  progress: number
+  progressLabel: string
+  icon: LucideIcon
+}
+
+export interface Statistic1Props {
+  items: StatisticItem[]
+  badge?: string
+  title?: string
+  description?: string
+}
+
+export function Statistic1({ items, badge, title, description }: Statistic1Props) {
+  return (
+    <section className='py-16 md:py-20'>
+      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        <div className='flex flex-col gap-16'>
+          {(badge || title || description) && (
+            <div className='flex flex-col gap-6 text-center'>
+              {badge && (
+                <Badge
+                  variant='outline'
+                  className='h-auto [&>svg]:size-4! rounded-md inline-flex items-center gap-2 px-4 py-2 text-sm font-medium self-center'
+                >
+                  <BarChart3 />
+                  {badge}
+                </Badge>
+              )}
+              {title && (
+                <h2 className='text-4xl font-bold tracking-tight text-balance lg:text-5xl'>
+                  {title}
+                </h2>
+              )}
+              {description && (
+                <p className='text-muted-foreground mx-auto max-w-2xl text-lg leading-relaxed'>
+                  {description}
+                </p>
+              )}
+            </div>
+          )}
+
+          <div className='grid gap-6 sm:grid-cols-2 md:grid-cols-3'>
+            {items.map(item => (
+              <Card
+                key={item.id}
+                className='group relative gap-2 overflow-hidden py-6 transition-all duration-300 hover:shadow-lg'
+              >
+                <CardHeader className='px-6'>
+                  <div className='flex items-start justify-between'>
+                    <div className='flex-1'>
+                      <CardTitle className='text-muted-foreground text-sm font-medium text-balance'>
+                        {item.title}
+                      </CardTitle>
+                      <div className='mt-2'>
+                        <div className='text-2xl font-bold'>{item.value}</div>
+                      </div>
+                    </div>
+                    <div className='bg-muted rounded-xl p-3'>
+                      <item.icon className='text-muted-foreground size-6' />
+                    </div>
+                  </div>
+                  <p className='text-muted-foreground mt-1 text-xs'>{item.description}</p>
+                </CardHeader>
+                <CardContent className='pt-0 px-6'>
+                  <div className='flex flex-col gap-2'>
+                    <div className='flex items-center justify-between text-xs'>
+                      <span className='text-muted-foreground'>{item.progressLabel}</span>
+                      <span className='font-medium'>{item.progress}%</span>
+                    </div>
+                    <Progress value={item.progress} className='h-2' />
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Statistic1