<!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
7ee816b verified Download index.html from SpectrumInfinite/max-image-website-demo: direct link, hf CLI and curl.
- Browser
- Download file 36.7 kB
-
https://huggingface.co/spaces/SpectrumInfinite/max-image-website-demo/resolve/main/index.html
- Command line
-
hf download hf://spaces/SpectrumInfinite/max-image-website-demo/index.html
-
curl -L -o index.html https://huggingface.co/spaces/SpectrumInfinite/max-image-website-demo/resolve/main/index.html
36.7 kB
| <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 | Custom Branded Merchandise</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- 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> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#C51428', | |
| secondary: '#1A365D', | |
| accent: '#F9A826', | |
| light: '#F8F9FA', | |
| dark: '#212529' | |
| }, | |
| animation: { | |
| 'wave': 'wave 20s linear infinite', | |
| 'marquee': 'marquee 30s linear infinite', | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite' | |
| }, | |
| keyframes: { | |
| wave: { | |
| '0%': { transform: 'translateX(0)' }, | |
| '100%': { transform: 'translateX(-50%)' } | |
| }, | |
| marquee: { | |
| '0%': { transform: 'translateX(100%)' }, | |
| '100%': { transform: 'translateX(-100%)' } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1A365D 0%, #C51428 100%); | |
| } | |
| .product-card { | |
| transition: all 0.3s ease; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .process-step { | |
| transition: all 0.3s ease; | |
| } | |
| .process-step:hover { | |
| transform: scale(1.05); | |
| } | |
| .quote-bag-item { | |
| animation: fadeIn 0.3s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .marquee-container { | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .marquee-content { | |
| display: inline-block; | |
| white-space: nowrap; | |
| animation: marquee 30s linear infinite; | |
| } | |
| .hero-overlay { | |
| background: rgba(0, 0, 0, 0.5); | |
| } | |
| .swiper-button-prev, .swiper-button-next { | |
| color: #C51428 ; | |
| background: rgba(255, 255, 255, 0.8); | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .swiper-button-prev::after, .swiper-button-next::after { | |
| font-size: 20px ; | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-900 bg-gray-50" | |
| x-data="{ | |
| mobileMenuOpen: false, | |
| quoteModalOpen: false, | |
| quoteItems: [], | |
| formSuccess: false, | |
| selectedCategory: 'all', | |
| categories: [ | |
| { id: 'all', name: 'All Products' }, | |
| { id: 'apparel', name: 'Apparel' }, | |
| { id: 'drinkware', name: 'Drinkware' }, | |
| { id: 'tech', name: 'Tech Accessories' }, | |
| { id: 'office', name: 'Office Supplies' }, | |
| { id: 'eco', name: 'Eco-Friendly' } | |
| ], | |
| products: [ | |
| { id: 1, name: 'Premium Cotton T-Shirt', category: 'apparel', price: 8.99, image: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&w=500&q=80' }, | |
| { id: 2, name: 'Stainless Steel Water Bottle', category: 'drinkware', price: 12.50, image: 'https://images.unsplash.com/photo-1602143407151-7111541de55e?auto=format&fit=crop&w=500&q=80' }, | |
| { id: 3, name: 'Wireless Power Bank', category: 'tech', price: 19.99, image: 'https://images.unsplash.com/photo-1606220588915-0d1d8d01a0c1?auto=format&fit=crop&w=500&q=80' }, | |
| { id: 4, name: 'Executive Pen Set', category: 'office', price: 5.25, image: 'https://images.unsplash.com/photo-1583485088034-697b5bc54ccd?auto=format&fit=crop&w=500&q=80' }, | |
| { id: 5, name: 'Recycled Tote Bag', category: 'eco', price: 6.75, image: 'https://images.unsplash.com/photo-1566150902887-9679ecc155ba?auto=format&fit=crop&w=500&q=80' }, | |
| { id: 6, name: 'Performance Hoodie', category: 'apparel', price: 15.99, image: 'https://images.unsplash.com/photo-1591047139829-d91aecb6caea?auto=format&fit=crop&w=500&q=80' }, | |
| { id: 7, name: 'Ceramic Coffee Mug', category: 'drinkware', price: 7.25, image: 'https://images.unsplash.com/photo-1598983062491-5934b80449d0?auto=format&fit=crop&w=500&q=80' }, | |
| { id: 8, name: 'Bluetooth Earbuds', category: 'tech', price: 24.99, image: 'https://images.unsplash.com/photo-1590658268037-14bf051f096f?auto=format&fit=crop&w=500&q=80' }, | |
| { id: 9, name: 'Desk Organizer Set', category: 'office', price: 14.50, image: 'https://images.unsplash.com/photo-1584622650111-993a426fbf0a?auto=format&fit=crop&w=500&q=80' }, | |
| { id: 10, name: 'Bamboo Travel Kit', category: 'eco', price: 11.25, image: 'https://images.unsplash.com/photo-1594054283591-aaa6c3a1c5a1?auto=format&fit=crop&w=500&q=80' }, | |
| { id: 11, name: 'Performance Cap', category: 'apparel', price: 9.99, image: 'https://images.unsplash.com/photo-1575429198097-0413ecb00a02?auto=format&fit=crop&w=500&q=80' }, | |
| { id: 12, name: 'Insulated Travel Mug', category: 'drinkware', price: 13.75, image: 'https://images.unsplash.com/photo-1607083206968-13611e3d76db?auto=format&fit=crop&w=500&q=80' } | |
| ] | |
| }"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16 md:h-20"> | |
| <a href="#" class="flex items-center gap-3"> | |
| <div class="bg-primary w-10 h-10 rounded-full flex items-center justify-center"> | |
| <span class="text-white font-bold text-xl">M</span> | |
| </div> | |
| <span class="font-bold text-xl text-primary">Maximage</span> | |
| </a> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex items-center gap-8"> | |
| <a href="#showcase" class="font-medium hover:text-primary transition">Work</a> | |
| <a href="#products" class="font-medium hover:text-primary transition">Products</a> | |
| <a href="#process" class="font-medium hover:text-primary transition">Process</a> | |
| <a href="#testimonials" class="font-medium hover:text-primary transition">Testimonials</a> | |
| <a href="#contact" class="font-medium hover:text-primary transition">Contact</a> | |
| <button @click="quoteModalOpen = true" class="bg-primary text-white px-5 py-2 rounded-lg hover:bg-opacity-90 transition flex items-center gap-2"> | |
| <i class="fas fa-shopping-bag"></i> | |
| <span>Quote Bag</span> | |
| <span x-show="quoteItems.length > 0" x-text="`(${quoteItems.length})`" class="bg-white text-primary rounded-full w-6 h-6 flex items-center justify-center text-xs"></span> | |
| </button> | |
| </nav> | |
| <!-- Mobile Menu Button --> | |
| <button @click="mobileMenuOpen = true" class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Mobile Menu --> | |
| <div x-show="mobileMenuOpen" x-transition:enter="transition ease-out duration-300" | |
| x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" | |
| x-transition:leave="transition ease-in duration-200" | |
| x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" | |
| class="fixed inset-0 bg-black bg-opacity-70 z-50" @click.away="mobileMenuOpen = false"> | |
| <div class="absolute right-0 top-0 bottom-0 w-80 bg-white shadow-xl p-6"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <a href="#" class="flex items-center gap-2"> | |
| <div class="bg-primary w-8 h-8 rounded-full flex items-center justify-center"> | |
| <span class="text-white font-bold">M</span> | |
| </div> | |
| <span class="font-bold text-lg text-primary">Maximage</span> | |
| </a> | |
| <button @click="mobileMenuOpen = false" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| </div> | |
| <nav class="space-y-4"> | |
| <a href="#showcase" class="block py-2 font-medium hover:text-primary" @click="mobileMenuOpen = false">Work</a> | |
| <a href="#products" class="block py-2 font-medium hover:text-primary" @click="mobileMenuOpen = false">Products</a> | |
| <a href="#process" class="block py-2 font-medium hover:text-primary" @click="mobileMenuOpen = false">Process</a> | |
| <a href="#testimonials" class="block py-2 font-medium hover:text-primary" @click="mobileMenuOpen = false">Testimonials</a> | |
| <a href="#contact" class="block py-2 font-medium hover:text-primary" @click="mobileMenuOpen = false">Contact</a> | |
| <button @click="quoteModalOpen = true; mobileMenuOpen = false" class="w-full bg-primary text-white px-4 py-3 rounded-lg hover:bg-opacity-90 transition flex items-center justify-center gap-2 mt-6"> | |
| <i class="fas fa-shopping-bag"></i> | |
| <span>Quote Bag</span> | |
| <span x-show="quoteItems.length > 0" x-text="`(${quoteItems.length})`" class="bg-white text-primary rounded-full w-6 h-6 flex items-center justify-center text-xs"></span> | |
| </button> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section id="hero" class="relative h-[90vh] flex items-center"> | |
| <div class="absolute inset-0"> | |
| <img src="https://images.unsplash.com/photo-1498603915703-aa7a43a1163d?auto=format&fit=crop&w=1600&q=80" | |
| alt="Promotional products" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 hero-overlay"></div> | |
| </div> | |
| <!-- Marquee --> | |
| <div class="absolute top-4 w-full overflow-hidden"> | |
| <div class="marquee-container"> | |
| <div class="marquee-content flex gap-10 text-sm md:text-base text-white/90 tracking-wide"> | |
| <span class="flex items-center gap-2"><i class="fas fa-building"></i> Corporate Gifts</span> | |
| <span class="flex items-center gap-2"><i class="fas fa-calendar-alt"></i> Events</span> | |
| <span class="flex items-center gap-2"><i class="fas fa-baseball-ball"></i> Sports Teams</span> | |
| <span class="flex items-center gap-2"><i class="fas fa-heartbeat"></i> Healthcare</span> | |
| <span class="flex items-center gap-2"><i class="fas fa-graduation-cap"></i> Education</span> | |
| <span class="flex items-center gap-2"><i class="fas fa-concierge-bell"></i> Hospitality</span> | |
| <span class="flex items-center gap-2"><i class="fas fa-shopping-bag"></i> Retail</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative z-10 max-w-4xl mx-auto px-4 text-center"> | |
| <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold text-white leading-tight mb-6"> | |
| Custom <span class="text-primary">Promotional Products</span><br>That Amplify Your Brand | |
| </h1> | |
| <p class="text-xl text-gray-100 mb-10 max-w-2xl mx-auto"> | |
| From budget-friendly pens to premium drop-ship kits, we source, customize and deliver swag your audience will keep. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#products" class="px-8 py-4 bg-primary text-white font-medium rounded-lg shadow-lg hover:bg-opacity-90 transition transform hover:-translate-y-1"> | |
| Browse Products | |
| </a> | |
| <button @click="quoteModalOpen = true" class="px-8 py-4 bg-white text-primary font-medium rounded-lg shadow-lg hover:bg-gray-100 transition transform hover:-translate-y-1"> | |
| Request Quote | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Wave SVG --> | |
| <svg class="absolute inset-x-0 bottom-0 w-[200%] h-40 text-primary/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> | |
| <!-- Stats Section --> | |
| <section class="py-12 bg-gradient-to-r from-secondary to-primary text-white"> | |
| <div class="max-w-7xl mx-auto px-4"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div class="p-6"> | |
| <div class="text-4xl font-bold mb-2">15K+</div> | |
| <div class="text-sm uppercase tracking-wider">Products</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-4xl font-bold mb-2">98%</div> | |
| <div class="text-sm uppercase tracking-wider">Client Retention</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-4xl font-bold mb-2">24/7</div> | |
| <div class="text-sm uppercase tracking-wider">Support</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-4xl font-bold mb-2">10K+</div> | |
| <div class="text-sm uppercase tracking-wider">Happy Brands</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Showcase Slider --> | |
| <section id="showcase" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Featured Work</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto"> | |
| See how we've helped brands create memorable promotional campaigns that drive engagement and loyalty. | |
| </p> | |
| </div> | |
| <div class="swiper relative" | |
| x-init="$nextTick(() => { | |
| new Swiper($el, { | |
| loop: true, | |
| autoplay: { delay: 5000 }, | |
| slidesPerView: 1, | |
| spaceBetween: 20, | |
| navigation: { | |
| nextEl: '.swiper-button-next', | |
| prevEl: '.swiper-button-prev', | |
| }, | |
| breakpoints: { | |
| 640: { slidesPerView: 2 }, | |
| 1024: { slidesPerView: 3 } | |
| } | |
| }) | |
| })"> | |
| <div class="swiper-wrapper"> | |
| <template x-for="i in 6"> | |
| <div class="swiper-slide"> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md h-full"> | |
| <div class="relative h-60"> | |
| <img :src="'https://source.unsplash.com/collection/1163637/600x400?sig='+i" | |
| class="w-full h-full object-cover" alt="Project"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6"> | |
| <h3 class="text-xl font-bold text-white">Campaign #<span x-text="i"></span></h3> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center gap-2 mb-3"> | |
| <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">Corporate</span> | |
| <span class="px-3 py-1 bg-secondary/10 text-secondary text-xs rounded-full">Apparel</span> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| Custom branded merchandise for a nationwide corporate event with 5,000+ attendees. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">Client: TechGlobal Inc.</span> | |
| <button class="text-primary hover:text-primary/80"> | |
| <i class="fas fa-external-link-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </template> | |
| </div> | |
| <div class="swiper-button-prev"></div> | |
| <div class="swiper-button-next"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Product Categories --> | |
| <section id="products" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Product Ideas</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto"> | |
| Discover our wide range of customizable promotional products to elevate your brand presence. | |
| </p> | |
| </div> | |
| <!-- Category Filters --> | |
| <div class="flex flex-wrap justify-center gap-3 mb-10"> | |
| <template x-for="category in categories"> | |
| <button | |
| @click="selectedCategory = category.id" | |
| :class="{ | |
| 'bg-primary text-white': selectedCategory === category.id, | |
| 'bg-gray-100 text-gray-800 hover:bg-gray-200': selectedCategory !== category.id | |
| }" | |
| class="px-5 py-2 rounded-full text-sm font-medium transition" | |
| x-text="category.name"> | |
| </button> | |
| </template> | |
| </div> | |
| <!-- Product Grid --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <template x-for="product in products" :key="product.id"> | |
| <div | |
| x-show="selectedCategory === 'all' || selectedCategory === product.category" | |
| class="product-card bg-gray-50 rounded-xl overflow-hidden shadow-md h-full flex flex-col"> | |
| <div class="relative h-60"> | |
| <img :src="product.image" class="w-full h-full object-cover" :alt="product.name"> | |
| <button | |
| @click="quoteItems = [...quoteItems, product]" | |
| class="absolute top-4 right-4 w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-md hover:bg-primary hover:text-white transition"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| <div class="p-5 flex-grow"> | |
| <h3 class="font-semibold text-lg mb-1" x-text="product.name"></h3> | |
| <div class="flex items-center gap-2 mb-3"> | |
| <span class="px-2 py-1 bg-gray-200 text-gray-700 text-xs rounded capitalize" x-text="product.category"></span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">High-quality promotional item perfect for brand awareness campaigns.</p> | |
| <div class="flex justify-between items-center mt-auto"> | |
| <span class="font-bold text-primary" x-text="'From $' + product.price"></span> | |
| <button | |
| @click="quoteItems = [...quoteItems, product]" | |
| class="text-sm text-primary hover:text-primary/80 flex items-center gap-1"> | |
| Add to Quote <i class="fas fa-arrow-right text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </template> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Process Section --> | |
| <section id="process" class="py-24 bg-gradient-to-br from-secondary to-primary text-white"> | |
| <div class="max-w-7xl mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Simple Process</h2> | |
| <p class="text-gray-200 max-w-2xl mx-auto"> | |
| We make ordering custom promotional products easy and stress-free with our streamlined process. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-12 text-center"> | |
| <div class="process-step flex flex-col items-center"> | |
| <div class="w-24 h-24 rounded-full bg-white/10 flex items-center justify-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-white flex items-center justify-center"> | |
| <i class="fas fa-lightbulb text-3xl text-accent"></i> | |
| </div> | |
| </div> | |
| <h3 class="font-bold text-xl mb-2">1. Discover</h3> | |
| <p class="text-gray-200">Share your goals, budget & timeline with our experts.</p> | |
| </div> | |
| <div class="process-step flex flex-col items-center"> | |
| <div class="w-24 h-24 rounded-full bg-white/10 flex items-center justify-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-white flex items-center justify-center"> | |
| <i class="fas fa-pen-nib text-3xl text-accent"></i> | |
| </div> | |
| </div> | |
| <h3 class="font-bold text-xl mb-2">2. Create</h3> | |
| <p class="text-gray-200">We design concepts and provide digital proofs.</p> | |
| </div> | |
| <div class="process-step flex flex-col items-center"> | |
| <div class="w-24 h-24 rounded-full bg-white/10 flex items-center justify-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-white flex items-center justify-center"> | |
| <i class="fas fa-truck text-3xl text-accent"></i> | |
| </div> | |
| </div> | |
| <h3 class="font-bold text-xl mb-2">3. Deliver</h3> | |
| <p class="text-gray-200">Receive your branded merchandise on time.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section id="testimonials" class="py-20 bg-gray-50"> | |
| <div class="max-w-4xl mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Clients Say</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto"> | |
| Don't just take our word for it - hear from brands that have transformed their marketing with our products. | |
| </p> | |
| </div> | |
| <div class="swiper" | |
| x-init="$nextTick(() => { | |
| new Swiper($el, { | |
| loop: true, | |
| autoplay: { delay: 7000 }, | |
| slidesPerView: 1, | |
| spaceBetween: 30, | |
| pagination: { | |
| el: '.swiper-pagination', | |
| clickable: true | |
| } | |
| }) | |
| })"> | |
| <div class="swiper-wrapper"> | |
| <div class="swiper-slide"> | |
| <div class="bg-white p-8 rounded-2xl shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full overflow-hidden mr-4"> | |
| <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=200&q=80" | |
| class="w-full h-full object-cover" alt="Client"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">Michael Rodriguez</h4> | |
| <p class="text-gray-500">Marketing Director, TechStart Inc.</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-6"> | |
| "Maximage delivered exceptional quality products for our annual conference. The attention to detail and | |
| quick turnaround exceeded our expectations. Our branded items were a huge hit with attendees!" | |
| </p> | |
| <div class="flex text-accent"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="swiper-slide"> | |
| <div class="bg-white p-8 rounded-2xl shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full overflow-hidden mr-4"> | |
| <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=200&q=80" | |
| class="w-full h-full object-cover" alt="Client"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">Sarah Johnson</h4> | |
| <p class="text-gray-500">Events Manager, Global Solutions</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-6"> | |
| "Working with Maximage was a game-changer for our corporate gifting program. Their creative suggestions | |
| helped us stand out, and the quality of the products was outstanding. Highly recommend!" | |
| </p> | |
| <div class="flex text-accent"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="swiper-pagination mt-8"></div> | |
| </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-4xl mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Let's Talk Swag</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto"> | |
| Ready to elevate your brand? Contact us today for a free consultation and quote. | |
| </p> | |
| </div> | |
| <div class="bg-white rounded-2xl shadow-xl overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-2/5 bg-secondary p-10 text-white"> | |
| <h3 class="text-2xl font-bold mb-6">Get In Touch</h3> | |
| <div class="space-y-6 mb-10"> | |
| <div class="flex items-start gap-4"> | |
| <i class="fas fa-map-marker-alt mt-1 text-accent"></i> | |
| <p>123 Brand Street, Suite 100<br>Toronto, ON M5V 2T6</p> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <i class="fas fa-phone text-accent"></i> | |
| <p>+1 (800) 123-4567</p> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <i class="fas fa-envelope text-accent"></i> | |
| <p>hello@maximage.ca</p> | |
| </div> | |
| </div> | |
| <div class="flex gap-4 mt-8"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-3/5 p-10"> | |
| <form class="space-y-6" @submit.prevent="formSuccess = true"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Name</label> | |
| <input type="text" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Email</label> | |
| <input type="email" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Company</label> | |
| <input type="text" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Phone</label> | |
| <input type="tel" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Project Details</label> | |
| <textarea rows="4" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Tell us about your project..."></textarea> | |
| </div> | |
| <button type="submit" class="w-full py-4 bg-primary text-white font-medium rounded-lg hover:bg-opacity-90 transition"> | |
| Request Quote | |
| </button> | |
| <div x-show="formSuccess" class="mt-4 p-4 bg-green-100 text-green-700 rounded-lg"> | |
| <div class="flex items-center gap-3"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| <p>Thank you! Your message has been sent. We'll contact you shortly.</p> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-gray-300 py-16"> | |
| <div class="max-w-7xl mx-auto px-4"> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-10"> | |
| <div> | |
| <div class="flex items-center gap-3 mb-6"> | |
| <div class="bg-primary w-10 h-10 rounded-full flex items-center justify-center"> | |
| <span class="text-white font-bold">M</span> | |
| </div> | |
| <span class="font-bold text-xl text-white">Maximage</span> | |
| </div> | |
| <p class="mb-6"> | |
| Creating memorable brand experiences through high-quality promotional products since 2005. | |
| </p> | |
| <p>© <span x-text="new Date().getFullYear()"></span> Maximage. All rights reserved.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white text-lg mb-4">Quick Links</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#showcase" class="hover:text-white transition">Featured Work</a></li> | |
| <li><a href="#products" class="hover:text-white transition">Product Catalog</a></li> | |
| <li><a href="#process" class="hover:text-white transition">Our Process</a></li> | |
| <li><a href="#testimonials" class="hover:text-white transition">Testimonials</a></li> | |
| <li><a href="#contact" class="hover:text-white transition">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white text-lg mb-4">Product Categories</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="hover:text-white transition">Apparel & Accessories</a></li> | |
| <li><a href="#" class="hover:text-white transition">Drinkware & Barware</a></li> | |
| <li><a href="#" class="hover:text-white transition">Tech Accessories</a></li> | |
| <li><a href="#" class="hover:text-white transition">Office Supplies</a></li> | |
| <li><a href="#" class="hover:text-white transition">Eco-Friendly Products</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white text-lg mb-4">Subscribe</h4> | |
| <p class="mb-4">Get the latest product ideas and promotions.</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Your email" class="flex-grow px-4 py-2 rounded-l-lg focus:outline-none text-gray-800"> | |
| <button class="bg-primary px-4 py-2 rounded-r-lg text-white hover:bg-opacity-90 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| <div class="flex gap-4 mt-6"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition"> | |
| <i class="fab fa-pinterest-p"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-12 pt-8 text-center text-sm"> | |
| <p>Maximage Promotional Products Hub | Premium Branded Merchandise Solutions</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Quote Modal --> | |
| <div x-show="quoteModalOpen" x-transition:enter="transition ease-out duration-300" | |
| x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" | |
| x-transition:leave="transition ease-in duration-200" | |
| x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" | |
| class="fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center p-4" @click.away="quoteModalOpen = false"> | |
| <div class="bg-white rounded-2xl shadow-xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col"> | |
| <div class="flex justify-between items-center p-6 border-b"> | |
| <h2 class="text-2xl font-bold">Your Quote Bag</h2> | |
| <button @click="quoteModalOpen = false" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| </div> | |
| <div class="flex-grow overflow-y-auto p-6"> | |
| <template x-if="quoteItems.length === 0"> | |
| <div class="text-center py-12"> | |
| <div class="w-24 h-24 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-shopping-bag text-3xl text-gray-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Your Quote Bag is Empty</h3> | |
| <p class="text-gray-600 mb-6">Add products to your quote bag to get pricing</p> | |
| <button @click="quoteModalOpen = false" class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-opacity-90 transition"> | |
| Browse Products | |
| </button> | |
| </div> | |
| </template> | |
| <template x-for="(item, index) in quoteItems" :key="item.id"> | |
| <div class="quote-bag-item flex items-center gap-4 py-4 border-b last:border-b-0"> | |
| <img :src="item.image" class="w-16 h-16 object-cover rounded-lg" :alt="item.name"> | |
| <div class="flex-grow"> | |
| <h3 class="font-medium" x-text="item.name"></h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-primary font-medium" x-text="'$' + item.price"></span> | |
| <button @click="quoteItems = quoteItems.filter((_, i) => i !== index)" class="text-gray-500 hover:text-red-500"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </template> | |
| </div> | |
| <template x-if="quoteItems.length > 0"> | |
| <div class="border-t p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div> | |
| <p class="text-gray-600">Subtotal</p> | |
| <p class="text-xl font-bold" x-text="'$' + quoteItems.reduce((total, item) => total + item.price, 0).toFixed(2)"></p> | |
| </div> | |
| <button @click="quoteItems = []" class="text-red-500 hover:text-red-700 flex items-center gap-2"> | |
| <i class="fas fa-trash"></i> Clear All | |
| </button> | |
| </div> | |
| <button class="w-full py-4 bg-primary text-white font-medium rounded-lg hover:bg-opacity-90 transition"> | |
| Request Quote | |
| </button> | |
| </div> | |
| </template> | |
| </div> | |
| </div> | |
| <!-- Swiper runtime --> | |
| <script src="https://unpkg.com/swiper@9/swiper-bundle.min.js"></script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SpectrumInfinite/max-image-website-demo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |