Spaces:
Running
Running
Hi! I need help fixing a few issues on my “Grub & Dump” website (hosted on Netlify): 1. Form Submission Fix: • When someone submits the “Get a Free Quote” form, I want it to: • Send the form data directly to my email: help@grubanddump.com • Stay on the same page and show a clear success message like: “Thanks for your request! We’ll be in touch soon.” • Avoid redirecting, refreshing, or scrolling anywhere else after submission. 2. Mobile Menu Issue: • The hamburger (☰) menu button in the top-right corner isn’t working on mobile view. • Please make sure it toggles the navigation menu properly when tapped. Let me know if I need to connect Netlify Forms, Formspree, or any other external service to handle the form submission. - Follow Up Deployment
a552fce
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Grub & Dump | Sioux Falls Junk Removal</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Raleway:wght@800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🗑️</text></svg>"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#16a34a', | |
| secondary: '#15803d', | |
| accent: '#fcd34d', | |
| }, | |
| fontFamily: { | |
| heading: ['Raleway', 'sans-serif'], | |
| body: ['Roboto', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style type="text/css"> | |
| .service-card { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .area-badge { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.4); } | |
| 70% { box-shadow: 0 0 0 10px rgba(21, 128, 61, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); } | |
| } | |
| .swing { | |
| animation: swing 3s ease-in-out infinite; | |
| transform-origin: top center; | |
| } | |
| @keyframes swing { | |
| 0% { transform: rotate(0deg); } | |
| 25% { transform: rotate(5deg); } | |
| 50% { transform: rotate(-3deg); } | |
| 75% { transform: rotate(2deg); } | |
| 100% { transform: rotate(0deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-body bg-gray-50 text-gray-800"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-md fixed w-full z-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center py-4"> | |
| <div class="flex items-center"> | |
| <h1 class="text-2xl md:text-3xl font-heading"> | |
| <span class="text-primary">Grub</span> & | |
| <span class="text-accent">Dump</span> | |
| </h1> | |
| <span class="ml-2 bg-primary text-white text-xs md:text-sm px-2 py-1 rounded-full">Sioux Falls</span> | |
| </div> | |
| <nav class="hidden md:flex space-x-8" id="desktop-nav"> | |
| <a href="#home" class="font-medium hover:text-primary transition-colors">Home</a> | |
| <a href="#services" class="font-medium hover:text-primary transition-colors">Services</a> | |
| <a href="#areas" class="font-medium hover:text-primary transition-colors">Service Areas</a> | |
| <a href="#about" class="font-medium hover:text-primary transition-colors">About</a> | |
| <a href="#contact" class="font-medium hover:text-primary transition-colors">Contact</a> | |
| </nav> | |
| <div class="flex items-center"> | |
| <a href="tel:605-709-2288" class="bg-primary text-white px-4 py-2 rounded-full font-medium md:block hidden hover:bg-secondary transition-colors"> | |
| <i class="fas fa-phone mr-2"></i>(605) 709-2288 | |
| </a> | |
| <button id="mobile-menu-button" class="md:hidden text-2xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Nav --> | |
| <div id="mobile-nav" class="hidden absolute bg-white w-full shadow-lg md:hidden"> | |
| <div class="flex flex-col py-4"> | |
| <a href="#home" class="py-3 px-8 hover:bg-gray-100">Home</a> | |
| <a href="#services" class="py-3 px-8 hover:bg-gray-100">Services</a> | |
| <a href="#areas" class="py-3 px-8 hover:bg-gray-100">Service Areas</a> | |
| <a href="#about" class="py-3 px-8 hover:bg-gray-100">About</a> | |
| <a href="#contact" class="py-3 px-8 hover:bg-gray-100">Contact</a> | |
| <a href="tel:605-709-2288" class="py-3 px-8 text-primary font-medium"> | |
| <i class="fas fa-phone mr-2"></i>(605) 709-2288 | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="pt-24 pb-16 md:pt-40 md:pb-24 bg-gradient-to-r from-green-100 to-amber-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <div class="bg-green-600 text-white px-4 py-2 rounded-full text-xs md:text-sm inline-flex items-center mb-4"> | |
| <span class="h-2 w-2 bg-white rounded-full mr-2"></span> | |
| Sioux Falls & Surrounding Areas | |
| </div> | |
| <h1 class="text-4xl md:text-6xl font-heading mb-6"> | |
| Professional <br> | |
| <span class="text-primary">Junk Removal</span> <br> | |
| Done Right | |
| </h1> | |
| <p class="text-lg md:text-xl text-gray-600 mb-8"> | |
| Fast, friendly, and eco-friendly junk removal services. We haul it away so you don't have to! | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <a href="#contact" class="bg-primary text-white text-center px-8 py-4 rounded-full text-lg font-medium hover:bg-secondary transition-colors"> | |
| Schedule a Pickup <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| <a href="tel:605-709-2288" class="text-center border-2 border-gray-800 px-8 py-4 rounded-full text-lg font-medium hover:bg-gray-800 hover:text-white transition-colors"> | |
| <i class="fas fa-phone mr-2"></i>(605) 709-2288 | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center relative"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-96 flex items-center justify-center swing"> | |
| <img src="https://www.progreen-services.com/cdn/shop/files/junk-removal-near-me-jacksonville-progreen-services_800x.jpg?v=1719673017 alt="Junk Removal Truck" class="w-full h-full object-contain"> | |
| </div> | |
| <div class="absolute -top-4 -left-4 w-32 h-32 rounded-full bg-accent flex items-center justify-center"> | |
| <div class="text-center"> | |
| <span class="block text-4xl font-bold text-gray-900">99%</span> | |
| <span class="block text-sm uppercase">Recycled</span> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-6 -right-4 bg-white shadow-lg rounded-lg p-4 flex flex-col items-center"> | |
| <div class="text-gray-700 mb-2">Sioux Falls' Top Rated</div> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">4.9/5 Across 150+ Reviews</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center max-w-3xl mx-auto mb-16"> | |
| <div class="text-primary uppercase text-sm font-medium mb-4">What We Offer</div> | |
| <h2 class="text-4xl md:text-5xl font-heading mb-6">Our Junk Removal Services</h2> | |
| <p class="text-xl text-gray-600"> | |
| From single-item pickups to full property cleanouts, we handle all types of junk removal | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="service-card bg-gray-50 rounded-xl overflow-hidden shadow-md border border-gray-100"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="mr-3 text-2xl text-primary"> | |
| <i class="fas fa-home"></i> | |
| </div> | |
| <span class="bg-accent text-gray-900 px-3 py-1 rounded-full font-medium"> | |
| Residential | |
| </span> | |
| </div> | |
| <div class="text-2xl font-heading mb-3">Residential Cleanout</div> | |
| <p class="text-gray-600 mb-4"> | |
| We remove unwanted items from homes, apartments, and garages. Perfect for spring cleaning, moving, or downsizing. | |
| </p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| Furniture removal | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| Appliance disposal | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| Yard waste removal | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| E-waste recycling | |
| </li> | |
| </ul> | |
| <a href="#contact" class="inline-block bg-primary text-white px-6 py-3 rounded-full hover:bg-secondary transition-colors"> | |
| Book Now | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card bg-gray-50 rounded-xl overflow-hidden shadow-md border border-gray-100"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="mr-3 text-2xl text-primary"> | |
| <i class="fas fa-building"></i> | |
| </div> | |
| <span class="bg-primary text-white px-3 py-1 rounded-full font-medium"> | |
| Commercial | |
| </span> | |
| </div> | |
| <div class="text-2xl font-heading mb-3">Business Cleanout</div> | |
| <p class="text-gray-600 mb-4"> | |
| Serving local businesses with efficient office cleanouts, construction debris removal, and business waste disposal. | |
| </p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| Office furniture removal | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| Remodeling debris | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| Retail store cleanouts | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| Construction site cleanup | |
| </li> | |
| </ul> | |
| <a href="#contact" class="inline-block bg-primary text-white px-6 py-3 rounded-full hover:bg-secondary transition-colors"> | |
| Book Now | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="service-card bg-gray-50 rounded-xl overflow-hidden shadow-md border border-gray-100"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="mr-3 text-2xl text-primary"> | |
| <i class="fas fa-truck"></i> | |
| </div> | |
| <span class="bg-green-600 text-white px-3 py-1 rounded-full font-medium"> | |
| Specialized | |
| </span> | |
| </div> | |
| <div class="text-2xl font-heading mb-3">Specialty Removal</div> | |
| <p class="text-gray-600 mb-4"> | |
| Need something extra gone? We handle specialty items that other junk removal services turn away. | |
| </p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| Hot tub removal | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| Pool table disposal | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| Piano removal | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| Safe & equipment moving | |
| </li> | |
| </ul> | |
| <a href="#contact" class="inline-block bg-primary text-white px-6 py-3 rounded-full hover:bg-secondary transition-colors"> | |
| Book Now | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Service Area --> | |
| <section id="areas" class="py-16 bg-gradient-to-br from-green-700 to-green-900 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center max-w-3xl mx-auto mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-heading mb-6">Serving Sioux Falls & Beyond</h2> | |
| <p class="text-xl opacity-90"> | |
| We proudly serve all of Sioux Falls and the surrounding communities | |
| </p> | |
| </div> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <div class="bg-green-800 rounded-xl p-8 shadow-xl"> | |
| <div class="flex items-center mb-6"> | |
| <div class="mr-3 text-3xl"> | |
| <i class="fas fa-map-marker-alt text-accent"></i> | |
| </div> | |
| <h3 class="text-2xl font-heading">Our Coverage Area</h3> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-green-700 rounded-lg p-4"> | |
| <h4 class="font-bold mb-2">Sioux Falls Metro</h4> | |
| <ul class="space-y-1"> | |
| <li>Downtown</li> | |
| <li>East Side</li> | |
| <li>West Side</li> | |
| <li>North Sioux Falls</li> | |
| <li>Southeastern</li> | |
| </ul> | |
| </div> | |
| <div class="bg-green-700 rounded-lg p-4"> | |
| <h4 class="font-bold mb-2">Surrounding Areas</h4> | |
| <ul class="space-y-1"> | |
| <li>Brandon</li> | |
| <li>Harrisburg</li> | |
| <li>Tea</li> | |
| <li>Lennox</li> | |
| <li>Baltic</li> | |
| <li>Crooks</li> | |
| </ul> | |
| </div> | |
| <div class="bg-green-700 rounded-lg p-4 col-span-2"> | |
| <h4 class="font-bold mb-2">Extended Service Zone</h4> | |
| <p>Contact us for service in areas like Worthing, Hartford, Canton, Beresford, Dell Rapids and other communities within 50 miles of Sioux Falls.</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex"> | |
| <div class="area-badge flex items-center px-4 py-2 bg-accent text-gray-900 rounded-lg"> | |
| <i class="fas fa-info-circle mr-2"></i> | |
| Travel fees may apply for extended area service | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-full flex items-center justify-center"> | |
| <div class="text-center p-8"> | |
| <i class="fas fa-map-marked-alt text-4xl text-gray-500 mb-4"></i> | |
| <h4 class="text-xl font-bold mb-2">Sioux Falls Service Area</h4> | |
| <p class="text-gray-600">We serve all of Sioux Falls and surrounding communities</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center max-w-3xl mx-auto mb-16"> | |
| <div class="text-primary uppercase text-sm font-medium mb-4">SIMPLE PROCESS</div> | |
| <h2 class="text-4xl md:text-5xl font-heading mb-6">How Grub & Dump Works</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 mx-auto rounded-full bg-white border-4 border-primary flex items-center justify-center text-3xl text-primary mb-6"> | |
| 1 | |
| </div> | |
| <h3 class="text-xl font-heading mb-3">Book Online or Call</h3> | |
| <p class="text-gray-600"> | |
| Schedule an appointment via our website or call us at (605)-709-2288 | |
| </p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 mx-auto rounded-full bg-white border-4 border-primary flex items-center justify-center text-3xl text-primary mb-6"> | |
| 2 | |
| </div> | |
| <h3 class="text-xl font-heading mb-3">Get a Quote</h3> | |
| <p class="text-gray-600"> | |
| Our team visits to assess your items and give an upfront price | |
| </p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 mx-auto rounded-full bg-white border-4 border-primary flex items-center justify-center text-3xl text-primary mb-6"> | |
| 3 | |
| </div> | |
| <h3 class="text-xl font-heading mb-3">We Haul Away</h3> | |
| <p class="text-gray-600"> | |
| We remove all your junk quickly and efficiently | |
| </p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 mx-auto rounded-full bg-white border-4 border-primary flex items-center justify-center text-3xl text-primary mb-6"> | |
| 4 | |
| </div> | |
| <h3 class="text-xl font-heading mb-3">Proper Disposal</h3> | |
| <p class="text-gray-600"> | |
| We sort, recycle, and donate everything possible | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-20 text-center"> | |
| <div class="text-4xl text-accent mb-6"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <h3 class="text-3xl font-heading mb-4">Our Eco-Friendly Promise</h3> | |
| <p class="max-w-3xl mx-auto text-xl text-gray-600"> | |
| We're committed to environmentally responsible junk removal. Over 75% of the items we collect are recycled, donated, or repurposed. | |
| </p> | |
| <div class="mt-8 flex justify-center space-x-4"> | |
| <div class="bg-white rounded-lg shadow-md px-6 py-4 flex items-center"> | |
| <i class="fas fa-recycle text-green-600 text-2xl mr-3"></i> | |
| <span>Recycling Program</span> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md px-6 py-4 flex items-center"> | |
| <i class="fas fa-hand-holding-heart text-red-500 text-2xl mr-3"></i> | |
| <span>Donation Partners</span> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md px-6 py-4 flex items-center"> | |
| <i class="fas fa-leaf text-green-500 text-2xl mr-3"></i> | |
| <span>Landfill Minimization</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-2/5 mb-10 md:mb-0"> | |
| <img src=https://lirp.cdn-website.com/03d88c34/dms3rep/multi/opt/Trash-removal-indianapolis-640w.jpg rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Grub & Dump team working" class="w-full h-full object-cover rounded-xl"> | |
| </div> | |
| <div class="md:w-3/5 md:pl-16"> | |
| <div class="text-primary uppercase text-sm font-medium mb-4">OUR STORY</div> | |
| <h2 class="text-4xl font-heading mb-6"> | |
| Why Choose <span class="text-primary">Grub & Dump</span> | |
| </h2> | |
| <p class="text-lg text-gray-600 mb-8"> | |
| Founded in 2025, Grub & Dump started as a single truck & trailer operation in Sioux Falls. What began as a small dream has yet to grow into the area's most trusted junk removal service. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="mr-4 text-2xl text-primary"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">Family Owned & Operated</h3> | |
| <p class="text-gray-600"> | |
| As a locally-owned business, we understand the needs of our community and take pride in serving our neighbors. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="mr-4 text-2xl text-primary"> | |
| <i class="fas fa-medal"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">Licensed & Insured</h3> | |
| <p class="text-gray-600"> | |
| All our services come with full insurance coverage and proper licensing for your peace of mind. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="mr-4 text-2xl text-primary"> | |
| <i class="fas fa-dollar-sign"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">No Hidden Fees</h3> | |
| <p class="text-gray-600"> | |
| We provide transparent, upfront pricing with no surprises. What you see is what you pay. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10"> | |
| <a href="#contact" class="inline-block bg-primary text-white px-8 py-4 rounded-full text-lg font-medium hover:bg-secondary transition-colors"> | |
| Get Started Today | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center max-w-3xl mx-auto mb-16"> | |
| <div class="text-primary uppercase text-sm font-medium mb-4">GET IN TOUCH</div> | |
| <h2 class="text-4xl md:text-5xl font-heading mb-6">Contact Us</h2> | |
| <p class="text-xl text-gray-600"> | |
| Ready to remove your junk? Get a fast and free quote today! | |
| </p> | |
| </div> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/3 mb-10 md:mb-0"> | |
| <div class="bg-white rounded-2xl shadow-md p-8"> | |
| <h3 class="text-2xl font-heading mb-6">Contact Information</h3> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="mr-4 text-2xl text-primary"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Service Area</h4> | |
| <p>Sioux Falls, SD and surrounding areas</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="mr-4 text-2xl text-primary"> | |
| <i class="fas fa-phone"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Phone</h4> | |
| <p>(605) 709-2288</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="mr-4 text-2xl text-primary"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Email</h4> | |
| <p>help@grubanddump.com</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="mr-4 text-2xl text-primary"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Hours</h4> | |
| <p>Monday - Saturday: 8am - 6pm</p> | |
| <p>Sunday: Closed</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10"> | |
| <h4 class="font-bold mb-4">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center hover:bg-secondary"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 md:pl-10"> | |
| <div class="bg-white rounded-2xl shadow-md p-8"> | |
| <h3 class="text-2xl font-heading mb-6">Get a Free Quote</h3> | |
| <form name="contact" method="POST" data-netlify="true" class="space-y-6" netlify-honeypot="bot-field"> | |
| <div class="hidden"> | |
| <label>Don't fill this out if you're human: <input name="bot-field" /></label> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block mb-2 font-medium" for="name">Your Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:outline-none"> | |
| </div> | |
| <div> | |
| <label class="block mb-2 font-medium" for="phone">Phone Number</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:outline-none"> | |
| </div> | |
| <div> | |
| <label class="block mb-2 font-medium" for="email">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:outline-none"> | |
| </div> | |
| <div> | |
| <label class="block mb-2 font-medium" for="location">Zip Code</label> | |
| <input type="text" id="location" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:outline-none"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block mb-2 font-medium" for="service">Service Needed</label> | |
| <select id="service" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:outline-none"> | |
| <option>Residential Removal</option> | |
| <option>Commercial Removal</option> | |
| <option>Yard Waste Removal</option> | |
| <option>Construction Debris</option> | |
| <option>E-Waste Disposal</option> | |
| <option>Appliance Removal</option> | |
| <option>Specialty Item Removal</option> | |
| <option>I'm not sure</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block mb-2 font-medium" for="details">Tell Us About Your Junk</label> | |
| <textarea id="details" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:outline-none"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-primary text-white py-4 rounded-lg text-lg font-medium hover:bg-secondary transition-colors"> | |
| Get My Free Quote | |
| </button> | |
| <div id="form-success" class="hidden bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert"> | |
| <strong class="font-bold">Thanks for your request!</strong> | |
| <span class="block sm:inline">We'll be in touch soon.</span> | |
| </div> | |
| </form> | |
| <script> | |
| document.querySelector('form[name="contact"]').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const form = this; | |
| fetch('/', { | |
| method: 'POST', | |
| body: new FormData(form), | |
| }) | |
| .then(() => { | |
| form.reset(); | |
| document.getElementById('form-success').classList.remove('hidden'); | |
| setTimeout(() => { | |
| document.getElementById('form-success').classList.add('hidden'); | |
| }, 5000); | |
| }) | |
| .catch(error => alert('Error submitting form')); | |
| }); | |
| </script> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row justify-between"> | |
| <div class="mb-10 lg:mb-0 lg:w-1/3"> | |
| <h3 class="text-2xl font-heading mb-6"> | |
| <span class="text-primary">Grub</span> & | |
| <span class="text-accent">Dump</span> | |
| </h3> | |
| <p class="text-gray-400 mb-6"> | |
| Sioux Falls' most trusted junk removal service. Fast, efficient, and eco-friendly. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 text-white flex items-center justify-center hover:bg-primary"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mb-10 lg:mb-0"> | |
| <h4 class="text-lg font-bold mb-6">Services</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Residential Junk Removal</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Commercial Cleanout</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Appliance Removal</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Yard Waste Removal</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Furniture Disposal</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Construction Debris</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-6">Contact Us</h4> | |
| <ul class="space-y-3"> | |
| <li class="text-gray-400"><i class="fas fa-phone text-green-500 mr-3"></i>(605) 709-2288</li> | |
| <li class="text-gray-400"><i class="fas fa-envelope text-green-500 mr-3"></i>help@grubanddump.com</li> | |
| <li class="text-gray-400"><i class="fas fa-map-marker-alt text-green-500 mr-3"></i>Serving Sioux Falls, SD</li> | |
| <li class="mt-5 flex"> | |
| <a href="#contact" class="px-6 py-2 bg-primary rounded-full text-sm font-medium hover:bg-secondary"> | |
| Get Free Estimate | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm">© 2025 | |
| Grub & Dump Junk Removal. All rights reserved.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="text-gray-500 hover:text-white text-sm">Privacy Policy</a> | |
| <a href="#" class="text-gray-500 hover:text-white text-sm">Terms of Service</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Mobile Menu Script --> | |
| <script> | |
| const mobileMenuButton = document.getElementById('mobile-menu-button') | |
| const mobileNav = document.getElementById('mobile-nav') | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileNav.classList.toggle('hidden') | |
| }) | |
| // Close mobile nav when clicking a link | |
| const mobileLinks = document.querySelectorAll('#mobile-nav a') | |
| mobileLinks.forEach(link => { | |
| link.addEventListener('click', () => { | |
| mobileNav.classList.add('hidden') | |
| }) | |
| }) | |
| // Smooth scrolling for links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |