SpectrumInfinite's picture
<!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
Raw History Blame Contribute Delete
36.7 kB
<!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 | 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 !important;
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 !important;
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>