Create a fully responsive React-based agriculture website without TypeScript. The website should have beautiful animations, visual storytelling, and agriculture-themed images and backgrounds. The UI should be modern, clean, and intuitive. The website should include the following pages:
Home: A visually appealing homepage with a hero section, animated background, and an introduction to the smart farming system.
Login: A login page using Firebase Authentication (Gmail login) with an attractive animated background.
Irrigation: Displays real-time sensor data (moisture, temperature, humidity, motor ON/OFF status) fetched from ThingSpeak API.
Fertilizer: Displays nitrogen, potassium, phosphorus levels and fertilizer recommendations based on sensor data.
Contact Us: A form for farmers to contact the support team.
About Us: Information about the project and its goals.
Key Features:
React-based frontend (NO TypeScript).
Firebase Firestore for data storage.
Firebase Authentication for login.
ThingSpeak API integration for real-time sensor data.
Animations using Framer Motion and GSAP for smooth UI transitions.
Tailwind CSS for styling.
Free hosting on Netlify.
Dark mode support for better usability.
Agriculture-themed icons, backgrounds, and animations.
Ensure the website is lightweight, fast, and mobile-friendly with proper error handling and validation. Use React Router for navigation.
Create a fully responsive React-based agriculture website without TypeScript. The website should have beautiful animations, visual storytelling, and agriculture-themed images and backgrounds. The UI should be modern, clean, and intuitive. The website should include the following pages:
Home: A visually appealing homepage with a hero section, animated background, and an introduction to the smart farming system.
Login: A login page using Firebase Authentication (Gmail login) with an attractive animated background.
Irrigation: Displays real-time sensor data (moisture, temperature, humidity, motor ON/OFF status) fetched from ThingSpeak API.
Fertilizer: Displays nitrogen, potassium, phosphorus levels and fertilizer recommendations based on sensor data.
Contact Us: A form for farmers to contact the support team.
About Us: Information about the project and its goals.
Key Features:
React-based frontend (NO TypeScript).
Firebase Firestore for data storage.
Firebase Authentication for login.
ThingSpeak API integration for real-time sensor data.
Animations using Framer Motion and GSAP for smooth UI transitions.
Tailwind CSS for styling.
Free hosting on Netlify.
Dark mode support for better usability.
Agriculture-themed icons, backgrounds, and animations.
Ensure the website is lightweight, fast, and mobile-friendly with proper error handling and validation. Use React Router for navigation.
give the above in html css and js
Create a fully responsive agriculture-themed website using only HTML, CSS, and JavaScript (No React, No TypeScript). The website should have beautiful animations, agriculture-themed backgrounds, and an intuitive user experience. The design should be modern, visually engaging, and optimized for performance.
Website Pages:
Home: A visually attractive landing page with an animated hero section showcasing smart farming.
Login: A login form with smooth animations and validation.
Irrigation: Displays real-time sensor data (moisture, temperature, humidity, motor ON/OFF status) fetched from ThingSpeak API.
Fertilizer: Displays nitrogen, potassium, phosphorus levels and provides fertilizer recommendations.
Contact Us: A form for farmers to reach out for support.
About Us: Information about the project and its objectives.
Key Features:
Pure HTML, CSS, and JavaScript (no frameworks).
CSS animations using keyframes and GSAP for smooth effects.
Agriculture-themed images, backgrounds, and icons.
AJAX fetch requests to display real-time sensor data from ThingSpeak API.
Modern, mobile-friendly design (CSS Flexbox/Grid for layout).
Dark mode support.
Form validation for login and contact page.
Hosting on GitHub Pages or Netlify for free deployment.
The website should be lightweight, fast, and optimized for all screen sizes. Use JavaScript to handle dynamic content and interactivity (e.g., fetching sensor data, form validation, toggling dark mode).
I'll create a complete agriculture-themed website using pure HTML, CSS, and JavaScript. Below is the implementation for each page with all the requested features.
index.html (Home)
login.html
irrigation.html
fertilizer.html
contact.html
about.html
css/
- styles.css
- animations.css
js/
- main.js
- thingspeak.js
- darkmode.js
- validation.js
images/
- hero-bg.jpg
- login-bg.jpg
- about-bg.jpg
- ...<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AgriSmart - Smart Farming Solutions</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
</head>
<body>
<!-- Header -->
<header>
<div class="container">
<div class="logo">
<i class="fas fa-leaf"></i>
<h1>AgriSmart</h1>
</div>
<nav>
<ul class="nav-links">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="irrigation.html">Irrigation</a></li>
<li><a href="fertilizer.html">Fertilizer</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="login-btn">
<a href="login.html">Login</a>
</div>
<div class="theme-toggle">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<h1 class="animate-text">Smart Farming for a Sustainable Future</h1>
<p class="animate-text-delay">Precision agriculture solutions that optimize resources, increase yields, and promote environmental sustainability.</p>
<div class="hero-buttons animate-text-delay-2">
<a href="login.html" class="btn btn-primary">Get Started</a>
<a href="about.html" class="btn btn-secondary">Learn More</a>
</div>
</div>
<div class="hero-image">
<img src="images/hero-illustration.png" alt="Smart Farming Illustration">
</div>
<div class="hero-wave">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#ffffff" fill-opacity="1" d="M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,224C672,245,768,267,864,250.7C960,235,1056,181,1152,165.3C1248,149,1344,171,1392,181.3L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
</div>
</section>
<!-- Features Section -->
<section class="features">
<div class="container">
<div class="section-header">
<h2>Smart Solutions for Modern Agriculture</h2>
<p>Our platform provides comprehensive tools to monitor and optimize your farming operations.</p>
</div>
<div class="feature-cards">
<div class="feature-card" data-aos="fade-up">
<div class="feature-icon">
<i class="fas fa-tint"></i>
</div>
<h3>Smart Irrigation</h3>
<p>Real-time monitoring of soil moisture levels to optimize water usage and prevent over-irrigation.</p>
<a href="irrigation.html" class="feature-link">Learn more <i class="fas fa-arrow-right"></i></a>
</div>
<div class="feature-card" data-aos="fade-up" data-aos-delay="200">
<div class="feature-icon">
<i class="fas fa-seedling"></i>
</div>
<h3>Fertilizer Optimization</h3>
<p>Personalized fertilizer recommendations based on soil composition and crop requirements.</p>
<a href="fertilizer.html" class="feature-link">Learn more <i class="fas fa-arrow-right"></i></a>
</div>
<div class="feature-card" data-aos="fade-up" data-aos-delay="400">
<div class="feature-icon">
<i class="fas fa-temperature-high"></i>
</div>
<h3>Climate Monitoring</h3>
<p>Track temperature, humidity, and other environmental factors to protect your crops.</p>
<a href="#" class="feature-link">Learn more <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</section>
<!-- How It Works Section -->
<section class="how-it-works">
<div class="container">
<div class="section-header">
<h2>How AgriSmart Works</h2>
<p>A simple process to revolutionize your farming practices</p>
</div>
<div class="steps">
<div class="step">
<div class="step-number">1</div>
<div class="step-content">
<h3>Install Sensors</h3>
<p>Place our smart sensors throughout your farm to collect real-time data.</p>
</div>
</div>
<div class="step">
<div class="step-number">2</div>
<div class="step-content">
<h3>Connect to Platform</h3>
<p>Link your sensors to our cloud platform for continuous monitoring.</p>
</div>
</div>
<div class="step">
<div class="step-number">3</div>
<div class="step-content">
<h3>Analyze Data</h3>
<p>Our AI analyzes your farm's data to provide actionable insights.</p>
</div>
</div>
<div class="step">
<div class="step-number">4</div>
<div class="step-content">
<h3>Optimize Operations</h3>
<p>Implement recommendations to improve yields and reduce resource usage.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="testimonials">
<div class="container">
<div class="section-header">
<h2>What Farmers Say</h2>
<p>Success stories from farmers using our smart farming solutions</p>
</div>
<div class="testimonial-slider">
<div class="testimonial-slide active">
<div class="testimonial-content">
<p>"Since implementing AgriSmart, we've reduced our water usage by 30% while increasing crop yields by 25%. The ROI has been incredible."</p>
<div class="testimonial-author">
<img src="images/farmer1.jpg" alt="Farmer">
<div>
<h4>John Davis</h4>
<span>Wheat Farmer, Kansas</span>
</div>
</div>
</div>
</div>
<div class="testimonial-slide">
<div class="testimonial-content">
<p>"The fertilizer recommendations have been spot on. We're using less fertilizer and seeing healthier crops. Our soil health has improved dramatically."</p>
<div class="testimonial-author">
<img src="images/farmer2.jpg" alt="Farmer">
<div>
<h4>Maria Rodriguez</h4>
<span>Vegetable Farmer, California</span>
</div>
</div>
</div>
</div>
<div class="testimonial-slide">
<div class="testimonial-content">
<p>"The real-time alerts have saved our crops multiple times. We were notified of a potential frost before it happened and took preventive measures."</p>
<div class="testimonial-author">
<img src="images/farmer3.jpg" alt="Farmer">
<div>
<h4>Robert Johnson</h4>
<span>Fruit Orchard Owner, Washington</span>
</div>
</div>
</div>
</div>
<div class="testimonial-controls">
<button class="prev-btn"><i class="fas fa-chevron-left"></i></button>
<div class="testimonial-dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<button class="next-btn"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta">
<div class="container">
<h2>Ready to Transform Your Farming?</h2>
<p>Join thousands of farmers who are already using our platform to increase yields and reduce costs.</p>
<a href="login.html" class="btn btn-primary">Get Started for Free</a>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-logo">
<i class="fas fa-leaf"></i>
<h2>AgriSmart</h2>
<p>Empowering farmers with precision agriculture solutions for a sustainable future.</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-youtube"></i></a>
</div>
</div>
<div class="footer-links">
<div class="footer-link-group">
<h3>Quick Links</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="irrigation.html">Irrigation System</a></li>
<li><a href="fertilizer.html">Fertilizer Recommendations</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="footer-link-group">
<h3>Our Services</h3>
<ul>
<li><a href="irrigation.html">Smart Irrigation</a></li>
<li><a href="fertilizer.html">Fertilizer Optimization</a></li>
<li><a href="#">Crop Monitoring</a></li>
<li><a href="#">Weather Forecasting</a></li>
<li><a href="#">Yield Prediction</a></li>
</ul>
</div>
<div class="footer-link-group">
<h3>Contact Us</h3>
<ul class="contact-info">
<li><i class="fas fa-map-marker-alt"></i> 123 Agriculture Road, Farmville, CA 94123, USA</li>
<li><i class="fas fa-phone"></i> +1 (555) 123-4567</li>
<li><i class="fas fa-envelope"></i> info@agrismart.com</li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 AgriSmart. All rights reserved.</p>
<div class="footer-bottom-links">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Cookie Policy</a>
</div>
</div>
</div>
</footer>
<script src="js/main.js"></script>
<script src="js/darkmode.js"></script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - AgriSmart</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
</head>
<body class="login-page">
<!-- Header -->
<header>
<div class="container">
<div class="logo">
<i class="fas fa-leaf"></i>
<h1>AgriSmart</h1>
</div>
<nav>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="irrigation.html">Irrigation</a></li>
<li><a href="fertilizer.html">Fertilizer</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="login-btn">
<a href="login.html" class="active">Login</a>
</div>
<div class="theme-toggle">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</div>
</header>
<!-- Login Section -->
<section class="login-section">
<div class="login-container">
<div class="login-form-container">
<div class="login-header">
<div class="login-logo">
<i class="fas fa-leaf"></i>
</div>
<h2>Welcome Back</h2>
<p>Sign in to access your account</p>
</div>
<form id="loginForm" class="login-form">
<div class="form-group">
<label for="email">Email</label>
<div class="input-with-icon">
<i class="fas fa-envelope"></i>
<input type="email" id="email" placeholder="you@example.com" required>
</div>
<span class="error-message" id="emailError"></span>
</div>
<div class="form-group">
<div class="password-header">
<label for="password">Password</label>
<a href="#" class="forgot-password">Forgot password?</a>
</div>
<div class="input-with-icon">
<i class="fas fa-lock"></i>
<input type="password" id="password" placeholder="••••••••" required>
<button type="button" class="toggle-password">
<i class="fas fa-eye"></i>
</button>
</div>
<span class="error-message" id="passwordError"></span>
</div>
<div class="form-group remember-me">
<label class="checkbox-container">
<input type="checkbox" id="rememberMe">
<span class="checkmark"></span>
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary btn-block">Sign In</button>
<div class="login-divider">
<span>or</span>
</div>
<button type="button" class="btn btn-google">
<img src="images/google-icon.svg" alt="Google">
Sign in with Google
</button>
<div class="signup-link">
Don't have an account? <a href="#">Sign up</a>
</div>
</form>
</div>
<div class="login-image">
<div class="login-image-content">
<h2>Precision Agriculture</h2>
<p>Optimize your farming operations with real-time data and smart recommendations. Join thousands of farmers who are already transforming their agricultural practices.</p>
</div>
</div>
</div>
</section>
<script src="js/main.js"></script>
<script src="js/validation.js"></script>
<script src="js/darkmode.js"></script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Irrigation Monitoring - AgriSmart</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<!-- Header -->
<header>
<div class="container">
<div class="logo">
<i class="fas fa-leaf"></i>
<h1>AgriSmart</h1>
</div>
<nav>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="irrigation.html" class="active">Irrigation</a></li>
<li><a href="fertilizer.html">Fertilizer</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="login-btn">
<a href="login.html">Login</a>
</div>
<div class="theme-toggle">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</div>
</header>
<!-- Irrigation Dashboard -->
<section class="dashboard-section">
<div class="container">
<div class="dashboard-header">
<div>
<h1>Irrigation Monitoring</h1>
<p>Real-time data from your field sensors</p>
</div>
<button id="refreshData" class="btn btn-primary">
<i class="fas fa-sync-alt"></i>
<span>Refresh Data</span>
</button>
</div>
<!-- Current Readings -->
<div class="sensor-cards">
<div class="sensor-card">
<div class="sensor-card-header">
<div class="sensor-icon">
<i class="fas fa-tint"></i>
</div>
<div>
<h3>Soil Moisture</h3>
<p>Current soil water content</p>
</div>
</div>
<div class="sensor-card-body">
<div class="sensor-reading">
<span id="moistureValue">65</span>%
<span class="sensor-status optimal">Optimal</span>
</div>
<div class="progress-bar">
<div class="progress-fill moisture" style="width: 65%"></div>
</div>
</div>
</div>
<div class="sensor-card">
<div class="sensor-card-header">
<div class="sensor-icon temperature">
<i class="fas fa-temperature-high"></i>
</div>
<div>
<h3>Temperature</h3>
<p>Ambient temperature</p>
</div>
</div>
<div class="sensor-card-body">
<div class="sensor-reading">
<span id="temperatureValue">24</span>°C
<span class="sensor-status moderate">Moderate</span>
</div>
<div class="progress-bar">
<div class="progress-fill temperature" style="width: 60%"></div>
</div>
</div>
</div>
<div class="sensor-card">
<div class="sensor-card-header">
<div class="sensor-icon humidity">
<i class="fas fa-wind"></i>
</div>
<div>
<h3>Humidity</h3>
<p>Air humidity level</p>
</div>
</div>
<div class="sensor-card-body">
<div class="sensor-reading">
<span id="humidityValue">72</span>%
<span class="sensor-status high">High</span>
</div>
<div class="progress-bar">
<div class="progress-fill humidity" style="width: 72%"></div>
</div>
</div>
</div>
<div class="sensor-card">
<div class="sensor-card-header">
<div class="sensor-icon motor">
<i class="fas fa-power-off"></i>
</div>
<div>
<h3>Motor Status</h3>
<p>Irrigation pump status</p>
</div>
</div>
<div class="sensor-card-body">
<div class="motor-status">
<div class="status-indicator off" id="motorStatus">
<span class="status-text">OFF</span>
</div>
<button class="btn btn-primary motor-toggle" id="motorToggle">
Turn On
</button>
</div>
</div>
</div>
</div>
<!-- Historical Data Chart -->
<div class="chart-container">
<div class="chart-header">
<h2>Historical Data</h2>
<p>Sensor readings over the last 24 hours</p>
<div class="chart-tabs">
<button class="chart-tab active" data-chart="line">Line Chart</button>
<button class="chart-tab" data-chart="bar">Bar Chart</button>
</div>
</div>
<div class="chart-body">
<canvas id="sensorChart"></canvas>
</div>
</div>
<!-- Irrigation Recommendations -->
<div class="recommendations-container">
<div class="recommendations-header">
<h2>Irrigation Recommendations</h2>
<p>Smart suggestions based on current conditions</p>
</div>
<div class="recommendations-body">
<div class="recommendation-alert optimal">
<h3 id="recommendationTitle">Optimal Moisture Level</h3>
<p id="recommendationText">Soil moisture is at an optimal level. Maintain current irrigation schedule.</p>
<div class="recommendation-details">
<div class="recommendation-detail">
<h4>Next Irrigation</h4>
<p id="nextIrrigation">In 2 days</p>
</div>
<div class="recommendation-detail">
<h4>Recommended Duration</h4>
<p id="recommendedDuration">30 minutes</p>
</div>
<div class="recommendation-detail">
<h4>Water Savings</h4>
<p id="waterSavings" class="savings">25%</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-logo">
<i class="fas fa-leaf"></i>
<h2>AgriSmart</h2>
<p>Empowering farmers with precision agriculture solutions for a sustainable future.</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-youtube"></i></a>
</div>
</div>
<div class="footer-links">
<div class="footer-link-group">
<h3>Quick Links</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="irrigation.html">Irrigation System</a></li>
<li><a href="fertilizer.html">Fertilizer Recommendations</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="footer-link-group">
<h3>Our Services</h3>
<ul>
<li><a href="irrigation.html">Smart Irrigation</a></li>
<li><a href="fertilizer.html">Fertilizer Optimization</a></li>
<li><a href="#">Crop Monitoring</a></li>
<li><a href="#">Weather Forecasting</a></li>
<li><a href="#">Yield Prediction</a></li>
</ul>
</div>
<div class="footer-link-group">
<h3>Contact Us</h3>
<ul class="contact-info">
<li><i class="fas fa-map-marker-alt"></i> 123 Agriculture Road, Farmville, CA 94123, USA</li>
<li><i class="fas fa-phone"></i> +1 (555) 123-4567</li>
<li><i class="fas fa-envelope"></i> info@agrismart.com</li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 AgriSmart. All rights reserved.</p>
<div class="footer-bottom-links">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Cookie Policy</a>
</div>
</div>
</div>
</footer>
<script src="js/main.js"></script>
<script src="js/thingspeak.js"></script>
<script src="js/darkmode.js"></script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fertilizer Recommendations - AgriSmart</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<!-- Header -->
<header>
<div class="container">
<div class="logo">
<i class="fas fa-leaf"></i>
<h1>AgriSmart</h1>
</div>
<nav>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="irrigation.html">Irrigation</a></li>
<li><a href="fertilizer.html" class="active">Fertilizer</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="login-btn">
<a href="login.html">Login</a>
</div>
<div class="theme-toggle">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</div>
</header>
<!-- Fertilizer Dashboard -->
<section class="dashboard-section">
<div class="container">
<div class="dashboard-header">
<div>
<h1>Fertilizer Recommendation</h1>
<p>Get personalized fertilizer recommendations based on your soil composition</p>
</div>
</div>
<div class="fertilizer-grid">
<!-- Input Form -->
<div class="fertilizer-form-container">
<div class="card">
<div class="card-header">
<h2>Soil Composition</h2>
<p>Enter your soil NPK levels and crop information</p>
</div>
<div class="card-body">
<form id="fertilizerForm">
<div class="form-group">
<label for="nitrogen">Nitrogen (N) Level: <span id="nitrogenValue">50</span>%</label>
<input type="range" id="nitrogen" min="0" max="100" value="50" class="slider">
</div>
<div class="form-group">
<label for="phosphorus">Phosphorus (P) Level: <span id="phosphorusValue">30</span>%</label>
<input type="range" id="phosphorus" min="0" max="100" value="30" class="slider">
</div>
<div class="form-group">
<label for="potassium">Potassium (K) Level: <span id="potassiumValue">40</span>%</label>
<input type="range" id="potassium" min="0" max="100" value="40" class="slider">
</div>
<div class="form-row">
<div class="form-group">
<label for="crop-type">Crop Type</label>
<input type="text" id="crop-type" placeholder="e.g., Corn, Wheat, Rice">
</div>
<div class="form-group">
<label for="soil-type">Soil Type</label>
<input type="text" id="soil-type" placeholder="e.g., Clay, Sandy, Loam">
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Get Recommendations</button>
</form>
</div>
</div>
</div>
<!-- NPK Visualization -->
<div class="npk-visualization">
<div class="card">
<div class="card-header">
<h2>Current NPK Levels</h2>
<p>Visual representation of your soil composition</p>
</div>
<div class="card-body">
<div class="npk-chart-container">
<canvas id="npkChart"></canvas>
</div>
<div class="npk-legend">
<div class="npk-legend-item">
<div class="legend-color nitrogen"></div>
<div class="legend-text">
<span>Nitrogen (N)</span>
<strong id="nitrogenLegend">50%</strong>
</div>
</div>
<div class="npk-legend-item">
<div class="legend-color phosphorus"></div>
<div class="legend-text">
<span>Phosphorus (P)</span>
<strong id="phosphorusLegend">30%</strong>
</div>
</div>
<div class="npk-legend-item">
<div class="legend-color potassium"></div>
<div class="legend-text">
<span>Potassium (K)</span>
<strong id="potassiumLegend">40%</strong>
</div>
</div>
</div>
<div class="soil-analysis-alert">
<i class="fas fa-exclamation-circle"></i>
<div>
<h4>Soil Analysis</h4>
<p id="soilAnalysis">Your soil has balanced nutrient levels.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Recommendations Section (Initially Hidden) -->
<div class="recommendations-section" id="recommendationsSection" style="display: none;">
<div class="card">
<div class="card-header">
<h2>Fertilizer Recommendations</h2>
<p>Based on your soil composition and crop requirements</p>
</div>
<div class="card-body">
<div class="fertilizer-recommendations-grid">
<div class="fertilizer-list">
<div class="fertilizer-item">
<div class="fertilizer-icon">
<i class="fas fa-seedling"></i>
</div>
<div class="fertilizer-content">
<h3>Nitrogen-Rich Fertilizer</h3>
<p class="fertilizer-npk">NPK Ratio: 20-5-5</p>
<p class="fertilizer-description">High in nitrogen, ideal for leafy growth and vegetative development.</p>
<div class="fertilizer-details">
<div class="fertilizer-detail">
<h4>Suitable Crops</h4>
<p>Corn, Wheat, Leafy Greens</p>
</div>
<div class="fertilizer-detail">
<h4>Application Rate</h4>
<p>Apply 250-300 kg/ha before planting or during early growth stages.</p>
</div>
</div>
<div class="fertilizer-recommended">
<i class="fas fa-check"></i>
<span>Recommended for your soil conditions</span>
</div>
</div>
</div>
<div class="application-tips">
<h3>Application Tips</h3>
<ul>
<li>
<i class="fas fa-arrow-right"></i>
<span>Apply fertilizers in the early morning or late evening to reduce nutrient loss.</span>
</li>
<li>
<i class="fas fa-arrow-right"></i>
<span>Ensure even distribution for optimal nutrient uptake by plants.</span>
</li>
<li>
<i class="fas fa-arrow-right"></i>
<span>Consider split applications for better nutrient management throughout the growing season.</span>
</li>
</ul>
</div>
</div>
<div class="fertilizer-comparison">
<div class="comparison-chart-container">
<h3>NPK Comparison</h3>
<canvas id="comparisonChart"></canvas>
</div>
<div class="expected-benefits">
<h3>Expected Benefits</h3>
<ul>
<li>
<i class="fas fa-check"></i>
<span>Improved crop yield by up to 25%</span>
</li>
<li>
<i class="fas fa-check"></i>
<span>Enhanced plant health and disease resistance</span>
</li>
<li>
<i class="fas fa-check"></i>
<span>Better quality produce with improved nutritional value</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-logo">
<i class="fas fa-leaf"></i>
<h2>AgriSmart</h2>
<p>Empowering farmers with precision agriculture solutions for a sustainable future.</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-youtube"></i></a>
</div>
</div>
<div class="footer-links">
<div class="footer-link-group">
<h3>Quick Links</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="irrigation.html">Irrigation System</a></li>
<li><a href="fertilizer.html">Fertilizer Recommendations</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="footer-link-group">
<h3>Our Services</h3>
<ul>
<li><a href="irrigation.html">Smart Irrigation</a></li>
<li><a href="fertilizer.html">Fertilizer Optimization</a></li>
<li><a href="#">Crop Monitoring</a></li>
<li><a href="#">Weather Forecasting</a></li>
<li><a href="#">Yield Prediction</a></li>
</ul>
</div>
<div class="footer-link-group">
<h3>Contact Us</h3>
<ul class="contact-info">
<li><i class="fas fa-map-marker-alt"></i> 123 Agriculture Road, Farmville, CA 94123, USA</li>
<li><i class="fas fa-phone"></i> +1 (555) 123-4567</li>
<li><i class="fas fa-envelope"></i> info@agrismart.com</li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 AgriSmart. All rights reserved.</p>
<div class="footer-bottom-links">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Cookie Policy</a>
</div>
</div>
</div>
</footer>
<script src="js/main.js"></script>
<script src="js/fertilizer.js"></script>
<script src="js/darkmode.js"></script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - AgriSmart</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
</head>
<body>
<!-- Header -->
<header>
<div class="container">
<div class="logo">
<i class="fas fa-leaf"></i>
<h1>AgriSmart</h1>
</div>
<nav>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="irrigation.html">Irrigation</a></li>
<li><a href="fertilizer.html">Fertilizer</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html" class="active">Contact</a></li>
</ul>
<div class="login-btn">
<a href="login.html">Login</a>
</div>
<div class="theme-toggle">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</div>
</header>
<!-- Contact Section -->
<section class="contact-section">
<div class="container">
<div class="section-header text-center">
<h1>Contact Us</h1>
<p>Have questions about our smart farming solutions? We're here to help. Reach out to our team using the form below or contact us directly.</p>
</div>
<div class="contact-grid">
<!-- Contact Information -->
<div class="contact-info">
<div class="card">
<div class="card-body">
<h2>Get in Touch</h2>
<div class="contact-info-items">
<div class="contact-info-item">
<div class="contact-icon">
<i class="fas fa-envelope"></i>
</div>
<div>
<h3>Email</h3>
<p>info@agrismart.com</p>
<p>support@agrismart.com</p>
</div>
</div>
<div class="contact-info-item">
<div class="contact-icon">
<i class="fas fa-phone"></i>
</div>
<div>
<h3>Phone</h3>
<p>+1 (555) 123-4567</p>
<p>+1 (555) 987-6543</p>
</div>
</div>
<div class="contact-info-item">
<div class="contact-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div>
<h3>Office</h3>
<p>
123 Agriculture Road<br>
Farmville, CA 94123<br>
United States
</p>
</div>
</div>
</div>
<div class="business-hours">
<h3>Business Hours</h3>
<div class="hours-list">
<div class="hours-item">
<span>Monday - Friday:</span>
<span>9:00 AM - 6:00 PM</span>
</div>
<div class="hours-item">
<span>Saturday:</span>
<span>10:00 AM - 4:00 PM</span>
</div>
<div class="hours-item">
<span>Sunday:</span>
<span>Closed</span>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h2>Follow Us</h2>
<p>Stay connected with us on social media for the latest updates, tips, and agricultural insights.</p>
<div class="social-links-large">
<a href="#" class="social-link facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="social-link twitter">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="social-link instagram">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="social-link youtube">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Contact Form -->
<div class="contact-form-container">
<div class="card">
<div class="card-body">
<h2>Send Us a Message</h2>
<div id="formSuccess" class="form-success" style="display: none;">
<div class="success-icon">
<i class="fas fa-check-circle"></i>
</div>
<h3>Message Sent!</h3>
<p>Thank you for contacting us. We've received your message and will get back to you shortly.</p>
</div>
<form id="contactForm" class="contact-form">
<div class="form-row">
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" placeholder="John Doe" required>
<span class="error-message" id="nameError"></span>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="you@example.com" required>
<span class="error-message" id="emailError"></span>
</div>
</div>
<div class="form-group">
<label for="phone">Phone Number (Optional)</label>
<input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567">
</div>
<div class="form-group">
<label>Subject</label>
<div class="radio-group">
<label class="radio-container">
<input type="radio" name="subject" value="General Inquiry" checked>
<span class="radio-checkmark"></span>
General Inquiry
</label>
<label class="radio-container">
<input type="radio" name="subject" value="Technical Support">
<span class="radio-checkmark"></span>
Technical Support
</label>
<label class="radio-container">
<input type="radio" name="subject" value="Sales & Pricing">
<span class="radio-checkmark"></span>
Sales & Pricing
</label>
<label class="radio-container">
<input type="radio" name="subject" value="Partnership Opportunity">
<span class="radio-checkmark"></span>
Partnership Opportunity
</label>
</div>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" rows="6" placeholder="How can we help you?" required></textarea>
<span class="error-message" id="messageError"></span>
</div>
<button type="submit" class="btn btn-primary btn-block" id="submitButton">
<i class="fas fa-paper-plane"></i>
Send Message
</button>
</form>
</div>
</div>
</div>
</div>
<!-- Map Section -->
<div class="map-container">
<div class="card">
<div class="map-placeholder">
<p>Interactive map would be displayed here</p>
</div>
</div>
</div>
<!-- FAQ Section -->
<div class="faq-section">
<div class="section-header text-center">
<h2>Frequently Asked Questions</h2>
<p>Find quick answers to common questions about our services</p>
</div>
<div class="faq-grid">
<div class="card">
<div class="card-body">
<h3>How does the smart irrigation system work?</h3>
<p>Our smart irrigation system uses soil moisture sensors, weather data, and AI algorithms to determine the optimal watering schedule for your crops, delivering water only when and where it's needed.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h3>Is AgriSmart suitable for small farms?</h3>
<p>AgriSmart is designed to be scalable and affordable for farms of all sizes, from small family operations to large commercial enterprises.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h3>Do I need technical expertise to use your platform?</h3>
<p>No technical expertise is required. Our platform is designed to be user-friendly, and our team provides comprehensive onboarding and support to ensure you can make the most of our solutions.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h3>How accurate are the fertilizer recommendations?</h3>
<p>Our fertilizer recommendations are based on soil composition data, crop requirements, and agricultural best practices. They typically help farmers reduce fertilizer use by 20-30% while maintaining or improving yields.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-logo">
<i class="fas fa-leaf"></i>
<h2>AgriSmart</h2>
<p>Empowering farmers with precision agriculture solutions for a sustainable future.</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-youtube"></i></a>
</div>
</div>
<div class="footer-links">
<div class="footer-link-group">
<h3>Quick Links</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="irrigation.html">Irrigation System</a></li>
<li><a href="fertilizer.html">Fertilizer Recommendations</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="footer-link-group">
<h3>Our Services</h3>
<ul>
<li><a href="irrigation.html">Smart Irrigation</a></li>
<li><a href="fertilizer.html">Fertilizer Optimization</a></li>
<li><a href="#">Crop Monitoring</a></li>
<li><a href="#">Weather Forecasting</a></li>
<li><a href="#">Yield Prediction</a></li>
</ul>
</div>
<div class="footer-link-group">
<h3>Contact Us</h3>
<ul class="contact-info">
<li><i class="fas fa-map-marker-alt"></i> 123 Agriculture Road, Farmville, CA 94123, USA</li>
<li><i class="fas fa-phone"></i> +1 (555) 123-4567</li>
<li><i class="fas fa-envelope"></i> info@agrismart.com</li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 AgriSmart. All rights reserved.</p>
<div class="footer-bottom-links">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Cookie Policy</a>
</div>
</div>
</div>
</footer>
<script src="js/main.js"></script>
<script src="js/validation.js"></script>
<script src="js/darkmode.js"></script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - AgriSmart</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
</head>
<body>
<!-- Header -->
<header>
<div class="container">
<div class="logo">
<i class="fas fa-leaf"></i>
<h1>AgriSmart</h1>
</div>
<nav>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="irrigation.html">Irrigation</a></li>
<li><a href="fertilizer.html">Fertilizer</a></li>
<li><a href="about.html" class="active">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="login-btn">
<a href="login.html">Login</a>
</div>
<div class="theme-toggle">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="about-hero">
<div class="container">
<div class="about-hero-content">
<h1>About AgriSmart</h1>
<p>We're on a mission to revolutionize agriculture through smart technology and data-driven insights.</p>
</div>
</div>
<div class="hero-wave">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#ffffff" fill-opacity="1" d="M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,224C672,245,768,267,864,250.7C960,235,1056,181,1152,165.3C1248,149,1344,171,1392,181.3L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
</div>
</section>
<!-- Our Story Section -->
<section class="our-story">
<div class="container">
<div class="story-grid">
<div class="story-content" data-aos="fade-right">
<h2>Our Story</h2>
<p>AgriSmart was founded in 2018 with a simple yet powerful vision: to make precision agriculture accessible to farmers of all sizes. We recognized that while technology was transforming many industries, agriculture often lagged behind due to high costs and complex implementation.</p>
<p>Our team of agricultural scientists, engineers, and software developers came together to create affordable, user-friendly solutions that help farmers optimize their resources, increase yields, and practice sustainable agriculture.</p>
<p>Today, AgriSmart serves thousands of farmers across the globe, providing them with real-time data and actionable insights that make a real difference in their operations and livelihoods.</p>
<div class="story-buttons">
<a href="contact.html" class="btn btn-primary">Contact Us</a>
<a href="login.html" class="btn btn-secondary">Join AgriSmart</a>
</div>
</div>
<div class="story-image" data-aos="fade-left">
<img src="images/about-team.jpg" alt="AgriSmart Team">
</div>
</div>
</div>
</section>
<!-- Mission & Values -->
<section class="mission-values">
<div class="container">
<div class="section-header text-center" data-aos="fade-up">
<h2>Our Mission & Values</h2>
<p>At AgriSmart, we're guided by a set of core values that inform everything we do. Our mission is to empower farmers with technology that makes agriculture more efficient, profitable, and sustainable.</p>
</div>
<div class="values-grid">
<div class="value-card" data-aos="fade-up">
<div class="value-icon">
<i class="fas fa-seedling"></i>
</div>
<h3>Sustainability</h3>
<p>We believe in farming practices that meet present needs without compromising the ability of future generations to meet their own needs. Our solutions are designed to optimize resource use and minimize environmental impact.</p>
</div>
<div class="value-card" data-aos="fade-up" data-aos-delay="200">
<div class="value-icon">
<i class="fas fa-users"></i>
</div>
<h3>Accessibility</h3>
<p>We're committed to making advanced agricultural technology accessible to farmers of all sizes, from small family farms to large commercial operations. We believe everyone should benefit from precision agriculture.</p>
</div>
<div class="value-card" data-aos="fade-up" data-aos-delay="400">
<div class="value-icon">
<i class="fas fa-award"></i>
</div>
<h3>Innovation</h3>
<p>We continuously push the boundaries of what's possible in agricultural technology. Our team is dedicated to research and development, ensuring our solutions remain at the cutting edge of the industry.</p>
</div>
</div>
</div>
</section>
<!-- Team Section -->
<section class="team-section">
<div class="container">
<div class="section-header text-center" data-aos="fade-up">
<h2>Meet Our Team</h2>
<p>Our diverse team brings together expertise in agriculture, technology, and business to create solutions that make a real difference for farmers.</p>
</div>
<div class="team-grid">
<div class="team-member" data-aos="fade-up">
<div class="member-image">
<img src="images/team-member-1.jpg" alt="Dr. Sarah Johnson">
</div>
<div class="member-info">
<h3>Dr. Sarah Johnson</h3>
<p class="member-role">Founder & CEO</p>
<p class="member-bio">Agricultural scientist with 15+ years of experience in precision farming technologies.</p>
</div>
</div>
<div class="team-member" data-aos="fade-up" data-aos-delay="100">
<div class="member-image">
<img src="images/team-member-2.jpg" alt="Michael Chen">
</div>
<div class="member-info">
<h3>Michael Chen</h3>
<p class="member-role">CTO</p>
<p class="member-bio">IoT specialist with expertise in sensor networks and data analytics for agriculture.</p>
</div>
</div>
<div class="team-member" data-aos="fade-up" data-aos-delay="200">
<div class="member-image">
<img src="images/team-member-3.jpg" alt="Priya Patel">
</div>
<div class="member-info">
<h3>Priya Patel</h3>
<p class="member-role">Lead Agronomist</p>
<p class="member-bio">Expert in soil science and crop nutrition with a focus on sustainable farming practices.</p>
</div>
</div>
<div class="team-member" data-aos="fade-up" data-aos-delay="300">
<div class="member-image">
<img src="images/team-member-4.jpg" alt="James Wilson">
</div>
<div class="member-info">
<h3>James Wilson</h3>
<p class="member-role">Software Engineer</p>
<p class="member-bio">Full-stack developer specializing in agricultural technology solutions and data visualization.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Achievements -->
<section class="achievements-section">
<div class="container">
<div class="section-header text-center" data-aos="fade-up">
<h2>Our Achievements</h2>
<p>Since our founding, we've reached significant milestones and made a real impact in the agricultural sector.</p>
</div>
<div class="achievements-grid">
<div class="achievement-card" data-aos="fade-up">
<div class="achievement-number">10,000+</div>
<h3>Farmers Served</h3>
<p>Our platform is used by thousands of farmers across 15 countries, helping them optimize their agricultural operations.</p>
</div>
<div class="achievement-card" data-aos="fade-up" data-aos-delay="200">
<div class="achievement-number">25%</div>
<h3>Average Yield Increase</h3>
<p>Farmers using our platform report an average 25% increase in crop yields through optimized resource management.</p>
</div>
<div class="achievement-card" data-aos="fade-up" data-aos-delay="400">
<div class="achievement-number">30%</div>
<h3>Water Usage Reduction</h3>
<p>Our smart irrigation systems help farmers reduce water consumption by an average of 30% while maintaining or improving crop health.</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta">
<div class="container">
<h2>Ready to Transform Your Farming?</h2>
<p>Join thousands of farmers who are already using our platform to optimize their operations and increase profitability.</p>
<div class="cta-buttons">
<a href="login.html" class="btn btn-primary">Get Started for Free</a>
<a href="contact.html" class="btn btn-secondary">
Contact Sales <i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-logo">
<i class="fas fa-leaf"></i>
<h2>AgriSmart</h2>
<p>Empowering farmers with precision agriculture solutions for a sustainable future.</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-youtube"></i></a>
</div>
</div>
<div class="footer-links">
<div class="footer-link-group">
<h3>Quick Links</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="irrigation.html">Irrigation System</a></li>
<li><a href="fertilizer.html">Fertilizer Recommendations</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="footer-link-group">
<h3>Our Services</h3>
<ul>
<li><a href="irrigation.html">Smart Irrigation</a></li>
<li><a href="fertilizer.html">Fertilizer Optimization</a></li>
<li><a href="#">Crop Monitoring</a></li>
<li><a href="#">Weather Forecasting</a></li>
<li><a href="#">Yield Prediction</a></li>
</ul>
</div>
<div class="footer-link-group">
<h3>Contact Us</h3>
<ul class="contact-info">
<li><i class="fas fa-map-marker-alt"></i> 123 Agriculture Road, Farmville, CA 94123, USA</li>
<li><i class="fas fa-phone"></i> +1 (555) 123-4567</li>
<li><i class="fas fa-envelope"></i> info@agrismart.com</li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 AgriSmart. All rights reserved.</p>
<div class="footer-bottom-links">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Cookie Policy</a>
</div>
</div>
</div>
</footer>
<script src="js/main.js"></script>
<script src="js/darkmode.js"></script>
</body>
</html>