import React, { useState, useEffect } from 'react';
import {
Smartphone,
ShoppingBag,
Phone,
MessageCircle,
Menu,
X,
ChevronRight,
Star,
ShieldCheck,
Truck,
Clock,
MapPin,
Facebook,
Twitter,
Instagram,
ArrowLeft,
Zap,
Cpu,
Battery,
Camera,
HardDrive
} from 'lucide-react';
// --- Mock Data ---
const CATEGORIES = [
{ id: 'smartphones', name: 'Smartphones', icon: Smartphone, color: 'bg-blue-100 text-blue-600' },
{ id: 'budget', name: 'Budget Phones', icon: Zap, color: 'bg-green-100 text-green-600' },
{ id: 'premium', name: 'Premium Phones', icon: Star, color: 'bg-purple-100 text-purple-600' },
{ id: 'accessories', name: 'Accessories', icon: ShoppingBag, color: 'bg-orange-100 text-orange-600' },
];
const PRODUCTS = [
{
id: 1,
name: "iPhone 15 Pro Max",
brand: "Apple",
price: 1199,
category: "premium",
image: "https://images.unsplash.com/photo-1696446701796-da61225697cc?auto=format&fit=crop&q=80&w=800",
images: [
"https://images.unsplash.com/photo-1696446701796-da61225697cc?auto=format&fit=crop&q=80&w=800",
"https://images.unsplash.com/photo-1695048133142-1a20484d2569?auto=format&fit=crop&q=80&w=800",
"https://images.unsplash.com/photo-1695048133100-205167098e90?auto=format&fit=crop&q=80&w=800"
],
specs: { ram: "8GB", storage: "256GB", processor: "A17 Pro", camera: "48MP Main", battery: "4441mAh" },
description: "The iPhone 15 Pro Max is the first iPhone to feature an aerospace-grade titanium design, using the same alloy that spacecraft use for missions to Mars. It features the A17 Pro chip, a game-changing GPU, and the most powerful iPhone camera system ever."
},
{
id: 2,
name: "Samsung Galaxy S24 Ultra",
brand: "Samsung",
price: 1299,
category: "premium",
image: "https://images.unsplash.com/photo-1707148566436-b63e9f4c330c?auto=format&fit=crop&q=80&w=800",
images: [
"https://images.unsplash.com/photo-1707148566436-b63e9f4c330c?auto=format&fit=crop&q=80&w=800",
"https://images.unsplash.com/photo-1610945265064-0e34e5519bbf?auto=format&fit=crop&q=80&w=800"
],
specs: { ram: "12GB", storage: "512GB", processor: "Snapdragon 8 Gen 3", camera: "200MP Quad", battery: "5000mAh" },
description: "Welcome to the era of mobile AI. With Galaxy S24 Ultra in your hands, you can unleash whole new levels of creativity, productivity and possibility — starting with the most important device in your life."
},
{
id: 3,
name: "Google Pixel 8 Pro",
brand: "Google",
price: 999,
category: "smartphones",
image: "https://images.unsplash.com/photo-1696426375302-39091807469a?auto=format&fit=crop&q=80&w=800",
images: [
"https://images.unsplash.com/photo-1696426375302-39091807469a?auto=format&fit=crop&q=80&w=800"
],
specs: { ram: "12GB", storage: "128GB", processor: "Google Tensor G3", camera: "50MP Triple", battery: "5050mAh" },
description: "Pixel 8 Pro is the all-pro phone engineered by Google. It's sleek, sophisticated, and has the most advanced Pixel Camera yet."
},
{
id: 4,
name: "Nothing Phone (2)",
brand: "Nothing",
price: 599,
category: "budget",
image: "https://images.unsplash.com/photo-1689155090150-149258273641?auto=format&fit=crop&q=80&w=800",
images: [
"https://images.unsplash.com/photo-1689155090150-149258273641?auto=format&fit=crop&q=80&w=800"
],
specs: { ram: "12GB", storage: "256GB", processor: "Snapdragon 8+ Gen 1", camera: "50MP Dual", battery: "4700mAh" },
description: "A new way to interact. The Glyph Interface. Meet Phone (2). Come to the bright side."
}
];
const SLIDES = [
{
title: "Unleash Innovation",
subtitle: "New iPhone 15 Pro Series",
offer: "Get up to $600 trade-in credit",
bg: "bg-gradient-to-r from-slate-900 to-slate-800",
img: "https://images.unsplash.com/photo-1695048133142-1a20484d2569?auto=format&fit=crop&q=80&w=1200"
},
{
title: "Epic AI Smartphone",
subtitle: "Galaxy S24 Ultra",
offer: "Pre-order now for exclusive gifts",
bg: "bg-gradient-to-r from-blue-900 to-indigo-900",
img: "https://images.unsplash.com/photo-1610945265064-0e34e5519bbf?auto=format&fit=crop&q=80&w=1200"
}
];
// --- Sub-Components ---
const ProductCard = ({ product, onClick }) => (
onClick(product)}
className="group bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden cursor-pointer border border-gray-100 flex flex-col h-full"
>
${product.price}
{product.brand}
{product.name}
{product.specs.ram} RAM
{product.specs.storage}
{product.specs.camera}
{product.specs.battery}
);
const ProductDetailPage = ({ product, onBack, onProductClick }) => {
const [activeImage, setActiveImage] = useState(product.images[0]);
useEffect(() => {
window.scrollTo(0, 0);
}, [product]);
const relatedProducts = PRODUCTS.filter(p => p.id !== product.id).slice(0, 4);
return (
{product.images.map((img, i) => (
setActiveImage(img)}
className={`w-24 aspect-square rounded-xl overflow-hidden border-2 transition-all flex-shrink-0 ${activeImage === img ? 'border-blue-600 ring-2 ring-blue-100' : 'border-transparent'}`}
>
))}
{product.brand}
{product.name}
${product.price}
Processor
{product.specs.processor}
Storage
{product.specs.storage}
Battery
{product.specs.battery}
Product Description
{product.description}
Buy Now (${product.price})
Related Products
{relatedProducts.map(p => (
))}
);
};
// --- Main App Component ---
export default function App() {
const [currentPage, setCurrentPage] = useState('home');
const [selectedProduct, setSelectedProduct] = useState(null);
const [activeSlide, setActiveSlide] = useState(0);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [isScrolled, setIsScrolled] = useState(false);
useEffect(() => {
if (currentPage === 'home') {
const timer = setInterval(() => {
setActiveSlide((prev) => (prev + 1) % SLIDES.length);
}, 5000);
return () => clearInterval(timer);
}
}, [currentPage]);
useEffect(() => {
const handleScroll = () => setIsScrolled(window.scrollY > 50);
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const handleProductClick = (product) => {
setSelectedProduct(product);
setCurrentPage('detail');
window.scrollTo(0, 0);
};
const navigateToHome = () => {
setCurrentPage('home');
setSelectedProduct(null);
setMobileMenuOpen(false);
};
const navLinks = [
{ name: 'Home', action: navigateToHome },
{ name: 'Shop', action: () => { navigateToHome(); window.scrollTo({ top: 800, behavior: 'smooth' }); } },
{ name: 'Categories', action: () => { navigateToHome(); window.scrollTo({ top: 600, behavior: 'smooth' }); } },
{ name: 'About', action: () => { navigateToHome(); window.scrollTo({ top: 1500, behavior: 'smooth' }); } },
{ name: 'Contact', action: () => { navigateToHome(); window.scrollTo({ top: 2200, behavior: 'smooth' }); } },
];
return (
{/* Fixed Sticky Header */}
{navLinks.map((link) => (
{link.name}
))}
setMobileMenuOpen(!mobileMenuOpen)}
className="md:hidden p-2 text-slate-900 focus:outline-none"
>
{mobileMenuOpen ?
{/* Fullscreen Mobile Menu Overlay */}
{navLinks.map((link) => (
{link.name}
))}
{currentPage === 'home' ? (
{/* Hero Slider */}
{SLIDES.map((slide, i) => (
{slide.offer}
{slide.title}
{slide.subtitle}
Shop Now
Learn More
))}
{SLIDES.map((_, i) => (
setActiveSlide(i)}
className={`h-2 rounded-full transition-all duration-500 ${activeSlide === i ? 'w-16 bg-white' : 'w-4 bg-white/30 hover:bg-white/50'}`}
/>
))}
{/* Categories Grid */}
{CATEGORIES.map((cat) => (
))}
{/* Featured Products */}
The Mobile Collection
Hand-picked premium smartphones from around the world.
All Products
{/* About Section */}
Luxury Technology For Your Lifestyle
We specialize in high-end mobile experiences. Our mission is to bridge the gap between technology and elegance, ensuring you always have the most powerful tools at your fingertips.
Verified Authentic Every device is serial-checked.
VIP Delivery Same-day premium shipping.
{/* Contact Form */}
Talk To An Expert
Custom configurations or corporate orders? We're here to help.
) : (
)}
{/* Floating Application Buttons */}
{/* App Footer */}
Defining the future of mobile commerce. Quality products, exceptional service, and unrivaled expertise.
Experience
Digital Boutique Exclusive Offers Membership Order Concierge
Location
101 Elite Plaza, Tech District
© {new Date().getFullYear()} MOBILUX. All Rights Reserved.
Privacy
Terms
Cookies
);
}
))}
