DevOps1762/soulsync-sparkles
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>SoulSync - Authentic Connections First</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>11 <script src="https://unpkg.com/feather-icons"></script>12 <script>13 tailwind.config = {14 theme: {15 extend: {16 colors: {17 primary: {18 500: '#8B5CF6',19 600: '#7C3AED',20 },21 secondary: {22 500: '#EC4899',23 600: '#DB2777',24 }25 }26 }27 }28 }29 </script>30 <style>31 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');32 body {33 font-family: 'Inter', sans-serif;34 }35 .vanta-bg {36 position: absolute;37 top: 0;38 left: 0;39 width: 100%;40 height: 100%;41 z-index: -1;42 opacity: 0.2;43 }44 .gradient-text {45 background: linear-gradient(90deg, #8B5CF6 0%, #EC4899 100%);46 -webkit-background-clip: text;47 background-clip: text;48 color: transparent;49 }50 .chat-bubble {51 border-radius: 24px 24px 24px 4px;52 }53 .chat-bubble.user {54 border-radius: 24px 24px 4px 24px;55 }56 </style>57</head>58<body class="bg-gray-50 min-h-screen">59 <div id="vanta-bg" class="vanta-bg"></div>60 <div class="container mx-auto px-4 py-8 md:py-12">61 <!-- Hero Section -->62 <div class="flex flex-col-reverse md:flex-row items-center justify-between gap-8 md:gap-12 mb-12 md:mb-24">63<div class="md:w-1/2 space-y-6">64 <h1 class="text-4xl md:text-6xl font-bold text-gray-900 leading-tight">65 Find love 66 <span class="gradient-text">beyond appearances</span>67 </h1>68 <p class="text-lg md:text-xl text-gray-600">69SoulSync is where meaningful connections begin with conversation, not photos. 70 Let our AI guide you to relationships rooted in authenticity and shared values.71 </p>72 <div class="flex flex-col sm:flex-row gap-3">73 <button class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 md:px-8 md:py-4 rounded-full font-medium text-base md:text-lg transition-all transform hover:scale-105 shadow-lg">74 Start Your Journey75 </button>76 <button class="border-2 border-primary-500 text-primary-500 hover:bg-primary-50 px-6 py-3 md:px-8 md:py-4 rounded-full font-medium text-base md:text-lg transition-all">77How It Works78 </button>79 </div>80 </div>81 <div class="md:w-1/2 relative">82 <div class="bg-white p-8 rounded-3xl shadow-2xl border border-gray-100">83 <div class="space-y-4">84 <div class="flex items-center gap-4">85 <div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center">86 <i data-feather="heart" class="text-primary-500"></i>87 </div>88 <div>89 <h3 class="font-medium text-gray-900">AI Companion</h3>90 <p class="text-sm text-gray-500">Your dating guide</p>91 </div>92 </div>93 <div class="space-y-3">94 <div class="bg-gray-100 p-4 chat-bubble max-w-xs">95 <p class="text-gray-800">Welcome to SoulSync! I'm here to help you find meaningful connections. What are you looking for in a relationship?</p>96 </div>97 <div class="bg-primary-100 p-4 chat-bubble user max-w-xs ml-auto">98 <p class="text-primary-800">Someone who understands my values and grows with me</p>99 </div>100 <div class="bg-gray-100 p-4 chat-bubble max-w-xs">101 <p class="text-gray-800">That's beautiful. Let's explore what that means for you...</p>102 </div>103 </div>104 </div>105 </div>106 <div class="absolute -bottom-6 -left-6 w-24 h-24 bg-secondary-500 rounded-full opacity-20 -z-10"></div>107 <div class="absolute -top-6 -right-6 w-32 h-32 bg-primary-500 rounded-full opacity-20 -z-10"></div>108 </div>109 </div>110 111 <!-- How It Works Section -->112 <div class="py-16">113 <h2 class="text-3xl font-bold text-center text-gray-900 mb-16">How SoulSync Works</h2>114 <div class="grid md:grid-cols-3 gap-8">115 <div class="bg-white p-8 rounded-2xl shadow-lg border border-gray-100 hover:border-primary-200 transition-all">116 <div class="w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mb-6">117 <i data-feather="edit-3" class="text-primary-500 w-6 h-6"></i>118 </div>119 <h3 class="text-xl font-bold mb-3 text-gray-900">Discover Yourself</h3>120 <p class="text-gray-600">Complete our guided personality assessments and reflective prompts to understand what truly matters to you.</p>121 </div>122 <div class="bg-white p-8 rounded-2xl shadow-lg border border-gray-100 hover:border-secondary-200 transition-all">123 <div class="w-16 h-16 bg-secondary-100 rounded-xl flex items-center justify-center mb-6">124 <i data-feather="message-circle" class="text-secondary-500 w-6 h-6"></i>125 </div>126 <h3 class="text-xl font-bold mb-3 text-gray-900">Connect Blindly</h3>127 <p class="text-gray-600">Our AI matches you based on compatibility, and conversations begin without photos or physical details.</p>128 </div>129 <div class="bg-white p-8 rounded-2xl shadow-lg border border-gray-100 hover:border-primary-200 transition-all">130 <div class="w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mb-6">131 <i data-feather="eye" class="text-primary-500 w-6 h-6"></i>132 </div>133 <h3 class="text-xl font-bold mb-3 text-gray-900">Reveal When Ready</h3>134 <p class="text-gray-600">Choose to reveal photos only after establishing a meaningful connection through conversation.</p>135 </div>136 </div>137 </div>138 139 <!-- Values Section -->140 <div class="py-16 bg-gradient-to-r from-primary-50 to-secondary-50 rounded-3xl px-8 mb-16">141 <h2 class="text-3xl font-bold text-center text-gray-900 mb-16">Our Core Values</h2>142 <div class="max-w-4xl mx-auto grid sm:grid-cols-2 md:grid-cols-3 gap-6">143 <div class="bg-white bg-opacity-80 p-6 rounded-xl backdrop-blur-sm">144 <i data-feather="heart" class="text-primary-500 w-8 h-8 mb-3"></i>145 <h3 class="font-bold text-lg mb-2 text-gray-900">Authenticity</h3>146 <p class="text-gray-600 text-sm">Encouraging real conversations that reveal true personalities.</p>147 </div>148 <div class="bg-white bg-opacity-80 p-6 rounded-xl backdrop-blur-sm">149 <i data-feather="shield" class="text-secondary-500 w-8 h-8 mb-3"></i>150 <h3 class="font-bold text-lg mb-2 text-gray-900">Safety</h3>151 <p class="text-gray-600 text-sm">Verified profiles and AI monitoring for respectful interactions.</p>152 </div>153 <div class="bg-white bg-opacity-80 p-6 rounded-xl backdrop-blur-sm">154 <i data-feather="feather" class="text-primary-500 w-8 h-8 mb-3"></i>155 <h3 class="font-bold text-lg mb-2 text-gray-900">Mindfulness</h3>156 <p class="text-gray-600 text-sm">Intentional connections that go beyond superficial attraction.</p>157 </div>158 <div class="bg-white bg-opacity-80 p-6 rounded-xl backdrop-blur-sm">159 <i data-feather="users" class="text-secondary-500 w-8 h-8 mb-3"></i>160 <h3 class="font-bold text-lg mb-2 text-gray-900">Community</h3>161 <p class="text-gray-600 text-sm">Building a culture of respect and meaningful relationships.</p>162 </div>163 <div class="bg-white bg-opacity-80 p-6 rounded-xl backdrop-blur-sm">164 <i data-feather="zap" class="text-primary-500 w-8 h-8 mb-3"></i>165 <h3 class="font-bold text-lg mb-2 text-gray-900">Growth</h3>166 <p class="text-gray-600 text-sm">Encouraging personal development through self-reflection.</p>167 </div>168 <div class="bg-white bg-opacity-80 p-6 rounded-xl backdrop-blur-sm">169 <i data-feather="clock" class="text-secondary-500 w-8 h-8 mb-3"></i>170 <h3 class="font-bold text-lg mb-2 text-gray-900">Patience</h3>171 <p class="text-gray-600 text-sm">Valuing quality connections over instant gratification.</p>172 </div>173 </div>174 </div>175 176 <!-- Testimonials -->177 <div class="py-16">178 <h2 class="text-3xl font-bold text-center text-gray-900 mb-16">Success Stories</h2>179 <div class="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">180 <div class="bg-white p-8 rounded-2xl shadow-lg border border-gray-100">181 <div class="flex items-center gap-4 mb-6">182 <div class="w-16 h-16 rounded-full bg-gray-100 overflow-hidden">183 <img src="http://static.photos/people/200x200/1" class="w-full h-full object-cover">184 </div>185 <div>186 <h3 class="font-bold text-gray-900">Sarah & Mark</h3>187 <p class="text-gray-500 text-sm">Together for 1 year</p>188 </div>189 </div>190 <p class="text-gray-600 italic">"We talked for three weeks before seeing each other's photos. By then, we had already connected on such a deep level that looks didn't matter. We're celebrating our anniversary next month!"</p>191 </div>192 <div class="bg-white p-8 rounded-2xl shadow-lg border border-gray-100">193 <div class="flex items-center gap-4 mb-6">194 <div class="w-16 h-16 rounded-full bg-gray-100 overflow-hidden">195 <img src="http://static.photos/people/200x200/2" class="w-full h-full object-cover">196 </div>197 <div>198 <h3 class="font-bold text-gray-900">Jamal & Elena</h3>199 <p class="text-gray-500 text-sm">Together for 8 months</p>200 </div>201 </div>202 <p class="text-gray-600 italic">"The personality matching was scarily accurate. Our first date was at a blindfolded dining experience - it was magical to finally see each other after already feeling so close."</p>203 </div>204 </div>205 </div>206 207 <!-- CTA -->208 <div class="bg-gradient-to-r from-primary-500 to-secondary-500 rounded-3xl p-8 md:p-12 text-center text-white">209 <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready for meaningful connections?</h2>210 <p class="text-lg mb-8 max-w-2xl mx-auto">Join thousands who have found love beyond appearances.</p>211 <button class="bg-white text-primary-500 hover:bg-gray-100 px-8 py-4 rounded-full font-bold text-lg transition-all transform hover:scale-105 shadow-lg">212 Get Started for Free213 </button>214 </div>215 </div>216 217 <footer class="bg-gray-900 text-gray-400 py-12">218 <div class="container mx-auto px-4">219 <div class="grid md:grid-cols-4 gap-8">220 <div>221 <h3 class="text-white font-bold text-lg mb-4">SoulSync</h3>222 <p class="mb-4">Find love the right way.</p>223 <div class="flex gap-4">224 <a href="#" class="text-gray-400 hover:text-white transition-colors">225 <i data-feather="instagram"></i>226 </a>227 <a href="#" class="text-gray-400 hover:text-white transition-colors">228 <i data-feather="twitter"></i>229 </a>230 <a href="#" class="text-gray-400 hover:text-white transition-colors">231 <i data-feather="facebook"></i>232 </a>233 </div>234 </div>235 <div>236 <h4 class="text-white font-bold mb-4">Company</h4>237 <ul class="space-y-2">238 <li><a href="#" class="hover:text-white transition-colors">About</a></li>239 <li><a href="#" class="hover:text-white transition-colors">Careers</a></li>240 <li><a href="#" class="hover:text-white transition-colors">Press</a></li>241 </ul>242 </div>243 <div>244 <h4 class="text-white font-bold mb-4">Resources</h4>245 <ul class="space-y-2">246 <li><a href="#" class="hover:text-white transition-colors">Blog</a></li>247 <li><a href="#" class="hover:text-white transition-colors">Dating Tips</a></li>248 <li><a href="#" class="hover:text-white transition-colors">Community</a></li>249 </ul>250 </div>251 <div>252 <h4 class="text-white font-bold mb-4">Legal</h4>253 <ul class="space-y-2">254 <li><a href="#" class="hover:text-white transition-colors">Privacy</a></li>255 <li><a href="#" class="hover:text-white transition-colors">Terms</a></li>256 <li><a href="#" class="hover:text-white transition-colors">Cookie Policy</a></li>257 </ul>258 </div>259 </div>260 <div class="border-t border-gray-800 mt-8 pt-8 text-center">261 <p>© 2023 SoulSync. All rights reserved.</p>262 </div>263 </div>264 </footer>265 266 <script>267 VANTA.GLOBE({268 el: "#vanta-bg",269 mouseControls: true,270 touchControls: true,271 gyroControls: false,272 minHeight: 200.00,273 minWidth: 200.00,274 scale: 1.00,275 scaleMobile: 1.00,276 color: 0x8b5cf6,277 backgroundColor: 0xf8fafc,278 size: 0.8279 });280 281 feather.replace();282 </script>283</body>284</html>285