Hugging Face's logo

Spaces:
IceKhoffi
/
ChickSense
Sleeping

App Files Community
IceKhoffi commited on
Commit
46134fe
·
verified ·
1 Parent(s): 250c89d

Update static/landingpage.html

Browse files
Files changed (1) hide show
  1. static/landingpage.html +204 -204
static/landingpage.html CHANGED
@@ -1,205 +1,205 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>ChickSense - AI-Powered Poultry Health Monitoring</title>
7
- <link rel="icon" href="assets/logo-lp.png" type="image/png">
8
- <script src="https://cdn.tailwindcss.com"></script>
9
- <link rel="preconnect" href="https://fonts.googleapis.com">
10
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
12
- <style>
13
- body {
14
- font-family: 'Inter', sans-serif;
15
- background-color: #f8fafc; /* slate-50 */
16
- }
17
- .gradient-text {
18
- background: linear-gradient(to right, #ff6d4d, #5a9762);
19
- -webkit-background-clip: text;
20
- -webkit-text-fill-color: transparent;
21
- }
22
- /* Custom colors for easier use */
23
- .bg-primary { background-color: #ff6d4d; }
24
- .hover\:bg-primary-dark:hover { background-color: #e65a3e; }
25
- .text-primary { color: #ff6d4d; }
26
- .border-primary { border-color: #ff6d4d; }
27
- .bg-secondary { background-color: #5a9762; }
28
- .text-secondary { color: #5a9762; }
29
- .bg-secondary-light { background-color: #f0fdf4; }
30
- </style>
31
- </head>
32
- <body class="text-slate-800">
33
-
34
- <!-- Navbar -->
35
- <nav class="bg-white/80 backdrop-blur-lg sticky top-0 z-50 border-b border-slate-200">
36
- <div class="container mx-auto px-6 py-4 flex justify-between items-center">
37
- <!-- Logo and Brand Name Only -->
38
- <div class="flex items-center gap-3">
39
- <img src="assets/logo-.jpeg" alt="ChickSense Logo" class="h-8 w-8 rounded-full">
40
- <h1 class="text-xl font-bold text-slate-900">ChickSense</h1>
41
- </div>
42
- </div>
43
- </nav>
44
-
45
- <!-- Hero Section -->
46
- <header class="py-20 md:py-32 bg-white">
47
- <div class="container mx-auto px-6 text-center">
48
- <h2 class="text-4xl md:text-6xl font-extrabold mb-4 text-slate-900 leading-tight">
49
- Poultry Health, <span class="gradient-text">Proactively Monitored</span>
50
- </h2>
51
- <p class="text-lg md:text-xl text-slate-600 max-w-3xl mx-auto mb-8">
52
- ChickSense is an AI-powered smart monitoring system that turns farm data into actionable insights. Detect diseases earlier, reduce losses, and boost the efficiency of your poultry operation.
53
- </p>
54
- <div class="flex justify-center items-center gap-4 flex-wrap">
55
- <a href="https://huggingface.co/spaces/IceKhoffi/ChickSense" target="_blank" class="bg-primary text-white font-bold py-3 px-8 rounded-lg hover:bg-primary-dark transition-transform transform hover:scale-105 shadow-lg">
56
- View Live Demo
57
- </a>
58
- <!-- Add a placeholder '#' for the pitch deck link -->
59
- <a href="https://drive.google.com/drive/folders/1UlH42OvVEpaswubZb7gvsdjjnYv5jRRE?usp=sharing" class="bg-white text-primary border-2 border-primary font-bold py-3 px-8 rounded-lg hover:bg-orange-50 transition-transform transform hover:scale-105">
60
- View Pitch Deck
61
- </a>
62
- </div>
63
- </div>
64
- </header>
65
-
66
- <!-- Dashboard Screenshot Teaser -->
67
- <section class="py-16">
68
- <div class="container mx-auto px-6">
69
- <div class="text-center mb-12">
70
- <h3 class="text-3xl font-bold">Your Centralized Monitoring Hub</h3>
71
- <p class="text-slate-500 mt-2">All critical information from multiple barns on one intuitive screen.</p>
72
- </div>
73
- <div class="bg-white p-4 rounded-xl shadow-2xl border border-slate-200">
74
- <img src="assets/preview-dashboard-lp.jpg" alt="Screenshot of the ChickSense Dashboard" class="rounded-lg w-full" onerror="this.onerror=null;this.src='https://placehold.co/1200x675/e2e8f0/64748b?text=Dashboard+Preview';">
75
- </div>
76
- </div>
77
- </section>
78
-
79
- <!-- Problem Section -->
80
- <section class="py-16 bg-white">
81
- <div class="container mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
82
- <div>
83
- <h3 class="text-3xl font-bold mb-4">A Vital Industry Under Constant Threat</h3>
84
- <p class="text-slate-600 mb-6">Indonesia's poultry industry contributes over <strong>Rp 184.7 Trillion</strong> to the GDP, yet it constantly faces massive losses from endemic diseases like Newcastle Disease (ND) and Chronic Respiratory Disease (CRD), which are notoriously difficult to detect manually.</p>
85
- <div class="space-y-4">
86
- <div class="flex items-center gap-4">
87
- <div class="bg-red-100 text-red-700 p-2 rounded-lg">
88
- <!-- The SVG icon has been changed to an exclamation mark -->
89
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
90
- <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
91
- </svg>
92
- </div>
93
- <div>
94
- <h4 class="font-semibold">Financial Loss Risk</h4>
95
- <p class="text-slate-500 text-sm">ND outbreaks can lead to mortality rates of up to 100%.</p>
96
- </div>
97
- </div>
98
-
99
- <div class="flex items-center gap-4">
100
- <div class="bg-yellow-100 text-yellow-700 p-2 rounded-lg">
101
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
102
- </div>
103
- <div>
104
- <h4 class="font-semibold">Slow Manual Detection</h4>
105
- <p class="text-slate-500 text-sm">Early-stage disease symptoms are nearly invisible to the human eye.</p>
106
- </div>
107
- </div>
108
- </div>
109
- </div>
110
- <div class="text-center">
111
- <img src="assets/illustration-lp.png" alt="Illustration of a farmer" class="rounded-lg mx-auto max-w-sm w-full">
112
- </div>
113
- </div>
114
- </section>
115
-
116
- <!-- Features Section -->
117
- <section id="features" class="py-16">
118
- <div class="container mx-auto px-6">
119
- <div class="text-center mb-12">
120
- <h3 class="text-3xl font-bold">An Intelligent Solution for Modern Farming</h3>
121
- <p class="text-slate-500 mt-2">ChickSense turns data into action through four key pillars.</p>
122
- </div>
123
- <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
124
- <!-- Feature 1 -->
125
- <div class="bg-white p-6 rounded-lg shadow-md border border-slate-200">
126
- <div class="bg-secondary-light text-secondary p-3 rounded-full inline-block mb-4">
127
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
128
- </div>
129
- <h4 class="font-bold text-lg mb-2">Computer Vision</h4>
130
- <p class="text-slate-600 text-sm">Analyzes poultry behavior 24/7 via CCTV to detect inactivity and abnormal clustering.</p>
131
- </div>
132
- <!-- Feature 2 -->
133
- <div class="bg-white p-6 rounded-lg shadow-md border border-slate-200">
134
- <div class="bg-secondary-light text-secondary p-3 rounded-full inline-block mb-4">
135
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.636 5.636a9 9 0 0112.728 0M8.464 15.536a5 5 0 010-7.072" /></svg>
136
- </div>
137
- <h4 class="font-bold text-lg mb-2">Audio Analysis</h4>
138
- <p class="text-slate-600 text-sm">Detects abnormal vocalizations like coughing or distress calls, strong indicators of respiratory illness.</p>
139
- </div>
140
- <!-- Feature 3 -->
141
- <div class="bg-white p-6 rounded-lg shadow-md border border-slate-200">
142
- <div class="bg-secondary-light text-secondary p-3 rounded-full inline-block mb-4">
143
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
144
- </div>
145
- <h4 class="font-bold text-lg mb-2">Centralized Dashboard</h4>
146
- <p class="text-slate-600 text-sm">Presents all critical data in a single, easy-to-understand interface, accessible from anywhere.</p>
147
- </div>
148
- <!-- Feature 4 -->
149
- <div class="bg-white p-6 rounded-lg shadow-md border border-slate-200">
150
- <div class="bg-secondary-light text-secondary p-3 rounded-full inline-block mb-4">
151
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
152
- </div>
153
- <h4 class="font-bold text-lg mb-2">Instant Alerts</h4>
154
- <p class="text-slate-600 text-sm">Sends automatic notifications via Telegram when the system detects anomalies, enabling rapid response.</p>
155
- </div>
156
- </div>
157
- </div>
158
- </section>
159
-
160
- <!-- Footer CTA -->
161
- <footer class="bg-white">
162
- <!-- Call to Action Section -->
163
- <div class="container mx-auto px-6 py-16 text-center">
164
- <h3 class="text-3xl font-bold mb-4">Ready to Transform Your Farm?</h3>
165
- <p class="text-slate-600 max-w-xl mx-auto mb-8">See how ChickSense can give you complete control over your flock's health and protect your investment.</p>
166
- <a href="https://huggingface.co/spaces/IceKhoffi/ChickSense" target="_blank" class="bg-primary text-white font-bold py-3 px-8 rounded-lg hover:bg-primary-dark transition-transform transform hover:scale-105 shadow-lg">
167
- Try the Interactive Demo
168
- </a>
169
- </div>
170
-
171
- <!-- Bottom Footer with Credits (Centered) -->
172
- <div class="border-t border-slate-200 py-6">
173
- <div class="container mx-auto px-6 flex flex-col items-center gap-4">
174
-
175
- <!-- Creator Info -->
176
- <div class="text-center">
177
- <p class="text-slate-600 text-base font-medium">&copy; 2025 ChickSense. All rights reserved.</p>
178
- <p class="text-slate-400 text-xs mt-1">A project by Gabriella Clairine & Imerson Krysthio</p>
179
- </div>
180
-
181
- <!-- Social Links -->
182
- <div class="flex items-center gap-6 mt-2">
183
- <!-- Gabriella Clairine's LinkedIn -->
184
- <a href="https://www.linkedin.com/in/gabriellaclairine/" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 text-slate-500 hover:text-primary transition-colors">
185
- <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
186
- <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
187
- </svg>
188
- <span class="text-sm font-medium">Gabriella Clairine</span>
189
- </a>
190
-
191
- <!-- Imerson Krysthio's LinkedIn -->
192
- <a href="https://www.linkedin.com/in/imerson-krysthio/" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 text-slate-500 hover:text-primary transition-colors">
193
- <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
194
- <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
195
- </svg>
196
- <span class="text-sm font-medium">Imerson Krysthio</span>
197
- </a>
198
- </div>
199
- </div>
200
- </div>
201
- </footer>
202
-
203
-
204
- </body>
205
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ChickSense - AI-Powered Poultry Health Monitoring</title>
7
+ <link rel="icon" href="assets/logo-lp.png" type="image/png">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
12
+ <style>
13
+ body {
14
+ font-family: 'Inter', sans-serif;
15
+ background-color: #f8fafc; /* slate-50 */
16
+ }
17
+ .gradient-text {
18
+ background: linear-gradient(to right, #ff6d4d, #5a9762);
19
+ -webkit-background-clip: text;
20
+ -webkit-text-fill-color: transparent;
21
+ }
22
+ /* Custom colors for easier use */
23
+ .bg-primary { background-color: #ff6d4d; }
24
+ .hover\:bg-primary-dark:hover { background-color: #e65a3e; }
25
+ .text-primary { color: #ff6d4d; }
26
+ .border-primary { border-color: #ff6d4d; }
27
+ .bg-secondary { background-color: #5a9762; }
28
+ .text-secondary { color: #5a9762; }
29
+ .bg-secondary-light { background-color: #f0fdf4; }
30
+ </style>
31
+ </head>
32
+ <body class="text-slate-800">
33
+
34
+ <!-- Navbar -->
35
+ <nav class="bg-white/80 backdrop-blur-lg sticky top-0 z-50 border-b border-slate-200">
36
+ <div class="container mx-auto px-6 py-4 flex justify-between items-center">
37
+ <!-- Logo and Brand Name Only -->
38
+ <div class="flex items-center gap-3">
39
+ <img src="assets/logo-.jpeg" alt="ChickSense Logo" class="h-8 w-8 rounded-full">
40
+ <h1 class="text-xl font-bold text-slate-900">ChickSense</h1>
41
+ </div>
42
+ </div>
43
+ </nav>
44
+
45
+ <!-- Hero Section -->
46
+ <header class="py-20 md:py-32 bg-white">
47
+ <div class="container mx-auto px-6 text-center">
48
+ <h2 class="text-4xl md:text-6xl font-extrabold mb-4 text-slate-900 leading-tight">
49
+ Poultry Health, <span class="gradient-text">Proactively Monitored</span>
50
+ </h2>
51
+ <p class="text-lg md:text-xl text-slate-600 max-w-3xl mx-auto mb-8">
52
+ ChickSense is an AI-powered smart monitoring system that turns farm data into actionable insights. Detect diseases earlier, reduce losses, and boost the efficiency of your poultry operation.
53
+ </p>
54
+ <div class="flex justify-center items-center gap-4 flex-wrap">
55
+ <a href="https://IceKhoffi-ChickSense.hf.space/app" target="_blank" class="bg-primary text-white font-bold py-3 px-8 rounded-lg hover:bg-primary-dark transition-transform transform hover:scale-105 shadow-lg">
56
+ View Live Demo
57
+ </a>
58
+ <!-- Add a placeholder '#' for the pitch deck link -->
59
+ <a href="https://drive.google.com/drive/folders/1UlH42OvVEpaswubZb7gvsdjjnYv5jRRE?usp=sharing" class="bg-white text-primary border-2 border-primary font-bold py-3 px-8 rounded-lg hover:bg-orange-50 transition-transform transform hover:scale-105">
60
+ View Pitch Deck
61
+ </a>
62
+ </div>
63
+ </div>
64
+ </header>
65
+
66
+ <!-- Dashboard Screenshot Teaser -->
67
+ <section class="py-16">
68
+ <div class="container mx-auto px-6">
69
+ <div class="text-center mb-12">
70
+ <h3 class="text-3xl font-bold">Your Centralized Monitoring Hub</h3>
71
+ <p class="text-slate-500 mt-2">All critical information from multiple barns on one intuitive screen.</p>
72
+ </div>
73
+ <div class="bg-white p-4 rounded-xl shadow-2xl border border-slate-200">
74
+ <img src="assets/preview-dashboard-lp.jpg" alt="Screenshot of the ChickSense Dashboard" class="rounded-lg w-full" onerror="this.onerror=null;this.src='https://placehold.co/1200x675/e2e8f0/64748b?text=Dashboard+Preview';">
75
+ </div>
76
+ </div>
77
+ </section>
78
+
79
+ <!-- Problem Section -->
80
+ <section class="py-16 bg-white">
81
+ <div class="container mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
82
+ <div>
83
+ <h3 class="text-3xl font-bold mb-4">A Vital Industry Under Constant Threat</h3>
84
+ <p class="text-slate-600 mb-6">Indonesia's poultry industry contributes over <strong>Rp 184.7 Trillion</strong> to the GDP, yet it constantly faces massive losses from endemic diseases like Newcastle Disease (ND) and Chronic Respiratory Disease (CRD), which are notoriously difficult to detect manually.</p>
85
+ <div class="space-y-4">
86
+ <div class="flex items-center gap-4">
87
+ <div class="bg-red-100 text-red-700 p-2 rounded-lg">
88
+ <!-- The SVG icon has been changed to an exclamation mark -->
89
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
90
+ <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
91
+ </svg>
92
+ </div>
93
+ <div>
94
+ <h4 class="font-semibold">Financial Loss Risk</h4>
95
+ <p class="text-slate-500 text-sm">ND outbreaks can lead to mortality rates of up to 100%.</p>
96
+ </div>
97
+ </div>
98
+
99
+ <div class="flex items-center gap-4">
100
+ <div class="bg-yellow-100 text-yellow-700 p-2 rounded-lg">
101
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
102
+ </div>
103
+ <div>
104
+ <h4 class="font-semibold">Slow Manual Detection</h4>
105
+ <p class="text-slate-500 text-sm">Early-stage disease symptoms are nearly invisible to the human eye.</p>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ <div class="text-center">
111
+ <img src="assets/illustration-lp.png" alt="Illustration of a farmer" class="rounded-lg mx-auto max-w-sm w-full">
112
+ </div>
113
+ </div>
114
+ </section>
115
+
116
+ <!-- Features Section -->
117
+ <section id="features" class="py-16">
118
+ <div class="container mx-auto px-6">
119
+ <div class="text-center mb-12">
120
+ <h3 class="text-3xl font-bold">An Intelligent Solution for Modern Farming</h3>
121
+ <p class="text-slate-500 mt-2">ChickSense turns data into action through four key pillars.</p>
122
+ </div>
123
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
124
+ <!-- Feature 1 -->
125
+ <div class="bg-white p-6 rounded-lg shadow-md border border-slate-200">
126
+ <div class="bg-secondary-light text-secondary p-3 rounded-full inline-block mb-4">
127
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
128
+ </div>
129
+ <h4 class="font-bold text-lg mb-2">Computer Vision</h4>
130
+ <p class="text-slate-600 text-sm">Analyzes poultry behavior 24/7 via CCTV to detect inactivity and abnormal clustering.</p>
131
+ </div>
132
+ <!-- Feature 2 -->
133
+ <div class="bg-white p-6 rounded-lg shadow-md border border-slate-200">
134
+ <div class="bg-secondary-light text-secondary p-3 rounded-full inline-block mb-4">
135
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.636 5.636a9 9 0 0112.728 0M8.464 15.536a5 5 0 010-7.072" /></svg>
136
+ </div>
137
+ <h4 class="font-bold text-lg mb-2">Audio Analysis</h4>
138
+ <p class="text-slate-600 text-sm">Detects abnormal vocalizations like coughing or distress calls, strong indicators of respiratory illness.</p>
139
+ </div>
140
+ <!-- Feature 3 -->
141
+ <div class="bg-white p-6 rounded-lg shadow-md border border-slate-200">
142
+ <div class="bg-secondary-light text-secondary p-3 rounded-full inline-block mb-4">
143
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
144
+ </div>
145
+ <h4 class="font-bold text-lg mb-2">Centralized Dashboard</h4>
146
+ <p class="text-slate-600 text-sm">Presents all critical data in a single, easy-to-understand interface, accessible from anywhere.</p>
147
+ </div>
148
+ <!-- Feature 4 -->
149
+ <div class="bg-white p-6 rounded-lg shadow-md border border-slate-200">
150
+ <div class="bg-secondary-light text-secondary p-3 rounded-full inline-block mb-4">
151
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
152
+ </div>
153
+ <h4 class="font-bold text-lg mb-2">Instant Alerts</h4>
154
+ <p class="text-slate-600 text-sm">Sends automatic notifications via Telegram when the system detects anomalies, enabling rapid response.</p>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </section>
159
+
160
+ <!-- Footer CTA -->
161
+ <footer class="bg-white">
162
+ <!-- Call to Action Section -->
163
+ <div class="container mx-auto px-6 py-16 text-center">
164
+ <h3 class="text-3xl font-bold mb-4">Ready to Transform Your Farm?</h3>
165
+ <p class="text-slate-600 max-w-xl mx-auto mb-8">See how ChickSense can give you complete control over your flock's health and protect your investment.</p>
166
+ <a href="https://IceKhoffi-ChickSense.hf.space/app" target="_blank" class="bg-primary text-white font-bold py-3 px-8 rounded-lg hover:bg-primary-dark transition-transform transform hover:scale-105 shadow-lg">
167
+ Try the Interactive Demo
168
+ </a>
169
+ </div>
170
+
171
+ <!-- Bottom Footer with Credits (Centered) -->
172
+ <div class="border-t border-slate-200 py-6">
173
+ <div class="container mx-auto px-6 flex flex-col items-center gap-4">
174
+
175
+ <!-- Creator Info -->
176
+ <div class="text-center">
177
+ <p class="text-slate-600 text-base font-medium">&copy; 2025 ChickSense. All rights reserved.</p>
178
+ <p class="text-slate-400 text-xs mt-1">A project by Gabriella Clairine & Imerson Krysthio</p>
179
+ </div>
180
+
181
+ <!-- Social Links -->
182
+ <div class="flex items-center gap-6 mt-2">
183
+ <!-- Gabriella Clairine's LinkedIn -->
184
+ <a href="https://www.linkedin.com/in/gabriellaclairine/" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 text-slate-500 hover:text-primary transition-colors">
185
+ <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
186
+ <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
187
+ </svg>
188
+ <span class="text-sm font-medium">Gabriella Clairine</span>
189
+ </a>
190
+
191
+ <!-- Imerson Krysthio's LinkedIn -->
192
+ <a href="https://www.linkedin.com/in/imerson-krysthio/" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 text-slate-500 hover:text-primary transition-colors">
193
+ <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
194
+ <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
195
+ </svg>
196
+ <span class="text-sm font-medium">Imerson Krysthio</span>
197
+ </a>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </footer>
202
+
203
+
204
+ </body>
205
  </html>