############################################## ## ROLE ############################################## You are a **senior front-end + WordPress engineer** tasked with rebuilding **Maximage Promotional Products** into a modern, quote-driven B2B portal that rivals HALO, Swag.com, PCNA, Gemline, Pop! Promos, ETS Express and Numo. ############################################## ## PROMO-INDUSTRY MUST-HAVES (WHY) ############################################## • **Quote-First Workflow** – configurable item → instant quote → artwork upload → proof approval → PO (HALO, Pop! Promos) :contentReference[oaicite:0]{index=0} • **Variation Engine** – handle 50 k+ colour / imprint combos per SKU (PCNA’s weekly spotlight pens) :contentReference[oaicite:1]{index=1} • **Dynamic Pricing Matrix** – base + setup + imprint + rush + freight (ETS Express drinkware wizard) :contentReference[oaicite:2]{index=2} • **Supplier Feeds** – live stock & lead time via PromoStandards (open spec) :contentReference[oaicite:3]{index=3} • **Multi-Leg Freight Calc** – vendor → decorator → client split-ship logic (Numo order-status portal shows legs) :contentReference[oaicite:4]{index=4} • **Company Stores / Kitting** – Swag.com “Send-a-Link” gifting & multi-address fulfilment :contentReference[oaicite:5]{index=5} • **Trust / CSR Badges** – Gemline “betterway” CSR, NSF/SQF PDF links :contentReference[oaicite:6]{index=6} • **Resource Hub** – blogs & lookbooks echo HALO and PCNA content marketing :contentReference[oaicite:7]{index=7} ############################################## ## GLOBAL TECH STACK ############################################## WordPress 6.x **block theme** · Tailwind v4 · Vite build · Alpine v3 · Swiper 9 · GSAP 3 ACF Pro for Quote & Proof CPTs · PromoStandards inventory cron · Stripe B2B (PO & card) ############################################## ## FILE MAP ############################################## theme-maximage/ ├─ functions.php – enqueue Vite, register menus, CPT Quote/QuoteItem, PromoStandards cron ├─ theme.json – palette (Max Red #C51428, Charcoal #1E1E1E, Gray-100 #F7F9FA) & fonts (‘Inter’) ├─ resources/ css/, js/, images/ ├─ templates/ front-page.php · page-programs.php · page-resources.php · page-contact.php ├─ cpt-quote.php · cpt-company-store.php └─ parts/ header.php · mega-menu.php · hero.php · discovery-hub.php · programs.php · proof-cta.php · trust-badges.php · blog-teasers.php · client-logos.php · footer.php · quote-drawer.php ############################################## ## HOME-PAGE SECTION SPEC ############################################## 1. **Hero Banner** • Headline “Custom Promotional Products, Endless Possibilities” • Sub-copy + 2 CTAs: “Start Your Quote” (opens 4-step wizard) / “Browse Products”. • Background lifestyle kit + subtle SVG wave (CSS-only). • Customer-type marquee (corporate, events, non-profits) – mirrors Swag.com rotating value props :contentReference[oaicite:8]{index=8} 2. **Product Discovery Hub** • Six category tiles (Apparel, Drinkware, Tech, Eco, Office, Kits). • Faceted filter bar (colour, price, lead time) like HALO grid :contentReference[oaicite:9]{index=9}. • “External Catalogue Search” button opens branded modal; falls back to new tab. • “Trending Now” Swiper pulling PCNA Product-Of-The-Week feed :contentReference[oaicite:10]{index=10}. 3. **Programs & Services** • Cards: Company Stores, Kitting & Drop-Ship, Recognition / Uniforms; copy modelled on HALO solutions :contentReference[oaicite:11]{index=11}. 4. **Virtual Sample / Proof CTA** • Split layout: left animated GIF of Pantone-matched mock-up (Pop! Promos) :contentReference[oaicite:12]{index=12}; right upload form → Quote CPT. 5. **Sustainability / Trust Badges** • NSF & SQF icons + Gemline “betterway” style CSR blurb :contentReference[oaicite:13]{index=13}. 6. **Resources & Case Studies** • 3-post blog teaser; 2 downloadable lookbooks (PCNA new products PDF style) :contentReference[oaicite:14]{index=14}. 7. **Client Logos & Testimonials** • CSS marquee logo strip (HALO partner carousel) :contentReference[oaicite:15]{index=15}; Swiper testimonial cards. 8. **Contact & Quote Form** • Two-column CF7 form (logo upload) + QR / phone; posts Quote CPT status “New”. ############################################## ## HEADER / MENU ############################################## Left logo → Pages: **Products · Industries · Programs · Services · Resources · About** → Quote Bag icon (sticky) → EN/FR toggle. Mega-menu for *Products* lists HALO-style subcats & quick links :contentReference[oaicite:16]{index=16}. ############################################## ## FOOTER ############################################## Brand blurb · Explore (same as header) · Support (Quote Status, Artwork Guide, FAQ) · Compliance (NSF, SQF, CSR) · Connect (email, phone, LinkedIn, Instagram) – mirrors Numo + Gemline layouts :contentReference[oaicite:17]{index=17}. ############################################## ## ACCEPTANCE TESTS ############################################## ✓ Create quote with 1 953 combinations < 3 s. ✓ Proof approval toggles status + email. ✓ Multi-leg freight calc returns total. ✓ PromoStandards feed sync passes health check. ✓ Lighthouse mobile & desktop scores = 100 / 100 / 100 / 100. ✓ EN/FR hreflang, schema.org Product & Organization validated. ############################################## ## DELIVERY ############################################## Return complete Git repo (theme, package.json) + editor manual (Markdown). - Initial Deployment
88a58d8 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Maximage Promotional Products | Custom Branded Merchandise</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" /> | |
| <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'max-red': '#C51428', | |
| 'charcoal': '#1E1E1E', | |
| 'gray-100': '#F7F9FA', | |
| }, | |
| fontFamily: { | |
| 'inter': ['Inter', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .wave-divider { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| overflow: hidden; | |
| line-height: 0; | |
| transform: rotate(180deg); | |
| } | |
| .wave-divider svg { | |
| position: relative; | |
| display: block; | |
| width: calc(100% + 1.3px); | |
| height: 50px; | |
| } | |
| .wave-divider .shape-fill { | |
| fill: #FFFFFF; | |
| } | |
| .marquee { | |
| animation: marquee 20s linear infinite; | |
| } | |
| @keyframes marquee { | |
| 0% { transform: translateX(100%); } | |
| 100% { transform: translateX(-100%); } | |
| } | |
| .quote-step { | |
| transition: all 0.3s ease; | |
| } | |
| .quote-step.active { | |
| border-color: #C51428; | |
| background-color: #F7F9FA; | |
| } | |
| .product-card:hover .product-overlay { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .proof-form input[type="file"] { | |
| display: none; | |
| } | |
| .proof-label { | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .proof-label:hover { | |
| background-color: #e5e7eb; | |
| } | |
| .trust-badge:hover { | |
| transform: translateY(-5px); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-inter bg-gray-100 text-charcoal"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 bg-white shadow-md"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex items-center justify-between h-20"> | |
| <!-- Logo --> | |
| <div class="flex-shrink-0"> | |
| <a href="#" class="text-2xl font-bold tracking-tight"> | |
| <span class="text-max-red">MAX</span>IMAGE | |
| </a> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden lg:flex space-x-8"> | |
| <a href="#" class="font-medium hover:text-max-red transition-colors">Products</a> | |
| <a href="#" class="font-medium hover:text-max-red transition-colors">Industries</a> | |
| <a href="#" class="font-medium hover:text-max-red transition-colors">Programs</a> | |
| <a href="#" class="font-medium hover:text-max-red transition-colors">Services</a> | |
| <a href="#" class="font-medium hover:text-max-red transition-colors">Resources</a> | |
| <a href="#" class="font-medium hover:text-max-red transition-colors">About</a> | |
| </nav> | |
| <!-- Right Side --> | |
| <div class="flex items-center space-x-4"> | |
| <!-- Quote Bag --> | |
| <button class="relative p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-shopping-bag text-xl"></i> | |
| <span class="absolute top-0 right-0 bg-max-red text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span> | |
| </button> | |
| <!-- Language Toggle --> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| EN/FR | |
| </button> | |
| <!-- Mobile Menu Button --> | |
| <button class="lg:hidden p-2 rounded-md hover:bg-gray-100"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative bg-gradient-to-r from-charcoal to-gray-900 text-white overflow-hidden"> | |
| <!-- Background Image --> | |
| <div class="absolute inset-0 bg-cover bg-center opacity-30" style="background-image: url('https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');"></div> | |
| <!-- Content --> | |
| <div class="container mx-auto px-4 py-24 relative z-10"> | |
| <div class="max-w-3xl"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6"> | |
| Custom Promotional Products, <span class="text-max-red">Endless Possibilities</span> | |
| </h1> | |
| <p class="text-xl mb-10 opacity-90"> | |
| Elevate your brand with premium promotional merchandise tailored to your exact specifications. Instant quotes, expert decoration, and seamless fulfillment. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#quote-wizard" class="bg-max-red hover:bg-red-800 text-white font-bold py-3 px-8 rounded-lg transition-colors"> | |
| Start Your Quote | |
| </a> | |
| <a href="#discovery-hub" class="bg-white hover:bg-gray-100 text-charcoal font-bold py-3 px-8 rounded-lg transition-colors"> | |
| Browse Products | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Wave Divider --> | |
| <div class="wave-divider"> | |
| <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> | |
| <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path> | |
| </svg> | |
| </div> | |
| <!-- Marquee --> | |
| <div class="bg-max-red py-3 overflow-hidden"> | |
| <div class="marquee flex"> | |
| <div class="flex space-x-12 whitespace-nowrap"> | |
| <span class="text-white font-medium">Corporate Branding Solutions</span> | |
| <span class="text-white font-medium">Event Merchandise Specialists</span> | |
| <span class="text-white font-medium">Non-Profit Fundraising Support</span> | |
| <span class="text-white font-medium">Employee Recognition Programs</span> | |
| <span class="text-white font-medium">Trade Show Essentials</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Product Discovery Hub --> | |
| <section id="discovery-hub" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Product Discovery Hub</h2> | |
| <p class="text-lg max-w-2xl mx-auto text-gray-600"> | |
| Explore thousands of customizable products across all categories. Filter by your specific requirements. | |
| </p> | |
| </div> | |
| <!-- Category Tiles --> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-12"> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden transition-transform hover:scale-105"> | |
| <div class="h-40 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-tshirt text-4xl text-max-red"></i> | |
| </div> | |
| <div class="p-4 text-center font-medium">Apparel</div> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden transition-transform hover:scale-105"> | |
| <div class="h-40 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-mug-hot text-4xl text-max-red"></i> | |
| </div> | |
| <div class="p-4 text-center font-medium">Drinkware</div> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden transition-transform hover:scale-105"> | |
| <div class="h-40 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-laptop text-4xl text-max-red"></i> | |
| </div> | |
| <div class="p-4 text-center font-medium">Tech</div> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden transition-transform hover:scale-105"> | |
| <div class="h-40 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-leaf text-4xl text-max-red"></i> | |
| </div> | |
| <div class="p-4 text-center font-medium">Eco-Friendly</div> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden transition-transform hover:scale-105"> | |
| <div class="h-40 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-briefcase text-4xl text-max-red"></i> | |
| </div> | |
| <div class="p-4 text-center font-medium">Office</div> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden transition-transform hover:scale-105"> | |
| <div class="h-40 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-gift text-4xl text-max-red"></i> | |
| </div> | |
| <div class="p-4 text-center font-medium">Kits</div> | |
| </div> | |
| </div> | |
| <!-- Filter Bar --> | |
| <div class="bg-gray-100 rounded-lg p-4 mb-8"> | |
| <div class="flex flex-wrap gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Color</label> | |
| <select class="w-full md:w-40 rounded-md border-gray-300 shadow-sm"> | |
| <option>Any Color</option> | |
| <option>Red</option> | |
| <option>Blue</option> | |
| <option>Black</option> | |
| <option>White</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Price Range</label> | |
| <select class="w-full md:w-40 rounded-md border-gray-300 shadow-sm"> | |
| <option>Any Price</option> | |
| <option>Under $1.00</option> | |
| <option>$1.00 - $5.00</option> | |
| <option>$5.00 - $10.00</option> | |
| <option>Over $10.00</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Lead Time</label> | |
| <select class="w-full md:w-40 rounded-md border-gray-300 shadow-sm"> | |
| <option>Any Time</option> | |
| <option>1-3 Days</option> | |
| <option>3-7 Days</option> | |
| <option>7-14 Days</option> | |
| <option>14+ Days</option> | |
| </select> | |
| </div> | |
| <div class="flex items-end"> | |
| <button class="bg-max-red hover:bg-red-800 text-white py-2 px-6 rounded-md transition-colors"> | |
| Apply Filters | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trending Now Swiper --> | |
| <div class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-2xl font-bold">Trending Now</h3> | |
| <div class="flex space-x-2"> | |
| <button class="trending-prev p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="trending-next p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="swiper trending-swiper"> | |
| <div class="swiper-wrapper"> | |
| <!-- Product 1 --> | |
| <div class="swiper-slide"> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md"> | |
| <div class="h-56 bg-gray-200 relative"> | |
| <div class="absolute top-2 right-2 bg-max-red text-white text-xs px-2 py-1 rounded"> | |
| Hot | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h4 class="font-bold mb-1">Stainless Steel Tumbler</h4> | |
| <p class="text-sm text-gray-600 mb-3">Double-wall vacuum insulated</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">$8.99</span> | |
| <button class="text-max-red hover:text-red-800"> | |
| <i class="fas fa-plus-circle"></i> Add to Quote | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="swiper-slide"> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md"> | |
| <div class="h-56 bg-gray-200 relative"> | |
| <div class="absolute top-2 right-2 bg-max-red text-white text-xs px-2 py-1 rounded"> | |
| New | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h4 class="font-bold mb-1">Organic Cotton Tote</h4> | |
| <p class="text-sm text-gray-600 mb-3">Eco-friendly reusable bag</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">$3.49</span> | |
| <button class="text-max-red hover:text-red-800"> | |
| <i class="fas fa-plus-circle"></i> Add to Quote | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="swiper-slide"> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md"> | |
| <div class="h-56 bg-gray-200 relative"> | |
| <div class="absolute top-2 right-2 bg-max-red text-white text-xs px-2 py-1 rounded"> | |
| Best Seller | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h4 class="font-bold mb-1">Wireless Power Bank</h4> | |
| <p class="text-sm text-gray-600 mb-3">10,000mAh with Qi charging</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">$12.99</span> | |
| <button class="text-max-red hover:text-red-800"> | |
| <i class="fas fa-plus-circle"></i> Add to Quote | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="swiper-slide"> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md"> | |
| <div class="h-56 bg-gray-200"></div> | |
| <div class="p-4"> | |
| <h4 class="font-bold mb-1">Soft Touch Pen</h4> | |
| <p class="text-sm text-gray-600 mb-3">Premium writing experience</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">$0.89</span> | |
| <button class="text-max-red hover:text-red-800"> | |
| <i class="fas fa-plus-circle"></i> Add to Quote | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- External Catalog Button --> | |
| <div class="text-center"> | |
| <button class="inline-flex items-center px-6 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"> | |
| <i class="fas fa-external-link-alt mr-2"></i> | |
| External Catalogue Search | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Programs & Services --> | |
| <section class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Programs & Services</h2> | |
| <p class="text-lg max-w-2xl mx-auto text-gray-600"> | |
| Comprehensive solutions for all your promotional product needs | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Company Stores --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-store text-5xl text-max-red"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Company Stores</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Custom branded online stores for your employees or customers to order branded merchandise on demand. | |
| </p> | |
| <a href="#" class="text-max-red font-medium hover:underline">Learn More</a> | |
| </div> | |
| </div> | |
| <!-- Kitting & Drop-Ship --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-boxes text-5xl text-max-red"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Kitting & Drop-Ship</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Assemble custom kits and ship directly to recipients anywhere in the world with branded packaging. | |
| </p> | |
| <a href="#" class="text-max-red font-medium hover:underline">Learn More</a> | |
| </div> | |
| </div> | |
| <!-- Recognition --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-medal text-5xl text-max-red"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Recognition Programs</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Customized employee recognition programs with premium awards and milestone gifts. | |
| </p> | |
| <a href="#" class="text-max-red font-medium hover:underline">Learn More</a> | |
| </div> | |
| </div> | |
| <!-- Uniforms --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-tshirt text-5xl text-max-red"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Uniforms & Workwear</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Custom branded uniforms and workwear tailored to your industry requirements. | |
| </p> | |
| <a href="#" class="text-max-red font-medium hover:underline">Learn More</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Virtual Sample / Proof CTA --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <!-- Left: Animated GIF --> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-96 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-cube text-5xl text-max-red mb-4"></i> | |
| <p class="text-gray-600">Pantone-matched mockup visualization</p> | |
| </div> | |
| </div> | |
| <!-- Right: Upload Form --> | |
| <div> | |
| <h2 class="text-3xl font-bold mb-6">Need a Virtual Proof?</h2> | |
| <p class="text-lg text-gray-600 mb-8"> | |
| Upload your artwork and we'll create a photorealistic mockup so you can visualize your product before production. | |
| </p> | |
| <form class="space-y-6"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Product Selection</label> | |
| <select class="w-full rounded-md border-gray-300 shadow-sm"> | |
| <option>Select a product</option> | |
| <option>T-Shirt</option> | |
| <option>Mug</option> | |
| <option>Pen</option> | |
| <option>Tote Bag</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Artwork Upload</label> | |
| <div class="proof-form"> | |
| <input type="file" id="artwork-file"> | |
| <label for="artwork-file" class="proof-label block w-full py-12 px-4 border-2 border-dashed border-gray-300 rounded-lg text-center cursor-pointer hover:border-gray-400"> | |
| <i class="fas fa-cloud-upload-alt text-3xl text-max-red mb-3"></i> | |
| <p class="font-medium">Drag & drop your file here</p> | |
| <p class="text-sm text-gray-500 mt-1">or click to browse</p> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Special Instructions</label> | |
| <textarea rows="3" class="w-full rounded-md border-gray-300 shadow-sm" placeholder="Any specific requirements?"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-max-red hover:bg-red-800 text-white font-bold py-3 px-8 rounded-lg transition-colors"> | |
| Request Proof | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sustainability / Trust Badges --> | |
| <section class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Commitment to Excellence</h2> | |
| <p class="text-lg max-w-2xl mx-auto text-gray-600"> | |
| We adhere to the highest standards of quality, sustainability, and ethical practices. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- NSF Certified --> | |
| <div class="trust-badge bg-white rounded-lg shadow-md p-8 text-center transition-transform"> | |
| <div class="w-20 h-20 bg-max-red rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-certificate text-white text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">NSF Certified</h3> | |
| <p class="text-gray-600"> | |
| Our drinkware meets NSF safety standards for materials and construction. | |
| </p> | |
| </div> | |
| <!-- SQF Certified --> | |
| <div class="trust-badge bg-white rounded-lg shadow-md p-8 text-center transition-transform"> | |
| <div class="w-20 h-20 bg-max-red rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-shield-alt text-white text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">SQF Certified</h3> | |
| <p class="text-gray-600"> | |
| Safe Quality Food certification for products that come in contact with food. | |
| </p> | |
| </div> | |
| <!-- Sustainable Practices --> | |
| <div class="trust-badge bg-white rounded-lg shadow-md p-8 text-center transition-transform"> | |
| <div class="w-20 h-20 bg-max-red rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-leaf text-white text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Sustainable Practices</h3> | |
| <p class="text-gray-600"> | |
| Committed to reducing environmental impact through responsible sourcing and production. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Resources & Case Studies --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Resources & Case Studies</h2> | |
| <p class="text-lg max-w-2xl mx-auto text-gray-600"> | |
| Insights and inspiration to help you make the most of your promotional products. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12"> | |
| <!-- Blog Post 1 --> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden"> | |
| <div class="h-56 bg-gray-200"></div> | |
| <div class="p-6"> | |
| <span class="text-sm text-max-red font-medium">Trends</span> | |
| <h3 class="text-xl font-bold my-2">Top Promotional Products for 2023</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Discover the most sought-after promotional items this year and how to leverage them. | |
| </p> | |
| <a href="#" class="text-max-red font-medium hover:underline">Read More</a> | |
| </div> | |
| </div> | |
| <!-- Blog Post 2 --> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden"> | |
| <div class="h-56 bg-gray-200"></div> | |
| <div class="p-6"> | |
| <span class="text-sm text-max-red font-medium">Case Study</span> | |
| <h3 class="text-xl font-bold my-2">Boosting Brand Recognition at TechExpo</h3> | |
| <p class="text-gray-600 mb-4"> | |
| How a tech startup increased booth traffic by 75% with strategic promotional items. | |
| </p> | |
| <a href="#" class="text-max-red font-medium hover:underline">Read More</a> | |
| </div> | |
| </div> | |
| <!-- Blog Post 3 --> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden"> | |
| <div class="h-56 bg-gray-200"></div> | |
| <div class="p-6"> | |
| <span class="text-sm text-max-red font-medium">Guide</span> | |
| <h3 class="text-xl font-bold my-2">The Complete Artwork Guide</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Everything you need to know about preparing artwork for promotional products. | |
| </p> | |
| <a href="#" class="text-max-red font-medium hover:underline">Read More</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Lookbooks --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-max-red text-white rounded-lg p-8"> | |
| <div class="flex items-start"> | |
| <div class="mr-6"> | |
| <i class="fas fa-book-open text-4xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">Eco-Friendly Collection</h3> | |
| <p class="mb-4">Browse our sustainable products made from recycled and biodegradable materials.</p> | |
| <button class="bg-white text-max-red font-bold py-2 px-6 rounded-lg"> | |
| Download Lookbook | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-charcoal text-white rounded-lg p-8"> | |
| <div class="flex items-start"> | |
| <div class="mr-6"> | |
| <i class="fas fa-book-open text-4xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">Tech Accessories Guide</h3> | |
| <p class="mb-4">Explore our latest tech accessories perfect for corporate gifting and events.</p> | |
| <button class="bg-white text-charcoal font-bold py-2 px-6 rounded-lg"> | |
| Download Lookbook | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Client Logos & Testimonials --> | |
| <section class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <!-- Logo Marquee --> | |
| <div class="bg-white py-8 mb-16 overflow-hidden"> | |
| <div class="marquee flex"> | |
| <div class="flex space-x-16 whitespace-nowrap"> | |
| <span class="text-2xl font-bold opacity-80">Microsoft</span> | |
| <span class="text-2xl font-bold opacity-80">Nike</span> | |
| <span class="text-2xl font-bold opacity-80">Google</span> | |
| <span class="text-2xl font-bold opacity-80">Amazon</span> | |
| <span class="text-2xl font-bold opacity-80">Coca-Cola</span> | |
| <span class="text-2xl font-bold opacity-80">Apple</span> | |
| <span class="text-2xl font-bold opacity-80">Samsung</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Clients Say</h2> | |
| <p class="text-lg max-w-2xl mx-auto text-gray-600"> | |
| Trusted by thousands of businesses for their promotional product needs. | |
| </p> | |
| </div> | |
| <div class="swiper testimonial-swiper"> | |
| <div class="swiper-wrapper"> | |
| <!-- Testimonial 1 --> | |
| <div class="swiper-slide"> | |
| <div class="bg-white rounded-lg shadow-md p-8"> | |
| <div class="text-yellow-400 mb-4"> | |
| <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> | |
| <p class="text-gray-600 mb-6"> | |
| "The quote-first approach saved us countless hours. We received instant pricing for complex orders and the artwork proofing process was seamless." | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gray-200 mr-4"></div> | |
| <div> | |
| <h4 class="font-bold">Sarah Johnson</h4> | |
| <p class="text-sm text-gray-500">Marketing Director, TechStart Inc.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="swiper-slide"> | |
| <div class="bg-white rounded-lg shadow-md p-8"> | |
| <div class="text-yellow-400 mb-4"> | |
| <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> | |
| <p class="text-gray-600 mb-6"> | |
| "The company store solution transformed our employee gifting program. Easy to use, fully branded, and the fulfillment was flawless." | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gray-200 mr-4"></div> | |
| <div> | |
| <h4 class="font-bold">Michael Chen</h4> | |
| <p class="text-sm text-gray-500">HR Manager, Global Finance Corp</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="swiper-slide"> | |
| <div class="bg-white rounded-lg shadow-md p-8"> | |
| <div class="text-yellow-400 mb-4"> | |
| <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> | |
| <p class="text-gray-600 mb-6"> | |
| "The sustainability focus aligned perfectly with our corporate values. The eco-friendly products we received were high quality and well-received." | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gray-200 mr-4"></div> | |
| <div> | |
| <h4 class="font-bold">Emma Rodriguez</h4> | |
| <p class="text-sm text-gray-500">Sustainability Officer, GreenFuture Org</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="swiper-pagination mt-8"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact & Quote Form --> | |
| <section id="quote-wizard" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Get a Quote or Contact Us</h2> | |
| <p class="text-lg text-gray-600"> | |
| Start a quote or reach out to our team for personalized assistance. | |
| </p> | |
| </div> | |
| <!-- Quote Steps --> | |
| <div class="flex justify-between mb-8 relative"> | |
| <div class="absolute top-1/2 left-0 right-0 h-0.5 bg-gray-200 -z-10"></div> | |
| <div class="quote-step flex flex-col items-center w-1/4"> | |
| <div class="w-10 h-10 rounded-full bg-max-red flex items-center justify-center mb-2"> | |
| <span class="text-white font-bold">1</span> | |
| </div> | |
| <span class="text-sm font-medium">Product</span> | |
| </div> | |
| <div class="quote-step flex flex-col items-center w-1/4"> | |
| <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mb-2"> | |
| <span class="text-gray-600 font-bold">2</span> | |
| </div> | |
| <span class="text-sm font-medium">Options</span> | |
| </div> | |
| <div class="quote-step flex flex-col items-center w-1/4"> | |
| <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mb-2"> | |
| <span class="text-gray-600 font-bold">3</span> | |
| </div> | |
| <span class="text-sm font-medium">Artwork</span> | |
| </div> | |
| <div class="quote-step flex flex-col items-center w-1/4"> | |
| <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mb-2"> | |
| <span class="text-gray-600 font-bold">4</span> | |
| </div> | |
| <span class="text-sm font-medium">Submit</span> | |
| </div> | |
| </div> | |
| <!-- Form --> | |
| <div class="bg-gray-100 rounded-xl p-8"> | |
| <form> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">First Name</label> | |
| <input type="text" class="w-full rounded-md border-gray-300 shadow-sm"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Last Name</label> | |
| <input type="text" class="w-full rounded-md border-gray-300 shadow-sm"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Email</label> | |
| <input type="email" class="w-full rounded-md border-gray-300 shadow-sm"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Phone</label> | |
| <input type="tel" class="w-full rounded-md border-gray-300 shadow-sm"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Company</label> | |
| <input type="text" class="w-full rounded-md border-gray-300 shadow-sm"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Quantity</label> | |
| <input type="number" class="w-full rounded-md border-gray-300 shadow-sm"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium mb-1">Product Interest</label> | |
| <textarea rows="3" class="w-full rounded-md border-gray-300 shadow-sm" placeholder="Tell us about the products you're interested in..."></textarea> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium mb-1">Upload Logo/Artwork</label> | |
| <div class="flex items-center"> | |
| <button class="bg-white border border-gray-300 rounded-l-md px-4 py-2"> | |
| <i class="fas fa-paperclip mr-2"></i> Choose File | |
| </button> | |
| <div class="bg-white border-t border-b border-r border-gray-300 rounded-r-md px-4 py-2 flex-1 text-gray-500"> | |
| No file chosen | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-4"> | |
| <button type="submit" class="bg-max-red hover:bg-red-800 text-white font-bold py-3 px-8 rounded-lg transition-colors"> | |
| Submit Quote Request | |
| </button> | |
| <button type="button" class="border border-gray-300 hover:bg-gray-50 font-bold py-3 px-8 rounded-lg transition-colors"> | |
| Contact Sales | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-charcoal text-white pt-16 pb-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-12"> | |
| <!-- Brand --> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-4"> | |
| <span class="text-max-red">MAX</span>IMAGE | |
| </h3> | |
| <p class="text-gray-400 mb-4"> | |
| Premium promotional products with instant quotes, expert decoration, and seamless fulfillment. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Explore --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Explore</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Products</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Industries</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Programs</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Services</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Resources</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> | |
| </ul> | |
| </div> | |
| <!-- Support --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Support</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Quote Status</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Artwork Guide</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Shipping Info</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Returns Policy</a></li> | |
| </ul> | |
| </div> | |
| <!-- Compliance --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Compliance</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">NSF Certification</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">SQF Standards</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">CSR Report</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Supplier Code</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> | |
| </ul> | |
| </div> | |
| <!-- Contact --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Connect</h4> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-envelope mt-1 mr-3 text-gray-400"></i> | |
| <span>quotes@maximage.com</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-phone mt-1 mr-3 text-gray-400"></i> | |
| <span>1-800-MAX-IMAGE</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-3 text-gray-400"></i> | |
| <span>123 Promo Drive, Suite 100<br>Toronto, ON M5V 2T6</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 text-center text-gray-500"> | |
| <p>© 2023 Maximage Promotional Products. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Swiper sliders | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Trending Products Swiper | |
| const trendingSwiper = new Swiper('.trending-swiper', { | |
| slidesPerView: 1, | |
| spaceBetween: 20, | |
| navigation: { | |
| nextEl: '.trending-next', | |
| prevEl: '.trending-prev', | |
| }, | |
| breakpoints: { | |
| 640: { | |
| slidesPerView: 2, | |
| }, | |
| 1024: { | |
| slidesPerView: 3, | |
| }, | |
| 1280: { | |
| slidesPerView: 4, | |
| } | |
| } | |
| }); | |
| // Testimonials Swiper | |
| const testimonialSwiper = new Swiper('.testimonial-swiper', { | |
| slidesPerView: 1, | |
| spaceBetween: 30, | |
| pagination: { | |
| el: '.swiper-pagination', | |
| clickable: true, | |
| }, | |
| breakpoints: { | |
| 768: { | |
| slidesPerView: 2, | |
| } | |
| } | |
| }); | |
| // Marquee animation | |
| const marqueeElements = document.querySelectorAll('.marquee'); | |
| marqueeElements.forEach(marquee => { | |
| const content = marquee.querySelector('div'); | |
| marquee.appendChild(content.cloneNode(true)); | |
| }); | |
| // Quote step highlighting | |
| const quoteSteps = document.querySelectorAll('.quote-step'); | |
| quoteSteps[0].classList.add('active'); | |
| // Trust badges animation | |
| const trustBadges = document.querySelectorAll('.trust-badge'); | |
| trustBadges.forEach(badge => { | |
| badge.addEventListener('mouseenter', () => { | |
| badge.style.transform = 'translateY(-5px)'; | |
| }); | |
| badge.addEventListener('mouseleave', () => { | |
| badge.style.transform = 'translateY(0)'; | |
| }); | |
| }); | |
| }); | |
| </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/maximage-demo-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |