返回代码库

MindCare 心理健康应用

4.0
en健康与健身心理健康AI助手在线治疗

提示语

🟩 1. Splash Screen
Logo + Tagline
“MindCare – feel better live better”

Loading animation.

🟦 2. Onboarding Slides (3 screens, swipeable)
Slide 1:

“Take control of your mental well-being.”
Illustration: Calm user meditating.

Slide 2:

“Talk to experts, join support groups, or just vent in a safe space.”
Illustration: Therapist talking to client.

Slide 3:

“Private. Secure. In Arabic. Anytime, anywhere.”
CTA: "Get Started"

🟩 3. Sign Up / Log In Screen
Options:
✅ Sign up with email
✅ Continue with Google
✅ Already have an account? Log in

🟦 4. User Profile Setup
Choose:
▪ Gender
▪ Age range
▪ Mental health goals (ex: anxiety, sleep, stress relief)
▪ Preferred therapy mode: Text / Video / Home Visit
▪ Select Language: (Arabic / French / English)

🟩 5. Home Dashboard
Navigation bar (bottom):
🧠 AI Helper | 🧍 Therapist | 🤝 Group | 📚 Content | 👤 Profile

Main sections:
▪ "Talk to your AI Supporter"
▪ "Upcoming session with Dr. Yasmine"
▪ "New content for you today"
▪ "Join a live support room"

🟦 6. AI Helper (Smart Assistant)
Chat interface with your 24/7 AI support

Prompts:
“I feel anxious.”
“I want a breathing exercise.”
“What does a panic attack feel like?”

Options:
▪ Start mental scan
▪ Request a coping technique
▪ Schedule a session with therapist

🟩 7. Book a Therapy Session
List of verified therapists (with specialties)

Filters: gender, availability, language

Book:
▪ Video session
▪ Audio call
▪ In-home visit (if city allows)

Payment page
▪ Use credits or card
▪ Apply promo code

🟦 8. Group Support Rooms
Live & scheduled themed sessions:
▪ “Anxiety Warriors”
▪ “Sleep & Calm Circle”
▪ “Divorce & Heartbreak Support”

Features:
▪ Chat & mic on/off
▪ Moderated by psychologists
▪ Anonymous option

🟩 9. Interactive Exercises
Daily recommended tasks:
▪ Mood journaling
▪ Guided breathing
▪ CBT reflections
▪ Positive affirmation builder

Progress bar and badges for streaks

🟦 10. Mental Health Library
Categories:
▪ Anxiety
▪ Depression
▪ Mindfulness
▪ Relationships
▪ Burnout

Format:
▪ Short videos
▪ Podcasts
▪ Articles (Arabic dialect & MSA)

🟩 11. Notifications & Reminders
“Your therapist appointment starts in 30 minutes.”

“Time to check in with your mood.”

“A new article on work stress is available.”

🟦 12. Profile & Settings
Edit profile

Session history

Privacy settings

Subscription management

Language & theme

🟩 13. Emergency Help
Red button: “Need urgent help?”
▪ Quick self-soothing techniques
▪ Call emergency number
▪ Crisis lines by country


i want all this details in the app with some photos

生成结果

import React, { useState, useEffect } from 'react';
import './App.css';

const App = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 3000);
  }, []);

  return (
    <div className='App'>
      {loading ? (
        <div className='splash-screen'>
          <img src='https://placehold.co/150X150' alt='MindCare Logo' className='logo' />
          <h1 className='tagline'>MindCare – feel better live better</h1>
          <div className='loading-animation'></div>
        </div>
      ) : (
        <div className='onboarding'>
          <div className='slide'>
            <img src='https://placehold.co/300X200' alt='Calm user meditating' className='illustration' />
            <h2>Take control of your mental well-being.</h2>
          </div>
          <div className='slide'>
            <img src='https://placehold.co/300X200' alt='Therapist talking to client' className='illustration' />
            <h2>Talk to experts, join support groups, or just vent in a safe space.</h2>
          </div>
          <div className='slide'>
            <img src='https://placehold.co/300X200' alt='Private Secure Arabic' className='illustration' />
            <h2>Private. Secure. In Arabic. Anytime, anywhere.</h2>
            <button className='cta'>Get Started</button>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;

更多推荐

查看全部