Spaces:

BuckalewFinancial
/

palletpal-pro

Running

App Files Files Community

BuckalewFinancial commited on Jan 28

Commit

2b691e7

verified ·

1 Parent(s): 6a4a4ce

can you complete the build...all other pages

Browse files

Files changed (8) hide show

about.html +356 -0
b2b.html +1 -2
components/footer.js +351 -0
components/navbar.js +372 -0
contact.html +1 -2
index.html +0 -1
products.html +1 -2
script.js +383 -1

about.html ADDED Viewed

	@@ -0,0 +1,356 @@

+<!DOCTYPE html>
+<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>

b2b.html CHANGED Viewed

@@ -280,10 +280,9 @@
     </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>

     </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>

components/footer.js ADDED Viewed

	@@ -0,0 +1,351 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        * {
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+        }
+        :host {
+          display: block;
+        }
+        footer {
+          background: #1c1917;
+          color: #fafaf9;
+          padding: 4rem 0 2rem;
+        }
+        .footer-container {
+          max-width: 1280px;
+          margin: 0 auto;
+          padding: 0 1rem;
+        }
+        .footer-grid {
+          display: grid;
+          grid-template-columns: repeat(4, 1fr);
+          gap: 3rem;
+          margin-bottom: 3rem;
+        }
+        @media (max-width: 1024px) {
+          .footer-grid {
+            grid-template-columns: repeat(2, 1fr);
+          }
+        }
+        @media (max-width: 640px) {
+          .footer-grid {
+            grid-template-columns: 1fr;
+          }
+        }
+        .footer-brand {
+          grid-column: span 1;
+        }
+        @media (max-width: 1024px) {
+          .footer-brand {
+            grid-column: span 2;
+          }
+        }
+        @media (max-width: 640px) {
+          .footer-brand {
+            grid-column: span 1;
+          }
+        }
+        .footer-logo {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          text-decoration: none;
+          font-family: 'Playfair Display', serif;
+          font-size: 1.5rem;
+          font-weight: 700;
+          color: #fafaf9;
+          margin-bottom: 1rem;
+        }
+        .footer-logo-icon {
+          width: 40px;
+          height: 40px;
+          background: linear-gradient(135deg, #22c55e 0%, #f97316 100%);
+          border-radius: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .footer-logo-icon svg {
+          width: 24px;
+          height: 24px;
+          color: white;
+        }
+        .footer-description {
+          color: #a8a29e;
+          font-size: 0.95rem;
+          line-height: 1.7;
+          margin-bottom: 1.5rem;
+        }
+        .social-links {
+          display: flex;
+          gap: 0.75rem;
+        }
+        .social-link {
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+          background: #292524;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all 0.2s ease;
+        }
+        .social-link:hover {
+          background: #16a34a;
+        }
+        .social-link svg {
+          width: 20px;
+          height: 20px;
+          color: #a8a29e;
+        }
+        .social-link:hover svg {
+          color: white;
+        }
+        .footer-column h4 {
+          font-size: 1rem;
+          font-weight: 600;
+          color: #fafaf9;
+          margin-bottom: 1.25rem;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+        }
+        .footer-links {
+          list-style: none;
+        }
+        .footer-links li {
+          margin-bottom: 0.75rem;
+        }
+        .footer-links a {
+          color: #a8a29e;
+          text-decoration: none;
+          font-size: 0.95rem;
+          transition: color 0.2s ease;
+        }
+        .footer-links a:hover {
+          color: #22c55e;
+        }
+        .contact-info {
+          list-style: none;
+        }
+        .contact-info li {
+          display: flex;
+          align-items: flex-start;
+          gap: 0.75rem;
+          margin-bottom: 1rem;
+          color: #a8a29e;
+          font-size: 0.95rem;
+        }
+        .contact-info svg {
+          width: 20px;
+          height: 20px;
+          color: #22c55e;
+          flex-shrink: 0;
+          margin-top: 0.125rem;
+        }
+        .footer-bottom {
+          border-top: 1px solid #292524;
+          padding-top: 2rem;
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+        @media (min-width: 640px) {
+          .footer-bottom {
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+          }
+        }
+        .copyright {
+          color: #78716c;
+          font-size: 0.875rem;
+        }
+        .footer-bottom-links {
+          display: flex;
+          gap: 1.5rem;
+        }
+        .footer-bottom-links a {
+          color: #78716c;
+          text-decoration: none;
+          font-size: 0.875rem;
+          transition: color 0.2s ease;
+        }
+        .footer-bottom-links a:hover {
+          color: #22c55e;
+        }
+        .newsletter {
+          margin-top: 1.5rem;
+        }
+        .newsletter-form {
+          display: flex;
+          gap: 0.5rem;
+        }
+        .newsletter-input {
+          flex: 1;
+          padding: 0.625rem 1rem;
+          border-radius: 8px;
+          border: 1px solid #44403c;
+          background: #292524;
+          color: #fafaf9;
+          font-size: 0.9rem;
+        }
+        .newsletter-input::placeholder {
+          color: #78716c;
+        }
+        .newsletter-input:focus {
+          outline: none;
+          border-color: #22c55e;
+        }
+        .newsletter-btn {
+          padding: 0.625rem 1rem;
+          background: #16a34a;
+          color: white;
+          border: none;
+          border-radius: 8px;
+          font-weight: 600;
+          font-size: 0.9rem;
+          cursor: pointer;
+          transition: background 0.2s ease;
+        }
+        .newsletter-btn:hover {
+          background: #15803d;
+        }
+      </style>
+      <footer>
+        <div class="footer-container">
+          <div class="footer-grid">
+            <div class="footer-brand">
+              <a href="index.html" class="footer-logo">
+                <div class="footer-logo-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <span>PalletPal Pro</span>
+              </a>
+              <p class="footer-description">
+                Premium pallet solutions for businesses of all sizes. Quality craftsmanship, sustainable practices, and exceptional service since 1995.
+              </p>
+              <div class="social-links">
+                <a href="#" class="social-link" aria-label="LinkedIn">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
+                </a>
+                <a href="#" class="social-link" aria-label="Facebook">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
+                </a>
+                <a href="#" class="social-link" aria-label="Instagram">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
+                </a>
+                <a href="#" class="social-link" aria-label="Twitter">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/></svg>
+                </a>
+              </div>
+            </div>
+            <div class="footer-column">
+              <h4>Products</h4>
+              <ul class="footer-links">
+                <li><a href="products.html">New Pallets</a></li>
+                <li><a href="products.html">Used Pallets</a></li>
+                <li><a href="products.html">Custom Pallets</a></li>
+                <li><a href="products.html">Export Pallets</a></li>
+                <li><a href="products.html">Pallet Accessories</a></li>
+              </ul>
+            </div>
+            <div class="footer-column">
+              <h4>Company</h4>
+              <ul class="footer-links">
+                <li><a href="about.html">About Us</a></li>
+                <li><a href="b2b.html">B2B Solutions</a></li>
+                <li><a href="about.html#sustainability">Sustainability</a></li>
+                <li><a href="about.html#careers">Careers</a></li>
+                <li><a href="contact.html">Contact</a></li>
+              </ul>
+            </div>
+            <div class="footer-column">
+              <h4>Contact Us</h4>
+              <ul class="contact-info">
+                <li>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+                  <span>1234 Pallet Way<br>Chicago, IL 60609</span>
+                </li>
+                <li>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
+                  <span>(555) 123-4567</span>
+                </li>
+                <li>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+                  <span>sales@palletpalpro.com</span>
+                </li>
+              </ul>
+              <div class="newsletter">
+                <h4 style="font-size: 0.875rem; margin-bottom: 0.75rem;">Newsletter</h4>
+                <form class="newsletter-form" onsubmit="event.preventDefault(); alert('Thanks for subscribing!');">
+                  <input type="email" placeholder="Your email" class="newsletter-input" required>
+                  <button type="submit" class="newsletter-btn">Join</button>
+                </form>
+              </div>
+            </div>
+          </div>
+          <div class="footer-bottom">
+            <p class="copyright">&copy; 2024 PalletPal Pro. All rights reserved.</p>
+            <div class="footer-bottom-links">
+              <a href="#">Privacy Policy</a>
+              <a href="#">Terms of Service</a>
+              <a href="#">Cookie Settings</a>
+            </div>
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,372 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        * {
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+        }
+        :host {
+          display: block;
+        }
+        nav {
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 1000;
+          background: rgba(250, 250, 249, 0.9);
+          backdrop-filter: blur(12px);
+          -webkit-backdrop-filter: blur(12px);
+          border-bottom: 1px solid rgba(231, 229, 228, 0.5);
+          transition: all 0.3s ease;
+        }
+        .dark nav {
+          background: rgba(28, 25, 23, 0.9);
+          border-bottom-color: rgba(68, 64, 60, 0.5);
+        }
+        .nav-container {
+          max-width: 1280px;
+          margin: 0 auto;
+          padding: 0 1rem;
+        }
+        .nav-inner {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 72px;
+        }
+        .logo {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          text-decoration: none;
+          font-family: 'Playfair Display', serif;
+          font-size: 1.5rem;
+          font-weight: 700;
+          color: #1c1917;
+        }
+        .dark .logo {
+          color: #fafaf9;
+        }
+        .logo-icon {
+          width: 40px;
+          height: 40px;
+          background: linear-gradient(135deg, #16a34a 0%, #f97316 100%);
+          border-radius: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .logo-icon svg {
+          width: 24px;
+          height: 24px;
+          color: white;
+        }
+        .nav-links {
+          display: flex;
+          align-items: center;
+          gap: 2rem;
+          list-style: none;
+        }
+        .nav-links a {
+          text-decoration: none;
+          color: #57534e;
+          font-weight: 500;
+          font-size: 0.95rem;
+          transition: color 0.2s ease;
+          position: relative;
+        }
+        .dark .nav-links a {
+          color: #a8a29e;
+        }
+        .nav-links a:hover {
+          color: #16a34a;
+        }
+        .nav-links a.active {
+          color: #16a34a;
+        }
+        .nav-links a.active::after {
+          content: '';
+          position: absolute;
+          bottom: -6px;
+          left: 0;
+          right: 0;
+          height: 2px;
+          background: #16a34a;
+          border-radius: 1px;
+        }
+        .nav-actions {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+        }
+        .btn-primary {
+          padding: 0.625rem 1.25rem;
+          background: #16a34a;
+          color: white;
+          text-decoration: none;
+          border-radius: 10px;
+          font-weight: 600;
+          font-size: 0.9rem;
+          transition: all 0.2s ease;
+        }
+        .btn-primary:hover {
+          background: #15803d;
+          transform: translateY(-1px);
+        }
+        .theme-toggle {
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+          border: 1px solid #e7e5e4;
+          background: white;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all 0.2s ease;
+        }
+        .dark .theme-toggle {
+          background: #292524;
+          border-color: #44403c;
+        }
+        .theme-toggle:hover {
+          background: #f5f5f4;
+        }
+        .dark .theme-toggle:hover {
+          background: #44403c;
+        }
+        .theme-toggle svg {
+          width: 20px;
+          height: 20px;
+          color: #57534e;
+        }
+        .dark .theme-toggle svg {
+          color: #a8a29e;
+        }
+        .mobile-menu-btn {
+          display: none;
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+          border: 1px solid #e7e5e4;
+          background: white;
+          cursor: pointer;
+          align-items: center;
+          justify-content: center;
+        }
+        .dark .mobile-menu-btn {
+          background: #292524;
+          border-color: #44403c;
+        }
+        .mobile-menu-btn svg {
+          width: 20px;
+          height: 20px;
+          color: #57534e;
+        }
+        .dark .mobile-menu-btn svg {
+          color: #a8a29e;
+        }
+        .mobile-menu {
+          display: none;
+          position: absolute;
+          top: 100%;
+          left: 0;
+          right: 0;
+          background: rgba(250, 250, 249, 0.98);
+          backdrop-filter: blur(12px);
+          border-bottom: 1px solid #e7e5e4;
+          padding: 1rem;
+        }
+        .dark .mobile-menu {
+          background: rgba(28, 25, 23, 0.98);
+          border-bottom-color: #44403c;
+        }
+        .mobile-menu.active {
+          display: block;
+        }
+        .mobile-menu a {
+          display: block;
+          padding: 0.875rem 1rem;
+          color: #57534e;
+          text-decoration: none;
+          font-weight: 500;
+          border-radius: 10px;
+          transition: all 0.2s ease;
+        }
+        .dark .mobile-menu a {
+          color: #a8a29e;
+        }
+        .mobile-menu a:hover {
+          background: #f5f5f4;
+          color: #16a34a;
+        }
+        .dark .mobile-menu a:hover {
+          background: #292524;
+        }
+        @media (max-width: 1024px) {
+          .nav-links {
+            display: none;
+          }
+          .mobile-menu-btn {
+            display: flex;
+          }
+        }
+        @media (max-width: 640px) {
+          .btn-primary {
+            display: none;
+          }
+        }
+      </style>
+      <nav>
+        <div class="nav-container">
+          <div class="nav-inner">
+            <a href="index.html" class="logo">
+              <div class="logo-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+              </div>
+              <span>PalletPal Pro</span>
+            </a>
+            <ul class="nav-links">
+              <li><a href="index.html" class="nav-link">Home</a></li>
+              <li><a href="products.html" class="nav-link">Products</a></li>
+              <li><a href="b2b.html" class="nav-link">B2B</a></li>
+              <li><a href="about.html" class="nav-link">About</a></li>
+              <li><a href="contact.html" class="nav-link">Contact</a></li>
+            </ul>
+            <div class="nav-actions">
+              <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
+                <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
+                <svg class="moon-icon" style="display: none;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+              </button>
+              <a href="contact.html" class="btn-primary">Get Quote</a>
+              <button class="mobile-menu-btn" id="mobile-menu-btn" aria-label="Toggle menu">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+              </button>
+            </div>
+          </div>
+          <div class="mobile-menu" id="mobile-menu">
+            <a href="index.html">Home</a>
+            <a href="products.html">Products</a>
+            <a href="b2b.html">B2B</a>
+            <a href="about.html">About</a>
+            <a href="contact.html">Contact</a>
+            <a href="contact.html" style="background: #16a34a; color: white; text-align: center; margin-top: 0.5rem;">Get Quote</a>
+          </div>
+        </div>
+      </nav>
+      <div style="height: 72px;"></div>
+    `;
+    this.setupEventListeners();
+    this.setActiveLink();
+    this.initTheme();
+  }
+  setupEventListeners() {
+    const mobileMenuBtn = this.shadowRoot.getElementById('mobile-menu-btn');
+    const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
+    const themeToggle = this.shadowRoot.getElementById('theme-toggle');
+    mobileMenuBtn?.addEventListener('click', () => {
+      mobileMenu.classList.toggle('active');
+    });
+    themeToggle?.addEventListener('click', () => {
+      this.toggleTheme();
+    });
+    // Close mobile menu when clicking outside
+    document.addEventListener('click', (e) => {
+      if (!this.contains(e.target) && mobileMenu.classList.contains('active')) {
+        mobileMenu.classList.remove('active');
+      }
+    });
+  }
+  setActiveLink() {
+    const currentPage = window.location.pathname.split('/').pop() || 'index.html';
+    const links = this.shadowRoot.querySelectorAll('.nav-link');
+    links.forEach(link => {
+      const href = link.getAttribute('href');
+      if (href === currentPage || (currentPage === '' && href === 'index.html')) {
+        link.classList.add('active');
+      }
+    });
+  }
+  initTheme() {
+    const isDark = localStorage.getItem('theme') === 'dark' ||
+      (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    if (isDark) {
+      document.documentElement.classList.add('dark');
+      this.shadowRoot.querySelector('.sun-icon').style.display = 'none';
+      this.shadowRoot.querySelector('.moon-icon').style.display = 'block';
+    }
+  }
+  toggleTheme() {
+    const isDark = document.documentElement.classList.toggle('dark');
+    localStorage.setItem('theme', isDark ? 'dark' : 'light');
+    const sunIcon = this.shadowRoot.querySelector('.sun-icon');
+    const moonIcon = this.shadowRoot.querySelector('.moon-icon');
+    if (isDark) {
+      sunIcon.style.display = 'none';
+      moonIcon.style.display = 'block';
+    } else {
+      sunIcon.style.display = 'block';
+      moonIcon.style.display = 'none';
+    }
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

contact.html CHANGED Viewed

@@ -204,10 +204,9 @@
     </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>

     </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>

index.html CHANGED Viewed

@@ -411,6 +411,5 @@
     <script src="components/footer.js"></script>
     <script src="script.js"></script>
     <script>feather.replace();</script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

     <script src="components/footer.js"></script>
     <script src="script.js"></script>
     <script>feather.replace();</script>
 </body>
 </html>

products.html CHANGED Viewed

@@ -147,10 +147,9 @@
     </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>

     </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>

script.js CHANGED Viewed

@@ -1,3 +1,4 @@
 // PalletPal Pro - Main JavaScript
 // Product data
@@ -27,4 +28,385 @@ const products = [
         price: 6.99,
         image: "http://static.photos/industry/640x480/3",
         description: "Top-quality refurbished pallets, repaired to like-new condition.",
-        specs: ["48\" x 40\" x

 // PalletPal Pro - Main JavaScript
 // Product data
         price: 6.99,
         image: "http://static.photos/industry/640x480/3",
         description: "Top-quality refurbished pallets, repaired to like-new condition.",
+        specs: ["48\" x 40\" x 6\"", "2,200 lbs capacity", "Heat treated"]
+    },
+    {
+        id: 4,
+        name: "Export/Heat Treated",
+        category: "export",
+        price: 15.99,
+        image: "http://static.photos/industry/640x480/4",
+        description: "ISPM-15 compliant pallets for international shipping.",
+        specs: ["48\" x 40\" x 6\"", "IPPC marked", "Global compliant"]
+    },
+    {
+        id: 5,
+        name: "Custom Size Pallet",
+        category: "custom",
+        price: 35.00,
+        image: "http://static.photos/craft/640x480/5",
+        description: "Built to your exact specifications and requirements.",
+        specs: ["Any size up to 96\"", "Custom capacity", "Your choice of wood"]
+    },
+    {
+        id: 6,
+        name: "Lightweight Economy",
+        category: "new",
+        price: 8.99,
+        image: "http://static.photos/industry/640x480/6",
+        description: "Cost-effective solution for light to medium loads.",
+        specs: ["48\" x 40\" x 5.5\"", "1,500 lbs capacity", "Softwood construction"]
+    }
+];
+// Testimonials data
+const testimonials = [
+    {
+        id: 1,
+        name: "Robert Martinez",
+        company: "FastTrack Logistics",
+        role: "Operations Director",
+        image: "http://static.photos/people/200x200/101",
+        content: "PalletPal Pro has been our go-to supplier for 5 years. Their quality is consistent, delivery is always on time, and their team genuinely cares about our success.",
+        rating: 5
+    },
+    {
+        id: 2,
+        name: "Jennifer Walsh",
+        company: "Midwest Manufacturing",
+        role: "Supply Chain Manager",
+        image: "http://static.photos/people/200x200/102",
+        content: "The B2B program saved us 30% on pallet costs while eliminating stockouts. Their just-in-time delivery model transformed our warehouse operations.",
+        rating: 5
+    },
+    {
+        id: 3,
+        name: "David Kim",
+        company: "GreenGrocer Distributors",
+        role: "CEO",
+        image: "http://static.photos/people/200x200/103",
+        content: "As a company focused on sustainability, we love that PalletPal Pro shares our values. Their recycled pallet program aligns perfectly with our mission.",
+        rating: 5
+    }
+];
+// Pricing configuration
+const pricing = {
+    standard: { base: 12.99, multiplier: 1 },
+    heavy: { base: 24.99, multiplier: 1 },
+    custom: { base: 35.00, multiplier: 1.2 },
+    used: { base: 6.99, multiplier: 1 },
+    export: { base: 15.99, multiplier: 1 }
+};
+const locationMultipliers = {
+    local: 1,
+    regional: 1.15,
+    national: 1.35
+};
+// DOM Ready
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize Feather icons
+    if (typeof feather !== 'undefined') {
+        feather.replace();
+    }
+    // Load products on index page
+    loadFeaturedProducts();
+    // Load all products on products page
+    loadAllProducts();
+    // Load testimonials
+    loadTestimonials();
+    // Setup quote calculator
+    setupQuoteCalculator();
+    // Setup product filters
+    setupProductFilters();
+    // Setup forms
+    setupForms();
+    // Setup scroll animations
+    setupScrollAnimations();
+});
+// Load featured products (homepage)
+function loadFeaturedProducts() {
+    const grid = document.getElementById('product-grid');
+    if (!grid) return;
+    const featuredProducts = products.slice(0, 3);
+    grid.innerHTML = featuredProducts.map(product => createProductCard(product)).join('');
+    if (typeof feather !== 'undefined') {
+        feather.replace();
+    }
+}
+// Load all products (products page)
+function loadAllProducts() {
+    const grid = document.getElementById('all-products-grid');
+    if (!grid) return;
+    grid.innerHTML = products.map(product => createProductCard(product)).join('');
+    if (typeof feather !== 'undefined') {
+        feather.replace();
+    }
+}
+// Create product card HTML
+function createProductCard(product) {
+    return `
+        <div class="bg-white dark:bg-wood-800 rounded-2xl overflow-hidden shadow-lg border border-wood-100 dark:border-wood-700 hover:shadow-2xl transition-all duration-300 group card-lift" data-category="${product.category}">
+            <div class="relative h-56 overflow-hidden img-zoom">
+                <img src="${product.image}" alt="${product.name}" class="w-full h-full object-cover">
+                <div class="absolute top-4 left-4">
+                    <span class="px-3 py-1 bg-primary-600 text-white text-xs font-semibold rounded-full uppercase tracking-wide">${product.category}</span>
+                </div>
+            </div>
+            <div class="p-6">
+                <div class="flex items-center justify-between mb-2">
+                    <h3 class="font-display text-xl font-bold">${product.name}</h3>
+                    <span class="text-2xl font-bold text-primary-600">${product.price.toFixed(2)}</span>
+                </div>
+                <p class="text-wood-600 dark:text-wood-400 text-sm mb-4">${product.description}</p>
+                <ul class="space-y-2 mb-6">
+                    ${product.specs.map(spec => `
+                        <li class="flex items-center gap-2 text-sm text-wood-500 dark:text-wood-400">
+                            <i data-feather="check" class="w-4 h-4 text-primary-500"></i>
+                            ${spec}
+                        </li>
+                    `).join('')}
+                </ul>
+                <a href="contact.html" class="w-full py-3 bg-wood-100 dark:bg-wood-700 hover:bg-primary-600 hover:text-white dark:hover:bg-primary-600 text-wood-800 dark:text-wood-100 rounded-xl font-semibold transition-all duration-300 flex items-center justify-center gap-2">
+                    <i data-feather="shopping-cart" class="w-4 h-4"></i>
+                    Request Quote
+                </a>
+            </div>
+        </div>
+    `;
+}
+// Load testimonials
+function loadTestimonials() {
+    const grid = document.getElementById('testimonials-grid');
+    if (!grid) return;
+    grid.innerHTML = testimonials.map(t => `
+        <div class="bg-white dark:bg-wood-800 rounded-2xl p-8 shadow-lg border border-wood-100 dark:border-wood-700">
+            <div class="flex gap-1 mb-4">
+                ${Array(t.rating).fill('<i data-feather="star" class="w-5 h-5 text-secondary-500 fill-current"></i>').join('')}
+            </div>
+            <p class="text-wood-600 dark:text-wood-300 mb-6 leading-relaxed">"${t.content}"</p>
+            <div class="flex items-center gap-4">
+                <img src="${t.image}" alt="${t.name}" class="w-12 h-12 rounded-full object-cover">
+                <div>
+                    <div class="font-semibold">${t.name}</div>
+                    <div class="text-sm text-wood-500 dark:text-wood-400">${t.role}, ${t.company}</div>
+                </div>
+            </div>
+        </div>
+    `).join('');
+    if (typeof feather !== 'undefined') {
+        feather.replace();
+    }
+}
+// Setup quote calculator
+function setupQuoteCalculator() {
+    const form = document.getElementById('quote-form');
+    const result = document.getElementById('quote-result');
+    const priceEl = document.getElementById('quote-price');
+    if (!form) return;
+    form.addEventListener('submit', function(e) {
+        e.preventDefault();
+        const type = document.getElementById('pallet-type').value;
+        const quantity = parseInt(document.getElementById('quantity').value) || 1;
+        const location = document.getElementById('location').value;
+        const basePrice = pricing[type].base;
+        const locationMult = locationMultipliers[location];
+        const volumeDiscount = quantity >= 500 ? 0.85 : quantity >= 100 ? 0.9 : 1;
+        const total = basePrice * quantity * locationMult * volumeDiscount;
+        priceEl.textContent = ' + total.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+        result.classList.remove('hidden');
+        // Animate the price
+        animateValue(priceEl, 0, total, 500);
+    });
+}
+// Animate number value
+function animateValue(element, start, end, duration) {
+    const range = end - start;
+    const increment = end > start ? 1 : -1;
+    const stepTime = Math.abs(Math.floor(duration / (range / 100)));
+    let current = start;
+    const timer = setInterval(() => {
+        current += range / 20;
+        if ((increment > 0 && current >= end) || (increment < 0 && current <= end)) {
+            current = end;
+            clearInterval(timer);
+        }
+        element.textContent = ' + current.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+    }, stepTime);
+}
+// Submit quote request
+function submitQuote() {
+    const type = document.getElementById('pallet-type').value;
+    const quantity = document.getElementById('quantity').value;
+    // Store in sessionStorage for contact form
+    sessionStorage.setItem('quoteType', type);
+    sessionStorage.setItem('quoteQuantity', quantity);
+    window.location.href = 'contact.html?subject=quote';
+}
+// Setup product filters
+function setupProductFilters() {
+    const buttons = document.querySelectorAll('.filter-btn');
+    const cards = document.querySelectorAll('[data-category]');
+    if (!buttons.length) return;
+    buttons.forEach(btn => {
+        btn.addEventListener('click', () => {
+            // Update active state
+            buttons.forEach(b => {
+                b.classList.remove('active', 'bg-primary-600', 'text-white');
+                b.classList.add('bg-white', 'dark:bg-wood-800');
+            });
+            btn.classList.add('active', 'bg-primary-600', 'text-white');
+            btn.classList.remove('bg-white', 'dark:bg-wood-800');
+            // Filter cards
+            const filter = btn.dataset.filter;
+            cards.forEach(card => {
+                if (filter === 'all' || card.dataset.category === filter) {
+                    card.style.display = 'block';
+                    card.classList.add('animate-scale-in');
+                } else {
+                    card.style.display = 'none';
+                }
+            });
+        });
+    });
+}
+// Setup forms
+function setupForms() {
+    // Contact form
+    const contactForm = document.getElementById('contact-form');
+    if (contactForm) {
+        // Pre-fill if coming from quote
+        const urlParams = new URLSearchParams(window.location.search);
+        const subject = urlParams.get('subject');
+        if (subject === 'quote') {
+            const subjectSelect = contactForm.querySelector('select');
+            if (subjectSelect) subjectSelect.value = 'Request Quote';
+        }
+        contactForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            showToast('Message sent successfully! We\'ll get back to you within 2 hours.');
+            this.reset();
+        });
+    }
+    // B2B form
+    const b2bForm = document.getElementById('b2b-form');
+    if (b2bForm) {
+        b2bForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            showToast('Consultation request submitted! Our B2B team will contact you shortly.');
+            this.reset();
+        });
+    }
+}
+// Show toast notification
+function showToast(message) {
+    // Remove existing toast
+    const existing = document.querySelector('.toast');
+    if (existing) existing.remove();
+    const toast = document.createElement('div');
+    toast.className = 'toast';
+    toast.innerHTML = `
+        <div class="flex items-center gap-3">
+            <i data-feather="check-circle" class="w-5 h-5 text-primary-600"></i>
+            <span>${message}</span>
+        </div>
+    `;
+    document.body.appendChild(toast);
+    if (typeof feather !== 'undefined') {
+        feather.replace();
+    }
+    setTimeout(() => toast.classList.add('show'), 10);
+    setTimeout(() => {
+        toast.classList.remove('show');
+        setTimeout(() => toast.remove(), 300);
+    }, 4000);
+}
+// Setup scroll animations
+function setupScrollAnimations() {
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate-slide-up');
+                observer.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+    // Observe sections for animation
+    document.querySelectorAll('section > div').forEach(el => {
+        el.style.opacity = '0';
+        el.style.transform = 'translateY(30px)';
+        observer.observe(el);
+    });
+}
+// Add CSS animation classes dynamically
+const style = document.createElement('style');
+style.textContent = `
+    .animate-slide-up {
+        animation: slideUp 0.6s ease-out forwards;
+    }
+    @keyframes slideUp {
+        from {
+            opacity: 0;
+            transform: translateY(30px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+`;
+document.head.appendChild(style);