import { useState } from 'react'; import { Home, Gamepad, HeartPulse, Lightbulb, Users, Mail, User } from 'lucide-react'; import { Button } from "/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "/components/ui/card"; import { Input } from "/components/ui/input"; import { Textarea } from "/components/ui/textarea"; import { Label } from "/components/ui/label"; // Plant illustration component const PlantIllustration = ({ className }: { className?: string }) => (

); // Game components const BubblePopGame = () => { const [score, setScore] = useState(0); const popBubble = () => { setScore(score + 1); }; return (

{[...Array(5)].map((_, i) => ( ))}

Score: {score}

); }; const MoodQuizGame = () => { const [currentQuestion, setCurrentQuestion] = useState(0); const [result, setResult] = useState(''); const questions = [ { question: "How are you feeling today?", options: ["😊 Great", "🙂 Good", "😐 Okay", "😕 Not great", "😞 Poor"] }, { question: "How was your sleep?", options: ["😴 Excellent", "🛌 Good", "😪 Okay", "🥱 Not enough", "😫 Terrible"] } ]; const handleAnswer = () => { if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); } else { setResult("Thanks for sharing! Remember to take care of yourself 💙"); } }; return (

{result ? (

{result}

) : ( <>

{questions[currentQuestion].question}

{questions[currentQuestion].options.map((option, i) => ( ))}

)}

); }; const BreathingFlowerGame = () => { const [isBreathing, setIsBreathing] = useState(false); const [breathPhase, setBreathPhase] = useState('inhale'); const startBreathing = () => { setIsBreathing(true); const cycle = () => { setBreathPhase('inhale'); setTimeout(() => { setBreathPhase('hold'); setTimeout(() => { setBreathPhase('exhale'); setTimeout(() => { setBreathPhase('rest'); setTimeout(cycle, 1000); }, 4000); }, 2000); }, 4000); }; cycle(); }; return (

{isBreathing ? (breathPhase === 'inhale' ? 'Breathe In' : breathPhase === 'exhale' ? 'Breathe Out' : 'Hold') : 'Ready'}

{!isBreathing && ( )}

); }; const MemoryMatchGame = () => { const [cards, setCards] = useState([ { id: 1, emoji: '🌸', flipped: false, matched: false }, { id: 2, emoji: '🌿', flipped: false, matched: false }, { id: 3, emoji: '🌼', flipped: false, matched: false }, { id: 4, emoji: '🍃', flipped: false, matched: false }, { id: 5, emoji: '🌸', flipped: false, matched: false }, { id: 6, emoji: '🌿', flipped: false, matched: false }, { id: 7, emoji: '🌼', flipped: false, matched: false }, { id: 8, emoji: '🍃', flipped: false, matched: false }, ]); const [flippedCards, setFlippedCards] = useState([]); const handleCardClick = (id: number) => { if (flippedCards.length >= 2 || cards.find(card => card.id === id)?.flipped) return; const newCards = cards.map(card => card.id === id ? { ...card, flipped: true } : card ); setCards(newCards); setFlippedCards([...flippedCards, id]); if (flippedCards.length === 1) { const firstCard = cards.find(card => card.id === flippedCards[0]); const secondCard = cards.find(card => card.id === id); if (firstCard?.emoji === secondCard?.emoji) { setTimeout(() => { setCards(cards.map(card => card.id === flippedCards[0] || card.id === id ? { ...card, matched: true } : card )); setFlippedCards([]); }, 500); } else { setTimeout(() => { setCards(cards.map(card => card.id === flippedCards[0] || card.id === id ? { ...card, flipped: false } : card )); setFlippedCards([]); }, 1000); } } }; return (

{cards.map(card => ( ))}

); }; // Main App Component export default function MentalMattersWebsite() { const [currentPage, setCurrentPage] = useState('home'); const [isLoggedIn, setIsLoggedIn] = useState(false); const [loginForm, setLoginForm] = useState({ email: '', password: '' }); const [contactForm, setContactForm] = useState({ name: '', email: '', message: '' }); const handleLogin = (e: React.FormEvent) => { e.preventDefault(); // Simple validation if (loginForm.email && loginForm.password) { setIsLoggedIn(true); } }; const handleContactSubmit = (e: React.FormEvent) => { e.preventDefault(); alert('Thank you for your message! We will get back to you soon.'); setContactForm({ name: '', email: '', message: '' }); }; const renderPage = () => { switch (currentPage) { case 'home': return (

Welcome to Mental Matters A safe space for teens to nurture their mental wellness

Explore our collection of calming games and resources designed to help you manage stress, understand your emotions, and practice mindfulness.

Bubble Pop Pop bubbles to release stress Mood Quiz Check in with your feelings Breathing Flower Practice calming breathing Memory Match Exercise your memory

); case 'games': return (

Mindful Games Engaging games to help you relax and build emotional skills Mind Runner Dodge stress obstacles and collect calm power-ups

Runner Game Placeholder

Zen Rhythm Tap to the beat of calming music

Rhythm Game Placeholder

Calm Craft Grow your peaceful garden

Plant Game Placeholder

Mood Quest Choose your own emotional adventure

Story Game Placeholder

); case 'meditation': return (

Mindful Breathing Take a moment to breathe and center yourself

Breathe with me

Guided Breathing Instructions

1. Find a comfortable seated position
2. Close your eyes or soften your gaze
3. Inhale deeply through your nose for 4 seconds
4. Hold your breath for 2 seconds
5. Exhale slowly through your mouth for 6 seconds
6. Repeat for 5-10 cycles

); case 'tips': return (

Mental Wellness Tips Simple strategies for better mental health 💤 Sleep Well

• Aim for 8-10 hours of sleep
• Keep a consistent sleep schedule
• Avoid screens 1 hour before bed
• Create a relaxing bedtime routine

🍏 Eat Healthy

• Eat regular, balanced meals
• Stay hydrated with water
• Limit caffeine and sugar
• Include fruits and vegetables

🏃‍♀️ Stay Active

• Get at least 30 minutes of exercise daily
• Try yoga or stretching
• Take short movement breaks
• Find activities you enjoy

🧘‍♀️ Practice Mindfulness

• Try 5-minute meditation sessions
• Practice deep breathing
• Notice your thoughts without judgment
• Be present in the moment

); case 'about': return (

About Mental Matters Our mission to support teen mental wellness

Our Purpose

Mental Matters was created to provide teens with accessible, engaging tools to support their mental health and emotional well-being. We believe that mental wellness should be approachable, fun, and available to everyone.

Our Team

Alex

Founder & Developer

Jamie

Designer

Taylor

Mental Health Advisor

); case 'contact': return (

Get in Touch

Have questions, suggestions, or feedback? Reach out to our team and we'll get back to you as soon as possible.

hello@mental-matters.com

Social Media

@mental_matters

Send us a message

Your Name setContactForm({...contactForm, name: e.target.value})} className="border-pink-200" />

Email Address setContactForm({...contactForm, email: e.target.value})} className="border-pink-200" />

Message

setContactForm({...contactForm, message: e.target.value})}
                          rows={4}
                          className="border-pink-200"
                        />
                      </div>
                      
                      <Button type="submit" className="bg-pink-500 hover:bg-pink-600 w-full">
                        Send Message
                      </Button>
                    </form>
                  </CardContent>
                </Card>
              </CardContent>
            </Card>
          </div>
        );
      
      case 'login':
        return (
          <div className="flex items-center justify-center min-h-[60vh]">
            <Card className="w-full max-w-md border-blue-200">
              <CardHeader>
                <CardTitle className="text-2xl text-center text-blue-600">Welcome Back</CardTitle>
                <CardDescription className="text-center">
                  Sign in to save your progress and access all features
                </CardDescription>
              </CardHeader>
              <CardContent>
                <form onSubmit={handleLogin} className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="email">Email</Label>
                    <Input
                      id="email"
                      type="email"
                      value={loginForm.email}
                      onChange={(e) => setLoginForm({...loginForm, email: e.target.value})}
                      placeholder="your@email.com"
                    />
                  </div>
                  
                  <div className="space-y-2">
                    <Label htmlFor="password">Password</Label>
                    <Input
                      id="password"
                      type="password"
                      value={loginForm.password}
                      onChange={(e) => setLoginForm({...loginForm, password: e.target.value})}
                      placeholder="••••••••"
                    />
                  </div>
                  
                  <Button type="submit" className="w-full bg-blue-500 hover:bg-blue-600">
                    Sign In
                  </Button>
                  
                  <div className="text-center text-sm text-muted-foreground">
                    Don't have an account?{' '}
                    <button 
                      type="button" 
                      className="text-blue-500 hover:underline"
                      onClick={() => alert('Sign up feature coming soon!')}
                    >
                      Create one
                    </button>
                  </div>
                </form>
              </CardContent>
            </Card>
          </div>
        );
      
      default:
        return <div>Page not found</div>;
    }
  };

return (
    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-purple-50">
      {/* Decorative plant illustrations */}
      <PlantIllustration className="top-10 left-10 rotate-12" />
      <PlantIllustration className="bottom-10 right-10 -rotate-12" />
      <PlantIllustration className="top-1/3 right-20 rotate-45" />
      <PlantIllustration className="bottom-1/4 left-20 -rotate-45" />
      
      {/* Navigation */}
      <nav className="bg-white bg-opacity-80 backdrop-blur-sm shadow-sm sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center">
              <span className="text-xl font-bold text-blue-600">Mental Matters</span>
            </div>
            
            <div className="hidden md:block">
              <div className="flex items-center space-x-4">
                <Button
                  variant={currentPage === 'home' ? 'default' : 'ghost'}
                  onClick={() => setCurrentPage('home')}
                  className="flex items-center gap-1"
                >
                  <Home className="h-4 w-4" />
                  <span>Home</span>
                </Button>
                
                <Button
                  variant={currentPage === 'games' ? 'default' : 'ghost'}
                  onClick={() => setCurrentPage('games')}
                  className="flex items-center gap-1"
                >
                  <Gamepad className="h-4 w-4" />
                  <span>Games</span>
                </Button>
                
                <Button
                  variant={currentPage === 'meditation' ? 'default' : 'ghost'}
                  onClick={() => setCurrentPage('meditation')}
                  className="flex items-center gap-1"
                >
                  <HeartPulse className="h-4 w-4" />
                  <span>Meditation</span>
                </Button>
                
                <Button
                  variant={currentPage === 'tips' ? 'default' : 'ghost'}
                  onClick={() => setCurrentPage('tips')}
                  className="flex items-center gap-1"
                >
                  <Lightbulb className="h-4 w-4" />
                  <span>Tips</span>
                </Button>
                
                <Button
                  variant={currentPage === 'about' ? 'default' : 'ghost'}
                  onClick={() => setCurrentPage('about')}
                  className="flex items-center gap-1"
                >
                  <Users className="h-4 w-4" />
                  <span>About</span>
                </Button>
                
                <Button
                  variant={currentPage === 'contact' ? 'default' : 'ghost'}
                  onClick={() => setCurrentPage('contact')}
                  className="flex items-center gap-1"
                >
                  <Mail className="h-4 w-4" />
                  <span>Contact</span>
                </Button>
              </div>
            </div>
            
            <div className="flex items-center">
              {isLoggedIn ? (
                <Button variant="ghost" className="flex items-center gap-1">
                  <User className="h-4 w-4" />
                  <span>Profile</span>
                </Button>
              ) : (
                <Button 
                  variant="outline" 
                  onClick={() => setCurrentPage('login')}
                  className="flex items-center gap-1"
                >
                  <User className="h-4 w-4" />
                  <span>Sign In</span>
                </Button>
              )}
            </div>
          </div>
        </div>
      </nav>
      
      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {renderPage()}
      </main>
      
      {/* Footer */}
      <footer className="bg-white bg-opacity-80 backdrop-blur-sm border-t border-gray-200 mt-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="flex items-center space-x-2 mb-4 md:mb-0">
              <span className="text-lg font-bold text-blue-600">Mental Matters</span>
              <span className="text-sm text-gray-500">© 2023 All rights reserved</span>
            </div>
            
            <div className="flex space-x-6">
              <button className="text-gray-500 hover:text-blue-600">Privacy Policy</button>
              <button className="text-gray-500 hover:text-blue-600">Terms of Service</button>
              <button 
                className="text-gray-500 hover:text-blue-600"
                onClick={() => setCurrentPage('contact')}
              >
                Contact Us
              </button>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}</article></body></html>