@fayz-ai/storefront 0.9.0 → 0.11.0

package/src/components/sections/HeroSection.tsx

@@ -1,193 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
-import type { HeroSlide } from '../../sections'
-import type { HeroVariant } from '../../theme'
-import { bannerPlaceholder } from '../../sections'
-import { useStorefrontConfig } from '../../config'
-import { prefersReducedMotion } from '../../motion'
-import { Link } from '../../router'
-import { TID } from '../../testids'
-import { SmoothImage } from '../SmoothImage'
-
-function slideImage(slide: HeroSlide, w = 1600, h = 700): string {
-  return slide.image ?? bannerPlaceholder(slide.title, slide.hue ?? 200, (slide.hue ?? 200) + 40, w, h)
-}
-
-function SlideCopy({ slide, active }: { slide: HeroSlide; active: boolean }) {
-  const stagger = (i: number) =>
-    active ? { className: 'animate-fade-up', style: { animationDelay: `${i * 120}ms` } } : { className: 'opacity-0' }
-
-  const inner = (
-    <>
-      <h2 className={`sf-heading text-3xl font-bold leading-tight tracking-tight sm:text-5xl ${stagger(0).className}`} style={stagger(0).style}>
-        {slide.title}
-      </h2>
-      {slide.subtitle && (
-        <p className={`mt-3 max-w-md text-base sm:text-lg ${stagger(1).className}`} style={stagger(1).style}>
-          {slide.subtitle}
-        </p>
-      )}
-      {slide.cta && (
-        <div className={stagger(2).className} style={stagger(2).style}>
-          <Link
-            to={slide.href ?? '/catalog'}
-            className="sf-cta mt-6 inline-block bg-primary px-8 py-3.5 font-semibold text-primary-foreground shadow-lg transition-all hover:-translate-y-0.5 hover:shadow-xl"
-            style={{ borderRadius: 'var(--sf-radius-button)' }}
-          >
-            {slide.cta}
-          </Link>
-        </div>
-      )}
-    </>
-  )
-  if (slide.boxed) {
-    return (
-      <div className="border border-foreground/30 bg-background/90 p-8 backdrop-blur-sm sm:p-10">{inner}</div>
-    )
-  }
-  return <div className="text-white">{inner}</div>
-}
-
-export function HeroSection({
-  variant,
-  slides,
-  height = 'tall',
-}: {
-  variant: HeroVariant
-  slides: HeroSlide[]
-  height?: 'tall' | 'medium'
-}) {
-  const [index, setIndex] = useState(0)
-  const [loadedSlides, setLoadedSlides] = useState<Record<number, boolean>>({})
-  const config = useStorefrontConfig()
-  const interacted = useRef(false)
-  const hClass = height === 'tall' ? 'h-[72vh] min-h-[440px]' : 'h-[48vh] min-h-[340px]'
-  const revealImages = config.imageLoading.mode !== 'none'
-  const revealStyle = (loaded: boolean): React.CSSProperties | undefined =>
-    revealImages
-      ? {
-          filter: config.imageLoading.blur && !loaded ? 'blur(10px)' : 'blur(0px)',
-          transition: `opacity 700ms ease, filter ${config.imageLoading.durationMs}ms ${config.imageLoading.easing}`,
-        }
-      : undefined
-
-  // Auto-advance until the visitor takes over; never under reduced motion.
-  useEffect(() => {
-    if (variant !== 'slider' || slides.length < 2 || prefersReducedMotion()) return
-    const timer = setInterval(() => {
-      if (!interacted.current) setIndex((i) => (i + 1) % slides.length)
-    }, 7000)
-    return () => clearInterval(timer)
-  }, [variant, slides.length])
-
-  const goTo = (i: number) => {
-    interacted.current = true
-    setIndex((i + slides.length) % slides.length)
-  }
-
-  if (slides.length === 0) return null
-
-  if (variant === 'split') {
-    return (
-      <section data-testid={TID.hero} className="grid gap-px sm:grid-cols-2">
-        {slides.slice(0, 2).map((slide, i) => (
-          <Link
-            key={i}
-            to={slide.href ?? '/catalog'}
-            className="group relative block h-[42vh] min-h-[320px] overflow-hidden"
-          >
-            <SmoothImage
-              src={slideImage(slide, 900, 700)}
-              alt={slide.title}
-              className="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
-            />
-            <div className="absolute inset-0 flex flex-col items-center justify-center bg-gradient-to-t from-black/65 via-black/25 to-black/10 p-6 text-center text-white">
-              <h2
-                className="sf-heading animate-fade-up text-3xl font-bold uppercase tracking-wide drop-shadow-md sm:text-4xl"
-                style={{ animationDelay: `${i * 150}ms` }}
-              >
-                {slide.title}
-              </h2>
-              {slide.subtitle && (
-                <p className="animate-fade-up mt-2 max-w-sm drop-shadow" style={{ animationDelay: `${i * 150 + 120}ms` }}>
-                  {slide.subtitle}
-                </p>
-              )}
-              <span className="mt-4 inline-block border-b-2 border-white/0 pb-0.5 text-sm font-semibold uppercase tracking-wider opacity-0 transition-all duration-300 group-hover:border-white group-hover:opacity-100">
-                Explorar →
-              </span>
-            </div>
-          </Link>
-        ))}
-      </section>
-    )
-  }
-
-  const active = slides[Math.min(index, slides.length - 1)]!
-
-  return (
-    <section data-testid={TID.hero} className={`relative w-full overflow-hidden ${hClass}`}>
-      {/* stacked slides, crossfade + Ken Burns on the active one */}
-      {slides.map((slide, i) => (
-        <img
-          key={i}
-          src={slideImage(slide)}
-          alt={slide.title}
-          aria-hidden={i !== index}
-          loading={i === 0 ? 'eager' : 'lazy'}
-          decoding="async"
-          onLoad={() => setLoadedSlides((current) => ({ ...current, [i]: true }))}
-          style={revealStyle(Boolean(loadedSlides[i]))}
-          className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ${
-            i === index && (!revealImages || loadedSlides[i]) ? 'animate-kenburns opacity-100' : 'opacity-0'
-          }`}
-        />
-      ))}
-      <div
-        className={`absolute inset-0 flex items-end p-6 sm:p-12 ${
-          active.boxed ? '' : 'bg-gradient-to-t from-black/60 via-black/20 to-transparent'
-        }`}
-      >
-        <div className="mx-auto w-full max-w-7xl">
-          <div className="max-w-xl">
-            <SlideCopy key={index} slide={active} active />
-          </div>
-        </div>
-      </div>
-
-      {variant === 'slider' && slides.length > 1 && (
-        <>
-          <button
-            type="button"
-            aria-label="Slide anterior"
-            data-testid={TID.heroPrev}
-            onClick={() => goTo(index - 1)}
-            className="absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-white/85 p-2.5 shadow transition-transform hover:scale-110 hover:bg-white"
-          >
-            <ChevronLeft className="h-5 w-5 text-gray-900" />
-          </button>
-          <button
-            type="button"
-            aria-label="Próximo slide"
-            data-testid={TID.heroNext}
-            onClick={() => goTo(index + 1)}
-            className="absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-white/85 p-2.5 shadow transition-transform hover:scale-110 hover:bg-white"
-          >
-            <ChevronRight className="h-5 w-5 text-gray-900" />
-          </button>
-          <div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-2">
-            {slides.map((_, i) => (
-              <button
-                key={i}
-                type="button"
-                aria-label={`Ir para o slide ${i + 1}`}
-                onClick={() => goTo(i)}
-                className={`h-2 rounded-full transition-all duration-300 ${i === index ? 'w-7 bg-white' : 'w-2 bg-white/60 hover:bg-white/80'}`}
-              />
-            ))}
-          </div>
-        </>
-      )}
-    </section>
-  )
-}

package/src/components/sections/MediaCarousel.tsx

@@ -1,141 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
-import { Link } from '../../router'
-import { TID } from '../../testids'
-import { prefersReducedMotion } from '../../motion'
-import type { MediaCarouselItem } from '../../sections'
-import { useStorefrontConfig } from '../../config'
-
-export interface MediaCarouselProps {
-  items: MediaCarouselItem[]
-  height?: 'medium' | 'tall' | 'screen'
-  autoplayMs?: number
-  overlay?: 'dark' | 'soft' | 'none'
-  className?: string
-}
-
-const heightClass = {
-  medium: 'h-[58vh] min-h-[420px]',
-  tall: 'h-[74vh] min-h-[520px]',
-  screen: 'min-h-[calc(100vh-64px)]',
-}
-
-const alignClass = {
-  start: 'items-start text-left',
-  center: 'items-center text-center',
-  end: 'items-end text-right',
-}
-
-export function MediaCarousel({
-  items,
-  height = 'tall',
-  autoplayMs = 7000,
-  overlay = 'dark',
-  className = '',
-}: MediaCarouselProps) {
-  const [index, setIndex] = useState(0)
-  const [loadedItems, setLoadedItems] = useState<Record<number, boolean>>({})
-  const config = useStorefrontConfig()
-  const interacted = useRef(false)
-  const revealImages = config.imageLoading.mode !== 'none'
-  const revealStyle = (loaded: boolean): React.CSSProperties | undefined =>
-    revealImages
-      ? {
-          filter: config.imageLoading.blur && !loaded ? 'blur(10px)' : 'blur(0px)',
-          transition: `opacity 700ms ease, filter ${config.imageLoading.durationMs}ms ${config.imageLoading.easing}`,
-        }
-      : undefined
-
-  useEffect(() => {
-    if (items.length < 2 || autoplayMs <= 0 || prefersReducedMotion()) return
-    const timer = setInterval(() => {
-      if (!interacted.current) setIndex((i) => (i + 1) % items.length)
-    }, autoplayMs)
-    return () => clearInterval(timer)
-  }, [autoplayMs, items.length])
-
-  if (items.length === 0) return null
-
-  const active = items[Math.min(index, items.length - 1)]!
-  const goTo = (next: number) => {
-    interacted.current = true
-    setIndex((next + items.length) % items.length)
-  }
-  const overlayClass =
-    overlay === 'dark'
-      ? 'bg-gradient-to-r from-black/70 via-black/25 to-black/25'
-      : overlay === 'soft'
-        ? 'bg-gradient-to-t from-black/45 via-black/10 to-transparent'
-        : ''
-
-  return (
-    <section data-testid={TID.mediaCarousel} className={`relative isolate overflow-hidden ${heightClass[height]} ${className}`}>
-      {items.map((item, i) => (
-        <img
-          key={`${item.title}-${i}`}
-          src={item.image}
-          alt={item.imageAlt ?? item.title}
-          aria-hidden={i !== index}
-          loading={i === 0 ? 'eager' : 'lazy'}
-          decoding="async"
-          onLoad={() => setLoadedItems((current) => ({ ...current, [i]: true }))}
-          style={revealStyle(Boolean(loadedItems[i]))}
-          className={`absolute inset-0 -z-10 h-full w-full object-cover transition-opacity duration-700 ${
-            i === index && (!revealImages || loadedItems[i]) ? 'opacity-100' : 'opacity-0'
-          }`}
-        />
-      ))}
-      <div className={`absolute inset-0 -z-10 ${overlayClass}`} />
-      <div className={`flex h-full px-5 py-16 sm:px-10 lg:px-16 ${alignClass[active.align ?? 'start']}`}>
-        <div className="my-auto max-w-2xl text-white drop-shadow-md">
-          {active.eyebrow && (
-            <p className="mb-4 text-xs font-semibold uppercase tracking-[0.24em] text-white/80">{active.eyebrow}</p>
-          )}
-          <h1 className="sf-heading text-5xl font-normal leading-[0.95] sm:text-7xl lg:text-8xl">{active.title}</h1>
-          {active.subtitle && <p className="mt-5 max-w-xl text-base leading-8 text-white/88 sm:text-lg">{active.subtitle}</p>}
-          {active.cta && (
-            <Link
-              to={active.href ?? '/catalog'}
-              className="mt-8 inline-flex border border-white/75 px-6 py-3 text-xs font-semibold uppercase tracking-[0.18em] text-white transition hover:bg-white hover:text-black"
-            >
-              {active.cta}
-            </Link>
-          )}
-        </div>
-      </div>
-      {items.length > 1 && (
-        <>
-          <button
-            type="button"
-            aria-label="Previous slide"
-            data-testid={TID.mediaCarouselPrev}
-            onClick={() => goTo(index - 1)}
-            className="absolute left-4 top-1/2 inline-flex h-10 w-10 -translate-y-1/2 items-center justify-center border border-white/60 bg-black/20 text-white backdrop-blur transition hover:bg-white hover:text-black"
-          >
-            <ChevronLeft className="h-5 w-5" />
-          </button>
-          <button
-            type="button"
-            aria-label="Next slide"
-            data-testid={TID.mediaCarouselNext}
-            onClick={() => goTo(index + 1)}
-            className="absolute right-4 top-1/2 inline-flex h-10 w-10 -translate-y-1/2 items-center justify-center border border-white/60 bg-black/20 text-white backdrop-blur transition hover:bg-white hover:text-black"
-          >
-            <ChevronRight className="h-5 w-5" />
-          </button>
-          <div className="absolute bottom-5 left-1/2 flex -translate-x-1/2 gap-2">
-            {items.map((item, i) => (
-              <button
-                key={`${item.title}-dot-${i}`}
-                type="button"
-                aria-label={`Go to slide ${i + 1}`}
-                onClick={() => goTo(i)}
-                className={`h-2 rounded-full transition-all ${i === index ? 'w-8 bg-white' : 'w-2 bg-white/55 hover:bg-white'}`}
-              />
-            ))}
-          </div>
-        </>
-      )}
-    </section>
-  )
-}

package/src/components/sections/MiscSections.tsx

@@ -1,158 +0,0 @@
-import React, { useState } from 'react'
-import { getLucideIcon } from '@fayz-ai/ui/icons'
-import { bannerPlaceholder } from '../../sections'
-import { Reveal } from '../../motion'
-import { Link } from '../../router'
-import { TID } from '../../testids'
-import { SmoothImage } from '../SmoothImage'
-
-function Icon({ name, className }: { name: string; className?: string }) {
-  const C = getLucideIcon(name)
-  return C ? <C className={className} /> : null
-}
-
-export function BenefitsRow({ items }: { items: Array<{ icon: string; title: string; text?: string }> }) {
-  return (
-    <section data-testid={TID.benefits} className="border-y bg-card">
-      <div className="mx-auto grid max-w-7xl grid-cols-1 gap-6 px-4 py-9 sm:grid-cols-3 sm:px-6">
-        {items.slice(0, 4).map((item, i) => (
-          <Reveal key={i} delay={i * 120} className="flex items-center justify-center gap-3 text-center sm:text-left">
-            <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-primary/10">
-              <Icon name={item.icon} className="h-6 w-6 text-primary" />
-            </span>
-            <div>
-              <p className="font-semibold">{item.title}</p>
-              {item.text && <p className="text-sm text-muted-foreground">{item.text}</p>}
-            </div>
-          </Reveal>
-        ))}
-      </div>
-    </section>
-  )
-}
-
-export function PromoBanner({
-  title,
-  subtitle,
-  eyebrow,
-  cta,
-  href,
-  image,
-  hue = 160,
-}: {
-  title: string
-  subtitle?: string
-  eyebrow?: string
-  cta?: string
-  href?: string
-  image?: string
-  hue?: number
-}) {
-  return (
-    <section data-testid={TID.promoBanner} className="group relative my-12 overflow-hidden">
-      <SmoothImage
-        src={image ?? bannerPlaceholder(title, hue, hue + 50, 1600, 420)}
-        alt={title}
-        className="h-80 w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
-      />
-      <div className="absolute inset-0 flex flex-col items-center justify-center bg-gradient-to-t from-black/65 via-black/35 to-black/20 p-6 text-center text-white">
-        <Reveal>
-          {eyebrow && (
-            <p className="mb-2 text-xs font-semibold uppercase tracking-[0.25em] text-white/80">{eyebrow}</p>
-          )}
-          <h2 className="sf-heading text-3xl font-bold drop-shadow sm:text-5xl">{title}</h2>
-          {subtitle && <p className="mt-3 max-w-lg text-white/90">{subtitle}</p>}
-          {cta && (
-            <Link
-              to={href ?? '/catalog'}
-              className="sf-cta mt-6 inline-block bg-white px-8 py-3 font-semibold text-gray-900 shadow-lg transition-all hover:-translate-y-0.5 hover:shadow-xl"
-              style={{ borderRadius: 'var(--sf-radius-button)' }}
-            >
-              {cta}
-            </Link>
-          )}
-        </Reveal>
-      </div>
-    </section>
-  )
-}
-
-export function ManifestoBlock({ title, text }: { title?: string; text: string }) {
-  return (
-    <section data-testid={TID.manifesto} className="mx-auto max-w-3xl px-4 py-14 text-center sm:px-6">
-      {title && <h2 className="sf-heading mb-5 text-2xl font-bold">{title}</h2>}
-      <p className="sf-heading text-xl leading-relaxed text-muted-foreground sm:text-2xl">{text}</p>
-    </section>
-  )
-}
-
-export function Testimonials({ title, items }: { title?: string; items: Array<{ quote: string; author: string }> }) {
-  return (
-    <section data-testid={TID.testimonials} className="bg-muted/50 py-14">
-      <div className="mx-auto max-w-7xl px-4 sm:px-6">
-        {title && (
-          <Reveal>
-            <h2 className="sf-heading mb-10 text-center text-3xl font-bold">{title}</h2>
-          </Reveal>
-        )}
-        <div className="grid gap-6 md:grid-cols-3">
-          {items.slice(0, 3).map((t, i) => (
-            <Reveal key={i} delay={i * 130}>
-              <figure
-                className="h-full bg-card p-7 shadow-sm transition-shadow hover:shadow-md"
-                style={{ borderRadius: 'var(--sf-radius-card)' }}
-              >
-                <div className="mb-3 text-primary" aria-hidden>★★★★★</div>
-                <blockquote className="leading-relaxed">“{t.quote}”</blockquote>
-                <figcaption className="mt-4 text-sm font-semibold text-muted-foreground">— {t.author}</figcaption>
-              </figure>
-            </Reveal>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export function NewsletterBand({ title, subtitle }: { title?: string; subtitle?: string }) {
-  const [email, setEmail] = useState('')
-  const [done, setDone] = useState(false)
-  return (
-    <section data-testid={TID.newsletter} className="bg-primary py-16 text-primary-foreground">
-      <Reveal className="mx-auto max-w-xl px-4 text-center sm:px-6">
-        <h2 className="sf-heading text-3xl font-bold">{title ?? 'Receba nossas novidades'}</h2>
-        {subtitle && <p className="mt-2 opacity-90">{subtitle}</p>}
-        {done ? (
-          <p data-testid={TID.newsletterDone} className="mt-6 font-medium">Inscrição confirmada! 🎉</p>
-        ) : (
-          <form
-            className="mt-6 flex gap-2"
-            onSubmit={(e) => {
-              e.preventDefault()
-              if (email.trim()) setDone(true)
-            }}
-          >
-            <input
-              data-testid={TID.newsletterEmail}
-              type="email"
-              required
-              placeholder="Seu e-mail"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              className="flex-1 border-0 bg-white/95 px-4 py-3 text-sm text-gray-900 outline-none"
-              style={{ borderRadius: 'var(--sf-radius-input)' }}
-            />
-            <button
-              type="submit"
-              data-testid={TID.newsletterSubmit}
-              className="sf-cta bg-foreground px-6 py-3 text-sm font-semibold text-background"
-              style={{ borderRadius: 'var(--sf-radius-button)' }}
-            >
-              Assinar
-            </button>
-          </form>
-        )}
-      </Reveal>
-    </section>
-  )
-}

package/src/components/sections/ProductRail.tsx

@@ -1,81 +0,0 @@
-import React, { useMemo } from 'react'
-import { useProducts } from '../../hooks/useProducts'
-import { getStorefrontComponents, useStorefrontConfig } from '../../config'
-import { useStorefrontActions } from '../../hooks/useStorefront'
-import { ProductCard } from '../ProductCard'
-import { Reveal } from '../../motion'
-import { Link } from '../../router'
-import { TID } from '../../testids'
-
-export function ProductRail({
-  title,
-  subtitle,
-  eyebrow,
-  filter = 'all',
-  limit = 4,
-}: {
-  title: string
-  subtitle?: string
-  eyebrow?: string
-  filter?: 'sale' | 'new' | 'all'
-  limit?: number
-}) {
-  const config = useStorefrontConfig()
-  const actions = useStorefrontActions()
-  const components = getStorefrontComponents(config)
-  const ProductCardComponent = components.ProductCard ?? ProductCard
-  const { products, loading } = useProducts(
-    filter === 'new'
-      ? { status: 'active', orderBy: 'created_at', order: 'desc' }
-      : { status: 'active' },
-  )
-
-  const visible = useMemo(() => {
-    let list = products
-    if (filter === 'sale') list = list.filter((p) => p.compareAtPrice != null && p.compareAtPrice > p.price)
-    return list.slice(0, limit)
-  }, [products, filter, limit])
-
-  if (!loading && visible.length === 0) return null
-
-  return (
-    <section data-testid={TID.productRail} className="mx-auto max-w-7xl px-4 py-14 sm:px-6">
-      <Reveal className="mb-10 text-center">
-        {eyebrow && (
-          <p className="mb-2 text-xs font-semibold uppercase tracking-[0.2em] text-primary">{eyebrow}</p>
-        )}
-        <h2 className="sf-heading text-3xl font-bold tracking-tight">{title}</h2>
-        {subtitle && <p className="mt-2 text-muted-foreground">{subtitle}</p>}
-      </Reveal>
-      {loading ? (
-        <div className="grid grid-cols-2 gap-5 md:grid-cols-4">
-          {Array.from({ length: limit }, (_, i) => (
-            <div key={i} className="aspect-[3/4] animate-pulse bg-muted" style={{ borderRadius: 'var(--sf-radius-card)' }} />
-          ))}
-        </div>
-      ) : (
-        <div className="grid grid-cols-2 gap-5 md:grid-cols-4">
-          {visible.map((p, i) => (
-            <Reveal key={p.id} delay={i * 90}>
-              <ProductCardComponent
-                product={p}
-                config={config}
-                commerceMode={config.commerceMode}
-                actions={actions}
-              />
-            </Reveal>
-          ))}
-        </div>
-      )}
-      <Reveal className="mt-10 text-center" delay={200}>
-        <Link
-          to={config.catalogPath}
-          className="sf-cta inline-block border border-foreground/30 px-7 py-2.5 text-sm font-semibold transition-all hover:-translate-y-0.5 hover:bg-foreground hover:text-background hover:shadow"
-          style={{ borderRadius: 'var(--sf-radius-button)' }}
-        >
-          Ver tudo
-        </Link>
-      </Reveal>
-    </section>
-  )
-}