Prometheus35/marketverse-360
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>MarketVerse 360° - Next-Gen Marketing Services</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://unpkg.com/feather-icons"></script>11 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>12 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>13 <style>14 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');15 body {16 font-family: 'Poppins', sans-serif;17 overflow-x: hidden;18 }19 .service-card:hover {20 transform: translateY(-10px);21 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);22 }23 .gradient-text {24 background: linear-gradient(90deg, #3b82f6, #8b5cf6);25 -webkit-background-clip: text;26 background-clip: text;27 color: transparent;28 }29 .parallax {30 background-attachment: fixed;31 background-position: center;32 background-repeat: no-repeat;33 background-size: cover;34 }35 </style>36</head>37<body class="bg-gray-900 text-white">38 <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>39 40 <!-- Navigation -->41 <nav class="relative z-50 py-6 px-6 lg:px-12 backdrop-blur-sm bg-gray-900/70">42 <div class="flex justify-between items-center">43 <div class="flex items-center space-x-2">44 <i data-feather="zap" class="text-blue-400"></i>45 <span class="text-2xl font-bold gradient-text">MarketVerse</span>46 </div>47 <div class="hidden md:flex space-x-8">48 <a href="#services" class="hover:text-blue-400 transition">Services</a>49 <a href="#about" class="hover:text-blue-400 transition">About</a>50 <a href="#team" class="hover:text-blue-400 transition">Team</a>51 <a href="#contact" class="hover:text-blue-400 transition">Contact</a>52 </div>53 <button class="md:hidden">54 <i data-feather="menu" class="w-6 h-6"></i>55 </button>56 </div>57 </nav>58 59 <!-- Hero Section -->60 <section class="relative z-10 min-h-screen flex items-center justify-center px-6 lg:px-12">61 <div class="text-center max-w-4xl">62 <h1 class="text-4xl md:text-6xl font-bold mb-6">Transform Your <span class="gradient-text">Marketing</span> Game</h1>63 <p class="text-xl md:text-2xl text-gray-300 mb-10">360° marketing solutions powered by data, creativity, and cutting-edge technology.</p>64 <div class="flex flex-col sm:flex-row justify-center gap-4">65 <button class="px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full font-bold hover:opacity-90 transition">Get Started</button>66 <button class="px-8 py-4 bg-transparent border-2 border-white rounded-full font-bold hover:bg-white hover:text-gray-900 transition">Explore Services</button>67 </div>68 </div>69 </section>70 71 <!-- Services Section -->72 <section id="services" class="relative z-10 py-20 px-6 lg:px-12 bg-gray-900/80 backdrop-blur-sm">73 <div class="max-w-6xl mx-auto">74 <div class="text-center mb-16">75 <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="gradient-text">Services</span></h2>76 <p class="text-gray-400 max-w-2xl mx-auto">Comprehensive marketing solutions tailored to your brand's unique needs</p>77 </div>78 79 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">80 <!-- Service 1 -->81 <div class="service-card bg-gray-800/70 backdrop-blur-sm p-8 rounded-2xl border border-gray-700 transition duration-500 hover:border-blue-500">82 <div class="w-16 h-16 bg-blue-500/20 rounded-xl flex items-center justify-center mb-6">83 <i data-feather="trending-up" class="w-8 h-8 text-blue-400"></i>84 </div>85 <h3 class="text-xl font-bold mb-4">Digital Strategy</h3>86 <p class="text-gray-400">Data-driven digital marketing strategies that deliver measurable results and ROI.</p>87 </div>88 89 <!-- Service 2 -->90 <div class="service-card bg-gray-800/70 backdrop-blur-sm p-8 rounded-2xl border border-gray-700 transition duration-500 hover:border-purple-500">91 <div class="w-16 h-16 bg-purple-500/20 rounded-xl flex items-center justify-center mb-6">92 <i data-feather="codepen" class="w-8 h-8 text-purple-400"></i>93 </div>94 <h3 class="text-xl font-bold mb-4">Web Development</h3>95 <p class="text-gray-400">Stunning, high-performance websites designed to convert visitors into customers.</p>96 </div>97 98 <!-- Service 3 -->99 <div class="service-card bg-gray-800/70 backdrop-blur-sm p-8 rounded-2xl border border-gray-700 transition duration-500 hover:border-pink-500">100 <div class="w-16 h-16 bg-pink-500/20 rounded-xl flex items-center justify-center mb-6">101 <i data-feather="film" class="w-8 h-8 text-pink-400"></i>102 </div>103 <h3 class="text-xl font-bold mb-4">Content Creation</h3>104 <p class="text-gray-400">Captivating content that tells your brand story and engages your audience.</p>105 </div>106 107 <!-- Service 4 -->108 <div class="service-card bg-gray-800/70 backdrop-blur-sm p-8 rounded-2xl border border-gray-700 transition duration-500 hover:border-green-500">109 <div class="w-16 h-16 bg-green-500/20 rounded-xl flex items-center justify-center mb-6">110 <i data-feather="bar-chart-2" class="w-8 h-8 text-green-400"></i>111 </div>112 <h3 class="text-xl font-bold mb-4">Analytics</h3>113 <p class="text-gray-400">Actionable insights from your data to optimize campaigns and maximize performance.</p>114 </div>115 116 <!-- Service 5 -->117 <div class="service-card bg-gray-800/70 backdrop-blur-sm p-8 rounded-2xl border border-gray-700 transition duration-500 hover:border-yellow-500">118 <div class="w-16 h-16 bg-yellow-500/20 rounded-xl flex items-center justify-center mb-6">119 <i data-feather="users" class="w-8 h-8 text-yellow-400"></i>120 </div>121 <h3 class="text-xl font-bold mb-4">Social Media</h3>122 <p class="text-gray-400">Strategic social media management that builds communities and drives engagement.</p>123 </div>124 125 <!-- Service 6 -->126 <div class="service-card bg-gray-800/70 backdrop-blur-sm p-8 rounded-2xl border border-gray-700 transition duration-500 hover:border-red-500">127 <div class="w-16 h-16 bg-red-500/20 rounded-xl flex items-center justify-center mb-6">128 <i data-feather="mail" class="w-8 h-8 text-red-400"></i>129 </div>130 <h3 class="text-xl font-bold mb-4">Email Marketing</h3>131 <p class="text-gray-400">Targeted email campaigns that nurture leads and drive conversions.</p>132 </div>133 </div>134 </div>135 </section>136 137 <!-- About Section -->138 <section id="about" class="relative z-10 py-20 px-6 lg:px-12 bg-gradient-to-b from-gray-900/80 to-gray-900">139 <div class="max-w-6xl mx-auto">140 <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">141 <div>142 <h2 class="text-3xl md:text-4xl font-bold mb-6">About <span class="gradient-text">MarketVerse</span></h2>143 <p class="text-gray-300 mb-6">We're a collective of marketing innovators, data scientists, and creative strategists united by a passion for delivering exceptional results.</p>144 <p class="text-gray-400 mb-8">Founded in 2018, we've helped over 200 brands transform their digital presence and achieve sustainable growth through our unique 360° approach.</p>145 <div class="flex flex-wrap gap-4">146 <div class="flex items-center space-x-2">147 <i data-feather="check" class="text-green-400"></i>148 <span>Data-Driven Strategies</span>149 </div>150 <div class="flex items-center space-x-2">151 <i data-feather="check" class="text-green-400"></i>152 <span>Transparent Reporting</span>153 </div>154 <div class="flex items-center space-x-2">155 <i data-feather="check" class="text-green-400"></i>156 <span>Custom Solutions</span>157 </div>158 </div>159 </div>160 <div class="relative">161 <div class="absolute -top-8 -left-8 w-64 h-64 bg-purple-500/20 rounded-full filter blur-3xl"></div>162 <div class="absolute -bottom-8 -right-8 w-64 h-64 bg-blue-500/20 rounded-full filter blur-3xl"></div>163 <div class="relative bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-700">164 <div class="flex items-center space-x-4 mb-6">165 <div class="w-12 h-12 bg-blue-500/20 rounded-full flex items-center justify-center">166 <i data-feather="award" class="text-blue-400"></i>167 </div>168 <h3 class="text-xl font-bold">Our Achievements</h3>169 </div>170 <div class="grid grid-cols-2 gap-6">171 <div>172 <h4 class="text-3xl font-bold gradient-text mb-2">200+</h4>173 <p class="text-gray-400">Happy Clients</p>174 </div>175 <div>176 <h4 class="text-3xl font-bold gradient-text mb-2">95%</h4>177 <p class="text-gray-400">Retention Rate</p>178 </div>179 <div>180 <h4 class="text-3xl font-bold gradient-text mb-2">4.9</h4>181 <p class="text-gray-400">Avg. Rating</p>182 </div>183 <div>184 <h4 class="text-3xl font-bold gradient-text mb-2">3M+</h4>185 <p class="text-gray-400">Leads Generated</p>186 </div>187 </div>188 </div>189 </div>190 </div>191 </div>192 </section>193 194 <!-- Team Section -->195 <section id="team" class="relative z-10 py-20 px-6 lg:px-12 bg-gray-900/80">196 <div class="max-w-6xl mx-auto">197 <div class="text-center mb-16">198 <h2 class="text-3xl md:text-4xl font-bold mb-4">Meet The <span class="gradient-text">Team</span></h2>199 <p class="text-gray-400 max-w-2xl mx-auto">The brilliant minds behind our success</p>200 </div>201 202 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">203 <!-- Team Member 1 -->204 <div class="bg-gray-800/70 backdrop-blur-sm rounded-2xl overflow-hidden border border-gray-700 hover:border-blue-500 transition duration-500">205 <img src="http://static.photos/people/640x360/1" alt="Team Member" class="w-full h-64 object-cover">206 <div class="p-6">207 <h3 class="text-xl font-bold">Alex Morgan</h3>208 <p class="text-blue-400 mb-4">CEO & Founder</p>209 <p class="text-gray-400 text-sm">Digital marketing visionary with 15+ years experience.</p>210 <div class="flex space-x-4 mt-4">211 <a href="#" class="text-gray-400 hover:text-blue-400"><i data-feather="linkedin"></i></a>212 <a href="#" class="text-gray-400 hover:text-blue-400"><i data-feather="twitter"></i></a>213 </div>214 </div>215 </div>216 217 <!-- Team Member 2 -->218 <div class="bg-gray-800/70 backdrop-blur-sm rounded-2xl overflow-hidden border border-gray-700 hover:border-purple-500 transition duration-500">219 <img src="http://static.photos/people/640x360/2" alt="Team Member" class="w-full h-64 object-cover">220 <div class="p-6">221 <h3 class="text-xl font-bold">Sarah Chen</h3>222 <p class="text-purple-400 mb-4">Creative Director</p>223 <p class="text-gray-400 text-sm">Brand strategist and storytelling expert.</p>224 <div class="flex space-x-4 mt-4">225 <a href="#" class="text-gray-400 hover:text-purple-400"><i data-feather="linkedin"></i></a>226 <a href="#" class="text-gray-400 hover:text-purple-400"><i data-feather="twitter"></i></a>227 </div>228 </div>229 </div>230 231 <!-- Team Member 3 -->232 <div class="bg-gray-800/70 backdrop-blur-sm rounded-2xl overflow-hidden border border-gray-700 hover:border-pink-500 transition duration-500">233 <img src="http://static.photos/people/640x360/3" alt="Team Member" class="w-full h-64 object-cover">234 <div class="p-6">235 <h3 class="text-xl font-bold">Jamie Rivera</h3>236 <p class="text-pink-400 mb-4">Data Scientist</p>237 <p class="text-gray-400 text-sm">AI and analytics specialist.</p>238 <div class="flex space-x-4 mt-4">239 <a href="#" class="text-gray-400 hover:text-pink-400"><i data-feather="linkedin"></i></a>240 <a href="#" class="text-gray-400 hover:text-pink-400"><i data-feather="twitter"></i></a>241 </div>242 </div>243 </div>244 245 <!-- Team Member 4 -->246 <div class="bg-gray-800/70 backdrop-blur-sm rounded-2xl overflow-hidden border border-gray-700 hover:border-green-500 transition duration-500">247 <img src="http://static.photos/people/640x360/4" alt="Team Member" class="w-full h-64 object-cover">248 <div class="p-6">249 <h3 class="text-xl font-bold">Jordan Lee</h3>250 <p class="text-green-400 mb-4">Tech Lead</p>251 <p class="text-gray-400 text-sm">Full-stack developer & systems architect.</p>252 <div class="flex space-x-4 mt-4">253 <a href="#" class="text-gray-400 hover:text-green-400"><i data-feather="linkedin"></i></a>254 <a href="#" class="text-gray-400 hover:text-green-400"><i data-feather="twitter"></i></a>255 </div>256 </div>257 </div>258 </div>259 </div>260 </section>261 262 <!-- CTA Section -->263 <section class="relative z-10 py-32 px-6 lg:px-12 bg-gradient-to-r from-blue-600/80 to-purple-600/80 backdrop-blur-sm">264 <div class="max-w-4xl mx-auto text-center">265 <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Marketing?</h2>266 <p class="text-xl text-white/90 mb-8">Schedule a free consultation with our team to discuss your goals and how we can help.</p>267 <button class="px-10 py-5 bg-white text-gray-900 font-bold rounded-full hover:bg-gray-100 transition">Book a Free Strategy Session</button>268 </div>269 </section>270 271 <!-- Footer -->272 <footer id="contact" class="relative z-10 py-16 px-6 lg:px-12 bg-gray-900/90 backdrop-blur-sm">273 <div class="max-w-6xl mx-auto">274 <div class="grid grid-cols-1 md:grid-cols-4 gap-12">275 <div>276 <div class="flex items-center space-x-2 mb-6">277 <i data-feather="zap" class="text-blue-400"></i>278 <span class="text-2xl font-bold gradient-text">MarketVerse</span>279 </div>280 <p class="text-gray-400 mb-6">360° marketing solutions for the digital age.</p>281 <div class="flex space-x-4">282 <a href="#" class="text-gray-400 hover:text-blue-400"><i data-feather="facebook"></i></a>283 <a href="#" class="text-gray-400 hover:text-blue-400"><i data-feather="twitter"></i></a>284 <a href="#" class="text-gray-400 hover:text-blue-400"><i data-feather="linkedin"></i></a>285 <a href="#" class="text-gray-400 hover:text-blue-400"><i data-feather="instagram"></i></a>286 </div>287 </div>288 289 <div>290 <h3 class="text-lg font-bold mb-6">Services</h3>291 <ul class="space-y-3">292 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Digital Strategy</a></li>293 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Web Development</a></li>294 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Content Creation</a></li>295 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Social Media</a></li>296 </ul>297 </div>298 299 <div>300 <h3 class="text-lg font-bold mb-6">Company</h3>301 <ul class="space-y-3">302 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">About Us</a></li>303 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Case Studies</a></li>304 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Careers</a></li>305 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Blog</a></li>306 </ul>307 </div>308 309 <div>310 <h3 class="text-lg font-bold mb-6">Contact</h3>311 <ul class="space-y-3">312 <li class="flex items-center space-x-2 text-gray-400">313 <i data-feather="mail" class="w-5 h-5"></i>314 <span>hello@marketverse.com</span>315 </li>316 <li class="flex items-center space-x-2 text-gray-400">317 <i data-feather="phone" class="w-5 h-5"></i>318 <span>+1 (555) 123-4567</span>319 </li>320 <li class="flex items-center space-x-2 text-gray-400">321 <i data-feather="map-pin" class="w-5 h-5"></i>322 <span>123 Marketing Ave, Suite 500<br>San Francisco, CA 94107</span>323 </li>324 </ul>325 </div>326 </div>327 328 <div class="border-t border-gray-800 mt-16 pt-8 flex flex-col md:flex-row justify-between items-center">329 <p class="text-gray-500">© 2023 MarketVerse. All rights reserved.</p>330 <div class="flex space-x-6 mt-4 md:mt-0">331 <a href="#" class="text-gray-500 hover:text-blue-400 transition">Privacy Policy</a>332 <a href="#" class="text-gray-500 hover:text-blue-400 transition">Terms of Service</a>333 <a href="#" class="text-gray-500 hover:text-blue-400 transition">Cookies</a>334 </div>335 </div>336 </div>337 </footer>338 339 <script>340 // Initialize Vanta.js globe341 VANTA.GLOBE({342 el: "#vanta-bg",343 mouseControls: true,344 touchControls: true,345 gyroControls: false,346 minHeight: 200.00,347 minWidth: 200.00,348 scale: 1.00,349 scaleMobile: 1.00,350 color: 0x3b82f6,351 backgroundColor: 0x111827,352 size: 0.8353 });354 355 // Smooth scrolling for anchor links356 document.querySelectorAll('a[href^="#"]').forEach(anchor => {357 anchor.addEventListener('click', function (e) {358 e.preventDefault();359 document.querySelector(this.getAttribute('href')).scrollIntoView({360 behavior: 'smooth'361 });362 });363 });364 365 // Animate elements on scroll366 const observer = new IntersectionObserver((entries) => {367 entries.forEach(entry => {368 if (entry.isIntersecting) {369 entry.target.classList.add('animate-fadeIn');370 }371 });372 }, { threshold: 0.1 });373 374 document.querySelectorAll('.service-card, #about, #team').forEach(el => {375 observer.observe(el);376 });377 </script>378 <script>feather.replace();</script>379</body>380</html>381