DeepSeek ArtifactsDeepSeek Artifacts

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;

更多推荐

查看全部

Build ChatGPT-Like Web Interface

4.0
Software Development
en
AI Integration
Full-Stack Development
ChatGPT
UI Design
Backend Orchestration
You are a professional full-stack developer AI with deep experience in building AI-integrated UIs, backend orchestration, and vector memory systems. I want you to build a **web-based ChatGPT-like int...

Flutter 产品列表页

4.0
编程开发
en
Flutter
Dart
产品列表
class ProductListPage extends StatefulWidget { final bool useArabic; const ProductListPage({super.key, this.useArabic = false}); @override State<ProductListPage> createState() => _ProductLis...

Flutter产品列表页

4.0
编程开发
en
Flutter
产品列表
Widget
class ProductListPage extends StatefulWidget { final bool useArabic; const ProductListPage({super.key, this.useArabic = false}); @override State<ProductListPage> createState() => _ProductLis...

Build XO App with AI

4.0
Programming
en
Tic Tac Toe
AI Game
JavaScript
create a complete XO (Tic Tac Toe) app with AI opponent: "Build a modern, fully-featured Tic Tac Toe (XO) app that includes: A clean, user-friendly interface optimized for mobile, tablet, and web. ...

Generate YouTube Subscribers

4.0
Technology
en
YouTube
Subscribers
App
Make an app let generate YouTube subscribers and and comments by enter your username after that the says how many subscribers and like do you want so you type the amount of likes and subscribers , so ...

YouTube Subscribers App

4.0
Technology
en
YouTube
Subscribers
App
Make an app let generate YouTube subscribers and and comments by enter your username after that the says how many subscribers and like do you want so you type the amount of likes and subscribers , so ...