0xmetaschool/
HealthScribeGPT
HealthScribeGPT is an innovative AI-powered health journaling platform that helps users track their wellness journey with intelligent insights. Built with Next.js and OpenAI's GPT-4, it provides personalized health analytics, mood tracking, and wellness recommendations. Perfect for individuals wanting to maintain detailed health records with AI assistance.
Readme
Source Codecomponents
src
app
analytics
dashboard
goals
nutrition
reports
globals.css
layout.js
metadata.js
page.js
components
context
lib
utils
utils
.gitignore
eslint.config.mjs
jsconfig.json
LICENSE
next.config.mjs
package.json
postcss.config.js
postcss.config.mjs
README.md
tailwind.config.js
tailwind.config.mjs
src
apppage.js
apppage.jspage.js
1'use client';
2import { useState } from 'react';
3import { useRouter } from 'next/navigation';
4import Image from 'next/image';
5import {
6 Heart, Brain, Activity, Sun, ChevronRight,
7 Sparkles, Star, ChevronLeft, ArrowRight,
8 Shield, Zap, LineChart, Users
9} from 'lucide-react';
10
11const features = [
12 {
13 icon: Heart,
14 text: 'Track daily health metrics and habits',
15 color: 'text-rose-500',
16 bgColor: 'bg-rose-50',
17 description: 'Monitor your vital signs, sleep patterns, and daily activities'
18 },
19 {
20 icon: Brain,
21 text: 'Get personalized AI health insights',
22 color: 'text-violet-500',
23 bgColor: 'bg-violet-50',
24 description: 'Receive tailored recommendations based on your health data'
25 },
26 {
27 icon: Activity,
28 text: 'Monitor progress with detailed analytics',
29 color: 'text-sky-500',
30 bgColor: 'bg-sky-50',
31 description: 'Visualize your health journey with comprehensive charts and trends'
32 },
33 {
34 icon: Sun,
35 text: 'Set and achieve meaningful health goals',
36 color: 'text-amber-500',
37 bgColor: 'bg-amber-50',
38 description: 'Create customized goals with AI-powered achievement strategies'
39 },
40];
41
42const testimonials = [
43 {
44 name: 'Sarah Johnson',
45 role: 'Fitness Enthusiast',
46 content: 'The AI recommendations have completely transformed my wellness routine. The personalized insights helped me achieve my fitness goals faster than ever!',
47 rating: 5,
48 avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=100&h=100&q=80'
49 },
50 {
51 name: 'Michael Chen',
52 role: 'Health Coach',
53 content: 'As a professional coach, I\'m impressed by the accuracy of the AI insights. It\'s like having a knowledgeable assistant that helps me provide better guidance to my clients.',
54 rating: 5,
55 avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=100&h=100&q=80'
56 },
57 {
58 name: 'Emma Davis',
59 role: 'Yoga Instructor',
60 content: 'The personalized recommendations and tracking features are exactly what I needed. It\'s helped me maintain consistency in my practice and better understand my body.',
61 rating: 5,
62 avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=100&h=100&q=80'
63 }
64];
65
66const benefits = [
67 {
68 icon: Shield,
69 title: 'Privacy-First Approach',
70 description: 'Your health data is encrypted and secure, giving you complete control over your information'
71 },
72 {
73 icon: Zap,
74 title: 'Real-Time Analysis',
75 description: 'Get instant insights and recommendations as you log your daily health metrics'
76 },
77 {
78 icon: LineChart,
79 title: 'Progress Tracking',
80 description: 'Visualize your health journey with beautiful charts and comprehensive analytics'
81 },
82 {
83 icon: Users,
84 title: 'Community Support',
85 description: 'Connect with like-minded individuals and share your wellness journey'
86 }
87];
88
89export default function Home() {
90 const [username, setUsername] = useState('');
91 const [isLoading, setIsLoading] = useState(false);
92 const [currentTestimonial, setCurrentTestimonial] = useState(0);
93 const router = useRouter();
94
95 const handleStartJourney = async () => {
96 if (username.trim()) {
97 setIsLoading(true);
98 await new Promise(resolve => setTimeout(resolve, 800));
99 router.push('/dashboard');
100 }
101 };
102
103 return (
104 <div className="min-h-screen bg-white">
105 <main>
106 {/* Hero Section */}
107 <section className="relative overflow-hidden pt-10 pb-20">
108 <div className="absolute inset-0 bg-gradient-to-b from-violet-50/40" />
109 <div className="absolute inset-y-0 right-0 w-1/2 bg-gradient-to-l from-violet-50/40" />
110
111 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
112 <div className="grid lg:grid-cols-2 gap-20 items-center">
113 {/* Left Column */}
114 <div className="space-y-12">
115 <div className="space-y-8">
116 <div className="inline-flex items-center space-x-2 px-4 py-2 bg-violet-50 rounded-full text-violet-600 text-sm font-medium border border-violet-100/50">
117 <Sparkles className="h-4 w-4" />
118 <span>AI-Powered Health Analytics</span>
119 </div>
120
121 <div>
122 <h1 className="text-5xl lg:text-6xl font-bold tracking-tight leading-tight">
123 Your Personal
124 <span className="block text-transparent bg-clip-text bg-gradient-to-r from-violet-600 to-indigo-600">
125 AI Health Journal
126 </span>
127 </h1>
128 <p className="mt-6 text-xl text-gray-600 leading-relaxed">
129 Transform your wellness journey with AI-powered insights and personalized recommendations. Track, analyze, and improve your health with intelligent guidance.
130 </p>
131 </div>
132 </div>
133
134 <div className="grid sm:grid-cols-2 gap-4">
135 {features.map((feature, index) => (
136 <div
137 key={index}
138 className="group relative p-6 bg-white rounded-2xl transition-all duration-300 hover:shadow-lg"
139 >
140 <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-gray-50 to-white -z-10" />
141 <div className="space-y-4">
142 <div className={`${feature.bgColor} ${feature.color} p-3 rounded-xl inline-flex group-hover:scale-110 transition-transform duration-300`}>
143 <feature.icon className="h-6 w-6" />
144 </div>
145 <div className="space-y-2">
146 <h3 className="font-semibold text-gray-900">{feature.text}</h3>
147 <p className="text-sm text-gray-600">{feature.description}</p>
148 </div>
149 </div>
150 </div>
151 ))}
152 </div>
153 </div>
154
155 {/* Right Column - Sign Up Form */}
156 <div className="relative">
157 <div className="absolute inset-0 bg-gradient-to-r from-violet-100/20 to-indigo-100/20 rounded-3xl transform rotate-3 scale-105" />
158 <div className="relative bg-white rounded-2xl shadow-xl overflow-hidden">
159 <div className="p-8 space-y-6">
160 <div className="text-center space-y-2">
161 <div className="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-violet-500 to-indigo-500 shadow-lg mb-3">
162 <Brain className="h-7 w-7 text-white" />
163 </div>
164 <h2 className="text-2xl font-bold">Start Your Journey</h2>
165 <p className="text-gray-600 text-sm">Join thousands improving their health with AI</p>
166 </div>
167
168 <div className="space-y-4">
169 <div>
170 <label className="block text-sm font-medium text-gray-700 mb-1.5">
171 Choose a username
172 </label>
173 <input
174 type="text"
175 value={username}
176 onChange={(e) => setUsername(e.target.value)}
177 className="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition-all"
178 placeholder="Enter your username"
179 />
180 </div>
181
182 <button
183 onClick={handleStartJourney}
184 disabled={isLoading}
185 className="group relative w-full py-2.5 bg-gradient-to-r from-violet-600 to-indigo-600 text-white rounded-xl font-medium transition-all overflow-hidden hover:shadow-lg disabled:opacity-70"
186 >
187 <span className={`flex items-center justify-center ${isLoading ? 'opacity-0' : 'opacity-100'}`}>
188 Get Started
189 <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
190 </span>
191 {isLoading && (
192 <div className="absolute inset-0 flex items-center justify-center">
193 <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
194 </div>
195 )}
196 </button>
197 </div>
198
199 <div className="grid grid-cols-3 gap-4 pt-4">
200 {[
201 { label: 'Active Users', value: '10k+' },
202 { label: 'Satisfaction', value: '98%' },
203 { label: 'AI Support', value: '24/7' }
204 ].map((stat, index) => (
205 <div key={index} className="text-center">
206 <div className="text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-violet-600 to-indigo-600">
207 {stat.value}
208 </div>
209 <div className="text-xs text-gray-500 mt-1">{stat.label}</div>
210 </div>
211 ))}
212 </div>
213 </div>
214 </div>
215 </div>
216 </div>
217 </div>
218 </section>
219
220 {/* Benefits Section */}
221 <section className="bg-gradient-to-b from-white to-gray-50">
222 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
223 <div className="text-center mb-16">
224 <h2 className="text-3xl font-bold">Why Choose Our Platform</h2>
225 <p className="text-gray-600 mt-3">Experience the future of personal health management</p>
226 </div>
227
228 <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
229 {benefits.map((benefit, index) => (
230 <div key={index} className="bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow">
231 <div className="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-violet-50 text-violet-600 mb-4">
232 <benefit.icon className="h-6 w-6" />
233 </div>
234 <h3 className="text-lg font-semibold mb-2">{benefit.title}</h3>
235 <p className="text-gray-600 text-sm">{benefit.description}</p>
236 </div>
237 ))}
238 </div>
239 </div>
240 </section>
241
242 {/* Testimonials */}
243 <section className="py-20 bg-white">
244 <div className="max-w-6xl mx-auto px-4">
245 <div className="text-center mb-16">
246 <h2 className="text-3xl font-bold">Loved by Health Enthusiasts</h2>
247 <p className="text-gray-600 mt-3">See what our users say about their experience</p>
248 </div>
249
250 <div className="relative max-w-3xl mx-auto">
251 <div className="overflow-hidden">
252 <div
253 className="flex transition-transform duration-500 ease-out"
254 style={{ transform: `translateX(-${currentTestimonial * 100}%)` }}
255 >
256 {testimonials.map((testimonial, index) => (
257 <div
258 key={index}
259 className="w-full flex-shrink-0 px-4"
260 style={{ minWidth: '100%' }}
261 >
262 <div className="bg-white p-8 rounded-2xl shadow-sm border border-gray-100">
263 <div className="flex items-center space-x-4 mb-6">
264 <Image
265 src={testimonial.avatar}
266 alt={testimonial.name}
267 width={48}
268 height={48}
269 className="rounded-full"
270 />
271 <div>
272 <h4 className="font-semibold text-gray-900">{testimonial.name}</h4>
273 <p className="text-sm text-gray-600">{testimonial.role}</p>
274 </div>
275 <div className="flex ml-auto">
276 {[...Array(testimonial.rating)].map((_, i) => (
277 <Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
278 ))}
279 </div>
280 </div>
281 <p className="text-gray-600 italic">{testimonial.content}</p>
282 </div>
283 </div>
284 ))}
285 </div>
286 </div>
287
288 <div className="flex justify-center mt-8 space-x-2">
289 {testimonials.map((_, index) => (
290 <button
291 key={index}
292 onClick={() => setCurrentTestimonial(index)}
293 className={`w-2 h-2 rounded-full transition-colors ${
294 currentTestimonial === index ? 'bg-violet-600' : 'bg-gray-200'
295 }`}
296 />
297 ))}
298 </div>
299 </div>
300 </div>
301 </section>
302
303 {/* CTA Section */}
304 <section className="py-20 bg-gradient-to-r from-violet-600 to-indigo-600">
305 <div className="max-w-4xl mx-auto px-4 text-center text-white">
306 <h2 className="text-3xl font-bold mb-6">Ready to Transform Your Health Journey?</h2>
307 <p className="text-lg text-violet-100 mb-8">
308 Join thousands of users who are already experiencing the power of AI-driven health insights
309 </p>
310 <button
311 onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
312 className="inline-flex items-center px-6 py-3 bg-white text-violet-600 rounded-xl font-medium hover:shadow-lg transition-shadow"
313 >
314 Get Started Now
315 <ArrowRight className="ml-2 h-5 w-5" />
316 </button>
317 </div>
318 </section>
319 </main>
320 </div>
321 );
322}Downloads
0
Version
1.0.0
License
MIT
Platform
OpenAI GPT-4
Contributors 2
Open in
Last updated 3 months ago
We are a open source platform and encourage community to contribute to these templates!