import React, { useState } from 'react'; import { ShoppingBag, Star, X, Plus, Minus, Trash2, ChevronDown, Check, Truck, Shield, RotateCcw, CheckCircle2, ArrowRight } from 'lucide-react'; import { motion, AnimatePresence } from 'framer-motion'; interface CartItem { id: string; name: string; color: string; size: string; price: number; quantity: number; image: string; } const productImages = [ { url: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&auto=format&fit=crop", alt: "Aura Studio headphones - front view" }, { url: "https://images.unsplash.com/photo-1583394838336-acd977736f90?w=800&auto=format&fit=crop", alt: "Aura Studio headphones - side angle" }, { url: "https://images.unsplash.com/photo-1484704849700-f032a568e944?w=800&auto=format&fit=crop", alt: "Aura Studio headphones - close-up" } ]; const colorOptions = [ { name: 'Midnight Black', hex: '#1a1a1a' }, { name: 'Space Gray', hex: '#6b7280' }, { name: 'Champagne Gold', hex: '#d4a853' } ]; const sizeOptions = ['Small', 'Medium', 'Large']; const specs = [ { label: 'Driver Size', value: '40mm Dynamic' }, { label: 'Frequency Response', value: '4Hz - 40kHz' }, { label: 'Battery Life', value: 'Up to 40 hours' }, { label: 'Charging', value: 'USB-C Fast Charge' }, { label: 'Bluetooth', value: '5.3 with multipoint' }, { label: 'Noise Cancellation', value: 'Adaptive ANC Pro' } ]; const reviews = [ { rating: 5, count: 1240 }, { rating: 4, count: 380 }, { rating: 3, count: 95 }, { rating: 2, count: 28 }, { rating: 1, count: 12 } ]; export default function App() { const [selectedImage, setSelectedImage] = useState(0); const [selectedColor, setSelectedColor] = useState(colorOptions[0]); const [selectedSize, setSelectedSize] = useState(sizeOptions[1]); const [quantity, setQuantity] = useState(1); const [cart, setCart] = useState([]); const [isCartOpen, setIsCartOpen] = useState(false); const [isCheckoutOpen, setIsCheckoutOpen] = useState(false); const [isOrderPlaced, setIsOrderPlaced] = useState(false); const [expandedSpec, setExpandedSpec] = useState('Driver Size'); const [shippingInfo, setShippingInfo] = useState({ name: '', email: '', address: '', city: '', zip: '', country: '' }); const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); const shipping = subtotal > 0 && subtotal < 500 ? 25 : 0; const tax = subtotal * 0.08; const total = subtotal + shipping + tax; const addToCart = () => { const newItem: CartItem = { id: `${Date.now()}-${selectedColor.name}-${selectedSize}`, name: 'Aura Studio', color: selectedColor.name, size: selectedSize, price: 349, quantity: quantity, image: productImages[0].url }; setCart(prev => [...prev, newItem]); setIsCartOpen(true); }; const updateQuantity = (id: string, newQty: number) => { if (newQty < 1) return; setCart(prev => prev.map(item => item.id === id ? { ...item, quantity: newQty } : item )); }; const removeFromCart = (id: string) => { setCart(prev => prev.filter(item => item.id !== id)); }; const handleCheckout = () => { setIsCartOpen(false); setIsCheckoutOpen(true); }; const placeOrder = () => { setIsOrderPlaced(true); setCart([]); }; const totalReviews = reviews.reduce((sum, r) => sum + r.count, 0); const averageRating = (reviews.reduce((sum, r) => sum + (r.rating * r.count), 0) / totalReviews).toFixed(1); return (

{/* Background glows */}

{/* Header */}

AuraStudio

{/* Main Product */}

{/* Gallery */}

NEW RELEASE

{productImages.map((img, idx) => ( ))}

{/* Product Info */}

Aura Studio

Premium Wireless Headphones

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

4.8 (1,755 reviews)

$349.00

or $87.25/month

{/* Color Selection */}

Color: {selectedColor.name}

{colorOptions.map((color) => (

{/* Size Selection */}

Size

{sizeOptions.map((size) => ( ))}

{/* Quantity */}

Quantity

{quantity}

{/* Add to Cart */} Add to Cart {/* Trust badges */}

Free Shipping

2-Year Warranty

30-Day Returns

{/* Specs Accordion */}

Technical Specifications

{specs.map((spec) => (

{expandedSpec === spec.label && ( {spec.value} )}

))}

{/* Reviews */}

Customer Reviews

{averageRating}

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

{totalReviews.toLocaleString()} reviews

{reviews.map((review) => (

{review.rating}

{review.count}

))}

{/* Cart Drawer */} {isCartOpen && ( setIsCartOpen(false)} > e.stopPropagation()} >

Shopping Cart

{cart.length === 0 ? (

Your cart is empty

) : ( cart.map((item) => (

{item.name}

{item.color} / {item.size}

${(item.price * item.quantity).toFixed(2)}

{item.quantity}

)) )}

{cart.length > 0 && (

Subtotal ${subtotal.toFixed(2)}

Shipping {shipping === 0 ? 'FREE' : `$${shipping.toFixed(2)}`}

Checkout

)} )} {/* Checkout Modal */} {isCheckoutOpen && ( {isOrderPlaced ? (

Order Placed Successfully!

Thank you for your purchase. A confirmation email has been sent.

) : (

Checkout

Shipping Information

setShippingInfo({ ...shippingInfo, name: e.target.value })} className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 focus:border-amber-400 focus:outline-none" /> setShippingInfo({ ...shippingInfo, email: e.target.value })} className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 focus:border-amber-400 focus:outline-none" /> setShippingInfo({ ...shippingInfo, address: e.target.value })} className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 focus:border-amber-400 focus:outline-none" />

setShippingInfo({ ...shippingInfo, city: e.target.value })} className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 focus:border-amber-400 focus:outline-none" /> setShippingInfo({ ...shippingInfo, zip: e.target.value })} className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 focus:border-amber-400 focus:outline-none" />

setShippingInfo({ ...shippingInfo, country: e.target.value })} className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 focus:border-amber-400 focus:outline-none" />

Order Summary

{cart.map((item) => (

{item.name} x{item.quantity} ${(item.price * item.quantity).toFixed(2)}

))}

Subtotal ${subtotal.toFixed(2)}

Shipping {shipping === 0 ? 'FREE' : `$${shipping.toFixed(2)}`}

Tax ${tax.toFixed(2)}

Total ${total.toFixed(2)}

Place Order

)} )}

); }

上質なECの商品ページ