[V0_FILE]typescriptreact:file="app/components/sign-in-modal.tsx" import { motion } from "framer-motion" import { X } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" export default function SignInModal({ onClose, onSignIn }) { const handleSubmit = (e) => { e.preventDefault() // Here you would typically handle authentication onSignIn() } return (

Sign In

Don't have an account?{" "} Sign up

) } [V0_FILE]typescriptreact:file="app/components/home-view.tsx" "use client" import { motion } from "framer-motion" import { Scale, Camera, BarChart2, User } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { useState } from "react" import HealthForm from "./health-form" export default function HomeView({ setActiveView, isSignedIn, onSignInClick }) { const [showHealthForm, setShowHealthForm] = useState(false) return (

Posture Fix

Your personal posture companion

{isSignedIn ? ( ) : ( )}

setShowHealthForm(true)} >

Track Your Posture

Update your posture metrics

setActiveView("yoga")}>

Posture Analysis

Get feedback on your posture

setActiveView("progress")} >

View Progress

Check your posture improvement

{showHealthForm && setShowHealthForm(false)} />} {isSignedIn && (

Quick Stats

Posture Score

7.5/10

Exercises Done

Improvement

+12%

)} ) } [V0_FILE]typescriptreact:file="app/components/yoga-pose-view.tsx" import { motion } from "framer-motion" import { Camera } from "lucide-react" import { Button } from "@/components/ui/button" export default function YogaPoseView() { return (

Posture Analysis

Our AI-powered posture analysis feature is coming soon! You'll be able to upload photos or videos of your posture and receive instant feedback to improve your form and alignment.

) } [V0_FILE]typescriptreact:file="app/components/bottom-nav.tsx" import { Home, Activity, Camera, User, Settings } from "lucide-react" export default function BottomNav({ activeView, setActiveView }) { const navItems = [ { id: "home", icon: Home, label: "Home" }, { id: "progress", icon: Activity, label: "Progress" }, { id: "yoga", icon: Camera, label: "Analyze" }, { id: "profile", icon: User, label: "Profile" }, { id: "settings", icon: Settings, label: "Settings" }, ] return ( ) } [V0_FILE]typescriptreact:file="app/components/welcome-modal.tsx" import { motion } from "framer-motion" import { Activity, Camera, BarChart2 } from "lucide-react" import { Button } from "@/components/ui/button" export default function WelcomeModal({ onClose }) { return (

Welcome to Posture Fix!

Track Your Posture

Log your posture metrics and get personalized recommendations

Posture Analysis

Get AI-powered feedback on your posture (Coming Soon)

Track Progress

Monitor your posture improvement over time

) } [V0_FILE]typescriptreact:file="app/components/progress-view.tsx" import { motion } from "framer-motion" import { Card, CardContent } from "@/components/ui/card" import { BarChart, Calendar, TrendingUp, Activity } from "lucide-react" export default function ProgressView() { return (

Your Progress

Posture Score Tracking

Initial Score

5.5/10

Current Score

7.5/10

Goal Score

9/10

Your posture score has improved by 2 points!

Exercise Statistics

Exercises Completed

Total Minutes

480

Avg. Session Duration

15 min

Consistency Streak

7 days

Recent Activity

Neck Stretches 10 min
Shoulder Rolls 5 min
Posture Check 3 times
Back Strengthening 15 min

Areas of Improvement

Neck Alignment +15%
Shoulder Position +10%
Lower Back Support +5%
Overall Posture +12%

) } [V0_FILE]typescriptreact:file="app/components/profile-view.tsx" import { motion } from "framer-motion" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Trophy, Star, Clock, Edit } from "lucide-react" export default function ProfileView() { return (

John Doe

Posture Enthusiast

Personal Information

Email: john.doe@example.com

Age: 32

Height: 180 cm

Weight: 75 kg

Exercises Completed

7.5/10

Current Posture Score

Days Active

Achievements Unlocked

Recent Achievements

7-Day Streak Master
Posture Perfect (Score 7+)
Exercise Explorer (10+ Completed)

) } [V0_FILE]typescriptreact:file="app/components/settings-view.tsx" import { motion } from "framer-motion" import { Bell, Moon, Globe, Lock, Smartphone, HelpCircle } from "lucide-react" import { Switch } from "@/components/ui/switch" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function SettingsView() { return (

Settings

Notifications

Get posture reminders

Dark Mode

Toggle dark theme

Language

Choose your language

Privacy

Manage your data

View

Device Sync

Sync with other devices

Help & Support

Get assistance

Contact

) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import { AnimatePresence } from "framer-motion" import WelcomeModal from "./components/welcome-modal" import SignInModal from "./components/sign-in-modal" import BottomNav from "./components/bottom-nav" import HomeView from "./components/home-view" import ProgressView from "./components/progress-view" import YogaPoseView from "./components/yoga-pose-view" import ProfileView from "./components/profile-view" import SettingsView from "./components/settings-view" export default function App() { const [showWelcome, setShowWelcome] = useState(true) const [showSignIn, setShowSignIn] = useState(false) const [activeView, setActiveView] = useState("home") const [isSignedIn, setIsSignedIn] = useState(false) const handleSignIn = () => { setIsSignedIn(true) setShowSignIn(false) } return (

{showWelcome && setShowWelcome(false)} />} {showSignIn && setShowSignIn(false)} onSignIn={handleSignIn} />}

{activeView === "home" && ( setShowSignIn(true)} /> )} {activeView === "progress" && } {activeView === "yoga" && } {activeView === "profile" && } {activeView === "settings" && }

) } [V0_FILE]typescriptreact:file="app/components/health-form.tsx" isQuickEdit="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useState } from "react" export default function HealthForm({ onClose }) { const [height, setHeight] = useState("") const [weight, setWeight] = useState("") const [postureScore, setPostureScore] = useState("") const handleSubmit = (e) => { e.preventDefault() // Handle form submission here onClose() } return (

Update Health Metrics

) } \ "

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This