Landing page

import React, { useState, useEffect, useRef } from 'react'; import { Camera, PenTool, Truck, Star, ChevronDown, ChevronUp, ShieldCheck, Smartphone, Layers, ArrowRight } from 'lucide-react'; // --- Custom Hooks & Effect Components --- // 1. Scroll Reveal Hook const useInView = (options) => { const ref = useRef(null); const [isInView, setIsInView] = useState(false); useEffect(() => { const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { setIsInView(true); observer.unobserve(entry.target); // Only animate once } }, { threshold: 0.1, ...options }); const currentRef = ref.current; if (currentRef) observer.observe(currentRef); return () => { if (currentRef) observer.unobserve(currentRef); }; }, [options]); return [ref, isInView]; }; // 2. FadeIn Wrapper Component const FadeIn = ({ children, delay = 0, direction = 'up', className = '' }) => { const [ref, isInView] = useInView(); const getDirectionClasses = () => { switch(direction) { case 'up': return 'translate-y-10'; case 'left': return '-translate-x-10'; case 'right': return 'translate-x-10'; default: return 'translate-y-10'; } }; return (

{children}

); }; // --- Main App Component --- const App = () => { return (

{/* Inline Custom CSS Animations */}
{/* Navbar */}{/* Hero Section */}
{/* Background Image with Overlay */}
Porsche GT3 Style

Your Machine.
Immortalized.

Turn your daily driver, track weapon, or dream build into museum-grade, bespoke acrylic art. Engineered for the enthusiast, crafted for your wall.

Gallery-Quality Acrylic • Custom Spec Typography • Free Worldwide Shipping
{/* Social Proof */}

Recognized by Purists. Loved by Drivers.
{/* The Process */}

The UPURU Commission Process

Three steps. Zero friction. Absolute perfection.
{/* Animated Connecting Line (Desktop) */}

} number="01" title="The Source" desc="Upload a photo of your vehicle, or simply tell us the exact make and model of your dream car. We handle the rest." /> } number="02" title="The Studio" desc="Our digital artisans isolate your car, apply our signature bold background typography, and draft the custom spec-sheet narrative." /> } number="03" title="The Showcase" desc="Printed in ultra-high resolution behind premium acrylic, your masterpiece arrives with brushed metal standoffs, ready to mount." />
{/* Product Showcase: Acrylic */}
{/* Glowing background behind image */}
{/* Floating Image Container */}
Acrylic Poster Example {/* Simulate Standoffs with realistic styling */}

Gallery Aesthetics.
Garage DNA.

Forget standard paper posters. UPURU Wall Art is reverse-printed on ultra-clear, high-gloss acrylic. This gives your vehicle unmatched depth, vibrant color saturation, and a sleek, frameless, floating effect on your wall.


{/* Product Showcase: Phone Cases */}
Phone Case Example

Pocket-Sized
Prestige.

Carry your passion wherever you go. The UPURU custom phone case takes the exact design from your wall art and scales it down to a precision-fit, impact-resistant shield for your device.

    } title="Ultimate Protection" desc="Slim-profile yet highly drop and scratch-resistant." /> } title="Premium Finish Options" desc="Choose between a sleek matte or a vibrant gloss finish." /> } title="Fully Compatible" desc="Works flawlessly with MagSafe and wireless charging pads." />

{/* The Gifting Angle */}
Defender Offroad

The Ultimate Gift for the Obsessed.

Struggling to find a gift for someone whose life revolves around their garage? Give them something as unique as their build. Whether it's their first project car or their ultimate dream spec, an UPURU commission is a gift they will never outgrow.


{/* FAQ */}

The Pit Stop (FAQ)
{/* Footer CTA & Footer */}{/* Sticky Mobile CTA Bottom Bar */}

); }; // Sub-components const Standoff = ({ top, left }) => (


); const ReviewCard = ({ quote, author, car }) => (

"{quote}"

{author}

{car}

); const ProcessStep = ({ icon, number, title, desc }) => (

{icon}
{number}

{title}

{desc}

); const FeatureItem = ({ icon, title, desc }) => (

  • {icon ? icon :

    }

    {title}

    {desc}

); const AccordionItem = ({ question, answer }) => { const [isOpen, setIsOpen] = useState(false); return (


{answer}

); }; export default App;