Spaces:

gurramsaikumar
/

anycoder-1bbe73e2

Running

App Files Files Community

gurramsaikumar commited on Dec 10, 2025

Commit

a71ab1d

verified ·

1 Parent(s): 10a10a7

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +1006 -307

index.html CHANGED Viewed

@@ -1,352 +1,1051 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>RythuBox - Built with anycoder</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        :root {
-            --primary-color: #2e8b57;
-            --secondary-color: #3cb371;
-            --accent-color: #f5f5f5;
-            --text-color: #333;
-            --light-text: #666;
-            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            --transition: all 0.3s ease;
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            line-height: 1.6;
-            color: var(--text-color);
-            background-color: var(--accent-color);
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
-        }
-        header {
-            background-color: white;
-            box-shadow: var(--shadow);
-            padding: 1rem 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            position: sticky;
-            top: 0;
-            z-index: 100;
-        }
-        .logo-container {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-        }
-        .logo {
-            width: 50px;
-            height: 50px;
-            background-color: var(--primary-color);
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-weight: bold;
-            font-size: 1.5rem;
-            position: relative;
-            overflow: hidden;
-        }
-        .logo::before {
-            content: '';
-            position: absolute;
-            top: -10px;
-            left: -10px;
-            width: 70px;
-            height: 70px;
-            background: linear-gradient(45deg, transparent, transparent 40%, var(--secondary-color) 40%, var(--secondary-color) 60%, transparent 60%);
-            border-radius: 50%;
-            transform: rotate(45deg);
-            opacity: 0.2;
-        }
-        .logo-text {
-            font-size: 1.5rem;
-            font-weight: 700;
-            color: var(--primary-color);
-        }
-        .anycoder-link {
-            color: var(--light-text);
-            text-decoration: none;
-            font-size: 0.9rem;
-            transition: var(--transition);
-        }
-        .anycoder-link:hover {
-            color: var(--primary-color);
-        }
-        main {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            padding: 2rem;
-            text-align: center;
-            max-width: 1200px;
-            margin: 0 auto;
-            width: 100%;
-        }
-        .hero-section {
-            margin-bottom: 3rem;
-        }
-        .hero-logo {
-            width: 150px;
-            height: 150px;
-            background-color: var(--primary-color);
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-weight: bold;
-            font-size: 3rem;
-            margin: 0 auto 1.5rem;
-            position: relative;
-            overflow: hidden;
-            box-shadow: var(--shadow);
-            transition: var(--transition);
-        }
-        .hero-logo:hover {
-            transform: scale(1.05);
-            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-        }
-        .hero-logo::before {
-            content: '';
-            position: absolute;
-            top: -20px;
-            left: -20px;
-            width: 190px;
-            height: 190px;
-            background: linear-gradient(45deg, transparent, transparent 40%, var(--secondary-color) 40%, var(--secondary-color) 60%, transparent 60%);
-            border-radius: 50%;
-            transform: rotate(45deg);
-            opacity: 0.2;
-        }
-        h1 {
-            font-size: 2.5rem;
-            margin-bottom: 1rem;
-            color: var(--primary-color);
-        }
-        .tagline {
-            font-size: 1.2rem;
-            color: var(--light-text);
-            max-width: 600px;
-            margin: 0 auto 2rem;
-        }
-        .features {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 2rem;
-            width: 100%;
-            margin-top: 2rem;
-        }
-        .feature-card {
-            background: white;
-            border-radius: 8px;
-            padding: 2rem;
-            box-shadow: var(--shadow);
-            transition: var(--transition);
-            text-align: left;
-        }
-        .feature-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-        }
-        .feature-icon {
-            font-size: 2.5rem;
-            color: var(--primary-color);
-            margin-bottom: 1rem;
-        }
-        .feature-card h3 {
-            margin-bottom: 0.5rem;
-            color: var(--primary-color);
-        }
-        footer {
-            background-color: var(--primary-color);
-            color: white;
-            text-align: center;
-            padding: 2rem;
-            margin-top: auto;
-        }
-        .social-links {
-            display: flex;
-            justify-content: center;
-            gap: 1.5rem;
-            margin-bottom: 1rem;
-        }
-        .social-links a {
-            color: white;
-            font-size: 1.5rem;
-            transition: var(--transition);
-        }
-        .social-links a:hover {
-            color: var(--secondary-color);
-            transform: translateY(-3px);
-        }
-        .copyright {
-            font-size: 0.9rem;
-            opacity: 0.8;
-        }
-        @media (max-width: 768px) {
-            header {
-                flex-direction: column;
-                gap: 1rem;
-                padding: 1rem;
-            }
-            .logo-container {
-                flex-direction: column;
-                gap: 0.5rem;
-            }
-            h1 {
-                font-size: 2rem;
-            }
-            .tagline {
-                font-size: 1rem;
-            }
-            .hero-logo {
-                width: 120px;
-                height: 120px;
-                font-size: 2.5rem;
-            }
-        }
-        @media (max-width: 480px) {
-            .hero-logo {
-                width: 100px;
-                height: 100px;
-                font-size: 2rem;
-            }
-            h1 {
-                font-size: 1.8rem;
-            }
-            .features {
-                grid-template-columns: 1fr;
-            }
-        }
-    </style>
 </head>
 <body>
-    <header>
-        <div class="logo-container">
-            <div class="logo">RB</div>
-            <div class="logo-text">RythuBox</div>
         </div>
-        <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
-            <i class="fas fa-code"></i> Built with anycoder
-        </a>
-    </header>
-    <main>
-        <section class="hero-section">
-            <div class="hero-logo">RB</div>
-            <h1>Welcome to RythuBox</h1>
-            <p class="tagline">Empowering farmers with innovative solutions for better agriculture and sustainable farming practices.</p>
-        </section>
-        <section class="features">
-            <div class="feature-card">
-                <div class="feature-icon">
-                    <i class="fas fa-seedling"></i>
-                </div>
-                <h3>Smart Farming</h3>
-                <p>Advanced agricultural solutions to maximize your yield with minimal resources.</p>
-            </div>
-            <div class="feature-card">
-                <div class="feature-icon">
-                    <i class="fas fa-chart-line"></i>
-                </div>
-                <h3>Market Insights</h3>
-                <p>Real-time market data and analytics to help you make informed decisions.</p>
-            </div>
-            <div class="feature-card">
-                <div class="feature-icon">
-                    <i class="fas fa-users"></i>
-                </div>
-                <h3>Community Support</h3>
-                <p>Connect with fellow farmers and experts to share knowledge and experiences.</p>
             </div>
-        </section>
-    </main>
-    <footer>
-        <div class="social-links">
-            <a href="#" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
-            <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
-            <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
-            <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
         </div>
-        <p class="copyright">© 2023 RythuBox. All rights reserved.</p>
-    </footer>
-    <script>
-        // Simple animation for the logo on page load
-        document.addEventListener('DOMContentLoaded', function() {
-            const logo = document.querySelector('.hero-logo');
-            logo.style.transform = 'scale(0.8)';
-            logo.style.opacity = '0';
-            setTimeout(() => {
-                logo.style.transition = 'transform 0.5s ease, opacity 0.5s ease';
-                logo.style.transform = 'scale(1)';
-                logo.style.opacity = '1';
-            }, 100);
-        });
-        // Add smooth scrolling for any anchor links
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-            anchor.addEventListener('click', function (e) {
-                e.preventDefault();
-                document.querySelector(this.getAttribute('href')).scrollIntoView({
-                    behavior: 'smooth'
-                });
             });
         });
-    </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>RythuBox - Empowering Farmers | Built with anycoder</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --primary-color: #2e8b57;
+      --primary-dark: #226b45;
+      --secondary-color: #3cb371;
+      --accent-color: #f8f9fa;
+      --text-color: #212529;
+      --light-text: #6c757d;
+      --success-color: #28a745;
+      --warning-color: #ffc107;
+      --danger-color: #dc3545;
+      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+      --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
+      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      --border-radius: 8px;
+      --border-radius-lg: 12px;
+    }
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: 'Inter', sans-serif;
+      line-height: 1.6;
+      color: var(--text-color);
+      background-color: var(--accent-color);
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+    header {
+      background-color: white;
+      box-shadow: var(--shadow-sm);
+      padding: 1rem 2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: sticky;
+      top: 0;
+      z-index: 1000;
+      transition: var(--transition);
+    }
+    .logo-container {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      text-decoration: none;
+    }
+    .logo {
+      width: 50px;
+      height: 50px;
+      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+      border-radius: var(--border-radius);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-weight: 700;
+      font-size: 1.5rem;
+      position: relative;
+      overflow: hidden;
+      box-shadow: var(--shadow-sm);
+      transition: var(--transition);
+    }
+    .logo::before {
+      content: '';
+      position: absolute;
+      top: -10px;
+      left: -10px;
+      width: 70px;
+      height: 70px;
+      background: conic-gradient(from 0deg, rgba(255,255,255,0.2), transparent, rgba(255,255,255,0.2));
+      border-radius: 50%;
+      animation: rotate 4s linear infinite;
+    }
+    .logo-text {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--primary-color);
+    }
+    .anycoder-link {
+      color: var(--light-text);
+      text-decoration: none;
+      font-size: 0.9rem;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      transition: var(--transition);
+      padding: 0.5rem 1rem;
+      border-radius: var(--border-radius);
+    }
+    .anycoder-link:hover {
+      color: var(--primary-color);
+      background-color: rgba(46, 139, 87, 0.1);
+    }
+    .nav-toggle {
+      display: none;
+      background: none;
+      border: none;
+      font-size: 1.5rem;
+      color: var(--text-color);
+      cursor: pointer;
+    }
+    main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 2rem;
+      text-align: center;
+      max-width: 1200px;
+      margin: 0 auto;
+      width: 100%;
+    }
+    .hero-section {
+      margin-bottom: 3rem;
+      padding: 2rem 0;
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+    }
+    .hero-content {
+      position: relative;
+      z-index: 2;
+    }
+    .hero-logo {
+      width: 150px;
+      height: 150px;
+      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+      border-radius: var(--border-radius-lg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-weight: 700;
+      font-size: 3rem;
+      margin: 0 auto 1.5rem;
+      position: relative;
+      overflow: hidden;
+      box-shadow: var(--shadow-lg);
+      transition: var(--transition);
+      animation: float 3s ease-in-out infinite;
+    }
+    .hero-logo::before {
+      content: '';
+      position: absolute;
+      top: -20px;
+      left: -20px;
+      width: 190px;
+      height: 190px;
+      background: conic-gradient(from 0deg, rgba(255,255,255,0.2), transparent, rgba(255,255,255,0.2));
+      border-radius: 50%;
+      animation: rotate 6s linear infinite;
+    }
+    .hero-logo:hover {
+      transform: scale(1.05) rotate(5deg);
+      box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
+    }
+    h1 {
+      font-size: 2.5rem;
+      margin-bottom: 1rem;
+      color: var(--primary-color);
+      font-weight: 700;
+      background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      display: inline-block;
+    }
+    .tagline {
+      font-size: 1.2rem;
+      color: var(--light-text);
+      max-width: 700px;
+      margin: 0 auto 2rem;
+      font-weight: 400;
+    }
+    .cta-buttons {
+      display: flex;
+      gap: 1rem;
+      justify-content: center;
+      margin-top: 1.5rem;
+    }
+    .btn {
+      padding: 0.75rem 1.5rem;
+      border-radius: var(--border-radius);
+      font-weight: 600;
+      text-decoration: none;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      transition: var(--transition);
+      border: none;
+      cursor: pointer;
+      font-size: 1rem;
+    }
+    .btn-primary {
+      background-color: var(--primary-color);
+      color: white;
+    }
+    .btn-primary:hover {
+      background-color: var(--primary-dark);
+      transform: translateY(-2px);
+      box-shadow: var(--shadow);
+    }
+    .btn-secondary {
+      background-color: white;
+      color: var(--primary-color);
+      border: 1px solid var(--primary-color);
+    }
+    .btn-secondary:hover {
+      background-color: rgba(46, 139, 87, 0.1);
+      transform: translateY(-2px);
+    }
+    .features {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+      gap: 2rem;
+      width: 100%;
+      margin-top: 3rem;
+    }
+    .feature-card {
+      background: white;
+      border-radius: var(--border-radius);
+      padding: 2rem;
+      box-shadow: var(--shadow);
+      transition: var(--transition);
+      text-align: left;
+      position: relative;
+      overflow: hidden;
+    }
+    .feature-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 4px;
+      background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+      transform: scaleX(0);
+      transition: var(--transition);
+    }
+    .feature-card:hover {
+      transform: translateY(-8px);
+      box-shadow: var(--shadow-lg);
+    }
+    .feature-card:hover::before {
+      transform: scaleX(1);
+    }
+    .feature-icon {
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 1.5rem;
+      font-size: 1.8rem;
+      color: white;
+      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+      box-shadow: var(--shadow-sm);
+    }
+    .feature-card h3 {
+      margin-bottom: 1rem;
+      color: var(--primary-color);
+      font-size: 1.3rem;
+    }
+    .feature-card p {
+      color: var(--light-text);
+      line-height: 1.7;
+    }
+    .stats-section {
+      width: 100%;
+      margin: 4rem 0;
+      padding: 2rem 0;
+      background: linear-gradient(135deg, rgba(46, 139, 87, 0.05), rgba(60, 179, 113, 0.05));
+      border-radius: var(--border-radius);
+    }
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 2rem;
+    }
+    .stat-card {
+      text-align: center;
+      padding: 1.5rem;
+    }
+    .stat-number {
+      font-size: 2.5rem;
+      font-weight: 700;
+      color: var(--primary-color);
+      margin-bottom: 0.5rem;
+    }
+    .stat-label {
+      font-size: 1rem;
+      color: var(--light-text);
+      font-weight: 500;
+    }
+    .testimonials {
+      width: 100%;
+      margin: 3rem 0;
+    }
+    .testimonials-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 2rem;
+    }
+    .testimonials-title {
+      font-size: 1.8rem;
+      color: var(--primary-color);
+    }
+    .testimonials-nav {
+      display: flex;
+      gap: 0.5rem;
+    }
+    .testimonial-nav-btn {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      border: none;
+      background: white;
+      color: var(--primary-color);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: var(--shadow-sm);
+      transition: var(--transition);
+    }
+    .testimonial-nav-btn:hover {
+      background: var(--primary-color);
+      color: white;
+      transform: scale(1.1);
+    }
+    .testimonials-container {
+      display: flex;
+      gap: 2rem;
+      overflow-x: auto;
+      padding-bottom: 1rem;
+      scroll-behavior: smooth;
+    }
+    .testimonial-card {
+      min-width: 300px;
+      background: white;
+      padding: 2rem;
+      border-radius: var(--border-radius);
+      box-shadow: var(--shadow);
+      flex-shrink: 0;
+      position: relative;
+    }
+    .testimonial-card::before {
+      content: '"';
+      position: absolute;
+      top: 1rem;
+      left: 1rem;
+      font-size: 5rem;
+      color: rgba(46, 139, 87, 0.1);
+      font-weight: 700;
+      line-height: 1;
+      z-index: 0;
+    }
+    .testimonial-content {
+      position: relative;
+      z-index: 1;
+    }
+    .testimonial-text {
+      font-style: italic;
+      margin-bottom: 1.5rem;
+      color: var(--text-color);
+    }
+    .testimonial-author {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+    .author-avatar {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      background: var(--primary-color);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-weight: 600;
+    }
+    .author-info h4 {
+      font-size: 1rem;
+      margin-bottom: 0.25rem;
+    }
+    .author-info p {
+      font-size: 0.9rem;
+      color: var(--light-text);
+    }
+    footer {
+      background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
+      color: white;
+      text-align: center;
+      padding: 3rem 2rem;
+      margin-top: auto;
+    }
+    .footer-content {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+    .footer-logo {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-bottom: 2rem;
+    }
+    .footer-logo-text {
+      font-size: 2rem;
+      font-weight: 700;
+      margin-top: 1rem;
+    }
+    .footer-links {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: 2rem;
+      margin-bottom: 2rem;
+    }
+    .footer-column h3 {
+      font-size: 1.1rem;
+      margin-bottom: 1rem;
+      position: relative;
+      padding-bottom: 0.5rem;
+    }
+    .footer-column h3::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 30px;
+      height: 2px;
+      background: white;
+    }
+    .footer-column ul {
+      list-style: none;
+    }
+    .footer-column li {
+      margin-bottom: 0.75rem;
+    }
+    .footer-column a {
+      color: rgba(255, 255, 255, 0.8);
+      text-decoration: none;
+      transition: var(--transition);
+    }
+    .footer-column a:hover {
+      color: white;
+      transform: translateX(5px);
+    }
+    .social-links {
+      display: flex;
+      justify-content: center;
+      gap: 1.5rem;
+      margin: 2rem 0;
+    }
+    .social-links a {
+      width: 45px;
+      height: 45px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.1);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: var(--transition);
+    }
+    .social-links a:hover {
+      background: white;
+      color: var(--primary-color);
+      transform: translateY(-5px);
+    }
+    .copyright {
+      font-size: 0.9rem;
+      opacity: 0.8;
+      padding-top: 2rem;
+      border-top: 1px solid rgba(255, 255, 255, 0.2);
+    }
+    .back-to-top {
+      position: fixed;
+      bottom: 2rem;
+      right: 2rem;
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      background: var(--primary-color);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: var(--shadow-lg);
+      opacity: 0;
+      visibility: hidden;
+      transition: var(--transition);
+      z-index: 999;
+    }
+    .back-to-top.visible {
+      opacity: 1;
+      visibility: visible;
+    }
+    .back-to-top:hover {
+      transform: translateY(-5px);
+      background: var(--primary-dark);
+    }
+    @keyframes rotate {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    @keyframes float {
+      0%, 100% {
+        transform: translateY(0);
+      }
+      50% {
+        transform: translateY(-10px);
+      }
+    }
+    @media (max-width: 992px) {
+      header {
+        padding: 1rem;
+      }
+      .nav-toggle {
+        display: block;
+      }
+      h1 {
+        font-size: 2.2rem;
+      }
+      .tagline {
+        font-size: 1.1rem;
+      }
+      .cta-buttons {
+        flex-direction: column;
+        align-items: center;
+      }
+      .btn {
+        width: 100%;
+        max-width: 300px;
+      }
+    }
+    @media (max-width: 768px) {
+      .logo-container {
+        flex-direction: column;
+        gap: 0.5rem;
+      }
+      .hero-logo {
+        width: 120px;
+        height: 120px;
+        font-size: 2.5rem;
+      }
+      h1 {
+        font-size: 2rem;
+      }
+      .tagline {
+        font-size: 1rem;
+      }
+      .features {
+        grid-template-columns: 1fr;
+      }
+      .testimonials-container {
+        gap: 1rem;
+      }
+      .testimonial-card {
+        min-width: 280px;
+      }
+    }
+    @media (max-width: 480px) {
+      .hero-logo {
+        width: 100px;
+        height: 100px;
+        font-size: 2rem;
+      }
+      h1 {
+        font-size: 1.8rem;
+      }
+      .footer-links {
+        grid-template-columns: 1fr;
+      }
+      .footer-logo-text {
+        font-size: 1.8rem;
+      }
+    }
+  </style>
 </head>
 <body>
+  <header>
+    <a href="#" class="logo-container">
+      <div class="logo">RB</div>
+      <div class="logo-text">RythuBox</div>
+    </a>
+    <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank" rel="noopener noreferrer">
+      <i class="fas fa-code"></i> Built with anycoder
+    </a>
+    <button class="nav-toggle" aria-label="Toggle navigation">
+      <i class="fas fa-bars"></i>
+    </button>
+  </header>
+  <main>
+    <section class="hero-section">
+      <div class="hero-content">
+        <div class="hero-logo">RB</div>
+        <h1>Empowering Farmers for a Sustainable Future</h1>
+        <p class="tagline">Innovative agricultural solutions designed to help farmers maximize yields, optimize resources, and build resilient farming practices for generations to come.</p>
+        <div class="cta-buttons">
+          <a href="#" class="btn btn-primary">
+            <i class="fas fa-rocket"></i> Get Started
+          </a>
+          <a href="#" class="btn btn-secondary">
+            <i class="fas fa-play-circle"></i> Watch Demo
+          </a>
         </div>
+      </div>
+    </section>
+    <section class="features">
+      <div class="feature-card">
+        <div class="feature-icon">
+          <i class="fas fa-seedling"></i>
+        </div>
+        <h3>Precision Farming</h3>
+        <p>Utilize advanced IoT sensors and AI-driven analytics to monitor soil health, weather patterns, and crop conditions in real-time for optimal decision making.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">
+          <i class="fas fa-chart-line"></i>
+        </div>
+        <h3>Market Intelligence</h3>
+        <p>Access comprehensive market data, price trends, and demand forecasts to make informed decisions about what to grow and when to sell for maximum profitability.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">
+          <i class="fas fa-tractor"></i>
+        </div>
+        <h3>Equipment Management</h3>
+        <p>Track and manage your farming equipment with our smart inventory system, schedule maintenance, and optimize usage to reduce downtime and increase efficiency.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">
+          <i class="fas fa-users"></i>
+        </div>
+        <h3>Farmer Community</h3>
+        <p>Connect with thousands of farmers, share experiences, and learn from experts through our exclusive community platform and knowledge-sharing forums.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">
+          <i class="fas fa-leaf"></i>
+        </div>
+        <h3>Sustainable Practices</h3>
+        <p>Implement eco-friendly farming techniques with our sustainability guides, organic certification assistance, and carbon footprint tracking tools.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">
+          <i class="fas fa-credit-card"></i>
+        </div>
+        <h3>Financial Services</h3>
+        <p>Access tailored financial products including low-interest loans, crop insurance, and government subsidy information to support your farming business.</p>
+      </div>
+    </section>
+    <section class="stats-section">
+      <div class="stats-grid">
+        <div class="stat-card">
+          <div class="stat-number">15,000+</div>
+          <div class="stat-label">Farmers Empowered</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-number">30%</div>
+          <div class="stat-label">Average Yield Increase</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-number">500K+</div>
+          <div class="stat-label">Acres Managed</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-number">95%</div>
+          <div class="stat-label">Customer Satisfaction</div>
+        </div>
+      </div>
+    </section>
+    <section class="testimonials">
+      <div class="testimonials-header">
+        <h2 class="testimonials-title">What Our Farmers Say</h2>
+        <div class="testimonials-nav">
+          <button class="testimonial-nav-btn" id="prev-btn">
+            <i class="fas fa-chevron-left"></i>
+          </button>
+          <button class="testimonial-nav-btn" id="next-btn">
+            <i class="fas fa-chevron-right"></i>
+          </button>
+        </div>
+      </div>
+      <div class="testimonials-container" id="testimonials-container">
+        <div class="testimonial-card">
+          <div class="testimonial-content">
+            <p class="testimonial-text">RythuBox has completely transformed how I manage my farm. The precision farming tools helped me increase my yield by 28% in just one season while reducing water usage.</p>
+            <div class="testimonial-author">
+              <div class="author-avatar">SR</div>
+              <div class="author-info">
+                <h4>Suresh Reddy</h4>
+                <p>Organic Farmer, Andhra Pradesh</p>
+              </div>
             </div>
+          </div>
         </div>
+        <div class="testimonial-card">
+          <div class="testimonial-content">
+            <p class="testimonial-text">The market intelligence feature is a game-changer. I was able to sell my cotton crop at 15% higher price by following the price trend predictions. Highly recommended!</p>
+            <div class="testimonial-author">
+              <div class="author-avatar">PK</div>
+              <div class="author-info">
+                <h4>Prakash Kumar</h4>
+                <p>Cotton Farmer, Gujarat</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="testimonial-card">
+          <div class="testimonial-content">
+            <p class="testimonial-text">As a small farmer, accessing financial services was always difficult. RythuBox connected me with affordable loans and helped me expand my farm operations significantly.</p>
+            <div class="testimonial-author">
+              <div class="author-avatar">AM</div>
+              <div class="author-info">
+                <h4>Anita More</h4>
+                <p>Dairy Farmer, Maharashtra</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="testimonial-card">
+          <div class="testimonial-content">
+            <p class="testimonial-text">The community support is incredible. I've learned so much from fellow farmers and experts. The knowledge sharing has helped me adopt sustainable practices that are better for my land.</p>
+            <div class="testimonial-author">
+              <div class="author-avatar">RK</div>
+              <div class="author-info">
+                <h4>Ramesh Kumar</h4>
+                <p>Rice Farmer, Tamil Nadu</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  <footer>
+    <div class="footer-content">
+      <div class="footer-logo">
+        <div class="logo">RB</div>
+        <div class="footer-logo-text">RythuBox</div>
+      </div>
+      <div class="footer-links">
+        <div class="footer-column">
+          <h3>Products</h3>
+          <ul>
+            <li><a href="#">Precision Farming</a></li>
+            <li><a href="#">Market Intelligence</a></li>
+            <li><a href="#">Equipment Management</a></li>
+            <li><a href="#">Financial Services</a></li>
+          </ul>
+        </div>
+        <div class="footer-column">
+          <h3>Resources</h3>
+          <ul>
+            <li><a href="#">Blog</a></li>
+            <li><a href="#">Case Studies</a></li>
+            <li><a href="#">Webinars</a></li>
+            <li><a href="#">Help Center</a></li>
+          </ul>
+        </div>
+        <div class="footer-column">
+          <h3>Company</h3>
+          <ul>
+            <li><a href="#">About Us</a></li>
+            <li><a href="#">Careers</a></li>
+            <li><a href="#">Partners</a></li>
+            <li><a href="#">Contact</a></li>
+          </ul>
+        </div>
+        <div class="footer-column">
+          <h3>Legal</h3>
+          <ul>
+            <li><a href="#">Privacy Policy</a></li>
+            <li><a href="#">Terms of Service</a></li>
+            <li><a href="#">Cookie Policy</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="social-links">
+        <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
+        <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
+        <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
+        <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
+        <a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
+      </div>
+      <p class="copyright">© 2023 RythuBox Technologies Pvt. Ltd. All rights reserved.</p>
+    </div>
+  </footer>
+  <button class="back-to-top" id="back-to-top">
+    <i class="fas fa-arrow-up"></i>
+  </button>
+  <script>
+    // Mobile navigation toggle
+    const navToggle = document.querySelector('.nav-toggle');
+    const header = document.querySelector('header');
+    // Back to top button
+    const backToTopBtn = document.getElementById('back-to-top');
+    // Testimonials slider
+    const testimonialsContainer = document.getElementById('testimonials-container');
+    const prevBtn = document.getElementById('prev-btn');
+    const nextBtn = document.getElementById('next-btn');
+    const testimonialCards = document.querySelectorAll('.testimonial-card');
+    let currentIndex = 0;
+    const cardWidth = testimonialCards[0].offsetWidth + 32; // 32px for gap
+    // Hero logo animation
+    document.addEventListener('DOMContentLoaded', function() {
+      const heroLogo = document.querySelector('.hero-logo');
+      heroLogo.style.transform = 'scale(0.8)';
+      heroLogo.style.opacity = '0';
+      setTimeout(() => {
+        heroLogo.style.transition = 'transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease';
+        heroLogo.style.transform = 'scale(1)';
+        heroLogo.style.opacity = '1';
+      }, 100);
+      // Smooth scrolling for anchor links
+      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+          e.preventDefault();
+          const targetId = this.getAttribute('href');
+          if (targetId === '#') return;
+          const targetElement = document.querySelector(targetId);
+          if (targetElement) {
+            window.scrollTo({
+              top: targetElement.offsetTop - 80,
+              behavior: 'smooth'
             });
+          }
         });
+      });
+      // Back to top button visibility
+      window.addEventListener('scroll', () => {
+        if (window.pageYOffset > 300) {
+          backToTopBtn.classList.add('visible');
+        } else {
+          backToTopBtn.classList.remove('visible');
+        }
+      });
+      // Back to top click handler
+      backToTopBtn.addEventListener('click', () => {
+        window.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        });
+      });
+      // Testimonials slider
+      updateTestimonials();
+      nextBtn.addEventListener('click', () => {
+        if (currentIndex < testimonialCards.length - 1) {
+          currentIndex++;
+          updateTestimonials();
+        }
+      });
+      prevBtn.addEventListener('click', () => {
+        if (currentIndex > 0) {
+          currentIndex--;
+          updateTestimonials();
+        }
+      });
+      // Handle window resize for testimonials
+      window.addEventListener('resize', () => {
+        const cardWidth = testimonialCards[0].offsetWidth + 32;
+        testimonialsContainer.scrollLeft = currentIndex * cardWidth;
+      });
+    });
+    function updateTestimonials() {
+      const cardWidth = testimonialCards[0].offsetWidth + 32; // 32px for gap
+      testimonialsContainer.style.scrollBehavior = 'smooth';
+      testimonialsContainer.scrollLeft = currentIndex * cardWidth;
+      // Update button states
+      prevBtn.disabled = currentIndex === 0;
+      nextBtn.disabled = currentIndex >= testimonialCards.length - 1;
+    }
+    // Add intersection observer for animations
+    const observerOptions = {
+      threshold: 0.1,
+      rootMargin: '0px 0px -50px 0px'
+    };
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.style.opacity = '1';
+          entry.target.style.transform = 'translateY(0)';
+        }
+      });
+    }, observerOptions);
+    // Observe feature cards and testimonials
+    document.querySelectorAll('.feature-card, .testimonial-card').forEach(card => {
+      card.style.opacity = '0';
+      card.style.transform = 'translateY(20px)';
+      card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+      observer.observe(card);
+    });
+    // Add parallax effect to hero section
+    window.addEventListener('scroll', () => {
+      const scrolled = window.pageYOffset;
+      const heroSection = document.querySelector('.hero-section');
+      const rate = scrolled * -0.1;
+      if (heroSection) {
+        heroSection.style.transform = `translateY(${rate}px)`;
+      }
+    });
+  </script>
 </body>
 </html>