Waste Management Platform - Copy this React, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>EcoGenesis - Transform Waste, Empower the Future</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet"> <!-- Custom CSS --> <style> body { font-family: 'Poppins', sans-serif; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('path_to_your_image.jpg') center/cover no-repeat; color: #fff; margin: 0; padding: 0; height: 100vh; } .navbar { background: rgba(28, 116, 48, 0.9) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .navbar-brand { font-weight: bold; color: #fff !important; font-size: 1.5rem; } .hero-section { text-align: center; padding: 180px 20px; color: white; text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5); } .hero-section h1 { font-size: 5rem; font-weight: bold; } .hero-section p { font-size: 1.6rem; margin-bottom: 30px; font-style: italic; } .hero-section .cta-btn { font-size: 1.4rem; padding: 18px 35px; background: #1c7430; color: white; border: none; border-radius: 50px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); transition: background 0.3s ease; } .hero-section .cta-btn:hover { background: #155d24; } .section-content { padding: 50px 20px; background: rgba(0, 0, 0, 0.6); border-radius: 10px; margin-bottom: 30px; } .quote { font-size: 1.5rem; font-style: italic; text-align: center; margin: 50px 0; color: #1c7430; font-weight: bold; } .card-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; } .card { flex: 1 1 calc(45% - 20px); max-width: 300px; background: white; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); overflow: hidden; transition: transform 0.3s ease-in-out; } .card img { width: 100%; height: 200px; object-fit: cover; } .card:hover { transform: scale(1.05); } .card-title { font-size: 1.5rem; color: #1c7430; font-weight: bold; margin-top: 15px; } .card-text { color: #555; margin-bottom: 20px; padding: 0 15px; } .btn-enlarge { padding: 15px 30px; background: #1c7430; color: white; border-radius: 50px; text-transform: uppercase; transition: background 0.3s ease; } .btn-enlarge:hover { background: #155d24; } footer { background: #1c7430; color: white; text-align: center; padding: 20px 0; } footer a { color: #f7f7f7; text-decoration: underline; } </style> </head> <body> <!-- Navbar --> <nav class="navbar navbar-expand-lg navbar-dark"> <div class="container"> <a class="navbar-brand" href="#">EcoGenesis</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"><a class="nav-link" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="About.html">About</a></li> <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li> </ul> </div> </div> </nav> <!-- Hero Section --> <section class="hero-section"> <h1>EcoGenesis</h1> <p>Revolutionizing Waste Management with Technology</p> <a href="#services" class="cta-btn">Join the Movement</a> </section> <!-- Motivational Quote --> <div class="quote"> <p>"Small actions, big impact. Together, we can change the world."</p> </div> <!-- Services Section --> <section id="services" class="section-content"> <div class="container text-center"> <h2 class="display-4">Our Mission: Empowering You to Make a Difference</h2> <p class="lead">We offer simple, impactful solutions for food donation and e-waste recycling for individuals and businesses alike.</p> </div> <div class="card-menu"> <!-- Food Donation Card --> <div class="card"> <img src="images/foodcard.jpg" alt="Food Donation" class="card-img-top"> <div class="card-body"> <h5 class="card-title">Donate Food, Fight Hunger</h5> <p class="card-text">Help those in need by donating surplus food. Our easy-to-use platform connects you with food banks and local communities.</p> <a href="food-dashboard.html" class="btn btn-enlarge">Make a Donation or Receive food</a> </div> </div> <!-- E-Waste Recycling Card --> <div class="card"> <img src="images/E-waste.jpg" alt="E-Waste Recycling"> <div class="card-body"> <h5 class="card-title">Recycle Your E-Waste</h5> <p class="card-text">Dispose of your electronic waste responsibly. Join us in reducing e-waste pollution and supporting sustainable practices.</p> <a href="e-waste.html" class="btn btn-enlarge">Recycle Now</a> </div> </div> </div> </section> <!-- Footer --> <footer> <p>© 2025 EcoGenesis. | <a href="#contact">Contact Us</a></p> </footer> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
