├── COPY-PASTE-LIST.md
├── ai-avatar.png
├── constants.ts
├── globals.css
├── hero-ai.png
├── hero-ai2.png
└── hero-ai3.png


/COPY-PASTE-LIST.md:
--------------------------------------------------------------------------------
  1 | # GRID BACKGROUND
  2 | 
  3 | ```jsx
  4 | <div className="fixed inset-0 -z-1">
  5 |             <div className="absolute inset-0 bg-gradient-to-b from-background via-background to-background"></div>
  6 |             <div className="absolute inset-0 bg-[linear-gradient(var(--cyber-grid-color)_1px,transparent_1px),linear-gradient(90deg,var(--cyber-grid-color)_1px,transparent_1px)] bg-[size:20px_20px]"></div>
  7 |           </div>
  8 | ```
  9 | 
 10 | # SCAN LINES FOR HERO IMAGE
 11 | ```jsx
 12 |  <div className="absolute inset-0 bg-[linear-gradient(transparent_0%,transparent_calc(50%-1px),var(--cyber-glow-primary)_50%,transparent_calc(50%+1px),transparent_100%)] bg-[length:100%_8px] animate-scanline pointer-events-none" />
 13 | ```
 14 | 
 15 | 
 16 | 
 17 | 
 18 | 
 19 | # UserPrograms.tsx
 20 | 
 21 | ```tsx
 22 | import Link from "next/link";
 23 | import { Button } from "@/components/ui/button";
 24 | import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 25 | import {
 26 |   ChevronRight,
 27 |   Dumbbell,
 28 |   Sparkles,
 29 |   Users,
 30 |   Clock,
 31 |   AppleIcon,
 32 |   ShieldIcon,
 33 | } from "lucide-react";
 34 | import { USER_PROGRAMS } from "@/constants";
 35 | 
 36 | const UserPrograms = () => {
 37 |   return (
 38 |     <div className="w-full pb-24 pt-16 relative">
 39 |       <div className="container mx-auto max-w-6xl px-4">
 40 |         {/* HEADER- PROGRAM GALLERY */}
 41 |         <div className="bg-card/90 backdrop-blur-sm border border-border rounded-lg overflow-hidden mb-16">
 42 |           {/* HEADER BAR */}
 43 |           <div className="flex items-center justify-between px-5 py-3 border-b border-border bg-background/70">
 44 |             <div className="flex items-center gap-2">
 45 |               <div className="w-2.5 h-2.5 rounded-full bg-primary"></div>
 46 |               <span className="text-sm text-primary font-medium">Program Gallery</span>
 47 |             </div>
 48 |             <div className="text-sm text-muted-foreground">Featured Plans</div>
 49 |           </div>
 50 | 
 51 |           {/* HEADER CONTENT */}
 52 |           <div className="p-8 text-center">
 53 |             <h2 className="text-4xl md:text-5xl font-bold mb-6">
 54 |               <span className="text-foreground">AI-Generated </span>
 55 |               <span className="text-primary">Programs</span>
 56 |             </h2>
 57 | 
 58 |             <p className="text-lg text-muted-foreground max-w-xl mx-auto mb-10">
 59 |               Explore personalized fitness plans our AI assistant has created for other users
 60 |             </p>
 61 | 
 62 |             {/* STATS */}
 63 |             <div className="flex items-center justify-center gap-16 mt-10 font-mono">
 64 |               <div className="flex flex-col items-center">
 65 |                 <p className="text-3xl text-primary">500+</p>
 66 |                 <p className="text-sm text-muted-foreground uppercase tracking-wide mt-1">
 67 |                   PROGRAMS
 68 |                 </p>
 69 |               </div>
 70 |               <div className="w-px h-12 bg-border"></div>
 71 |               <div className="flex flex-col items-center">
 72 |                 <p className="text-3xl text-primary">3min</p>
 73 |                 <p className="text-sm text-muted-foreground uppercase tracking-wide mt-1">
 74 |                   CREATION TIME
 75 |                 </p>
 76 |               </div>
 77 |               <div className="w-px h-12 bg-border"></div>
 78 |               <div className="flex flex-col items-center">
 79 |                 <p className="text-3xl text-primary">100%</p>
 80 |                 <p className="text-sm text-muted-foreground uppercase tracking-wide mt-1">
 81 |                   PERSONALIZED
 82 |                 </p>
 83 |               </div>
 84 |             </div>
 85 |           </div>
 86 |         </div>
 87 | 
 88 |         {/* Program cards */}
 89 |         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
 90 |           {USER_PROGRAMS.map((program) => (
 91 |             <Card
 92 |               key={program.id}
 93 |               className="bg-card/90 backdrop-blur-sm border border-border hover:border-primary/50 transition-colors overflow-hidden"
 94 |             >
 95 |               {/* Card header with user info */}
 96 |               <div className="flex items-center justify-between px-4 py-2 border-b border-border bg-background/70">
 97 |                 <div className="flex items-center gap-2">
 98 |                   <div className="w-2 h-2 rounded-full bg-primary"></div>
 99 |                   <span className="text-sm text-primary">USER.{program.id}</span>
100 |                 </div>
101 |                 <div className="text-sm text-muted-foreground">
102 |                   {program.fitness_level.toUpperCase()}
103 |                 </div>
104 |               </div>
105 | 
106 |               <CardHeader className="pt-6 px-5">
107 |                 <div className="flex items-center gap-4 mb-4">
108 |                   <div className="h-16 w-16 rounded-full overflow-hidden border border-border">
109 |                     <img
110 |                       src={program.profilePic}
111 |                       alt={`${program.first_name}`}
112 |                       className="h-full w-full object-cover"
113 |                     />
114 |                   </div>
115 |                   <div>
116 |                     <CardTitle className="text-xl text-foreground">
117 |                       {program.first_name}
118 |                       <span className="text-primary">.exe</span>
119 |                     </CardTitle>
120 |                     <div className="text-sm text-muted-foreground flex items-center gap-2 mt-1">
121 |                       <Users className="h-4 w-4" />
122 |                       {program.age}y • {program.workout_days}d/week
123 |                     </div>
124 |                   </div>
125 |                 </div>
126 | 
127 |                 <div className="flex justify-between items-center gap-4">
128 |                   <div className="px-3 py-1 bg-primary/10 rounded border border-primary/20 text-sm text-primary flex items-center gap-2">
129 |                     <Sparkles className="h-4 w-4" />
130 |                     {program.fitness_goal}
131 |                   </div>
132 |                   <div className="text-sm text-muted-foreground flex items-center gap-2">
133 |                     <Clock className="h-4 w-4" />
134 |                     v3.5
135 |                   </div>
136 |                 </div>
137 |               </CardHeader>
138 | 
139 |               <CardContent className="px-5">
140 |                 {/* Program details */}
141 |                 <div className="space-y-5 pt-2">
142 |                   <div className="flex items-start gap-3">
143 |                     <div className="p-2 rounded-md bg-primary/10 text-primary mt-0.5">
144 |                       <Dumbbell className="h-5 w-5" />
145 |                     </div>
146 |                     <div className="flex-1">
147 |                       <div className="flex justify-between items-center">
148 |                         <h3 className="font-medium text-foreground">
149 |                           {program.workout_plan.title}
150 |                         </h3>
151 |                       </div>
152 |                       <p className="text-sm text-muted-foreground mt-1">
153 |                         {program.equipment_access}
154 |                       </p>
155 |                     </div>
156 |                   </div>
157 | 
158 |                   <div className="flex items-start gap-3">
159 |                     <div className="p-2 rounded-md bg-secondary/10 text-secondary mt-0.5">
160 |                       <AppleIcon className="h-5 w-5" />
161 |                     </div>
162 |                     <div className="flex-1">
163 |                       <div className="flex justify-between items-center">
164 |                         <h3 className="font-medium text-foreground">{program.diet_plan.title}</h3>
165 |                       </div>
166 |                       <p className="text-sm text-muted-foreground mt-1">
167 |                         System optimized nutrition
168 |                       </p>
169 |                     </div>
170 |                   </div>
171 | 
172 |                   <div className="flex items-start gap-3">
173 |                     <div className="p-2 rounded-md bg-primary/10 text-primary mt-0.5">
174 |                       <ShieldIcon className="h-5 w-5" />
175 |                     </div>
176 |                     <div className="flex-1">
177 |                       <div className="flex justify-between items-center">
178 |                         <h3 className="font-medium text-foreground">AI Safety Protocols</h3>
179 |                       </div>
180 |                       <p className="text-sm text-muted-foreground mt-1">
181 |                         Protection systems enabled
182 |                       </p>
183 |                     </div>
184 |                   </div>
185 |                 </div>
186 | 
187 |                 {/* Program description */}
188 |                 <div className="mt-5 pt-5 border-t border-border">
189 |                   <div className="text-sm text-muted-foreground">
190 |                     <span className="text-primary">&gt; </span>
191 |                     {program.workout_plan.description.substring(0, 120)}...
192 |                   </div>
193 |                 </div>
194 |               </CardContent>
195 | 
196 |               <CardFooter className="px-5 py-4 border-t border-border">
197 |                 <Link href={`/programs/${program.id}`} className="w-full">
198 |                   <Button className="w-full bg-primary text-primary-foreground hover:bg-primary/90">
199 |                     View Program Details
200 |                     <ChevronRight className="ml-2 h-4 w-4" />
201 |                   </Button>
202 |                 </Link>
203 |               </CardFooter>
204 |             </Card>
205 |           ))}
206 |         </div>
207 | 
208 |         {/* CTA section */}
209 |         <div className="mt-16 text-center">
210 |           <Link href="/generate-program">
211 |             <Button
212 |               size="lg"
213 |               className="bg-primary text-primary-foreground hover:bg-primary/90 px-8 py-6 text-lg"
214 |             >
215 |               Generate Your Program
216 |               <Sparkles className="ml-2 h-5 w-5" />
217 |             </Button>
218 |           </Link>
219 |           <p className="text-muted-foreground mt-4">
220 |             Join 500+ users with AI-customized fitness programs
221 |           </p>
222 |         </div>
223 |       </div>
224 |     </div>
225 |   );
226 | };
227 | 
228 | export default UserPrograms;
229 | ```
230 | 
231 | # Footer.tsx
232 | 
233 | ```tsx
234 | import { ZapIcon } from "lucide-react";
235 | import Link from "next/link";
236 | 
237 | const Footer = () => {
238 |   return (
239 |     <footer className="border-t border-border bg-background/80 backdrop-blur-sm">
240 |       {/* Top border glow */}
241 |       <div className="h-px w-full bg-gradient-to-r from-transparent via-primary/30 to-transparent"></div>
242 | 
243 |       <div className="container mx-auto px-4 py-8">
244 |         <div className="flex flex-col md:flex-row justify-between items-center gap-6">
245 |           {/* Logo and Copyright */}
246 |           <div className="flex flex-col items-center md:items-start gap-2">
247 |             <Link href="/" className="flex items-center gap-2">
248 |               <div className="p-1 bg-primary/10 rounded">
249 |                 <ZapIcon className="w-4 h-4 text-primary" />
250 |               </div>
251 |               <span className="text-xl font-bold font-mono">
252 |                 code<span className="text-primary">flex</span>.ai
253 |               </span>
254 |             </Link>
255 |             <p className="text-sm text-muted-foreground">
256 |               © {new Date().getFullYear()} codeflex.ai - All rights reserved
257 |             </p>
258 |           </div>
259 | 
260 |           {/* Links */}
261 |           <div className="grid grid-cols-2 md:grid-cols-3 gap-x-12 gap-y-2 text-sm">
262 |             <Link
263 |               href="/about"
264 |               className="text-muted-foreground hover:text-primary transition-colors"
265 |             >
266 |               About
267 |             </Link>
268 |             <Link
269 |               href="/terms"
270 |               className="text-muted-foreground hover:text-primary transition-colors"
271 |             >
272 |               Terms
273 |             </Link>
274 |             <Link
275 |               href="/privacy"
276 |               className="text-muted-foreground hover:text-primary transition-colors"
277 |             >
278 |               Privacy
279 |             </Link>
280 |             <Link
281 |               href="/contact"
282 |               className="text-muted-foreground hover:text-primary transition-colors"
283 |             >
284 |               Contact
285 |             </Link>
286 |             <Link
287 |               href="/blog"
288 |               className="text-muted-foreground hover:text-primary transition-colors"
289 |             >
290 |               Blog
291 |             </Link>
292 |             <Link
293 |               href="/help"
294 |               className="text-muted-foreground hover:text-primary transition-colors"
295 |             >
296 |               Help
297 |             </Link>
298 |           </div>
299 | 
300 |           {/* Status */}
301 |           <div className="flex items-center gap-2 px-3 py-2 border border-border rounded-md bg-background/50">
302 |             <div className="w-2 h-2 rounded-full bg-green-500"></div>
303 |             <span className="text-xs font-mono">SYSTEM OPERATIONAL</span>
304 |           </div>
305 |         </div>
306 |       </div>
307 |     </footer>
308 |   );
309 | };
310 | export default Footer;
311 | 
312 | ```
313 | 
314 | # Voice Wave Animation
315 | 
316 | ```tsx
317 |               <div
318 |                 className={`absolute inset-0 ${
319 |                   isSpeaking ? "opacity-30" : "opacity-0"
320 |                 } transition-opacity duration-300`}
321 |               >
322 |                 {/* Voice wave animation when speaking */}
323 |                 <div className="absolute left-0 right-0 top-1/2 -translate-y-1/2 flex justify-center items-center h-20">
324 |                   {[...Array(5)].map((_, i) => (
325 |                     <div
326 |                       key={i}
327 |                       className={`mx-1 h-16 w-1 bg-primary rounded-full ${
328 |                         isSpeaking ? "animate-sound-wave" : ""
329 |                       }`}
330 |                       style={{
331 |                         animationDelay: `${i * 0.1}s`,
332 |                         height: isSpeaking ? `${Math.random() * 50 + 20}%` : "5%",
333 |                       }}
334 |                     />
335 |                   ))}
336 |                 </div>
337 |               </div>
338 | ```
339 | # ARGS FOR createPlan MUTATION
340 | 
341 | ```ts
342 |   args: {
343 |     userId: v.string(),
344 |     name: v.string(),
345 |     workoutPlan: v.object({
346 |       schedule: v.array(v.string()),
347 |       exercises: v.array(
348 |         v.object({
349 |           day: v.string(),
350 |           routines: v.array(
351 |             v.object({
352 |               name: v.string(),
353 |               sets: v.number(),
354 |               reps: v.number(),
355 |             })
356 |           ),
357 |         })
358 |       ),
359 |     }),
360 |     dietPlan: v.object({
361 |       dailyCalories: v.number(),
362 |       meals: v.array(
363 |         v.object({
364 |           name: v.string(),
365 |           foods: v.array(v.string()),
366 |         })
367 |       ),
368 |     }),
369 |     isActive: v.boolean(),
370 |   }
371 | ```
372 | 
373 | # WORKOUT PROMPT FOR AI
374 | 
375 | ```ts
376 |       const workoutPrompt = `You are an experienced fitness coach creating a personalized workout plan based on:
377 |         Age: ${age}
378 |         Height: ${height}
379 |         Weight: ${weight}
380 |         Injuries or limitations: ${injuries}
381 |         Available days for workout: ${workout_days}
382 |         Fitness goal: ${fitness_goal}
383 |         Fitness level: ${fitness_level}
384 |         
385 |         As a professional coach:
386 |         - Consider muscle group splits to avoid overtraining the same muscles on consecutive days
387 |         - Design exercises that match the fitness level and account for any injuries
388 |         - Structure the workouts to specifically target the user's fitness goal
389 |         
390 |         CRITICAL SCHEMA INSTRUCTIONS:
391 |         - Your output MUST contain ONLY the fields specified below, NO ADDITIONAL FIELDS
392 |         - "sets" and "reps" MUST ALWAYS be NUMBERS, never strings
393 |         - For example: "sets": 3, "reps": 10
394 |         - Do NOT use text like "reps": "As many as possible" or "reps": "To failure"
395 |         - Instead use specific numbers like "reps": 12 or "reps": 15
396 |         - For cardio, use "sets": 1, "reps": 1 or another appropriate number
397 |         - NEVER include strings for numerical fields
398 |         - NEVER add extra fields not shown in the example below
399 |         
400 |         Return a JSON object with this EXACT structure:
401 |         {
402 |           "schedule": ["Monday", "Wednesday", "Friday"],
403 |           "exercises": [
404 |             {
405 |               "day": "Monday",
406 |               "routines": [
407 |                 {
408 |                   "name": "Exercise Name",
409 |                   "sets": 3,
410 |                   "reps": 10
411 |                 }
412 |               ]
413 |             }
414 |           ]
415 |         }
416 |         
417 |         DO NOT add any fields that are not in this example. Your response must be a valid JSON object with no additional text.`;
418 | ```
419 | 
420 | # DIET PROMPT FOR AI
421 | 
422 | ```ts
423 | const dietPrompt = `You are an experienced nutrition coach creating a personalized diet plan based on:
424 |         Age: ${age}
425 |         Height: ${height}
426 |         Weight: ${weight}
427 |         Fitness goal: ${fitness_goal}
428 |         Dietary restrictions: ${dietary_restrictions}
429 |         
430 |         As a professional nutrition coach:
431 |         - Calculate appropriate daily calorie intake based on the person's stats and goals
432 |         - Create a balanced meal plan with proper macronutrient distribution
433 |         - Include a variety of nutrient-dense foods while respecting dietary restrictions
434 |         - Consider meal timing around workouts for optimal performance and recovery
435 |         
436 |         CRITICAL SCHEMA INSTRUCTIONS:
437 |         - Your output MUST contain ONLY the fields specified below, NO ADDITIONAL FIELDS
438 |         - "dailyCalories" MUST be a NUMBER, not a string
439 |         - DO NOT add fields like "supplements", "macros", "notes", or ANYTHING else
440 |         - ONLY include the EXACT fields shown in the example below
441 |         - Each meal should include ONLY a "name" and "foods" array
442 | 
443 |         Return a JSON object with this EXACT structure and no other fields:
444 |         {
445 |           "dailyCalories": 2000,
446 |           "meals": [
447 |             {
448 |               "name": "Breakfast",
449 |               "foods": ["Oatmeal with berries", "Greek yogurt", "Black coffee"]
450 |             },
451 |             {
452 |               "name": "Lunch",
453 |               "foods": ["Grilled chicken salad", "Whole grain bread", "Water"]
454 |             }
455 |           ]
456 |         }
457 |         
458 |         DO NOT add any fields that are not in this example. Your response must be a valid JSON object with no additional text.`;
459 | ```
460 | 
461 | # Functions to Validate Data from AI
462 | 
463 | ```ts
464 | // validate and fix workout plan to ensure it has proper numeric types
465 | function validateWorkoutPlan(plan: any) {
466 |   const validatedPlan = {
467 |     schedule: plan.schedule,
468 |     exercises: plan.exercises.map((exercise: any) => ({
469 |       day: exercise.day,
470 |       routines: exercise.routines.map((routine: any) => ({
471 |         name: routine.name,
472 |         sets: typeof routine.sets === "number" ? routine.sets : parseInt(routine.sets) || 1,
473 |         reps: typeof routine.reps === "number" ? routine.reps : parseInt(routine.reps) || 10,
474 |       })),
475 |     })),
476 |   };
477 |   return validatedPlan;
478 | }
479 | 
480 | // validate diet plan to ensure it strictly follows schema
481 | function validateDietPlan(plan: any) {
482 |   // only keep the fields we want
483 |   const validatedPlan = {
484 |     dailyCalories: plan.dailyCalories,
485 |     meals: plan.meals.map((meal: any) => ({
486 |       name: meal.name,
487 |       foods: meal.foods,
488 |     })),
489 |   };
490 |   return validatedPlan;
491 | }
492 | ```
493 | 


--------------------------------------------------------------------------------
/ai-avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/burakorkmez/codeflex-assets/9f581b78f753caaf193dc3d26c001d69f2a7bd20/ai-avatar.png


--------------------------------------------------------------------------------
/constants.ts:
--------------------------------------------------------------------------------
  1 | export const USER_PROGRAMS = [
  2 |   {
  3 |     id: 1,
  4 |     first_name: "Sarah",
  5 |     profilePic: "https://randomuser.me/api/portraits/men/74.jpg",
  6 |     fitness_goal: "Weight Loss",
  7 |     height: "5'6\"",
  8 |     weight: "165 lbs",
  9 |     age: 34,
 10 |     workout_days: 4,
 11 |     injuries: "Lower back pain",
 12 |     fitness_level: "Beginner",
 13 |     equipment_access: "Home gym",
 14 |     dietary_restrictions: "Lactose intolerant",
 15 |     workout_plan: {
 16 |       title: "Beginner Weight Loss Program",
 17 |       weekly_schedule: [
 18 |         { day: "Monday", focus: "Full Body Cardio", duration: "30 min" },
 19 |         { day: "Wednesday", focus: "Core & Lower Body", duration: "30 min" },
 20 |         { day: "Friday", focus: "HIIT Training", duration: "25 min" },
 21 |         { day: "Saturday", focus: "Active Recovery", duration: "40 min" },
 22 |       ],
 23 |       description:
 24 |         "This program focuses on building a consistent exercise habit with joint-friendly movements that protect your lower back. The mix of cardio and strength training supports weight loss while preserving muscle mass.",
 25 |     },
 26 |     diet_plan: {
 27 |       title: "Balanced Nutrition Plan (Lactose-Free)",
 28 |       daily_calories: "1,600 calories",
 29 |       macros: { protein: "30%", carbs: "40%", fats: "30%" },
 30 |       meal_examples: [
 31 |         { meal: "Breakfast", example: "Oatmeal with almond milk, berries, and chia seeds" },
 32 |         { meal: "Lunch", example: "Grilled chicken salad with olive oil dressing" },
 33 |         { meal: "Dinner", example: "Baked salmon with quinoa and roasted vegetables" },
 34 |         { meal: "Snacks", example: "Apple with almond butter, dairy-free yogurt with nuts" },
 35 |       ],
 36 |       description:
 37 |         "This meal plan avoids dairy products while providing balanced nutrition to support weight loss goals. Focus is on whole foods with adequate protein to preserve muscle during weight loss.",
 38 |     },
 39 |   },
 40 |   {
 41 |     id: 2,
 42 |     first_name: "Michael",
 43 |     profilePic: "https://randomuser.me/api/portraits/men/75.jpg",
 44 |     fitness_goal: "Muscle Gain",
 45 |     height: "5'10\"",
 46 |     weight: "170 lbs",
 47 |     age: 28,
 48 |     workout_days: 5,
 49 |     injuries: "None",
 50 |     fitness_level: "Intermediate",
 51 |     equipment_access: "Full gym",
 52 |     dietary_restrictions: "None",
 53 |     workout_plan: {
 54 |       title: "Hypertrophy-Focused Muscle Building",
 55 |       weekly_schedule: [
 56 |         { day: "Monday", focus: "Chest & Triceps", duration: "45 min" },
 57 |         { day: "Tuesday", focus: "Back & Biceps", duration: "45 min" },
 58 |         { day: "Wednesday", focus: "Recovery/Cardio", duration: "30 min" },
 59 |         { day: "Thursday", focus: "Shoulders & Abs", duration: "45 min" },
 60 |         { day: "Friday", focus: "Legs", duration: "50 min" },
 61 |       ],
 62 |       description:
 63 |         "This program implements a traditional body-part split with emphasis on progressive overload. Each muscle group is trained with moderate volume and adequate recovery to maximize muscle growth.",
 64 |     },
 65 |     diet_plan: {
 66 |       title: "Muscle Building Nutrition Plan",
 67 |       daily_calories: "2,800 calories",
 68 |       macros: { protein: "30%", carbs: "50%", fats: "20%" },
 69 |       meal_examples: [
 70 |         { meal: "Breakfast", example: "Protein oatmeal with banana and whey protein" },
 71 |         { meal: "Lunch", example: "Chicken, rice, and vegetables with olive oil" },
 72 |         { meal: "Dinner", example: "Steak with sweet potato and green vegetables" },
 73 |         { meal: "Snacks", example: "Protein shake with fruit, Greek yogurt with honey" },
 74 |       ],
 75 |       description:
 76 |         "This high-protein, calorie-surplus diet supports muscle growth while minimizing fat gain. Carbohydrates are timed around workouts for optimal performance and recovery.",
 77 |     },
 78 |   },
 79 |   {
 80 |     id: 3,
 81 |     first_name: "Elena",
 82 |     profilePic: "https://randomuser.me/api/portraits/men/76.jpg",
 83 |     fitness_goal: "General Fitness",
 84 |     height: "5'4\"",
 85 |     weight: "130 lbs",
 86 |     age: 45,
 87 |     workout_days: 3,
 88 |     injuries: "Knee pain",
 89 |     fitness_level: "Intermediate",
 90 |     equipment_access: "Bodyweight only",
 91 |     dietary_restrictions: "Vegetarian",
 92 |     workout_plan: {
 93 |       title: "Functional Fitness Program",
 94 |       weekly_schedule: [
 95 |         { day: "Monday", focus: "Bodyweight Strength", duration: "40 min" },
 96 |         { day: "Wednesday", focus: "Mobility & Balance", duration: "35 min" },
 97 |         { day: "Saturday", focus: "Cardio & Core", duration: "40 min" },
 98 |       ],
 99 |       description:
100 |         "This program focuses on functional movement patterns that improve everyday performance while being gentle on the knees. Emphasis is on core strength, mobility, and cardiovascular health.",
101 |     },
102 |     diet_plan: {
103 |       title: "Balanced Vegetarian Nutrition",
104 |       daily_calories: "1,800 calories",
105 |       macros: { protein: "25%", carbs: "50%", fats: "25%" },
106 |       meal_examples: [
107 |         { meal: "Breakfast", example: "Tofu scramble with vegetables and whole grain toast" },
108 |         { meal: "Lunch", example: "Lentil soup with mixed green salad" },
109 |         { meal: "Dinner", example: "Chickpea curry with brown rice and vegetables" },
110 |         { meal: "Snacks", example: "Mixed nuts, hummus with vegetables, protein smoothie" },
111 |       ],
112 |       description:
113 |         "This vegetarian meal plan ensures adequate protein intake from plant sources. It focuses on whole foods and supports your active lifestyle while accommodating knee issues with anti-inflammatory food choices.",
114 |     },
115 |   },
116 | ];
117 | 


--------------------------------------------------------------------------------
/globals.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | @import "tw-animate-css";
  3 | 
  4 | @custom-variant dark (&:is(.dark *));
  5 | 
  6 | @theme inline {
  7 |   --color-background: var(--background);
  8 |   --color-foreground: var(--foreground);
  9 |   --font-sans: var(--font-geist-sans);
 10 |   --font-mono: var(--font-geist-mono);
 11 |   --color-sidebar-ring: var(--sidebar-ring);
 12 |   --color-sidebar-border: var(--sidebar-border);
 13 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 14 |   --color-sidebar-accent: var(--sidebar-accent);
 15 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 16 |   --color-sidebar-primary: var(--sidebar-primary);
 17 |   --color-sidebar-foreground: var(--sidebar-foreground);
 18 |   --color-sidebar: var(--sidebar);
 19 |   --color-chart-5: var(--chart-5);
 20 |   --color-chart-4: var(--chart-4);
 21 |   --color-chart-3: var(--chart-3);
 22 |   --color-chart-2: var(--chart-2);
 23 |   --color-chart-1: var(--chart-1);
 24 |   --color-ring: var(--ring);
 25 |   --color-input: var(--input);
 26 |   --color-border: var(--border);
 27 |   --color-destructive: var(--destructive);
 28 |   --color-accent-foreground: var(--accent-foreground);
 29 |   --color-accent: var(--accent);
 30 |   --color-muted-foreground: var(--muted-foreground);
 31 |   --color-muted: var(--muted);
 32 |   --color-secondary-foreground: var(--secondary-foreground);
 33 |   --color-secondary: var(--secondary);
 34 |   --color-primary-foreground: var(--primary-foreground);
 35 |   --color-primary: var(--primary);
 36 |   --color-popover-foreground: var(--popover-foreground);
 37 |   --color-popover: var(--popover);
 38 |   --color-card-foreground: var(--card-foreground);
 39 |   --color-card: var(--card);
 40 |   --radius-sm: calc(var(--radius) - 4px);
 41 |   --radius-md: calc(var(--radius) - 2px);
 42 |   --radius-lg: var(--radius);
 43 |   --radius-xl: calc(var(--radius) + 4px);
 44 | }
 45 | 
 46 | :root {
 47 |   /* Base Variables */
 48 |   --radius: 0.625rem;
 49 | 
 50 |   /* Cyberpunk Theme Colors */
 51 |   --cyber-black: #000000;
 52 |   --cyber-dark: #0a0c14;
 53 |   --cyber-blue-bright: #18cef2; 
 54 |   --cyber-blue: #1089bd; 
 55 |   --cyber-blue-dark: #0b4a7d; 
 56 |   --cyber-blue-glow: #38bdf8; 
 57 |   --cyber-accent: #0ff4;
 58 | 
 59 |   /* Background */
 60 |   --background: var(--cyber-dark);
 61 |   --foreground: #f2f2f2;
 62 | 
 63 |   /* Card and popover elements */
 64 |   --card: #111827;
 65 |   --card-foreground: #f2f2f2;
 66 |   --popover: #111827;
 67 |   --popover-foreground: #f2f2f2;
 68 | 
 69 |   /* Primary - Main blue */
 70 |   --primary: var(--cyber-blue-bright);
 71 |   --primary-foreground: var(--cyber-dark);
 72 | 
 73 |   /* Secondary - Darker blue */
 74 |   --secondary: var(--cyber-blue);
 75 |   --secondary-foreground: #ffffff;
 76 | 
 77 |   /* Accent - Light blue with glow */
 78 |   --accent: var(--cyber-blue-glow);
 79 |   --accent-foreground: var(--cyber-dark);
 80 | 
 81 |   /* Muted elements */
 82 |   --muted: #1e293b;
 83 |   --muted-foreground: #94a3b8;
 84 | 
 85 |   /* System colors */
 86 |   --destructive: #ef4444;
 87 |   --border: rgba(24, 206, 242, 0.2);
 88 |   --input: rgba(24, 206, 242, 0.2);
 89 |   --ring: var(--cyber-blue);
 90 | 
 91 |   /* Chart colors - cyberpunk theme */
 92 |   --chart-1: var(--cyber-blue-bright);
 93 |   --chart-2: #3b82f6;
 94 |   --chart-3: var(--cyber-blue);
 95 |   --chart-4: #06b6d4;
 96 |   --chart-5: #0284c7;
 97 | 
 98 |   /* Sidebar colors */
 99 |   --sidebar: var(--cyber-dark);
100 |   --sidebar-foreground: #f2f2f2;
101 |   --sidebar-primary: var(--cyber-blue-bright);
102 |   --sidebar-primary-foreground: var(--cyber-dark);
103 |   --sidebar-accent: var(--cyber-blue);
104 |   --sidebar-accent-foreground: #ffffff;
105 |   --sidebar-border: rgba(24, 206, 242, 0.2);
106 |   --sidebar-ring: var(--cyber-blue);
107 | 
108 |   /* Custom Cyberpunk UI Variables */
109 |   --cyber-grid-color: rgba(24, 206, 242, 0.05);
110 |   --cyber-glow-primary: rgba(24, 206, 242, 0.2);
111 |   --cyber-glow-strong: rgba(24, 206, 242, 0.5);
112 |   --cyber-line-color: rgba(24, 206, 242, 0.3);
113 |   --cyber-terminal-bg: rgba(0, 0, 0, 0.7);
114 |   --cyber-text-bright: #ffffff;
115 |   --cyber-text-muted: rgba(242, 242, 242, 0.7);
116 |   --cyber-text-dim: rgba(242, 242, 242, 0.5);
117 | }
118 | 
119 | .dark {
120 |   /* Background */
121 |   --background: var(--cyber-dark);
122 |   --foreground: #f2f2f2;
123 | 
124 |   /* Card and popover elements */
125 |   --card: #111827;
126 |   --card-foreground: #f2f2f2;
127 |   --popover: #111827;
128 |   --popover-foreground: #f2f2f2;
129 | 
130 |   /* Primary - Main blue */
131 |   --primary: var(--cyber-blue-bright);
132 |   --primary-foreground: var(--cyber-dark);
133 | 
134 |   /* Secondary - Darker blue */
135 |   --secondary: var(--cyber-blue);
136 |   --secondary-foreground: #ffffff;
137 | 
138 |   /* Accent - Light blue with glow */
139 |   --accent: var(--cyber-blue-glow);
140 |   --accent-foreground: var(--cyber-dark);
141 | 
142 |   /* Muted elements */
143 |   --muted: #1e293b;
144 |   --muted-foreground: #94a3b8;
145 | 
146 |   /* System colors */
147 |   --destructive: #ef4444;
148 |   --border: rgba(24, 206, 242, 0.2);
149 |   --input: rgba(24, 206, 242, 0.2);
150 |   --ring: var(--cyber-blue);
151 | 
152 |   /* Chart colors - cyberpunk theme */
153 |   --chart-1: var(--cyber-blue-bright);
154 |   --chart-2: #3b82f6;
155 |   --chart-3: var(--cyber-blue);
156 |   --chart-4: #06b6d4;
157 |   --chart-5: #0284c7;
158 | 
159 |   /* Sidebar colors */
160 |   --sidebar: var(--cyber-dark);
161 |   --sidebar-foreground: #f2f2f2;
162 |   --sidebar-primary: var(--cyber-blue-bright);
163 |   --sidebar-primary-foreground: var(--cyber-dark);
164 |   --sidebar-accent: var(--cyber-blue);
165 |   --sidebar-accent-foreground: #ffffff;
166 |   --sidebar-border: rgba(24, 206, 242, 0.2);
167 |   --sidebar-ring: var(--cyber-blue);
168 | }
169 | 
170 | @layer base {
171 |   * {
172 |     @apply border-border outline-ring/50;
173 |   }
174 |   body {
175 |     @apply bg-background text-foreground;
176 |   }
177 |   /* https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor */
178 |   button:not(:disabled),
179 |   [role="button"]:not(:disabled) {
180 |     cursor: pointer;
181 |   }
182 | }
183 | 
184 | @keyframes scanline {
185 |   0% {
186 |     background-position: 0 0;
187 |   }
188 |   100% {
189 |     background-position: 0 100%;
190 |   }
191 | }
192 | 
193 | @keyframes slow-spin {
194 |   from {
195 |     transform: rotate(0deg);
196 |   }
197 |   to {
198 |     transform: rotate(360deg);
199 |   }
200 | }
201 | 
202 | .animate-scanline {
203 |   animation: scanline 8s linear infinite;
204 | }
205 | 
206 | .animate-slow-spin {
207 |   animation: slow-spin 12s linear infinite;
208 | }
209 | 
210 | @keyframes sound-wave {
211 |   0% {
212 |     height: 10%;
213 |   }
214 |   50% {
215 |     height: 100%;
216 |   }
217 |   100% {
218 |     height: 10%;
219 |   }
220 | }
221 | 
222 | .animate-sound-wave {
223 |   animation: sound-wave 1.2s ease-in-out infinite;
224 | }
225 | 
226 | @keyframes fadeIn {
227 |   from {
228 |     opacity: 0;
229 |   }
230 |   to {
231 |     opacity: 1;
232 |   }
233 | }
234 | 
235 | .animate-fadeIn {
236 |   animation: fadeIn 0.5s ease-in-out forwards;
237 | }
238 | 


--------------------------------------------------------------------------------
/hero-ai.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/burakorkmez/codeflex-assets/9f581b78f753caaf193dc3d26c001d69f2a7bd20/hero-ai.png


--------------------------------------------------------------------------------
/hero-ai2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/burakorkmez/codeflex-assets/9f581b78f753caaf193dc3d26c001d69f2a7bd20/hero-ai2.png


--------------------------------------------------------------------------------
/hero-ai3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/burakorkmez/codeflex-assets/9f581b78f753caaf193dc3d26c001d69f2a7bd20/hero-ai3.png


--------------------------------------------------------------------------------