@thorprovider/blocks 0.1.0

package/src/blocks/e-commerce/shopping-carts/shopping-cart-4.tsx

@@ -0,0 +1,391 @@
+'use client'
+
+import { useState } from 'react'
+import { ShoppingCart, Zap, Clock, CreditCard, Wallet, Minus, Plus, X } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
+import { Button } from '../../../ui/button'
+import { Separator } from '../../../ui/separator'
+import { Progress } from '../../../ui/progress'
+import { ShoppingCart4SpinningCounter } from './shopping-cart-4-spinning-counter'
+import { cn } from '../../../lib/utils'
+
+export interface ShoppingCart4Item {
+  id: string // serialization-friendly (seed used number)
+  name: string
+  price: number
+  quantity: number
+  image: string
+  variant?: string
+}
+
+export interface ShoppingCart4Promotion {
+  threshold: number
+  reward: string
+  icon: LucideIcon
+}
+
+export interface ShoppingCart4RecentlyViewed {
+  id: string
+  name: string
+  price: number
+  image: string
+}
+
+export interface ShoppingCart4Props {
+  items: ShoppingCart4Item[]
+  promotions: ShoppingCart4Promotion[]
+  recentlyViewed?: ShoppingCart4RecentlyViewed[]
+  // business rules externalized:
+  taxRate?: number // default 0.08
+  // labels (Spanish defaults):
+  titleLabel?: string // 'Carrito de compras'
+  subtotalLabel?: string // 'Subtotal'
+  taxLabel?: string // 'Impuestos'
+  shippingLabel?: string // 'Envío'
+  shippingFreeLabel?: string // 'Gratis'
+  totalLabel?: string // 'Total'
+  awayFromLabel?: string // 'Te faltan ${amount} para'
+  activatedLabel?: string // '¡{reward} activada!'
+  itemsLabel?: string // 'artículos'
+  expressCheckoutLabel?: string // 'Compra rápida'
+  expressLabel?: string // 'Rápido'
+  standardLabel?: string // 'Estándar'
+  estimatedDeliveryLabel?: string // 'Entrega estimada: 2-3 días hábiles'
+  secureCheckoutLabel?: string // 'Pago seguro • SSL cifrado'
+  recentlyViewedLabel?: string // 'Vistos recientemente'
+  collapseLabel?: string // 'Contraer carrito'
+  expandLabel?: string // 'Expandir carrito'
+  checkoutLabel?: string // 'Ver carrito y finalizar'
+  quickCheckoutLabel?: string // 'Compra rápida'
+  checkoutNowLabel?: string // 'Finalizar ahora'
+  // callbacks:
+  onQuantityChange?: (id: string, quantity: number) => void
+  onRemove?: (id: string) => void
+  onCheckout?: () => void
+  onQuickCheckout?: () => void // Express mode checkout button
+  onPayWithApple?: () => void
+  onPayWithGoogle?: () => void
+  onRecentlyViewedClick?: (id: string) => void
+}
+
+const interpolate = (template: string, values: Record<string, string>) =>
+  template.replace(/\$\{(\w+)\}|\{(\w+)\}/g, (match, dollarKey, braceKey) => {
+    const key = dollarKey ?? braceKey
+    return values[key] ?? match
+  })
+
+export function ShoppingCart4({
+  items,
+  promotions,
+  recentlyViewed,
+  taxRate = 0.08,
+  titleLabel = 'Carrito de compras',
+  subtotalLabel = 'Subtotal',
+  taxLabel = 'Impuestos',
+  shippingLabel = 'Envío',
+  shippingFreeLabel = 'Gratis',
+  totalLabel = 'Total',
+  awayFromLabel = 'Te faltan ${amount} para',
+  activatedLabel = '¡{reward} activada!',
+  itemsLabel = 'artículos',
+  expressCheckoutLabel = 'Compra rápida',
+  expressLabel = 'Rápido',
+  standardLabel = 'Estándar',
+  estimatedDeliveryLabel = 'Entrega estimada: 2-3 días hábiles',
+  secureCheckoutLabel = 'Pago seguro • SSL cifrado',
+  recentlyViewedLabel = 'Vistos recientemente',
+  collapseLabel = 'Contraer carrito',
+  expandLabel = 'Expandir carrito',
+  checkoutLabel = 'Ver carrito y finalizar',
+  quickCheckoutLabel = 'Compra rápida',
+  checkoutNowLabel = 'Finalizar ahora',
+  onQuantityChange,
+  onRemove,
+  onCheckout,
+  onQuickCheckout,
+  onPayWithApple,
+  onPayWithGoogle,
+  onRecentlyViewedClick,
+}: ShoppingCart4Props) {
+  const [isExpanded, setIsExpanded] = useState(true)
+  const [quickCheckout, setQuickCheckout] = useState(false)
+
+  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0)
+  const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0)
+  const tax = subtotal * taxRate
+  const total = subtotal + tax
+
+  const sortedPromotions = [...promotions].sort((a, b) => a.threshold - b.threshold)
+  const currentPromo = (() => {
+    for (let i = sortedPromotions.length - 1; i >= 0; i--) {
+      if (subtotal >= sortedPromotions[i].threshold) {
+        return { ...sortedPromotions[i], achieved: true }
+      }
+    }
+    const next = sortedPromotions.find(p => subtotal < p.threshold)
+    return next ? { ...next, achieved: false } : null
+  })()
+  const progressPercentage =
+    currentPromo && !currentPromo.achieved
+      ? Math.min(100, (subtotal / currentPromo.threshold) * 100)
+      : 100
+
+  return (
+    <section className='py-8'>
+      <div className='mx-auto max-w-md px-4'>
+        <Card className='shadow-lg'>
+          {/* Header */}
+          <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-3'>
+            <CardTitle className='flex items-center gap-2'>
+              <ShoppingCart className='size-5' />
+              {titleLabel} ({itemCount})
+            </CardTitle>
+            <Button
+              variant='ghost'
+              className='h-8 cursor-pointer px-3 text-xs'
+              size='sm'
+              onClick={() => setIsExpanded(!isExpanded)}
+              aria-expanded={isExpanded}
+              aria-label={isExpanded ? collapseLabel : expandLabel}
+            >
+              {isExpanded ? <X /> : <Plus />}
+            </Button>
+          </CardHeader>
+
+          <CardContent className='flex flex-col gap-6'>
+            {items.length === 0 ? (
+              <div className='flex flex-col items-center justify-center gap-2 py-6 text-center'>
+                <ShoppingCart className='text-muted-foreground/50 size-10' />
+                <p className='text-muted-foreground text-sm'>Tu carrito está vacío</p>
+              </div>
+            ) : (
+              <>
+                {/* Promotion Progress */}
+                {currentPromo && !currentPromo.achieved ? (
+                  <div className='flex flex-col gap-3'>
+                    <div className='flex items-center justify-between text-sm'>
+                      <span className='text-muted-foreground'>
+                        {interpolate(awayFromLabel, {
+                          amount: `$${(currentPromo.threshold - subtotal).toFixed(2)}`,
+                        })}
+                      </span>
+                      <div className='flex items-center gap-1'>
+                        <currentPromo.icon className='text-primary size-4' />
+                        <span className='text-primary font-medium'>{currentPromo.reward}</span>
+                      </div>
+                    </div>
+                    <Progress value={progressPercentage} className='h-2' />
+                  </div>
+                ) : null}
+
+                {/* Active Promotion */}
+                {currentPromo?.achieved ? (
+                  <div className='rounded-lg bg-success/10 p-3'>
+                    <div className='flex items-center gap-2 text-success'>
+                      <currentPromo.icon className='size-4' />
+                      <span className='text-sm font-medium'>
+                        {interpolate(activatedLabel, { reward: currentPromo.reward })}
+                      </span>
+                    </div>
+                  </div>
+                ) : null}
+
+                {isExpanded && (
+                  <>
+                    {/* Cart Items */}
+                    <div className='scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent flex max-h-64 flex-col gap-4 overflow-y-auto'>
+                      {items.map(item => (
+                        <div key={item.id} className='flex items-start gap-3'>
+                          <img src={item.image || undefined} alt={item.name} className='h-12 w-12 rounded-md object-cover' />
+
+                          <div className='flex flex-1 flex-col gap-1'>
+                            <h3 className='line-clamp-2 text-sm font-medium'>{item.name}</h3>
+                            {item.variant ? <p className='text-muted-foreground text-xs'>{item.variant}</p> : null}
+
+                            <div className='flex items-center justify-between'>
+                              <span className='text-sm font-semibold'>${item.price.toFixed(2)}</span>
+
+                              <div className='flex items-center'>
+                                <Button
+                                  variant='ghost'
+                                  size='sm'
+                                  className='size-6 h-8 cursor-pointer p-0 px-3 text-xs'
+                                  onClick={
+                                    onQuantityChange
+                                      ? () => onQuantityChange(item.id, item.quantity - 1)
+                                      : undefined
+                                  }
+                                  disabled={item.quantity <= 1}
+                                  aria-label={`Disminuir cantidad de ${item.name}`}
+                                >
+                                  <Minus />
+                                </Button>
+                                <span className='mx-2 w-6 text-center text-sm'>{item.quantity}</span>
+                                <Button
+                                  variant='ghost'
+                                  size='sm'
+                                  className='size-6 h-8 cursor-pointer p-0 px-3 text-xs'
+                                  onClick={
+                                    onQuantityChange
+                                      ? () => onQuantityChange(item.id, item.quantity + 1)
+                                      : undefined
+                                  }
+                                  aria-label={`Aumentar cantidad de ${item.name}`}
+                                >
+                                  <Plus />
+                                </Button>
+                                <Button
+                                  variant='ghost'
+                                  size='sm'
+                                  className='ms-2 size-6 h-8 cursor-pointer p-0 px-3 text-xs text-destructive hover:text-destructive'
+                                  onClick={onRemove ? () => onRemove(item.id) : undefined}
+                                  aria-label={`Quitar ${item.name}`}
+                                >
+                                  <X />
+                                </Button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+
+                    <Separator />
+
+                    {/* Order Summary */}
+                    <div className='flex flex-col gap-2'>
+                      <div className='flex justify-between text-sm'>
+                        <span>{subtotalLabel}</span>
+                        <span>${subtotal.toFixed(2)}</span>
+                      </div>
+                      <div className='flex justify-between text-sm'>
+                        <span>{taxLabel}</span>
+                        <span>${tax.toFixed(2)}</span>
+                      </div>
+                      <div className='flex justify-between text-sm text-success'>
+                        <span>{shippingLabel}</span>
+                        <span>{shippingFreeLabel}</span>
+                      </div>
+                      <Separator />
+                      <div className='flex justify-between font-semibold'>
+                        <span>{totalLabel}</span>
+                        <span>
+                          <ShoppingCart4SpinningCounter value={total} decimals={2} prefix='$' />
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Quick Actions */}
+                    <div className='flex flex-col gap-3'>
+                      {/* Express Checkout Toggle */}
+                      <div className='flex items-center justify-between text-sm'>
+                        <span>{expressCheckoutLabel}</span>
+                        <Button
+                          variant='outline'
+                          size='sm'
+                          onClick={() => setQuickCheckout(!quickCheckout)}
+                          className='h-8 cursor-pointer'
+                          aria-pressed={quickCheckout}
+                        >
+                          <Zap />
+                          {quickCheckout ? standardLabel : expressLabel}
+                        </Button>
+                      </div>
+
+                      {quickCheckout && (
+                        <div className='grid grid-cols-2 gap-2'>
+                          <Button size='sm' variant='outline' className='h-8 cursor-pointer px-3 text-xs' onClick={onPayWithApple}>
+                            <Wallet />
+                            Apple Pay
+                          </Button>
+                          <Button size='sm' variant='outline' className='h-8 cursor-pointer px-3 text-xs' onClick={onPayWithGoogle}>
+                            <CreditCard />
+                            Google Pay
+                          </Button>
+                        </div>
+                      )}
+
+                      {/* Checkout Button */}
+                      <Button
+                        size='lg'
+                        className='h-10 w-full cursor-pointer px-8'
+                        onClick={quickCheckout ? onQuickCheckout : onCheckout}
+                      >
+                        {quickCheckout ? quickCheckoutLabel : checkoutLabel}
+                      </Button>
+
+                      {/* Estimated Delivery */}
+                      <div className='text-muted-foreground flex items-center justify-center gap-2 text-xs'>
+                        <Clock className='size-3' />
+                        <span>{estimatedDeliveryLabel}</span>
+                      </div>
+                    </div>
+
+                    {/* Security Badge */}
+                    <div className='bg-muted/50 rounded-lg p-3 text-center'>
+                      <div className='text-muted-foreground flex items-center justify-center gap-2 text-xs'>
+                        <div className='size-2 rounded-full bg-success' aria-hidden='true' />
+                        <span>{secureCheckoutLabel}</span>
+                      </div>
+                    </div>
+                  </>
+                )}
+
+                {/* Collapsed Summary */}
+                {!isExpanded && (
+                  <div className='flex flex-col gap-3'>
+                    <div className='flex items-center justify-between'>
+                      <span className='text-muted-foreground text-sm'>
+                        {itemCount} {itemsLabel}
+                      </span>
+                      <span className='font-semibold'>
+                        <ShoppingCart4SpinningCounter value={total} decimals={2} prefix='$' />
+                      </span>
+                    </div>
+
+                    <Button size='sm' className='h-8 w-full cursor-pointer px-3 text-xs' onClick={onCheckout}>
+                      {checkoutNowLabel}
+                    </Button>
+                  </div>
+                )}
+
+                {/* Recently Viewed */}
+                {isExpanded && recentlyViewed && recentlyViewed.length > 0 && (
+                  <div className='flex flex-col gap-3'>
+                    <h4 className='text-sm font-medium'>{recentlyViewedLabel}</h4>
+                    <div className='grid grid-cols-3 gap-2'>
+                      {recentlyViewed.map(item => (
+                        <button
+                          key={item.id}
+                          type='button'
+                          className={cn(
+                            'group text-start',
+                            onRecentlyViewedClick && 'cursor-pointer',
+                          )}
+                          onClick={onRecentlyViewedClick ? () => onRecentlyViewedClick(item.id) : undefined}
+                        >
+                          <div className='mb-1 aspect-square overflow-hidden'>
+                            <img
+                              src={item.image || undefined}
+                              alt={item.name}
+                              className='size-full rounded-md object-cover'
+                            />
+                          </div>
+                          <p className='text-muted-foreground truncate text-xs'>{item.name}</p>
+                          <p className='text-xs font-medium'>${item.price.toFixed(2)}</p>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  )
+}
+
+export default ShoppingCart4

package/src/blocks/e-commerce/store-containers/store-container-1.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react'
+import { cn } from '../../../lib/utils'
+
+export interface StoreContainer1Props {
+  size?: 'default' | 'narrow' | 'wide' | 'full'
+  className?: string
+  children?: ReactNode
+}
+
+const sizeClasses: Record<NonNullable<StoreContainer1Props['size']>, string> = {
+  default: 'mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8',
+  narrow: 'mx-auto w-full max-w-3xl px-4 sm:px-6 lg:px-8',
+  wide: 'mx-auto w-full max-w-screen-2xl px-4 sm:px-6 lg:px-8',
+  full: 'w-full',
+}
+
+/**
+ * Trivial presentational layout container used as the root of spec-driven
+ * storefront pages. Constrains content width; children render as-is.
+ */
+export function StoreContainer1({
+  size = 'default',
+  className,
+  children,
+}: StoreContainer1Props) {
+  return <div className={cn(sizeClasses[size], className)}>{children}</div>
+}
+
+export default StoreContainer1

package/src/blocks/e-commerce/storefront-hero/storefront-hero-1.tsx

@@ -0,0 +1,244 @@
+'use client'
+
+import { motion, useReducedMotion } from 'motion/react'
+
+import { Badge } from '../../../ui/badge'
+import { Button } from '../../../ui/button'
+import { ShoppingBag, Star, ArrowRight } from 'lucide-react'
+import type { ComponentProps, ReactNode } from 'react'
+import type { CTA } from '../../../lib/types'
+
+export interface FeaturedProduct {
+  id: string
+  name: string
+  brand: string
+  price: number
+  originalPrice: number
+  rating: number
+  reviewCount: number
+  inStock: boolean
+  isNew: boolean
+  isOnSale: boolean
+  image: string
+  colors: string[]
+}
+
+export interface StorefrontHero1Props {
+  title: string
+  description: string
+  products: FeaturedProduct[]
+  titleAccent?: string
+  badge?: string
+  primaryCta?: CTA
+  secondaryCta?: CTA
+  onAddToCart?: (product: FeaturedProduct) => void
+  onBuyNow?: (product: FeaturedProduct) => void
+  onSelectColor?: (product: FeaturedProduct, index: number, color: string) => void
+  addToCartLabel?: string
+  buyNowLabel?: string
+  newLabel?: string
+  outOfStockLabel?: string
+  colorsLabel?: string
+}
+
+function CtaButton({
+  cta,
+  variant,
+  children,
+}: {
+  cta: CTA
+  variant?: ComponentProps<typeof Button>['variant']
+  children: ReactNode
+}) {
+  if (cta.href) {
+    return (
+      <Button
+        variant={variant}
+        size='lg'
+        className='group relative cursor-pointer overflow-hidden px-8 py-6 text-base font-medium'
+        asChild
+      >
+        <a href={cta.href}>{children}</a>
+      </Button>
+    )
+  }
+
+  return (
+    <Button
+      variant={variant}
+      size='lg'
+      className='group relative cursor-pointer overflow-hidden px-8 py-6 text-base font-medium'
+    >
+      {children}
+    </Button>
+  )
+}
+
+function StorefrontHero1({
+  title,
+  description,
+  products,
+  titleAccent,
+  badge,
+  primaryCta,
+  secondaryCta,
+  onAddToCart,
+  onBuyNow,
+  onSelectColor,
+  addToCartLabel = 'Agregar al carrito',
+  buyNowLabel = 'Comprar ahora',
+  newLabel = 'Nuevo',
+  outOfStockLabel = 'Agotado',
+  colorsLabel = 'Colores:',
+}: StorefrontHero1Props) {
+  const reduceMotion = useReducedMotion()
+
+  return (
+    <div className='from-primary/5 to-background relative overflow-hidden bg-gradient-to-br'>
+      <div className='relative z-10 mx-auto w-full max-w-7xl flex flex-col items-center justify-between gap-12 px-4 sm:px-6 lg:px-8 py-16 lg:py-20 xl:flex-row xl:items-start'>
+        <motion.div
+          initial={reduceMotion ? false : { opacity: 0, y: 24 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, ease: 'easeOut' }}
+          className='mx-auto max-w-xl text-center lg:mx-0 xl:text-left'
+        >
+          {badge && (
+            <div className='border-primary/20 bg-primary/5 text-primary inline-flex items-center rounded-full border px-4 py-1.5 text-sm font-medium backdrop-blur-sm'>
+              {badge}
+            </div>
+          )}
+          <h1 className='text-foreground mt-8 text-4xl font-bold tracking-tight sm:text-5xl md:text-7xl'>
+            {title}{' '}
+            {titleAccent && (
+              <span className='from-primary to-primary/70 bg-gradient-to-r bg-clip-text text-transparent'>
+                {titleAccent}
+              </span>
+            )}
+          </h1>
+          <p className='text-muted-foreground mt-8 text-lg'>{description}</p>
+          {(primaryCta || secondaryCta) && (
+            <div className='mt-10 flex flex-col gap-4 sm:flex-row sm:justify-center xl:justify-start'>
+              {primaryCta && (
+                <CtaButton cta={primaryCta}>
+                  <span className='relative z-10 flex items-center gap-2'>
+                    {primaryCta.label}
+                    <ArrowRight className='transition-transform group-hover:translate-x-1' />
+                  </span>
+                  <span className='bg-primary/5 absolute inset-0 -z-0 opacity-0 transition-opacity group-hover:opacity-100'></span>
+                </CtaButton>
+              )}
+              {secondaryCta && (
+                <CtaButton cta={secondaryCta} variant='outline'>
+                  <span className='relative z-10 flex items-center gap-2'>
+                    <ShoppingBag />
+                    {secondaryCta.label}
+                  </span>
+                </CtaButton>
+              )}
+            </div>
+          )}
+        </motion.div>
+
+        <div className='w-full max-w-2xl lg:mt-0'>
+          <div className='grid gap-6 sm:grid-cols-2'>
+            {products.map((product, index) => (
+              <motion.div
+                key={product.id}
+                initial={reduceMotion ? false : { opacity: 0, y: 24 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true, margin: '-40px' }}
+                transition={{
+                  duration: 0.45,
+                  delay: reduceMotion ? 0 : index * 0.1,
+                  ease: 'easeOut',
+                }}
+                className='bg-card relative h-full overflow-hidden rounded-lg border shadow-sm transition-shadow hover:shadow-md'
+              >
+                <div className='absolute top-4 left-4 z-10 flex flex-col gap-2'>
+                  {product.isNew && (
+                    <Badge variant='secondary' className='rounded-full'>{newLabel}</Badge>
+                  )}
+                  {product.isOnSale && (
+                    <Badge variant='destructive' className='rounded-full'>
+                      {Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100)}% OFF
+                    </Badge>
+                  )}
+                </div>
+
+                <div className='relative aspect-square overflow-hidden'>
+                  <img
+                    src={product.image || undefined}
+                    alt={`${product.brand} ${product.name}`}
+                    className='size-full object-cover'
+                    loading='lazy'
+                  />
+                  {!product.inStock && (
+                    <div className='absolute inset-0 flex items-center justify-center bg-black/50'>
+                      <span className='rounded bg-white/90 px-3 py-1 text-sm font-medium'>{outOfStockLabel}</span>
+                    </div>
+                  )}
+                </div>
+
+                <div className='p-4'>
+                  <div className='text-muted-foreground mb-1 text-sm font-medium'>{product.brand}</div>
+                  <h3 className='mb-2 font-medium'>{product.name}</h3>
+
+                  <div className='mb-3'>
+                    <span className='text-lg font-bold'>${product.price.toFixed(2)}</span>
+                    {product.isOnSale && (
+                      <span className='text-muted-foreground ms-2 text-sm line-through'>
+                        ${product.originalPrice.toFixed(2)}
+                      </span>
+                    )}
+                  </div>
+
+                  <div className='mb-4 flex items-center'>
+                    <span className='text-muted-foreground me-2 text-sm'>{colorsLabel}</span>
+                    <div className='flex gap-1'>
+                      {product.colors.map((color, i) => (
+                        <button
+                          key={i}
+                          className='size-5 rounded-full border'
+                          style={{ backgroundColor: color }}
+                          aria-label={`Opción de color ${i + 1}`}
+                          onClick={onSelectColor ? () => onSelectColor(product, i, product.colors[i]) : undefined}
+                        />
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className='mb-4 flex items-center'>
+                    <div className='flex'>
+                      {[...Array(5)].map((_, i) => (
+                        <Star
+                          key={i}
+                          className={`size-4 ${i < Math.floor(product.rating) ? 'fill-foreground text-foreground' : 'text-muted-foreground'}`}
+                        />
+                      ))}
+                    </div>
+                    <span className='text-muted-foreground ms-2 text-sm'>({product.reviewCount.toLocaleString()})</span>
+                  </div>
+
+                  <div className='flex flex-col gap-2'>
+                    <Button variant='outline' className="h-9 px-4 py-2 cursor-pointer" disabled={!product.inStock} onClick={onAddToCart ? () => onAddToCart(product) : undefined}>
+                      <ShoppingBag />
+                      {addToCartLabel}
+                    </Button>
+                    <Button className="h-9 px-4 py-2 cursor-pointer" disabled={!product.inStock} onClick={onBuyNow ? () => onBuyNow(product) : undefined}>
+                      {buyNowLabel}
+                    </Button>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className='bg-primary/10 absolute -top-32 -right-32 size-96 rounded-full blur-3xl' />
+      <div className='bg-secondary/30 absolute -bottom-32 -left-32 size-96 rounded-full blur-3xl' />
+    </div>
+  )
+}
+
+export default StorefrontHero1