[V0_FILE]jpg:file="public/product.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/product-0XA35zalPINQaVxRPEmzK3mFylOxnw.jpg" [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "express": "5.2.1", "cors": "2.8.6" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/layout.tsx" import React from "react" import type { Metadata } from 'next' import { Montserrat, Great_Vibes, Playfair_Display, Inter } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const montserrat = Montserrat({ subsets: ["latin"], variable: '--font-sans' }); const greatVibes = Great_Vibes({ weight: "400", subsets: ["latin"], variable: '--font-serif' }); export const metadata: Metadata = { title: 'FRAN by Franciny Ehlke | Loja Oficial', description: 'Loja oficial FRAN by Franciny Ehlke. Maquiagem premium com qualidade profissional.', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.15 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.15 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.15 0 0); --primary: oklch(0.15 0 0); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.15 0 0); --muted: oklch(0.96 0 0); --muted-foreground: oklch(0.45 0 0); --accent: oklch(0.45 0.12 145); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.9 0 0); --input: oklch(0.95 0 0); --ring: oklch(0.15 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Montserrat', 'Montserrat Fallback', system-ui, sans-serif; --font-serif: 'Great Vibes', 'Great Vibes Fallback', cursive; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/benefits-section.tsx" import { Droplets, Sparkles, Shield } from "lucide-react"; const benefits = [ { icon: Droplets, title: "Hidratação Profunda", description: "Penetra nas camadas mais profundas da pele, proporcionando hidratação duradoura por até 72 horas.", }, { icon: Sparkles, title: "Rejuvenescimento Natural", description: "Fórmula com ativos naturais que estimulam a produção de colágeno e reduzem linhas finas.", }, { icon: Shield, title: "Proteção Antioxidante", description: "Combate os radicais livres e protege contra os danos causados pela poluição e luz azul.", }, ]; export function BenefitsSection() { return (

Por que escolher o Elixir

Benefícios exclusivos

{benefits.map((benefit) => (

{benefit.title}

{benefit.description}

))}

); } [V0_FILE]typescriptreact:file="components/header.tsx" "use client"; import { useState } from "react"; import Link from "next/link"; import { Menu, X } from "lucide-react"; export function Header() { const [isMenuOpen, setIsMenuOpen] = useState(false); return (

{/* Logo */} Elixir {/* Desktop Navigation */}

Home
Produto
Sobre
Contato

{/* Mobile Menu Button */}

{/* Mobile Navigation */} {isMenuOpen && (

setIsMenuOpen(false)} > Home
setIsMenuOpen(false)} > Produto
setIsMenuOpen(false)} > Sobre
setIsMenuOpen(false)} > Contato

)}

); } [V0_FILE]typescriptreact:file="components/hero-section.tsx" import Image from "next/image"; export function HeroSection() { return (

{/* Product Image */}

{/* Content */}

Skincare Premium

A beleza que sua pele merece

Fórmula exclusiva com ingredientes naturais que rejuvenescem e hidratam profundamente. Resultados visíveis em apenas 7 dias.

{/* Price */}

De R$ 297,00

R$ 197,00

Pagamento único via PIX

{/* CTA Button */}

Pagamento instantâneo e seguro

); } [V0_FILE]typescriptreact:file="components/testimonials-section.tsx" import { Star } from "lucide-react"; const testimonials = [ { name: "Carolina Mendes", location: "São Paulo, SP", text: "Minha pele nunca esteve tão hidratada e radiante. Em duas semanas já notei diferença nas linhas de expressão!", rating: 5, }, { name: "Fernanda Costa", location: "Rio de Janeiro, RJ", text: "Produto incrível! A textura é leve e absorve rapidamente. Uso todos os dias e minha pele agradece.", rating: 5, }, { name: "Mariana Silva", location: "Belo Horizonte, MG", text: "Já testei vários seruns e esse é disparado o melhor. Resultados reais e duradouros. Super recomendo!", rating: 5, }, ]; export function TestimonialsSection() { return (

Depoimentos

O que nossas clientes dizem

{testimonials.map((testimonial) => (

{/* Stars */}

{Array.from({ length: testimonial.rating }).map((_, i) => ( ))}

{/* Text */}

{`"${testimonial.text}"`}

{/* Author */}

{testimonial.name}

{testimonial.location}

))}

); } [V0_FILE]typescriptreact:file="components/footer.tsx" import Link from "next/link"; import { Instagram, Mail, Phone } from "lucide-react"; export function Footer() { return ( ); } [V0_FILE]typescriptreact:file="components/cta-section.tsx" export function CTASection() { return (

Transforme sua rotina de skincare hoje

Aproveite a oferta exclusiva e descubra o poder de uma pele radiante e saudável.

{/* Price */}

De R$ 297,00

R$ 197,00

{/* CTA Button */}

Entrega gratis para todo o Brasil

); } [V0_FILE]jpg:file="public/products/gloss-honey.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/gloss-honey-kNH3uqVRaaBf1nn2jiyrkLAZRzBrXO.jpg" [V0_FILE]jpg:file="public/products/gloss-bunny.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/gloss-bunny-78MoMYaHS4C3tCmjuW94mRnWsshB85.jpg" [V0_FILE]jpg:file="public/products/mascara.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/mascara-uiyiWhAeRznUqcOTWpbaGSC45GZeaT.jpg" [V0_FILE]jpg:file="public/hero-banner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/hero-banner-dQRfxItZQnCj9Ssr61P2PR4gNvBxQS.jpg" [V0_FILE]jpg:file="public/products/primer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/primer-IkDncdUsZnI0WfeY9ZzftX6SWQBv6W.jpg" [V0_FILE]jpg:file="public/products/lipstick.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/lipstick-b44BMA1Z0BTH2y6p9k2Wl6iFph4xSb.jpg" [V0_FILE]jpg:file="public/products/kit-gloss.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/kit-gloss-kdxJMnDL1v2U7TBhDJ5UAggNJBLRkQ.jpg" [V0_FILE]typescript:file="lib/products.ts" import type { Product } from "./cart-context"; export const products: Product[] = [ { id: "1", name: "Gloss Labial Lip Honey", price: 69.90, image: "/products/gloss-honey.jpg", category: "Labios", }, { id: "2", name: "Gloss Labial Lip Bunny", price: 65.90, image: "/products/gloss-bunny.jpg", category: "Labios", }, { id: "3", name: "Mascara para Cilios Volume", price: 65.90, image: "/products/mascara.jpg", category: "Olhos", }, { id: "4", name: "Primer Facial Glow", price: 69.90, image: "/products/primer.jpg", category: "Rosto", }, { id: "5", name: "Batom Cremoso Rose", price: 55.90, image: "/products/lipstick.jpg", category: "Labios", }, { id: "6", name: "Kit Gloss Collection", price: 109.90, image: "/products/kit-gloss.jpg", category: "Kits", }, ]; export const categories = ["Todos", "Labios", "Olhos", "Rosto", "Kits"]; [V0_FILE]typescriptreact:file="lib/cart-context.tsx" "use client"; import React, { createContext, useContext, useState, useCallback } from "react"; export interface Product { id: string; name: string; price: number; image: string; category: string; } export interface CartItem extends Product { quantity: number; } interface CartContextType { items: CartItem[]; isOpen: boolean; openCart: () => void; closeCart: () => void; addItem: (product: Product) => void; removeItem: (productId: string) => void; updateQuantity: (productId: string, quantity: number) => void; clearCart: () => void; totalItems: number; totalPrice: number; } const CartContext = createContext(undefined); export function CartProvider({ children }: { children: React.ReactNode }) { const [items, setItems] = useState([]); const [isOpen, setIsOpen] = useState(false); const openCart = useCallback(() => setIsOpen(true), []); const closeCart = useCallback(() => setIsOpen(false), []); const addItem = useCallback((product: Product) => { setItems((currentItems) => { const existingItem = currentItems.find((item) => item.id === product.id); if (existingItem) { return currentItems.map((item) => item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item ); } return [...currentItems, { ...product, quantity: 1 }]; }); setIsOpen(true); }, []); const removeItem = useCallback((productId: string) => { setItems((currentItems) => currentItems.filter((item) => item.id !== productId) ); }, []); const updateQuantity = useCallback((productId: string, quantity: number) => { if (quantity <= 0) { setItems((currentItems) => currentItems.filter((item) => item.id !== productId) ); } else { setItems((currentItems) => currentItems.map((item) => item.id === productId ? { ...item, quantity } : item ) ); } }, []); const clearCart = useCallback(() => { setItems([]); }, []); const totalItems = items.reduce((sum, item) => sum + item.quantity, 0); const totalPrice = items.reduce( (sum, item) => sum + item.price * item.quantity, 0 ); return ( {children} ); } export function useCart() { const context = useContext(CartContext); if (context === undefined) { throw new Error("useCart must be used within a CartProvider"); } return context; } [V0_FILE]typescriptreact:file="components/store/product-card.tsx" "use client"; import Image from "next/image"; import { Plus, Check } from "lucide-react"; import { Button } from "@/components/ui/button"; import { useCart, type Product } from "@/lib/cart-context"; import { useState } from "react"; interface ProductCardProps { product: Product; } export function ProductCard({ product }: ProductCardProps) { const { addItem, items } = useCart(); const [isAdding, setIsAdding] = useState(false); const isInCart = items.some((item) => item.id === product.id); const handleAddToCart = () => { setIsAdding(true); addItem(product); setTimeout(() => setIsAdding(false), 1000); }; const formatPrice = (price: number) => { return price.toLocaleString("pt-BR", { style: "currency", currency: "BRL", }); }; return (

{/* Image */}

{/* Content */}

{product.category}

{product.name}

{formatPrice(product.price)}

ou 3x de {formatPrice(product.price / 3)}

{/* Add to cart button */}

); } [V0_FILE]typescriptreact:file="components/store/store-hero.tsx" import Image from "next/image"; import Link from "next/link"; import { Button } from "@/components/ui/button"; export function StoreHero() { return (

{/* Background Image */}

{/* Content */}

Nova Colecao

Descubra sua beleza natural

Produtos de maquiagem premium desenvolvidos para realcar o que voce tem de mais bonito. Qualidade profissional para o seu dia a dia.

{/* Features bar */}

{[ { title: "Entrega Rapida", subtitle: "Todo o Brasil" }, { title: "Parcele", subtitle: "Em ate 6x sem juros" }, { title: "Compra Segura", subtitle: "100% protegida" }, { title: "PIX Parcelado", subtitle: "4x sem juros" }, ].map((item) => (

{item.title}

{item.subtitle}

))}

); } [V0_FILE]typescriptreact:file="components/store/cart-sidebar.tsx" "use client"; import { X, Minus, Plus, ShoppingBag, Trash2 } from "lucide-react"; import Image from "next/image"; import { Button } from "@/components/ui/button"; import { useCart } from "@/lib/cart-context"; import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"; export function CartSidebar() { const { items, isOpen, closeCart, removeItem, updateQuantity, totalItems, totalPrice, } = useCart(); const formatPrice = (price: number) => { return price.toLocaleString("pt-BR", { style: "currency", currency: "BRL", }); }; const handleCheckout = () => { // Redireciona para URL externa de pagamento // Em producao, substituir pela URL real do checkout window.location.href = "https://checkout.exemplo.com.br/pagamento"; }; return ( Seu Carrinho ({totalItems}) {items.length === 0 ? (

Carrinho vazio

Adicione produtos para comecar suas compras

) : ( <> {/* Cart items */}

{items.map((item) => (

{/* Product image */}

{/* Product info */}

{item.name}

{formatPrice(item.price)}

{/* Quantity controls */}

{item.quantity}

))}

{/* Footer */}

{/* Subtotal */}

Subtotal {formatPrice(totalPrice)}

{/* Installments info */}

ou em ate 6x de {formatPrice(totalPrice / 6)} sem juros

{/* Checkout button */} {/* PIX button */}

)} ); } [V0_FILE]typescriptreact:file="components/store/about-section.tsx" import { Sparkles, Heart, Leaf } from "lucide-react"; const features = [ { icon: Sparkles, title: "Qualidade Premium", description: "Formulas desenvolvidas com ingredientes de alta performance para resultados profissionais.", }, { icon: Heart, title: "Feito com Amor", description: "Cada produto e criado pensando em realcar sua beleza natural de forma unica.", }, { icon: Leaf, title: "Cruelty Free", description: "Nao testamos em animais. Beleza consciente e responsavel para voce.", }, ]; export function AboutSection() { return (

{/* Content */}

Nossa Historia

Beleza que inspira confianca

Nascemos da paixao por criar produtos de maquiagem que realmente funcionam. Nossa missao e oferecer qualidade profissional acessivel para todas as mulheres que desejam expressar sua beleza unica.

Cada formula e cuidadosamente desenvolvida para proporcionar resultados incriveis, com texturas leves e cores vibrantes que duram o dia todo.

{/* Features */}

{features.map((feature) => (

{feature.title}

{feature.description}

))}

{/* Stats */}

{[ { value: "50K+", label: "Clientes satisfeitas" }, { value: "30+", label: "Produtos exclusivos" }, { value: "4.9", label: "Avaliacao media" }, { value: "100%", label: "Cruelty free" }, ].map((stat) => (

{stat.value}

{stat.label}

))}

); } [V0_FILE]typescriptreact:file="components/store/store-header.tsx" "use client"; import { useState } from "react"; import Link from "next/link"; import { Menu, X, ShoppingBag, Search, User } from "lucide-react"; import { Button } from "@/components/ui/button"; import { useCart } from "@/lib/cart-context"; const navLinks = [ { href: "#inicio", label: "Inicio" }, { href: "#produtos", label: "Produtos" }, { href: "#sobre", label: "Sobre" }, { href: "#contato", label: "Contato" }, ]; export function StoreHeader() { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const { totalItems, openCart } = useCart(); return (

{/* Top banner */}

Frete gratis para compras acima de R$ 199 | Parcele em ate 6x

{/* Mobile menu button */} {/* Logo */} FRAN BEAUTY {/* Desktop Navigation */} {/* Actions */}

{/* Mobile Navigation */} {isMobileMenuOpen && (

)}

); } [V0_FILE]typescriptreact:file="components/store/products-section.tsx" "use client"; import { useState } from "react"; import { ProductCard } from "./product-card"; import { products, categories } from "@/lib/products"; import { Button } from "@/components/ui/button"; export function ProductsSection() { const [activeCategory, setActiveCategory] = useState("Todos"); const filteredProducts = activeCategory === "Todos" ? products : products.filter((product) => product.category === activeCategory); return (

{/* Header */}

Nossos Produtos

Mais Vendidos

Descubra os favoritos das nossas clientes. Produtos desenvolvidos com ingredientes de alta qualidade para resultados profissionais.

{/* Category filters */}

{categories.map((category) => ( ))}

{/* Products grid */}

{filteredProducts.map((product) => ( ))}

{/* CTA */}

); } [V0_FILE]typescriptreact:file="components/store/store-footer.tsx" import Link from "next/link"; import { Instagram, MessageCircle, Mail, MapPin, Phone } from "lucide-react"; const footerLinks = { produtos: [ { label: "Labios", href: "#" }, { label: "Olhos", href: "#" }, { label: "Rosto", href: "#" }, { label: "Kits", href: "#" }, ], institucional: [ { label: "Sobre nos", href: "#sobre" }, { label: "Politica de Privacidade", href: "#" }, { label: "Termos de Uso", href: "#" }, { label: "Trocas e Devolucoes", href: "#" }, ], atendimento: [ { label: "Central de Ajuda", href: "#" }, { label: "Rastrear Pedido", href: "#" }, { label: "Formas de Pagamento", href: "#" }, { label: "Frete e Entrega", href: "#" }, ], }; const socialLinks = [ { icon: Instagram, href: "https://instagram.com", label: "Instagram" }, { icon: MessageCircle, href: "https://wa.me/5511999999999", label: "WhatsApp" }, { icon: Mail, href: "mailto:contato@franbeauty.com.br", label: "Email" }, ]; export function StoreFooter() { return ( ); } [V0_FILE]typescript:file="backend/routes/pix.routes.ts" /** * PIX Payment Routes * * Define as rotas da API de pagamentos PIX. * Todas as rotas sao prefixadas com /api/pix pelo app principal. */ import { Router } from "express"; import { createPixPayment, getPixPaymentStatus, handlePixWebhook, } from "../controllers/pix.controller"; const router = Router(); /** * POST /api/pix/create * * Cria um novo pagamento PIX. * Retorna QR Code e codigo copia e cola. * * Request Body: * { * "amount": number, // Valor em centavos * "description": string, // Descricao do pagamento * "payerEmail": string, // Email do pagador * "payerCpf": string, // CPF do pagador (apenas numeros) * "payerFirstName": string,// Nome do pagador * "payerLastName": string, // Sobrenome do pagador * "externalReference"?: string // ID de referencia do seu sistema * } * * Response: * { * "success": true, * "message": "Pagamento PIX criado com sucesso", * "data": { * "paymentId": "PAY_1234...", * "status": "pending", * "pixCopyPaste": "00020126...", * "qrCodeBase64": "data:image/png;base64,...", * "qrCodeUrl": "https://...", * "expirationDate": "2025-01-01T12:30:00.000Z", * "amountFormatted": "R$ 100,00" * } * } */ router.post("/create", createPixPayment); /** * GET /api/pix/status/:paymentId * * Consulta o status de um pagamento existente. * * Params: * - paymentId: ID do pagamento retornado na criacao * * Response: * { * "success": true, * "data": { * "paymentId": "PAY_1234...", * "status": "pending" | "approved" | "rejected" | "cancelled", * "statusDetail": "waiting_payment" | "accredited" | ... * } * } */ router.get("/status/:paymentId", getPixPaymentStatus); /** * POST /api/pix/webhook * * Endpoint para receber notificacoes do Mercado Pago. * Configure este endpoint nas configuracoes do Mercado Pago: * https://www.mercadopago.com.br/developers/panel/app/{app_id}/webhooks * * IMPORTANTE: * - Use HTTPS em producao * - Valide a assinatura do webhook * - Responda sempre com 200 para evitar reenvios */ router.post("/webhook", handlePixWebhook); export default router; [V0_FILE]typescript:file="backend/services/pix.service.ts" /** * PIX Payment Service * * Este servico contem a logica de negocios para criacao de pagamentos PIX. * Preparado para integracao com API do Mercado Pago. * * IMPORTANTE: Em producao, substituir os dados mockados pela integracao real. * * Documentacao Mercado Pago PIX: * https://www.mercadopago.com.br/developers/pt/docs/checkout-api/integration-configuration/integrate-with-pix */ // Tipagem para o request de criacao de PIX export interface CreatePixRequest { // Valor total em centavos (ex: 10000 = R$ 100,00) amount: number; // Descricao do pagamento description: string; // Email do pagador payerEmail: string; // CPF do pagador (apenas numeros) payerCpf: string; // Nome do pagador payerFirstName: string; // Sobrenome do pagador payerLastName: string; // ID externo para referencia (seu sistema) externalReference?: string; } // Tipagem para a resposta do PIX export interface PixPaymentResponse { // ID do pagamento no Mercado Pago paymentId: string; // Status do pagamento status: "pending" | "approved" | "rejected" | "cancelled"; // Codigo PIX copia e cola pixCopyPaste: string; // URL do QR Code em base64 qrCodeBase64: string; // URL do QR Code como imagem qrCodeUrl: string; // Data de expiracao do PIX expirationDate: string; // Valor em reais amountFormatted: string; } /** * Classe de servico para pagamentos PIX * * Em producao, esta classe deve ser configurada com: * - ACCESS_TOKEN do Mercado Pago * - Configuracao de ambiente (sandbox/producao) */ class PixPaymentService { // Token de acesso do Mercado Pago (configurar via env) private accessToken: string; // URL base da API do Mercado Pago private apiBaseUrl: string; constructor() { // Em producao, usar variaveis de ambiente this.accessToken = process.env.MERCADO_PAGO_ACCESS_TOKEN || "TEST-ACCESS-TOKEN"; // Usar sandbox para testes, producao para ambiente real this.apiBaseUrl = process.env.NODE_ENV === "production" ? "https://api.mercadopago.com" : "https://api.mercadopago.com"; // Mesmo endpoint, muda o token } /** * Cria um pagamento PIX * * @param data Dados do pagamento * @returns Resposta com QR Code e codigo PIX * * IMPLEMENTACAO REAL (descomentar em producao): * * const response = await fetch(`${this.apiBaseUrl}/v1/payments`, { * method: 'POST', * headers: { * 'Content-Type': 'application/json', * 'Authorization': `Bearer ${this.accessToken}`, * 'X-Idempotency-Key': crypto.randomUUID(), * }, * body: JSON.stringify({ * transaction_amount: data.amount / 100, * description: data.description, * payment_method_id: 'pix', * payer: { * email: data.payerEmail, * first_name: data.payerFirstName, * last_name: data.payerLastName, * identification: { * type: 'CPF', * number: data.payerCpf, * }, * }, * external_reference: data.externalReference, * }), * }); */ async createPixPayment(data: CreatePixRequest): Promise { // Validacoes basicas if (!data.amount || data.amount <= 0) { throw new Error("Valor do pagamento invalido"); } if (!data.payerEmail || !this.isValidEmail(data.payerEmail)) { throw new Error("Email do pagador invalido"); } if (!data.payerCpf || !this.isValidCpf(data.payerCpf)) { throw new Error("CPF do pagador invalido"); } // Gera ID unico para o pagamento (mock) const paymentId = this.generatePaymentId(); // Calcula data de expiracao (30 minutos) const expirationDate = new Date(); expirationDate.setMinutes(expirationDate.getMinutes() + 30); // Formata valor em reais const amountInReais = data.amount / 100; const amountFormatted = amountInReais.toLocaleString("pt-BR", { style: "currency", currency: "BRL", }); // Gera codigo PIX mock (em producao, vem da API) const pixCopyPaste = this.generateMockPixCode(paymentId, amountInReais); // Gera QR Code mock em base64 (em producao, vem da API) const qrCodeBase64 = this.generateMockQrCodeBase64(); // URL do QR Code (em producao, vem da API) const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(pixCopyPaste)}`; // Retorna resposta mockada // Em producao, parsear a resposta da API do Mercado Pago return { paymentId, status: "pending", pixCopyPaste, qrCodeBase64, qrCodeUrl, expirationDate: expirationDate.toISOString(), amountFormatted, }; } /** * Consulta status de um pagamento * * @param paymentId ID do pagamento * @returns Status atual do pagamento * * IMPLEMENTACAO REAL: * const response = await fetch(`${this.apiBaseUrl}/v1/payments/${paymentId}`, { * headers: { 'Authorization': `Bearer ${this.accessToken}` }, * }); */ async getPaymentStatus(paymentId: string): Promise<{ status: string; statusDetail: string }> { // Mock - em producao, consultar API do Mercado Pago return { status: "pending", statusDetail: "waiting_payment", }; } /** * Processa webhook do Mercado Pago * * @param payload Dados do webhook * @returns Dados processados * * IMPORTANTE: Validar assinatura do webhook em producao * https://www.mercadopago.com.br/developers/pt/docs/your-integrations/notifications/webhooks */ async processWebhook(payload: { action: string; data: { id: string }; type: string; }): Promise<{ processed: boolean; paymentId: string; newStatus: string }> { // Verifica se e uma notificacao de pagamento if (payload.type !== "payment") { return { processed: false, paymentId: "", newStatus: "", }; } const paymentId = payload.data.id; // Em producao, buscar status atualizado na API const paymentStatus = await this.getPaymentStatus(paymentId); // Aqui voce pode atualizar seu banco de dados // await db.orders.update({ paymentId }, { status: paymentStatus.status }); return { processed: true, paymentId, newStatus: paymentStatus.status, }; } // === Metodos auxiliares === private generatePaymentId(): string { return `PAY_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`; } private generateMockPixCode(paymentId: string, amount: number): string { // Codigo EMV mock - em producao, usar codigo real do Mercado Pago return `00020126580014br.gov.bcb.pix0136${paymentId}5204000053039865404${amount.toFixed(2)}5802BR5913FRAN BEAUTY6008SAO PAULO62070503***6304`; } private generateMockQrCodeBase64(): string { // QR Code placeholder - em producao, usar base64 real da API return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="; } private isValidEmail(email: string): boolean { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(email); } private isValidCpf(cpf: string): boolean { // Remove caracteres nao numericos const cleanCpf = cpf.replace(/\D/g, ""); // CPF deve ter 11 digitos if (cleanCpf.length !== 11) { return false; } // Verifica se todos os digitos sao iguais if (/^(\d)\1+$/.test(cleanCpf)) { return false; } // Validacao completa do CPF (algoritmo dos digitos verificadores) let sum = 0; let remainder; for (let i = 1; i <= 9; i++) { sum += parseInt(cleanCpf.substring(i - 1, i)) * (11 - i); } remainder = (sum * 10) % 11; if (remainder === 10 || remainder === 11) remainder = 0; if (remainder !== parseInt(cleanCpf.substring(9, 10))) return false; sum = 0; for (let i = 1; i <= 10; i++) { sum += parseInt(cleanCpf.substring(i - 1, i)) * (12 - i); } remainder = (sum * 10) % 11; if (remainder === 10 || remainder === 11) remainder = 0; if (remainder !== parseInt(cleanCpf.substring(10, 11))) return false; return true; } } // Exporta instancia unica do servico (Singleton) export const pixPaymentService = new PixPaymentService(); [V0_FILE]plaintext:file="backend/.env.example" # ============================================ # Configuracoes do Backend FRAN Beauty # ============================================ # Ambiente (development | production) NODE_ENV=development # Porta do servidor backend BACKEND_PORT=3001 # URL do frontend (para CORS) FRONTEND_URL=http://localhost:3000 # ============================================ # Mercado Pago - Credenciais # ============================================ # Obtenha suas credenciais em: # https://www.mercadopago.com.br/developers/panel/app # Access Token (Producao) # Formato: APP_USR-0000000000000000-000000-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-000000000 MERCADO_PAGO_ACCESS_TOKEN= # Access Token (Sandbox/Testes) # Use este para testes antes de ir para producao MERCADO_PAGO_ACCESS_TOKEN_SANDBOX= # Public Key (usado no frontend se necessario) MERCADO_PAGO_PUBLIC_KEY= # ============================================ # Webhook do Mercado Pago # ============================================ # Secret para validar assinatura dos webhooks # Configure em: https://www.mercadopago.com.br/developers/panel/app/{id}/webhooks MERCADO_PAGO_WEBHOOK_SECRET= # ============================================ # Banco de Dados (opcional) # ============================================ # Para armazenar pedidos e status de pagamentos # DATABASE_URL=postgresql://user:password@localhost:5432/fran_beauty [V0_FILE]markdown:file="backend/README.md" # Backend de Pagamentos PIX - FRAN Beauty Backend Node.js/Express preparado para integracao com a API do Mercado Pago para pagamentos via PIX. ## Estrutura do Projeto ``` backend/ ├── app.ts # Configuracao principal do Express ├── controllers/ │ └── pix.controller.ts # Controllers das rotas PIX ├── routes/ │ └── pix.routes.ts # Definicao das rotas da API ├── services/ │ └── pix.service.ts # Logica de negocios e integracao ├── .env.example # Exemplo de variaveis de ambiente └── README.md # Este arquivo ``` ## Instalacao 1. Instale as dependencias necessarias: ```bash npm install express cors npm install -D typescript @types/express @types/cors ts-node-dev ``` 2. Copie o arquivo de ambiente: ```bash cp backend/.env.example backend/.env ``` 3. Configure suas credenciais do Mercado Pago no arquivo `.env` ## Executando ### Desenvolvimento ```bash npx ts-node backend/app.ts ``` Ou adicione ao `package.json`: ```json { "scripts": { "dev:backend": "ts-node-dev --respawn backend/app.ts" } } ``` ### Producao ```bash # Build npx tsc -p backend/tsconfig.json # Executar node dist/backend/app.js ``` ## Endpoints da API ### Health Check ``` GET /api/health ``` Retorna status do servidor. ### Criar Pagamento PIX ``` POST /api/pix/create Content-Type: application/json { "amount": 10000, "description": "Compra na FRAN Beauty", "payerEmail": "cliente@email.com", "payerCpf": "12345678900", "payerFirstName": "Maria", "payerLastName": "Silva", "externalReference": "ORDER_123" } ``` **Resposta:** ```json { "success": true, "message": "Pagamento PIX criado com sucesso", "data": { "paymentId": "PAY_1706789012345_abc123", "status": "pending", "pixCopyPaste": "00020126580014br.gov.bcb.pix...", "qrCodeBase64": "data:image/png;base64,...", "qrCodeUrl": "https://api.qrserver.com/...", "expirationDate": "2025-02-01T12:30:00.000Z", "amountFormatted": "R$ 100,00" } } ``` ### Consultar Status ``` GET /api/pix/status/:paymentId ``` ### Webhook (Mercado Pago) ``` POST /api/pix/webhook ``` Configure este endpoint nas configuracoes de webhook do Mercado Pago. ## Integracao com Mercado Pago ### 1. Obter Credenciais 1. Acesse [Mercado Pago Developers](https://www.mercadopago.com.br/developers/panel) 2. Crie uma aplicacao ou selecione uma existente 3. Copie o **Access Token** de producao e sandbox 4. Configure os tokens no arquivo `.env` ### 2. Configurar Webhooks 1. Acesse as configuracoes da sua aplicacao 2. Va em "Webhooks" > "Configurar notificacoes" 3. Adicione a URL: `https://seu-dominio.com/api/pix/webhook` 4. Selecione os eventos: `payment` 5. Copie o secret e adicione no `.env` ### 3. Testar em Sandbox Use os cartoes/CPFs de teste do Mercado Pago: - CPF aprovado: `12345678909` - Email: qualquer email valido ### 4. Ir para Producao 1. Complete a verificacao da conta Mercado Pago 2. Troque para o Access Token de producao 3. Configure o webhook para sua URL de producao 4. Remova logs de debug do codigo ## Proximos Passos para Integracao Real 1. **Descomentar codigo de producao** em `pix.service.ts` 2. **Adicionar banco de dados** para persistir pedidos 3. **Implementar validacao de webhook** usando o secret 4. **Adicionar rate limiting** para proteger a API 5. **Configurar HTTPS** em producao 6. **Adicionar testes automatizados** ## Seguranca - [ ] Validar assinatura dos webhooks - [ ] Implementar rate limiting - [ ] Usar HTTPS em producao - [ ] Sanitizar inputs - [ ] Nao expor erros internos em producao - [ ] Configurar CORS adequadamente ## Suporte Documentacao oficial do Mercado Pago: - [API de Pagamentos](https://www.mercadopago.com.br/developers/pt/docs/checkout-api/landing) - [PIX](https://www.mercadopago.com.br/developers/pt/docs/checkout-api/integration-configuration/integrate-with-pix) - [Webhooks](https://www.mercadopago.com.br/developers/pt/docs/your-integrations/notifications/webhooks) [V0_FILE]typescript:file="backend/controllers/pix.controller.ts" /** * PIX Payment Controller * * Este controller gerencia as requisicoes HTTP relacionadas a pagamentos PIX. * Recebe as requisicoes, valida os dados e chama o servico apropriado. */ import type { Request, Response, NextFunction } from "express"; import { pixPaymentService, type CreatePixRequest } from "../services/pix.service"; /** * Controller para criar um novo pagamento PIX * * POST /api/pix/create * * Body esperado: * { * "amount": 10000, // Valor em centavos (R$ 100,00) * "description": "Compra na FRAN Beauty", * "payerEmail": "cliente@email.com", * "payerCpf": "12345678900", * "payerFirstName": "Maria", * "payerLastName": "Silva", * "externalReference": "ORDER_123" // Opcional * } */ export async function createPixPayment( req: Request, res: Response, next: NextFunction ): Promise { try { // Extrai dados do body const { amount, description, payerEmail, payerCpf, payerFirstName, payerLastName, externalReference, } = req.body as CreatePixRequest; // Validacoes de campos obrigatorios if (!amount) { res.status(400).json({ success: false, error: "Campo 'amount' e obrigatorio", code: "MISSING_AMOUNT", }); return; } if (!payerEmail) { res.status(400).json({ success: false, error: "Campo 'payerEmail' e obrigatorio", code: "MISSING_EMAIL", }); return; } if (!payerCpf) { res.status(400).json({ success: false, error: "Campo 'payerCpf' e obrigatorio", code: "MISSING_CPF", }); return; } if (!payerFirstName || !payerLastName) { res.status(400).json({ success: false, error: "Campos 'payerFirstName' e 'payerLastName' sao obrigatorios", code: "MISSING_NAME", }); return; } // Chama o servico para criar o pagamento const pixPayment = await pixPaymentService.createPixPayment({ amount, description: description || "Pagamento FRAN Beauty", payerEmail, payerCpf, payerFirstName, payerLastName, externalReference, }); // Retorna resposta de sucesso res.status(201).json({ success: true, message: "Pagamento PIX criado com sucesso", data: pixPayment, }); } catch (error) { // Trata erros conhecidos if (error instanceof Error) { res.status(400).json({ success: false, error: error.message, code: "VALIDATION_ERROR", }); return; } // Passa erros desconhecidos para o middleware de erro next(error); } } /** * Controller para consultar status de um pagamento * * GET /api/pix/status/:paymentId */ export async function getPixPaymentStatus( req: Request, res: Response, next: NextFunction ): Promise { try { const { paymentId } = req.params; if (!paymentId) { res.status(400).json({ success: false, error: "ID do pagamento e obrigatorio", code: "MISSING_PAYMENT_ID", }); return; } // Consulta status do pagamento const status = await pixPaymentService.getPaymentStatus(paymentId); res.status(200).json({ success: true, data: { paymentId, ...status, }, }); } catch (error) { next(error); } } /** * Controller para receber webhooks do Mercado Pago * * POST /api/pix/webhook * * IMPORTANTE: Em producao, validar a assinatura do webhook * usando o header 'x-signature' e o secret do Mercado Pago. */ export async function handlePixWebhook( req: Request, res: Response, next: NextFunction ): Promise { try { const payload = req.body; // Log do webhook recebido (remover em producao ou usar logger) console.log("[PIX Webhook] Recebido:", JSON.stringify(payload, null, 2)); // Valida estrutura basica do webhook if (!payload || !payload.type || !payload.data) { res.status(400).json({ success: false, error: "Payload do webhook invalido", }); return; } // Processa o webhook const result = await pixPaymentService.processWebhook(payload); if (result.processed) { console.log(`[PIX Webhook] Pagamento ${result.paymentId} atualizado para: ${result.newStatus}`); } // Sempre retorna 200 para o Mercado Pago nao reenviar res.status(200).json({ success: true, processed: result.processed, }); } catch (error) { // Log do erro mas retorna 200 para evitar reenvio console.error("[PIX Webhook] Erro:", error); res.status(200).json({ success: false, error: "Erro ao processar webhook", }); } } [V0_FILE]typescript:file="backend/app.ts" /** * Express Application * * Configuracao principal do servidor Express. * Este arquivo configura middlewares, rotas e tratamento de erros. * * Para executar em desenvolvimento: * npx ts-node backend/app.ts * * Ou adicione ao package.json: * "scripts": { * "dev:backend": "ts-node-dev --respawn backend/app.ts", * "build:backend": "tsc -p backend/tsconfig.json", * "start:backend": "node dist/backend/app.js" * } */ import express, { type Request, type Response, type NextFunction } from "express"; import cors from "cors"; import pixRoutes from "./routes/pix.routes"; // Cria instancia do Express const app = express(); // Porta do servidor (usa variavel de ambiente ou 3001) const PORT = process.env.BACKEND_PORT || 3001; // === MIDDLEWARES === // Habilita CORS para permitir requisicoes do frontend app.use(cors({ origin: process.env.FRONTEND_URL || "http://localhost:3000", methods: ["GET", "POST", "PUT", "DELETE"], allowedHeaders: ["Content-Type", "Authorization"], })); // Parse JSON bodies app.use(express.json()); // Parse URL-encoded bodies app.use(express.urlencoded({ extended: true })); // Log de requisicoes (apenas em desenvolvimento) if (process.env.NODE_ENV !== "production") { app.use((req: Request, _res: Response, next: NextFunction) => { console.log(`[${new Date().toISOString()}] ${req.method} ${req.path}`); next(); }); } // === ROTAS === // Rota de health check app.get("/api/health", (_req: Request, res: Response) => { res.status(200).json({ status: "ok", timestamp: new Date().toISOString(), version: "1.0.0", }); }); // Rotas de pagamento PIX app.use("/api/pix", pixRoutes); // === TRATAMENTO DE ERROS === // Rota nao encontrada (404) app.use((_req: Request, res: Response) => { res.status(404).json({ success: false, error: "Rota nao encontrada", code: "NOT_FOUND", }); }); // Middleware de erro global app.use((err: Error, _req: Request, res: Response, _next: NextFunction) => { console.error("[Error]", err); res.status(500).json({ success: false, error: process.env.NODE_ENV === "production" ? "Erro interno do servidor" : err.message, code: "INTERNAL_ERROR", }); }); // === INICIALIZACAO DO SERVIDOR === // Inicia o servidor apenas se executado diretamente if (require.main === module) { app.listen(PORT, () => { console.log(` ╔════════════════════════════════════════════════════════╗ ║ ║ ║ FRAN Beauty - Backend de Pagamentos PIX ║ ║ ║ ║ Servidor rodando em: http://localhost:${PORT} ║ ║ ║ ║ Endpoints disponiveis: ║ ║ - GET /api/health Health check ║ ║ - POST /api/pix/create Criar pagamento PIX ║ ║ - GET /api/pix/status/:id Consultar status ║ ║ - POST /api/pix/webhook Webhook Mercado Pago ║ ║ ║ ╚════════════════════════════════════════════════════════╝ `); }); } // Exporta o app para testes e uso como modulo export default app; [V0_FILE]typescript:file="app/api/pix/create/route.ts" /** * API Route - Criar Pagamento PIX * * Esta rota atua como proxy para o backend de pagamentos. * Em producao, conectar com o backend Express ou usar diretamente aqui. */ import { NextResponse } from "next/server"; // Tipagem do request interface CreatePixRequestBody { amount: number; description?: string; payerEmail: string; payerCpf: string; payerFirstName: string; payerLastName: string; externalReference?: string; } // Mock do servico PIX (em producao, chamar o backend real) function generateMockPixPayment(data: CreatePixRequestBody) { const paymentId = `PAY_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`; const expirationDate = new Date(); expirationDate.setMinutes(expirationDate.getMinutes() + 30); const amountInReais = data.amount / 100; const amountFormatted = amountInReais.toLocaleString("pt-BR", { style: "currency", currency: "BRL", }); const pixCopyPaste = `00020126580014br.gov.bcb.pix0136${paymentId}5204000053039865404${amountInReais.toFixed(2)}5802BR5911FRAN BEAUTY6008SAO PAULO62070503***6304`; return { paymentId, status: "pending", pixCopyPaste, qrCodeBase64: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==", qrCodeUrl: `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(pixCopyPaste)}`, expirationDate: expirationDate.toISOString(), amountFormatted, }; } export async function POST(request: Request) { try { const body = await request.json() as CreatePixRequestBody; // Validacoes basicas if (!body.amount || body.amount <= 0) { return NextResponse.json( { success: false, error: "Valor invalido" }, { status: 400 } ); } if (!body.payerEmail) { return NextResponse.json( { success: false, error: "Email obrigatorio" }, { status: 400 } ); } if (!body.payerCpf) { return NextResponse.json( { success: false, error: "CPF obrigatorio" }, { status: 400 } ); } // Gera pagamento mock // Em producao, chamar o backend Express ou integrar diretamente com Mercado Pago const pixPayment = generateMockPixPayment(body); return NextResponse.json({ success: true, message: "Pagamento PIX criado com sucesso", data: pixPayment, }, { status: 201 }); } catch (error) { console.error("[PIX Create Error]", error); return NextResponse.json( { success: false, error: "Erro ao criar pagamento" }, { status: 500 } ); } } [V0_FILE]jpg:file="public/hero-bride.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/hero-bride-QosxgncxUHikJ7KFs1As5aGpMSnlW4.jpg" [V0_FILE]typescriptreact:file="components/fran/announcement-bar.tsx" "use client"; export function AnnouncementBar() { return (

Loja Oficial{" "} FRAN{" "} by Franciny Ehlke

); } [V0_FILE]typescriptreact:file="components/fran/benefits-bar.tsx" "use client"; export function BenefitsBar() { const benefits = [ { icon: ( ), text: "ENTREGA EM TODO O BRASIL", }, { icon: ( ), text: "PARCELE EM ATÉ 6X", }, { icon: ( ), text: "COMPRA 100% SEGURA", }, { icon: ( ), text: "PIX PARCELADO 4X SEM JUROS", }, ]; return (

{[...Array(4)].map((_, setIndex) => (

{benefits.map((benefit, index) => (

{benefit.icon} {benefit.text}

))}

); } [V0_FILE]png:file="public/slides/slide-bride.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-t9TG01XkUJ8cDqLgCVadHqXH0HTkJW.png" [V0_FILE]png:file="public/slides/slide-chilli.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Fe6h9GrDQl2XW61DaLvFeFHif7BIzz.png" [V0_FILE]png:file="public/slides/slide-brows.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-W2y928VkWn0LThXAV2R8POeQ5TGd2P.png" [V0_FILE]typescriptreact:file="components/fran/whatsapp-button.tsx" "use client"; interface WhatsAppButtonProps { phoneNumber?: string; message?: string; } export function WhatsAppButton({ phoneNumber = "5511999999999", message = "Ola! Gostaria de saber mais sobre os produtos." }: WhatsAppButtonProps) { const whatsappUrl = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`; return ( ); } [V0_FILE]plaintext:file="public/slides/franbrows.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/franbrows-Lw8FLY1UQOMvVmgS9ThcVAMv5yO3ur.webp" [V0_FILE]plaintext:file="public/slides/chilli-cake.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/chilli-cake-fran-desk-K0ZfgdQnTfjsfhdLS7y2RjbTOG1rpJ.webp" [V0_FILE]plaintext:file="public/slides/bride-kit.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/kit-fran-bride-banner-desktop-c5kc9pLv5jmKHFuJRo0UxpbTqkwqgY.webp" [V0_FILE]plaintext:file="public/slides/bride-kit-clean.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-6z8eeyAfvenQmEJlOi1Ti8CIqZXCTD.png" [V0_FILE]plaintext:file="public/slides/bride-kit-final.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/kit-fran-bride-banner-desktop-EeAjSRp4qAmE3NCyN1O8xk4EPRcZhN.webp" [V0_FILE]plaintext:file="public/slides/bride-kit-new.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Sem%20nome%20%28Site%29-dpMooXOghxUE18Sigk1aqxDYoKTYS1.png" [V0_FILE]plaintext:file="public/slides/bride-final.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Sem%20nome%20%28Site%29.jpg-Zrna8EqJHTFK8rqi4Ft0hbJweC20Ud.png" [V0_FILE]typescriptreact:file="components/fran/hero-carousel.tsx" "use client"; import React from "react" import { useState, useEffect, useCallback } from "react"; import { ChevronLeft, ChevronRight } from "lucide-react"; interface Slide { id: number; image: string; buttonText: string; buttonStyle: "transparent" | "black" | "brown"; buttonHref: string; buttonPosition: { bottom: string; left?: string; right?: string; center?: boolean; }; } const slides: Slide[] = [ { id: 1, image: "/slides/bride-final.webp", buttonText: "EU QUEROO", buttonStyle: "transparent", buttonHref: "#produtos", buttonPosition: { bottom: "12%", left: "30%", }, }, { id: 2, image: "/slides/chilli-cake.webp", buttonText: "EU QUEROO", buttonStyle: "black", buttonHref: "#produtos", buttonPosition: { bottom: "15%", right: "18%", }, }, { id: 3, image: "/slides/franbrows.webp", buttonText: "EU QUEROO", buttonStyle: "brown", buttonHref: "#produtos", buttonPosition: { bottom: "12%", center: true, }, }, ]; export function HeroCarousel() { const [currentSlide, setCurrentSlide] = useState(0); const [isAutoPlaying, setIsAutoPlaying] = useState(true); const nextSlide = useCallback(() => { setCurrentSlide((prev) => (prev + 1) % slides.length); }, []); const prevSlide = () => { setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length); }; useEffect(() => { if (!isAutoPlaying) return; const interval = setInterval(nextSlide, 5000); return () => clearInterval(interval); }, [isAutoPlaying, nextSlide]); const slide = slides[currentSlide]; const getButtonStyle = (style: string) => { switch (style) { case "black": return "bg-black text-white hover:bg-black/90"; case "brown": return "bg-[#8B7355] text-white hover:bg-[#7a6349]"; case "transparent": default: return "bg-[#5a5a5a]/80 text-white hover:bg-[#5a5a5a]/90 border border-white/20"; } }; const getButtonPositionStyle = (position: Slide["buttonPosition"]) => { const style: React.CSSProperties = { position: "absolute", bottom: position.bottom, }; if (position.center) { style.left = "50%"; style.transform = "translateX(-50%)"; } else if (position.left) { style.left = position.left; } else if (position.right) { style.right = position.right; } return style; }; return (

setIsAutoPlaying(false)} onMouseLeave={() => setIsAutoPlaying(true)} > {/* Background Image */}

{/* Dark overlay for header area */}

{/* CTA Button - Real button positioned over the image */} {slide.buttonText} {/* Navigation Arrows */} {/* Dots Indicator */}

{slides.map((_, index) => (

); } [V0_FILE]jpg:file="public/products/bride-kit.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/bride-kit-uRcKrm7VEgPsPgqeqehGoTA1OmIH7p.jpg" [V0_FILE]jpg:file="public/products/chilli-cake-kit.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/chilli-cake-kit-uZuwTnhb0B6GuGdL0sfBW3XMwOCCOV.jpg" [V0_FILE]jpg:file="public/products/cera-sobrancelha.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/cera-sobrancelha-PKBv7QgX1JQepebtegHpRWBE6aHIAG.jpg" [V0_FILE]jpg:file="public/products/chaveiro-fr.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/chaveiro-fr-ZGahN2sCif2KW1y6JkNhlvN1zQ8bZI.jpg" [V0_FILE]jpg:file="public/products/mascara-sobrancelha-01.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/mascara-sobrancelha-01-C5ZCYcPYaYJsxZBhYJHaG2pmwaPS3E.jpg" [V0_FILE]jpg:file="public/products/chocoeyes-kit.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/chocoeyes-kit-HYgR6OlaJXTCOBWK3bIR9dON4V05vI.jpg" [V0_FILE]jpg:file="public/products/mascara-sobrancelha-02.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/mascara-sobrancelha-02-ssDVGmRS8jRkTDEKIsflUvYopSLGML.jpg" [V0_FILE]jpg:file="public/products/love-kit.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/love-kit-DKLmEgZDhkAxMLR6R6z9N5XavjOYj6.jpg" [V0_FILE]typescriptreact:file="components/fran/back-to-top.tsx" "use client"; import { useState, useEffect } from "react"; import { ChevronUp } from "lucide-react"; export function BackToTop() { const [isVisible, setIsVisible] = useState(false); useEffect(() => { const toggleVisibility = () => { if (window.scrollY > 300) { setIsVisible(true); } else { setIsVisible(false); } }; window.addEventListener("scroll", toggleVisibility); return () => window.removeEventListener("scroll", toggleVisibility); }, []); const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth", }); }; if (!isVisible) return null; return ( ); } [V0_FILE]jpg:file="public/categories/rosto.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/categories/rosto-3f5UfW9c1VJ90qUzJvZO4BnWN7qOBd.jpg" [V0_FILE]jpg:file="public/categories/kits.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/categories/kits-RDIo5hs2cyFKcF2wuR0FjI2d12gp8i.jpg" [V0_FILE]jpg:file="public/categories/olhos.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/categories/olhos-7hW4ICgw4mDNBkzY8j1cuQD4tDFcvC.jpg" [V0_FILE]jpg:file="public/categories/labios.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/categories/labios-xoIFZPux9AvFomVyR8IezploDcMu4X.jpg" [V0_FILE]jpg:file="public/products/lipchilli-gloss.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/lipchilli-gloss-c5gMP6t4fngc3ZqgO5uhs9yjH6Ok0T.jpg" [V0_FILE]jpg:file="public/products/green-chilli.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/green-chilli-LhqUX3DMrBPGGh0kTpt2NLmimNxl7E.jpg" [V0_FILE]jpg:file="public/products/pink-chilli.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/pink-chilli-XmEp4FQCD5bvS74FlhJGMyauvl6nHt.jpg" [V0_FILE]jpg:file="public/products/choco-chilli.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/choco-chilli-6wWWAjK1ESi5wYTwFNdVymkSqtyFkI.jpg" [V0_FILE]jpg:file="public/products/kit-glosslicious.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/kit-glosslicious-NAv5YA1yiJNz0YIzVehwzPgaLIZ3JN.jpg" [V0_FILE]jpg:file="public/products/gloss-glossip-girl.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/gloss-glossip-girl-aYJc01E7kWwQwfdgqfVJKz9WShBoRH.jpg" [V0_FILE]jpg:file="public/products/gloss-lip-bunny.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/gloss-lip-bunny-ErI8rLyrdhQQMDImuyqSoyNKyxTsen.jpg" [V0_FILE]jpg:file="public/products/gloss-glossip-gold.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/gloss-glossip-gold-IzFfZDq9d0wIXm6Fy3dqBu14xpphzu.jpg" [V0_FILE]jpg:file="public/products/corretivo-stick-rose.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/corretivo-stick-rose-EYcgacKGcuFQNPisLJJSMowGJeMBoy.jpg" [V0_FILE]jpg:file="public/products/primer-franshine.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/primer-franshine-Fgo0zgRYKG2mWCDv53SqP0uBKNX7Kx.jpg" [V0_FILE]jpg:file="public/products/base-mate-filter.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/base-mate-filter-gbtmLecd93y3FaVwgd2ZVRw7wB3JMz.jpg" [V0_FILE]jpg:file="public/products/po-facial-plush.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/po-facial-plush-Qr3udc7PM8g0GWyw7u5SDGRwybVXVG.jpg" [V0_FILE]jpg:file="public/products/corretivo-stick-c01.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/corretivo-stick-c01-6QhuwQg0y1hIuzQkxz5lv3wxfyIXZo.jpg" [V0_FILE]jpg:file="public/products/paleta-contornos.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/paleta-contornos-xCD1EqY5T0exlmFU6PBziOpcdvjHE8.jpg" [V0_FILE]jpg:file="public/products/paleta-blushes.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/paleta-blushes-oCXGeFH0b5N5HBPL3H7nkZZma4LE7U.jpg" [V0_FILE]jpg:file="public/products/base-mate-e04.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/base-mate-e04-ULmRjoUF2Fy1iysXH5fc5bdp8MZfqa.jpg" [V0_FILE]jpg:file="public/products/paleta-iluminadores.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/paleta-iluminadores-1oWMpeuHVBmQFX8wdMxY9CGIABEJJ9.jpg" [V0_FILE]jpg:file="public/products/paleta-sombras-nine.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/paleta-sombras-nine-itaX3UmMC1cd6ctAunq4rF9vYdt6If.jpg" [V0_FILE]jpg:file="public/products/lapiseira-sobrancelha-02.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/lapiseira-sobrancelha-02-ijIr16g2bFqG7mPSuufALgpw91w0J7.jpg" [V0_FILE]jpg:file="public/products/lapiseira-sobrancelha-01.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/lapiseira-sobrancelha-01-ca4hudbMZGeklJCWCz8WZr0cPDtLUI.jpg" [V0_FILE]typescriptreact:file="components/fran/products-section.tsx" "use client"; import { useState, useRef, useEffect, useMemo } from "react"; import Image from "next/image"; import Link from "next/link"; import { ChevronLeft, ChevronRight } from "lucide-react"; export interface Product { id: string; name: string; price: number; originalPrice?: number; image: string; href?: string; soldOut?: boolean; onSale?: boolean; } interface ProductsSectionProps { title: string; titleEmoji?: string; viewAllHref?: string; viewAllText?: string; products: Product[]; } function formatPrice(price: number): string { return `R$ ${price.toFixed(2).replace(".", ",")}`; } function ProductCard({ product }: { product: Product }) { return (

{/* Product Image */} {product.name}

{/* Sale Badge */} {product.onSale && (

PROMOCAO

)} {/* Sold Out Badge */} {product.soldOut && (

ESGOTADO

)}

{/* Product Info */}

{product.name}

{formatPrice(product.price)}

{product.originalPrice && (

{formatPrice(product.originalPrice)}

)}

); } export function ProductsSection({ title, titleEmoji, viewAllHref = "#", viewAllText = "VER TODOS", products }: ProductsSectionProps) { const scrollContainerRef = useRef(null); const [scrollState, setScrollState] = useState({ isMounted: false, canScrollLeft: false, canScrollRight: false, }); const checkScrollability = useRef(() => { const container = scrollContainerRef.current; if (container) { setScrollState(prev => ({ ...prev, canScrollLeft: container.scrollLeft > 0, canScrollRight: container.scrollLeft < container.scrollWidth - container.clientWidth - 10, })); } }); // Initialize scroll state only on client after mount useEffect(() => { const container = scrollContainerRef.current; if (container) { setScrollState({ isMounted: true, canScrollLeft: false, canScrollRight: container.scrollWidth > container.clientWidth, }); } else { setScrollState(prev => ({ ...prev, isMounted: true })); } }, []); const handleScroll = () => { checkScrollability.current(); }; const scroll = (direction: "left" | "right") => { const container = scrollContainerRef.current; if (container) { const scrollAmount = 300; container.scrollBy({ left: direction === "left" ? -scrollAmount : scrollAmount, behavior: "smooth", }); setTimeout(() => checkScrollability.current(), 300); } }; const stableProducts = useMemo(() => products, [products]); return (

{/* Header */}

{title} {titleEmoji && {titleEmoji}}

{viewAllText} {/* Navigation Arrows - Only render after mount */} {scrollState.isMounted && (

)}

{/* Products Carousel */}

{stableProducts.map((product) => ( ))}

); } [V0_FILE]jpg:file="public/banners/labios-banner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/banners/labios-banner-i7iyeWTYtzNv6Vb6LZQeqRVtRqdYPI.jpg" [V0_FILE]typescriptreact:file="components/fran/category-banner.tsx" "use client"; import Image from "next/image"; interface CategoryBannerProps { image: string; title: string; description: string; highlightText?: string; } export function CategoryBanner({ image, title, description, highlightText }: CategoryBannerProps) { // Split description by highlight text if provided const renderDescription = () => { if (!highlightText || !description.includes(highlightText)) { return {description}; } const parts = description.split(highlightText); return ( <> {parts[0]} {highlightText} {parts[1]} ); }; return (

{/* Banner Image */}

{/* Title and Description */}

{title}

{renderDescription()}

); } [V0_FILE]jpg:file="public/banners/kits-banner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/banners/kits-banner-AiPMfaK0Jfmnd9ESYnNQRKaZlgQcO8.jpg" [V0_FILE]jpg:file="public/banners/rosto-banner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/banners/rosto-banner-3drVMJ5JdaiK07e7hxThzNcOD6TNBT.jpg" [V0_FILE]jpg:file="public/banners/olhos-banner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/banners/olhos-banner-KbkFLSO5zWkgtSXDQoRWebYgZbvtw1.jpg" [V0_FILE]typescriptreact:file="components/fran/categories-section.tsx" "use client"; import Image from "next/image"; interface Category { id: string; name: string; image: string; href: string; } const categories: Category[] = [ { id: "olhos", name: "OLHOS", image: "/categories/olhos.jpg", href: "/categoria/olhos", }, { id: "rosto", name: "ROSTO", image: "/categories/rosto.jpg", href: "/categoria/rosto", }, { id: "labios", name: "LÁBIOS", image: "/categories/labios.jpg", href: "/categoria/labios", }, { id: "kits", name: "KITS", image: "/categories/kits.jpg", href: "/categoria/kits", }, ]; export function CategoriesSection() { return (

{/* Title */}

COMPRE POR CATEGORIA

{/* Categories Grid */}

{categories.map((category) => ( {/* Card */}

{/* Label */}

{category.name}

))}

); } [V0_FILE]typescriptreact:file="app/categoria/[slug]/page.tsx" import { notFound } from "next/navigation"; import Image from "next/image"; import Link from "next/link"; import { AnnouncementBar } from "@/components/fran/announcement-bar"; import { Header } from "@/components/fran/header"; import { WhatsAppButton } from "@/components/fran/whatsapp-button"; import { BackToTop } from "@/components/fran/back-to-top"; import { categories, type Product, getProductsByCategory } from "@/lib/products-data"; // Format price function formatPrice(price: number): string { return `R$ ${price.toFixed(2).replace(".", ",")}`; } // Product Card Component function ProductCard({ product }: { product: Product }) { return (

{/* Sale Badge */} {product.onSale && (

PROMOCAO

)} {/* Sold Out Badge */} {product.soldOut && (

ESGOTADO

)}

{/* Product Info */}

{product.name}

{formatPrice(product.price)}

{product.originalPrice && (

{formatPrice(product.originalPrice)}

)}

); } interface CategoryPageProps { params: Promise<{ slug: string }>; } export default async function CategoryPage({ params }: CategoryPageProps) { const { slug } = await params; // Find category const category = categories.find((cat) => cat.slug === slug); if (!category) { notFound(); } // Get products from category const products = category.products; return (

{/* Hero Banner */}

{/* Category Title & Description */}

{category.title}

{category.description.split(category.highlightText || "").map((part, index, array) => ( {part} {index < array.length - 1 && ( {category.highlightText} )} ))}

{/* Products Grid */}

{products.length} {products.length === 1 ? "produto" : "produtos"}

{products.map((product) => ( ))}

); } // Generate static params for all categories export function generateStaticParams() { return categories.map((category) => ({ slug: category.slug, })); } // Generate metadata for SEO export async function generateMetadata({ params }: CategoryPageProps) { const { slug } = await params; const category = categories.find((cat) => cat.slug === slug); if (!category) { return { title: "Categoria nao encontrada", }; } return { title: `${category.title} | FRAN by Franciny Ehlke`, description: category.description, }; } [V0_FILE]jpg:file="public/collections/liphoney.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/collections/liphoney-OYvz1sAHgIY3ieApJZK2TselVnLtA8.jpg" [V0_FILE]jpg:file="public/collections/chillicake.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/collections/chillicake-n5BjQCDvPCPXU4yc9KpLkWlWmwBurv.jpg" [V0_FILE]jpg:file="public/collections/chocoeyes.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/collections/chocoeyes-2RAbjgf5SEn5qUAfqOVGhtv7ra7G9u.jpg" [V0_FILE]jpg:file="public/collections/collections-banner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-TXD53ebxIVjoUkTJRPoCTEfLRJ0eWn.png" [V0_FILE]png:file="public/products/franshine-featured.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-SYeEICk51SYR1lujOGcHfO4PUYFYhW.png" [V0_FILE]jpg:file="public/products/po-facial-plush-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/po-facial-plush-1-WIoU1kg4gYt8v4KjZV0fAQxzwuzYmJ.jpg" [V0_FILE]jpg:file="public/products/gloss-liphoney.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/gloss-liphoney-xhtamN6HpLzGnbjFvOL7aAMK47E5mh.jpg" [V0_FILE]jpg:file="public/products/caneta-delineadora.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/products/caneta-delineadora-r91z0YToFd2t4MqNzmRPI0rbS72Y7X.jpg" [V0_FILE]typescriptreact:file="components/fran/video-showcase-section.tsx" "use client"; import { useRef, useState } from "react"; import { Volume2, VolumeX, Heart } from "lucide-react"; import Image from "next/image"; import Link from "next/link"; interface VideoProduct { id: string; videoUrl: string; productName: string; productPrice: number; productImage: string; productHref: string; } const videoProducts: VideoProduct[] = [ { id: "vp1", videoUrl: "https://cdn.shopify.com/videos/c/vp/76b53f8877cd4eaf83d5da68ff231d8f/76b53f8877cd4eaf83d5da68ff231d8f.HD-720p-1.6Mbps-61171960.mp4", productName: "KIT CHILLICAKE FRAN BY FRANCINY EHLKE", productPrice: 149.90, productImage: "/products/chilli-cake-kit.jpg", productHref: "/produto/kit-chillicake", }, { id: "vp2", videoUrl: "https://videos.gotolstoy.com/public/a0f6f0bc-9a1f-4dbf-a701-d2a36f4548c1/d31eaac9-5858-42ce-b7e5-31d2927b3a4c/d31eaac9-5858-42ce-b7e5-31d2927b3a4c_640.mp4", productName: "LOVE KIT GLOSS LABIAL E LAPIS LABIAL FRAN BY FRANCINY EHLKE", productPrice: 129.90, productImage: "/products/love-kit.jpg", productHref: "/produto/love-kit", }, ]; function formatPrice(price: number): string { return `R$ ${price.toFixed(2).replace(".", ",")}`; } function VideoCard({ product }: { product: VideoProduct }) { const videoRef = useRef(null); const [isMuted, setIsMuted] = useState(true); const toggleMute = () => { if (videoRef.current) { videoRef.current.muted = !videoRef.current.muted; setIsMuted(videoRef.current.muted); } }; return (

{/* Video Container */}

{/* Heart Icon */} {/* Mute/Unmute Button */}

{/* Product Info */} {/* Product Thumbnail */}

{/* Product Details */}

{product.productName}

{formatPrice(product.productPrice)}

); } export function VideoShowcaseSection() { return (

{videoProducts.map((product) => ( ))}

); } [V0_FILE]jpg:file="public/banners/favorito-fran-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-BzxkcXQmiPgkxZ4hyBCJzHYGlIkpJL.png" [V0_FILE]typescriptreact:file="components/fran/product-description.tsx" "use client"; import React from "react" import { useState } from "react"; import { Plus, Minus } from "lucide-react"; export interface ProductDescriptionData { intro: string; benefits?: string; differential?: string; highlight?: string; measures?: { label: string; value: string; }[]; precautions?: string; ingredients?: string; } interface ProductDescriptionProps { description: ProductDescriptionData; } function AccordionItem({ title, children, isOpen, onToggle, }: { title: string; children: React.ReactNode; isOpen: boolean; onToggle: () => void; }) { return (

{isOpen &&

{children}

}

); } export function ProductDescription({ description }: ProductDescriptionProps) { const [openAccordion, setOpenAccordion] = useState("description"); const toggleAccordion = (key: string) => { setOpenAccordion(openAccordion === key ? "" : key); }; return (

{/* DESCRICAO Accordion - Open by default */} toggleAccordion("description")} >

{/* Texto introdutorio */}

{description.intro}

{/* Beneficios praticos */} {description.benefits &&

{description.benefits}

} {/* Diferencial da marca com destaque */} {description.differential && (

GOLD') .replace( /exclusivo/g, 'exclusivo' ), }} /> )} {/* Destaque importante em negrito */} {description.highlight && (

Detalhe importante!{" "} {description.highlight}

)} {/* Medidas */} {description.measures && description.measures.length > 0 && (

MEDIDAS:

{description.measures.map((measure, index) => (

{measure.label} - {measure.value}

))}

)}

{/* PRECAUCOES Accordion */} {description.precautions && ( toggleAccordion("precautions")} >

{description.precautions}

)} {/* INGREDIENTES Accordion */} {description.ingredients && ( toggleAccordion("ingredients")} >

{description.ingredients}

)}

); } [V0_FILE]typescript:file="lib/product-descriptions.ts" import type { ProductDescriptionData } from "@/components/fran/product-description"; // Descrições detalhadas de todos os produtos seguindo o padrão FR export const productDescriptions: Record = { // ACESSÓRIOS "argola-mosquetao": { intro: "Transforme seu gloss em muito mais que maquiagem: faça dele um acessório cheio de estilo para levar sempre com você!", benefits: "E nada de perder o gloss no fundo da bolsa! Com mosquetão GOLD, ele fica muito mais prático e sofisticado. É só prender nas alças, no chaveiro, na roupa... onde sua criatividade e vontade mandar.", differential: "E tem mais: cada mosquetão acompanha um pingente exclusivo FR, um detalhe que faz toda a diferença e transforma seu gloss em um verdadeiro ícone de moda: único, estiloso e só seu!", highlight: "Todas as peças passam por um banho premium especial para aumentar a durabilidade.", measures: [ { label: "Mosquetão", value: "4mm; 28mm" }, { label: "FR", value: "C:21mm L:3mm A: 20mm" }, ], precautions: "Evite contato com água, perfumes e produtos químicos. Guarde em local seco e arejado. Não exponha ao sol por longos períodos.", }, // LÁBIOS - GLOSSES "gloss-lip-bunny": { intro: "O Gloss Lip Bunny é pura delicadeza em um toque de cor. Com textura leve e acabamento brilhante, ele realça seus lábios com sofisticação e conforto durante todo o dia.", benefits: "Ideal para quem busca um gloss prático e elegante. Cabe perfeitamente na bolsa, nécessaire ou até no bolso. Aplique e reaplique sempre que quiser renovar o brilho.", differential: "Desenvolvido com fórmula exclusiva FR que hidrata enquanto embeleza, proporcionando lábios macios e irresistíveis.", highlight: "Fórmula vegana e cruelty-free, testada dermatologicamente.", precautions: "Uso externo. Evite contato com os olhos. Em caso de irritação, suspenda o uso. Mantenha fora do alcance de crianças.", ingredients: "Polybutene, Octyldodecanol, Silica Dimethyl Silylate, Pentaerythrityl Tetraisostearate, Ethylhexyl Palmitate, Diisostearyl Malate, Hydrogenated Polyisobutene.", }, "gloss-lipchilli": { intro: "Lábios volumosos e irresistíveis? O Gloss LipChilli entrega isso e muito mais. Com efeito de aumento de volume, ele proporciona um visual marcante sem sair de casa.", benefits: "A sensação de formigamento leve ativa a circulação dos lábios, criando um efeito plump natural e duradouro. Perfeito para ocasiões especiais ou para o dia a dia de quem ama lábios poderosos.", differential: "Fórmula exclusiva FR com ativos que estimulam o volume labial de forma segura e eficaz. O resultado é imediato e você sente!", highlight: "Efeito plump testado e aprovado. Sensação de formigamento é normal e indica que o produto está funcionando.", measures: [ { label: "Conteúdo", value: "3,5ml" }, ], precautions: "O efeito de formigamento é normal. Evite aplicar em lábios ressecados ou com feridas. Uso externo. Mantenha fora do alcance de crianças.", ingredients: "Polybutene, Octyldodecanol, Capsicum Frutescens Fruit Extract, Menthol, Ethylhexyl Palmitate, Silica.", }, "gloss-glossip-gold": { intro: "Brilho dourado para lábios que querem ser notados. O Glossip Gold combina cor sofisticada com textura aveludada, criando um acabamento luminoso e elegante.", benefits: "Leve na bolsa, aplique em qualquer lugar. A textura não pegajosa garante conforto o dia todo, enquanto o tom dourado ilumina qualquer look.", differential: "Embalagem icônica FR com design exclusivo que você vai querer exibir. Pigmentação intensa que valoriza todos os tons de pele.", precautions: "Uso externo. Evite contato com os olhos. Em caso de irritação, suspenda o uso.", ingredients: "Polybutene, Octyldodecanol, Mica, Titanium Dioxide, Iron Oxides, Silica Dimethyl Silylate.", }, "gloss-glossip-girl": { intro: "Delicadeza e brilho em um só produto. O Glossip Girl traz um tom suave e holográfico que realça a beleza natural dos seus lábios com um toque de glamour.", benefits: "Perfeito para o dia a dia ou para complementar makes mais elaboradas. A fórmula leve não pesa nos lábios e pode ser reaplicada quantas vezes quiser.", differential: "Acabamento holográfico exclusivo FR que reflete a luz de forma única, deixando seus lábios com um brilho multidimensional.", precautions: "Uso externo. Evite contato com os olhos. Mantenha fora do alcance de crianças.", ingredients: "Polybutene, Octyldodecanol, Calcium Aluminum Borosilicate, Silica, Pentaerythrityl Tetraisostearate.", }, "gloss-liphoney": { intro: "Doçura e brilho inspirados no mel. O Gloss LipHoney é a escolha perfeita para quem busca lábios hidratados e naturalmente brilhantes.", benefits: "Textura mel que desliza suavemente nos lábios. Hidratação intensa que você sente desde a primeira aplicação.", differential: "Fórmula exclusiva FR enriquecida com extratos naturais. Embalagem sofisticada em formato de favo de mel.", highlight: "Fragrância suave de mel que torna a experiência ainda mais especial.", precautions: "Uso externo. Evite contato com os olhos. Mantenha fora do alcance de crianças.", ingredients: "Polybutene, Octyldodecanol, Mel Extract, Silica Dimethyl Silylate, Pentaerythrityl Tetraisostearate.", }, // OLHOS "cera-sobrancelhas": { intro: "Sobrancelhas alinhadas e no lugar o dia todo. A Cera FranBrow é a solução perfeita para quem busca um acabamento natural e duradouro.", benefits: "Aplique com a escovinha, modele como preferir e pronto: sobrancelhas impecáveis sem rigidez ou aspecto artificial. Ideal para todos os tipos de fios.", differential: "Fórmula transparente que não deixa resíduos brancos e se adapta a qualquer cor de sobrancelha. Desenvolvida especialmente pela equipe FR.", highlight: "Fixação flexível que permite retoques ao longo do dia sem acúmulo de produto.", measures: [ { label: "Conteúdo", value: "4,5g" }, ], precautions: "Uso externo. Evite contato com os olhos. Em caso de irritação, suspenda o uso e consulte um dermatologista.", ingredients: "Cera Alba, PVP, Copernicia Cerifera Cera, Glycerin, Phenoxyethanol.", }, "mascara-sobrancelhas-01": { intro: "Cor e fixação em um só passo. A Máscara para Sobrancelhas FranBrow 01 preenche falhas e define os fios com naturalidade.", benefits: "Aplicação fácil e rápida para uma rotina de make sem complicação. A escovinha precisa permite controle total do resultado.", differential: "Tom claro ideal para loiras e ruivas. Fórmula FR que não resseca os fios e mantém a flexibilidade natural.", measures: [ { label: "Conteúdo", value: "4ml" }, ], precautions: "Uso externo. Evite contato direto com os olhos. Feche bem após o uso.", ingredients: "Aqua, Acrylates Copolymer, Glycerin, PVP, Iron Oxides, Phenoxyethanol.", }, "mascara-sobrancelhas-02": { intro: "Sobrancelhas definidas e marcantes com a Máscara FranBrow 02. Tom médio-escuro perfeito para morenas e castanhas.", benefits: "Preenche, colore e fixa os fios em uma única aplicação. O resultado é natural e dura o dia todo.", differential: "Desenvolvida pela equipe FR para oferecer o tom perfeito que se adapta à maioria das brasileiras. Não mancha e não borra.", measures: [ { label: "Conteúdo", value: "4ml" }, ], precautions: "Uso externo. Evite contato direto com os olhos. Mantenha fora do alcance de crianças.", ingredients: "Aqua, Acrylates Copolymer, Glycerin, PVP, Iron Oxides, Phenoxyethanol, Ethylhexylglycerin.", }, "lapiseira-sobrancelhas-01": { intro: "Precisão e praticidade para sobrancelhas perfeitas. A Lapiseira FranBrow 01 permite desenhar fio a fio com naturalidade.", benefits: "Ponta ultrafina para preencher falhas com precisão cirúrgica. A escovinha na outra extremidade permite esfumar e modelar.", differential: "Sistema retrátil que dispensa apontador. Tom claro desenvolvido pela FR para harmonizar com fios loiros e castanhos claros.", measures: [ { label: "Diâmetro da ponta", value: "0,5mm" }, ], precautions: "Evite aplicar com muita pressão para não quebrar a ponta. Mantenha sempre tampada.", ingredients: "Synthetic Fluorphlogopite, Hydrogenated Polyisobutene, Trimethylsiloxysilicate, Ozokerite, Iron Oxides.", }, "lapiseira-sobrancelhas-02": { intro: "Fios preenchidos com perfeição. A Lapiseira FranBrow 02 oferece tom médio-escuro ideal para sobrancelhas mais marcantes.", benefits: "Desenhe, preencha e modele suas sobrancelhas em segundos. A fórmula resistente garante duração prolongada.", differential: "Cor intensa que não borra com o passar das horas. Exclusividade FR para mulheres que não abrem mão de sobrancelhas impecáveis.", measures: [ { label: "Diâmetro da ponta", value: "0,5mm" }, ], precautions: "Evite aplicar sobre pele irritada. Mantenha longe do calor excessivo.", ingredients: "Synthetic Fluorphlogopite, Hydrogenated Polyisobutene, Trimethylsiloxysilicate, Ozokerite, Iron Oxides, Carbon Black.", }, "paleta-sombras-nine": { intro: "Nove tons essenciais para criar infinitas combinações. A Paleta Nine Essentials é o must-have para quem ama versatilidade.", benefits: "Do dia a dia ao look de festa, tudo em uma só paleta. Texturas matte e cintilantes para brincar com luz e sombra.", differential: "Curadoria exclusiva FR com os tons mais pedidos pelas brasileiras. Pigmentação intensa e alta durabilidade.", measures: [ { label: "Peso total", value: "12g" }, { label: "Cada sombra", value: "1,33g" }, ], precautions: "Uso externo. Evite contato direto com os olhos. Em caso de irritação, suspenda o uso.", ingredients: "Talc, Mica, Magnesium Stearate, Dimethicone, Phenoxyethanol, Iron Oxides, Titanium Dioxide.", }, "caneta-delineadora": { intro: "Traço preciso e marcante com a Caneta Delineadora PullPen. Ponta feltro ultrafina para criar desde linhas delicadas até delineados gráficos.", benefits: "Secagem rápida que não borra. Ideal para iniciantes e experts em delineado. Leve na nécessaire e retoque onde estiver.", differential: "Fórmula resistente à água desenvolvida pela FR. Pigmento intenso que não falha e dura até 12 horas.", measures: [ { label: "Conteúdo", value: "1ml" }, ], precautions: "Uso externo na área dos olhos. Evite contato direto com a mucosa. Mantenha sempre tampada.", ingredients: "Aqua, Styrene/Acrylates Copolymer, Butylene Glycol, Carbon Black, Phenoxyethanol.", }, // ROSTO "base-mate-m02": { intro: "Cobertura perfeita e acabamento matte para uma pele impecável. A Base Real Filter M-02 oferece o equilíbrio ideal entre naturalidade e cobertura.", benefits: "Controle de oleosidade que dura o dia todo. Textura leve que não pesa na pele e permite construir a cobertura desejada.", differential: "Tom desenvolvido especialmente para peles brasileiras. Fórmula FR com ativos que cuidam da pele enquanto maquiam.", highlight: "Testada dermatologicamente. Não comedogênica.", measures: [ { label: "Conteúdo", value: "30ml" }, ], precautions: "Uso externo. Mantenha em local fresco e seco. Após aberto, usar em até 12 meses.", ingredients: "Aqua, Cyclopentasiloxane, Titanium Dioxide, Dimethicone, PEG-10 Dimethicone, Iron Oxides, Phenoxyethanol.", }, "base-mate-e04": { intro: "Para peles mais profundas, cobertura e cuidado em uma só base. A Real Filter E-04 foi criada para valorizar a beleza da pele negra brasileira.", benefits: "Acabamento matte sem ressecar. Controla o brilho e uniformiza o tom da pele com naturalidade.", differential: "Tom exclusivo FR desenvolvido com muito estudo e carinho para atender peles escuras com precisão.", highlight: "Testada dermatologicamente em diversos tons de pele.", measures: [ { label: "Conteúdo", value: "30ml" }, ], precautions: "Uso externo. Mantenha em local fresco. Evite exposição ao sol prolongada.", ingredients: "Aqua, Cyclopentasiloxane, Titanium Dioxide, Dimethicone, Iron Oxides, Red 7 Lake, Phenoxyethanol.", }, "corretivo-stick-rose": { intro: "Correção de cor inteligente para neutralizar olheiras e manchas. O Corretivo Rose é seu aliado para uma pele uniforme e descansada.", benefits: "Textura cremosa que se blendeia facilmente. Pode ser usado antes ou depois da base para maximizar a cobertura.", differential: "Tom rosé exclusivo FR que neutraliza tons azulados e arroxeados. Perfeito para área dos olhos.", measures: [ { label: "Conteúdo", value: "4g" }, ], precautions: "Uso externo. Evite contato com os olhos. Mantenha fora do alcance de crianças.", ingredients: "Isododecane, Polymethylsilsesquioxane, Dimethicone, Ozokerite, Iron Oxides, Titanium Dioxide.", }, "corretivo-stick-c01": { intro: "Correção e cobertura em um único produto. O Corretivo Stick C-01 disfarça imperfeições com praticidade e precisão.", benefits: "Formato stick prático para aplicação direta. Blend fácil com os dedos ou esponja. Ideal para levar na bolsa.", differential: "Tom claro neutro que se adapta a diversas tonalidades de pele clara. Qualidade FR que você já conhece.", measures: [ { label: "Conteúdo", value: "4g" }, ], precautions: "Uso externo. Evite aplicar sobre pele irritada ou com acne inflamada.", ingredients: "Isododecane, Polymethylsilsesquioxane, Dimethicone, Ozokerite, Iron Oxides, Titanium Dioxide.", }, "po-facial-plush-1": { intro: "Acabamento aveludado e natural com o Pó Facial Plush 1. Sele sua make com leveza e duração.", benefits: "Controla o brilho sem deixar a pele com aspecto empoado. Pode ser usado sozinho para dias mais naturais.", differential: "Partículas ultrafinas FR que se fundem à pele. Tom translúcido que se adapta a peles claras.", measures: [ { label: "Conteúdo", value: "10g" }, ], precautions: "Evite inalar o produto. Mantenha longe do calor e umidade.", ingredients: "Talc, Silica, Zinc Stearate, Dimethicone, Phenoxyethanol, Mica.", }, "po-facial-plush-2": { intro: "Para peles médias, o Pó Facial Plush 2 oferece acabamento impecável e controle de oleosidade duradouro.", benefits: "Textura sedosa que desliza na pele. Fixa a maquiagem e prolonga a duração da base e corretivo.", differential: "Desenvolvido pela FR para o tom de pele mais comum entre as brasileiras. Versátil e indispensável.", measures: [ { label: "Conteúdo", value: "10g" }, ], precautions: "Evite inalar. Mantenha em local seco e fresco.", ingredients: "Talc, Silica, Zinc Stearate, Dimethicone, Iron Oxides, Phenoxyethanol.", }, "primer-franshine": { intro: "Ilumina, hidrata e suaviza os poros, deixando a pele pronta para uma make impecável — do jeitinho que a Fran ama.", benefits: "Cria a base perfeita para a maquiagem. Pode ser usado sozinho para um glow natural no dia a dia.", differential: "Fórmula exclusiva FR com partículas iluminadoras que refletem a luz e disfarçam imperfeições instantaneamente.", highlight: "O favorito da Fran! Produto mais amado e recomendado pela própria criadora da marca.", measures: [ { label: "Conteúdo", value: "30ml" }, ], precautions: "Uso externo. Evite contato com os olhos. Mantenha em local fresco.", ingredients: "Aqua, Dimethicone, Glycerin, Mica, Titanium Dioxide, Phenoxyethanol, Sodium Hyaluronate.", }, "paleta-iluminadores": { intro: "Quatro tons de iluminador para criar o glow dos seus sonhos. A Paleta Gritani é pura luz para seu rosto.", benefits: "Texturas que variam do sutil ao intenso. Use nos pontos altos do rosto, clavículas e onde mais desejar brilhar.", differential: "Curadoria FR com tons que funcionam em todas as peles brasileiras. Pigmentação que aparece de verdade.", measures: [ { label: "Peso total", value: "12g" }, ], precautions: "Uso externo. Evite contato com os olhos.", ingredients: "Talc, Mica, Dimethicone, Magnesium Stearate, Titanium Dioxide, Iron Oxides, Phenoxyethanol.", }, "paleta-contornos": { intro: "Esculpa seu rosto com a Paleta Your Browns. Quatro tons de contorno para criar dimensão e definição.", benefits: "Do contorno sutil ao mais marcado, você decide a intensidade. Texturas matte que se blendeiam com facilidade.", differential: "Tons pensados pela FR para harmonizar com a diversidade de peles brasileiras. Resultado profissional em casa.", measures: [ { label: "Peso total", value: "12g" }, ], precautions: "Uso externo. Evite aplicar em áreas com acne inflamada.", ingredients: "Talc, Mica, Octyldodecyl Stearoyl Stearate, Zinc Stearate, Iron Oxides, Phenoxyethanol.", }, "paleta-blushes": { intro: "Cor e vida para suas bochechas com a Paleta Beach Face. Quatro tons de blush para todos os momentos.", benefits: "Tons que vão do pêssego ao coral intenso. Combine, misture e crie o rubor perfeito para cada ocasião.", differential: "Inspirada nas praias brasileiras, essa paleta FR traz cores que iluminam qualquer tom de pele.", measures: [ { label: "Peso total", value: "12g" }, ], precautions: "Uso externo. Mantenha fora do alcance de crianças.", ingredients: "Talc, Mica, Octyldodecyl Stearoyl Stearate, Zinc Stearate, Iron Oxides, Red 7 Lake, Phenoxyethanol.", }, // KITS "bride-kit": { intro: "O kit perfeito para noivas e momentos especiais. O Bride Kit reúne os essenciais para lábios irresistíveis no grande dia.", benefits: "Embalagem presenteável em formato de anel de diamante. Inclui glosses em tons românticos perfeitos para ocasiões especiais.", differential: "Criado com carinho pela FR para celebrar o amor. Cada tom foi selecionado para complementar makes de noiva.", highlight: "Embalagem colecionável que vira item de decoração após o uso.", precautions: "Mantenha os produtos em local fresco e seco. Após abertos, usar em até 12 meses.", ingredients: "Polybutene, Octyldodecanol, Silica Dimethyl Silylate, Ethylhexyl Palmitate, Iron Oxides, Mica.", }, "kit-chillicake": { intro: "Doce e picante em uma combinação irresistível. O Kit ChilliCake traz glosses que vão do suave ao intenso.", benefits: "Coleção completa para variar o look conforme o humor. Embalagem presenteável para dar ou se dar de presente.", differential: "Linha icônica FR que combina cores vibrantes com o efeito plump que você ama. Exclusivo e desejado.", precautions: "Alguns glosses contêm efeito plump com sensação de formigamento. Normal e esperado.", ingredients: "Polybutene, Octyldodecanol, Capsicum Frutescens Fruit Extract, Iron Oxides, Mica, Titanium Dioxide.", }, "love-kit": { intro: "Declare seu amor pelos lábios perfeitos. O Love Kit combina gloss e lápis labial em tons que se complementam.", benefits: "Duo perfeito para contorno e preenchimento. Lábios definidos e brilhantes com apenas dois produtos.", differential: "Combinação pensada pela FR para facilitar sua rotina. Tons que funcionam sozinhos ou juntos.", precautions: "Uso externo. Mantenha os produtos bem fechados após o uso.", ingredients: "Gloss: Polybutene, Octyldodecanol, Silica. Lápis: Hydrogenated Vegetable Oil, Ozokerite, Iron Oxides.", }, "kit-chocoeyes": { intro: "Olhos de chocolate: marcantes e irresistíveis. O Kit ChocoEyes traz máscara marrom e lápis para um olhar sofisticado.", benefits: "Alternativa elegante ao preto tradicional. O tom marrom suaviza o olhar e é perfeito para o dia a dia.", differential: "Combinação exclusiva FR para quem quer inovar no make de olhos. Máscara que alonga e lápis que define.", precautions: "Evite contato direto com os olhos. Em caso de irritação, suspenda o uso e consulte um oftalmologista.", ingredients: "Máscara: Aqua, Cera Alba, Stearic Acid, Iron Oxides. Lápis: Hydrogenated Vegetable Oil, Ozokerite, Iron Oxides.", }, "kit-glosslicious": { intro: "Três glosses deliciosos em um só kit. O Glosslicious é a coleção perfeita para quem não consegue escolher apenas um tom.", benefits: "Varie o visual de acordo com o momento. Texturas confortáveis que hidratam e embelezam simultaneamente.", differential: "Seleção FR com os tons mais pedidos. Embalagem especial para presentear ou montar sua coleção.", precautions: "Uso externo. Mantenha longe do calor excessivo.", ingredients: "Polybutene, Octyldodecanol, Silica Dimethyl Silylate, Pentaerythrityl Tetraisostearate, Iron Oxides, Mica.", }, // CHILLI LOVERS "pink-chilli": { intro: "Rosa vibrante com efeito plump para lábios que chamam atenção. O Pink Chilli é ousadia em forma de gloss.", benefits: "Cor intensa que se destaca em qualquer ocasião. Efeito volume que você sente imediatamente após a aplicação.", differential: "Da linha icônica Chilli Lovers da FR. Combinação perfeita de cor e sensação.", highlight: "O tom rosa mais desejado da coleção Chilli.", precautions: "Sensação de formigamento é normal. Evite aplicar em lábios com feridas.", ingredients: "Polybutene, Octyldodecanol, Capsicum Frutescens Fruit Extract, Iron Oxides, Red 7 Lake.", }, "green-chilli": { intro: "Surpreendente e único: o Green Chilli transforma a cor dos seus lábios de forma personalizada.", benefits: "Reage com o pH dos seus lábios criando um tom exclusivamente seu. Ninguém terá a mesma cor que você!", differential: "Tecnologia exclusiva FR de mudança de cor. O verde se transforma no seu rosa perfeito.", highlight: "Efeito mágico que impressiona e diverte.", precautions: "O resultado varia de acordo com cada pessoa. Sensação de formigamento é esperada.", ingredients: "Polybutene, Octyldodecanol, Capsicum Frutescens Fruit Extract, Red 27 Lake.", }, "choco-chilli": { intro: "Chocolate com pimenta: a combinação irresistível agora nos seus lábios. O Choco Chilli é sofisticação e ousadia.", benefits: "Tom marrom sofisticado com efeito plump que deixa os lábios volumosos e irresistíveis.", differential: "Da coleção Chilli Lovers, o tom mais elegante para quem ama um visual marcante.", precautions: "Sensação de formigamento é normal e indica que o produto está funcionando.", ingredients: "Polybutene, Octyldodecanol, Capsicum Frutescens Fruit Extract, Iron Oxides, Mica.", }, }; [V0_FILE]typescriptreact:file="app/busca/page.tsx" "use client"; import { useState, useEffect } from "react"; import { useSearchParams } from "next/navigation"; import Image from "next/image"; import Link from "next/link"; import { Search } from "lucide-react"; import { AnnouncementBar } from "@/components/fran/announcement-bar"; import { Header } from "@/components/fran/header"; import { WhatsAppButton } from "@/components/fran/whatsapp-button"; import { BackToTop } from "@/components/fran/back-to-top"; import { searchProducts, type Product } from "@/lib/products-data"; export default function BuscaPage() { const searchParams = useSearchParams(); const initialQuery = searchParams.get("q") || ""; const [query, setQuery] = useState(initialQuery); const [results, setResults] = useState([]); // Atualiza resultados quando query muda useEffect(() => { const filtered = searchProducts(query); setResults(filtered); }, [query]); // Atualiza query quando searchParams muda useEffect(() => { const q = searchParams.get("q") || ""; setQuery(q); }, [searchParams]); return (

{/* Campo de Busca */}

setQuery(e.target.value)} className="bg-transparent text-lg text-black placeholder:text-black/50 outline-none w-full" autoFocus />

{/* Resultados */}

{/* Header de Resultados */}

{query ? (

{results.length} resultado{results.length !== 1 ? "s" : ""} para{" "} "{query}"

) : (

Todos os produtos ({results.length})

)}

{/* Grid de Produtos */} {results.length > 0 ? (

{results.map((product) => ( {/* Imagem */}

{product.onSale && ( SALE )}

{/* Info */}

{product.name}

{product.originalPrice && ( R$ {product.originalPrice.toFixed(2).replace(".", ",")} )} R$ {product.price.toFixed(2).replace(".", ",")}

))}

) : (

Nenhum produto encontrado para "{query}"

Tente buscar por outro termo ou navegue pelas categorias

)}

); } [V0_FILE]typescriptreact:file="app/busca/loading.tsx" export default function Loading() { return null; } [V0_FILE]typescriptreact:file="components/fran/header.tsx" "use client"; import React, { useState, useEffect, useRef } from "react"; import { useRouter } from "next/navigation"; import Link from "next/link"; import { Search, User, ShoppingBag, Menu, X } from "lucide-react"; import { searchProducts, type Product } from "@/lib/products-data"; const navItems = [ { label: "LÁBIOS", href: "/categoria/labios" }, { label: "OLHOS", href: "/categoria/olhos" }, { label: "ROSTO", href: "/categoria/rosto" }, { label: "KITS", href: "/categoria/kits" }, { label: "TODOS OS PRODUTOS", href: "/#produtos" }, ]; interface HeaderProps { onCartClick?: () => void; onProfileClick?: () => void; profileHref?: string; cartHref?: string; } export function Header({ onCartClick, onProfileClick, profileHref = "#", cartHref = "#", }: HeaderProps) { const router = useRouter(); const [isSearchOpen, setIsSearchOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [searchQuery, setSearchQuery] = useState(""); const [suggestions, setSuggestions] = useState([]); const [showSuggestions, setShowSuggestions] = useState(false); const searchRef = useRef(null); const mobileSearchRef = useRef(null); // Filtra sugestoes enquanto digita useEffect(() => { if (searchQuery.trim().length >= 2) { const results = searchProducts(searchQuery).slice(0, 5); setSuggestions(results); setShowSuggestions(true); } else { setSuggestions([]); setShowSuggestions(false); } }, [searchQuery]); // Fecha sugestoes ao clicar fora useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( searchRef.current && !searchRef.current.contains(event.target as Node) && mobileSearchRef.current && !mobileSearchRef.current.contains(event.target as Node) ) { setShowSuggestions(false); } }; document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, []); const handleSearch = (e: React.FormEvent) => { e.preventDefault(); if (searchQuery.trim()) { router.push(`/busca?q=${encodeURIComponent(searchQuery.trim())}`); setIsSearchOpen(false); setShowSuggestions(false); } }; const handleSuggestionClick = (href: string) => { setSearchQuery(""); setSuggestions([]); setShowSuggestions(false); setIsSearchOpen(false); router.push(href); }; return (

{/* Main Header */}

{/* Left - Search */}

setSearchQuery(e.target.value)} onFocus={() => searchQuery.trim().length >= 2 && setShowSuggestions(true)} className="bg-transparent text-sm text-black/70 placeholder:text-black/70 outline-none w-28 focus:w-40 transition-all font-normal" /> {/* Desktop Suggestions Dropdown */} {showSuggestions && suggestions.length > 0 && (

{suggestions.map((product) => ( ))} setShowSuggestions(false)} className="block w-full p-3 text-xs text-center text-black/70 hover:bg-gray-50 border-t border-gray-200" > Ver todos os resultados

)}

{/* Center - Logo */}

F R A N

BY FRANCINY EHLKE

{/* Right - Icons */}

{/* Desktop Navigation */} {/* Mobile Search */} {isSearchOpen && (

setSearchQuery(e.target.value)} className="bg-transparent text-sm text-foreground placeholder:text-foreground outline-none w-full" autoFocus /> {/* Mobile Suggestions Dropdown */} {showSuggestions && suggestions.length > 0 && (

{suggestions.map((product) => ( ))} { setShowSuggestions(false); setIsSearchOpen(false); }} className="block w-full p-4 text-xs text-center text-black/70 hover:bg-gray-50 border-t border-gray-200" > Ver todos os resultados

)}

)} {/* Mobile Menu */} {isMobileMenuOpen && (

)}

); } [V0_FILE]typescriptreact:file="components/fran/footer.tsx" "use client"; import React from "react" import { useState } from "react"; import Link from "next/link"; import Image from "next/image"; import { Instagram, ArrowRight } from "lucide-react"; // TikTok icon function TikTokIcon({ className }: { className?: string }) { return ( ); } // Facebook icon function FacebookIcon({ className }: { className?: string }) { return ( ); } export function FranFooter() { const [email, setEmail] = useState(""); const handleNewsletterSubmit = (e: React.FormEvent) => { e.preventDefault(); // Visual only - no real integration if (email.trim()) { alert("Obrigada por se inscrever!"); setEmail(""); } }; return ( ); } [V0_FILE]typescriptreact:file="app/page.tsx" "use client"; import { useState } from "react"; import { AnnouncementBar } from "@/components/fran/announcement-bar"; import { Header } from "@/components/fran/header"; import { HeroCarousel } from "@/components/fran/hero-carousel"; import { WhatsAppButton } from "@/components/fran/whatsapp-button"; import { BenefitsBar } from "@/components/fran/benefits-bar"; import { ProductsSection, type Product } from "@/components/fran/products-section"; import { CategoriesSection } from "@/components/fran/categories-section"; import { BackToTop } from "@/components/fran/back-to-top"; import { CollectionsSection } from "@/components/fran/collections-section"; import { FavoritoSection } from "@/components/fran/favorito-section"; import { VideoShowcaseSection } from "@/components/fran/video-showcase-section"; import { FranFooter } from "@/components/fran/footer"; // LANCAMENTOS - Todos os produtos novos const lancamentos: Product[] = [ { id: "1", name: "ARGOLA MOSQUETAO CATAFORESE COM FR FRAN BY FRANCINY EHLKE", price: 15.90, image: "https://franbyfr.com.br/cdn/shop/files/mosquetao-fran-by-franciny-ehlke-01.jpg?v=1765562803&width=1500", href: "/produto/argola-mosquetao", }, { id: "2", name: "BRIDE KIT FRAN BY FRANCINY EHLKE", price: 139.90, image: "/products/bride-kit.jpg", href: "/produto/bride-kit", }, { id: "3", name: "KIT CHILLICAKE FRAN BY FRANCINY EHLKE", price: 149.90, image: "/products/chilli-cake-kit.jpg", href: "/produto/kit-chillicake", }, { id: "4", name: "CERA PARA SOBRANCELHAS TRANSPARENTE FRANBROW FRAN BY FRANCINY EHLKE", price: 49.90, image: "/products/cera-sobrancelha.jpg", href: "/produto/cera-sobrancelhas", }, { id: "5", name: "MÁSCARA PARA SOBRANCELHAS MULTIFUNCIONAL 02 FRANBROW FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/mascara-sobrancelha-02.jpg", href: "/produto/mascara-sobrancelhas-02", }, { id: "6", name: "MÁSCARA PARA SOBRANCELHAS MULTIFUNCIONAL 01 FRANBROW FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/mascara-sobrancelha-01.jpg", href: "/produto/mascara-sobrancelhas-01", }, { id: "7", name: "LOVE KIT GLOSS LABIAL E LÁPIS LABIAL FRAN BY FRANCINY EHLKE", price: 129.90, image: "/products/love-kit.jpg", href: "/produto/love-kit", }, { id: "8", name: "KIT FRAN CHOCOEYES MÁSCARA CÍLIOS MARROM E LÁPIS MULTIFUNCIONAL FRAN BY FRANCINY EHLKE", price: 94.90, image: "/products/chocoeyes-kit.jpg", href: "/produto/kit-chocoeyes", }, ]; // LABIOS - Gloss, batom, labial const labios: Product[] = [ { id: "l1", name: "GLOSS LIP BUNNY FRAN BY FRANCINY EHLKE", price: 65.90, image: "/products/gloss-lip-bunny.jpg", href: "/produto/gloss-lip-bunny", }, { id: "l2", name: "KIT FRAN GLOSSLICIOUS FRAN BY FRANCINY EHLKE", price: 109.90, image: "/products/kit-glosslicious.jpg", href: "/produto/kit-glosslicious", }, { id: "l3", name: "GLOSS AUMENTO VOLUME LÁBIOS LIPCHILLI FRAN BY FRANCINY EHLKE", price: 49.90, image: "/products/lipchilli-gloss.jpg", href: "/produto/gloss-lipchilli", }, { id: "l4", name: "GLOSS GLOSSIP GOLD FRAN BY FRANCINY EHLKE", price: 49.90, image: "/products/gloss-glossip-gold.jpg", href: "/produto/gloss-glossip-gold", }, { id: "l5", name: "GLOSS GLOSSIP GIRL FRAN BY FRANCINY EHLKE", price: 49.90, image: "/products/gloss-glossip-girl.jpg", href: "/produto/gloss-glossip-girl", }, { id: "l6", name: "BRIDE KIT FRAN BY FRANCINY EHLKE", price: 139.90, image: "/products/bride-kit.jpg", href: "/produto/bride-kit", }, { id: "l7", name: "KIT CHILLICAKE FRAN BY FRANCINY EHLKE", price: 149.90, image: "/products/chilli-cake-kit.jpg", href: "/produto/kit-chillicake", }, { id: "l8", name: "LOVE KIT GLOSS LABIAL E LÁPIS LABIAL FRAN BY FRANCINY EHLKE", price: 129.90, image: "/products/love-kit.jpg", href: "/produto/love-kit", }, ]; // OLHOS - Mascara, sobrancelha, cilios const olhos: Product[] = [ { id: "o1", name: "CERA PARA SOBRANCELHAS TRANSPARENTE FRANBROW FRAN BY FRANCINY EHLKE", price: 49.90, image: "/products/cera-sobrancelha.jpg", href: "/produto/cera-sobrancelhas", }, { id: "o2", name: "MÁSCARA PARA SOBRANCELHAS MULTIFUNCIONAL 02 FRANBROW FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/mascara-sobrancelha-02.jpg", href: "/produto/mascara-sobrancelhas-02", }, { id: "o3", name: "MÁSCARA PARA SOBRANCELHAS MULTIFUNCIONAL 01 FRANBROW FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/mascara-sobrancelha-01.jpg", href: "/produto/mascara-sobrancelhas-01", }, { id: "o4", name: "KIT FRAN CHOCOEYES MÁSCARA CÍLIOS MARROM E LÁPIS MULTIFUNCIONAL FRAN BY FRANCINY EHLKE", price: 94.90, image: "/products/chocoeyes-kit.jpg", href: "/produto/kit-chocoeyes", }, { id: "o5", name: "PALETA SOMBRAS NINE ESSENTIALS FRAN BY FRANCINY EHLKE", price: 149.90, image: "/products/paleta-sombras-nine.jpg", href: "/produto/paleta-sombras-nine", }, { id: "o6", name: "LAPISEIRA PARA SOBRANCELHAS MULTIFUNCIONAL 01 FRANBROW FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/lapiseira-sobrancelha-01.jpg", href: "/produto/lapiseira-sobrancelhas-01", }, { id: "o7", name: "LAPISEIRA PARA SOBRANCELHAS MULTIFUNCIONAL 02 FRANBROW FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/lapiseira-sobrancelha-02.jpg", href: "/produto/lapiseira-sobrancelhas-02", }, ]; // ROSTO - Base, primer, corretivo, po const rosto: Product[] = [ { id: "r1", name: "BASE MATE REAL FILTER M-02 FRAN BY FRANCINY EHLKE", price: 73.90, image: "/products/base-mate-filter.jpg", href: "/produto/base-mate-m02", }, { id: "r2", name: "CORRETIVO STICK COVER ROSE FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/corretivo-stick-rose.jpg", href: "/produto/corretivo-stick-rose", }, { id: "r3", name: "PO FACIAL SOLTO PLUSH 2 FRAN BY FRANCINY EHLKE", price: 69.90, image: "/products/po-facial-plush.jpg", href: "/produto/po-facial-plush-2", }, { id: "r4", name: "PRIMER FACIAL FRANSHINE FRAN BY FRANCINY EHLKE", price: 73.90, image: "/products/primer-franshine.jpg", href: "/produto/primer-franshine", }, { id: "r5", name: "CORRETIVO STICK COVER C-01 FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/corretivo-stick-c01.jpg", href: "/produto/corretivo-stick-c01", }, { id: "r6", name: "BASE MATE REAL FILTER E-04 FRAN BY FRANCINY EHLKE", price: 36.95, originalPrice: 73.90, image: "/products/base-mate-e04.jpg", href: "/produto/base-mate-e04", onSale: true, }, { id: "r7", name: "PALETA ILUMINADORES GRITANI FRAN BY FRANCINY EHLKE", price: 149.90, image: "/products/paleta-iluminadores.jpg", href: "/produto/paleta-iluminadores", }, { id: "r8", name: "PALETA CONTORNOS YOUR BROWNS FRAN BY FRANCINY EHLKE", price: 149.90, image: "/products/paleta-contornos.jpg", href: "/produto/paleta-contornos", }, { id: "r9", name: "PALETA BLUSHES BEACH FACE FRAN BY FRANCINY EHLKE", price: 149.90, image: "/products/paleta-blushes.jpg", href: "/produto/paleta-blushes", }, { id: "r10", name: "PALETA SOMBRAS NINE ESSENTIALS FRAN BY FRANCINY EHLKE", price: 149.90, image: "/products/paleta-sombras-nine.jpg", href: "/produto/paleta-sombras-nine", }, ]; // CHILLI LOVERS - Linha Chilli const chilliLovers: Product[] = [ { id: "ch1", name: "PINK CHILLI FRAN BY FRANCINY EHLKE EDIÇÃO LIMITADA", price: 57.90, image: "/products/pink-chilli.jpg", href: "/produto/pink-chilli", }, { id: "ch2", name: "GREENCHILLI FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/green-chilli.jpg", href: "/produto/green-chilli", }, { id: "ch3", name: "CHOCOCHILLI FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/choco-chilli.jpg", href: "/produto/choco-chilli", }, { id: "ch4", name: "GLOSS AUMENTO VOLUME LÁBIOS LIPCHILLI FRAN BY FRANCINY EHLKE", price: 49.90, image: "/products/lipchilli-gloss.jpg", href: "/produto/gloss-lipchilli", }, ]; // MAIS VENDIDOS - Best sellers const maisVendidos: Product[] = [ { id: "mv1", name: "GLOSS LIPHONEY FRAN BY FRANCINY EHLKE", price: 69.90, image: "/products/gloss-liphoney.jpg", href: "/produto/gloss-liphoney", }, { id: "mv2", name: "PO FACIAL SOLTO PLUSH 1 FRAN BY FRANCINY EHLKE", price: 69.90, image: "/products/po-facial-plush-1.jpg", href: "/produto/po-facial-plush-1", }, { id: "mv3", name: "CANETA DELINEADORA PULLPEN FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/caneta-delineadora.jpg", href: "/produto/caneta-delineadora", }, { id: "mv4", name: "CORRETIVO STICK COVER ROSE FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/corretivo-stick-rose.jpg", href: "/produto/corretivo-stick-rose", }, { id: "mv5", name: "BRIDE KIT FRAN BY FRANCINY EHLKE", price: 139.90, image: "/products/bride-kit.jpg", href: "/produto/bride-kit", }, { id: "mv6", name: "KIT CHILLICAKE FRAN BY FRANCINY EHLKE", price: 149.90, image: "/products/chilli-cake-kit.jpg", href: "/produto/kit-chillicake", }, { id: "mv7", name: "PALETA BLUSHES BEACH FACE FRAN BY FRANCINY EHLKE", price: 149.90, image: "/products/paleta-blushes.jpg", href: "/produto/paleta-blushes", }, { id: "mv8", name: "MASCARA PARA SOBRANCELHAS MULTIFUNCIONAL 02 FRANBROW FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/mascara-sobrancelha-02.jpg", href: "/produto/mascara-sobrancelhas-02", }, ]; // KITS - Todos os kits const kits: Product[] = [ { id: "k1", name: "BRIDE KIT FRAN BY FRANCINY EHLKE", price: 139.90, image: "/products/bride-kit.jpg", href: "/produto/bride-kit", }, { id: "k2", name: "KIT CHILLICAKE FRAN BY FRANCINY EHLKE", price: 149.90, image: "/products/chilli-cake-kit.jpg", href: "/produto/kit-chillicake", }, { id: "k3", name: "LOVE KIT GLOSS LABIAL E LÁPIS LABIAL FRAN BY FRANCINY EHLKE", price: 129.90, image: "/products/love-kit.jpg", href: "/produto/love-kit", }, { id: "k4", name: "KIT FRAN CHOCOEYES MÁSCARA CÍLIOS MARROM E LÁPIS MULTIFUNCIONAL FRAN BY FRANCINY EHLKE", price: 94.90, image: "/products/chocoeyes-kit.jpg", href: "/produto/kit-chocoeyes", }, ]; export default function HomePage() { const [isCartOpen, setIsCartOpen] = useState(false); return (

setIsCartOpen(!isCartOpen)} />

{/* Lancamentos */} {/* Olhos */}

{/* Rosto */}

{/* Kits */}

{/* Todos os Produtos */}

{/* Chilli Lovers */} {/* Compre por Categoria */} {/* O Favorito da Fran */} {/* Colecoes - LipHoney, ChocoEyes, ChiliCake */} {/* Mais Vendidos */} {/* Video Showcase */}

); } [V0_FILE]typescriptreact:file="components/fran/favorito-section.tsx" import Image from "next/image"; import Link from "next/link"; export function FavoritoSection() { return (

{/* Video - Left Side */}

{/* Content - Right Side */}

O FAVORITO DA FRAN

{'"'}Ilumina, hidrata e suaviza os poros, deixando a pele{" "} pronta{" "} para uma make impecavel — do jeitinho que a Fran ama.{'"'}

{/* Product Image */}

{/* Product Name */}

FRANSHINE PRIMER ILUMINADOR

{/* Product Price */}

R$ 73,90

{/* CTA Button */} COMPRAR AGORA

); } [V0_FILE]jpg:file="public/banners/collection-liphoney.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-IFMFMhbBYCxrNl0AlCdL9MgC6rTbxS.png" [V0_FILE]typescriptreact:file="components/fran/collections-section.tsx" import Image from "next/image"; import Link from "next/link"; const collections = [ { title: "LIPHONEY", slug: "gloss-liphoney", }, { title: "CHOCOEYES", slug: "kit-chocoeyes", }, { title: "CHILLICAKE", slug: "kit-chillicake", }, ]; export function CollectionsSection() { return (

{/* Banner Image */}

Coleções FRAN - LIPHONEY, CHOCOEYES, CHILLICAKE

{/* Overlay Links - Grid de 3 colunas sobre a imagem */}

{collections.map((collection) => ( ))}

); } [V0_FILE]typescript:file="lib/products-data.ts" export interface Product { id: string; name: string; price: number; originalPrice?: number; image: string; href?: string; soldOut?: boolean; onSale?: boolean; } // LANCAMENTOS - Todos os produtos novos export const lancamentos: Product[] = [ { id: "1", name: "ARGOLA MOSQUETAO CATAFORESE COM FR FRAN BY FRANCINY EHLKE", price: 15.90, image: "https://franbyfr.com.br/cdn/shop/files/mosquetao-fran-by-franciny-ehlke-01.jpg?v=1765562803&width=1500", href: "/produto/argola-mosquetao", }, { id: "2", name: "BRIDE KIT FRAN BY FRANCINY EHLKE", price: 139.90, image: "/products/bride-kit.jpg", href: "/produto/bride-kit", }, { id: "3", name: "KIT CHILLICAKE FRAN BY FRANCINY EHLKE", price: 149.90, image: "/products/chilli-cake-kit.jpg", href: "/produto/kit-chillicake", }, { id: "4", name: "CERA PARA SOBRANCELHAS TRANSPARENTE FRANBROW FRAN BY FRANCINY EHLKE", price: 49.90, image: "/products/cera-sobrancelha.jpg", href: "/produto/cera-sobrancelhas", }, { id: "5", name: "MÁSCARA PARA SOBRANCELHAS MULTIFUNCIONAL 02 FRANBROW FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/mascara-sobrancelha-02.jpg", href: "/produto/mascara-sobrancelhas-02", }, { id: "6", name: "MÁSCARA PARA SOBRANCELHAS MULTIFUNCIONAL 01 FRANBROW FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/mascara-sobrancelha-01.jpg", href: "/produto/mascara-sobrancelhas-01", }, { id: "7", name: "LOVE KIT GLOSS LABIAL E LÁPIS LABIAL FRAN BY FRANCINY EHLKE", price: 129.90, image: "/products/love-kit.jpg", href: "/produto/love-kit", }, { id: "8", name: "KIT FRAN CHOCOEYES MÁSCARA CÍLIOS MARROM E LÁPIS MULTIFUNCIONAL FRAN BY FRANCINY EHLKE", price: 94.90, image: "/products/chocoeyes-kit.jpg", href: "/produto/kit-chocoeyes", }, ]; // LABIOS - Gloss, batom, labial export const labios: Product[] = [ { id: "l1", name: "GLOSS LIP BUNNY FRAN BY FRANCINY EHLKE", price: 65.90, image: "/products/gloss-lip-bunny.jpg", href: "/produto/gloss-lip-bunny", }, { id: "l2", name: "KIT FRAN GLOSSLICIOUS FRAN BY FRANCINY EHLKE", price: 109.90, image: "/products/kit-glosslicious.jpg", href: "/produto/kit-glosslicious", }, { id: "l3", name: "GLOSS AUMENTO VOLUME LÁBIOS LIPCHILLI FRAN BY FRANCINY EHLKE", price: 49.90, image: "/products/lipchilli-gloss.jpg", href: "/produto/gloss-lipchilli", }, { id: "l4", name: "GLOSS GLOSSIP GOLD FRAN BY FRANCINY EHLKE", price: 49.90, image: "/products/gloss-glossip-gold.jpg", href: "/produto/gloss-glossip-gold", }, { id: "l5", name: "GLOSS GLOSSIP GIRL FRAN BY FRANCINY EHLKE", price: 49.90, image: "/products/gloss-glossip-girl.jpg", href: "/produto/gloss-glossip-girl", }, { id: "l6", name: "BRIDE KIT FRAN BY FRANCINY EHLKE", price: 139.90, image: "/products/bride-kit.jpg", href: "/produto/bride-kit", }, { id: "l7", name: "KIT CHILLICAKE FRAN BY FRANCINY EHLKE", price: 149.90, image: "/products/chilli-cake-kit.jpg", href: "/produto/kit-chillicake", }, { id: "l8", name: "LOVE KIT GLOSS LABIAL E LÁPIS LABIAL FRAN BY FRANCINY EHLKE", price: 129.90, image: "/products/love-kit.jpg", href: "/produto/love-kit", }, ]; // OLHOS - Mascara, sobrancelha, cilios export const olhos: Product[] = [ { id: "o1", name: "CERA PARA SOBRANCELHAS TRANSPARENTE FRANBROW FRAN BY FRANCINY EHLKE", price: 49.90, image: "/products/cera-sobrancelha.jpg", href: "/produto/cera-sobrancelhas", }, { id: "o2", name: "MÁSCARA PARA SOBRANCELHAS MULTIFUNCIONAL 02 FRANBROW FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/mascara-sobrancelha-02.jpg", href: "/produto/mascara-sobrancelhas-02", }, { id: "o3", name: "MÁSCARA PARA SOBRANCELHAS MULTIFUNCIONAL 01 FRANBROW FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/mascara-sobrancelha-01.jpg", href: "/produto/mascara-sobrancelhas-01", }, { id: "o4", name: "KIT FRAN CHOCOEYES MÁSCARA CÍLIOS MARROM E LÁPIS MULTIFUNCIONAL FRAN BY FRANCINY EHLKE", price: 94.90, image: "/products/chocoeyes-kit.jpg", href: "/produto/kit-chocoeyes", }, { id: "o5", name: "PALETA SOMBRAS NINE ESSENTIALS FRAN BY FRANCINY EHLKE", price: 149.90, image: "/products/paleta-sombras-nine.jpg", href: "/produto/paleta-sombras-nine", }, { id: "o6", name: "LAPISEIRA PARA SOBRANCELHAS MULTIFUNCIONAL 01 FRANBROW FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/lapiseira-sobrancelha-01.jpg", href: "/produto/lapiseira-sobrancelhas-01", }, { id: "o7", name: "LAPISEIRA PARA SOBRANCELHAS MULTIFUNCIONAL 02 FRANBROW FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/lapiseira-sobrancelha-02.jpg", href: "/produto/lapiseira-sobrancelhas-02", }, ]; // ROSTO - Base, primer, corretivo, po export const rosto: Product[] = [ { id: "r1", name: "BASE MATE REAL FILTER M-02 FRAN BY FRANCINY EHLKE", price: 73.90, image: "/products/base-mate-filter.jpg", href: "/produto/base-mate-m02", }, { id: "r2", name: "CORRETIVO STICK COVER ROSE FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/corretivo-stick-rose.jpg", href: "/produto/corretivo-stick-rose", }, { id: "r3", name: "PO FACIAL SOLTO PLUSH 2 FRAN BY FRANCINY EHLKE", price: 69.90, image: "/products/po-facial-plush.jpg", href: "/produto/po-facial-plush-2", }, { id: "r4", name: "PRIMER FACIAL FRANSHINE FRAN BY FRANCINY EHLKE", price: 73.90, image: "/products/primer-franshine.jpg", href: "/produto/primer-franshine", }, { id: "r5", name: "CORRETIVO STICK COVER C-01 FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/corretivo-stick-c01.jpg", href: "/produto/corretivo-stick-c01", }, { id: "r6", name: "BASE MATE REAL FILTER E-04 FRAN BY FRANCINY EHLKE", price: 36.95, originalPrice: 73.90, image: "/products/base-mate-e04.jpg", href: "/produto/base-mate-e04", onSale: true, }, { id: "r7", name: "PALETA ILUMINADORES GRITANI FRAN BY FRANCINY EHLKE", price: 149.90, image: "/products/paleta-iluminadores.jpg", href: "/produto/paleta-iluminadores", }, { id: "r8", name: "PALETA CONTORNOS YOUR BROWNS FRAN BY FRANCINY EHLKE", price: 149.90, image: "/products/paleta-contornos.jpg", href: "/produto/paleta-contornos", }, { id: "r9", name: "PALETA BLUSHES BEACH FACE FRAN BY FRANCINY EHLKE", price: 149.90, image: "/products/paleta-blushes.jpg", href: "/produto/paleta-blushes", }, { id: "r10", name: "PALETA SOMBRAS NINE ESSENTIALS FRAN BY FRANCINY EHLKE", price: 149.90, image: "/products/paleta-sombras-nine.jpg", href: "/produto/paleta-sombras-nine", }, ]; // CHILLI LOVERS - Linha Chilli export const chilliLovers: Product[] = [ { id: "ch1", name: "PINK CHILLI FRAN BY FRANCINY EHLKE EDIÇÃO LIMITADA", price: 57.90, image: "/products/pink-chilli.jpg", href: "/produto/pink-chilli", }, { id: "ch2", name: "GREENCHILLI FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/green-chilli.jpg", href: "/produto/green-chilli", }, { id: "ch3", name: "CHOCOCHILLI FRAN BY FRANCINY EHLKE", price: 59.90, image: "/products/choco-chilli.jpg", href: "/produto/choco-chilli", }, { id: "ch4", name: "GLOSS AUMENTO VOLUME LÁBIOS LIPCHILLI FRAN BY FRANCINY EHLKE", price: 49.90, image: "/products/lipchilli-gloss.jpg", href: "/produto/gloss-lipchilli", }, ]; // KITS - Todos os kits export const kits: Product[] = [ { id: "k1", name: "BRIDE KIT FRAN BY FRANCINY EHLKE", price: 139.90, image: "/products/bride-kit.jpg", href: "/produto/bride-kit", }, { id: "k2", name: "KIT CHILLICAKE FRAN BY FRANCINY EHLKE", price: 149.90, image: "/products/chilli-cake-kit.jpg", href: "/produto/kit-chillicake", }, { id: "k3", name: "LOVE KIT GLOSS LABIAL E LÁPIS LABIAL FRAN BY FRANCINY EHLKE", price: 129.90, image: "/products/love-kit.jpg", href: "/produto/love-kit", }, { id: "k4", name: "KIT FRAN CHOCOEYES MÁSCARA CÍLIOS MARROM E LÁPIS MULTIFUNCIONAL FRAN BY FRANCINY EHLKE", price: 94.90, image: "/products/chocoeyes-kit.jpg", href: "/produto/kit-chocoeyes", }, ]; // Dados das categorias export interface CategoryData { slug: string; title: string; description: string; highlightText: string; banner: string; products: Product[]; } // Array de categorias para navegacao export const categories: CategoryData[] = [ { slug: "labios", title: "LABIOS", description: "Cores, texturas e acabamentos... tudo em Fran by FR pra boca nunca ser basica.", highlightText: "Fran by FR", banner: "/banners/labios-banner.jpg", products: labios, }, { slug: "olhos", title: "OLHOS", description: "Realce seu olhar com produtos desenvolvidos para sobrancelhas, cilios e palpebras perfeitas.", highlightText: "Fran by FR", banner: "/banners/olhos-banner.jpg", products: olhos, }, { slug: "rosto", title: "ROSTO", description: "Base, corretivo, po e muito mais para uma pele impecavel com Fran by FR.", highlightText: "Fran by FR", banner: "/banners/rosto-banner.jpg", products: rosto, }, { slug: "kits", title: "KITS", description: "Combinacoes perfeitas em kits exclusivos Fran by FR para presentear ou se presentear.", highlightText: "Fran by FR", banner: "/banners/kits-banner.jpg", products: kits, }, ]; export const categoriesData: Record = { labios: { slug: "labios", title: "LÁBIOS", description: "Cores, texturas e acabamentos... tudo em Fran by FR pra boca nunca ser básica.", highlightText: "Fran by FR", bannerImage: "/banners/labios-banner.jpg", products: labios, }, olhos: { slug: "olhos", title: "OLHOS", description: "Realce seu olhar com produtos desenvolvidos para sobrancelhas, cílios e pálpebras perfeitas.", highlightText: "Fran by FR", bannerImage: "/banners/olhos-banner.jpg", products: olhos, }, rosto: { slug: "rosto", title: "ROSTO", description: "Base, corretivo, pó e muito mais para uma pele impecável com Fran by FR.", highlightText: "Fran by FR", bannerImage: "/banners/rosto-banner.jpg", products: rosto, }, kits: { slug: "kits", title: "KITS", description: "Combinações perfeitas em kits exclusivos Fran by FR para presentear ou se presentear.", highlightText: "Fran by FR", bannerImage: "/banners/kits-banner.jpg", products: kits, }, }; // Todos os produtos para busca export const allProducts: Product[] = [ ...lancamentos, ...labios, ...olhos, ...rosto, ...chilliLovers, ...kits, ]; // Funcao de busca - filtra por nome e categoria export function searchProducts(query: string): Product[] { if (!query || query.trim() === "") { return allProducts; } const searchTerm = query.toLowerCase().trim(); // Remove duplicados pelo nome e filtra const uniqueProducts = allProducts.filter((product, index, self) => index === self.findIndex((p) => p.name === product.name) ); return uniqueProducts.filter((product) => { return product.name.toLowerCase().includes(searchTerm); }); } [V0_FILE]typescriptreact:file="app/produto/[slug]/page.tsx" "use client"; import { useState, use } from "react"; import Image from "next/image"; import Link from "next/link"; import { ChevronLeft, ChevronRight, ShoppingCart } from "lucide-react"; import { AnnouncementBar } from "@/components/fran/announcement-bar"; import { Header } from "@/components/fran/header"; import { WhatsAppButton } from "@/components/fran/whatsapp-button"; import { BackToTop } from "@/components/fran/back-to-top"; import { ProductDescription } from "@/components/fran/product-description"; import { productDescriptions } from "@/lib/product-descriptions"; // Dados dos produtos com slugs const productsData: Record = { // ACESSORIOS "argola-mosquetao": { name: "ARGOLA MOSQUETAO CATAFORESE COM FR FRAN BY FRANCINY EHLKE", price: 15.90, images: ["https://franbyfr.com.br/cdn/shop/files/mosquetao-fran-by-franciny-ehlke-01.jpg?v=1765562803&width=1500"], descriptionKey: "argola-mosquetao", inStock: true, }, // LABIOS - GLOSSES "gloss-lip-bunny": { name: "GLOSS LIP BUNNY FRAN BY FRANCINY EHLKE", price: 65.90, images: ["/products/gloss-lip-bunny.jpg"], descriptionKey: "gloss-lip-bunny", inStock: true, }, "gloss-lipchilli": { name: "GLOSS AUMENTO VOLUME LABIOS LIPCHILLI FRAN BY FRANCINY EHLKE", price: 49.90, images: ["/products/lipchilli-gloss.jpg"], descriptionKey: "gloss-lipchilli", inStock: true, }, "gloss-glossip-gold": { name: "GLOSS GLOSSIP GOLD FRAN BY FRANCINY EHLKE", price: 49.90, images: ["/products/gloss-glossip-gold.jpg"], descriptionKey: "gloss-glossip-gold", inStock: true, }, "gloss-glossip-girl": { name: "GLOSS GLOSSIP GIRL FRAN BY FRANCINY EHLKE", price: 49.90, images: ["/products/gloss-glossip-girl.jpg"], descriptionKey: "gloss-glossip-girl", inStock: true, }, "gloss-liphoney": { name: "GLOSS LIPHONEY FRAN BY FRANCINY EHLKE", price: 69.90, images: ["/products/gloss-liphoney.jpg"], descriptionKey: "gloss-liphoney", inStock: true, }, "kit-glosslicious": { name: "KIT FRAN GLOSSLICIOUS FRAN BY FRANCINY EHLKE", price: 109.90, images: ["/products/kit-glosslicious.jpg"], descriptionKey: "kit-glosslicious", inStock: true, }, // OLHOS "cera-sobrancelhas": { name: "CERA PARA SOBRANCELHAS TRANSPARENTE FRANBROW FRAN BY FRANCINY EHLKE", price: 49.90, images: ["/products/cera-sobrancelha.jpg"], descriptionKey: "cera-sobrancelhas", inStock: true, }, "mascara-sobrancelhas-01": { name: "MASCARA PARA SOBRANCELHAS MULTIFUNCIONAL 01 FRANBROW FRAN BY FRANCINY EHLKE", price: 59.90, images: ["/products/mascara-sobrancelha-01.jpg"], descriptionKey: "mascara-sobrancelhas-01", inStock: true, }, "mascara-sobrancelhas-02": { name: "MASCARA PARA SOBRANCELHAS MULTIFUNCIONAL 02 FRANBROW FRAN BY FRANCINY EHLKE", price: 59.90, images: ["/products/mascara-sobrancelha-02.jpg"], descriptionKey: "mascara-sobrancelhas-02", inStock: true, }, "lapiseira-sobrancelhas-01": { name: "LAPISEIRA PARA SOBRANCELHAS MULTIFUNCIONAL 01 FRANBROW FRAN BY FRANCINY EHLKE", price: 59.90, images: ["/products/lapiseira-sobrancelha-01.jpg"], descriptionKey: "lapiseira-sobrancelhas-01", inStock: true, }, "lapiseira-sobrancelhas-02": { name: "LAPISEIRA PARA SOBRANCELHAS MULTIFUNCIONAL 02 FRANBROW FRAN BY FRANCINY EHLKE", price: 59.90, images: ["/products/lapiseira-sobrancelha-02.jpg"], descriptionKey: "lapiseira-sobrancelhas-02", inStock: true, }, "paleta-sombras-nine": { name: "PALETA SOMBRAS NINE ESSENTIALS FRAN BY FRANCINY EHLKE", price: 149.90, images: ["/products/paleta-sombras-nine.jpg"], descriptionKey: "paleta-sombras-nine", inStock: true, }, "caneta-delineadora": { name: "CANETA DELINEADORA PULLPEN FRAN BY FRANCINY EHLKE", price: 59.90, images: ["/products/caneta-delineadora.jpg"], descriptionKey: "caneta-delineadora", inStock: true, }, // ROSTO "base-mate-m02": { name: "BASE MATE REAL FILTER M-02 FRAN BY FRANCINY EHLKE", price: 73.90, images: ["/products/base-mate-filter.jpg"], descriptionKey: "base-mate-m02", inStock: true, }, "base-mate-e04": { name: "BASE MATE REAL FILTER E-04 FRAN BY FRANCINY EHLKE", price: 36.95, originalPrice: 73.90, images: ["/products/base-mate-e04.jpg"], descriptionKey: "base-mate-e04", inStock: true, }, "corretivo-stick-rose": { name: "CORRETIVO STICK COVER ROSE FRAN BY FRANCINY EHLKE", price: 59.90, images: ["/products/corretivo-stick-rose.jpg"], descriptionKey: "corretivo-stick-rose", inStock: true, }, "corretivo-stick-c01": { name: "CORRETIVO STICK COVER C-01 FRAN BY FRANCINY EHLKE", price: 59.90, images: ["/products/corretivo-stick-c01.jpg"], descriptionKey: "corretivo-stick-c01", inStock: true, }, "po-facial-plush-1": { name: "PO FACIAL SOLTO PLUSH 1 FRAN BY FRANCINY EHLKE", price: 69.90, images: ["/products/po-facial-plush-1.jpg"], descriptionKey: "po-facial-plush-1", inStock: true, }, "po-facial-plush-2": { name: "PO FACIAL SOLTO PLUSH 2 FRAN BY FRANCINY EHLKE", price: 69.90, images: ["/products/po-facial-plush.jpg"], descriptionKey: "po-facial-plush-2", inStock: true, }, "primer-franshine": { name: "PRIMER FACIAL FRANSHINE FRAN BY FRANCINY EHLKE", price: 73.90, images: ["/products/primer-franshine.jpg"], descriptionKey: "primer-franshine", inStock: true, }, "paleta-iluminadores": { name: "PALETA ILUMINADORES GRITANI FRAN BY FRANCINY EHLKE", price: 149.90, images: ["/products/paleta-iluminadores.jpg"], descriptionKey: "paleta-iluminadores", inStock: true, }, "paleta-contornos": { name: "PALETA CONTORNOS YOUR BROWNS FRAN BY FRANCINY EHLKE", price: 149.90, images: ["/products/paleta-contornos.jpg"], descriptionKey: "paleta-contornos", inStock: true, }, "paleta-blushes": { name: "PALETA BLUSHES BEACH FACE FRAN BY FRANCINY EHLKE", price: 149.90, images: ["/products/paleta-blushes.jpg"], descriptionKey: "paleta-blushes", inStock: true, }, // CHILLI LOVERS "pink-chilli": { name: "PINK CHILLI FRAN BY FRANCINY EHLKE EDICAO LIMITADA", price: 57.90, images: ["/products/pink-chilli.jpg"], descriptionKey: "pink-chilli", inStock: true, }, "green-chilli": { name: "GREENCHILLI FRAN BY FRANCINY EHLKE", price: 59.90, images: ["/products/green-chilli.jpg"], descriptionKey: "green-chilli", inStock: true, }, "choco-chilli": { name: "CHOCOCHILLI FRAN BY FRANCINY EHLKE", price: 59.90, images: ["/products/choco-chilli.jpg"], descriptionKey: "choco-chilli", inStock: true, }, // KITS "bride-kit": { name: "BRIDE KIT FRAN BY FRANCINY EHLKE", price: 139.90, images: ["/products/bride-kit.jpg"], descriptionKey: "bride-kit", inStock: true, }, "kit-chillicake": { name: "KIT CHILLICAKE FRAN BY FRANCINY EHLKE", price: 149.90, images: ["/products/chilli-cake-kit.jpg"], descriptionKey: "kit-chillicake", inStock: true, }, "love-kit": { name: "LOVE KIT GLOSS LABIAL E LAPIS LABIAL FRAN BY FRANCINY EHLKE", price: 129.90, images: ["/products/love-kit.jpg"], descriptionKey: "love-kit", inStock: true, }, "kit-chocoeyes": { name: "KIT FRAN CHOCOEYES MASCARA CILIOS MARROM E LAPIS MULTIFUNCIONAL FRAN BY FRANCINY EHLKE", price: 94.90, images: ["/products/chocoeyes-kit.jpg"], descriptionKey: "kit-chocoeyes", inStock: true, }, }; function formatPrice(price: number): string { return `R$ ${price.toFixed(2).replace(".", ",")}`; } export default function ProductPage({ params }: { params: Promise<{ slug: string }> }) { const { slug } = use(params); const [selectedImage, setSelectedImage] = useState(0); const [quantity, setQuantity] = useState(1); const product = productsData[slug]; if (!product) { return (

Produto nao encontrado

Voltar para a loja

); } const description = productDescriptions[product.descriptionKey]; const images = product.images.length > 0 ? product.images : ["/placeholder.svg"]; const nextImage = () => { setSelectedImage((prev) => (prev + 1) % images.length); }; const prevImage = () => { setSelectedImage((prev) => (prev - 1 + images.length) % images.length); }; const decreaseQuantity = () => { if (quantity > 1) setQuantity(quantity - 1); }; const increaseQuantity = () => { setQuantity(quantity + 1); }; return (

{/* Breadcrumb */} Voltar

{/* Product Gallery - Left Side */}

{/* Thumbnails */} {images.length > 1 && (

{images.map((img, index) => ( ))}

)} {/* Main Image */}

{/* Navigation Arrows */} {images.length > 1 && ( <> )}

{/* Product Info - Right Side */}

{/* Product Name */}

{product.name}

{/* Price */}

{formatPrice(product.price)} {product.originalPrice && ( {formatPrice(product.originalPrice)} )}

{/* Quantity Selector and Add to Cart */}

{/* Quantity Selector */}

{quantity}

{/* Add to Cart Button */}

{/* Stock Status */}

{product.inStock ? "Em estoque" : "Fora de estoque"}

{/* Product Description with Accordions */} {description && (

)}

); }