<![CDATA[ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce - 100% Fixed Image</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="overflow-x-hidden">
<!-- 1. Top Bar -->
<div class="bg-navy text-white text-[10px] py-2 px-10 flex justify-between items-center">
<div class="flex gap-4"><span>Help Center</span><span>Order Status</span></div>
<div class="flex gap-4"><span>Login</span><span>My Account</span></div>
</div>
<!-- 2. Navbar -->
<nav class="bg-white py-5 px-10 shadow-sm sticky top-0 z-50 flex items-center justify-between border-b border-gray-100">
<div class="text-2xl font-black italic text-navy uppercase">E-Commerce<span class="text-yellow">.</span></div>
<div class="flex gap-8 font-bold text-sm items-center">
<a href="#" class="text-black hover:text-yellow">HOME</a>
<a href="#" class="text-black hover:text-yellow">CATEGORIES</a>
<div class="bg-yellow p-2 rounded-full relative shadow-md cursor-pointer">
🛒<span class="absolute -top-1 -right-1 bg-navy text-white text-[9px] px-1.5 rounded-full">3</span>
</div>
</div>
</nav>
<!-- 3. Hero Section (iPhone) -->
<section class="max-w-7xl mx-auto mt-6 px-6">
<div class="hero-gradient rounded-[50px] p-12 flex flex-col md:flex-row items-center justify-between relative overflow-hidden">
<div class="md:w-1/2 z-10">
<span class="bg-yellow text-navy font-black px-4 py-1 rounded text-[10px] tracking-widest">NEW ARRIVAL</span>
<h1 class="text-6xl font-black mt-6 leading-tight text-black">iPhone 13<br>Pro Max</h1>
<div class="mt-10 flex items-center gap-8">
<span class="text-5xl font-black text-black">$1,200</span>
<button class="bg-navy text-white px-12 py-4 rounded-full font-black shadow-2xl hover:bg-black transition-all">BUY NOW</button>
</div>
</div>
<!-- iPhone SVG (100% Working) -->
<div class="md:w-1/2 flex justify-end">
<svg viewBox="0 0 400 600" class="w-80 drop-shadow-2xl rotate-12">
<rect x="50" y="50" width="300" height="550" rx="50" fill="#111" />
<rect x="65" y="65" width="270" height="520" rx="40" fill="#A2C2E8" />
<rect x="140" y="65" width="120" height="30" rx="15" fill="#111" />
</svg>
</div>
</div>
</section>
<!-- 4. Product Grid -->
<section class="max-w-7xl mx-auto mt-20 px-6">
<h2 class="text-center font-black text-black text-4xl mb-16 tracking-tighter uppercase">Everything That <span class="text-yellow">You Need</span></h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-10">
<!-- NIKE REACT (SVG SHOE - 100% WORKING) -->
<div class="bg-white p-6 rounded-[40px] card-shadow border border-gray-50 group hover:border-yellow transition-all">
<div class="bg-gray-100 rounded-[30px] h-60 flex items-center justify-center p-6 relative overflow-hidden">
<!-- High Quality Shoe SVG Code -->
<svg viewBox="0 0 512 512" class="w-full h-full transform -rotate-12 group-hover:scale-110 transition-transform">
<path d="M450 300 Q480 350 400 400 L100 400 Q50 400 80 320 L150 200 Q200 150 300 180 L450 300" fill="#333" />
<path d="M100 400 L400 400 L420 420 L80 420 Z" fill="#FFD700" />
<circle cx="200" cy="220" r="10" fill="white" opacity="0.5" />
<circle cx="230" cy="240" r="10" fill="white" opacity="0.5" />
</svg>
</div>
<h3 class="text-black-bold mt-6 text-xl">Nike React</h3>
<p class="text-[10px] text-gray-400 font-black tracking-widest">PREMIUM EDITION</p>
<div class="flex justify-between items-center mt-4">
<span class="text-2xl font-black text-black">$150</span>
<button class="bg-navy text-white text-[10px] px-5 py-2 rounded-full font-black uppercase hover:bg-yellow hover:text-navy transition-colors">Add To Cart</button>
</div>
</div>
<!-- Laptop Item -->
<div class="bg-white p-6 rounded-[40px] card-shadow border border-gray-50 group">
<div class="bg-gray-100 rounded-[30px] h-60 flex items-center justify-center">
<span class="text-8xl">💻</span>
</div>
<h3 class="text-black-bold mt-6 text-xl">Surface Pro</h3>
<div class="flex justify-between items-center mt-4">
<span class="text-2xl font-black text-black">$850</span>
<button class="bg-navy text-white text-[10px] px-5 py-2 rounded-full font-black uppercase">Add</button>
</div>
</div>
<!-- Headset Item -->
<div class="bg-white p-6 rounded-[40px] card-shadow border border-gray-50 group">
<div class="bg-gray-100 rounded-[30px] h-60 flex items-center justify-center">
<span class="text-8xl">🎧</span>
</div>
<h3 class="text-black-bold mt-6 text-xl">Beats Headset</h3>
<div class="flex justify-between items-center mt-4">
<span class="text-2xl font-black text-black">$200</span>
<button class="bg-navy text-white text-[10px] px-5 py-2 rounded-full font-black uppercase">Add</button>
</div>
</div>
<!-- Camera Item -->
<div class="bg-white p-6 rounded-[40px] card-shadow border border-gray-50 group">
<div class="bg-gray-100 rounded-[30px] h-60 flex items-center justify-center">
<span class="text-8xl">📷</span>
</div>
<h3 class="text-black-bold mt-6 text-xl">Sony Alpha</h3>
<div class="flex justify-between items-center mt-4">
<span class="text-2xl font-black text-black">$1,100</span>
<button class="bg-navy text-white text-[10px] px-5 py-2 rounded-full font-black uppercase">Add</button>
</div>
</div>
</div>
</section>
<!-- 5. Testimonials (3 Boxes) -->
<section class="py-24 mt-24 bg-gray-50">
<div class="max-w-7xl mx-auto px-6 text-center">
<h4 class="text-yellow font-black uppercase text-[10px] tracking-[5px] mb-2">Testimonials</h4>
<h2 class="text-4xl font-black text-black">What Our <span class="text-yellow">Client's</span> Say</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10 mt-20 items-center">
<div class="bg-white p-12 rounded-[50px] shadow-xl text-left border border-gray-100">
<p class="text-black italic text-sm leading-relaxed">"The Nike shoes I ordered fit perfectly. Fast delivery!"</p>
<div class="mt-8 flex items-center gap-4">
<div class="w-10 h-10 bg-navy rounded-full"></div>
<p class="text-xs font-black text-black">Jane Smith</p>
</div>
</div>
<div class="bg-navy p-14 rounded-[50px] shadow-2xl scale-110 text-left text-white">
<p class="italic text-sm leading-relaxed opacity-90">"E-Commerce is the best platform for premium gadgets. Highly recommended!"</p>
<div class="mt-8 flex items-center gap-4">
<div class="w-12 h-12 bg-yellow rounded-full"></div>
<p class="text-xs font-black">Alex Brown</p>
</div>
</div>
<div class="bg-white p-12 rounded-[50px] shadow-xl text-left border border-gray-100">
<p class="text-black italic text-sm leading-relaxed">"Amazing prices and 100% authentic products. Love it."</p>
<div class="mt-8 flex items-center gap-4">
<div class="w-10 h-10 bg-navy rounded-full"></div>
<p class="text-xs font-black text-black">Sara Wilson</p>
</div>
</div>
</div>
</div>
</section>
<!-- 7. Footer -->
<footer class="bg-navy text-white mt-24 pt-20 pb-12 px-10">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-16 border-b border-white/10 pb-16">
<div class="col-span-1">
<div class="text-3xl font-black italic mb-6">E-Commerce<span class="text-yellow">.</span></div>
<p class="text-[10px] opacity-50 leading-loose">The ultimate destination for premium shopping.</p>
</div>
<div><h4 class="font-black text-yellow text-xs mb-8 uppercase tracking-widest">Company</h4><ul class="text-[11px] space-y-4 opacity-60"><li>Home</li><li>Products</li><li>Policy</li></ul></div>
<div><h4 class="font-black text-yellow text-xs mb-8 uppercase tracking-widest">Follow</h4><div class="flex gap-5 text-xl">📘 📸 🐦</div></div>
<div><h4 class="font-black text-yellow text-xs mb-8 uppercase tracking-widest">Newsletter</h4><div class="flex"><input type="text" class="bg-white/10 rounded-l-full px-5 py-2 w-full outline-none text-xs"><button class="bg-yellow text-navy px-5 rounded-r-full font-black">➔</button></div></div>
</div>
<p class="text-center mt-10 text-[10px] opacity-30 tracking-[4px] uppercase">© 2026 E-Commerce Premium Store</p>
</footer>
</body>
</html>]]>
