hackathon2/about.html at main · Saijayaranjan/hackathon2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Our Project</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Navigation -->
    <nav class="bg-white shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fas fa-leaf text-green-600 text-2xl"></i>
                        <span class="ml-2 text-xl font-bold text-gray-900">Byte for Bait</span>
                    </div>
                </div>
                <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
                    <a href="index.html" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">Home</a>
                    <a href="soil-dashboard.html" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">Soil Data</a>
                    <a href="analysis.html" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">Analysis</a>
                    <a href="about.html" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-green-500 text-sm font-medium">About</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- About Content -->
    <div class="py-12 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:text-center">
                <h2 class="text-base text-green-600 font-semibold tracking-wide uppercase">Our Story</h2>
                <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    About This Project
                </p>
            </div>

            <div class="mt-10 prose prose-green prose-lg text-gray-500 mx-auto">
                <p>This project was developed as part of a hackathon focused on agricultural technology solutions.</p>

                <h3 class="text-green-600">Project Goals</h3>
                <p>We aimed to create a user-friendly interface for farmers to monitor soil conditions in real-time, helping them make data-driven decisions about irrigation and crop management.</p>

                <h3 class="text-green-600">Technology Stack</h3>
                <ul>
                    <li>Frontend: HTML, CSS, JavaScript with Tailwind CSS</li>
                    <li>Backend: Python with Flask</li>
                    <li>Database: Firebase Realtime Database</li>
                    <li>Hardware: ESP8266 with soil sensors</li>
                </ul>

                <h3 class="text-green-600">Team</h3>
                <p>Our team consists of developers passionate about using technology to solve real-world agricultural challenges.</p>

                <h3 class="text-green-600">Future Plans</h3>
                <p>We plan to expand the system with more sensor types and predictive analytics features.</p>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-white">
        <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
            <p class="mt-8 text-center text-base text-gray-400">
                &copy;2025 Byte for Bait. All rights reserved.
            </p>
        </div>
    </footer>
</body>
</html>