Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>RoboRoots | Premium Precision-Rolled Cones</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header id="header"> | |
| <div class="container header-container"> | |
| <a href="#" class="logo"> | |
| <i class="fas fa-industry"></i> | |
| Robo<span>Roots</span> | |
| </a> | |
| <div class="mobile-toggle" id="mobileToggle"> | |
| <i class="fas fa-bars"></i> | |
| </div> | |
| <ul class="nav-menu" id="navMenu"> | |
| <li><a href="#features">Solutions</a></li> | |
| <li><a href="#customization">Customization</a></li> | |
| <li><a href="#sustainability">Sustainability</a></li> | |
| <li><a href="#testimonials">Testimonials</a></li> | |
| <li><a href="#cta">Contact</a></li> | |
| </ul> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="container"> | |
| <div class="hero-content"> | |
| <div class="hero-badge">Since 2018</div> | |
| <h1>Precision-Rolled Cones. Zero Compromise.</h1> | |
| <p>Industrial automation meets sustainable manufacturing to deliver the highest quality cones for your business needs.</p> | |
| <div class="hero-cta"> | |
| <a href="#cta" class="btn btn-primary">Request Custom Quote</a> | |
| <a href="#features" class="btn btn-secondary">Explore Solutions</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features" id="features"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Our Manufacturing Excellence</h2> | |
| <p>Advanced solutions for industrial-scale production</p> | |
| </div> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-cogs"></i> | |
| </div> | |
| <h3>High-Speed Automation</h3> | |
| <p>Reduce reject rates with consistent, machine-perfect cones produced at industrial scale.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-leaf"></i> | |
| </div> | |
| <h3>TCF Chlorine-Free Paper</h3> | |
| <p>European-sourced paper that's safer for consumers and the planet.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-boxes"></i> | |
| </div> | |
| <h3>Bulk Solutions</h3> | |
| <p>Wholesale pricing for orders of 10,000+ units with custom packaging options.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Customization Section --> | |
| <section class="customization" id="customization"> | |
| <div class="container"> | |
| <div class="customization-content"> | |
| <div class="customization-image"> | |
| <img src="https://images.unsplash.com/photo-1586788680434-30d324b2d46f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Custom Cone Manufacturing"> | |
| </div> | |
| <div class="customization-text"> | |
| <h2>Tailored to Your Brand</h2> | |
| <p>Create cones that perfectly match your brand identity and product requirements with our fully customizable manufacturing process.</p> | |
| <div class="specs-grid"> | |
| <div class="spec-item"> | |
| <div class="spec-icon"> | |
| <i class="fas fa-ruler"></i> | |
| </div> | |
| <div> | |
| <h4>Dimensions</h4> | |
| <p>Custom lengths & diameters</p> | |
| </div> | |
| </div> | |
| <div class="spec-item"> | |
| <div class="spec-icon"> | |
| <i class="fas fa-filter"></i> | |
| </div> | |
| <div> | |
| <h4>Filter Types</h4> | |
| <p>Wood, plastic, or eco-options</p> | |
| </div> | |
| </div> | |
| <div class="spec-item"> | |
| <div class="spec-icon"> | |
| <i class="fas fa-paint-roller"></i> | |
| </div> | |
| <div> | |
| <h4>Printing</h4> | |
| <p>Full-color branding options</p> | |
| </div> | |
| </div> | |
| <div class="spec-item"> | |
| <div class="spec-icon"> | |
| <i class="fas fa-recycle"></i> | |
| </div> | |
| <div> | |
| <h4>Materials</h4> | |
| <p>Hemp, rice, or traditional paper</p> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#cta" class="btn btn-primary">Build Your Cone</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sustainability Section --> | |
| <section class="sustainability" id="sustainability"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Sustainable Manufacturing</h2> | |
| <p>Committed to eco-friendly production processes</p> | |
| </div> | |
| <div class="sustainability-grid"> | |
| <div class="sustainability-card"> | |
| <i class="fas fa-tree"></i> | |
| <h3>Eco-Friendly Materials</h3> | |
| <p>We source sustainable materials including hemp paper and biodegradable filters to minimize environmental impact.</p> | |
| </div> | |
| <div class="sustainability-card"> | |
| <i class="fas fa-water"></i> | |
| <h3>Reduced Water Usage</h3> | |
| <p>Our manufacturing process uses 60% less water than traditional paper production methods.</p> | |
| </div> | |
| <div class="sustainability-card"> | |
| <i class="fas fa-solar-panel"></i> | |
| <h3>Renewable Energy</h3> | |
| <p>Our factory runs on 75% renewable energy with plans to reach 100% by 2025.</p> | |
| </div> | |
| </div> | |
| <div class="certifications"> | |
| <div class="cert-badge">EU Ecolabel Certified</div> | |
| <div class="cert-badge">ISO 9001:2015</div> | |
| <div class="cert-badge">FSC Certified</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="testimonials" id="testimonials"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Trusted By Industry Leaders</h2> | |
| <p>What our partners say about us</p> | |
| </div> | |
| <div class="testimonial-grid"> | |
| <div class="testimonial-card"> | |
| <p class="testimonial-text">Roboroots' automation cut our waste by 30%. Their custom filters are industry-leading and helped us differentiate our premium product line.</p> | |
| <div class="testimonial-author"> | |
| <div class="author-info"> | |
| <h4>Sarah Johnson</h4> | |
| <p>GreenLeaf Distributors</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card"> | |
| <p class="testimonial-text">The precision and consistency of Roboroots cones have significantly improved our production efficiency. Their TCF paper is a game-changer.</p> | |
| <div class="testimonial-author"> | |
| <div class="author-info"> | |
| <h4>Michael Torres</h4> | |
| <p>Nature's Remedy</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card"> | |
| <p class="testimonial-text">We switched to Roboroots for their sustainability credentials and stayed for the exceptional product quality and reliable bulk delivery.</p> | |
| <div class="testimonial-author"> | |
| <div class="author-info"> | |
| <h4>Jennifer Lee</h4> | |
| <p>PureBotanicals</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="client-logos"> | |
| <div class="client-logo">LeafCraft</div> | |
| <div class="client-logo">NaturePure</div> | |
| <div class="client-logo">GreenHarvest</div> | |
| <div class="client-logo">EcoDistro</div> | |
| <div class="client-logo">PureSource</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="stats"> | |
| <div class="container"> | |
| <div class="stats-grid"> | |
| <div class="stat-item"> | |
| <h3>5,000</h3> | |
| <p>Businesses Served</p> | |
| </div> | |
| <div class="stat-item"> | |
| <h3>98.7</h3> | |
| <p>Quality Acceptance Rate</p> | |
| </div> | |
| <div class="stat-item"> | |
| <h3>30M</h3> | |
| <p>Cones Produced Monthly</p> | |
| </div> | |
| <div class="stat-item"> | |
| <h3>24</h3> | |
| <p>Custom Design Turnaround</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="cta" id="cta"> | |
| <div class="container"> | |
| <div class="cta-box"> | |
| <h2>Ready to Enhance Your Product Line?</h2> | |
| <p>Join thousands of businesses that trust Roboroots for premium, sustainable cones manufactured with industrial precision.</p> | |
| <div class="cta-buttons"> | |
| <a href="#" class="btn btn-primary">Request Quote</a> | |
| <a href="#" class="btn btn-secondary">View Catalog</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-grid"> | |
| <div class="footer-column"> | |
| <h3>RoboRoots</h3> | |
| <p>Industrial automation meets sustainable manufacturing to deliver precision-rolled cones for businesses worldwide.</p> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| <a href="#"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Products</h3> | |
| <ul> | |
| <li><a href="#">Standard Cones</a></li> | |
| <li><a href="#">Custom Cones</a></li> | |
| <li><a href="#">Bulk Solutions</a></li> | |
| <li><a href="#">Eco-Friendly Options</a></li> | |
| <li><a href="#">Accessories</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Company</h3> | |
| <ul> | |
| <li><a href="#">About Us</a></li> | |
| <li><a href="#">Sustainability</a></li> | |
| <li><a href="#">Technology</a></li> | |
| <li><a href="#">Careers</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Contact</h3> | |
| <ul class="contact-info"> | |
| <li><i class="fas fa-map-marker-alt"></i> 123 Industry Blvd, Oakland, CA</li> | |
| <li><i class="fas fa-phone"></i> (555) 123-4567</li> | |
| <li><i class="fas fa-envelope"></i> info@roboroots.com</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2023 RoboRoots. All rights reserved. | Designed with precision for industrial performance.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Header scroll effect | |
| window.addEventListener('scroll', () => { | |
| const header = document.getElementById('header'); | |
| if (window.scrollY > 50) { | |
| header.classList.add('scrolled'); | |
| } else { | |
| header.classList.remove('scrolled'); | |
| } | |
| }); | |
| // Mobile menu toggle | |
| const mobileToggle = document.getElementById('mobileToggle'); | |
| const navMenu = document.getElementById('navMenu'); | |
| mobileToggle.addEventListener('click', () => { | |
| navMenu.classList.toggle('active'); | |
| mobileToggle.innerHTML = navMenu.classList.contains('active') | |
| ? '<i class="fas fa-times"></i>' | |
| : '<i class="fas fa-bars"></i>'; | |
| }); | |
| // Smooth scrolling for anchor links with offset | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| const headerHeight = document.getElementById('header').offsetHeight; | |
| const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight; | |
| window.scrollTo({ | |
| top: targetPosition, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| if (navMenu.classList.contains('active')) { | |
| navMenu.classList.remove('active'); | |
| mobileToggle.innerHTML = '<i class="fas fa-bars"></i>'; | |
| } | |
| } | |
| }); | |
| }); | |
| // Animation on scroll | |
| const observerOptions = { | |
| threshold: 0.1 | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = "1"; | |
| entry.target.style.transform = "translateY(0)"; | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe elements with animations | |
| document.querySelectorAll('.feature-card, .sustainability-card, .testimonial-card, .cta-box').forEach(el => { | |
| observer.observe(el); | |
| }); | |
| // Staggered animation for stats | |
| document.querySelectorAll('.stat-item').forEach((el, index) => { | |
| setTimeout(() => { | |
| el.style.opacity = "1"; | |
| el.style.transform = "scale(1)"; | |
| }, 300 * index); | |
| }); | |
| </script> | |
| </body> | |
| </html> |