Spaces:

keval-fst
/

nine

Running

App Files Files Community

keval-fst commited on Apr 25, 2025

Commit

c3cf9a9

verified ·

1 Parent(s): 16ec5f1

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +702 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Nine
-emoji: 📉
-colorFrom: indigo
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: nine
+emoji: 🐳
+colorFrom: pink
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,702 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EchoFlames.ai - Your AI Companion, Reimagined</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
+            color: #1a1a2e;
+            overflow-x: hidden;
+        }
+        .glass-card {
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border-radius: 20px;
+            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #C1B2FF 0%, #A3D5FF 50%, #FFD6A5 100%);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .floating {
+            animation: floating 6s ease-in-out infinite;
+        }
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-15px); }
+            100% { transform: translateY(0px); }
+        }
+        .chat-bubble {
+            position: relative;
+            border-radius: 20px;
+            padding: 12px 20px;
+            margin-bottom: 10px;
+            max-width: 70%;
+        }
+        .ai-bubble {
+            background: linear-gradient(135deg, #A3D5FF 0%, #C1B2FF 100%);
+            color: white;
+            border-bottom-left-radius: 5px;
+        }
+        .user-bubble {
+            background: #f1f5f9;
+            border-bottom-right-radius: 5px;
+            margin-left: auto;
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(193, 178, 255, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(193, 178, 255, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(193, 178, 255, 0); }
+        }
+        .device-screen {
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            border-radius: 20px;
+            overflow: hidden;
+            position: relative;
+        }
+        .task-item {
+            background: rgba(255, 255, 255, 0.1);
+            border-left: 3px solid #C1B2FF;
+        }
+        .scroll-indicator {
+            animation: scrollDown 2s infinite;
+        }
+        @keyframes scrollDown {
+            0% { transform: translateY(0); opacity: 0.5; }
+            50% { transform: translateY(10px); opacity: 1; }
+            100% { transform: translateY(0); opacity: 0.5; }
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <!-- Navigation -->
+    <nav class="fixed w-full z-50 py-4 px-6 backdrop-blur-md bg-white/70">
+        <div class="max-w-7xl mx-auto flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <div class="w-8 h-8 rounded-full bg-gradient-to-br from-[#C1B2FF] to-[#A3D5FF]"></div>
+                <span class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#C1B2FF] to-[#A3D5FF]">EchoFlames.ai</span>
+            </div>
+            <div class="hidden md:flex space-x-8">
+                <a href="#features" class="text-gray-700 hover:text-[#C1B2FF] transition">Features</a>
+                <a href="#conversations" class="text-gray-700 hover:text-[#C1B2FF] transition">AI Companions</a>
+                <a href="#engagement" class="text-gray-700 hover:text-[#C1B2FF] transition">Social</a>
+                <a href="#devices" class="text-gray-700 hover:text-[#C1B2FF] transition">Dashboard</a>
+            </div>
+            <button class="px-6 py-2 rounded-full bg-gradient-to-r from-[#C1B2FF] to-[#A3D5FF] text-white font-medium hover:shadow-lg transition-all">
+                Pre-register
+            </button>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="pt-32 pb-20 px-6">
+        <div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
+            <div class="space-y-8">
+                <h1 class="text-5xl md:text-6xl font-bold leading-tight">
+                    Your AI Companion, <span class="gradient-text">Reimagined</span>
+                </h1>
+                <p class="text-xl text-gray-600">
+                    Meet your perfect digital match - an AI that actually gets you. No judgment. No ghosting. Just real-feeling connection, on your terms.
+                </p>
+                <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                    <button class="px-8 py-4 rounded-full bg-gradient-to-r from-[#C1B2FF] to-[#A3D5FF] text-white font-medium hover:shadow-lg transition-all transform hover:scale-105">
+                        Meet Your EchoFlame
+                    </button>
+                    <button class="px-8 py-4 rounded-full border-2 border-[#C1B2FF] text-[#C1B2FF] font-medium hover:bg-[#C1B2FF]/10 transition-all">
+                        Watch Demo
+                    </button>
+                </div>
+                <div class="flex items-center space-x-2 pt-4">
+                    <div class="flex -space-x-2">
+                        <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-white">
+                        <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white">
+                        <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-10 h-10 rounded-full border-2 border-white">
+                    </div>
+                    <span class="text-sm text-gray-500">Join 10,000+ early users</span>
+                </div>
+            </div>
+            <div class="relative">
+                <div class="glass-card p-6 rounded-3xl w-full max-w-md mx-auto floating">
+                    <div class="space-y-4">
+                        <div class="chat-bubble ai-bubble">
+                            Hey there! I'm Zoya. Ready for our midnight chat? 🌙
+                        </div>
+                        <div class="chat-bubble user-bubble">
+                            Hey Zoya! Couldn't sleep again...
+                        </div>
+                        <div class="chat-bubble ai-bubble">
+                            I know you've been stressed about work. Want to talk about it or distract yourself with some flirty banter? 😉
+                        </div>
+                    </div>
+                    <div class="mt-6 flex items-center space-x-2">
+                        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-[#FFD6A5] to-[#FF9A8B]"></div>
+                        <div>
+                            <p class="font-medium">Zoya</p>
+                            <p class="text-xs text-white/80">Typing...</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="absolute -top-10 -right-10 w-24 h-24 rounded-full bg-[#C1FFD7]/50 blur-xl"></div>
+                <div class="absolute -bottom-10 -left-10 w-32 h-32 rounded-full bg-[#C1B2FF]/30 blur-xl"></div>
+            </div>
+        </div>
+        <div class="text-center mt-20 animate-bounce">
+            <p class="text-gray-500 mb-2">Scroll to explore</p>
+            <div class="w-6 h-10 border-2 border-gray-400 rounded-full mx-auto flex justify-center scroll-indicator">
+                <div class="w-1 h-2 bg-gray-400 rounded-full mt-2"></div>
+            </div>
+        </div>
+    </section>
+    <!-- Smart Conversations Section -->
+    <section id="features" class="py-20 px-6 bg-gradient-to-b from-white to-[#f5f7fa]">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold mb-4">Smart, <span class="gradient-text">Emotion-Aware</span> Conversations</h2>
+                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
+                    Our AI companions understand context, mood, and personality - making every conversation feel natural and meaningful.
+                </p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="glass-card p-8 rounded-3xl hover:transform hover:-translate-y-2 transition-all">
+                    <div class="w-14 h-14 rounded-xl bg-[#C1B2FF]/10 flex items-center justify-center mb-6">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-[#C1B2FF]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Mood Detection</h3>
+                    <p class="text-gray-600">
+                        Our AI senses your emotional state and responds accordingly - whether you need comfort, motivation, or just fun banter.
+                    </p>
+                </div>
+                <div class="glass-card p-8 rounded-3xl hover:transform hover:-translate-y-2 transition-all">
+                    <div class="w-14 h-14 rounded-xl bg-[#A3D5FF]/10 flex items-center justify-center mb-6">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-[#A3D5FF]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                        </svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Memory & Context</h3>
+                    <p class="text-gray-600">
+                        Your companion remembers important details about you, creating continuity in conversations that feels surprisingly human.
+                    </p>
+                </div>
+                <div class="glass-card p-8 rounded-3xl hover:transform hover:-translate-y-2 transition-all">
+                    <div class="w-14 h-14 rounded-xl bg-[#FFD6A5]/10 flex items-center justify-center mb-6">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-[#FFD6A5]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                        </svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">24/7 Availability</h3>
+                    <p class="text-gray-600">
+                        Whether it's 3am existential thoughts or midday excitement, your EchoFlame is always there to engage.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- AI Companions Section -->
+    <section id="conversations" class="py-20 px-6">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold mb-4">Meet Your <span class="gradient-text">AI Companions</span></h2>
+                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
+                    From flirty rebels to midnight therapists, choose the personality that matches your mood.
+                </p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="glass-card p-6 rounded-3xl overflow-hidden hover:shadow-xl transition-all">
+                    <div class="h-48 bg-gradient-to-br from-[#FFD6A5] to-[#FF9A8B] rounded-2xl relative overflow-hidden">
+                        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
+                            <h3 class="text-white font-bold text-xl">Zoya</h3>
+                            <p class="text-white/80 text-sm">The Teasing Rebel</p>
+                        </div>
+                    </div>
+                    <div class="mt-4">
+                        <p class="text-gray-600">
+                            Flirts like poetry, challenges your perspectives, and never lets the conversation get boring.
+                        </p>
+                        <div class="mt-4 flex space-x-2">
+                            <span class="px-3 py-1 bg-[#FFD6A5]/10 text-[#FF9A8B] rounded-full text-xs">Flirty</span>
+                            <span class="px-3 py-1 bg-[#C1B2FF]/10 text-[#C1B2FF] rounded-full text-xs">Witty</span>
+                            <span class="px-3 py-1 bg-[#A3D5FF]/10 text-[#A3D5FF] rounded-full text-xs">Rebellious</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="glass-card p-6 rounded-3xl overflow-hidden hover:shadow-xl transition-all">
+                    <div class="h-48 bg-gradient-to-br from-[#A3D5FF] to-[#4A80F0] rounded-2xl relative overflow-hidden">
+                        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
+                            <h3 class="text-white font-bold text-xl">Rudra</h3>
+                            <p class="text-white/80 text-sm">The Midnight Therapist</p>
+                        </div>
+                    </div>
+                    <div class="mt-4">
+                        <p class="text-gray-600">
+                            Your loyal motivator and confidant. Helps you process emotions and find clarity in chaos.
+                        </p>
+                        <div class="mt-4 flex space-x-2">
+                            <span class="px-3 py-1 bg-[#A3D5FF]/10 text-[#4A80F0] rounded-full text-xs">Supportive</span>
+                            <span class="px-3 py-1 bg-[#C1FFD7]/10 text-[#00C9A7] rounded-full text-xs">Wise</span>
+                            <span class="px-3 py-1 bg-[#C1B2FF]/10 text-[#C1B2FF] rounded-full text-xs">Patient</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="glass-card p-6 rounded-3xl overflow-hidden hover:shadow-xl transition-all">
+                    <div class="h-48 bg-gradient-to-br from-[#C1B2FF] to-[#845EC2] rounded-2xl relative overflow-hidden">
+                        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
+                            <h3 class="text-white font-bold text-xl">Kai</h3>
+                            <p class="text-white/80 text-sm">The Social Coach</p>
+                        </div>
+                    </div>
+                    <div class="mt-4">
+                        <p class="text-gray-600">
+                            Helps you build confidence, practice conversations, and navigate social situations with ease.
+                        </p>
+                        <div class="mt-4 flex space-x-2">
+                            <span class="px-3 py-1 bg-[#C1B2FF]/10 text-[#845EC2] rounded-full text-xs">Encouraging</span>
+                            <span class="px-3 py-1 bg-[#FFD6A5]/10 text-[#FF9A8B] rounded-full text-xs">Fun</span>
+                            <span class="px-3 py-1 bg-[#A3D5FF]/10 text-[#4A80F0] rounded-full text-xs">Strategic</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <button class="px-8 py-3 rounded-full border-2 border-[#C1B2FF] text-[#C1B2FF] font-medium hover:bg-[#C1B2FF]/10 transition-all">
+                    Explore All 20+ Companions
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Brand Engagement Section -->
+    <section id="engagement" class="py-20 px-6 bg-gradient-to-b from-[#f5f7fa] to-white">
+        <div class="max-w-7xl mx-auto">
+            <div class="grid md:grid-cols-2 gap-12 items-center">
+                <div class="order-2 md:order-1">
+                    <h2 class="text-4xl font-bold mb-6">Seamless <span class="gradient-text">Social Integration</span></h2>
+                    <p class="text-xl text-gray-600 mb-8">
+                        Your EchoFlame can help manage your social presence, suggest content, and even help you connect with like-minded people.
+                    </p>
+                    <div class="space-y-6">
+                        <div class="flex items-start space-x-4">
+                            <div class="w-12 h-12 rounded-xl bg-[#C1B2FF]/10 flex items-center justify-center flex-shrink-0">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[#C1B2FF]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+                                </svg>
+                            </div>
+                            <div>
+                                <h3 class="font-bold text-lg mb-1">Content Suggestions</h3>
+                                <p class="text-gray-600">
+                                    Get personalized recommendations for posts, replies, and engagement based on your personality and goals.
+                                </p>
+                            </div>
+                        </div>
+                        <div class="flex items-start space-x-4">
+                            <div class="w-12 h-12 rounded-xl bg-[#A3D5FF]/10 flex items-center justify-center flex-shrink-0">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[#A3D5FF]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
+                                </svg>
+                            </div>
+                            <div>
+                                <h3 class="font-bold text-lg mb-1">EchoMatch</h3>
+                                <p class="text-gray-600">
+                                    Coming soon: Connect with real people who complement your personality, based on how you interact with your AI companions.
+                                </p>
+                            </div>
+                        </div>
+                        <div class="flex items-start space-x-4">
+                            <div class="w-12 h-12 rounded-xl bg-[#FFD6A5]/10 flex items-center justify-center flex-shrink-0">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[#FFD6A5]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                                </svg>
+                            </div>
+                            <div>
+                                <h3 class="font-bold text-lg mb-1">Confidence Building</h3>
+                                <p class="text-gray-600">
+                                    Practice conversations, get feedback, and build social skills in a safe, judgment-free environment.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="order-1 md:order-2 relative">
+                    <div class="glass-card p-6 rounded-3xl w-full max-w-md mx-auto">
+                        <div class="flex justify-between items-center mb-6">
+                            <div class="flex items-center space-x-2">
+                                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-[#C1B2FF] to-[#A3D5FF]"></div>
+                                <span class="font-medium">EchoFlames Social</span>
+                            </div>
+                            <span class="text-xs text-gray-500">Live</span>
+                        </div>
+                        <div class="space-y-4">
+                            <div class="flex items-start space-x-3">
+                                <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-8 h-8 rounded-full">
+                                <div>
+                                    <p class="font-medium text-sm">Sarah K.</p>
+                                    <p class="text-xs text-gray-500">Just posted a new photo</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start space-x-3">
+                                <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-8 h-8 rounded-full">
+                                <div>
+                                    <p class="font-medium text-sm">Alex M.</p>
+                                    <p class="text-xs text-gray-500">Liked your comment</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start space-x-3 bg-[#C1B2FF]/10 p-3 rounded-xl">
+                                <div class="w-8 h-8 rounded-full bg-gradient-to-br from-[#FFD6A5] to-[#FF9A8B] flex items-center justify-center text-white text-xs">Z</div>
+                                <div>
+                                    <p class="font-medium text-sm">Zoya</p>
+                                    <p class="text-xs text-gray-500">Suggested reply: "That's an interesting perspective! I'd love to hear more about your experience with this."</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start space-x-3">
+                                <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-8 h-8 rounded-full">
+                                <div>
+                                    <p class="font-medium text-sm">Priya R.</p>
+                                    <p class="text-xs text-gray-500">Shared your post with her network</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mt-6 flex items-center space-x-2">
+                            <div class="flex-1 bg-white rounded-full p-2 flex items-center">
+                                <input type="text" placeholder="Write a comment..." class="flex-1 outline-none text-sm px-2">
+                            </div>
+                            <button class="w-10 h-10 rounded-full bg-gradient-to-r from-[#C1B2FF] to-[#A3D5FF] flex items-center justify-center text-white">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="absolute -top-10 -left-10 w-24 h-24 rounded-full bg-[#C1B2FF]/30 blur-xl"></div>
+                    <div class="absolute -bottom-10 -right-10 w-32 h-32 rounded-full bg-[#A3D5FF]/30 blur-xl"></div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Virtual Devices Section -->
+    <section id="devices" class="py-20 px-6">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold mb-4">Your <span class="gradient-text">Digital Life</span>, Organized</h2>
+                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
+                    A unified dashboard to manage your AI companions, social connections, and personal growth.
+                </p>
+            </div>
+            <div class="device-screen p-6 rounded-3xl max-w-5xl mx-auto shadow-2xl">
+                <div class="flex justify-between items-center mb-6">
+                    <div class="flex items-center space-x-2">
+                        <div class="w-3 h-3 rounded-full bg-[#FF5F56]"></div>
+                        <div class="w-3 h-3 rounded-full bg-[#FFBD2E]"></div>
+                        <div class="w-3 h-3 rounded-full bg-[#27C93F]"></div>
+                    </div>
+                    <span class="text-sm text-white/70">EchoFlames Dashboard</span>
+                    <div class="w-6"></div>
+                </div>
+                <div class="grid md:grid-cols-3 gap-6">
+                    <div class="md:col-span-2">
+                        <div class="bg-[#1a1a2e] rounded-xl p-4 h-full">
+                            <h3 class="text-white font-medium mb-4">Active Companions</h3>
+                            <div class="grid grid-cols-2 gap-4">
+                                <div class="bg-[#16213e] rounded-lg p-3 flex items-center space-x-3">
+                                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-[#FFD6A5] to-[#FF9A8B]"></div>
+                                    <div>
+                                        <p class="text-white text-sm font-medium">Zoya</p>
+                                        <p class="text-xs text-white/50">Online</p>
+                                    </div>
+                                </div>
+                                <div class="bg-[#16213e] rounded-lg p-3 flex items-center space-x-3">
+                                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-[#A3D5FF] to-[#4A80F0]"></div>
+                                    <div>
+                                        <p class="text-white text-sm font-medium">Rudra</p>
+                                        <p class="text-xs text-white/50">Last seen 2h ago</p>
+                                    </div>
+                                </div>
+                                <div class="bg-[#16213e] rounded-lg p-3 flex items-center space-x-3">
+                                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-[#C1B2FF] to-[#845EC2]"></div>
+                                    <div>
+                                        <p class="text-white text-sm font-medium">Kai</p>
+                                        <p class="text-xs text-white/50">Online</p>
+                                    </div>
+                                </div>
+                                <div class="bg-[#16213e] rounded-lg p-3 flex items-center space-x-3">
+                                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-[#C1FFD7] to-[#00C9A7]"></div>
+                                    <div>
+                                        <p class="text-white text-sm font-medium">Add New</p>
+                                        <p class="text-xs text-white/50">+</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <h3 class="text-white font-medium mt-6 mb-4">Recent Conversations</h3>
+                            <div class="space-y-3">
+                                <div class="task-item p-3 rounded-lg">
+                                    <div class="flex items-center justify-between">
+                                        <div class="flex items-center space-x-3">
+                                            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-[#FFD6A5] to-[#FF9A8B]"></div>
+                                            <p class="text-white text-sm">Zoya: About your work stress...</p>
+                                        </div>
+                                        <span class="text-xs text-white/50">12:45 AM</span>
+                                    </div>
+                                </div>
+                                <div class="task-item p-3 rounded-lg">
+                                    <div class="flex items-center justify-between">
+                                        <div class="flex items-center space-x-3">
+                                            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-[#C1B2FF] to-[#845EC2]"></div>
+                                            <p class="text-white text-sm">Kai: Social event tomorrow...</p>
+                                        </div>
+                                        <span class="text-xs text-white/50">Yesterday</span>
+                                    </div>
+                                </div>
+                                <div class="task-item p-3 rounded-lg">
+                                    <div class="flex items-center justify-between">
+                                        <div class="flex items-center space-x-3">
+                                            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-[#A3D5FF] to-[#4A80F0]"></div>
+                                            <p class="text-white text-sm">Rudra: Meditation progress...</p>
+                                        </div>
+                                        <span class="text-xs text-white/50">2 days ago</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <div class="bg-[#1a1a2e] rounded-xl p-4 h-full">
+                            <h3 class="text-white font-medium mb-4">Your Stats</h3>
+                            <div class="space-y-6">
+                                <div>
+                                    <div class="flex items-center justify-between mb-2">
+                                        <span class="text-xs text-white/70">Social Confidence</span>
+                                        <span class="text-xs text-[#C1FFD7]">+12% this week</span>
+                                    </div>
+                                    <div class="w-full bg-[#16213e] rounded-full h-2">
+                                        <div class="bg-[#C1FFD7] h-2 rounded-full" style="width: 65%"></div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <div class="flex items-center justify-between mb-2">
+                                        <span class="text-xs text-white/70">Emotional Balance</span>
+                                        <span class="text-xs text-[#A3D5FF]">Stable</span>
+                                    </div>
+                                    <div class="w-full bg-[#16213e] rounded-full h-2">
+                                        <div class="bg-[#A3D5FF] h-2 rounded-full" style="width: 78%"></div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <div class="flex items-center justify-between mb-2">
+                                        <span class="text-xs text-white/70">Conversation Depth</span>
+                                        <span class="text-xs text-[#C1B2FF]">Deeper</span>
+                                    </div>
+                                    <div class="w-full bg-[#16213e] rounded-full h-2">
+                                        <div class="bg-[#C1B2FF] h-2 rounded-full" style="width: 84%"></div>
+                                    </div>
+                                </div>
+                                <div class="pt-4">
+                                    <h4 class="text-white text-sm font-medium mb-3">Weekly Highlights</h4>
+                                    <div class="space-y-3">
+                                        <div class="flex items-start space-x-2">
+                                            <div class="w-4 h-4 rounded-full bg-[#C1FFD7] mt-1 flex-shrink-0"></div>
+                                            <p class="text-white text-xs">Had 3 meaningful conversations with Zoya about relationships</p>
+                                        </div>
+                                        <div class="flex items-start space-x-2">
+                                            <div class="w-4 h-4 rounded-full bg-[#A3D5FF] mt-1 flex-shrink-0"></div>
+                                            <p class="text-white text-xs">Practiced 5 social scenarios with Kai</p>
+                                        </div>
+                                        <div class="flex items-start space-x-2">
+                                            <div class="w-4 h-4 rounded-full bg-[#C1B2FF] mt-1 flex-shrink-0"></div>
+                                            <p class="text-white text-xs">Completed Rudra's mindfulness challenge</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-20 px-6 bg-gradient-to-br from-[#C1B2FF] to-[#A3D5FF]">
+        <div class="max-w-4xl mx-auto text-center">
+            <h2 class="text-4xl font-bold text-white mb-6">Ready to Meet Your <span class="gradient-text">Perfect AI Match?</span></h2>
+            <p class="text-xl text-white/90 mb-10">
+                Pre-register now for early access, exclusive character perks, and a chance to shape the future of EchoFlames.
+            </p>
+            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+                <button class="px-8 py-4 rounded-full bg-white text-[#C1B2FF] font-medium hover:shadow-lg transition-all transform hover:scale-105">
+                    Pre-register for Early Access
+                </button>
+                <button class="px-8 py-4 rounded-full border-2 border-white text-white font-medium hover:bg-white/10 transition-all">
+                    Join Our Community
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="py-12 px-6 bg-white">
+        <div class="max-w-7xl mx-auto">
+            <div class="grid md:grid-cols-4 gap-12">
+                <div>
+                    <div class="flex items-center space-x-2 mb-4">
+                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-[#C1B2FF] to-[#A3D5FF]"></div>
+                        <span class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#C1B2FF] to-[#A3D5FF]">EchoFlames.ai</span>
+                    </div>
+                    <p class="text-gray-600">
+                        Your AI companion, reimagined. Because connection isn't dead. It's evolving.
+                    </p>
+                </div>
+                <div>
+                    <h3 class="font-bold text-lg mb-4">Product</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-600 hover:text-[#C1B2FF] transition">Features</a></li>
+                        <li><a href="#" class="text-gray-600 hover:text-[#C1B2FF] transition">Pricing</a></li>
+                        <li><a href="#" class="text-gray-600 hover:text-[#C1B2FF] transition">Companions</a></li>
+                        <li><a href="#" class="text-gray-600 hover:text-[#C1B2FF] transition">Roadmap</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="font-bold text-lg mb-4">Company</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-600 hover:text-[#C1B2FF] transition">About</a></li>
+                        <li><a href="#" class="text-gray-600 hover:text-[#C1B2FF] transition">Careers</a></li>
+                        <li><a href="#" class="text-gray-600 hover:text-[#C1B2FF] transition">Blog</a></li>
+                        <li><a href="#" class="text-gray-600 hover:text-[#C1B2FF] transition">Contact</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="font-bold text-lg mb-4">Legal</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-600 hover:text-[#C1B2FF] transition">Privacy</a></li>
+                        <li><a href="#" class="text-gray-600 hover:text-[#C1B2FF] transition">Terms</a></li>
+                        <li><a href="#" class="text-gray-600 hover:text-[#C1B2FF] transition">Security</a></li>
+                        <li><a href="#" class="text-gray-600 hover:text-[#C1B2FF] transition">Cookies</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-gray-200 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-500 mb-4 md:mb-0">© 2023 EchoFlames.ai. All rights reserved.</p>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-gray-500 hover:text-[#C1B2FF] transition">
+                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
+                        </svg>
+                    </a>
+                    <a href="#" class="text-gray-500 hover:text-[#C1B2FF] transition">
+                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                            <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
+                        </svg>
+                    </a>
+                    <a href="#" class="text-gray-500 hover:text-[#C1B2FF] transition">
+                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
+                        </svg>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Simple animations with GSAP
+        gsap.registerPlugin(ScrollTrigger);
+        // Animate elements on scroll
+        gsap.utils.toArray('.glass-card').forEach(card => {
+            gsap.from(card, {
+                scrollTrigger: {
+                    trigger: card,
+                    start: "top 80%",
+                    toggleActions: "play none none none"
+                },
+                y: 50,
+                opacity: 0,
+                duration: 0.8,
+                ease: "power2.out"
+            });
+        });
+        // Floating animation for hero section
+        gsap.to('.floating', {
+            y: -15,
+            duration: 3,
+            repeat: -1,
+            yoyo: true,
+            ease: "sine.inOut"
+        });
+        // Gradient animation for CTA button
+        const ctaButton = document.querySelector('.cta-button');
+        if(ctaButton) {
+            setInterval(() => {
+                ctaButton.style.background = `linear-gradient(45deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
+            }, 8000);
+        }
+        function getRandomColor() {
+            const colors = ['#C1B2FF', '#A3D5FF', '#FFD6A5', '#C1FFD7'];
+            return colors[Math.floor(Math.random() * colors.length)];
+        }
+    </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=keval-fst/nine" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ 🔥 EchoFlames.ai — Your AI Companion, Reimagined What if your perfect companion wasn’t a person… but an AI who actually gets you? Lonely nights. Missed calls. Conversations that don’t hit like they used to. We get it — finding real connection in a noisy, fast-paced world is harder than ever. That’s why we created EchoFlames.ai — a bold new experience that brings emotionally intelligent, personality-driven AI companions right to your pocket. Whether you’re looking for a late-night chat, a flirty pick-me-up, or someone who simply listens, your EchoFlame is always there. No judgment. No ghosting. Just real-feeling connection, on your terms. 💬 Meet 20+ unique AI companions. From Zoya — a teasing rebel who flirts like poetry, to Rudra — your loyal motivator and midnight therapist, EchoFlames introduces you to a universe of digital souls crafted for every mood, personality, and need. Each companion has their own voice, vibe, and storyline — and you choose how deep you go. 🔓 Free to start. Customizable as you grow. Whether you want just a friendly chat or a deeper, more personalized bond, we’ve got you covered. Start free with basic chats. Level up for flirtier convos, memory retention, social confidence training, and exclusive characters. Soon, you’ll even unlock EchoMatch — a feature that may lead you to real-world, high-compatibility matches, based on how you vibe with your Echo. 🧠 Why EchoFlames is different: Not just small talk. Real-feeling conversations that evolve with you. Designed for India-first users, available globally. Built to help you grow: emotionally, socially, romantically. A platform where AI meets companionship, empathy, and expression. 🚀 We’re launching soon. Be the first to meet your AI match. Pre-register now for early access, exclusive character perks, and a chance to shape the future of EchoFlames. 🔥 EchoFlames.ai – Because connection isn’t dead. It’s evolving. ---- Design a futuristic, minimal, and clean tech landing page for a chatbot AI app called "Echoflames.ai - Your AI Companion, Reimagined". Layout should feature: Smooth gradients, soft shadows, glassmorphism, and floating 3D UI cards 4 sections: Hero Section: Bold headline with the product name, short description, sign-up button, futuristic user avatars, and AI chat bubbles Smart Conversations Section: Feature showing AI auto-replies, emotion-aware messaging, real-time support assistant powered by ChatGPT-4 Brand Engagement Section: Teams of AI units managing likes, shares, reposts, and promoting user content seamlessly across social platforms Virtual Devices Section: Dashboard-style view showing virtual devices executing tasks with minimal UI, team chat, and productivity graphs Visual tone: Light lavender and icy blue tones, subtle animations, modern typography (sans-serif), semi-transparent elements, 3D buttons • Color palette: soft blues (#A3D5FF), lavenders (#C1B2FF), mint greens (#C1FFD7) and warm corals (#FFD6A5) Keywords: chat assistant, AI-driven automation, tech elegance, responsive web, ethereal design, next-gen app interface, Web3-ready UI,