Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>About Us - 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-primary-900 to-primary-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">About Us</h1> | |
| <p class="text-primary-100 text-lg">Three decades of pallet excellence</p> | |
| </div> | |
| <div class="flex items-center gap-2 text-sm"> | |
| <a href="index.html" class="hover:text-primary-200">Home</a> | |
| <i data-feather="chevron-right" class="w-4 h-4"></i> | |
| <span class="text-primary-200">About</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Our Story --> | |
| <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-2 gap-12 items-center"> | |
| <div> | |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 text-sm font-medium mb-6"> | |
| <i data-feather="clock" class="w-4 h-4"></i> | |
| Est. 1995 | |
| </div> | |
| <h2 class="font-display text-4xl font-bold mb-6">Our Story</h2> | |
| <div class="space-y-4 text-wood-600 dark:text-wood-400 leading-relaxed"> | |
| <p> | |
| PalletPal Pro began as a small family-owned sawmill in rural Illinois. What started as a modest operation producing wooden crates for local farmers has grown into one of the Midwest's premier pallet manufacturers and suppliers. | |
| </p> | |
| <p> | |
| In 1995, founder James Morrison recognized the growing need for standardized shipping pallets as e-commerce began to transform American logistics. With three employees and a single nailing machine, he set out to build a company that would prioritize quality, sustainability, and customer service above all else. | |
| </p> | |
| <p> | |
| Today, PalletPal Pro employs over 200 people across three facilities, producing more than 50,000 pallets monthly. We've served over 2,000 businesses, from local startups to Fortune 500 companies, always staying true to our roots of craftsmanship and integrity. | |
| </p> | |
| </div> | |
| <div class="flex gap-8 mt-8 pt-8 border-t border-wood-200 dark:border-wood-700"> | |
| <div> | |
| <div class="text-3xl font-bold text-primary-600">29</div> | |
| <div class="text-sm text-wood-500 dark:text-wood-400">Years in Business</div> | |
| </div> | |
| <div> | |
| <div class="text-3xl font-bold text-secondary-600">200+</div> | |
| <div class="text-sm text-wood-500 dark:text-wood-400">Team Members</div> | |
| </div> | |
| <div> | |
| <div class="text-3xl font-bold text-wood-700 dark:text-wood-300">3</div> | |
| <div class="text-sm text-wood-500 dark:text-wood-400">Facilities</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <img src="http://static.photos/industry/640x640/301" alt="PalletPal Pro History" class="rounded-3xl shadow-2xl"> | |
| <div class="absolute -bottom-6 -right-6 bg-white dark:bg-wood-800 p-6 rounded-2xl shadow-xl"> | |
| <div class="text-4xl font-bold text-primary-600 mb-1">2M+</div> | |
| <div class="text-sm text-wood-600 dark:text-wood-400">Pallets Produced</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Values --> | |
| <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"> | |
| <div class="text-center max-w-3xl mx-auto mb-16"> | |
| <h2 class="font-display text-4xl font-bold mb-4">Our Values</h2> | |
| <p class="text-wood-600 dark:text-wood-400 text-lg">The principles that guide every pallet we build and every relationship we nurture.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="bg-white dark:bg-wood-800 p-8 rounded-2xl shadow-lg text-center"> | |
| <div class="w-16 h-16 bg-primary-100 dark:bg-primary-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="shield" class="w-8 h-8 text-primary-600"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">Quality First</h3> | |
| <p class="text-wood-600 dark:text-wood-400 text-sm">Every pallet meets rigorous standards before leaving our facility.</p> | |
| </div> | |
| <div class="bg-white dark:bg-wood-800 p-8 rounded-2xl shadow-lg text-center"> | |
| <div class="w-16 h-16 bg-secondary-100 dark:bg-secondary-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="leaf" class="w-8 h-8 text-secondary-600"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">Sustainability</h3> | |
| <p class="text-wood-600 dark:text-wood-400 text-sm">100% of our wood comes from certified sustainable sources.</p> | |
| </div> | |
| <div class="bg-white dark:bg-wood-800 p-8 rounded-2xl shadow-lg text-center"> | |
| <div class="w-16 h-16 bg-primary-100 dark:bg-primary-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="users" class="w-8 h-8 text-primary-600"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">People Focused</h3> | |
| <p class="text-wood-600 dark:text-wood-400 text-sm">We invest in our team and treat every customer as a partner.</p> | |
| </div> | |
| <div class="bg-white dark:bg-wood-800 p-8 rounded-2xl shadow-lg text-center"> | |
| <div class="w-16 h-16 bg-secondary-100 dark:bg-secondary-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="zap" class="w-8 h-8 text-secondary-600"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">Innovation</h3> | |
| <p class="text-wood-600 dark:text-wood-400 text-sm">Continuously improving our processes and products.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team --> | |
| <section class="py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center max-w-3xl mx-auto mb-16"> | |
| <h2 class="font-display text-4xl font-bold mb-4">Leadership Team</h2> | |
| <p class="text-wood-600 dark:text-wood-400 text-lg">Meet the experienced professionals guiding PalletPal Pro into the future.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="bg-white dark:bg-wood-800 rounded-2xl overflow-hidden shadow-lg"> | |
| <img src="http://static.photos/people/400x400/401" alt="James Morrison" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="font-semibold text-lg">James Morrison</h3> | |
| <p class="text-primary-600 text-sm mb-3">Founder & Chairman</p> | |
| <p class="text-wood-600 dark:text-wood-400 text-sm">Started the company in 1995 with a vision for quality pallets.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white dark:bg-wood-800 rounded-2xl overflow-hidden shadow-lg"> | |
| <img src="http://static.photos/people/400x400/402" alt="Sarah Chen" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="font-semibold text-lg">Sarah Chen</h3> | |
| <p class="text-primary-600 text-sm mb-3">Chief Executive Officer</p> | |
| <p class="text-wood-600 dark:text-wood-400 text-sm">Leading our growth strategy and operational excellence.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white dark:bg-wood-800 rounded-2xl overflow-hidden shadow-lg"> | |
| <img src="http://static.photos/people/400x400/403" alt="Michael Torres" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="font-semibold text-lg">Michael Torres</h3> | |
| <p class="text-secondary-600 text-sm mb-3">Chief Operations Officer</p> | |
| <p class="text-wood-600 dark:text-wood-400 text-sm">Overseeing production and logistics across all facilities.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white dark:bg-wood-800 rounded-2xl overflow-hidden shadow-lg"> | |
| <img src="http://static.photos/people/400x400/404" alt="Emily Watson" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="font-semibold text-lg">Emily Watson</h3> | |
| <p class="text-secondary-600 text-sm mb-3">VP of Sustainability</p> | |
| <p class="text-wood-600 dark:text-wood-400 text-sm">Driving our environmental initiatives and green practices.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sustainability --> | |
| <section id="sustainability" class="py-20 bg-gradient-to-br from-primary-900 to-primary-800 text-white relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-10"> | |
| <div class="absolute inset-0" style="background-image: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'1\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div> | |
| </div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative"> | |
| <div class="grid lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 text-primary-100 text-sm font-medium mb-6"> | |
| <i data-feather="award" class="w-4 h-4"></i> | |
| ISO 14001 Certified | |
| </div> | |
| <h2 class="font-display text-4xl font-bold mb-6">Our Commitment to Sustainability</h2> | |
| <p class="text-primary-100 text-lg mb-8 leading-relaxed"> | |
| We believe that great pallets shouldn't come at the expense of our planet. That's why we've built sustainability into every aspect of our business. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start gap-4"> | |
| <div class="w-12 h-12 rounded-full bg-white/10 flex items-center justify-center flex-shrink-0"> | |
| <i data-feather="refresh-cw" class="w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-1">Circular Economy</h3> | |
| <p class="text-primary-100">Our buy-back and refurbishment program keeps pallets in use longer and out of landfills.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-4"> | |
| <div class="w-12 h-12 rounded-full bg-white/10 flex items-center justify-center flex-shrink-0"> | |
| <i data-feather="tree" class="w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-1">Responsible Sourcing</h3> | |
| <p class="text-primary-100">All lumber comes from FSC-certified forests with replanting programs.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-4"> | |
| <div class="w-12 h-12 rounded-full bg-white/10 flex items-center justify-center flex-shrink-0"> | |
| <i data-feather="sun" class="w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-1">Solar Powered</h3> | |
| <p class="text-primary-100">Our main facility runs on 100% renewable energy from our rooftop solar array.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-6"> | |
| <div class="bg-white/10 backdrop-blur rounded-2xl p-6 text-center"> | |
| <div class="text-4xl font-bold mb-2">85%</div> | |
| <div class="text-primary-100 text-sm">Waste Diverted from Landfills</div> | |
| </div> | |
| <div class="bg-white/10 backdrop-blur rounded-2xl p-6 text-center"> | |
| <div class="text-4xl font-bold mb-2">2M</div> | |
| <div class="text-primary-100 text-sm">Trees Planted Since 2010</div> | |
| </div> | |
| <div class="bg-white/10 backdrop-blur rounded-2xl p-6 text-center"> | |
| <div class="text-4xl font-bold mb-2">40%</div> | |
| <div class="text-primary-100 text-sm">Carbon Reduction vs. Industry Average</div> | |
| </div> | |
| <div class="bg-white/10 backdrop-blur rounded-2xl p-6 text-center"> | |
| <div class="text-4xl font-bold mb-2">100%</div> | |
| <div class="text-primary-100 text-sm">Renewable Energy at Main Facility</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Careers --> | |
| <section id="careers" class="py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h2 class="font-display text-4xl font-bold mb-6">Join Our Team</h2> | |
| <p class="text-wood-600 dark:text-wood-400 text-lg mb-8"> | |
| We're always looking for talented, hardworking individuals who share our passion for quality and sustainability. We offer competitive wages, comprehensive benefits, and opportunities for growth. | |
| </p> | |
| <div class="space-y-4 mb-8"> | |
| <div class="flex items-center gap-3"> | |
| <i data-feather="check-circle" class="w-5 h-5 text-primary-600"></i> | |
| <span>Competitive salary and performance bonuses</span> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <i data-feather="check-circle" class="w-5 h-5 text-primary-600"></i> | |
| <span>Health, dental, and vision insurance</span> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <i data-feather="check-circle" class="w-5 h-5 text-primary-600"></i> | |
| <span>401(k) with company matching</span> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <i data-feather="check-circle" class="w-5 h-5 text-primary-600"></i> | |
| <span>Paid time off and holidays</span> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <i data-feather="check-circle" class="w-5 h-5 text-primary-600"></i> | |
| <span>Career development and training programs</span> | |
| </div> | |
| </div> | |
| <a href="contact.html" class="inline-flex items-center gap-2 px-8 py-4 bg-secondary-600 hover:bg-secondary-700 text-white rounded-xl font-semibold transition-all duration-300"> | |
| <i data-feather="briefcase" class="w-5 h-5"></i> | |
| View Open Positions | |
| </a> | |
| </div> | |
| <div class="relative"> | |
| <img src="http://static.photos/workspace/640x480/501" alt="PalletPal Pro Team" class="rounded-3xl shadow-2xl"> | |
| </div> | |
| </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> |