File size: 10,699 Bytes
bbcc838 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ConvoSphere - Real Talk. Real People. Real Perspective.</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; }
.gradient-bg { background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); }
</style>
</head>
<body class="bg-gray-50">
<nav class="bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<svg class="h-8 w-8 text-indigo-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" />
</svg>
<span class="ml-2 text-xl font-bold text-gray-900">ConvoSphere</span>
</div>
</div>
<div class="flex items-center">
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-900 hover:text-indigo-600">For Seekers</a>
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-900 hover:text-indigo-600">For Advisors</a>
<a href="#" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-indigo-600 bg-indigo-100 hover:bg-indigo-200">Sign In</a>
</div>
</div>
</div>
</nav>
<main>
<div class="gradient-bg py-20 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto text-center">
<h1 class="text-4xl md:text-5xl font-extrabold text-white mb-6">Find the perfect conversation</h1>
<p class="text-xl text-indigo-100 max-w-3xl mx-auto mb-10">Connect with verified advisors for meaningful conversations across 20+ topics. Safe, secure, and satisfaction guaranteed.</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-gray-100 md:py-4 md:text-lg md:px-10">
I need advice
</a>
<a href="#" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-800 bg-opacity-60 hover:bg-opacity-80 md:py-4 md:text-lg md:px-10">
I offer advice
</a>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-extrabold text-gray-900">How ConvoSphere works</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex justify-center mb-4">
<div class="bg-indigo-100 p-3 rounded-full">
<svg class="h-8 w-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
</div>
<h3 class="text-lg font-medium text-center mb-2">1. Choose your topic</h3>
<p class="text-gray-600 text-center">Browse through 20+ categories to find the perfect advisor for your needs.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex justify-center mb-4">
<div class="bg-indigo-100 p-3 rounded-full">
<svg class="h-8 w-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
</div>
<h3 class="text-lg font-medium text-center mb-2">2. Connect instantly</h3>
<p class="text-gray-600 text-center">Start a text, voice, or video conversation with your matched advisor.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex justify-center mb-4">
<div class="bg-indigo-100 p-3 rounded-full">
<svg class="h-8 w-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<h3 class="text-lg font-medium text-center mb-2">3. Get perspective</h3>
<p class="text-gray-600 text-center">Gain valuable insights and leave a rating to help improve our community.</p>
</div>
</div>
</div>
<div class="bg-gray-100 py-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl font-extrabold text-gray-900">Popular conversation categories</h2>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
<h3 class="text-lg font-medium mb-2">Career Guidance</h3>
<p class="text-gray-600">Resume reviews, interview prep, career transitions</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
<h3 class="text-lg font-medium mb-2">Relationships</h3>
<p class="text-gray-600">Dating advice, family matters, communication skills</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
<h3 class="text-lg font-medium mb-2">Mental Wellness</h3>
<p class="text-gray-600">Stress management, mindfulness, emotional support</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
<h3 class="text-lg font-medium mb-2">Personal Finance</h3>
<p class="text-gray-600">Budgeting, investing, debt management strategies</p>
</div>
</div>
<div class="text-center mt-10">
<a href="#" class="text-indigo-600 font-medium hover:text-indigo-800">Browse all categories →</a>
</div>
</div>
</div>
</main>
<footer class="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div>
<h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Product</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Categories</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Safety</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Company</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Press</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Partners</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Resources</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Community</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Webinars</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Legal</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li>
</ul>
</div>
</div>
<div class="mt-12 pt-8 border-t border-gray-800">
<p class="text-gray-400 text-sm text-center">© 2023 ConvoSphere. All rights reserved.</p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
feather.replace();
</script>
</body>
</html> |