@thorprovider/blocks 0.1.2 → 1.0.0

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

@@ -1,318 +0,0 @@
-import { ArrowRight, MapPin } from 'lucide-react'
-import type { ComponentProps, ReactNode } from 'react'
-
-import { Button } from '../../../ui/button'
-import { Card, CardContent } from '../../../ui/card'
-import { cn } from '../../../lib/utils'
-import type { CTA } from '../../../lib/types'
-
-export interface Department {
-  /** Unique identifier */
-  id: string
-  /** Department name */
-  name: string
-  /** Image URL for the department chip */
-  image: string
-  /** Accessible image description (falls back to `name`) */
-  imageAlt?: string
-  /** Product count label shown under the name */
-  count?: string
-  /** Link destination when the department is a link */
-  href?: string
-}
-
-export interface FeaturedDeal {
-  /** Unique identifier */
-  id: string
-  /** Deal title */
-  name: string
-  /** Short supporting description */
-  description: string
-  /** Image URL */
-  image: string
-  /** Accessible image description (falls back to `name`) */
-  imageAlt?: string
-  /** Current price */
-  price: number
-  /** Original price, rendered struck-through when present */
-  originalPrice?: number
-  /** Optional call to action shown on the card */
-  cta?: CTA
-}
-
-export interface StoreLocator {
-  /** Locator section title */
-  title: string
-  /** Locator section description */
-  description: string
-  /** Locator button label */
-  ctaLabel: string
-  /** Optional link destination for the locator button */
-  ctaHref?: string
-}
-
-export interface StorefrontHero5Props {
-  /** Small pill shown above the title */
-  badge?: string
-  /** Main headline */
-  title: string
-  /** Accent text appended to the headline */
-  titleAccent?: string
-  /** Supporting paragraph under the headline */
-  description: string
-  /** Primary call to action */
-  primaryCta?: CTA
-  /** Secondary call to action */
-  secondaryCta?: CTA
-  /** Shipping banner text shown under the CTAs */
-  shippingInfo?: string
-  /** Department categories rendered as a grid */
-  departments: Department[]
-  /** Featured deals rendered as cards */
-  featuredDeals: FeaturedDeal[]
-  /** Store locator strip rendered at the bottom */
-  storeLocator?: StoreLocator
-  /** Invoked when a department is clicked (departments without `href`) */
-  onDepartmentClick?: (department: Department) => void
-  /** Invoked when a deal CTA is clicked (deals whose `cta` has no `href`) */
-  onShopNow?: (deal: FeaturedDeal) => void
-  /** Invoked when the locator button is clicked (when `ctaHref` is absent) */
-  onLocateStores?: () => void
-  /** Label for the deal call-to-action button */
-  shopNowLabel?: 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 h-10 px-4 cursor-pointer text-base'
-        asChild
-      >
-        <a href={cta.href}>{children}</a>
-      </Button>
-    )
-  }
-
-  return (
-    <Button
-      variant={variant}
-      size='lg'
-      className='group h-10 px-4 cursor-pointer text-base'
-    >
-      {children}
-    </Button>
-  )
-}
-
-function StorefrontHero5({
-  badge,
-  title,
-  titleAccent,
-  description,
-  primaryCta,
-  secondaryCta,
-  shippingInfo,
-  departments,
-  featuredDeals,
-  storeLocator,
-  onDepartmentClick,
-  onShopNow,
-  onLocateStores,
-  shopNowLabel = 'Comprar ahora',
-}: StorefrontHero5Props) {
-  const departmentChipClasses = cn(
-    'flex flex-col items-center gap-4 rounded-lg p-2 text-center outline-none',
-    'transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring',
-  )
-
-  return (
-    <div className='bg-background relative overflow-hidden'>
-      <div className='relative z-10'>
-        <div className='mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20'>
-          <div className='mx-auto max-w-4xl text-center'>
-            {badge && (
-              <div className='border-primary/20 bg-primary/5 text-primary inline-flex items-center justify-center rounded-md border px-4 py-1.5 text-sm'>
-                {badge}
-              </div>
-            )}
-
-            <h1 className='mt-6 text-4xl font-bold tracking-tight text-balance sm:text-5xl md:text-6xl'>
-              {title}{' '}
-              {titleAccent && <span className='text-primary'>{titleAccent}</span>}
-            </h1>
-
-            <p className='text-muted-foreground mx-auto mt-6 max-w-2xl text-lg'>
-              {description}
-            </p>
-
-            {(primaryCta || secondaryCta) && (
-              <div className='mt-8 flex flex-wrap justify-center gap-4'>
-                {primaryCta && (
-                  <CtaButton cta={primaryCta}>
-                    {primaryCta.label}
-                    <ArrowRight className='transition-transform group-hover:translate-x-1' />
-                  </CtaButton>
-                )}
-                {secondaryCta && <CtaButton cta={secondaryCta} variant='outline'>{secondaryCta.label}</CtaButton>}
-              </div>
-            )}
-
-            {shippingInfo && (
-              <div className='mt-6'>
-                <div className='bg-background/80 text-muted-foreground inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-sm backdrop-blur-sm'>
-                  <MapPin className='text-primary size-4' aria-hidden='true' />
-                  <span>{shippingInfo}</span>
-                </div>
-              </div>
-            )}
-
-            <div className='mt-12 grid grid-cols-3 gap-8'>
-              {departments.map(department => {
-                const chip = (
-                  <>
-                    <img
-                      src={department.image || undefined}
-                      alt={department.imageAlt ?? department.name}
-                      className='bg-card border-border size-16 rounded-full border object-cover'
-                      loading='lazy'
-                    />
-                    <div>
-                      <div className='text-lg font-medium'>{department.name}</div>
-                      {department.count && (
-                        <div className='text-muted-foreground mt-1 text-sm'>{department.count}</div>
-                      )}
-                    </div>
-                  </>
-                )
-
-                if (department.href) {
-                  return (
-                    <a
-                      key={department.id}
-                      href={department.href}
-                      className={cn(departmentChipClasses, 'cursor-pointer')}
-                    >
-                      {chip}
-                    </a>
-                  )
-                }
-
-                return (
-                  <button
-                    key={department.id}
-                    type='button'
-                    onClick={onDepartmentClick ? () => onDepartmentClick(department) : undefined}
-                    className={cn(departmentChipClasses, 'cursor-pointer')}
-                  >
-                    {chip}
-                  </button>
-                )
-              })}
-            </div>
-
-            {featuredDeals.length > 0 && (
-              <div className='mt-16 grid gap-6 sm:grid-cols-2'>
-                {featuredDeals.map(deal => (
-                  <Card key={deal.id} className='mx-auto h-full w-full overflow-hidden border-0 py-0 shadow-lg'>
-                    <CardContent className='p-0'>
-                      <div className='relative aspect-[3/2] overflow-hidden'>
-                        <img
-                          src={deal.image || undefined}
-                          alt={deal.imageAlt ?? deal.name}
-                          className='size-full object-cover object-center transition-transform duration-700 hover:scale-105'
-                          loading='lazy'
-                        />
-                        <div className='from-background/90 via-background/30 absolute inset-0 bg-gradient-to-t to-transparent' />
-                        <div className='absolute inset-0 flex items-end p-8'>
-                          <div className='w-full'>
-                            <div className='bg-background/80 flex flex-col items-center justify-between gap-6 rounded-lg p-6 backdrop-blur-sm sm:flex-row sm:gap-8'>
-                              <div className='text-center sm:text-left'>
-                                <h3 className='text-2xl font-bold tracking-tight sm:text-3xl'>{deal.name}</h3>
-                                <p className='text-muted-foreground mt-1'>{deal.description}</p>
-                                <div className='mt-2 flex items-baseline justify-center gap-2 sm:justify-start'>
-                                  <span className='text-lg font-bold'>${deal.price.toFixed(2)}</span>
-                                  {deal.originalPrice && (
-                                    <span className='text-muted-foreground text-sm line-through'>
-                                      ${deal.originalPrice.toFixed(2)}
-                                    </span>
-                                  )}
-                                </div>
-                              </div>
-                              {(deal.cta || onShopNow) && (
-                                <div className='flex-shrink-0'>
-                                  {deal.cta?.href ? (
-                                    <Button size='lg' className='group h-10 px-4 cursor-pointer' asChild>
-                                      <a href={deal.cta.href}>
-                                        {deal.cta.label}
-                                        <ArrowRight className='transition-transform group-hover:translate-x-1' />
-                                      </a>
-                                    </Button>
-                                  ) : (
-                                    <Button
-                                      size='lg'
-                                      className='group h-10 px-4 cursor-pointer'
-                                      onClick={onShopNow ? () => onShopNow(deal) : undefined}
-                                    >
-                                      {deal.cta?.label ?? shopNowLabel}
-                                      <ArrowRight className='transition-transform group-hover:translate-x-1' />
-                                    </Button>
-                                  )}
-                                </div>
-                              )}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </CardContent>
-                  </Card>
-                ))}
-              </div>
-            )}
-
-            {storeLocator && (
-              <div className='border-border/50 bg-background/50 mt-8 rounded-lg border p-6 backdrop-blur-sm'>
-                <div className='flex flex-col items-center gap-6 sm:flex-row sm:justify-between'>
-                  <div className='flex items-center gap-4'>
-                    <div className='bg-primary/10 text-primary flex size-12 items-center justify-center rounded-full'>
-                      <MapPin className='size-6' aria-hidden='true' />
-                    </div>
-                    <div className='text-start'>
-                      <h4 className='text-lg font-medium'>{storeLocator.title}</h4>
-                      <p className='text-muted-foreground'>{storeLocator.description}</p>
-                    </div>
-                  </div>
-                  {storeLocator.ctaHref ? (
-                    <Button variant='outline' className='h-9 cursor-pointer px-4 py-2 whitespace-nowrap' asChild>
-                      <a href={storeLocator.ctaHref}>{storeLocator.ctaLabel}</a>
-                    </Button>
-                  ) : (
-                    <Button
-                      variant='outline'
-                      className='h-9 cursor-pointer px-4 py-2 whitespace-nowrap'
-                      onClick={onLocateStores ? onLocateStores : undefined}
-                    >
-                      {storeLocator.ctaLabel}
-                    </Button>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default StorefrontHero5

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

@@ -1,205 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { ArrowRight, Sparkles } from 'lucide-react'
-
-import { Badge } from '../../../ui/badge'
-import { Button } from '../../../ui/button'
-import { Card, CardContent } from '../../../ui/card'
-
-export interface HeroDeal {
-  /** Unique identifier for the deal. */
-  id: string
-  /** Deal name shown in the badge, e.g. "Summer Sale". */
-  title: string
-  /** Discount label, e.g. "50% OFF". */
-  discount: string
-  /** Countdown text, e.g. "2d : 15h : 30m". */
-  endTime: string
-}
-
-export interface HeroCategory {
-  /** Unique identifier for the category. */
-  id: string
-  /** Category name. */
-  name: string
-  /** Product count label, e.g. "2.5k+". */
-  count: string
-  /** Image URL for the category card. */
-  image: string
-  /** Accessible image description (falls back to `name`). */
-  imageAlt?: string
-  /** Optional link destination; renders the card arrow as a link when present. */
-  href?: string
-}
-
-export interface StorefrontHero6Props {
-  /** Small pill shown above the headline. */
-  badge?: string
-  /** Main headline. */
-  title: string
-  /** Accent line rendered on a new line after the headline. */
-  subtitle?: string
-  /** Supporting paragraph under the headline. */
-  description: string
-  /** Deals rendered in the sticky auto-rotating top bar. */
-  deals: HeroDeal[]
-  /** Product categories rendered as a card grid. */
-  categories: HeroCategory[]
-  /** Milliseconds between auto-rotating deals (default 3000). */
-  rotationInterval?: number
-  /** Label shown before the deal countdown, e.g. "Ends in". */
-  endsInLabel?: string
-  /** Label of the shop-now button in the deals bar. */
-  shopNowLabel?: string
-  /** Unit appended to each category product count. */
-  productsLabel?: string
-  /** Prefix for the category arrow accessible label. */
-  viewLabel?: string
-  /** Called when the shop-now button in the deals bar is clicked. */
-  onShopNow?: (deal: HeroDeal) => void
-  /** Called when a category arrow is clicked (categories without `href`). */
-  onCategoryClick?: (category: HeroCategory) => void
-}
-
-function StorefrontHero6({
-  badge,
-  title,
-  subtitle,
-  description,
-  deals,
-  categories,
-  rotationInterval = 3000,
-  endsInLabel = 'Termina en',
-  shopNowLabel = 'Comprar ahora',
-  productsLabel = 'productos',
-  viewLabel = 'Ver',
-  onShopNow,
-  onCategoryClick,
-}: StorefrontHero6Props) {
-  const [currentDeal, setCurrentDeal] = useState(0)
-
-  useEffect(() => {
-    if (deals.length <= 1) return
-
-    const interval = setInterval(() => {
-      setCurrentDeal(prev => (prev + 1) % deals.length)
-    }, rotationInterval)
-
-    return () => clearInterval(interval)
-  }, [deals.length, rotationInterval])
-
-  const deal = deals[currentDeal]
-
-  return (
-    <div className='relative'>
-      {deal && (
-        <header className='bg-primary text-primary-foreground sticky top-0 z-50 shadow-md'>
-          <div className='mx-auto w-full max-w-7xl px-4 py-2 sm:px-6 lg:px-8'>
-            <div className='flex items-center justify-center'>
-              <div className='flex w-full max-w-3xl items-center justify-center gap-4'>
-                <div className='flex items-center gap-2'>
-                  <Badge
-                    variant='secondary'
-                    className='bg-primary-foreground text-primary px-2.5 py-0.5 font-semibold'
-                  >
-                    {deal.title}
-                  </Badge>
-                  <span className='font-semibold'>{deal.discount}</span>
-                </div>
-                <span className='hidden sm:inline'>
-                  {endsInLabel} {deal.endTime}
-                </span>
-                <Button
-                  variant='link'
-                  size='sm'
-                  className='text-primary-foreground hover:text-primary-foreground/80 ml-auto h-8 cursor-pointer px-3 text-xs'
-                  onClick={onShopNow ? () => onShopNow(deal) : undefined}
-                >
-                  {shopNowLabel} <ArrowRight />
-                </Button>
-              </div>
-            </div>
-          </div>
-        </header>
-      )}
-
-      <main className='mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8'>
-        <div className='mb-12 text-center'>
-          {badge && (
-            <div className='relative inline-block'>
-              <Badge
-                variant='outline'
-                className='mb-4 flex h-auto items-center gap-2 rounded-full px-3.5 py-1.5 text-sm font-normal'
-              >
-                <Sparkles className='size-4' aria-hidden='true' />
-                {badge}
-              </Badge>
-            </div>
-          )}
-          <h1 className='text-4xl font-bold tracking-tight text-balance sm:text-5xl md:text-6xl'>
-            {title}
-            {subtitle && (
-              <>
-                <br />
-                {subtitle}
-              </>
-            )}
-          </h1>
-          <p className='text-muted-foreground mx-auto mt-4 max-w-2xl text-lg'>{description}</p>
-        </div>
-
-        <div className='grid gap-4 sm:grid-cols-2 lg:grid-cols-4'>
-          {categories.map(category => (
-            <Card key={category.id} className='group relative overflow-hidden py-0 transition-all duration-500'>
-              <img
-                src={category.image || undefined}
-                alt={category.imageAlt ?? category.name}
-                className='aspect-4/5 size-full object-cover grayscale transition-all duration-500 hover:grayscale-0'
-                width={400}
-                height={500}
-                loading='lazy'
-              />
-              <CardContent className='absolute inset-x-0 bottom-0 p-4'>
-                <div className='mt-1 flex items-center justify-between'>
-                  <div>
-                    <h2 className='text-background dark:text-foreground text-lg font-medium'>{category.name}</h2>
-                    <span className='text-background/80 dark:text-foreground/80 text-sm'>
-                      {category.count} {productsLabel}
-                    </span>
-                  </div>
-                  {category.href ? (
-                    <Button
-                      variant='secondary'
-                      size='icon'
-                      className='h-9 w-9 cursor-pointer rounded-full backdrop-blur-xs'
-                      aria-label={`${viewLabel} ${category.name}`}
-                      asChild
-                    >
-                      <a href={category.href}>
-                        <ArrowRight />
-                      </a>
-                    </Button>
-                  ) : (
-                    <Button
-                      variant='secondary'
-                      size='icon'
-                      className='h-9 w-9 cursor-pointer rounded-full backdrop-blur-xs'
-                      aria-label={`${viewLabel} ${category.name}`}
-                      onClick={onCategoryClick ? () => onCategoryClick(category) : undefined}
-                    >
-                      <ArrowRight />
-                    </Button>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </main>
-    </div>
-  )
-}
-
-export { StorefrontHero6 }
-export default StorefrontHero6

package/src/blocks/marketing/features/feature-1.tsx

@@ -1,97 +0,0 @@
-import { Badge } from '../../../ui/badge'
-import { Button } from '../../../ui/button'
-import { Card, CardContent } from '../../../ui/card'
-import { ArrowRight } from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-
-export interface Feature1Item {
-  id: string
-  title: string
-  description: string
-  icon: LucideIcon
-}
-
-export interface Feature1Props {
-  items: Feature1Item[]
-  badge?: string
-  title?: string
-  description?: string
-  learnMoreLabel?: string
-  ctaLabel?: string
-  onCtaClick?: () => void
-  onLearnMore?: (item: Feature1Item) => void
-}
-
-export function Feature1({
-  items,
-  badge,
-  title,
-  description,
-  learnMoreLabel,
-  ctaLabel,
-  onCtaClick,
-  onLearnMore,
-}: Feature1Props) {
-  return (
-    <section className='mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 md:py-16 lg:px-8'>
-      {(badge || title || description) && (
-        <header className='mx-auto mb-12 max-w-2xl text-center'>
-          {badge && (
-            <Badge variant='secondary' className='h-auto mb-4 rounded-full px-4 py-1 font-medium'>
-              {badge}
-            </Badge>
-          )}
-          {title && (
-            <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>{title}</h2>
-          )}
-          {description && (
-            <p className='text-muted-foreground text-pretty'>{description}</p>
-          )}
-        </header>
-      )}
-
-      <div className='grid gap-4 sm:grid-cols-2 sm:gap-6 md:grid-cols-3'>
-        {items.map(feature => (
-          <article key={feature.id} className='group'>
-            <Card className='relative h-full overflow-hidden transition-all hover:shadow-md'>
-              <CardContent className='px-6'>
-                <div className='bg-secondary text-secondary-foreground mb-4 inline-flex size-12 items-center justify-center rounded-xl'>
-                  <feature.icon className='size-5' aria-hidden='true' />
-                </div>
-                <h3 className='mb-2 text-lg font-semibold'>{feature.title}</h3>
-                <p className='text-muted-foreground mb-4 text-sm'>{feature.description}</p>
-
-                {learnMoreLabel && (
-                  <Button
-                    variant='link'
-                    size='sm'
-                    className='h-8 px-3 text-xs text-muted-foreground hover:text-foreground h-auto cursor-pointer !p-0 text-sm'
-                    onClick={onLearnMore ? () => onLearnMore(feature) : undefined}
-                  >
-                    {learnMoreLabel}
-                    <ArrowRight />
-                  </Button>
-                )}
-              </CardContent>
-            </Card>
-          </article>
-        ))}
-      </div>
-
-      {ctaLabel && (
-        <div className='mt-12 text-center'>
-          <Button
-            size='lg'
-            className='h-10 cursor-pointer rounded-lg !px-8'
-            onClick={onCtaClick}
-          >
-            {ctaLabel}
-            <ArrowRight />
-          </Button>
-        </div>
-      )}
-    </section>
-  )
-}
-
-export default Feature1