diff --git a/Hydroflux/.idea/vcs.xml b/Hydroflux/.idea/vcs.xml
new file mode 100644
index 0000000..6c0b863
--- /dev/null
+++ b/Hydroflux/.idea/vcs.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Hydroflux/REPLICATION_GUIDE.md b/Hydroflux/REPLICATION_GUIDE.md
new file mode 100644
index 0000000..7bb4b55
--- /dev/null
+++ b/Hydroflux/REPLICATION_GUIDE.md
@@ -0,0 +1,536 @@
+# Hydro Flux Dashboard - Complete Replication Guide
+
+## Overview
+A mobile-first health tracking dashboard called "Hydro Flux" that tracks water intake, steps, sleep, Strava integration, goals, and notes. Built with React, TypeScript, Tailwind CSS, and Motion (Framer Motion).
+
+## Design Specifications
+
+### Color Palette
+- Primary Blue: #60A5FA (blue-400)
+- Secondary Blue: #3B82F6 (blue-500)
+- Light Blue: #DBEAFE (blue-50)
+- Orange (Strava): #EA580C (orange-600)
+- Gray Background: Linear gradient from gray-100 to gray-200
+- White: #FFFFFF
+- Text Primary: #1F2937 (gray-800)
+- Text Secondary: #6B7280 (gray-500)
+
+### Layout
+- Mobile-first design (max-width: 28rem / 448px)
+- Rounded container with 3rem border radius
+- White background with shadow-2xl
+- Padding: 1.5rem (6 units)
+- Component spacing: 1rem gap (4 units)
+
+### Typography
+- Headers: font-bold
+- Body: font-medium
+- Small text: text-sm, text-xs
+
+## Dependencies Required
+
+```json
+{
+ "recharts": "2.15.2",
+ "motion": "12.23.24",
+ "lucide-react": "0.487.0"
+}
+```
+
+Import Motion using: `import { motion } from 'motion/react'`
+
+## File Structure
+
+```
+/src/app/
+ ├── App.tsx
+ └── components/
+ ├── Header.tsx
+ ├── WaterTracker.tsx
+ ├── StepsTracker.tsx
+ ├── StravaIntegration.tsx
+ ├── SleepTracker.tsx
+ ├── Goals.tsx
+ └── Notes.tsx
+```
+
+## Complete Component Code
+
+### 1. /src/app/App.tsx
+
+```tsx
+import { useState, useEffect } from 'react';
+import { Header } from './components/Header';
+import { WaterTracker } from './components/WaterTracker';
+import { StepsTracker } from './components/StepsTracker';
+import { StravaIntegration } from './components/StravaIntegration';
+import { SleepTracker } from './components/SleepTracker';
+import { Goals } from './components/Goals';
+import { Notes } from './components/Notes';
+
+function App() {
+ const [waterAmount, setWaterAmount] = useState(1.2);
+ const [currentDate, setCurrentDate] = useState('');
+ const [currentTime, setCurrentTime] = useState('');
+ const [note, setNote] = useState('Feeling hydrated today. Remember to add those gym sessions!');
+ const [goals, setGoals] = useState([
+ { id: '1', text: 'Drink 3L of water', completed: true },
+ { id: '2', text: 'Walk 10K steps', completed: false },
+ { id: '3', text: 'Sleep 8 hours', completed: false },
+ ]);
+
+ // Sleep data for the chart
+ const sleepData = [
+ { value: 30 }, { value: 35 }, { value: 25 }, { value: 40 },
+ { value: 55 }, { value: 45 }, { value: 60 }, { value: 75 },
+ { value: 70 }, { value: 80 }, { value: 65 }, { value: 55 },
+ { value: 50 }, { value: 45 }, { value: 40 },
+ ];
+
+ useEffect(() => {
+ const updateDateTime = () => {
+ const now = new Date();
+ const dateStr = now.toLocaleDateString('en-US', {
+ weekday: 'long',
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric'
+ });
+ const timeStr = now.toLocaleTimeString('en-US', {
+ hour: 'numeric',
+ minute: '2-digit',
+ hour12: true
+ }) + ' AEDT';
+ setCurrentDate(dateStr);
+ setCurrentTime(timeStr);
+ };
+
+ updateDateTime();
+ const interval = setInterval(updateDateTime, 1000);
+ return () => clearInterval(interval);
+ }, []);
+
+ const handleAddWater = () => {
+ setWaterAmount((prev) => Math.min(prev + 0.25, 3.0));
+ };
+
+ const handleToggleGoal = (id: string) => {
+ setGoals((prev) =>
+ prev.map((goal) =>
+ goal.id === id ? { ...goal, completed: !goal.completed } : goal
+ )
+ );
+ };
+
+ return (
+
+
+ {/* Subtle background decoration */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Hydro Flux
+
{currentDate}
+
{currentTime}
+
+
+
+
+
+ {streakDays} Days
+
+
+
+ {/* Water wave */}
+
+ {/* Wave effect */}
+
+
+
+ {/* Add button */}
+
+
+ {/* Amount display */}
+
+
+ {currentAmount.toFixed(1)}L / {targetAmount.toFixed(1)}L
+
+
+
+
Steps Tracker
+
+
+
+
+ {steps.toLocaleString()}
+ steps
+
+
+
+
+
Strava Integration
+
+
+ S
+
+
{distance}km Run
+
Last Sync: {lastSync}
+
+
+
Sleep Tracker
+
+
+
+
+
+
+
+
+
+
+ {hours}h {minutes}m
+
+ {sleepType}
+
+
+
Goals
+
+ {goals.map((goal) => (
+
+ ))}
+
+
+
Notes
+
+
+
+
+
+
+
+