Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>B2B Solutions - PalletPal Pro</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0fdf4', | |
| 100: '#dcfce7', | |
| 200: '#bbf7d0', | |
| 300: '#86efac', | |
| 400: '#4ade80', | |
| 500: '#22c55e', | |
| 600: '#16a34a', | |
| 700: '#15803d', | |
| 800: '#166534', | |
| 900: '#14532d', | |
| }, | |
| secondary: { | |
| 50: '#fff7ed', | |
| 100: '#ffedd5', | |
| 200: '#fed7aa', | |
| 300: '#fdba74', | |
| 400: '#fb923c', | |
| 500: '#f97316', | |
| 600: '#ea580c', | |
| 700: '#c2410c', | |
| 800: '#9a3412', | |
| 900: '#7c2d12', | |
| }, | |
| wood: { | |
| 50: '#fafaf9', | |
| 100: '#f5f5f4', | |
| 200: '#e7e5e4', | |
| 300: '#d6d3d1', | |
| 400: '#a8a29e', | |
| 500: '#78716c', | |
| 600: '#57534e', | |
| 700: '#44403c', | |
| 800: '#292524', | |
| 900: '#1c1917', | |
| } | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'system-ui', 'sans-serif'], | |
| display: ['Playfair Display', 'serif'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body class="font-sans antialiased bg-wood-50 text-wood-800 dark:bg-wood-900 dark:text-wood-100"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Page Header --> | |
| <section class="relative py-20 bg-gradient-to-br from-secondary-900 to-secondary-800 text-white"> | |
| <div class="absolute inset-0 opacity-10"> | |
| <div class="absolute inset-0" style="background-image: url('data:image/svg+xml,%3Csvg width=\'40\' height=\'40\' viewBox=\'0 0 40 40\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'1\' fill-rule=\'evenodd\'%3E%3Cpath d=\'M0 40L40 0H20L0 20M40 40V20L20 40\'/%3E%3C/g%3E%3C/svg%3E');"></div> | |
| </div> | |
| <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> | |
| <div> | |
| <h1 class="font-display text-4xl lg:text-5xl font-bold mb-2">B2B Solutions</h1> | |
| <p class="text-secondary-100 text-lg">Enterprise pallet programs for manufacturers & distributors</p> | |
| </div> | |
| <div class="flex items-center gap-2 text-sm"> | |
| <a href="index.html" class="hover:text-secondary-200">Home</a> | |
| <i data-feather="chevron-right" class="w-4 h-4"></i> | |
| <span class="text-secondary-200">B2B</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Solutions Grid --> | |
| <section class="py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid lg:grid-cols-3 gap-8"> | |
| <!-- Solution 1 --> | |
| <div class="bg-white dark:bg-wood-800 rounded-3xl p-8 shadow-xl border border-wood-100 dark:border-wood-700 hover:shadow-2xl transition-shadow"> | |
| <div class="w-16 h-16 bg-primary-100 dark:bg-primary-900/30 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-feather="truck" class="w-8 h-8 text-primary-600"></i> | |
| </div> | |
| <h3 class="font-display text-2xl font-bold mb-4">Volume Purchasing</h3> | |
| <p class="text-wood-600 dark:text-wood-400 mb-6"> | |
| Lock in pricing with annual contracts. Ideal for manufacturers with predictable pallet needs. | |
| </p> | |
| <ul class="space-y-2 mb-6 text-sm"> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="w-4 h-4 text-primary-600"></i> | |
| <span>Up to 30% volume discounts</span> | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="w-4 h-4 text-primary-600"></i> | |
| <span>Price protection for 12 months</span> | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="w-4 h-4 text-primary-600"></i> | |
| <span>Flexible delivery scheduling</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Solution 2 --> | |
| <div class="bg-white dark:bg-wood-800 rounded-3xl p-8 shadow-xl border border-wood-100 dark:border-wood-700 hover:shadow-2xl transition-shadow"> | |
| <div class="w-16 h-16 bg-secondary-100 dark:bg-secondary-900/30 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-feather="refresh-cw" class="w-8 h-8 text-secondary-600"></i> | |
| </div> | |
| <h3 class="font-display text-2xl font-bold mb-4">Pallet Pooling</h3> | |
| <p class="text-wood-600 dark:text-wood-400 mb-6"> | |
| Reduce costs with our circular pallet program. We manage the entire lifecycle. | |
| </p> | |
| <ul class="space-y-2 mb-6 text-sm"> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="w-4 h-4 text-secondary-600"></i> | |
| <span>Per-trip pricing model</span> | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="w-4 h-4 text-secondary-600"></i> | |
| <span>Automatic retrieval & repair</span> | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="w-4 h-4 text-secondary-600"></i> | |
| <span>Real-time tracking included</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Solution 3 --> | |
| <div class="bg-white dark:bg-wood-800 rounded-3xl p-8 shadow-xl border border-wood-100 dark:border-wood-700 hover:shadow-2xl transition-shadow"> | |
| <div class="w-16 h-16 bg-primary-100 dark:bg-primary-900/30 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-feather="box" class="w-8 h-8 text-primary-600"></i> | |
| </div> | |
| <h3 class="font-display text-2xl font-bold mb-4">Just-in-Time Delivery</h3> | |
| <p class="text-wood-600 dark:text-wood-400 mb-6"> | |
| Never run out of pallets. Our logistics team ensures you have exactly what you need, when you need it. | |
| </p> | |
| <ul class="space-y-2 mb-6 text-sm"> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="w-4 h-4 text-primary-600"></i> | |
| <span>Same-day emergency delivery</span> | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="w-4 h-4 text-primary-600"></i> | |
| <span>On-site inventory management</span> | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i data-feather="check" class="w-4 h-4 text-primary-600"></i> | |
| <span>Automated reordering</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Case Studies --> | |
| <section class="py-20 bg-wood-100 dark:bg-wood-800/50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="font-display text-3xl font-bold text-center mb-12">Success Stories</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="bg-white dark:bg-wood-800 rounded-3xl overflow-hidden shadow-xl"> | |
| <img src="http://static.photos/warehouse/640x320/201" alt="Case Study" class="w-full h-48 object-cover"> | |
| <div class="p-8"> | |
| <div class="text-sm text-primary-600 font-semibold mb-2">Manufacturing</div> | |
| <h3 class="font-display text-xl font-bold mb-3">Regional Food Processor</h3> | |
| <p class="text-wood-600 dark:text-wood-400 mb-4"> | |
| Reduced pallet costs by 42% through our pooling program while eliminating stockouts during peak season. | |
| </p> | |
| <div class="flex gap-4 text-sm"> | |
| <div> | |
| <div class="font-bold text-2xl text-primary-600">42%</div> | |
| <div class="text-wood-500">Cost Reduction</div> | |
| </div> | |
| <div> | |
| <div class="font-bold text-2xl text-secondary-600">Zero</div> | |
| <div class="text-wood-500">Stockouts</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white dark:bg-wood-800 rounded-3xl overflow-hidden shadow-xl"> | |
| <img src="http://static.photos/industry/640x320/155" alt="Case Study" class="w-full h-48 object-cover"> | |
| <div class="p-8"> | |
| <div class="text-sm text-secondary-600 font-semibold mb-2">Distribution</div> | |
| <h3 class="font-display text-xl font-bold mb-3">National 3PL Provider</h3> | |
| <p class="text-wood-600 dark:text-wood-400 mb-4"> | |
| Custom-built pallets increased load stability by 35% and reduced product damage claims significantly. | |
| </p> | |
| <div class="flex gap-4 text-sm"> | |
| <div> | |
| <div class="font-bold text-2xl text-primary-600">35%</div> | |
| <div class="text-wood-500">Better Stability</div> | |
| </div> | |
| <div> | |
| <div class="font-bold text-2xl text-secondary-600">60%</div> | |
| <div class="text-wood-500">Fewer Claims</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Form --> | |
| <section class="py-20"> | |
| <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="bg-white dark:bg-wood-800 rounded-3xl p-8 lg:p-12 shadow-xl"> | |
| <h2 class="font-display text-3xl font-bold text-center mb-2">Partner With Us</h2> | |
| <p class="text-wood-600 dark:text-wood-400 text-center mb-8">Tell us about your business needs and we'll create a custom solution.</p> | |
| <form class="space-y-6" id="b2b-form"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Company Name</label> | |
| <input type="text" required class="w-full px-4 py-3 rounded-xl border border-wood-200 dark:border-wood-600 bg-wood-50 dark:bg-wood-900 focus:ring-2 focus:ring-primary-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Industry</label> | |
| <select class="w-full px-4 py-3 rounded-xl border border-wood-200 dark:border-wood-600 bg-wood-50 dark:bg-wood-900 focus:ring-2 focus:ring-primary-500"> | |
| <option>Manufacturing</option> | |
| <option>Distribution/3PL</option> | |
| <option>Retail</option> | |
| <option>Food & Beverage</option> | |
| <option>Pharmaceutical</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Contact Name</label> | |
| <input type="text" required class="w-full px-4 py-3 rounded-xl border border-wood-200 dark:border-wood-600 bg-wood-50 dark:bg-wood-900 focus:ring-2 focus:ring-primary-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Email</label> | |
| <input type="email" required class="w-full px-4 py-3 rounded-xl border border-wood-200 dark:border-wood-600 bg-wood-50 dark:bg-wood-900 focus:ring-2 focus:ring-primary-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Monthly Pallet Volume</label> | |
| <select class="w-full px-4 py-3 rounded-xl border border-wood-200 dark:border-wood-600 bg-wood-50 dark:bg-wood-900 focus:ring-2 focus:ring-primary-500"> | |
| <option>Less than 500</option> | |
| <option>500 - 2,000</option> | |
| <option>2,000 - 10,000</option> | |
| <option>10,000+</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Tell Us About Your Needs</label> | |
| <textarea rows="4" class="w-full px-4 py-3 rounded-xl border border-wood-200 dark:border-wood-600 bg-wood-50 dark:bg-wood-900 focus:ring-2 focus:ring-primary-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full py-4 bg-secondary-600 hover:bg-secondary-700 text-white rounded-xl font-semibold transition-all duration-300"> | |
| Request B2B Consultation | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> | |