ffbks/solescience-chronicles
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>InsoleWars - Foot Comfort Revolution</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>10 <style>11 @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;700&display=swap');12 13 body {14 font-family: 'Montserrat', sans-serif;15 background-color: #f8f9fa;16 }17 18 .hero-title {19 font-family: 'Bebas Neue', cursive;20 letter-spacing: 2px;21 }22 23 .nav-link {24 position: relative;25 }26 27 .nav-link::after {28 content: '';29 position: absolute;30 width: 0;31 height: 2px;32 bottom: 0;33 left: 0;34 background-color: #000;35 transition: width 0.3s ease;36 }37 38 .nav-link:hover::after {39 width: 100%;40 }41 42 .feature-card {43 transition: all 0.3s ease;44 background: linear-gradient(145deg, #ffffff, #f1f1f1);45 }46 47 .feature-card:hover {48 transform: translateY(-5px);49 box-shadow: 0 10px 25px rgba(0,0,0,0.1);50 }51 </style>52</head>53<body>54 <!-- Header -->55 <div id="header-container"></div>56<!-- Hero Section -->57 <section class="relative overflow-hidden">58 <div id="vanta-bg" class="absolute inset-0 z-0"></div>59 <div class="container mx-auto px-6 py-24 relative z-10">60 <div class="max-w-3xl">61 <h1 class="hero-title text-6xl md:text-8xl font-bold text-gray-900 mb-6">THE FOOT COMFORT REVOLUTION</h1>62 <p class="text-xl text-gray-700 mb-8">Discover the cutting-edge science and technology behind modern foot comfort solutions that are changing lives.</p>63 <div class="flex space-x-4">64 <a href="#" class="bg-black text-white px-8 py-3 rounded-full font-bold hover:bg-gray-800 transition duration-300">Learn More</a>65 <a href="#" class="border-2 border-black px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition duration-300">Watch Video</a>66 </div>67 </div>68 </div>69 </section>70 71 <!-- Technology Section -->72 <section class="py-20 bg-white">73 <div class="container mx-auto px-6">74 <h2 class="text-4xl font-bold text-center mb-16">THE SCIENCE OF COMFORT</h2>75 76 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">77 <!-- Feature 1 -->78 <div class="feature-card rounded-xl p-8">79 <div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mb-6">80 <i data-feather="cpu" class="w-8 h-8"></i>81 </div>82 <h3 class="text-2xl font-bold mb-3">Advanced Materials</h3>83 <p class="text-gray-600">Explore the cutting-edge polymers and composites that provide unprecedented support and durability.</p>84 </div>85 86 <!-- Feature 2 -->87 <div class="feature-card rounded-xl p-8">88 <div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mb-6">89 <i data-feather="activity" class="w-8 h-8"></i>90 </div>91 <h3 class="text-2xl font-bold mb-3">Biomechanical Research</h3>92 <p class="text-gray-600">How decades of gait analysis and pressure mapping have led to revolutionary designs.</p>93 </div>94 95 <!-- Feature 3 -->96 <div class="feature-card rounded-xl p-8">97 <div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mb-6">98 <i data-feather="wind" class="w-8 h-8"></i>99 </div>100 <h3 class="text-2xl font-bold mb-3">Sustainable Solutions</h3>101 <p class="text-gray-600">The eco-friendly materials and manufacturing processes shaping the future of foot comfort.</p>102 </div>103 </div>104 </div>105 </section>106 107 <!-- Science Section -->108 <section class="py-20 bg-gray-100">109 <div class="container mx-auto px-6">110 <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">111 <div>112 <h2 class="text-4xl font-bold mb-6">WHY YOUR FEET MATTER</h2>113 <p class="text-gray-700 mb-6">The human foot is a marvel of engineering with 26 bones, 33 joints, and over 100 muscles, tendons, and ligaments. Modern insole technology works in harmony with this complex system to provide optimal support and comfort.</p>114 <p class="text-gray-700 mb-8">From pressure redistribution to shock absorption, discover how scientific innovations are solving age-old problems of foot fatigue and discomfort.</p>115 <a href="#" class="bg-black text-white px-8 py-3 rounded-full font-bold hover:bg-gray-800 transition duration-300 inline-block">Explore the Science</a>116 </div>117 <div class="bg-white rounded-xl overflow-hidden shadow-lg">118 <img src="https://images.unsplash.com/photo-1600334129128-685c5582fd35?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="Foot Anatomy" class="w-full h-auto">119 </div>120 </div>121 </div>122 </section>123 124 <!-- Innovation Timeline -->125 <section class="py-20 bg-white">126 <div class="container mx-auto px-6">127 <h2 class="text-4xl font-bold text-center mb-16">THE EVOLUTION OF COMFORT</h2>128 129 <div class="relative">130 <!-- Timeline line -->131 <div class="hidden md:block absolute left-1/2 h-full w-1 bg-gray-200 transform -translate-x-1/2"></div>132 133 <!-- Timeline items -->134 <div class="space-y-12">135 <!-- Item 1 -->136 <div class="relative flex flex-col md:flex-row items-center">137 <div class="md:w-1/2 md:pr-12 mb-8 md:mb-0 md:text-right">138 <h3 class="text-2xl font-bold mb-2">Early Innovations</h3>139 <p class="text-gray-600">The first mass-produced insoles in the 1920s used simple cork and leather designs.</p>140 </div>141 <div class="hidden md:block w-8 h-8 rounded-full bg-black absolute left-1/2 transform -translate-x-1/2"></div>142 <div class="md:w-1/2 md:pl-12">143 <div class="bg-gray-100 p-6 rounded-lg">144 <img src="https://images.unsplash.com/photo-1560343090-f0409e92791a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Vintage shoes" class="rounded-lg">145 </div>146 </div>147 </div>148 149 <!-- Item 2 -->150 <div class="relative flex flex-col md:flex-row items-center">151 <div class="md:w-1/2 md:pr-12 order-2 md:order-1">152 <div class="bg-gray-100 p-6 rounded-lg">153 <img src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Modern shoes" class="rounded-lg">154 </div>155 </div>156 <div class="hidden md:block w-8 h-8 rounded-full bg-black absolute left-1/2 transform -translate-x-1/2"></div>157 <div class="md:w-1/2 md:pl-12 mb-8 md:mb-0 order-1 md:order-2">158 <h3 class="text-2xl font-bold mb-2">Modern Materials</h3>159 <p class="text-gray-600">The 1970s saw the introduction of memory foam and EVA, revolutionizing comfort technology.</p>160 </div>161 </div>162 163 <!-- Item 3 -->164 <div class="relative flex flex-col md:flex-row items-center">165 <div class="md:w-1/2 md:pr-12 mb-8 md:mb-0 md:text-right">166 <h3 class="text-2xl font-bold mb-2">Smart Technology</h3>167 <p class="text-gray-600">Today's insoles incorporate pressure sensors and temperature regulation for personalized comfort.</p>168 </div>169 <div class="hidden md:block w-8 h-8 rounded-full bg-black absolute left-1/2 transform -translate-x-1/2"></div>170 <div class="md:w-1/2 md:pl-12">171 <div class="bg-gray-100 p-6 rounded-lg">172 <img src="https://images.unsplash.com/photo-1556909114-44e60c6a1e6e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Tech shoes" class="rounded-lg">173 </div>174 </div>175 </div>176 </div>177 </div>178 </div>179 </section>180 181 <!-- CTA Section -->182 <section class="py-20 bg-black text-white">183 <div class="container mx-auto px-6 text-center">184 <h2 class="text-4xl font-bold mb-6">JOIN THE COMFORT REVOLUTION</h2>185 <p class="text-xl mb-8 max-w-2xl mx-auto">Stay updated with the latest innovations in foot comfort technology and science.</p>186 <div class="max-w-md mx-auto flex">187 <input type="email" placeholder="Your email" class="bg-gray-800 text-white px-4 py-3 rounded-l focus:outline-none w-full">188 <button class="bg-gray-700 px-6 rounded-r hover:bg-gray-600 font-bold">189 Subscribe190 </button>191 </div>192 </div>193 </section>194 <!-- Footer -->195 <div id="footer-container"></div>196 <script>197 // Load components198 fetch('components/header.html')199 .then(response => response.text())200 .then(data => {201 document.getElementById('header-container').innerHTML = data;202 });203 204 fetch('components/footer.html')205 .then(response => response.text())206 .then(data => {207 document.getElementById('footer-container').innerHTML = data;208 });209 210 feather.replace();211 212 // Initialize Vanta.js213 VANTA.GLOBE({214 el: "#vanta-bg",215 mouseControls: true,216 touchControls: true,217 gyroControls: false,218 minHeight: 200.00,219 minWidth: 200.00,220 scale: 1.00,221 scaleMobile: 1.00,222 color: 0x000000,223 backgroundColor: 0xf8f9fa,224 size: 0.8225 });226 </script>227</body>228</html>