| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>PrintPro - Custom Printing Services | Get Instant Quotes</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| fontFamily: { |
| 'sans': ['Inter', 'system-ui', 'sans-serif'], |
| }, |
| colors: { |
| brand: { |
| 50: '#eff6ff', |
| 100: '#dbeafe', |
| 200: '#bfdbfe', |
| 300: '#93c5fd', |
| 400: '#60a5fa', |
| 500: '#3b82f6', |
| 600: '#2563eb', |
| 700: '#1d4ed8', |
| 800: '#1e40af', |
| 900: '#1e3a8a', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| * { scroll-behavior: smooth; } |
| .calc-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } |
| .calc-card:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); } |
| .option-btn { transition: all 0.2s ease; } |
| .option-btn.active { transform: scale(1.02); } |
| .price-pulse { animation: pulse 0.4s ease-in-out; } |
| @keyframes pulse { |
| 0%, 100% { transform: scale(1); } |
| 50% { transform: scale(1.08); } |
| } |
| .gradient-hero { |
| background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 30%, #6366f1 60%, #8b5cf6 100%); |
| background-size: 400% 400%; |
| animation: gradientShift 15s ease infinite; |
| } |
| @keyframes gradientShift { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
| .glass-effect { |
| background: rgba(255, 255, 255, 0.08); |
| backdrop-filter: blur(20px); |
| -webkit-backdrop-filter: blur(20px); |
| border: 1px solid rgba(255, 255, 255, 0.15); |
| } |
| .ribbon { |
| position: absolute; |
| top: 16px; |
| right: -34px; |
| transform: rotate(45deg); |
| width: 140px; |
| text-align: center; |
| font-size: 0.75rem; |
| font-weight: 700; |
| padding: 4px 0; |
| letter-spacing: 0.05em; |
| } |
| input[type="range"] { |
| -webkit-appearance: none; |
| appearance: none; |
| height: 8px; |
| border-radius: 4px; |
| background: #e2e8f0; |
| outline: none; |
| } |
| input[type="range"]::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| appearance: none; |
| width: 24px; |
| height: 24px; |
| border-radius: 50%; |
| background: #2563eb; |
| cursor: pointer; |
| border: 3px solid white; |
| box-shadow: 0 2px 8px rgba(0,0,0,0.2); |
| transition: all 0.15s ease; |
| } |
| input[type="range"]::-webkit-slider-thumb:hover { |
| transform: scale(1.15); |
| box-shadow: 0 4px 16px rgba(37,99,235,0.4); |
| } |
| .product-card { transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } |
| .product-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(0,0,0,0.15); } |
| .product-card:hover .product-overlay { opacity: 1; } |
| .product-overlay { transition: opacity 0.35s ease; opacity: 0; } |
| .toast { animation: slideIn 0.4s ease, fadeOut 0.4s ease 2.6s forwards; } |
| @keyframes slideIn { |
| from { transform: translateX(120%); opacity: 0; } |
| to { transform: translateX(0); opacity: 1; } |
| } |
| @keyframes fadeOut { |
| from { opacity: 1; } |
| to { opacity: 0; } |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50 text-gray-800 antialiased"> |
|
|
| |
| <nav class="sticky top-0 z-50 bg-white/95 backdrop-blur-md shadow-sm border-b border-gray-100"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex items-center justify-between h-16"> |
| <div class="flex items-center gap-2"> |
| <div class="w-9 h-9 bg-brand-600 rounded-lg flex items-center justify-center"> |
| <i data-lucide="printer" class="text-white w-5 h-5"></i> |
| </div> |
| <span class="text-xl font-extrabold text-gray-900 tracking-tight">Print<span class="text-brand-600">Pro</span></span> |
| </div> |
| <div class="hidden md:flex items-center gap-8 text-sm font-medium text-gray-600"> |
| <a href="#products" class="hover:text-brand-600 transition-colors">Products</a> |
| <a href="#calculator" class="hover:text-brand-600 transition-colors">Quote Calculator</a> |
| <a href="#how-it-works" class="hover:text-brand-600 transition-colors">How It Works</a> |
| <a href="#features" class="hover:text-brand-600 transition-colors">Features</a> |
| <a href="admin.html" class="ml-4 px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-700 transition-all flex items-center gap-2 text-xs"> |
| <i data-lucide="shield" class="w-3.5 h-3.5"></i> Admin |
| </a> |
| </div> |
| <button id="mobileMenuBtn" class="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors"> |
| <i data-lucide="menu" class="w-6 h-6 text-gray-700"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div id="mobileMenu" class="hidden md:hidden bg-white border-t border-gray-100 shadow-lg"> |
| <div class="px-4 py-3 space-y-2"> |
| <a href="#products" class="block py-2 px-3 rounded-lg hover:bg-gray-50 text-gray-700 font-medium">Products</a> |
| <a href="#calculator" class="block py-2 px-3 rounded-lg hover:bg-gray-50 text-gray-700 font-medium">Quote Calculator</a> |
| <a href="#how-it-works" class="block py-2 px-3 rounded-lg hover:bg-gray-50 text-gray-700 font-medium">How It Works</a> |
| <a href="#features" class="block py-2 px-3 rounded-lg hover:bg-gray-50 text-gray-700 font-medium">Features</a> |
| <a href="admin.html" class="block py-2 px-3 rounded-lg bg-gray-100 text-gray-700 font-medium flex items-center gap-2"> |
| <i data-lucide="shield" class="w-4 h-4"></i> Admin Panel |
| </a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="gradient-hero text-white relative overflow-hidden"> |
| <div class="absolute inset-0 bg-black/10"></div> |
| <div class="absolute top-0 right-0 w-96 h-96 bg-white/5 rounded-full -translate-y-1/2 translate-x-1/4 blur-3xl"></div> |
| <div class="absolute bottom-0 left-0 w-72 h-72 bg-white/5 rounded-full translate-y-1/3 -translate-x-1/4 blur-3xl"></div> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28 relative z-10"> |
| <div class="grid md:grid-cols-2 gap-12 items-center"> |
| <div> |
| <span class="inline-block bg-white/20 backdrop-blur-sm rounded-full px-4 py-1.5 text-sm font-semibold mb-6 tracking-wide"> |
| ⚡ Premium Quality Printing |
| </span> |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight mb-6 tracking-tight"> |
| Custom Printing,<br> |
| <span class="text-yellow-300">Instant Quotes</span> |
| </h1> |
| <p class="text-lg md:text-xl text-white/80 mb-8 max-w-lg leading-relaxed"> |
| Business cards, flyers, banners, and more. Get an instant quote, customize your options, and order with confidence. Fast turnaround, premium quality. |
| </p> |
| <div class="flex flex-wrap gap-4"> |
| <a href="#calculator" class="inline-flex items-center gap-2 bg-white text-brand-700 font-bold px-7 py-3.5 rounded-xl hover:bg-gray-100 transition-all shadow-lg hover:shadow-xl text-lg"> |
| Get Instant Quote <i data-lucide="arrow-right" class="w-5 h-5"></i> |
| </a> |
| <a href="#products" class="inline-flex items-center gap-2 bg-white/15 backdrop-blur-sm text-white font-semibold px-7 py-3.5 rounded-xl hover:bg-white/25 transition-all border border-white/30 text-lg"> |
| View Products |
| </a> |
| </div> |
| <div class="flex items-center gap-6 mt-8 text-white/70 text-sm"> |
| <div class="flex items-center gap-1.5"><i data-lucide="check-circle" class="w-4 h-4 text-green-400"></i> Free Shipping*</div> |
| <div class="flex items-center gap-1.5"><i data-lucide="check-circle" class="w-4 h-4 text-green-400"></i> Fast Turnaround</div> |
| <div class="flex items-center gap-1.5"><i data-lucide="check-circle" class="w-4 h-4 text-green-400"></i> Premium Quality</div> |
| </div> |
| </div> |
| <div class="hidden md:flex justify-center"> |
| <div class="glass-effect rounded-2xl p-6 w-full max-w-sm relative"> |
| <div class="bg-white/10 rounded-xl p-5 mb-4"> |
| <i data-lucide="credit-card" class="w-10 h-10 text-yellow-300 mb-3"></i> |
| <p class="text-3xl font-extrabold text-white">$<span id="heroPrice">29</span><span class="text-lg font-normal text-white/70"> /starting</span></p> |
| <p class="text-white/60 text-sm mt-1">500 Business Cards</p> |
| </div> |
| <div class="space-y-2"> |
| <div class="flex justify-between text-sm text-white/70"><span>Paper:</span><span class="text-white font-medium">14pt Gloss</span></div> |
| <div class="flex justify-between text-sm text-white/70"><span>Finish:</span><span class="text-white font-medium">Matte Coating</span></div> |
| <div class="flex justify-between text-sm text-white/70"><span>Turnaround:</span><span class="text-white font-medium">5-7 Business Days</span></div> |
| </div> |
| <div class="mt-4 pt-4 border-t border-white/20"> |
| <button onclick="document.getElementById('calculator').scrollIntoView({behavior:'smooth'})" class="w-full bg-yellow-400 text-gray-900 font-bold py-2.5 rounded-lg hover:bg-yellow-300 transition-colors text-sm"> |
| Customize Your Quote |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <div class="bg-white border-b border-gray-100 py-5"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-wrap items-center justify-center gap-8 md:gap-12"> |
| <div class="flex items-center gap-2 text-gray-500 text-sm font-medium"><i data-lucide="shield-check" class="w-5 h-5 text-green-500"></i> 100% Satisfaction</div> |
| <div class="flex items-center gap-2 text-gray-500 text-sm font-medium"><i data-lucide="truck" class="w-5 h-5 text-brand-500"></i> Free Shipping Over $75</div> |
| <div class="flex items-center gap-2 text-gray-500 text-sm font-medium"><i data-lucide="clock" class="w-5 h-5 text-brand-500"></i> Rush Delivery Available</div> |
| <div class="flex items-center gap-2 text-gray-500 text-sm font-medium"><i data-lucide="star" class="w-5 h-5 text-yellow-500"></i> 4.9/5 Rating</div> |
| </div> |
| </div> |
|
|
| |
| <section id="products" class="py-16 md:py-20 bg-gray-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-12"> |
| <span class="text-brand-600 font-semibold text-sm tracking-widest uppercase">Our Products</span> |
| <h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 mt-3 mb-4">Premium Printing Solutions</h2> |
| <p class="text-gray-500 max-w-2xl mx-auto text-lg">Choose from our wide range of printing products. Click any product to get an instant customized quote.</p> |
| </div> |
| <div id="productGrid" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 md:gap-6"> |
| |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="calculator" class="py-16 md:py-20 bg-white relative"> |
| <div class="absolute inset-0 bg-gradient-to-b from-gray-50/50 to-white pointer-events-none"></div> |
| <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> |
| <div class="text-center mb-10"> |
| <span class="text-brand-600 font-semibold text-sm tracking-widest uppercase">Quote Calculator</span> |
| <h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 mt-3 mb-4">Get Your Instant Quote</h2> |
| <p class="text-gray-500 max-w-2xl mx-auto">Configure your product below and see pricing update in real-time.</p> |
| </div> |
|
|
| <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden calc-card"> |
| |
| <div class="p-6 md:p-8 border-b border-gray-100 bg-gray-50/50"> |
| <label class="block text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">Select Product</label> |
| <div id="productSelector" class="flex flex-wrap gap-2"> |
| |
| </div> |
| </div> |
|
|
| |
| <div class="p-6 md:p-8 grid md:grid-cols-2 gap-6"> |
| |
| <div> |
| <label class="block text-sm font-semibold text-gray-600 mb-2">Size</label> |
| <div id="sizeOptions" class="flex flex-wrap gap-2"> |
| |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-semibold text-gray-600 mb-2">Paper Type</label> |
| <div id="paperOptions" class="flex flex-wrap gap-2"> |
| |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-semibold text-gray-600 mb-2">Finishing</label> |
| <div id="finishingOptions" class="flex flex-wrap gap-2"> |
| |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-semibold text-gray-600 mb-2">Turnaround Time</label> |
| <div id="turnaroundOptions" class="flex flex-wrap gap-2"> |
| |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="p-6 md:p-8 border-t border-gray-100 bg-gray-50/50"> |
| <div class="grid md:grid-cols-2 gap-8 items-end"> |
| <div> |
| <label class="block text-sm font-semibold text-gray-600 mb-2"> |
| Quantity: <span id="quantityDisplay" class="text-brand-600 font-bold text-lg">500</span> |
| </label> |
| <input type="range" id="quantitySlider" min="0" max="100" value="50" class="w-full cursor-pointer"> |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> |
| <span id="qtyMin">50</span> |
| <span id="qtyMax">10000</span> |
| </div> |
| </div> |
| <div class="text-center md:text-right"> |
| <p class="text-sm text-gray-500 font-medium">Estimated Total</p> |
| <p class="text-5xl md:text-6xl font-extrabold text-gray-900 tracking-tight" id="totalPrice">$29.00</p> |
| <p class="text-sm text-gray-400 mt-1" id="pricePerUnit">$0.058 / unit</p> |
| <button class="mt-4 bg-brand-600 text-white font-bold px-8 py-3 rounded-xl hover:bg-brand-700 transition-all shadow-lg hover:shadow-xl inline-flex items-center gap-2 text-lg"> |
| <i data-lucide="shopping-cart" class="w-5 h-5"></i> Order Now |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="how-it-works" class="py-16 md:py-20 bg-gray-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-12"> |
| <span class="text-brand-600 font-semibold text-sm tracking-widest uppercase">Process</span> |
| <h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 mt-3 mb-4">How It Works</h2> |
| </div> |
| <div class="grid md:grid-cols-4 gap-8"> |
| <div class="text-center"> |
| <div class="w-16 h-16 bg-brand-100 rounded-2xl flex items-center justify-center mx-auto mb-4"> |
| <i data-lucide="mouse-pointer-click" class="w-8 h-8 text-brand-600"></i> |
| </div> |
| <h3 class="font-bold text-gray-900 mb-2">1. Choose Product</h3> |
| <p class="text-gray-500 text-sm">Select from our wide range of printing products</p> |
| </div> |
| <div class="text-center"> |
| <div class="w-16 h-16 bg-brand-100 rounded-2xl flex items-center justify-center mx-auto mb-4"> |
| <i data-lucide="sliders-horizontal" class="w-8 h-8 text-brand-600"></i> |
| </div> |
| <h3 class="font-bold text-gray-900 mb-2">2. Customize</h3> |
| <p class="text-gray-500 text-sm">Pick size, paper, finish & quantity</p> |
| </div> |
| <div class="text-center"> |
| <div class="w-16 h-16 bg-brand-100 rounded-2xl flex items-center justify-center mx-auto mb-4"> |
| <i data-lucide="calculator" class="w-8 h-8 text-brand-600"></i> |
| </div> |
| <h3 class="font-bold text-gray-900 mb-2">3. Get Quote</h3> |
| <p class="text-gray-500 text-sm">See your instant price in real-time</p> |
| </div> |
| <div class="text-center"> |
| <div class="w-16 h-16 bg-brand-100 rounded-2xl flex items-center justify-center mx-auto mb-4"> |
| <i data-lucide="package-check" class="w-8 h-8 text-brand-600"></i> |
| </div> |
| <h3 class="font-bold text-gray-900 mb-2">4. Receive Order</h3> |
| <p class="text-gray-500 text-sm">Fast delivery right to your doorstep</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="features" class="py-16 md:py-20 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-2 gap-12 items-center"> |
| <div> |
| <span class="text-brand-600 font-semibold text-sm tracking-widest uppercase">Why Choose Us</span> |
| <h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 mt-3 mb-6">Quality Prints, Every Time</h2> |
| <div class="space-y-4"> |
| <div class="flex gap-4"> |
| <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5"> |
| <i data-lucide="palette" class="w-5 h-5 text-green-600"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold text-gray-900">Vibrant Full-Color Printing</h4> |
| <p class="text-gray-500 text-sm">State-of-the-art offset and digital presses for stunning color accuracy.</p> |
| </div> |
| </div> |
| <div class="flex gap-4"> |
| <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5"> |
| <i data-lucide="layers" class="w-5 h-5 text-green-600"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold text-gray-900">Premium Paper Stock</h4> |
| <p class="text-gray-500 text-sm">Choose from 14pt, 16pt, uncoated, and specialty papers for the perfect feel.</p> |
| </div> |
| </div> |
| <div class="flex gap-4"> |
| <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5"> |
| <i data-lucide="zap" class="w-5 h-5 text-green-600"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold text-gray-900">Rush Turnaround Options</h4> |
| <p class="text-gray-500 text-sm">Need it fast? Get your order in as little as 2-3 business days with rush delivery.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="bg-gray-50 rounded-xl p-6 text-center"> |
| <p class="text-4xl font-extrabold text-brand-600">15+</p> |
| <p class="text-gray-500 text-sm mt-1">Years Experience</p> |
| </div> |
| <div class="bg-gray-50 rounded-xl p-6 text-center"> |
| <p class="text-4xl font-extrabold text-brand-600">50k+</p> |
| <p class="text-gray-500 text-sm mt-1">Happy Clients</p> |
| </div> |
| <div class="bg-gray-50 rounded-xl p-6 text-center"> |
| <p class="text-4xl font-extrabold text-brand-600">200+</p> |
| <p class="text-gray-500 text-sm mt-1">Products</p> |
| </div> |
| <div class="bg-gray-50 rounded-xl p-6 text-center"> |
| <p class="text-4xl font-extrabold text-brand-600">98%</p> |
| <p class="text-gray-500 text-sm mt-1">Satisfaction</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-brand-700 text-white"> |
| <div class="max-w-4xl mx-auto px-4 text-center"> |
| <h2 class="text-3xl md:text-4xl font-extrabold mb-4">Ready to Print?</h2> |
| <p class="text-white/80 text-lg mb-8">Get your instant quote now and experience premium quality printing.</p> |
| <a href="#calculator" class="inline-flex items-center gap-2 bg-yellow-400 text-gray-900 font-bold px-8 py-3.5 rounded-xl hover:bg-yellow-300 transition-all text-lg shadow-lg"> |
| Get Your Quote <i data-lucide="arrow-right" class="w-5 h-5"></i> |
| </a> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-gray-400 py-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> |
| <div> |
| <div class="flex items-center gap-2 mb-4"> |
| <div class="w-8 h-8 bg-brand-500 rounded-lg flex items-center justify-center"> |
| <i data-lucide="printer" class="text-white w-4 h-4"></i> |
| </div> |
| <span class="text-lg font-bold text-white">Print<span class="text-brand-400">Pro</span></span> |
| </div> |
| <p class="text-sm">Premium custom printing services for businesses and individuals.</p> |
| </div> |
| <div> |
| <h4 class="font-semibold text-white mb-3">Products</h4> |
| <ul class="space-y-2 text-sm"> |
| <li><a href="#" class="hover:text-white transition-colors">Business Cards</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Flyers & Brochures</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Banners & Posters</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Stickers & Labels</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-semibold text-white mb-3">Support</h4> |
| <ul class="space-y-2 text-sm"> |
| <li><a href="#" class="hover:text-white transition-colors">Contact Us</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">FAQs</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Shipping Info</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Returns</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-semibold text-white mb-3">Contact</h4> |
| <ul class="space-y-2 text-sm"> |
| <li class="flex items-center gap-2"><i data-lucide="mail" class="w-4 h-4"></i> hello@printpro.com</li> |
| <li class="flex items-center gap-2"><i data-lucide="phone" class="w-4 h-4"></i> (555) 123-4567</li> |
| <li class="flex items-center gap-2"><i data-lucide="map-pin" class="w-4 h-4"></i> San Francisco, CA</li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 pt-6 text-center text-sm"> |
| <p>© 2025 PrintPro. All rights reserved. | <a href="admin.html" class="hover:text-white transition-colors">Admin Panel</a></p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="toast" class="fixed top-6 right-6 z-[100] hidden bg-gray-900 text-white px-5 py-3 rounded-xl shadow-2xl flex items-center gap-2 text-sm font-medium toast"> |
| <i data-lucide="check-circle" class="w-4 h-4 text-green-400"></i> |
| <span id="toastMsg">Saved!</span> |
| </div> |
|
|
| <script src="https://unpkg.com/lucide@latest"></script> |
| <script src="script.js"></script> |
| <script> |
| lucide.createIcons(); |
| </script> |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
| </body> |
| </html> |
