You are an expert full-stack developer specializing in high-performance WordPress sites with Avada theme, focusing on WOW-effects, gamification, and resource optimization. Create a complete, modern website for Nord Wind – a Russian manufacturer of upper clothing with thermoregulation (B2B wholesale focus). Base the structure on the current simple site at https://nw-wear.com, which features a static landing page with sections on advantages (48-hour order shipping, comfort in unpredictable climate, fitted designs, quality materials from Italy/Korea/Scandinavia, trendy collections, 250+ variants, 2-week delivery), new collections (warehouse stock in St. Petersburg, 2-14 day delivery), wholesale privileges (partial size rows, free marketing materials like catalogs/brochures/bags/care guides, quick call-back in 30 min, 24/7 chat via WhatsApp/Viber/Skype), company mission (30+ years history, innovation for urban life in various Russian climates, individual proposals via email nw@nw-wear.com).
39ef649 verified | <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nord Wind - Верхняя одежда с терморегуляцией</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); | |
| :root { | |
| --primary-color: #2c5aa0; | |
| --season-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| overflow-x: hidden; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .card-hover { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.1); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.8s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .parallax-bg { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| .scroll-smooth { | |
| scroll-behavior: smooth; | |
| } | |
| .ripple { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .ripple:before { | |
| content: ""; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.5); | |
| transform: translate(-50%, -50%); | |
| transition: width 0.6s, height 0.6s; | |
| } | |
| .ripple:hover:before { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| .particle { | |
| position: fixed; | |
| pointer-events: none; | |
| opacity: 0; | |
| animation: particleFloat 4s infinite; | |
| } | |
| @keyframes particleFloat { | |
| 0% { transform: translateY(100vh) rotate(0deg); opacity: 0; } | |
| 10% { opacity: 1; } | |
| 90% { opacity: 1; } | |
| 100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; } | |
| } | |
| .snow-particle { | |
| width: 10px; | |
| height: 10px; | |
| background: white; | |
| border-radius: 50%; | |
| box-shadow: 0 0 10px rgba(255,255,255,0.8); | |
| } | |
| .leaf-particle { | |
| width: 15px; | |
| height: 15px; | |
| background: linear-gradient(45deg, #ff6b35, #f7931e); | |
| clip-path: polygon(50% 0%, 0% 50%, 50% 100%, 100% 50%); | |
| } | |
| .flower-particle { | |
| width: 20px; | |
| height: 20px; | |
| background: radial-gradient(circle, #ff69b4, #ff1493); | |
| border-radius: 50% 0; | |
| } | |
| .temp-slider { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| height: 8px; | |
| background: linear-gradient(to right, #00bfff, #ff4500); | |
| outline: none; | |
| opacity: 0.9; | |
| transition: opacity 0.2s; | |
| border-radius: 4px; | |
| } | |
| .temp-slider:hover { | |
| opacity: 1; | |
| } | |
| .temp-slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 25px; | |
| height: 25px; | |
| background: white; | |
| cursor: pointer; | |
| border-radius: 50%; | |
| border: 3px solid var(--primary-color); | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.3); | |
| } | |
| .tech-demo { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .water-drop { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background: radial-gradient(circle, #4fc3f7, #0288d1); | |
| border-radius: 50%; | |
| animation: waterRoll 3s infinite; | |
| } | |
| @keyframes waterRoll { | |
| 0% { transform: translate(0, 0) scale(1); } | |
| 50% { transform: translate(100px, 50px) scale(0.8); } | |
| 100% { transform: translate(200px, 100px) scale(0.6); opacity: 0; } | |
| } | |
| .fur-strand { | |
| position: absolute; | |
| width: 2px; | |
| height: 20px; | |
| background: linear-gradient(to bottom, #8b4513, #d2691e); | |
| transform-origin: bottom center; | |
| animation: furSway 2s infinite ease-in-out; | |
| } | |
| @keyframes furSway { | |
| 0%, 100% { transform: rotate(0deg); } | |
| 50% { transform: rotate(10deg); } | |
| } | |
| .product-3d { | |
| perspective: 1000px; | |
| } | |
| .product-3d-inner { | |
| transition: transform 0.6s; | |
| transform-style: preserve-3d; | |
| } | |
| .product-3d:hover .product-3d-inner { | |
| transform: rotateY(180deg); | |
| } | |
| .gamification-badge { | |
| background: linear-gradient(135deg, #ffd700, #ffed4e); | |
| color: #333; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 12px; | |
| font-weight: bold; | |
| display: inline-block; | |
| animation: badgeGlow 2s infinite; | |
| } | |
| @keyframes badgeGlow { | |
| 0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } | |
| 50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); } | |
| } | |
| .season-winter { --season-bg: linear-gradient(135deg, #667eea 0%, #4a5568 100%); } | |
| .season-spring { --season-bg: linear-gradient(135deg, #48bb78 0%, #68d391 100%); } | |
| .season-summer { --season-bg: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%); } | |
| .season-autumn { --season-bg: linear-gradient(135deg, #ed8936 0%, #975a16 100%); } | |
| </style> | |
| <body class="scroll-smooth" id="app-body"> | |
| <!-- Seasonal Particles Container --> | |
| <div id="particles-container"></div> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 w-full bg-white/95 backdrop-blur-md shadow-sm z-50"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="wind" class="w-8 h-8 text-indigo-600"></i> | |
| <span class="text-2xl font-bold gradient-text">Nord Wind</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <div class="relative group"> | |
| <a href="#collections" class="text-gray-700 hover:text-indigo-600 transition-colors flex items-center space-x-1"> | |
| <span>Коллекции</span> | |
| <i data-feather="chevron-down" class="w-4 h-4"></i> | |
| </a> | |
| <div class="absolute top-full left-0 w-64 bg-white shadow-lg rounded-lg p-4 hidden group-hover:block"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Зима 2025</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Весна 2025</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Лето 2025</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Осень 2025</a> | |
| </div> | |
| </div> | |
| <a href="#catalog" class="text-gray-700 hover:text-indigo-600 transition-colors">Каталог</a> | |
| <a href="#technology" class="text-gray-700 hover:text-indigo-600 transition-colors">Технологии</a> | |
| <a href="#about" class="text-gray-700 hover:text-indigo-600 transition-colors">О бренде</a> | |
| <a href="#partnership" class="text-gray-700 hover:text-indigo-600 transition-colors">Партнерство</a> | |
| <button onclick="showB2BLogin()" class="bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700 transition-all hover:scale-105 ripple"> | |
| B2B вход | |
| </button> | |
| </div> | |
| <button class="md:hidden" onclick="toggleMobileMenu()"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobileMenu" class="hidden md:hidden bg-white border-t"> | |
| <div class="container mx-auto px-4 py-4 space-y-3"> | |
| <a href="#about" class="block text-gray-700 hover:text-indigo-600">О бренде</a> | |
| <a href="#collections" class="block text-gray-700 hover:text-indigo-600">Коллекции</a> | |
| <a href="#advantages" class="block text-gray-700 hover:text-indigo-600">Преимущества</a> | |
| <a href="#partnership" class="block text-gray-700 hover:text-indigo-600">Партнерство</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section with Weather Adaptation --> | |
| <section id="hero" class="pt-24 min-h-screen flex items-center relative overflow-hidden"> | |
| <div class="absolute inset-0 parallax-bg" id="hero-bg"></div> | |
| <div class="container mx-auto px-4 relative z-10"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div data-aos="fade-right"> | |
| <!-- Weather Widget --> | |
| <div class="bg-white rounded-xl shadow-lg p-4 mb-6 inline-block"> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="cloud" class="w-6 h-6 text-blue-500"></i> | |
| <div> | |
| <p class="text-sm text-gray-600">Ваш город</p> | |
| <p class="text-lg font-bold"><span id="city-name">Санкт-Петербург</span>: <span id="temp">-5°C</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6 leading-tight"> | |
| Верхняя одежда с <span class="gradient-text">терморегуляцией</span> | |
| </h1> | |
| <p class="text-xl text-gray-600 mb-8"> | |
| Идеально для вашей погоды. Проверено в 30+ странах. | |
| </p> | |
| <!-- Temperature Slider --> | |
| <div class="mb-8"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Выберите температуру для рекомендации:</label> | |
| <div class="flex items-center space-x-4"> | |
| <span class="text-sm text-blue-500">-40°C</span> | |
| <input type="range" min="-40" max="35" value="-5" class="temp-slider flex-1" id="tempSlider" oninput="updateTempRecommendation(this.value)"> | |
| <span class="text-sm text-red-500">+35°C</span> | |
| </div> | |
| <p class="mt-2 text-sm text-gray-600"> | |
| Рекомендуется: <span id="temp-recommendation" class="font-bold text-indigo-600">Зимние куртки с утеплителем MAX</span> | |
| </p> | |
| </div> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <button onclick="scrollToSection('catalog')" class="bg-indigo-600 text-white px-8 py-4 rounded-full hover:bg-indigo-700 transition-all hover:scale-105 flex items-center justify-center space-x-2 ripple"> | |
| <span>Смотреть каталог</span> | |
| <i data-feather="arrow-right" class="w-5 h-5"></i> | |
| </button> | |
| <button onclick="showB2BLogin()" class="border-2 border-indigo-600 text-indigo-600 px-8 py-4 rounded-full hover:bg-indigo-50 transition-all"> | |
| Оптовые цены | |
| </button> | |
| </div> | |
| <!-- Gamification Progress --> | |
| <div class="mt-6"> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span class="text-gray-600">Прогресс изучения:</span> | |
| <span class="gamification-badge">Новичок</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 mt-2"> | |
| <div class="bg-gradient-to-r from-indigo-500 to-purple-600 h-2 rounded-full" style="width: 15%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative" data-aos="fade-left"> | |
| <div class="product-3d"> | |
| <div class="product-3d-inner"> | |
| <img id="hero-product" src="https://static.photos/fashion/500x600/1" | |
| alt="Терморегуляция" | |
| class="rounded-2xl shadow-2xl w-full object-cover h-[600px] backface-hidden"> | |
| <img src="https://static.photos/fashion/500x600/2" | |
| alt="Back view" | |
| class="absolute inset-0 rounded-2xl shadow-2xl w-full object-cover h-[600px] backface-hidden rotate-y-180"> | |
| </div> | |
| </div> | |
| <!-- Interactive Tech Demo --> | |
| <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-xl shadow-lg tech-demo" id="tech-demo"> | |
| <div class="water-drop"></div> | |
| <div class="fur-strand" style="top: 20px; left: 50px;"></div> | |
| <div class="fur-strand" style="top: 20px; left: 55px; animation-delay: 0.2s;"></div> | |
| <div class="fur-strand" style="top: 20px; left: 60px; animation-delay: 0.4s;"></div> | |
| <p class="text-sm text-gray-600">Технология</p> | |
| <p class="text-lg font-bold text-indigo-600">ThermoControl</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Snow Catch Game (Winter Only) --> | |
| <div id="snow-game" class="fixed bottom-4 right-4 bg-white rounded-lg shadow-lg p-4 hidden"> | |
| <p class="text-sm font-bold mb-2">Поймайте снежинки!</p> | |
| <div class="flex items-center justify-between"> | |
| <span id="snow-score">0</span> | |
| <button onclick="startSnowGame()" class="bg-blue-500 text-white px-3 py-1 rounded text-sm">Старт</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Public Catalog Section --> | |
| <section id="catalog" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12" data-aos="fade-up"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Каталог продукции</h2> | |
| <p class="text-xl text-gray-600">Более 250+ моделей для любого климата</p> | |
| </div> | |
| <!-- Filters --> | |
| <div class="mb-8 flex flex-wrap justify-center gap-4" data-aos="fade-up" data-aos-delay="100"> | |
| <button class="px-4 py-2 bg-white rounded-full shadow hover:shadow-md transition-all filter-btn active" data-filter="all">Все</button> | |
| <button class="px-4 py-2 bg-white rounded-full shadow hover:shadow-md transition-all filter-btn" data-filter="winter">Зима</button> | |
| <button class="px-4 py-2 bg-white rounded-full shadow hover:shadow-md transition-all filter-btn" data-filter="spring">Весна</button> | |
| <button class="px-4 py-2 bg-white rounded-full shadow hover:shadow-md transition-all filter-btn" data-filter="membrane">Мембрана</button> | |
| <button class="px-4 py-2 bg-white rounded-full shadow hover:shadow-md transition-all filter-btn" data-filter="fur">Мех</button> | |
| </div> | |
| <!-- Product Grid --> | |
| <div class="grid md:grid-cols-3 lg:grid-cols-4 gap-6" id="products-grid"> | |
| <!-- Product cards will be dynamically generated --> | |
| </div> | |
| <!-- Load More --> | |
| <div class="text-center mt-12"> | |
| <button onclick="loadMoreProducts()" class="bg-indigo-600 text-white px-8 py-3 rounded-full hover:bg-indigo-700 transition-all hover:scale-105"> | |
| Загрузить ещё | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Advantages Carousel --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12" data-aos="fade-up"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Преимущества Nord Wind</h2> | |
| <p class="text-xl text-gray-600">Почему выбирают нас партнеры по всей России</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 lg:grid-cols-4 gap-6" id="advantages-carousel"> | |
| <div class="card-hover bg-gradient-to-br from-blue-50 to-indigo-100 p-6 rounded-xl text-center" data-aos="zoom-in" data-aos-delay="100"> | |
| <div class="relative mb-4"> | |
| <img src="https://nw-wear.com/wp-content/uploads/2018/01/icon1.png" alt="Терморегуляция" class="w-20 h-20 mx-auto"> | |
| <div class="absolute -top-2 -right-2 w-6 h-6 bg-green-500 rounded-full flex items-center justify-center"> | |
| <i data-feather="check" class="w-4 h-4 text-white"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2">Терморегуляция</h3> | |
| <p class="text-sm text-gray-600">Комфортно на улице, в транспорте и помещении</p> | |
| </div> | |
| <div class="card-hover bg-gradient-to-br from-purple-50 to-pink-100 p-6 rounded-xl text-center" data-aos="zoom-in" data-aos-delay="200"> | |
| <div class="relative mb-4"> | |
| <img src="https://nw-wear.com/wp-content/uploads/2018/01/icon3.png" alt="Размеры" class="w-20 h-20 mx-auto"> | |
| <span class="gamification-badge">ХИТ</span> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2">Размеры 40-66</h3> | |
| <p class="text-sm text-gray-600">Идеальная посадка по фигуре</p> | |
| </div> | |
| <div class="card-hover bg-gradient-to-br from-green-50 to-emerald-100 p-6 rounded-xl text-center"> | |
| <img src="https://nw-wear.com/wp-content/uploads/2018/01/icon41.png" alt="Производство" class="w-20 h-20 mx-auto mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2">Свое производство</h3> | |
| <p class="text-sm text-gray-600">Итальянские утеплители, корейская фурнитура</p> | |
| </div> | |
| <div class="card-hover bg-gradient-to-br from-yellow-50 to-orange-100 p-6 rounded-xl text-center"> | |
| <img src="https://nw-wear.com/wp-content/uploads/2018/01/icon5.png" alt="Мода" class="w-20 h-20 mx-auto mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2">Модные решения</h3> | |
| <p class="text-sm text-gray-600">Актуальные тренды в каждой коллекции</p> | |
| </div> | |
| <div class="card-hover bg-gradient-to-br from-red-50 to-rose-100 p-6 rounded-xl text-center"> | |
| <img src="https://nw-wear.com/wp-content/uploads/2018/01/icon61.png" alt="Для всех" class="w-20 h-20 mx-auto mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2">Для мужчин и женщин</h3> | |
| <p class="text-sm text-gray-600">Около 250 вариантов в каталоге</p> | |
| </div> | |
| <div class="card-hover bg-gradient-to-br from-cyan-50 to-blue-100 p-6 rounded-xl text-center"> | |
| <img src="https://nw-wear.com/wp-content/uploads/2018/01/icon71.png" alt="Доставка" class="w-20 h-20 mx-auto mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2">Доставка по РФ и СНГ</h3> | |
| <p class="text-sm text-gray-600">Быстрая доставка в течение 2 недель</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Collections Section --> | |
| <section id="collections" class="py-20 bg-gradient-to-br from-gray-50 to-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Новые коллекции</h2> | |
| <p class="text-xl text-gray-600">Верхняя одежда в наличии на складе в Санкт-Петербурге</p> | |
| </div> | |
| <div class="bg-white rounded-2xl shadow-xl p-8"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-gray-900">Осень-Зима 2025</h3> | |
| <p class="text-gray-600">Доставка в ваш регион за 2–14 дней</p> | |
| </div> | |
| <div class="text-right"> | |
| <span class="inline-block bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-semibold"> | |
| В наличии | |
| </span> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="relative group overflow-hidden rounded-lg"> | |
| <img src="https://static.photos/fashion/400x500/1" alt="Женские куртки" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end"> | |
| <div class="p-4 text-white"> | |
| <h4 class="text-lg font-semibold">Женские куртки</h4> | |
| <p class="text-sm">Скидка до 15% для партнеров</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative group overflow-hidden rounded-lg"> | |
| <img src="https://static.photos/fashion/400x500/2" alt="Мужские пальто" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end"> | |
| <div class="p-4 text-white"> | |
| <h4 class="text-lg font-semibold">Мужские пальто</h4> | |
| <p class="text-sm">Новинки сезона</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative group overflow-hidden rounded-lg"> | |
| <img src="https://static.photos/fashion/400x500/3" alt="Универсальные ветровки" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end"> | |
| <div class="p-4 text-white"> | |
| <h4 class="text-lg font-semibold">Универсальные ветровки</h4> | |
| <p class="text-sm">Терморегуляция MAX</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button class="bg-indigo-600 text-white px-8 py-3 rounded-full hover:bg-indigo-700 transition-all hover:scale-105 inline-flex items-center space-x-2"> | |
| <span>Смотреть все коллекции</span> | |
| <i data-feather="arrow-right" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Partnership Benefits --> | |
| <section id="partnership" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Привилегии партнеров</h2> | |
| <p class="text-xl text-gray-600">Закажите одежду оптом и получите эксклюзивные условия</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="bg-gradient-to-br from-indigo-50 to-purple-50 p-6 rounded-xl border border-indigo-100"> | |
| <div class="flex items-start space-x-4"> | |
| <img src="https://nw-wear.com/wp-content/uploads/2018/01/cifers-01.png" alt="Партнерская программа" class="w-12 h-12"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2">Партнерская программа</h3> | |
| <p class="text-sm text-gray-600">Личный менеджер и индивидуальная скидка на весь ассортимент</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-green-50 to-emerald-50 p-6 rounded-xl border border-green-100"> | |
| <div class="flex items-start space-x-4"> | |
| <img src="https://nw-wear.com/wp-content/uploads/2018/01/cifers-02.png" alt="Система лояльности" class="w-12 h-12"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2">Система лояльности</h3> | |
| <p class="text-sm text-gray-600">Скидки до 20% + дополнительные скидки до 10% на сезонные позиции</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-yellow-50 to-orange-50 p-6 rounded-xl border border-yellow-100"> | |
| <div class="flex items-start space-x-4"> | |
| <img src="https://nw-wear.com/wp-content/uploads/2018/01/cifers-03.png" alt="Ранний доступ" class="w-12 h-12"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2">Ранняя покупка новинок</h3> | |
| <p class="text-sm text-gray-600">Обновляйте ассортимент раньше конкурентов</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-blue-50 to-cyan-50 p-6 rounded-xl border border-blue-100"> | |
| <div class="flex items-start space-x-4"> | |
| <img src="https://nw-wear.com/wp-content/uploads/2018/01/cifers-04.png" alt="Размерные ряды" class="w-12 h-12"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2">Только нужные размеры</h3> | |
| <p class="text-sm text-gray-600">Покупка неполными размерными рядами по запросу</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-pink-50 to-rose-50 p-6 rounded-xl border border-pink-100"> | |
| <div class="flex items-start space-x-4"> | |
| <img src="https://nw-wear.com/wp-content/uploads/2018/01/cifers-05.png" alt="Рекламная поддержка" class="w-12 h-12"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2">Рекламная поддержка</h3> | |
| <p class="text-sm text-gray-600">Бесплатные каталоги, бренд-зона, маркетинговые материалы</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-purple-50 to-indigo-50 p-6 rounded-xl border border-purple-100"> | |
| <div class="flex items-start space-x-4"> | |
| <img src="https://nw-wear.com/wp-content/uploads/2018/01/cifers-06-e1521196601116.png" alt="Быстрая обработка" class="w-12 h-12"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2">Ускоренная обработка</h3> | |
| <p class="text-sm text-gray-600">Перезвоним в течение 30 минут в рабочее время</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-red-50 to-orange-50 p-6 rounded-xl border border-red-100 md:col-span-2 lg:col-span-3"> | |
| <div class="flex items-start space-x-4"> | |
| <img src="https://nw-wear.com/wp-content/uploads/2018/01/cifers-07.png" alt="Онлайн-помощь" class="w-12 h-12"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2">Онлайн-помощь 24/7</h3> | |
| <p class="text-sm text-gray-600">Поддержка по WhatsApp, Viber и Skype в любое время</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Company --> | |
| <section class="py-20 bg-gradient-to-br from-gray-900 to-indigo-900 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-8">О компании Nord Wind</h2> | |
| <p class="text-lg mb-6 text-gray-300"> | |
| Один из ведущих российских производителей верхней одежды с более чем 30-летней историей. | |
| С 1992 года мы проделали путь от небольшой компании до крупного предприятия с разветвленной сетью партнерских магазинов по всей России. | |
| </p> | |
| <p class="text-lg text-gray-300"> | |
| Наша миссия — постоянное совершенствование продукции, отвечающей требованиям городских жителей в различных климатических зонах. | |
| Мы сочетаем современный дизайн и новейшие технологии, чтобы одежда идеально вписывалась в ритм больших и малых городов. | |
| </p> | |
| <div class="mt-12 grid md:grid-cols-3 gap-8"> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold text-indigo-400 mb-2">30+</div> | |
| <div class="text-gray-400">Лет на рынке</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold text-indigo-400 mb-2">250+</div> | |
| <div class="text-gray-400">Моделей в каталоге</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold text-indigo-400 mb-2">1000+</div> | |
| <div class="text-gray-400">Партнеров по РФ</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gradient-to-r from-indigo-600 to-purple-600"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Готовы начать сотрудничество?</h2> | |
| <p class="text-xl text-white/90 mb-8">Зарегистрируйтесь и получите доступ к прайс-листу со сниженными ценами</p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button onclick="showRegistrationForm()" class="bg-white text-indigo-600 px-8 py-4 rounded-full hover:bg-gray-100 transition-all hover:scale-105 font-semibold"> | |
| Стать партнером | |
| </button> | |
| <button onclick="scrollToSection('collections')" class="border-2 border-white text-white px-8 py-4 rounded-full hover:bg-white/10 transition-all font-semibold"> | |
| Смотреть каталог | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i data-feather="wind" class="w-6 h-6"></i> | |
| <span class="text-xl font-bold">Nord Wind</span> | |
| </div> | |
| <p class="text-gray-400 text-sm">Верхняя одежда с терморегуляцией</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Компания</h4> | |
| <ul class="space-y-2 text-gray-400 text-sm"> | |
| <li><a href="#" class="hover:text-white transition-colors">О нас</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Производство</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Карьера</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Партнерам</h4> | |
| <ul class="space-y-2 text-gray-400 text-sm"> | |
| <li><a href="#" class="hover:text-white transition-colors">Условия сотрудничества</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Прайс-лист</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Доставка</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Контакты</h4> | |
| <ul class="space-y-2 text-gray-400 text-sm"> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="phone" class="w-4 h-4"></i> | |
| <span>8 (800) 123-45-67</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="mail" class="w-4 h-4"></i> | |
| <span>info@nw-wear.com</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="map-pin" class="w-4 h-4"></i> | |
| <span>Санкт-Петербург</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8 text-center text-gray-400 text-sm"> | |
| <p>© 2025 Nord Wind. Все права защищены.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Registration Modal --> | |
| <div id="registrationModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4"> | |
| <div class="bg-white rounded-2xl max-w-md w-full p-8 relative"> | |
| <button onclick="closeRegistrationForm()" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600"> | |
| <i data-feather="x" class="w-6 h-6"></i> | |
| </button> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-6">Регистрация партнера</h3> | |
| <form onsubmit="handleRegistration(event)"> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Название компании</label> | |
| <input type="text" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">ИНН</label> | |
| <input type="text" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Телефон</label> | |
| <input type="tel" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 transition-all mt-6 font-semibold"> | |
| Отправить заявку | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Mobile menu toggle | |
| function toggleMobileMenu() { | |
| const menu = document.getElementById('mobileMenu'); | |
| menu.classList.toggle('hidden'); | |
| } | |
| // Smooth scroll to section | |
| function scrollToSection(sectionId) { | |
| const section = document.getElementById(sectionId); | |
| if (section) { | |
| section.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| } | |
| // Registration modal | |
| function showRegistrationForm() { | |
| document.getElementById('registrationModal').classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| function closeRegistrationForm() { | |
| document.getElementById('registrationModal').classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| function handleRegistration(event) { | |
| event.preventDefault(); | |
| alert('Спасибо за заявку! Наш менеджер свяжется с вами в течение 30 минут.'); | |
| closeRegistrationForm(); | |
| } | |
| // Add animations on scroll | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('fade-in'); | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe all sections | |
| document.querySelectorAll('section').forEach(section => { | |
| observer.observe(section); | |
| }); | |
| // Close mobile menu when clicking links | |
| document.querySelectorAll('#mobileMenu a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| document.getElementById('mobileMenu').classList.add('hidden'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |