-
<!DOCTYPE html> <html lang="en" class="scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Maximage Promo Hub</title> <!-- Tailwind (CDN build for demo) --> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.4/dist/tailwind.min.css" rel="stylesheet"> <!-- Swiper --> <link href="https://unpkg.com/swiper@9/swiper-bundle.min.css" rel="stylesheet"> <!-- Alpine JS --> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <style> /* ===== promo-friendly, performance-safe animations ===== */ @keyframes wave {0%{transform:translateX(0)}100%{transform:translateX(-50%)}} .animate-wave {animation:wave 20s linear infinite} @keyframes marquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}} .animate-marquee {animation:marquee 30s linear infinite} </style> </head> <body class="font-sans antialiased text-gray-900 bg-gray-50" x-data="{quoteOpen:false}"> <!-- ╭────────────────────────── Header ──────────────────────────╮ --> <header class="bg-white shadow sticky top-0 z-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center h-16"> <a href="#" class="flex items-center gap-2"> <!-- swap for real vector --> <img src="https://via.placeholder.com/120x32?text=Logo" alt="Maximage logo" class="h-8 w-auto"> <span class="font-bold text-lg text-[#C51428]">Maximage</span> </a> <nav class="hidden md:flex gap-6"> <a href="#showcase" class="hover:text-[#C51428] transition">Work</a> <a href="#products" class="hover:text-[#C51428] transition">Products</a> <a href="#process" class="hover:text-[#C51428] transition">Process</a> <a href="#contact" class="hover:text-[#C51428] transition">Contact</a> </nav> <!-- mobile quote button --> <button @click="quoteOpen=true" class="md:hidden inline-flex items-center p-2"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/> </svg> </button> </div> </header> <!-- ╭────────────────────────── Hero ───────────────────────────╮ --> <section id="hero" class="relative isolate h-[90vh] flex flex-col justify-center items-center text-center overflow-hidden bg-[url('https://images.unsplash.com/photo-1498603915703-aa7a43a1163d?auto=format&fit=crop&w=1600&q=80')] bg-cover bg-center"> <!-- marquee of buyer segments --> <div class="absolute top-4 w-full overflow-hidden"> <ul class="flex gap-10 whitespace-nowrap animate-marquee text-sm md:text-base text-gray-100/90 tracking-wide"> <li>Corporate Gifts</li><li>Events</li><li>Sports Teams</li> <li>Healthcare</li><li>Education</li><li>Hospitality</li><li>Retail</li> </ul> </div> <h1 class="relative z-10 text-4xl sm:text-5xl md:text-6xl font-bold text-white drop-shadow-lg leading-tight"> Custom <span class="text-[#C51428]">Promotional Products</span><br>That Amplify Your Brand </h1> <p class="relative z-10 mt-6 text-lg md:text-xl text-gray-100 max-w-2xl"> From budget-friendly pens to premium drop-ship kits, we source, customise and deliver swag your audience will keep. </p> <a href="#products" class="relative z-10 mt-8 inline-block px-8 py-3 rounded-xl bg-[#C51428] text-white shadow-lg hover:scale-105 transition"> Browse Ideas </a> <!-- gentle SVG waves --> <svg class="absolute inset-x-0 bottom-0 w-[200%] h-40 text-[#C51428]/60 animate-wave" viewBox="0 0 1440 320" preserveAspectRatio="none"> <path fill="currentColor" d="M0,224L48,186.7C96,149,192,75,288,74.7C384,75,480,149,576,165.3C672,181,768,139,864,122.7C960,107,1056,117,1152,133.3C1248,149,1344,171,1392,181.3L1440,192L1440,320L0,320Z"/> </svg> </section> <!-- ╭────────────────────── Showcase slider ─────────────────────╮ --> <section id="showcase" class="py-20 bg-gray-100"> <h2 class="text-center text-3xl font-bold mb-12">Featured Work</h2> <div class="swiper max-w-6xl mx-auto" x-init="$nextTick(()=>new Swiper($el,{loop:true,autoplay:{delay:3500}, slidesPerView:1,spaceBetween:20,breakpoints:{640:{slidesPerView:2},1024:{slidesPerView:3}}}))"> <div class="swiper-wrapper"> <!-- 9 dummy case studies --> <template x-for="i in 9"> <div class="swiper-slide bg-white rounded-lg shadow hover:shadow-lg transition p-6 flex flex-col items-center"> <img :src="'https://source.unsplash.com/collection/1163637/400x400?sig='+i" class="w-40 h-40 object-cover rounded mb-4" alt="Project image"> <h3 class="font-semibold">Campaign #<span x-text="i"></span></h3> </div> </template> </div> </div> </section> <!-- ╭───────────────── Product inspiration grid ─────────────────╮ --> <section id="products" class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4"> <h2 class="text-center text-3xl font-bold mb-12">Product Ideas</h2> <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6"> <!-- 24 dummy products --> <template x-for="i in 24"> <div class="bg-gray-50 rounded-xl overflow-hidden shadow hover:shadow-lg transition cursor-pointer" @click="quoteOpen=true"> <img :src="'https://source.unsplash.com/random/300x300?sig='+i" class="w-full h-40 object-cover" alt="Product image"> <div class="p-4"> <h4 class="font-medium text-sm mb-1">Promo Item #<span x-text="i"></span></h4> <p class="text-xs text-gray-500">From $2.50</p> </div> </div> </template> </div> </div> </section> <!-- ╭──────────────────── 3-step order process ──────────────────╮ --> <section id="process" class="py-24 bg-gray-900 text-white"> <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-3 gap-12 text-center"> <div class="flex flex-col items-center" x-intersect="$el.classList.add('animate-pulse')"> <svg class="h-12 w-12 mb-4" fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M12 6v6l3 3"/> </svg> <h3 class="font-bold text-xl mb-2">1. Discover</h3> <p>Share goals, budget & deadline.</p> </div> <div class="flex flex-col items-center" x-intersect="$el.classList.add('animate-pulse')"> <svg class="h-12 w-12 mb-4" fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M4 6h16"/> </svg> <h3 class="font-bold text-xl mb-2">2. Create</h3> <p>We craft ideas & digital proofs.</p> </div> <div class="flex flex-col items-center" x-intersect="$el.classList.add('animate-pulse')"> <svg class="h-12 w-12 mb-4" fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M12 4v16"/> </svg> <h3 class="font-bold text-xl mb-2">3. Deliver</h3> <p>On-brand merchandise, on time.</p> </div> </div> </section> <!-- ╭──────────────────────── Contact form ──────────────────────╮ --> <section id="contact" class="py-20 bg-gradient-to-b from-gray-100 to-gray-200"> <div class="max-w-3xl mx-auto px-4"> <h2 class="text-center text-3xl font-bold mb-8">Let's Talk Swag</h2> <form class="space-y-6 bg-white p-8 rounded-xl shadow"> <div class="grid md:grid-cols-2 gap-6"> <input type="text" placeholder="Name" class="w-full p-3 border rounded" required> <input type="email" placeholder="Email" class="w-full p-3 border rounded" required> <input type="text" placeholder="Company" class="w-full p-3 border rounded"> <input type="tel" placeholder="Phone" class="w-full p-3 border rounded"> </div> <textarea rows="4" placeholder="Tell us about your project…" class="w-full p-3 border rounded"></textarea> <button type="submit" class="px-8 py-3 bg-[#C51428] text-white rounded hover:bg-[#b11224] transition"> Request Quote </button> </form> </div> </section> <!-- ╭────────────────────────── Footer ──────────────────────────╮ --> <footer class="bg-gray-800 text-gray-300 py-12"> <div class="max-w-6xl mx-auto px-4 grid md:grid-cols-4 gap-8"> <div> <img src="https://via.placeholder.com/120x32?text=Logo" alt="logo" class="h-10 mb-4"> <p>© <span x-text="new Date().getFullYear()"></span> Maximage. All rights reserved.</p> </div> <div> <h4 class="font-semibold mb-2">Explore</h4> <ul class="space-y-1"> <li><a href="#showcase" class="hover:text-white">Work</a></li> <li><a href="#products" class="hover:text-white">Products</a></li> <li><a href="#process" class="hover:text-white">Process</a></li> <li><a href="#contact" class="hover:text-white">Contact</a></li> </ul> </div> <div> <h4 class="font-semibold mb-2">Contact</h4> <p>Email: sales@maximage.ca</p> <p>Phone: +1 800 123 4567</p> </div> <div> <h4 class="font-semibold mb-2">Social</h4> <div class="flex gap-4"> <a href="#" class="hover:text-white">FB</a> <a href="#" class="hover:text-white">IG</a> <a href="#" class="hover:text-white">IN</a> </div> </div> </div> </footer> <!-- ╭──────────────────── Quote-bag drawer ──────────────────────╮ --> <div x-show="quoteOpen" x-transition.opacity class="fixed inset-0 bg-black/50 flex justify-end" @click.self="quoteOpen=false"> <aside class="bg-white w-80 max-w-full h-full shadow-xl p-6 flex flex-col"> <h2 class="text-xl font-bold mb-4">Quote Bag</h2> <p class="text-sm text-gray-500 mb-2">Feature under construction.</p> <button class="mt-auto bg-[#C51428] text-white py-3 rounded hover:bg-[#b11224] transition"> Submit for Quote </button> </aside> </div> <!-- Swiper runtime --> <script src="https://unpkg.com/swiper@9/swiper-bundle.min.js"></script> </body> </html> - Initial Deployment
-
initial commit
