Sleep Tracker App UI

                                        import React from 'react';
import { 
  StyleSheet, 
  Text, 
  View, 
  TouchableOpacity, 
  SafeAreaView, 
  ScrollView, 
  StatusBar 
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { Ionicons } from '@expo/vector-icons';

export default function Home() {
  return (
    <SafeAreaView style={styles.container}>
      {/* Status Bar */}
      <StatusBar backgroundColor="#0F172A" barStyle="light-content" />

      {/* Scrollable Content */}
      <ScrollView showsVerticalScrollIndicator={false}>
        <View style={{ marginTop: 10 }}>
          {/* Home Title */}
          <Text style={styles.homeTitle}>Home</Text>

          {/* Sleep Tracker Card */}
          <LinearGradient colors={['#1E293B', '#27374D']} style={styles.sleepTrackerCard}>
            <View style={styles.cardHeader}>
              <Text style={styles.cardTitle}>Sleep Tracker</Text>
              <Ionicons name="settings-outline" size={24} color="#CBD5E1" />
            </View>

            {/* Sleep Summary */}
            <View style={styles.sleepSummary}>
              <View style={styles.summaryItem}>
                <Text style={styles.summaryValue}>7.2</Text>
                <Text style={styles.summaryLabel}>Avg Hours</Text>
              </View>
              <View style={styles.summaryItem}>
                <Text style={styles.summaryValue}>85%</Text>
                <Text style={styles.summaryLabel}>Quality</Text>
              </View>
              <View style={styles.summaryItem}>
                <Text style={styles.summaryValue}>11:23</Text>
                <Text style={styles.summaryLabel}>Avg Bedtime</Text>
              </View>
            </View>

            {/* Bar Graph */}
            <View style={styles.barGraph}>
              {['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day, index) => (
                <View key={index} style={styles.barContainer}>
                  <View style={[styles.bar, { height: Math.floor(Math.random() * 40) + 20 }]} />
                  <Text style={styles.barLabel}>{day}</Text>
                </View>
              ))}
            </View>
          </LinearGradient>

          {/* Tonight's Sleep Card */}
          <LinearGradient colors={['#1E293B', '#27374D']} style={styles.tonightSleepCard}>
            <Text style={styles.cardTitle}>Tonight's Sleep</Text>
            <View style={styles.tonightSleepInfo}>
              <View style={styles.recommendedTime}>
                <View style={styles.moonIcon}>
                  <Ionicons name="moon" size={24} color="#CBD5E1" />
                </View>
                <Text style={styles.recommendedText}>Recommended</Text>
                <Text style={styles.sleepTime}>11:30 PM - 7:30 AM</Text>
              </View>
              <Ionicons name="chevron-forward" size={20} color="#CBD5E1" />
            </View>
            <TouchableOpacity style={styles.startButton}>
              <Text style={styles.startButtonText}>Start Sleep Tracking</Text>
            </TouchableOpacity>
          </LinearGradient>

          {/* Sleep Tip Card */}
          <LinearGradient colors={['#1E293B', '#27374D']} style={styles.sleepTipCard}>
            <View style={styles.sleepTipHeader}>
              <Text style={styles.cardTitle}>Sleep Tip</Text>
              <Text style={styles.todayText}>Today</Text>
            </View>
            <Text style={styles.sleepTipText}>
              Try to maintain a consistent sleep schedule, even on weekends. This helps regulate your body's internal clock.
            </Text>
          </LinearGradient>

          {/* Additional Features */}
          {/* Sleep Goal */}
          <LinearGradient colors={['#1E293B', '#27374D']} style={styles.featureCard}>
            <Text style={styles.featureCardTitle}>Sleep Goal</Text>
            <View style={styles.goalContainer}>
              <Text style={styles.goalText}>8 Hours</Text>
              <Ionicons name="medal-outline" size={24} color="#6D28D9" />
            </View>
          </LinearGradient>

          {/* Last Night's Sleep Summary */}
          <LinearGradient colors={['#1E293B', '#27374D']} style={styles.featureCard}>
            <Text style={styles.featureCardTitle}>Last Night</Text>
            <View style={styles.lastNightSummary}>
              <View style={styles.lastNightItem}>
                <Text style={styles.lastNightValue}>7h 45m</Text>
                <Text style={styles.lastNightLabel}>Duration</Text>
              </View>
              <View style={styles.lastNightItem}>
                <Text style={styles.lastNightValue}>92%</Text>
                <Text style={styles.lastNightLabel}>Quality</Text>
              </View>
            </View>
          </LinearGradient>

          {/* Sleep Trends */}
          <TouchableOpacity style={styles.featureCard} onPress={() => console.log('View Sleep Trends')}>
            <Text style={styles.featureCardTitle}>Sleep Trends</Text>
            <Text style={styles.featureCardDescription}>See your sleep patterns over time.</Text>
            <Ionicons name="trending-up-outline" size={24} color="#0EA5E9" style={styles.featureCardIcon} />
          </TouchableOpacity>

          {/* Wake-Up Alarm */}
          <TouchableOpacity style={styles.featureCard} onPress={() => console.log('Set Wake-Up Alarm')}>
            <Text style={styles.featureCardTitle}>Wake-Up Alarm</Text>
            <Text style={styles.featureCardDescription}>Set a smart alarm.</Text>
            <Ionicons name="alarm-outline" size={24} color="#FACC15" style={styles.featureCardIcon} />
          </TouchableOpacity>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0F172A',
    paddingHorizontal: 20,
  },
  homeTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#CBD5E1',
    marginBottom: 20,
    textAlign: 'center',
  },
  sleepTrackerCard: {
    borderRadius: 15,
    padding: 20,
    marginBottom: 20,
  },
  cardHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 15,
  },
  cardTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#CBD5E1',
  },
  sleepSummary: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginBottom: 20,
  },
  summaryItem: {
    alignItems: 'center',
  },
  summaryValue: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#CBD5E1',
  },
  summaryLabel: {
    fontSize: 12,
    color: '#94A3B8',
  },
  barGraph: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'flex-end',
    paddingHorizontal: 10,
    marginBottom: 15,
  },
  barContainer: {
    alignItems: 'center',
  },
  bar: {
    backgroundColor: '#64748B',
    width: 18,
    borderRadius: 5,
  },
  barLabel: {
    fontSize: 10,
    color: '#94A3B8',
    marginTop: 5,
  },
  tonightSleepCard: {
    borderRadius: 15,
    padding: 20,
    marginBottom: 20,
  },
  tonightSleepInfo: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginVertical: 20,
  },
  recommendedTime: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  moonIcon: {
    backgroundColor: '#334155',
    borderRadius: 15,
    padding: 8,
    marginRight: 10,
  },
  recommendedText: {
    fontSize: 12,
    color: '#94A3B8',
    marginRight: 5,
  },
  sleepTime: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#CBD5E1',
  },
  startButton: {
    backgroundColor: '#6D28D9',
    borderRadius: 10,
    paddingVertical: 15,
    alignItems: 'center',
  },
  startButtonText: {
    color: '#F0F9FF',
    fontWeight: 'bold',
    fontSize: 16,
  },
  sleepTipCard: {
    borderRadius: 15,
    padding: 20,
    marginBottom: 20,
  },
  sleepTipHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 10,
  },
  todayText: {
    fontSize: 14,
    color: '#94A3B8',
  },
  sleepTipText: {
    color: '#CBD5E1',
    fontSize: 14,
    lineHeight: 22,
  },
  featureCard: {
    borderRadius: 15,
    padding: 20,
    marginBottom: 15,
  },
  featureCardTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#CBD5E1',
    marginBottom: 10,
  },
  featureCardDescription: {
    color: '#94A3B8',
    fontSize: 14,
  },
  featureCardIcon: {
    position: 'absolute',
    top: 15,
    right: 15,
  },
  goalContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  goalText: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#CBD5E1',
  },
  lastNightSummary: {
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  lastNightItem: {
    alignItems: 'center',
  },
  lastNightValue: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#CBD5E1',
  },
  lastNightLabel: {
    fontSize: 12,
    color: '#94A3B8',
  },
});