dapoofficial/athleticavision-studio
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>AthleticaVision Studio - Sportswear Design Platform</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://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>12 <style>13 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Poppins:wght@300;400;600;700&display=swap');14 15 body {16 font-family: 'Poppins', sans-serif;17 overflow-x: hidden;18 }19 20 .gradient-text {21 background: linear-gradient(90deg, #3a7bd5 0%, #00d2ff 100%);22 -webkit-background-clip: text;23 background-clip: text;24 color: transparent;25 }26 27 .design-card {28 transition: all 0.3s ease;29 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);30 }31 32 .design-card:hover {33 transform: translateY(-8px);34 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);35 }36 </style>37</head>38<body class="bg-gray-50" id="vanta-bg">39 <!-- Navigation -->40 <nav class="bg-white shadow-sm py-4 px-6 sticky top-0 z-50">41 <div class="max-w-7xl mx-auto flex justify-between items-center">42 <div class="flex items-center space-x-2">43 <i data-feather="activity" class="text-indigo-600 w-8 h-8"></i>44 <span class="text-xl font-bold text-gray-800">AthleticaVision</span>45 </div>46 <div class="hidden md:flex space-x-8">47 <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Designs</a>48 <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Tech Specs</a>49 <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Colorways</a>50 <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">About</a>51 </div>52 <button class="md:hidden focus:outline-none" id="mobile-menu-button">53 <i data-feather="menu" class="w-6 h-6 text-gray-700"></i>54 </button>55 </div>56 </nav>57 58 <!-- Hero Section -->59 <section class="py-16 md:py-24 px-6">60 <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center">61 <div class="md:w-1/2 mb-10 md:mb-0">62 <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">63 Crafting <span class="gradient-text">Performance</span> Wear That Moves With You64 </h1>65 <p class="text-lg text-gray-600 mb-8">66 Transform your athletic wear designs from concept to technical specifications with our intuitive platform. Perfect for modest sportswear with premium functionality.67 </p>68 <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">69 <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">70 Start Designing71 </button>72 <button class="border border-gray-300 hover:border-indigo-400 text-gray-700 px-6 py-3 rounded-lg font-medium transition duration-300 flex items-center justify-center">73 <i data-feather="play" class="mr-2 w-4 h-4"></i> Watch Demo74 </button>75 </div>76 </div>77 <div class="md:w-1/2 flex justify-center">78 <div class="relative w-full max-w-md">79 <div class="absolute -top-6 -left-6 w-full h-full bg-indigo-100 rounded-2xl z-0"></div>80 <div class="relative z-10 bg-white p-4 rounded-2xl shadow-xl">81 <img src="http://static.photos/technology/640x360/42" alt="Design Preview" class="w-full rounded-lg">82 <div class="mt-4 flex justify-between">83 <div class="flex space-x-2">84 <span class="px-3 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded-full">Hoodie</span>85 <span class="px-3 py-1 bg-pink-100 text-pink-800 text-xs font-medium rounded-full">Leggings</span>86 </div>87 <div class="text-sm text-gray-500">Rafa-Elle Collection</div>88 </div>89 </div>90 </div>91 </div>92 </div>93 </section>94 95 <!-- Featured Designs -->96 <section class="py-16 px-6 bg-white">97 <div class="max-w-7xl mx-auto">98 <div class="text-center mb-12">99 <h2 class="text-3xl font-bold text-gray-800 mb-4">Featured Sportswear Designs</h2>100 <p class="text-gray-600 max-w-2xl mx-auto">Browse our collection of premium athletic wear designs with detailed technical specifications</p>101 </div>102 103 <div class="grid grid-cols-1 md:grid-cols-2 gap-8">104 <!-- Design 1 -->105 <div class="design-card bg-white rounded-xl overflow-hidden border border-gray-100">106 <div class="relative h-64 overflow-hidden">107 <img src="http://static.photos/fitness/640x360/101" alt="Modest Gym Set" class="w-full h-full object-cover">108 <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">109 <h3 class="text-white font-bold text-xl">Modest Gym Hoodie Set</h3>110 <p class="text-gray-200 text-sm">Deep Olive / Muted Rose</p>111 </div>112 </div>113 <div class="p-6">114 <div class="flex justify-between items-start mb-4">115 <div>116 <span class="inline-block px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded">Full Coverage</span>117 </div>118 <div class="flex space-x-2">119 <span class="inline-block px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded">Front View</span>120 <span class="inline-block px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded">Back View</span>121 </div>122 </div>123 <ul class="space-y-2 text-gray-700">124 <li class="flex items-start">125 <i data-feather="check-circle" class="w-4 h-4 text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>126 <span>Long-sleeve hoodie with thumb holes</span>127 </li>128 <li class="flex items-start">129 <i data-feather="check-circle" class="w-4 h-4 text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>130 <span>High-waisted bootcut leggings</span>131 </li>132 <li class="flex items-start">133 <i data-feather="check-circle" class="w-4 h-4 text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>134 <span>Adjustable hem drawcords</span>135 </li>136 </ul>137 <button class="mt-6 w-full py-2 border border-indigo-600 text-indigo-600 hover:bg-indigo-600 hover:text-white rounded-lg transition duration-300 flex items-center justify-center">138 <i data-feather="download" class="mr-2 w-4 h-4"></i> View Tech Specs139 </button>140 </div>141 </div>142 143 <!-- Design 2 -->144 <div class="design-card bg-white rounded-xl overflow-hidden border border-gray-100">145 <div class="relative h-64 overflow-hidden">146 <img src="http://static.photos/fitness/640x360/102" alt="Tunic Gym Set" class="w-full h-full object-cover">147 <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">148 <h3 class="text-white font-bold text-xl">Tunic Hoodie Set</h3>149 <p class="text-gray-200 text-sm">Soft Black / Mocha</p>150 </div>151 </div>152 <div class="p-6">153 <div class="flex justify-between items-start mb-4">154 <div>155 <span class="inline-block px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded">Knee Length</span>156 </div>157 <div class="flex space-x-2">158 <span class="inline-block px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded">Front View</span>159 <span class="inline-block px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded">Back View</span>160 </div>161 </div>162 <ul class="space-y-2 text-gray-700">163 <li class="flex items-start">164 <i data-feather="check-circle" class="w-4 h-4 text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>165 <span>Tunic hoodie with side slits</span>166 </li>167 <li class="flex items-start">168 <i data-feather="check-circle" class="w-4 h-4 text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>169 <span>Classic high-waisted leggings</span>170 </li>171 <li class="flex items-start">172 <i data-feather="check-circle" class="w-4 h-4 text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>173 <span>Breathable performance knit</span>174 </li>175 </ul>176 <button class="mt-6 w-full py-2 border border-indigo-600 text-indigo-600 hover:bg-indigo-600 hover:text-white rounded-lg transition duration-300 flex items-center justify-center">177 <i data-feather="download" class="mr-2 w-4 h-4"></i> View Tech Specs178 </button>179 </div>180 </div>181 </div>182 </div>183 </section>184 185 <!-- Tech Specs Section -->186 <section class="py-16 px-6 bg-gray-50">187 <div class="max-w-7xl mx-auto">188 <div class="text-center mb-12">189 <h2 class="text-3xl font-bold text-gray-800 mb-4">Technical Specifications</h2>190 <p class="text-gray-600 max-w-2xl mx-auto">Detailed garment specifications for perfect production execution</p>191 </div>192 193 <div class="grid grid-cols-1 md:grid-cols-2 gap-8">194 <div class="bg-white rounded-xl p-6 shadow-sm">195 <h3 class="text-xl font-bold text-gray-800 mb-6 flex items-center">196 <i data-feather="file-text" class="mr-2 text-indigo-600"></i> Hoodie Tech Flats197 </h3>198 <div class="space-y-4">199 <div class="flex items-start">200 <div class="flex-shrink-0 bg-indigo-100 p-2 rounded-lg mr-4">201 <i data-feather="ruler" class="w-6 h-6 text-indigo-600"></i>202 </div>203 <div>204 <h4 class="font-medium text-gray-800">Key Measurements</h4>205 <p class="text-gray-600 text-sm">Hip-to-low-seat length, sleeve with thumb holes, adjustable drawcords</p>206 </div>207 </div>208 <div class="flex items-start">209 <div class="flex-shrink-0 bg-indigo-100 p-2 rounded-lg mr-4">210 <i data-feather="scissors" class="w-6 h-6 text-indigo-600"></i>211 </div>212 <div>213 <h4 class="font-medium text-gray-800">Construction Details</h4>214 <p class="text-gray-600 text-sm">Minimal seams, clean hood, subtle curved hem, logo placement</p>215 </div>216 </div>217 <div class="flex items-start">218 <div class="flex-shrink-0 bg-indigo-100 p-2 rounded-lg mr-4">219 <i data-feather="droplet" class="w-6 h-6 text-indigo-600"></i>220 </div>221 <div>222 <h4 class="font-medium text-gray-800">Fabric Specifications</h4>223 <p class="text-gray-600 text-sm">Smooth performance knit, matte finish, four-way stretch, opaque</p>224 </div>225 </div>226 </div>227 </div>228 229 <div class="bg-white rounded-xl p-6 shadow-sm">230 <h3 class="text-xl font-bold text-gray-800 mb-6 flex items-center">231 <i data-feather="file-text" class="mr-2 text-pink-600"></i> Leggings Tech Flats232 </h3>233 <div class="space-y-4">234 <div class="flex items-start">235 <div class="flex-shrink-0 bg-pink-100 p-2 rounded-lg mr-4">236 <i data-feather="ruler" class="w-6 h-6 text-pink-600"></i>237 </div>238 <div>239 <h4 class="font-medium text-gray-800">Key Measurements</h4>240 <p class="text-gray-600 text-sm">High waist, fitted to knee, gentle flare from mid-calf</p>241 </div>242 </div>243 <div class="flex items-start">244 <div class="flex-shrink-0 bg-pink-100 p-2 rounded-lg mr-4">245 <i data-feather="scissors" class="w-6 h-6 text-pink-600"></i>246 </div>247 <div>248 <h4 class="font-medium text-gray-800">Construction Details</h4>249 <p class="text-gray-600 text-sm">No side seams if possible, gusset for mobility, compressive fit</p>250 </div>251 </div>252 <div class="flex items-start">253 <div class="flex-shrink-0 bg-pink-100 p-2 rounded-lg mr-4">254 <i data-feather="droplet" class="w-6 h-6 text-pink-600"></i>255 </div>256 <div>257 <h4 class="font-medium text-gray-800">Fabric Specifications</h4>258 <p class="text-gray-600 text-sm">Opaque, compressive, matte finish, four-way stretch</p>259 </div>260 </div>261 </div>262 </div>263 </div>264 265 <div class="mt-12 bg-white rounded-xl p-8 shadow-sm">266 <div class="flex flex-col md:flex-row items-center">267 <div class="md:w-1/2 mb-6 md:mb-0">268 <img src="http://static.photos/workspace/640x360/201" alt="Tech Specs Example" class="w-full rounded-lg shadow">269 </div>270 <div class="md:w-1/2 md:pl-10">271 <h3 class="text-2xl font-bold text-gray-800 mb-4">Detailed Technical Drawings</h3>272 <p class="text-gray-600 mb-6">Our comprehensive tech packs include all the details your production team needs:</p>273 <ul class="space-y-3 mb-8">274 <li class="flex items-start">275 <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>276 <span>Stitch lines and seam placements</span>277 </li>278 <li class="flex items-start">279 <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>280 <span>Callout arrows for special features</span>281 </li>282 <li class="flex items-start">283 <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>284 <span>Detailed measurement charts</span>285 </li>286 <li class="flex items-start">287 <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>288 <span>Fabric and trim specifications</span>289 </li>290 </ul>291 <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300 w-full md:w-auto">292 Download Sample Tech Pack293 </button>294 </div>295 </div>296 </div>297 </div>298 </section>299 300 <!-- Colorway Options -->301 <section class="py-16 px-6 bg-white">302 <div class="max-w-7xl mx-auto">303 <div class="text-center mb-12">304 <h2 class="text-3xl font-bold text-gray-800 mb-4">Colorway Options</h2>305 <p class="text-gray-600 max-w-2xl mx-auto">Explore our curated palette of performance-ready hues</p>306 </div>307 308 <div class="grid grid-cols-2 md:grid-cols-4 gap-6">309 <div class="text-center">310 <div class="w-full h-32 bg-gray-800 rounded-lg mb-3 shadow"></div>311 <h4 class="font-medium text-gray-800">Soft Black</h4>312 <p class="text-gray-600 text-sm">RAL 9017</p>313 </div>314 <div class="text-center">315 <div class="w-full h-32 bg-rose-200 rounded-lg mb-3 shadow"></div>316 <h4 class="font-medium text-gray-800">Muted Rose</h4>317 <p class="text-gray-600 text-sm">Pantone 13-1406</p>318 </div>319 <div class="text-center">320 <div class="w-full h-32 bg-green-800 rounded-lg mb-3 shadow"></div>321 <h4 class="font-medium text-gray-800">Deep Olive</h4>322 <p class="text-gray-600 text-sm">Pantone 19-0515</p>323 </div>324 <div class="text-center">325 <div class="w-full h-32 bg-amber-800 rounded-lg mb-3 shadow"></div>326 <h4 class="font-medium text-gray-800">Mocha</h4>327 <p class="text-gray-600 text-sm">Pantone 18-1015</p>328 </div>329 </div>330 </div>331 </section>332 333 <!-- CTA Section -->334 <section class="py-16 px-6 bg-indigo-600">335 <div class="max-w-4xl mx-auto text-center">336 <h2 class="text-3xl font-bold text-white mb-6">Ready to Create Your Perfect Sportswear Collection?</h2>337 <p class="text-indigo-100 mb-8 text-lg">Join hundreds of designers who trust AthleticaVision for their performance wear designs.</p>338 <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">339 <button class="bg-white text-indigo-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-medium transition duration-300">340 Start Free Trial341 </button>342 <button class="bg-transparent border-2 border-white text-white hover:bg-white/10 px-8 py-3 rounded-lg font-medium transition duration-300">343 Request Demo344 </button>345 </div>346 </div>347 </section>348 349 <!-- Footer -->350 <footer class="bg-gray-900 text-white py-12 px-6">351 <div class="max-w-7xl mx-auto">352 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">353 <div>354 <div class="flex items-center space-x-2 mb-4">355 <i data-feather="activity" class="text-indigo-400 w-8 h-8"></i>356 <span class="text-xl font-bold">AthleticaVision</span>357 </div>358 <p class="text-gray-400 mb-4">Premium sportswear design tools for the modern fashion professional.</p>359 <div class="flex space-x-4">360 <a href="#" class="text-gray-400 hover:text-white">361 <i data-feather="instagram" class="w-5 h-5"></i>362 </a>363 <a href="#" class="text-gray-400 hover:text-white">364 <i data-feather="twitter" class="w-5 h-5"></i>365 </a>366 <a href="#" class="text-gray-400 hover:text-white">367 <i data-feather="linkedin" class="w-5 h-5"></i>368 </a>369 </div>370 </div>371 <div>372 <h4 class="font-bold text-lg mb-4">Resources</h4>373 <ul class="space-y-2">374 <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>375 <li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li>376 <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>377 <li><a href="#" class="text-gray-400 hover:text-white">Design Inspiration</a></li>378 </ul>379 </div>380 <div>381 <h4 class="font-bold text-lg mb-4">Company</h4>382 <ul class="space-y-2">383 <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>384 <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>385 <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>386 <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li>387 </ul>388 </div>389 <div>390 <h4 class="font-bold text-lg mb-4">Legal</h4>391 <ul class="space-y-2">392 <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>393 <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>394 <li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li>395 <li><a href="#" class="text-gray-400 hover:text-white">GDPR</a></li>396 </ul>397 </div>398 </div>399 <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">400 <p>© 2023 AthleticaVision Studio. All rights reserved.</p>401 </div>402 </div>403 </footer>404 405 <script>406 feather.replace();407 408 // Initialize Vanta.js background409 VANTA.NET({410 el: "#vanta-bg",411 mouseControls: true,412 touchControls: true,413 gyroControls: false,414 minHeight: 200.00,415 minWidth: 200.00,416 scale: 1.00,417 scaleMobile: 1.00,418 color: 0x6366f1,419 backgroundColor: 0xf8fafc,420 points: 10.00,421 maxDistance: 22.00,422 spacing: 18.00423 });424 425 // Mobile menu toggle functionality426 document.getElementById('mobile-menu-button').addEventListener('click', function() {427 // You would implement mobile menu toggle here428 console.log('Mobile menu toggled');429 });430 </script>431</body>432</html>433