[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState, useEffect } from "react" import { Home, Play, BarChart3, User, Clock, Heart, Brain, Moon } from "lucide-react" export default function MeditationApp() { const [activeTab, setActiveTab] = useState("home") const [currentSession, setCurrentSession] = useState(null) useEffect(() => { // Handle browser chrome on mobile const handleResize = () => { const vh = window.innerHeight * 0.01 document.documentElement.style.setProperty("--vh", `${vh}px`) } handleResize() window.addEventListener("resize", handleResize) // Scroll to hide address bar on mobile setTimeout(() => { window.scrollTo(0, 1) }, 100) return () => window.removeEventListener("resize", handleResize) }, []) const renderContent = () => { switch (activeTab) { case "home": return case "meditate": return case "progress": return case "profile": return default: return } } return (

{renderContent()}

) } function HomeScreen({ onStartSession }) { const categories = [ { id: "sleep", name: "Sleep", icon: Moon, color: "from-indigo-500 to-purple-600", sessions: 12 }, { id: "focus", name: "Focus", icon: Brain, color: "from-blue-500 to-cyan-600", sessions: 8 }, { id: "anxiety", name: "Anxiety", icon: Heart, color: "from-green-500 to-teal-600", sessions: 15 }, { id: "mindfulness", name: "Mindfulness", icon: Clock, color: "from-orange-500 to-red-600", sessions: 20 }, ] return (

Good Morning

How are you feeling today?

Today's Recommendation

Morning Focus

Start your day with clarity

10 minutes

{currentSession?.name || "Peaceful Mind"}

Find your inner calm

{formatTime(timeLeft)}

remaining

) } function ProgressScreen() { const stats = [ { label: "Total Sessions", value: "47", change: "+3 this week" }, { label: "Minutes Meditated", value: "1,240", change: "+120 this week" }, { label: "Current Streak", value: "12 days", change: "Personal best!" }, { label: "Favorite Category", value: "Sleep", change: "18 sessions" }, ] return (

Your Progress

Keep up the great work!

{stats.map((stat, index) => (

{stat.label}

{stat.value}

{stat.change}

))}

Weekly Activity

{[20, 35, 45, 30, 50, 40, 60].map((height, index) => (

{["M", "T", "W", "T", "F", "S", "S"][index]}

))}

) } function ProfileScreen() { return (

Sarah Johnson

Meditation enthusiast

Notifications

Dark Mode

Download for Offline

Share with Friends

Help & Support

) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import "./globals.css" export const metadata: Metadata = { title: "Meditation App", description: "Find your inner peace with guided meditation", viewport: "width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover", themeColor: "#667eea", appleWebApp: { capable: true, statusBarStyle: "black-translucent", }, } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; /* Mobile-first responsive design */ @media screen and (max-width: 768px) { .meditation-app { /* Ensure full viewport usage on mobile */ height: 100vh; height: 100dvh; height: -webkit-fill-available; } } /* Smooth scrolling for better UX */ html { scroll-behavior: smooth; } /* Custom scrollbar for webkit browsers */ ::-webkit-scrollbar { width: 0px; background: transparent; } /* Prevent text selection on UI elements */ .nav-item, button { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Smooth transitions for all interactive elements */ * { transition: transform 0.2s ease, background-color 0.2s ease; } /* Active states for better touch feedback */ button:active, .nav-item:active { transform: scale(0.95); } /* Ensure proper touch targets (minimum 44px) */ .nav-item { min-height: 44px; min-width: 44px; }