/* MeuLook — Reusable UI Components */ /* ---- LOGO ICON (SVG) ---- */ const MeuLookIcon = ({ size = 40 }) => ( {/* Mirror/looking glass icon */} {/* Sparkle */} ); const MeuLookLogo = ({ size = 40 }) => (
MeuLook
); /* ---- SPARKLE DECORATION ---- */ const Sparkle = ({ style, size = 16, color = 'var(--pink)' }) => ( ); /* ---- GRADIENT BUTTON ---- */ const GradientButton = ({ children, href, onClick, size = 'md', variant = 'primary', style: extraStyle, className = '' }) => { const isMobile = typeof window !== 'undefined' && window.innerWidth <= 480; const sizes = { sm: { padding: '12px 24px', fontSize: '.88rem' }, md: { padding: isMobile ? '14px 24px' : '16px 32px', fontSize: isMobile ? '.92rem' : '1rem' }, lg: { padding: isMobile ? '16px 24px' : '20px 40px', fontSize: isMobile ? '.95rem' : '1.1rem' } }; const s = sizes[size] || sizes.md; const base = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10, background: variant === 'primary' ? 'var(--gradient)' : 'transparent', color: variant === 'primary' ? '#fff' : 'var(--pink)', border: variant === 'outline' ? '2px solid var(--pink)' : 'none', fontFamily: 'var(--font-display)', fontWeight: 800, letterSpacing: '.02em', textTransform: 'uppercase', textDecoration: 'none', borderRadius: 'var(--radius-pill)', cursor: 'pointer', position: 'relative', overflow: 'hidden', transition: 'var(--transition)', boxShadow: variant === 'primary' ? 'var(--shadow-cta)' : 'none', ...s, ...extraStyle }; const Tag = href ? 'a' : 'button'; const props = href ? { href, target: href.startsWith('http') ? '_blank' : undefined, rel: href.startsWith('http') ? 'noopener' : undefined } : { onClick, type: 'button' }; return {children}; }; /* ---- PILL TAG ---- */ const PillTag = ({ children, icon, style: extra }) => (
{icon && {icon}} {children}
); /* ---- SECTION HEADER ---- */ const SectionHeader = ({ tag, tagIcon, title, subtitle, light = true, align = 'center' }) => (
{tag && {tag}}

{subtitle &&

{subtitle}

}
); /* ---- FLOATING ORBS ---- */ const FloatingOrbs = ({ colors, count = 4 }) => { const orbs = React.useMemo(() => { return Array.from({ length: count }, (_, i) => ({ color: colors[i % colors.length], size: 80 + Math.random() * 200, x: Math.random() * 100, y: Math.random() * 100, delay: Math.random() * 4, duration: 5 + Math.random() * 4 })); }, [count]); return (
{orbs.map((o, i) => (
))}
); }; /* ---- SCROLL REVEAL HOOK ---- */ const useScrollReveal = () => { React.useEffect(() => { const els = document.querySelectorAll('.reveal'); const io = new IntersectionObserver(entries => { entries.forEach(en => { if (en.isIntersecting) { en.target.classList.add('visible'); io.unobserve(en.target); } }); }, { threshold: 0.1 }); els.forEach(el => io.observe(el)); return () => io.disconnect(); }, []); }; /* ---- DRAWN LINE REVEAL ---- */ const useDrawnLines = () => { React.useEffect(() => { const els = document.querySelectorAll('.drawn-line'); const io = new IntersectionObserver(entries => { entries.forEach(en => { if (en.isIntersecting) { en.target.classList.add('visible'); io.unobserve(en.target); } }); }, { threshold: 0.3 }); els.forEach(el => io.observe(el)); return () => io.disconnect(); }, []); }; /* ---- ICON COMPONENTS ---- */ const Icon = ({ name, size = 24, stroke = 'currentColor', fill = 'none', strokeWidth = 2 }) => { const icons = { zap: <>, shield: <>, palette: <>, lock: <>, star: <>, heart: <>, check: <>, x: <>, arrowDown: <>, upload: <>, camera: <>, mail: <>, instagram: <>, shirt: <>, scissors: <>, gem: <>, sun: <>, chat: <>, ban: <>, book: <>, download: <>, image: <>, sparkles: <>, }; return ( {icons[name]} ); }; /* ---- TRUST ITEM ---- */ const TrustItem = ({ icon, children, light = false }) => (
{children}
); /* ---- FAQ ITEM ---- */ const FAQItem = ({ question, answer }) => { const [open, setOpen] = React.useState(false); return (
{answer}
); }; /* ---- TESTIMONIAL CARD ---- */ const TestimonialCard = ({ name, location, quote, delay = 0 }) => (
★★★★★
{quote}
{name.charAt(0)}
{name}
{location}
); /* ---- PALETTE DEMO BAR ---- */ const PaletteBar = () => { const colors = [ { bg: '#FFB800', name: 'Dourado' }, { bg: '#FF6B6B', name: 'Coral' }, { bg: '#FF2D78', name: 'Pink' }, { bg: '#8B5CF6', name: 'Lavanda' }, { bg: '#06D6A0', name: 'Menta' }, { bg: '#3B82F6', name: 'Azul' }, { bg: '#F97316', name: 'Pêssego' }, { bg: '#EC4899', name: 'Rosa' } ]; return (
{colors.map((c, i) => (
{c.name}
))}
); }; /* ---- SEASONS BAR ---- */ const SeasonsBar = () => (
Primavera
Verão
Outono
Inverno
); /* Export all to window */ Object.assign(window, { MeuLookIcon, MeuLookLogo, Sparkle, GradientButton, PillTag, SectionHeader, FloatingOrbs, useScrollReveal, useDrawnLines, Icon, TrustItem, FAQItem, TestimonialCard, PaletteBar, SeasonsBar });