@fayz-ai/storefront 0.2.0

package/src/components/StorefrontHeader.tsx

@@ -0,0 +1,342 @@
+import React, { useState } from 'react'
+import { CreditCard, LogOut, Mail, Package, Phone, Search, ShoppingBag, User, UserCircle, X } from 'lucide-react'
+import { signOutCustomer } from '../auth'
+import { useCartStore, selectCount } from '../stores/cart.store'
+import { useCatalogStore } from '../stores/catalog.store'
+import { useSessionStore } from '../stores/session.store'
+import { useCategories } from '../hooks/useCategories'
+import { useStorefrontConfig } from '../config'
+import { useScrolled, usePopOnChange } from '../motion'
+import { Link, navigateTo, useHashPath } from '../router'
+import { TID } from '../testids'
+
+// Header tokens come from the theme (--sf-header-bg/fg) so dark headers
+// (Brasília pattern) work without component changes. Dividers derive from the
+// header FOREGROUND (not the page --border token, which is light and shows as
+// white lines on dark headers).
+const headerStyle: React.CSSProperties = {
+  backgroundColor: 'hsl(var(--sf-header-bg, var(--background)))',
+  color: 'hsl(var(--sf-header-fg, var(--foreground)))',
+  borderColor: 'hsl(var(--sf-header-fg, var(--foreground)) / 0.14)',
+}
+
+const headerDivider: React.CSSProperties = {
+  borderColor: 'hsl(var(--sf-header-fg, var(--foreground)) / 0.14)',
+}
+
+const ANNOUNCEMENT_KEY = 'fayz.storefront.announcement.dismissed'
+
+function AnnouncementBar() {
+  const config = useStorefrontConfig()
+  const [dismissed, setDismissed] = useState(() => {
+    try {
+      return localStorage.getItem(ANNOUNCEMENT_KEY) === config.announcement
+    } catch {
+      return false
+    }
+  })
+  if (!config.announcement || dismissed) return null
+
+  const dismiss = () => {
+    setDismissed(true)
+    try {
+      localStorage.setItem(ANNOUNCEMENT_KEY, config.announcement ?? '')
+    } catch {
+      /* storage unavailable — dismiss for this session only */
+    }
+  }
+
+  return (
+    <div
+      data-testid={TID.announcementBar}
+      className="relative px-4 py-2 text-center text-xs font-semibold tracking-wide"
+      style={{
+        backgroundColor: 'hsl(var(--sf-announcement-bg, var(--primary)))',
+        color: 'hsl(var(--sf-announcement-fg, var(--primary-foreground)))',
+      }}
+    >
+      {config.announcement}
+      <button
+        type="button"
+        aria-label="Fechar aviso"
+        onClick={dismiss}
+        className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full p-1 opacity-70 transition-opacity hover:opacity-100"
+      >
+        <X className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  )
+}
+
+/** Slim utility strip (Flex pattern): contact on the left, social on the right. */
+function UtilityBar() {
+  const config = useStorefrontConfig()
+  const contact = config.footer?.contact
+  const social = config.footer?.social
+  if (!contact?.phone && !contact?.email && !social?.length) return null
+  return (
+    <div className="hidden border-b text-xs opacity-80 md:block" style={headerDivider}>
+      <div className="mx-auto flex h-8 max-w-7xl items-center gap-5 px-4 sm:px-6">
+        {contact?.phone && (
+          <span className="inline-flex items-center gap-1.5">
+            <Phone className="h-3 w-3" /> {contact.phone}
+          </span>
+        )}
+        {contact?.email && (
+          <span className="inline-flex items-center gap-1.5">
+            <Mail className="h-3 w-3" /> {contact.email}
+          </span>
+        )}
+        <span className="ml-auto flex items-center gap-4">
+          {social?.map((s) => (
+            <a key={s.href} href={s.href} target="_blank" rel="noreferrer" className="hover:underline">
+              {s.label}
+            </a>
+          ))}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+function SearchInput({ className }: { className?: string }) {
+  const config = useStorefrontConfig()
+  const search = useCatalogStore((s) => s.search)
+  const setSearch = useCatalogStore((s) => s.setSearch)
+  const path = useHashPath()
+
+  return (
+    <div className={`relative ${className ?? ''}`}>
+      <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 opacity-60" />
+      <input
+        data-testid={TID.headerSearch}
+        type="search"
+        placeholder="Buscar produtos..."
+        value={search}
+        onChange={(e) => {
+          setSearch(e.target.value)
+          if (path !== config.catalogPath) navigateTo(config.catalogPath)
+        }}
+        className="w-full border bg-white/10 py-2 pl-9 pr-4 text-sm outline-none transition-colors placeholder:opacity-60 focus:border-primary focus:bg-white focus:text-gray-900"
+        style={{
+          borderRadius: 'var(--sf-radius-input)',
+          borderColor: 'hsl(var(--sf-header-fg, var(--foreground)) / 0.25)',
+        }}
+      />
+    </div>
+  )
+}
+
+function HeaderActions() {
+  const config = useStorefrontConfig()
+  const count = useCartStore(selectCount)
+  const openDrawer = useCartStore((s) => s.openDrawer)
+  const session = useSessionStore()
+  const [accountOpen, setAccountOpen] = useState(false)
+  const pop = usePopOnChange(count)
+  const firstName = session.name?.split(/\s+/)[0]
+  const initial = (firstName ?? session.email ?? 'C').slice(0, 1).toUpperCase()
+  return (
+    <nav className="flex items-center gap-1">
+      {config.features.accounts && (
+        <div className="relative">
+          {session.email ? (
+            <button
+              type="button"
+              data-testid={TID.accountLink}
+              aria-label="Abrir menu da conta"
+              aria-expanded={accountOpen}
+              onClick={() => setAccountOpen((open) => !open)}
+              className="flex items-center gap-1.5 rounded-full p-1.5 transition-opacity hover:opacity-80"
+            >
+              <span className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-sm font-bold text-primary-foreground">
+                {initial}
+              </span>
+              {firstName && (
+                <span data-testid={TID.accountName} className="hidden max-w-24 truncate text-sm font-medium lg:inline">
+                  {firstName}
+                </span>
+              )}
+            </button>
+          ) : (
+            <Link
+              to="/account"
+              data-testid={TID.accountLink}
+              aria-label="Minhas compras"
+              className="flex items-center gap-1.5 rounded-full p-2.5 transition-opacity hover:opacity-70"
+            >
+              <User className="h-5 w-5" />
+            </Link>
+          )}
+          {accountOpen && session.email && (
+            <div
+              data-testid={TID.accountDropdown}
+              className="absolute right-0 top-full z-50 mt-3 w-72 overflow-hidden rounded-xl border bg-background text-foreground shadow-xl"
+            >
+              <div className="border-b p-4">
+                <p className="font-semibold">{session.name || firstName || 'Cliente'}</p>
+                <p className="truncate text-sm text-muted-foreground">{session.email}</p>
+              </div>
+              <div className="p-2">
+                <Link to="/account" className="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-semibold hover:bg-muted">
+                  <UserCircle className="h-4 w-4" />
+                  Perfil
+                </Link>
+                <Link to="/account" className="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-semibold hover:bg-muted">
+                  <Package className="h-4 w-4" />
+                  Meus pedidos
+                </Link>
+                <Link to="/account" className="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-semibold hover:bg-muted">
+                  <CreditCard className="h-4 w-4" />
+                  Pagamentos
+                </Link>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setAccountOpen(false)
+                    void signOutCustomer()
+                  }}
+                  className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm font-semibold hover:bg-muted"
+                >
+                  <LogOut className="h-4 w-4" />
+                  Sair
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+      <button
+        type="button"
+        data-testid={TID.cartButton}
+        aria-label="Carrinho"
+        onClick={openDrawer}
+        className="relative rounded-full p-2.5 transition-opacity hover:opacity-70"
+      >
+        <ShoppingBag className="h-5 w-5" />
+        {count > 0 && (
+          <span
+            data-testid={TID.cartCount}
+            className={`absolute -right-0.5 -top-0.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-xs font-semibold text-primary-foreground ${
+              pop ? 'animate-badge-pop' : ''
+            }`}
+          >
+            {count}
+          </span>
+        )}
+      </button>
+    </nav>
+  )
+}
+
+function NavLinks({ className }: { className?: string }) {
+  const config = useStorefrontConfig()
+  const { categories } = useCategories()
+  const setCategoryId = useCatalogStore((s) => s.setCategoryId)
+
+  const goCategory = (categoryId: string) => {
+    useCatalogStore.getState().reset()
+    setCategoryId(categoryId)
+    navigateTo(config.catalogPath)
+  }
+
+  return (
+    <nav className={`flex items-center gap-6 ${className ?? ''}`}>
+      {config.nav.map((link) => (
+        <Link
+          key={link.to}
+          to={link.to}
+          data-testid={TID.navLink(link.label)}
+          className="sf-nav-link text-sm font-medium transition-opacity hover:opacity-70"
+        >
+          {link.label}
+        </Link>
+      ))}
+      {categories.slice(0, 6).map((c) => (
+        <button
+          key={c.id}
+          type="button"
+          data-testid={TID.navCategory(c.slug)}
+          onClick={() => goCategory(c.id)}
+          className="sf-nav-link group relative hidden text-sm font-medium transition-opacity hover:opacity-80 lg:inline"
+        >
+          {c.name}
+          <span className="absolute -bottom-1 left-0 h-0.5 w-0 bg-primary transition-all duration-300 group-hover:w-full" />
+        </button>
+      ))}
+    </nav>
+  )
+}
+
+export function StorefrontHeader() {
+  const config = useStorefrontConfig()
+  const variant = config.theme?.header?.variant ?? 'classic'
+  const scrolled = useScrolled()
+  const logo = (
+    <Link to="/" className="sf-heading shrink-0 text-xl font-bold tracking-tight">
+      {config.logo ?? config.name}
+    </Link>
+  )
+
+  return (
+    <header
+      className={`sticky top-0 z-40 border-b transition-shadow duration-300 ${scrolled ? 'shadow-md' : ''}`}
+      style={headerStyle}
+    >
+      <AnnouncementBar />
+      <UtilityBar />
+
+      {variant === 'centered' ? (
+        // Rio/Flex pattern: centered logo row, nav row below
+        <>
+          <div className="mx-auto grid h-16 max-w-7xl grid-cols-[1fr_auto_1fr] items-center px-4 sm:px-6">
+            <SearchInput className="hidden w-full max-w-xs sm:block" />
+            <div className="text-center">{logo}</div>
+            <div className="justify-self-end">
+              <HeaderActions />
+            </div>
+          </div>
+          <div className="hidden justify-center border-t py-2.5 sm:flex" style={headerDivider}>
+            <NavLinks />
+          </div>
+        </>
+      ) : variant === 'search' ? (
+        // Brasília pattern: prominent search left, logo center, actions right; nav row below
+        <>
+          <div className="mx-auto grid h-16 max-w-7xl grid-cols-[1fr_auto_1fr] items-center gap-6 px-4 sm:px-6">
+            <SearchInput className="hidden w-full max-w-sm sm:block" />
+            <div className="text-center">{logo}</div>
+            <div className="justify-self-end">
+              <HeaderActions />
+            </div>
+          </div>
+          <div className="hidden border-t sm:block" style={headerDivider}>
+            <div className="mx-auto max-w-7xl px-4 py-2.5 sm:px-6">
+              <NavLinks />
+            </div>
+          </div>
+        </>
+      ) : variant === 'minimal' ? (
+        // Uyuni pattern: nav left, centered logo, actions right — single compact row
+        <div className="mx-auto grid h-16 max-w-7xl grid-cols-[1fr_auto_1fr] items-center px-4 sm:px-6">
+          <div className="flex items-center gap-5">
+            <NavLinks className="hidden sm:flex" />
+          </div>
+          <div className="text-center">{logo}</div>
+          <div className="flex items-center justify-end gap-3">
+            <SearchInput className="hidden w-44 lg:block" />
+            <HeaderActions />
+          </div>
+        </div>
+      ) : (
+        // classic: logo left, search center-right, actions right (original layout)
+        <div className="mx-auto flex h-16 max-w-7xl items-center gap-6 px-4 sm:px-6">
+          {logo}
+          <NavLinks className="hidden md:flex" />
+          <SearchInput className="ml-auto hidden w-full max-w-sm sm:block" />
+          <HeaderActions />
+        </div>
+      )}
+    </header>
+  )
+}

package/src/components/Toaster.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react'
+import { AlertCircle, Check, Info, X } from 'lucide-react'
+import { useToastStore, type Toast } from '../stores/toast.store'
+
+const ICON: Record<Toast['variant'], React.ComponentType<{ className?: string }>> = {
+  success: Check,
+  error: AlertCircle,
+  info: Info,
+}
+
+const ACCENT: Record<Toast['variant'], string> = {
+  success: 'bg-emerald-500/10 text-emerald-600',
+  error: 'bg-destructive/10 text-destructive',
+  info: 'bg-primary/10 text-primary',
+}
+
+function ToastCard({ toast }: { toast: Toast }) {
+  const dismiss = useToastStore((s) => s.dismiss)
+  const Icon = ICON[toast.variant]
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => dismiss(toast.id), toast.durationMs)
+    return () => window.clearTimeout(timer)
+  }, [toast.id, toast.durationMs, dismiss])
+
+  return (
+    <div
+      role="status"
+      className="pointer-events-auto flex w-80 max-w-[calc(100vw-2rem)] animate-slide-in-from-right items-start gap-3 rounded-xl border bg-card p-3.5 shadow-lg"
+    >
+      <span className={`grid h-8 w-8 shrink-0 place-items-center rounded-full ${ACCENT[toast.variant]}`}>
+        <Icon className="h-4 w-4" />
+      </span>
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-semibold leading-tight">{toast.title}</p>
+        {toast.description && <p className="mt-0.5 text-xs text-muted-foreground">{toast.description}</p>}
+      </div>
+      <button
+        type="button"
+        aria-label="Fechar"
+        onClick={() => dismiss(toast.id)}
+        className="text-muted-foreground transition-colors hover:text-foreground"
+      >
+        <X className="h-4 w-4" />
+      </button>
+    </div>
+  )
+}
+
+export function Toaster() {
+  const toasts = useToastStore((s) => s.toasts)
+  if (toasts.length === 0) return null
+  return (
+    <div className="pointer-events-none fixed bottom-4 right-4 z-[70] flex flex-col gap-2">
+      {toasts.map((t) => (
+        <ToastCard key={t.id} toast={t} />
+      ))}
+    </div>
+  )
+}

package/src/components/sections/CategoryShowcase.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import { useCategories } from '../../hooks/useCategories'
+import { useCatalogStore } from '../../stores/catalog.store'
+import { useStorefrontConfig } from '../../config'
+import { bannerPlaceholder } from '../../sections'
+import { Reveal } from '../../motion'
+import { navigateTo } from '../../router'
+import { TID } from '../../testids'
+
+export function CategoryShowcase({ style, title }: { style: 'bubbles' | 'tiles'; title?: string }) {
+  const { categories } = useCategories()
+  const config = useStorefrontConfig()
+  const setCategoryId = useCatalogStore((s) => s.setCategoryId)
+
+  if (categories.length === 0) return null
+
+  const go = (categoryId: string) => {
+    useCatalogStore.getState().reset()
+    setCategoryId(categoryId)
+    navigateTo(config.catalogPath)
+  }
+
+  if (style === 'bubbles') {
+    return (
+      <section data-testid={TID.categoryShowcase} className="mx-auto max-w-7xl px-4 py-12 sm:px-6">
+        {title && (
+          <Reveal>
+            <h2 className="sf-heading mb-8 text-center text-3xl font-bold">{title}</h2>
+          </Reveal>
+        )}
+        <div className="flex flex-wrap items-start justify-center gap-8">
+          {categories.map((c, i) => (
+            <Reveal key={c.id} delay={i * 80}>
+              <button type="button" onClick={() => go(c.id)} className="group flex w-28 flex-col items-center gap-3">
+                <span className="block h-24 w-24 overflow-hidden rounded-full border-2 border-transparent shadow-sm transition-all duration-300 group-hover:scale-105 group-hover:border-primary group-hover:shadow-md">
+                  <img
+                    src={c.imageUrl ?? bannerPlaceholder(c.name, 30 + i * 70, 70 + i * 70, 200, 200)}
+                    alt={c.name}
+                    className="h-full w-full object-cover"
+                  />
+                </span>
+                <span className="text-center text-xs font-medium leading-tight">{c.name}</span>
+              </button>
+            </Reveal>
+          ))}
+        </div>
+      </section>
+    )
+  }
+
+  return (
+    <section data-testid={TID.categoryShowcase} className="mx-auto max-w-7xl px-4 py-12 sm:px-6">
+      {title && (
+        <Reveal>
+          <h2 className="sf-heading mb-8 text-center text-3xl font-bold">{title}</h2>
+        </Reveal>
+      )}
+      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+        {categories.map((c, i) => (
+          <Reveal key={c.id} delay={i * 90}>
+            <button type="button" onClick={() => go(c.id)} className="group relative block aspect-[4/5] w-full overflow-hidden" style={{ borderRadius: 'var(--sf-radius-card)' }}>
+              <img
+                src={c.imageUrl ?? bannerPlaceholder(c.name, 30 + i * 70, 70 + i * 70, 480, 600)}
+                alt={c.name}
+                className="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-110"
+              />
+              <span className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent p-5 pt-12 text-left">
+                <span className="sf-heading block text-lg font-semibold text-white">{c.name}</span>
+                <span className="mt-0.5 block text-xs text-white/80 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                  Explorar →
+                </span>
+              </span>
+            </button>
+          </Reveal>
+        ))}
+      </div>
+    </section>
+  )
+}

package/src/components/sections/HeroSection.tsx

@@ -0,0 +1,177 @@
+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 { prefersReducedMotion } from '../../motion'
+import { Link } from '../../router'
+import { TID } from '../../testids'
+
+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 interacted = useRef(false)
+  const hClass = height === 'tall' ? 'h-[72vh] min-h-[440px]' : 'h-[48vh] min-h-[340px]'
+
+  // 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"
+          >
+            <img
+              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}
+          className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ${
+            i === index ? '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>
+  )
+}