Spaces:
Running
Website Builder Prompt
Browse filesWebsite Type: Mental Health & Wellness Resource Site for College Students
Site Name: Mental-Health-Self-Care
Purpose: Create a calming, supportive website that provides college students (ages 18-25) with quick, accessible mental health tools and self-care resources they can use daily.
Target Audience: College students dealing with academic pressure, time management challenges, and stress who want practical, manageable wellness tips.
Design Style:
Clean, minimalistic design with calming colors (soft blues, greens, warm neutrals)
Peaceful, nature-inspired imagery (mountains, lakes, forests, sunrise/sunset)
Modern, readable fonts
Mobile-friendly responsive design
Accessibility-focused with good contrast
Color Palette Suggestions:
Primary: Soft teal/sage green (#4A90A4, #7FB069)
Secondary: Warm cream/beige (#F7F3E9)
Accent: Soft coral/peach (#F4A261)
Text: Dark charcoal (#2D3436)
IMPORTANT: Include High-Quality, Professional Images Throughout:
Hero Images (Large, High-Resolution):
Peaceful mountain lake with reflection at sunrise/sunset
Serene forest path with soft lighting
Calm ocean waves on a peaceful beach
Person meditating in nature (diverse representation)
Cozy reading nook with plants and natural light
Section Background Images:
Soft, blurred nature textures (leaves, water, sky)
Minimalist patterns in calming colors
Gentle gradients from nature photos
Abstract watercolor backgrounds in earth tones
Feature/Content Images:
Students practicing yoga or meditation (diverse ages/ethnicities)
Hands holding a journal and pen
Person taking deep breaths outdoors
Cozy study spaces with plants
Sunrise/sunset through trees
Close-ups of nature (flowers, leaves, stones)
Peaceful indoor spaces with natural light
Icons & Graphics (Modern, Consistent Style):
π§ Meditation figure icon
π Journal/writing icon
π« Breathing/lungs icon
π Thought bubble/mindfulness icon
π± Growth/wellness icon
β° Time/clock icon
π Mood tracking icon
π― Goal/target icon
Image Style Guidelines:
Use professional stock photos from Unsplash, Pexels, or premium stock sites
Ensure all images have consistent color grading (warm, calming tones)
Include diverse representation in people photos
High resolution (at least 1920x1080 for hero images)
Proper alt text for accessibility
Optimized for web loading speeds
Required Pages:
Home Page:
Welcome message emphasizing calm and support
Daily featured content (affirmation + breathing tip)
Quick access buttons to main tools
Brief explanation of site purpose
Hero image: Stunning peaceful mountain lake or serene forest scene
Daily Practices Page:
Journaling prompts and reflection exercises
Breathing techniques (box breathing, 4-7-8 technique)
5-minute meditation guides
Stress management techniques
Embedded calming videos (meditation/breathing)
Time indicators for each activity (2-10 minutes)
Images: Person journaling, meditation poses, nature scenes for each section
Check-In Form Page:
Interactive form with mood rating scale (1-5 with emoji faces)
Emotion checkboxes (stressed, anxious, calm, happy, etc.)
Dropdown for stress sources (exams, assignments, social, etc.)
Time availability options (2-3 min, 5-10 min, 15+ min)
Results section with personalized suggestions
Images: Calming background, supportive imagery, wellness graphics
Additional Image Requirements:
Favicon: Simple, recognizable icon for browser tabs
Social media preview images for sharing
Loading animations with calming themes
Error page images that maintain the peaceful aesthetic
Gallery of inspirational/motivational images with quotes
Key Features to Include:
Simple navigation menu with "Mental-Health-Self-Care" as logo/brand
Contact/crisis resources in footer
Privacy statement about anonymous usage
Quick loading times despite high-quality images
Search functionality
Consistent branding throughout - Follow Up Deployment