```index.tsx import "./index.css"; import React from "react"; import { render } from "react-dom"; import { App } from "./App"; render(, document.getElementById("root")); ``` ```App.tsx import React from 'react' import { Hero } from './components/Hero' import { Benefits } from './components/Benefits' import { Showcase } from './components/Showcase' import { WhyDifferent } from './components/WhyDifferent' import { Gallery } from './components/Gallery' import { Reviews } from './components/Reviews' import { Offer } from './components/Offer' import { FAQ } from './components/FAQ' import { Trust } from './components/Trust' import { Footer } from './components/Footer' export function App() { return (

) } ``` ```index.css @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap'); @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; @tailwind base; @tailwind components; @tailwind utilities; @layer base { html { font-family: 'Inter', sans-serif; scroll-behavior: smooth; } body { @apply bg-white text-[#0A0A0A] antialiased selection:bg-[#FF6B1A] selection:text-white; } } @layer utilities { .text-balance { text-wrap: balance; } .orange-glow { box-shadow: 0 0 80px rgba(255, 107, 26, 0.25); } } ``` ```tailwind.config.js export default {} ``` ```components/Section.tsx import React from 'react' import { motion } from 'framer-motion' interface SectionProps { children: React.ReactNode className?: string id?: string delay?: number } export function Section({ children, className = '', id, delay = 0, }: SectionProps) { return ( {children} ) } ``` ```components/Hero.tsx import React from 'react' import { motion } from 'framer-motion' import { ArrowRight } from 'lucide-react' export function Hero() { return (

{/* Logo / Brand mark */}

✈

IMPORTED FOR YOU.

Nuevo · 20% OFF

La luz LED{' '} portátil que te acompaña a todos lados.

Lectura, trabajo, viajes y uso diario sin usar las manos.

Comprar ahora Ver oferta

{/* Quick trust badges */}

165g

Ultra liviana

20h

De batería

Intensidades

Luz LED portátil para lectura - vista principal

) } ``` ```components/Benefits.tsx import React from 'react' import { BatteryCharging, RotateCw, SunMedium, Hand } from 'lucide-react' import { Section } from './Section' const benefits = [ { icon: BatteryCharging, title: 'Batería recargable', description: 'USB-C de larga duración.', }, { icon: RotateCw, title: 'Brazo flexible', description: 'Se adapta a tu posición.', }, { icon: SunMedium, title: '3 intensidades de luz', description: 'Cálida, neutra y blanca.', }, { icon: Hand, title: 'Uso manos libres', description: 'Diseño ergonómico al cuello.', }, ] export function Benefits() { return (

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

{benefit.title}

{benefit.description}

))}

) } ``` ```components/Showcase.tsx import React from 'react' import { Section } from './Section' const contexts = [ { title: 'Leyendo en la cama', description: 'Luz cálida sin molestar', media: 'https://cdn.magicpatterns.com/uploads/faUhVeJNT4vWgDTsVngbxn/0204d268-6da5-437f-b16c-981a9a71b68c.png', type: 'image', }, { title: 'Control total', description: 'Indicador LED y modos de luz', media: 'https://cdn.magicpatterns.com/uploads/gwxQRvT8WUxPUUvBqwnHGS/电量显示2.mp4', type: 'video', }, { title: 'Calidad superior', description: 'La diferencia se nota', media: 'https://cdn.magicpatterns.com/uploads/beD788pz8oBNswenbYrt1R/comparativa_luz_con_otros.png', type: 'image', }, { title: 'Diseño adaptable', description: 'Brazo flexible 360°', media: 'https://cdn.magicpatterns.com/uploads/bBQBC4WR9JHGAHKWQc972o/567537fb-5394-4fc6-96ac-2182a2f0346c.png', type: 'image', }, ] export function Showcase() { return (

Versatilidad total

Diseñada para cada momento

{contexts.map((ctx, i) => (

{ctx.type === 'video' ? (

) } ``` ```components/WhyDifferent.tsx import React from 'react' import { Section } from './Section' import { Feather, Eye, Maximize, Clock, ShieldCheck } from 'lucide-react' const features = [ { icon: Feather, title: 'Diseño ultra liviano', description: 'Solo 165 gramos. Apenas notarás que la llevas puesta.', }, { icon: Eye, title: 'Luz suave que no cansa la vista', description: '3 tonos: cálida, neutra y blanca, con tecnología anti-parpadeo.', }, { icon: Maximize, title: 'Flexible y portátil', description: 'Brazo manguera adaptable. Se pliega para llevar a cualquier lado.', }, { icon: Clock, title: 'Hasta 20 horas de batería', description: 'Autonomía prolongada con indicador digital en pantalla.', }, { icon: ShieldCheck, title: 'Materiales resistentes', description: 'Silicona premium suave al tacto, terminación negro mate.', }, ] export function WhyDifferent() { return (

Características

¿Por qué esta luz es{' '} diferente?

Pensada en cada detalle para acompañarte donde sea que vayas.

{features.map((feature, index) => (

{feature.title}

{feature.description}

))}

) } ``` ```components/Gallery.tsx import React from 'react' import { Section } from './Section' export function Gallery() { return (

Mirá el detalle

Calidad premium{' '} en cada detalle

{/* Feature image - battery indicator + flexible hose */}

Indicador de batería y manguera flexible

{/* Dimensions image */}

{/* Specs strip */}

Peso

165g

Dimensiones

250mm

Batería

20hs

Color

Negro

) } ``` ```components/Reviews.tsx import React from 'react' import { Section } from './Section' import { Star } from 'lucide-react' const reviews = [ { quote: 'La uso todas las noches.', detail: 'Ideal para no despertar a mi pareja. La luz es súper cómoda.', name: 'Martín G.', location: 'Buenos Aires', }, { quote: 'La batería dura muchísimo.', detail: 'La cargué hace dos semanas y la sigo usando todos los días.', name: 'Sofía L.', location: 'Córdoba', }, { quote: 'Perfecta para leer sin molestar.', detail: 'El brazo flexible es clave para apuntar justo al libro.', name: 'Diego R.', location: 'Rosario', }, { quote: 'Súper liviana y cómoda.', detail: 'Me la llevo a los viajes, no ocupa nada de espacio.', name: 'Carolina M.', location: 'Mendoza', }, ] export function Reviews() { return (

Reseñas reales

Lo que dicen quienes ya la usan

{reviews.map((review, i) => (

{[...Array(5)].map((_, j) => ( ))}

"{review.quote}"

{review.detail}

{review.name}

{review.location}

))}

) } ``` ```components/Offer.tsx import React from 'react' import { Section } from './Section' import { ArrowRight, Truck, Flame, Tag } from 'lucide-react' const badges = [ { icon: Truck, label: 'Envío Gratis con 2+', }, { icon: Flame, label: 'Stock Limitado', }, { icon: Tag, label: 'Hoy 20% OFF', }, ] export function Offer() { return (

{/* Orange glow */}

{badges.map((badge, i) => ( {badge.label} ))}

Llevá tu lectura al{' '} siguiente nivel .

Aprovechá el descuento de hoy. Envío gratis comprando 2 unidades o más.

Pago seguro · Garantía de 7 días

) } ``` ```components/FAQ.tsx import React, { useState } from 'react' import { Section } from './Section' import { motion, AnimatePresence } from 'framer-motion' import { Plus, Minus } from 'lucide-react' const faqs = [ { question: '¿Cuánto dura la batería?', answer: 'La batería dura hasta 20 horas en la intensidad más baja y aproximadamente 6 horas en la intensidad máxima. Cuenta con un indicador digital en pantalla para que sepas en todo momento cuánta carga te queda.', }, { question: '¿Cuánto tiempo tarda en cargar?', answer: 'Se carga completamente en aproximadamente 2 horas mediante el cable USB-C incluido.', }, { question: '¿Cuánto pesa?', answer: 'Pesa solo 165 gramos. Su diseño ergonómico se adapta al cuello y apenas la sentís puesta, incluso después de varias horas de uso.', }, { question: '¿En qué colores está disponible?', answer: 'La luz está disponible únicamente en color Negro mate, con detalles sutiles y terminación premium.', }, { question: '¿Cuántas intensidades y tonos de luz tiene?', answer: 'Cuenta con 3 niveles de intensidad y 3 tonos de color: cálida, neutra y blanca. Podés combinarlos para adaptarte a cualquier momento del día o tarea.', }, { question: '¿Cómo es el envío y cuánto tarda?', answer: 'Comprando 2 unidades o más, el envío es totalmente gratis. En compras de 1 unidad se realiza por correo tradicional con un costo accesible. Los tiempos de entrega son los habituales del Correo Argentino, según tu ubicación.', }, ] export function FAQ() { const [openIndex, setOpenIndex] = useState(0) return (

FAQ

Preguntas frecuentes

{faqs.map((faq, index) => { const isOpen = openIndex === index return (

{isOpen && (

{faq.answer}

)}

) })}

) } ``` ```components/Trust.tsx import React from 'react' import { Section } from './Section' import { Shield, Award, HeadphonesIcon, CreditCard } from 'lucide-react' const trustItems = [ { icon: Shield, title: 'Compra segura', detail: 'Pago 100% protegido', }, { icon: Award, title: 'Garantía 7 días', detail: 'Soporte directo', }, { icon: HeadphonesIcon, title: 'Atención personalizada', detail: 'WhatsApp y email', }, { icon: CreditCard, title: 'Medios de pago', detail: 'Tarjetas y transferencia', }, ] export function Trust() { return (

{trustItems.map((item, i) => (

{item.title}

{item.detail}

))}

) } ``` ```components/Footer.tsx import React from 'react' import { Instagram, Facebook, Twitter, MessageCircle, Mail } from 'lucide-react' export function Footer() { return ( ) } ```

Bienvenido a nuestra pagina

Luz De Lectura LED Portatil Usb

Oferta

Luz De Lectura LED Portatil Usb

Precio habitual $44.999,00 ARS

Precio habitual ~~$48.999,00 ARS~~ Precio de oferta $44.999,00 ARS

Oferta