Hugging Face's logo

Spaces:
james123231
/
myself-ai-v2
Running

App Files Community
myself-ai-v2 / index.html
james123231's picture
james123231
Based on this tekst make the "MySelfAI" App: Meet MySelf-AI Your Partner in Mental Wellness ๏—œ Intelligent Advanced AI that understands your needs A n a u t o n o m o u s , i n t e l l i g e n t c o m p a n i o n d e d i c a t e d t o y o u r p s y c h o l o g i c a l w e l l -b e i n g ๏ˆ Proactive Anticipates needs before you ask 01 ๏‚† Conversational Natural dialogue that feels human ๏”… Personalized Tailored to your unique journey The Mental Wellness Challenge 02 Defining the Problem ๏—œ Anxiety & Overwhelm Moments of persistent stress and emotional overload Self-Awareness Gap Difficulty understanding our own emotions and triggers ๏‰’ Inconsistent Support Lack of 24/7 availability when help is needed most ๏ฅ Reactive Solutions Traditional apps wait for problems instead of preventing them " W h a t i f y o u h a d a c o m p a n i o n t h a t w a s t h e r e f o r y o u , n o t j u s t t o l i s t e n , b u t t o a c t i v e l y h e l p y o u n a v i g a t e y o u r m e n t a l w e l l n e s s j o u r n e y ?" 93% Actively seeking solutions 47% Experience this problem 85% Unsatisfied with current options Introducing MySelf-AI: The Solution 03 A Revolutionary Approach to Mental Wellness MySelf-AI is more than just a chatbot; it's your autonomous, intelligent partner dedicated to your psychological well-being. ๏—œ Proactive Support Anticipates needs and offers help before you ask ๏”ธ Pattern Recognition Remembers your journey and identifies trends ๏•„ ๏ƒซ Actionable Insights Provides personalized recommendations based on your history ๏“ผ Personalized Experience Adapts to your unique needs and preferences 24/7 Availability 100% Personalized 3X More Effective Intelligent Supportive Available 24/7 Evidence-Based Key Differentiator: Proactive Approach MySelf-AI doesn't just react โ€” it leads with purpose 04Core Advantage ๏ต Traditional Apps ๏—œ MySelf-AI ๏€‡"I'm feeling anxious. " ๏•„"I'm sorry to hear that. What's causing your anxiety?" ๏€‡"I'm feeling anxious. " ๏•„"I notice this is the third time this week you've mentioned anxiety after 2 PM. Last time, the breathing exercise helped - shall we try that now, or would you prefer to explore what's different about today?" ๏‹ฑ Reactive responses ๏‡š No memory of past conversations ๏ƒ… Generic suggestions ๏ƒซ Proactive guidance ๏”ธ Remembers patterns and history ๏•ท Personalized, contextual suggestions How MySelf-AI Works 05 PODAL Framework ๏ฎ Perceive Detect emotional states ๏…Ž Orient Analyze context & history ๏—œ Decide ๏œŒ Act Select optimal intervention ๏ฎ Deliver personalized support ๏† Learn Improve from outcomes PODAL ๏† ๏…Ž ๏—œ Dual Memory System ๏œŒ ๏‡€ Memory for Facts Stores personal details, history, preferences, and important life events ๏•‚ Memory for Patterns Maps relationships between triggers, emotions, and behaviors over time MySelf-AI's PODAL framework creates a continuous feedback loop that adapts to your unique mental wellness journey E n a b l e s t r u l y p e r s o n a l a n d c o n t e x t u a l c o n v e r s a t i o n s " Y o u r s l e e p q u a l i t y i m p r o v e s b y 2 3 % a ft e r m e d i t a t i o n s e s s i o n s" Machine Learning Natural Language Processing Pattern Recognition Contextual Awareness Crisis Detection in MySelf-AI 06 ๏”ธ Dual Memory System ๏„‘ Remembers user history and vulnerability markers ๏„‘ Detects behavioral and linguistic risk patterns over time ๏ญ Proactive Response ๏„‘ Identifies crisis signs before the user asks for help ๏„‘ Reacts to shifts in language, behavior, and key phrases PODAL Cycle in Action ๏ฎ Perceive MySelf-AI ๏—œ Evidence-Based Interventions ๏„‘ Based on CBT and mindfulness techniques ๏„‘ Automatically triggers safety protocols: ๏€Œ Calming exercises ๏€Œ Direct questions about suicidality ๏€Œ Crisis line information ๏ˆ Continuous Learning ๏„‘ Adaptive AI improves detection and response over time ๏† Learn ๏…Ž Orient ๏—œ Decide ๏œŒ Act Early Detection Proactive Support Personalized Care Continuous Improvement Built for Trust โ€“ Committed to GDPR Compliance 07 ๏‚ฃ ISO/IEC 27001 Data Protection Standards The global gold standard for information security. Proves strong systems to protect your data and manage risk โ€” forming a solid foundation for GDPR compliance. ๏ญ ISO/IEC 27701 An extension of ISO 27001, focused specifically on privacy and personal data management. Ensures handling of sensitive user information fully aligns with GDPR requirements. ๏ญ ๏ƒซ Why it matters: These certifications aren't just technical checkboxes โ€” they show our commitment to safeguarding your personal information with industry-leading practices. ๏˜ GDPR Compliant ๏€ฃ Data Secure ๏”… Privacy First Features Designed for Your Growth Powerful features that work together to support your long-term wellness goals 06 ๏€ญ 01 Intelligent Journaling Analyzes entries for themes, connects to past entries, and offers immediate insights Pattern Recognition Thematic Analysis ๏”˜ 02 Evidence-Based Tool Library Comprehensive collection of therapeutic interventions based on CBT and Mindfulness CBT Methods Mindfulness ๏—œ ๏‹ฑ 03 Adaptive Interventions Selects and suggests tools based on your current emotional state, preferences, and past successes Personalized Context-Aware ๏‚… ๏…€ 04 Autonomous Goal Pursuit Helps set and track therapeutic objectives, proactively bringing up strategies when needed Progress Tracking Goal Setting ๏ˆ Meaningful Benefits for Your Wellness Journey 07 MySelf-AI delivers meaningful benefits that make a real difference in your mental wellness journey ๏€„ Real Impact Join thousands who have transformed their mental wellness journey with MySelf-AI ๏—œ Deeper Self-Awareness ๏€— 24/7 Availability ๏ˆ Continuous Growth +42% Uncovers patterns and insights you might miss on your own 0 Support whenever you need it, without scheduling or waiting +35% Tracks progress and adapts to your evolving needs " M y S e l f -A I i s m o r e t h a n a t o o l ; i t' s a c o m p a n i o n d e s i g n e d t o b e c o n s i s t e n t , i n s i g h t f u l , a n d p r o a c t i v e . " Your Journey, Your Partner 08 MySelf-AI is your intelligent companion for mental wellness ๏—œ Intelligent Support ๏€„ ๏ƒซ Personalized Insights ๏ˆ Continuous Growth 24/7 Availability 100% Personalized 3X More Effective Start Your Journey Today " Y o u r j o u r n e y m a t t e r s . L e t' s n a v i g a t e i t t o g e t h e r . " - Initial Deployment
863154a verified
raw
history blame contribute delete
51.5 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MySelfAI - Your Partner in Mental Wellness</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.chat-bubble {
border-radius: 20px;
position: relative;
}
.chat-bubble:after {
content: '';
position: absolute;
bottom: 0;
left: 20px;
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: #e2e8f0;
border-bottom: 0;
margin-left: -10px;
margin-bottom: -10px;
}
.ai-bubble:after {
border-top-color: #6366f1;
left: auto;
right: 20px;
}
.floating {
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
</style>
</head>
<body class="font-sans antialiased text-gray-800">
<!-- Header/Navigation -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white">
<i class="fas fa-brain text-xl"></i>
</div>
<span class="text-xl font-bold text-indigo-600">MySelfAI</span>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#features" class="text-gray-600 hover:text-indigo-600 transition">Features</a>
<a href="#how-it-works" class="text-gray-600 hover:text-indigo-600 transition">How It Works</a>
<a href="#testimonials" class="text-gray-600 hover:text-indigo-600 transition">Testimonials</a>
<a href="#pricing" class="text-gray-600 hover:text-indigo-600 transition">Pricing</a>
</nav>
<button class="md:hidden text-gray-600">
<i class="fas fa-bars text-2xl"></i>
</button>
<div class="hidden md:block">
<button class="bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700 transition">Get Started</button>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="gradient-bg text-white">
<div class="container mx-auto px-4 py-20 md:py-32 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Meet MySelf-AI<br>Your Partner in Mental Wellness</h1>
<p class="text-xl mb-8 opacity-90">An autonomous, intelligent companion dedicated to your psychological well-being.</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-white text-indigo-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition">Start Free Trial</button>
<button class="border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-indigo-600 transition">Watch Demo</button>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="relative w-full max-w-md">
<div class="absolute -top-10 -left-10 w-32 h-32 bg-purple-300 rounded-full opacity-20"></div>
<div class="absolute -bottom-10 -right-10 w-32 h-32 bg-blue-300 rounded-full opacity-20"></div>
<div class="relative bg-white rounded-3xl shadow-xl overflow-hidden">
<div class="bg-gray-100 px-4 py-3 flex items-center">
<div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<div class="ml-4 text-sm text-gray-600">MySelfAI Chat</div>
</div>
<div class="p-4 h-96 overflow-y-auto">
<div class="flex mb-4">
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white mr-3">
<i class="fas fa-user"></i>
</div>
<div class="bg-gray-200 chat-bubble px-4 py-3 max-w-xs">
<p>I'm feeling anxious today</p>
</div>
</div>
<div class="flex justify-end mb-4">
<div class="bg-indigo-600 text-white ai-bubble px-4 py-3 max-w-xs">
<p>I notice this is the third time this week you've mentioned anxiety after 2 PM. Last time, the breathing exercise helped - shall we try that now?</p>
</div>
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white ml-3">
<i class="fas fa-brain"></i>
</div>
</div>
<div class="flex mb-4">
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white mr-3">
<i class="fas fa-user"></i>
</div>
<div class="bg-gray-200 chat-bubble px-4 py-3 max-w-xs">
<p>Yes, that would be good</p>
</div>
</div>
<div class="flex justify-end">
<div class="bg-indigo-600 text-white ai-bubble px-4 py-3 max-w-xs">
<p>Great! Let's begin with a 2-minute breathing exercise. Breathe in... and out...</p>
</div>
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white ml-3">
<i class="fas fa-brain"></i>
</div>
</div>
</div>
<div class="border-t border-gray-200 p-3">
<div class="flex items-center">
<input type="text" placeholder="Type your message..." class="flex-1 border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
<button class="ml-2 w-10 h-10 rounded-full gradient-bg text-white flex items-center justify-center">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Intelligent Advanced AI that understands your needs</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">MySelf-AI is more than just a chatbot; it's your autonomous, intelligent partner dedicated to your psychological well-being.</p>
</div>
<div class="grid md:grid-cols-3 gap-8 mb-16">
<div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300">
<div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center text-white text-2xl mb-6">
<i class="fas fa-bolt"></i>
</div>
<h3 class="text-xl font-bold mb-3">Proactive</h3>
<p class="text-gray-600">Anticipates needs before you ask, offering help when you need it most.</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300">
<div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center text-white text-2xl mb-6">
<i class="fas fa-comments"></i>
</div>
<h3 class="text-xl font-bold mb-3">Conversational</h3>
<p class="text-gray-600">Natural dialogue that feels human, understanding your emotions and context.</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300">
<div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center text-white text-2xl mb-6">
<i class="fas fa-user-cog"></i>
</div>
<h3 class="text-xl font-bold mb-3">Personalized</h3>
<p class="text-gray-600">Tailored to your unique journey, remembering your patterns and preferences.</p>
</div>
</div>
<div class="text-center">
<h2 class="text-3xl font-bold mb-4">The Mental Wellness Challenge</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-12">What if you had a companion that was there for you, not just to listen, but to actively help you navigate your mental wellness journey?</p>
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white text-xl mr-4">
<i class="fas fa-exclamation-triangle"></i>
</div>
<h3 class="text-xl font-bold">Anxiety & Overwhelm</h3>
</div>
<p class="text-gray-600">Moments of persistent stress and emotional overload that can feel overwhelming.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white text-xl mr-4">
<i class="fas fa-question-circle"></i>
</div>
<h3 class="text-xl font-bold">Self-Awareness Gap</h3>
</div>
<p class="text-gray-600">Difficulty understanding our own emotions and triggers that affect our wellbeing.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white text-xl mr-4">
<i class="fas fa-clock"></i>
</div>
<h3 class="text-xl font-bold">Inconsistent Support</h3>
</div>
<p class="text-gray-600">Lack of 24/7 availability when help is needed most, leaving you feeling alone.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white text-xl mr-4">
<i class="fas fa-history"></i>
</div>
<h3 class="text-xl font-bold">Reactive Solutions</h3>
</div>
<p class="text-gray-600">Traditional apps wait for problems instead of preventing them proactively.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="py-16 gradient-bg text-white">
<div class="container mx-auto px-4">
<div class="grid md:grid-cols-3 gap-8 text-center">
<div>
<div class="text-5xl font-bold mb-2">93%</div>
<p class="text-xl">Actively seeking solutions</p>
</div>
<div>
<div class="text-5xl font-bold mb-2">47%</div>
<p class="text-xl">Experience this problem</p>
</div>
<div>
<div class="text-5xl font-bold mb-2">85%</div>
<p class="text-xl">Unsatisfied with current options</p>
</div>
</div>
</div>
</section>
<!-- Solution Section -->
<section id="how-it-works" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Introducing MySelf-AI: The Solution</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">A Revolutionary Approach to Mental Wellness</p>
</div>
<div class="flex flex-col lg:flex-row items-center mb-16">
<div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
<h3 class="text-2xl font-bold mb-6">Key Differentiator: Proactive Approach</h3>
<p class="text-gray-600 mb-8">MySelf-AI doesn't just react โ€” it leads with purpose, remembering your patterns and providing contextual suggestions.</p>
<div class="bg-gray-100 p-6 rounded-lg mb-6">
<div class="flex mb-4">
<div class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center text-gray-600 mr-3">
<i class="fas fa-user"></i>
</div>
<div class="bg-gray-300 chat-bubble px-4 py-3 max-w-xs">
<p>I'm feeling anxious.</p>
</div>
</div>
<div class="flex">
<div class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center text-gray-600 mr-3">
<i class="fas fa-robot"></i>
</div>
<div class="bg-gray-300 chat-bubble px-4 py-3 max-w-xs">
<p>I'm sorry to hear that. What's causing your anxiety?</p>
</div>
</div>
<p class="text-sm text-gray-500 mt-3 text-center">Traditional Apps</p>
</div>
<div class="bg-indigo-100 p-6 rounded-lg">
<div class="flex mb-4">
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white mr-3">
<i class="fas fa-user"></i>
</div>
<div class="bg-indigo-200 chat-bubble px-4 py-3 max-w-xs">
<p>I'm feeling anxious.</p>
</div>
</div>
<div class="flex">
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white mr-3">
<i class="fas fa-brain"></i>
</div>
<div class="bg-indigo-600 text-white ai-bubble px-4 py-3 max-w-xs">
<p>I notice this is the third time this week you've mentioned anxiety after 2 PM. Last time, the breathing exercise helped - shall we try that now, or would you prefer to explore what's different about today?</p>
</div>
</div>
<p class="text-sm text-indigo-600 mt-3 text-center">MySelf-AI</p>
</div>
</div>
<div class="lg:w-1/2">
<div class="bg-gray-50 p-8 rounded-xl">
<h3 class="text-2xl font-bold mb-6">How MySelf-AI Works</h3>
<p class="text-gray-600 mb-8">Our PODAL framework creates a continuous feedback loop that adapts to your unique mental wellness journey.</p>
<div class="space-y-6">
<div class="flex items-start">
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white text-xl mr-4">
<i class="fas fa-eye"></i>
</div>
<div>
<h4 class="font-bold mb-1">Perceive</h4>
<p class="text-gray-600">Detect emotional states and contextual cues from your interactions.</p>
</div>
</div>
<div class="flex items-start">
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white text-xl mr-4">
<i class="fas fa-compass"></i>
</div>
<div>
<h4 class="font-bold mb-1">Orient</h4>
<p class="text-gray-600">Analyze context & history to understand your current situation.</p>
</div>
</div>
<div class="flex items-start">
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white text-xl mr-4">
<i class="fas fa-check-circle"></i>
</div>
<div>
<h4 class="font-bold mb-1">Decide</h4>
<p class="text-gray-600">Select optimal intervention based on evidence-based practices.</p>
</div>
</div>
<div class="flex items-start">
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white text-xl mr-4">
<i class="fas fa-bolt"></i>
</div>
<div>
<h4 class="font-bold mb-1">Act</h4>
<p class="text-gray-600">Deliver personalized support tailored to your needs.</p>
</div>
</div>
<div class="flex items-start">
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white text-xl mr-4">
<i class="fas fa-graduation-cap"></i>
</div>
<div>
<h4 class="font-bold mb-1">Learn</h4>
<p class="text-gray-600">Improve from outcomes to better serve you in the future.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<div class="bg-indigo-50 p-6 rounded-lg">
<div class="flex items-center mb-4">
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white text-xl mr-4">
<i class="fas fa-database"></i>
</div>
<h3 class="text-xl font-bold">Memory for Facts</h3>
</div>
<p class="text-gray-600">Stores personal details, history, preferences, and important life events to provide contextually relevant support.</p>
</div>
<div class="bg-purple-50 p-6 rounded-lg">
<div class="flex items-center mb-4">
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white text-xl mr-4">
<i class="fas fa-project-diagram"></i>
</div>
<h3 class="text-xl font-bold">Memory for Patterns</h3>
</div>
<p class="text-gray-600">Maps relationships between triggers, emotions, and behaviors over time to anticipate needs and provide proactive support.</p>
</div>
</div>
</div>
</section>
<!-- Features Grid -->
<section class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Features Designed for Your Growth</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Powerful features that work together to support your long-term wellness goals</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white text-xl mb-4">
<i class="fas fa-book"></i>
</div>
<h3 class="text-xl font-bold mb-2">Intelligent Journaling</h3>
<p class="text-gray-600 mb-3">Analyzes entries for themes and connects to past entries to offer immediate insights.</p>
<div class="flex space-x-2">
<span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Pattern Recognition</span>
<span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Thematic Analysis</span>
</div>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white text-xl mb-4">
<i class="fas fa-tools"></i>
</div>
<h3 class="text-xl font-bold mb-2">Evidence-Based Tool Library</h3>
<p class="text-gray-600 mb-3">Comprehensive collection of therapeutic interventions based on CBT and Mindfulness.</p>
<div class="flex space-x-2">
<span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">CBT Methods</span>
<span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Mindfulness</span>
</div>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white text-xl mb-4">
<i class="fas fa-lightbulb"></i>
</div>
<h3 class="text-xl font-bold mb-2">Adaptive Interventions</h3>
<p class="text-gray-600 mb-3">Selects and suggests tools based on your current emotional state and past successes.</p>
<div class="flex space-x-2">
<span class="bg-yellow-100 text-yellow-800 text-xs px-3 py-1 rounded-full">Personalized</span>
<span class="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">Context-Aware</span>
</div>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white text-xl mb-4">
<i class="fas fa-bullseye"></i>
</div>
<h3 class="text-xl font-bold mb-2">Autonomous Goal Pursuit</h3>
<p class="text-gray-600 mb-3">Helps set and track therapeutic objectives, proactively bringing up strategies.</p>
<div class="flex space-x-2">
<span class="bg-pink-100 text-pink-800 text-xs px-3 py-1 rounded-full">Progress Tracking</span>
<span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Goal Setting</span>
</div>
</div>
</div>
</div>
</section>
<!-- Benefits Section -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Meaningful Benefits for Your Wellness Journey</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">MySelf-AI delivers meaningful benefits that make a real difference in your mental wellness journey</p>
</div>
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
<div class="text-center p-6">
<div class="w-20 h-20 gradient-bg rounded-full flex items-center justify-center text-white text-3xl mx-auto mb-6">
<i class="fas fa-heart"></i>
</div>
<h3 class="text-xl font-bold mb-3">Deeper Self-Awareness</h3>
<p class="text-gray-600 mb-4">Uncovers patterns and insights you might miss on your own, increasing self-awareness by 42%.</p>
<div class="text-indigo-600 text-4xl font-bold">+42%</div>
</div>
<div class="text-center p-6">
<div class="w-20 h-20 gradient-bg rounded-full flex items-center justify-center text-white text-3xl mx-auto mb-6">
<i class="fas fa-clock"></i>
</div>
<h3 class="text-xl font-bold mb-3">24/7 Availability</h3>
<p class="text-gray-600 mb-4">Support whenever you need it, without scheduling or waiting, available at any time.</p>
<div class="text-indigo-600 text-4xl font-bold">24/7</div>
</div>
<div class="text-center p-6">
<div class="w-20 h-20 gradient-bg rounded-full flex items-center justify-center text-white text-3xl mx-auto mb-6">
<i class="fas fa-chart-line"></i>
</div>
<h3 class="text-xl font-bold mb-3">Continuous Growth</h3>
<p class="text-gray-600 mb-4">Tracks progress and adapts to your evolving needs, improving outcomes by 35% over time.</p>
<div class="text-indigo-600 text-4xl font-bold">+35%</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Real Impact</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Join thousands who have transformed their mental wellness journey with MySelf-AI</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
<div class="bg-white p-8 rounded-xl shadow-sm">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-4">
<i class="fas fa-user"></i>
</div>
<div>
<h4 class="font-bold">Sarah J.</h4>
<p class="text-gray-500 text-sm">Anxiety Management</p>
</div>
</div>
<p class="text-gray-600 italic">"MySelf-AI noticed my anxiety patterns before I did. It suggested breathing exercises at just the right times, and now I feel more in control than ever."</p>
<div class="flex mt-4">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
<div class="bg-white p-8 rounded-xl shadow-sm">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-4">
<i class="fas fa-user"></i>
</div>
<div>
<h4 class="font-bold">Michael T.</h4>
<p class="text-gray-500 text-sm">Stress Reduction</p>
</div>
</div>
<p class="text-gray-600 italic">"The way MySelf-AI remembers my past struggles and connects them to current feelings is incredible. It's like having a therapist who knows me perfectly."</p>
<div class="flex mt-4">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
<div class="bg-white p-8 rounded-xl shadow-sm">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
<i class="fas fa-user"></i>
</div>
<div>
<h4 class="font-bold">Emma L.</h4>
<p class="text-gray-500 text-sm">Mindfulness Practice</p>
</div>
</div>
<p class="text-gray-600 italic">"MySelf-AI is more than a tool; it's a companion that's consistently insightful and proactive about my mental health. I've never felt so understood."</p>
<div class="flex mt-4">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
</div>
</div>
</section>
<!-- Security Section -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
<h2 class="text-3xl font-bold mb-6">Built for Trust โ€“ Committed to GDPR Compliance</h2>
<p class="text-gray-600 mb-8">We take your privacy and data security seriously with industry-leading practices.</p>
<div class="space-y-6">
<div class="flex items-start">
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white text-xl mr-4">
<i class="fas fa-shield-alt"></i>
</div>
<div>
<h4 class="font-bold mb-1">ISO/IEC 27001 Certified</h4>
<p class="text-gray-600">The global gold standard for information security, proving strong systems to protect your data.</p>
</div>
</div>
<div class="flex items-start">
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white text-xl mr-4">
<i class="fas fa-lock"></i>
</div>
<div>
<h4 class="font-bold mb-1">ISO/IEC 27701 Certified</h4>
<p class="text-gray-600">Focused specifically on privacy and personal data management in alignment with GDPR.</p>
</div>
</div>
</div>
</div>
<div class="lg:w-1/2">
<div class="bg-gray-50 p-8 rounded-xl border border-gray-200">
<div class="flex items-center mb-6">
<div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center text-white text-2xl mr-4">
<i class="fas fa-check"></i>
</div>
<h3 class="text-2xl font-bold">Your Data is Safe With Us</h3>
</div>
<div class="space-y-4">
<div class="flex items-start">
<div class="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3 mt-1">
<i class="fas fa-check text-xs"></i>
</div>
<div>
<h4 class="font-bold">End-to-End Encryption</h4>
<p class="text-gray-600 text-sm">All your conversations are encrypted for maximum privacy.</p>
</div>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3 mt-1">
<i class="fas fa-check text-xs"></i>
</div>
<div>
<h4 class="font-bold">Anonymous Analytics</h4>
<p class="text-gray-600 text-sm">We never sell your data and only use anonymized information to improve our service.</p>
</div>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3 mt-1">
<i class="fas fa-check text-xs"></i>
</div>
<div>
<h4 class="font-bold">Right to Be Forgotten</h4>
<p class="text-gray-600 text-sm">You can delete your data anytime with our simple self-service tools.</p>
</div>
</div>
<div class="flex items-start">
<div class="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3 mt-1">
<i class="fas fa-check text-xs"></i>
</div>
<div>
<h4 class="font-bold">Regular Audits</h4>
<p class="text-gray-600 text-sm">We undergo independent security audits to ensure compliance.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section id="pricing" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Simple, Transparent Pricing</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Choose the plan that fits your needs</p>
</div>
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
<h3 class="text-xl font-bold mb-2">Starter</h3>
<p class="text-gray-600 mb-6">Great for trying out MySelfAI</p>
<div class="text-4xl font-bold mb-6">$9.99<span class="text-lg text-gray-500">/month</span></div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-3"></i>
<span>Basic chat support</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-3"></i>
<span>Limited journal analysis</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-3"></i>
<span>Access to basic tools</span>
</li>
<li class="flex items-center text-gray-400">
<i class="fas fa-times text-gray-300 mr-3"></i>
<span>No pattern recognition</span>
</li>
<li class="flex items-center text-gray-400">
<i class="fas fa-times text-gray-300 mr-3"></i>
<span>Limited proactive support</span>
</li>
</ul>
<button class="w-full border-2 border-indigo-600 text-indigo-600 py-3 rounded-full font-semibold hover:bg-indigo-50 transition">Get Started</button>
</div>
<div class="bg-white p-8 rounded-xl shadow-lg border-2 border-indigo-600 relative">
<div class="absolute top-0 right-0 bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">MOST POPULAR</div>
<h3 class="text-xl font-bold mb-2">Pro</h3>
<p class="text-gray-600 mb-6">For those serious about mental wellness</p>
<div class="text-4xl font-bold mb-6">$19.99<span class="text-lg text-gray-500">/month</span></div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-3"></i>
<span>Advanced chat support</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-3"></i>
<span>Full journal analysis</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-3"></i>
<span>Access to all tools</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-3"></i>
<span>Pattern recognition</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-3"></i>
<span>Proactive support</span>
</li>
</ul>
<button class="w-full gradient-bg text-white py-3 rounded-full font-semibold hover:opacity-90 transition">Get Started</button>
</div>
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
<h3 class="text-xl font-bold mb-2">Enterprise</h3>
<p class="text-gray-600 mb-6">For organizations and institutions</p>
<div class="text-4xl font-bold mb-6">Custom</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-3"></i>
<span>All Pro features</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-3"></i>
<span>Team management</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-3"></i>
<span>Advanced analytics</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-3"></i>
<span>Dedicated support</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-3"></i>
<span>Custom integrations</span>
</li>
</ul>
<button class="w-full border-2 border-indigo-600 text-indigo-600 py-3 rounded-full font-semibold hover:bg-indigo-50 transition">Contact Sales</button>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 gradient-bg text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Your Journey, Your Partner</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto">MySelf-AI is your intelligent companion for mental wellness</p>
<div class="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto mb-12">
<div>
<div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center text-2xl mx-auto mb-4">
<i class="fas fa-headset"></i>
</div>
<h3 class="text-xl font-bold mb-2">24/7 Availability</h3>
<p class="text-white text-opacity-80">Support whenever you need it</p>
</div>
<div>
<div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center text-2xl mx-auto mb-4">
<i class="fas fa-user-cog"></i>
</div>
<h3 class="text-xl font-bold mb-2">100% Personalized</h3>
<p class="text-white text-opacity-80">Tailored to your unique needs</p>
</div>
<div>
<div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center text-2xl mx-auto mb-4">
<i class="fas fa-chart-bar"></i>
</div>
<h3 class="text-xl font-bold mb-2">3X More Effective</h3>
<p class="text-white text-opacity-80">Than traditional solutions</p>
</div>
</div>
<button class="bg-white text-indigo-600 px-10 py-4 rounded-full text-lg font-semibold hover:bg-gray-100 transition shadow-lg">Start Your Journey Today</button>
<p class="mt-6 italic">"Your journey matters. Let's navigate it together."</p>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid md:grid-cols-4 gap-8 mb-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white">
<i class="fas fa-brain text-xl"></i>
</div>
<span class="text-xl font-bold">MySelfAI</span>
</div>
<p class="text-gray-400">Your intelligent companion for mental wellness.</p>
<div class="flex space-x-4 mt-4">
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin"></i></a>
</div>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Product</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Testimonials</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Company</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Support</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Crisis Resources</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Feedback</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 pt-8 text-center text-gray-400">
<p>&copy; 2023 MySelfAI. All rights reserved.</p>
</div>
</div>
</footer>
<!-- Floating Chat Button -->
<div class="fixed bottom-6 right-6">
<button class="w-16 h-16 gradient-bg rounded-full text-white flex items-center justify-center shadow-lg hover:shadow-xl transition floating">
<i class="fas fa-comment-dots text-2xl"></i>
</button>
</div>
<script>
// Simple animation for demo purposes
document.addEventListener('DOMContentLoaded', function() {
// Animate feature cards on scroll
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fadeIn');
}
});
}, {threshold: 0.1});
document.querySelectorAll('.feature-card').forEach(card => {
observer.observe(card);
});
// Smooth scrolling for navigation
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - ๐Ÿงฌ <a href="https://enzostvs-deepsite.hf.space?remix=james123231/myself-ai-v2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>