seg007 commited on
Commit
aa699c5
·
verified ·
1 Parent(s): 1e522bc

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).

Browse files

Transform this into a revolutionary two-level site: Public zone (demo without prices, engaging for visitors) and Private B2B zone (login-required, strict verification like alcohol sales: business docs check, SMS/Email confirmation, manual moderation). Use Avada Fusion Builder for drag-and-drop without heavy external builders. Ensure mobile-first responsive design, PageSpeed 95+ scores, and resource efficiency (lazy loading, Critical CSS, minified assets, no jQuery dependencies where possible).

## Core Requirements
- **Theme**: Avada ($60) with child theme for customizations. Integrate Jetpack Free (Image CDN, lazy loading, security only – no heavy modules).
- **Hosting Optimization**: Assume Beget VPS with Redis Object Cache, MySQL 8.0 tuning (query_cache=268MB, innodb_buffer=512MB), PHP 8.1 OPcache. Use .htaccess for Gzip, expires headers, and static file caching (CSS/JS/images 1 month).
- **Performance Best Practices**: Limit plugins to essentials (WooCommerce free, GamiPress free, Redis Cache). No Elementor/Gutenberg extensions. Use WebP images, service workers for offline, CDN via Beget/Cloudflare. Target LCP <2.5s, CLS <0.1.
- **Color Scheme**: Brand navy blue (#2c5aa0), white accents. Seasonal overrides: Winter (blue-white, snow particles), Spring (green-pastel, flower blooms), Autumn (orange-earth, falling leaves). Auto-switch by date/IP or weather API.
- **Navigation**: Mega-menu for collections (Winter/Spring/Summer/Autumn), footer with 24/7 contacts (WhatsApp/Viber/Skype integration), search with weather-adaptive filters.
- **SEO**: Yoast free for meta, sitemaps. Schema markup for products/events.
- **Security**: Wordfence free for B2B zone (2FA, roles: prospect/verified/premium).

## Site Structure and Pages

### 1. Homepage (Hero Landing with WOW and Weather Adaptation)
- **Hero Section**: Full-screen parallax background with neural seasonal animations (particles.js ~4KB for snow/leaves/flowers – generate 50-100 particles with unique paths, wind simulation, collision detection). Geolocation API + OpenWeatherMap (free tier) detects user location, fetches temp/weather, auto-suggests clothing range (e.g., -20°C → heavy jackets). Interactive temperature slider (-40°C to +35°C): Drag to scroll through 3D models of jackets changing (GSAP timelines for smooth transitions, low-poly models via Three.js lite ~10KB).
- **WOW-Effects**: On-scroll AOS.js (Trig.js alternative, ~6KB) for fade-in/up elements. Button hovers: Ripple effects + glow (CSS transforms, no JS bloat).
- **Key Sections** (based on current site):
- **Advantages Carousel**: 6 slides with icons/animations (comfort, fit, quality, trends, variety, delivery). Each with micro-interaction: e.g., water droplet animation on jacket fabric (CSS keyframe: bead rolls down impermeable surface, realistic physics via ease-in-out).
- **New Collections Teaser**: Grid of 250+ variants (no prices), hover: 3D rotation + fur movement simulation (CSS mesh deformation for realistic fur sway in wind).
- **Snow Catch Mini-Game**: Winter-only: Catch falling snowflakes (particles.js + mouse/touch tracking) to "unlock" tech badges (e.g., "Thermoregulation Expert" – progress bar fills 75%, reveals fabric details).
- **CTA**: "Order Wholesale" button → B2B login modal (strict form: company INN, phone, email verification).
- **Footer**: Contacts, socials, weather widget showing local temp + suggested collection.

### 2. Public Catalog Page (WOW-Demo Without Prices)
- **Grid Layout**: Masonry grid (Avada elements) of products: Photos/videos with models in dynamic poses (360° spin on hover via CSS, video lazy-load). Filters: Season, Temp Range, Material (Thermoregulation/Membrane/Fur).
- **Interactive Tech Demos**: Click product → Modal with:
- Water bead animation: 2D canvas (lite HTML5) simulates droplet rolling off surface (use requestAnimationFrame for 60fps, no heavy libs).
- Fur movement: Particle system for fur strands reacting to "wind" (mouse move/touch drag simulates breeze, CSS clip-path + keyframes).
- Gamification: "Tech Quest" – interact 3 times (zoom, rotate, explore layers) → Earn badge, unlock "secret" video of production.
- **Weather Integration**: Sidebar widget: User's local weather → Auto-highlights matching products (e.g., rain → waterproof jackets). Scroll temp changes outfits dynamically (GSAP stagger animations).
- **Engagement**: Infinite scroll with parallax rows. No prices – teaser: "Login for Wholesale Pricing".

### 3. About/Technology Page
- **Storytelling**: Timeline of 30+ years history (Avada timeline element with subtle animations).
- **Tech Breakdown**: Interactive infographics – e.g., layer-by-layer jacket dissection (click to peel layers, reveal Italian insulators/Korean hardware/Scandinavian fur). WOW: Hover sparks "tech sparks" (CSS particles).
- **Gamification**: Quiz: "Match Tech to Climate" (5 questions on temp ranges) → Score badge, shareable result.

### 4. Private B2B Zone (Login-Required Dashboard)
- **Login Flow**: Modal with verification (business docs upload, OTP via SMS/Email, manual approval). Roles: Prospect (view prices/samples request), Verified (orders), Premium (custom configs).
- **Dashboard Sections**:
- **Order Configurator**: Drag-drop builder for partial size rows, profit calculator, free materials selector (catalogs/bags). WOW: Real-time 3D preview of order bundle.
- **Wholesale Privileges**: Progress bar for loyalty (orders → points → exclusive access). 24/7 chat widget (WP Live Chat free).
- **Tracking**: Integrated logistics (2-week delivery map with pins).
- **Gamification**: B2B Levels – e.g., "Silver Partner" (10 orders) unlocks 30-min callback priority, marketing kits.
- **Security**: Hide prices/content from guests via WooCommerce hooks.

### 5. Contact/Partnership Page
- **Form**: Multi-step (name/company/INN/phone/email) with 30-min callback promise. Integrate WhatsApp/Viber/Skype buttons (Avada social elements).
- **Map**: St. Petersburg warehouse location (Google Maps embed, lazy-load).
- **CTA**: "Individual Proposal" email link to nw@nw-wear.com.

## Seasonal Gamification and WOW-Effects
- **Auto-Season Switch**: JS detects date/IP/weather → CSS classes for themes (winter: snow catch game; spring: flower bloom interactions; autumn: leaf-raking mini-game). Particles.js for all (optimize: 50 particles max, GPU acceleration).
- **Gamification Layer** (GamiPress free): Earn XP for interactions (view product=10XP, catch snowflake=50XP, complete quiz=200XP). Badges: "Winter Warrior" (unlock fur tech demo). Leaderboard (anonymous, public zone only).
- **WOW Best Practices**: GSAP for complex timelines (e.g., temp slider), AOS for scrolls (duration 1200ms, once=true for perf). Buttons: CSS-only ripples (box-shadow pulses). Interactive demos: Canvas API for water/fur (under 5KB custom JS). Resource Save: Defer non-critical JS, use Intersection Observer for lazy animations.

## Technical Implementation Guidelines
- **Plugins**: WooCommerce (catalog/orders), GamiPress (gamification), Redis Cache (perf), Yoast (SEO), UpdraftPlus (backups). No more than 5 active.
- **Custom Code**: functions.php hooks for weather API (fetch on load, cache 1hr via Redis), seasonal CSS vars (--winter-bg: linear-gradient(blue, white)).
- **Testing**: Ensure 90+ GTMetrix, mobile-first (test on iOS/Android), accessibility (ARIA labels for interactions).
- **Output**: Generate full site code/structure in Avada format: Pages, elements, custom CSS/JS snippets. Include migration plan from current static site (export content via XML).

Make the site addictive: Users should "stick" exploring tech demos, weather-adapted suggestions, and seasonal games, driving B2B leads while showcasing thermoregulation innovation efficiently.

Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +485 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: You Are An Expert Full Stack Developer S
3
- emoji: 🐠
4
- colorFrom: indigo
5
  colorTo: red
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: You-are-an-expert-full-stack-developer-s
3
+ colorFrom: yellow
 
4
  colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,486 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Nord Wind - Верхняя одежда с терморегуляцией</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
12
+ body { font-family: 'Inter', sans-serif; }
13
+ .gradient-text {
14
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
15
+ -webkit-background-clip: text;
16
+ -webkit-text-fill-color: transparent;
17
+ background-clip: text;
18
+ }
19
+ .card-hover {
20
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
21
+ }
22
+ .card-hover:hover {
23
+ transform: translateY(-8px);
24
+ box-shadow: 0 20px 40px rgba(0,0,0,0.1);
25
+ }
26
+ .fade-in {
27
+ animation: fadeIn 0.8s ease-in;
28
+ }
29
+ @keyframes fadeIn {
30
+ from { opacity: 0; transform: translateY(20px); }
31
+ to { opacity: 1; transform: translateY(0); }
32
+ }
33
+ .parallax-bg {
34
+ background-attachment: fixed;
35
+ background-position: center;
36
+ background-repeat: no-repeat;
37
+ background-size: cover;
38
+ }
39
+ .scroll-smooth {
40
+ scroll-behavior: smooth;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="scroll-smooth">
45
+ <!-- Navigation -->
46
+ <nav class="fixed top-0 w-full bg-white/95 backdrop-blur-md shadow-sm z-50">
47
+ <div class="container mx-auto px-4 py-4">
48
+ <div class="flex justify-between items-center">
49
+ <div class="flex items-center space-x-2">
50
+ <i data-feather="wind" class="w-8 h-8 text-indigo-600"></i>
51
+ <span class="text-2xl font-bold gradient-text">Nord Wind</span>
52
+ </div>
53
+ <div class="hidden md:flex items-center space-x-8">
54
+ <a href="#about" class="text-gray-700 hover:text-indigo-600 transition-colors">О бренде</a>
55
+ <a href="#collections" class="text-gray-700 hover:text-indigo-600 transition-colors">Коллекции</a>
56
+ <a href="#advantages" class="text-gray-700 hover:text-indigo-600 transition-colors">Преимущества</a>
57
+ <a href="#partnership" class="text-gray-700 hover:text-indigo-600 transition-colors">Партнерство</a>
58
+ <button class="bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700 transition-all hover:scale-105">
59
+ Стать партнером
60
+ </button>
61
+ </div>
62
+ <button class="md:hidden" onclick="toggleMobileMenu()">
63
+ <i data-feather="menu" class="w-6 h-6"></i>
64
+ </button>
65
+ </div>
66
+ </div>
67
+ <!-- Mobile Menu -->
68
+ <div id="mobileMenu" class="hidden md:hidden bg-white border-t">
69
+ <div class="container mx-auto px-4 py-4 space-y-3">
70
+ <a href="#about" class="block text-gray-700 hover:text-indigo-600">О бренде</a>
71
+ <a href="#collections" class="block text-gray-700 hover:text-indigo-600">Коллекции</a>
72
+ <a href="#advantages" class="block text-gray-700 hover:text-indigo-600">Преимущества</a>
73
+ <a href="#partnership" class="block text-gray-700 hover:text-indigo-600">Партнерство</a>
74
+ </div>
75
+ </div>
76
+ </nav>
77
+
78
+ <!-- Hero Section -->
79
+ <section class="pt-24 pb-12 bg-gradient-to-br from-indigo-50 via-white to-purple-50">
80
+ <div class="container mx-auto px-4">
81
+ <div class="grid md:grid-cols-2 gap-12 items-center">
82
+ <div class="fade-in">
83
+ <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6 leading-tight">
84
+ Верхняя одежда с <span class="gradient-text">терморегуляцией</span> оптом от производителя
85
+ </h1>
86
+ <p class="text-xl text-gray-600 mb-8">
87
+ 48 часов на отправку заказа в л��бой регион России
88
+ </p>
89
+ <div class="flex flex-col sm:flex-row gap-4">
90
+ <button onclick="scrollToSection('collections')" 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">
91
+ <span>Смотреть коллекции</span>
92
+ <i data-feather="arrow-right" class="w-5 h-5"></i>
93
+ </button>
94
+ <button onclick="scrollToSection('partnership')" class="border-2 border-indigo-600 text-indigo-600 px-8 py-4 rounded-full hover:bg-indigo-50 transition-all">
95
+ Узнать о партнерстве
96
+ </button>
97
+ </div>
98
+ <div class="mt-8 p-4 bg-indigo-50 rounded-lg">
99
+ <p class="text-sm text-indigo-800">
100
+ <i data-feather="check-circle" class="inline w-4 h-4 mr-1"></i>
101
+ Минимальный заказ от 100 000 рублей
102
+ </p>
103
+ </div>
104
+ </div>
105
+ <div class="relative">
106
+ <img src="https://nw-wear.com/wp-content/uploads/2025/10/opti-nw-wear-autumn-2025.webp"
107
+ alt="Новая коллекция"
108
+ class="rounded-2xl shadow-2xl w-full object-cover h-[500px]">
109
+ <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-xl shadow-lg">
110
+ <p class="text-sm text-gray-600">Осень-Зима 2025</p>
111
+ <p class="text-2xl font-bold text-indigo-600">NEW</p>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </section>
117
+
118
+ <!-- Features Section -->
119
+ <section id="about" class="py-20 bg-white">
120
+ <div class="container mx-auto px-4">
121
+ <div class="text-center mb-12 fade-in">
122
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Почему выбирают Nord Wind</h2>
123
+ <p class="text-xl text-gray-600">Инновации и качество в каждой детали</p>
124
+ </div>
125
+ <div class="grid md:grid-cols-3 lg:grid-cols-4 gap-6">
126
+ <div class="card-hover bg-gradient-to-br from-blue-50 to-indigo-100 p-6 rounded-xl text-center">
127
+ <img src="https://nw-wear.com/wp-content/uploads/2018/01/icon1.png" alt="Терморегуляция" class="w-20 h-20 mx-auto mb-4">
128
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Терморегуляция</h3>
129
+ <p class="text-sm text-gray-600">Комфортно на улице, в транспорте и помещении</p>
130
+ </div>
131
+ <div class="card-hover bg-gradient-to-br from-purple-50 to-pink-100 p-6 rounded-xl text-center">
132
+ <img src="https://nw-wear.com/wp-content/uploads/2018/01/icon3.png" alt="Размеры" class="w-20 h-20 mx-auto mb-4">
133
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Размеры 40-66</h3>
134
+ <p class="text-sm text-gray-600">Идеальная посадка по фигуре</p>
135
+ </div>
136
+ <div class="card-hover bg-gradient-to-br from-green-50 to-emerald-100 p-6 rounded-xl text-center">
137
+ <img src="https://nw-wear.com/wp-content/uploads/2018/01/icon41.png" alt="Производство" class="w-20 h-20 mx-auto mb-4">
138
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Свое производство</h3>
139
+ <p class="text-sm text-gray-600">Итальянские утеплители, корейская фурнитура</p>
140
+ </div>
141
+ <div class="card-hover bg-gradient-to-br from-yellow-50 to-orange-100 p-6 rounded-xl text-center">
142
+ <img src="https://nw-wear.com/wp-content/uploads/2018/01/icon5.png" alt="Мода" class="w-20 h-20 mx-auto mb-4">
143
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Модные решения</h3>
144
+ <p class="text-sm text-gray-600">Актуальные тренды в каждой коллекции</p>
145
+ </div>
146
+ <div class="card-hover bg-gradient-to-br from-red-50 to-rose-100 p-6 rounded-xl text-center">
147
+ <img src="https://nw-wear.com/wp-content/uploads/2018/01/icon61.png" alt="Для всех" class="w-20 h-20 mx-auto mb-4">
148
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Для мужчин и женщин</h3>
149
+ <p class="text-sm text-gray-600">Около 250 вариантов в каталоге</p>
150
+ </div>
151
+ <div class="card-hover bg-gradient-to-br from-cyan-50 to-blue-100 p-6 rounded-xl text-center">
152
+ <img src="https://nw-wear.com/wp-content/uploads/2018/01/icon71.png" alt="Доставка" class="w-20 h-20 mx-auto mb-4">
153
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Доставка по РФ и СНГ</h3>
154
+ <p class="text-sm text-gray-600">Быстрая доставка в течение 2 недель</p>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </section>
159
+
160
+ <!-- Collections Section -->
161
+ <section id="collections" class="py-20 bg-gradient-to-br from-gray-50 to-gray-100">
162
+ <div class="container mx-auto px-4">
163
+ <div class="text-center mb-12">
164
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Новые коллекции</h2>
165
+ <p class="text-xl text-gray-600">Верхняя одежда в наличии на складе в Санкт-Петербурге</p>
166
+ </div>
167
+ <div class="bg-white rounded-2xl shadow-xl p-8">
168
+ <div class="flex items-center justify-between mb-6">
169
+ <div>
170
+ <h3 class="text-2xl font-bold text-gray-900">Осень-Зима 2025</h3>
171
+ <p class="text-gray-600">Доставка в ваш регион за 2–14 дней</p>
172
+ </div>
173
+ <div class="text-right">
174
+ <span class="inline-block bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-semibold">
175
+ В наличии
176
+ </span>
177
+ </div>
178
+ </div>
179
+ <div class="grid md:grid-cols-3 gap-6">
180
+ <div class="relative group overflow-hidden rounded-lg">
181
+ <img src="https://static.photos/fashion/400x500/1" alt="Женские куртки" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110">
182
+ <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
183
+ <div class="p-4 text-white">
184
+ <h4 class="text-lg font-semibold">Женские куртки</h4>
185
+ <p class="text-sm">Скидка до 15% для партнеров</p>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ <div class="relative group overflow-hidden rounded-lg">
190
+ <img src="https://static.photos/fashion/400x500/2" alt="Мужские пальто" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110">
191
+ <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
192
+ <div class="p-4 text-white">
193
+ <h4 class="text-lg font-semibold">Мужские пальто</h4>
194
+ <p class="text-sm">Новинки сезона</p>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ <div class="relative group overflow-hidden rounded-lg">
199
+ <img src="https://static.photos/fashion/400x500/3" alt="Универсальные ветровки" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110">
200
+ <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
201
+ <div class="p-4 text-white">
202
+ <h4 class="text-lg font-semibold">Универсальные ветровки</h4>
203
+ <p class="text-sm">Терморегуляция MAX</p>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ <div class="mt-8 text-center">
209
+ <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">
210
+ <span>Смотреть все коллекции</span>
211
+ <i data-feather="arrow-right" class="w-5 h-5"></i>
212
+ </button>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </section>
217
+
218
+ <!-- Partnership Benefits -->
219
+ <section id="partnership" class="py-20 bg-white">
220
+ <div class="container mx-auto px-4">
221
+ <div class="text-center mb-12">
222
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Привилегии партнеров</h2>
223
+ <p class="text-xl text-gray-600">Закажите одежду оптом и получите эксклюзивные условия</p>
224
+ </div>
225
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
226
+ <div class="bg-gradient-to-br from-indigo-50 to-purple-50 p-6 rounded-xl border border-indigo-100">
227
+ <div class="flex items-start space-x-4">
228
+ <img src="https://nw-wear.com/wp-content/uploads/2018/01/cifers-01.png" alt="Партнерская программа" class="w-12 h-12">
229
+ <div>
230
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Партнерская программа</h3>
231
+ <p class="text-sm text-gray-600">Личный менеджер и индивидуальная скидка на весь ассортимент</p>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ <div class="bg-gradient-to-br from-green-50 to-emerald-50 p-6 rounded-xl border border-green-100">
236
+ <div class="flex items-start space-x-4">
237
+ <img src="https://nw-wear.com/wp-content/uploads/2018/01/cifers-02.png" alt="Система лояльности" class="w-12 h-12">
238
+ <div>
239
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Система лояльности</h3>
240
+ <p class="text-sm text-gray-600">Скидки до 20% + дополнительные скидки до 10% на сезонные позиции</p>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ <div class="bg-gradient-to-br from-yellow-50 to-orange-50 p-6 rounded-xl border border-yellow-100">
245
+ <div class="flex items-start space-x-4">
246
+ <img src="https://nw-wear.com/wp-content/uploads/2018/01/cifers-03.png" alt="Ранний доступ" class="w-12 h-12">
247
+ <div>
248
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Ранняя покупка новинок</h3>
249
+ <p class="text-sm text-gray-600">Обновляйте ассортимент раньше конкурентов</p>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ <div class="bg-gradient-to-br from-blue-50 to-cyan-50 p-6 rounded-xl border border-blue-100">
254
+ <div class="flex items-start space-x-4">
255
+ <img src="https://nw-wear.com/wp-content/uploads/2018/01/cifers-04.png" alt="Размерные ряды" class="w-12 h-12">
256
+ <div>
257
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Только нужные размеры</h3>
258
+ <p class="text-sm text-gray-600">Покупка неполными размерными рядами по запросу</p>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ <div class="bg-gradient-to-br from-pink-50 to-rose-50 p-6 rounded-xl border border-pink-100">
263
+ <div class="flex items-start space-x-4">
264
+ <img src="https://nw-wear.com/wp-content/uploads/2018/01/cifers-05.png" alt="Рекламная поддержка" class="w-12 h-12">
265
+ <div>
266
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Рекламная поддержка</h3>
267
+ <p class="text-sm text-gray-600">Бесплатные каталоги, бренд-зона, маркетинговые материалы</p>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ <div class="bg-gradient-to-br from-purple-50 to-indigo-50 p-6 rounded-xl border border-purple-100">
272
+ <div class="flex items-start space-x-4">
273
+ <img src="https://nw-wear.com/wp-content/uploads/2018/01/cifers-06-e1521196601116.png" alt="Быстрая обработка" class="w-12 h-12">
274
+ <div>
275
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Ускоренная обработка</h3>
276
+ <p class="text-sm text-gray-600">Перезвоним в течение 30 минут в рабочее время</p>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ <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">
281
+ <div class="flex items-start space-x-4">
282
+ <img src="https://nw-wear.com/wp-content/uploads/2018/01/cifers-07.png" alt="Онлайн-помощь" class="w-12 h-12">
283
+ <div>
284
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Онлайн-помощь 24/7</h3>
285
+ <p class="text-sm text-gray-600">Поддержка по WhatsApp, Viber и Skype в любое время</p>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </section>
292
+
293
+ <!-- About Company -->
294
+ <section class="py-20 bg-gradient-to-br from-gray-900 to-indigo-900 text-white">
295
+ <div class="container mx-auto px-4">
296
+ <div class="max-w-4xl mx-auto text-center">
297
+ <h2 class="text-3xl md:text-4xl font-bold mb-8">О компании Nord Wind</h2>
298
+ <p class="text-lg mb-6 text-gray-300">
299
+ Один из ведущих российских производителей верхней одежды с более чем 30-летней историей.
300
+ С 1992 года мы проделали путь от небольшой компании до крупного предприятия с разветвленной сетью партнерских магазинов по всей России.
301
+ </p>
302
+ <p class="text-lg text-gray-300">
303
+ Наша миссия — постоянное совершенствование продукции, отвечающей требованиям городских жителей в различных климатических зонах.
304
+ Мы сочетаем современный дизайн и новейшие технологии, чтобы одежда идеально вписывалась в ритм больших и малых городов.
305
+ </p>
306
+ <div class="mt-12 grid md:grid-cols-3 gap-8">
307
+ <div class="text-center">
308
+ <div class="text-4xl font-bold text-indigo-400 mb-2">30+</div>
309
+ <div class="text-gray-400">Лет на рынке</div>
310
+ </div>
311
+ <div class="text-center">
312
+ <div class="text-4xl font-bold text-indigo-400 mb-2">250+</div>
313
+ <div class="text-gray-400">Моделей в каталоге</div>
314
+ </div>
315
+ <div class="text-center">
316
+ <div class="text-4xl font-bold text-indigo-400 mb-2">1000+</div>
317
+ <div class="text-gray-400">Партнеров по РФ</div>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </section>
323
+
324
+ <!-- CTA Section -->
325
+ <section class="py-20 bg-gradient-to-r from-indigo-600 to-purple-600">
326
+ <div class="container mx-auto px-4 text-center">
327
+ <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Готовы начать сотрудничество?</h2>
328
+ <p class="text-xl text-white/90 mb-8">Зарегистрируйтесь и получите доступ к прайс-листу со сниженными ценами</p>
329
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
330
+ <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">
331
+ Стать партнером
332
+ </button>
333
+ <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">
334
+ Смотреть каталог
335
+ </button>
336
+ </div>
337
+ </div>
338
+ </section>
339
+
340
+ <!-- Footer -->
341
+ <footer class="bg-gray-900 text-white py-12">
342
+ <div class="container mx-auto px-4">
343
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
344
+ <div>
345
+ <div class="flex items-center space-x-2 mb-4">
346
+ <i data-feather="wind" class="w-6 h-6"></i>
347
+ <span class="text-xl font-bold">Nord Wind</span>
348
+ </div>
349
+ <p class="text-gray-400 text-sm">Верхняя одежда с терморегуляцией</p>
350
+ </div>
351
+ <div>
352
+ <h4 class="font-semibold mb-4">Компания</h4>
353
+ <ul class="space-y-2 text-gray-400 text-sm">
354
+ <li><a href="#" class="hover:text-white transition-colors">О нас</a></li>
355
+ <li><a href="#" class="hover:text-white transition-colors">Производство</a></li>
356
+ <li><a href="#" class="hover:text-white transition-colors">Карьера</a></li>
357
+ </ul>
358
+ </div>
359
+ <div>
360
+ <h4 class="font-semibold mb-4">Партнерам</h4>
361
+ <ul class="space-y-2 text-gray-400 text-sm">
362
+ <li><a href="#" class="hover:text-white transition-colors">Условия сотрудничества</a></li>
363
+ <li><a href="#" class="hover:text-white transition-colors">Прайс-лист</a></li>
364
+ <li><a href="#" class="hover:text-white transition-colors">Доставка</a></li>
365
+ </ul>
366
+ </div>
367
+ <div>
368
+ <h4 class="font-semibold mb-4">Контакты</h4>
369
+ <ul class="space-y-2 text-gray-400 text-sm">
370
+ <li class="flex items-center space-x-2">
371
+ <i data-feather="phone" class="w-4 h-4"></i>
372
+ <span>8 (800) 123-45-67</span>
373
+ </li>
374
+ <li class="flex items-center space-x-2">
375
+ <i data-feather="mail" class="w-4 h-4"></i>
376
+ <span>info@nw-wear.com</span>
377
+ </li>
378
+ <li class="flex items-center space-x-2">
379
+ <i data-feather="map-pin" class="w-4 h-4"></i>
380
+ <span>Санкт-Петербург</span>
381
+ </li>
382
+ </ul>
383
+ </div>
384
+ </div>
385
+ <div class="border-t border-gray-800 pt-8 text-center text-gray-400 text-sm">
386
+ <p>&copy; 2025 Nord Wind. Все права защищены.</p>
387
+ </div>
388
+ </div>
389
+ </footer>
390
+
391
+ <!-- Registration Modal -->
392
+ <div id="registrationModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
393
+ <div class="bg-white rounded-2xl max-w-md w-full p-8 relative">
394
+ <button onclick="closeRegistrationForm()" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600">
395
+ <i data-feather="x" class="w-6 h-6"></i>
396
+ </button>
397
+ <h3 class="text-2xl font-bold text-gray-900 mb-6">Регистрация партнера</h3>
398
+ <form onsubmit="handleRegistration(event)">
399
+ <div class="space-y-4">
400
+ <div>
401
+ <label class="block text-sm font-medium text-gray-700 mb-1">Название компании</label>
402
+ <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">
403
+ </div>
404
+ <div>
405
+ <label class="block text-sm font-medium text-gray-700 mb-1">ИНН</label>
406
+ <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">
407
+ </div>
408
+ <div>
409
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
410
+ <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">
411
+ </div>
412
+ <div>
413
+ <label class="block text-sm font-medium text-gray-700 mb-1">Телефон</label>
414
+ <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">
415
+ </div>
416
+ </div>
417
+ <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">
418
+ Отправить заявку
419
+ </button>
420
+ </form>
421
+ </div>
422
+ </div>
423
+
424
+ <script>
425
+ // Initialize Feather Icons
426
+ feather.replace();
427
+
428
+ // Mobile menu toggle
429
+ function toggleMobileMenu() {
430
+ const menu = document.getElementById('mobileMenu');
431
+ menu.classList.toggle('hidden');
432
+ }
433
+
434
+ // Smooth scroll to section
435
+ function scrollToSection(sectionId) {
436
+ const section = document.getElementById(sectionId);
437
+ if (section) {
438
+ section.scrollIntoView({ behavior: 'smooth' });
439
+ }
440
+ }
441
+
442
+ // Registration modal
443
+ function showRegistrationForm() {
444
+ document.getElementById('registrationModal').classList.remove('hidden');
445
+ document.body.style.overflow = 'hidden';
446
+ }
447
+
448
+ function closeRegistrationForm() {
449
+ document.getElementById('registrationModal').classList.add('hidden');
450
+ document.body.style.overflow = 'auto';
451
+ }
452
+
453
+ function handleRegistration(event) {
454
+ event.preventDefault();
455
+ alert('Спасибо за заявку! Наш менеджер свяжется с вами в течение 30 минут.');
456
+ closeRegistrationForm();
457
+ }
458
+
459
+ // Add animations on scroll
460
+ const observerOptions = {
461
+ threshold: 0.1,
462
+ rootMargin: '0px 0px -50px 0px'
463
+ };
464
+
465
+ const observer = new IntersectionObserver((entries) => {
466
+ entries.forEach(entry => {
467
+ if (entry.isIntersecting) {
468
+ entry.target.classList.add('fade-in');
469
+ }
470
+ });
471
+ }, observerOptions);
472
+
473
+ // Observe all sections
474
+ document.querySelectorAll('section').forEach(section => {
475
+ observer.observe(section);
476
+ });
477
+
478
+ // Close mobile menu when clicking links
479
+ document.querySelectorAll('#mobileMenu a').forEach(link => {
480
+ link.addEventListener('click', () => {
481
+ document.getElementById('mobileMenu').classList.add('hidden');
482
+ });
483
+ });
484
+ </script>
485
+ </body>
486
  </html>