Team Ai
Apppublic

Dokers/Northen-node

sourceHugging Faceupdated 1y agoView on Hugging Face
0likes
spectech.html831 linesDownload Raw Back to root
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>Спецтехника - Северный Узел</title>7<script src="https://cdn.tailwindcss.com/3.4.16"></script>8<script>9tailwind.config = {10theme: {11extend: {12colors: {13primary: '#25282B',14secondary: '#ffffff'15},16borderRadius: {17'none': '0px',18'sm': '4px',19DEFAULT: '8px',20'md': '12px',21'lg': '16px',22'xl': '20px',23'2xl': '24px',24'3xl': '32px',25'full': '9999px',26'button': '8px'27},28fontFamily: {29'din': ['DIN Alternate', 'DIN Pro', 'sans-serif'],30'roboto': ['Roboto', 'sans-serif']31}32}33}34}35</script>36<link rel="preconnect" href="https://fonts.googleapis.com">37<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>38<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">39<link href="https://fonts.cdnfonts.com/css/coolvetica" rel="stylesheet">40<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css">41<style>42:where([class^="ri-"])::before {43content: "\f3c2";44}45@import url('https://fonts.googleapis.com/css2?family=DIN+Alternate:wght@400;700&display=swap');46.card-hover {47transition: all 0.3s ease;48}49.card-hover:hover {50transform: translateY(-8px);51box-shadow: 0 20px 40px rgba(37, 40, 43, 0.15);52}53.nav-item {54position: relative;55}56.dropdown {57position: absolute;58top: 100%;59left: 0;60background: white;61border: 1px solid #e5e7eb;62border-radius: 8px;63box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);64opacity: 0;65visibility: hidden;66transform: translateY(-10px);67transition: all 0.3s ease;68z-index: 50;69min-width: 200px;70}71.nav-item:hover .dropdown {72opacity: 1;73visibility: visible;74transform: translateY(0);75}76.active-nav {77color: #25282B;78font-weight: 600;79}80.gallery-image {81cursor: pointer;82transition: all 0.3s ease;83}84.gallery-image:hover {85transform: scale(1.05);86}87.modal {88display: none;89position: fixed;90top: 0;91left: 0;92width: 100%;93height: 100%;94background: rgba(0, 0, 0, 0.9);95z-index: 100;96}97.modal.active {98display: flex;99align-items: center;100justify-content: center;101}102.modal img {103max-width: 90%;104max-height: 90%;105object-fit: contain;106}107.custom-checkbox {108appearance: none;109width: 20px;110height: 20px;111border: 2px solid #d1d5db;112border-radius: 4px;113background: white;114cursor: pointer;115position: relative;116}117.custom-checkbox:checked {118background: #25282B;119border-color: #25282B;120}121.custom-checkbox:checked::after {122content: '✓';123position: absolute;124top: 50%;125left: 50%;126transform: translate(-50%, -50%);127color: white;128font-size: 12px;129font-weight: bold;130}131.custom-select {132appearance: none;133background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");134background-position: right 12px center;135background-repeat: no-repeat;136background-size: 16px;137padding-right: 40px;138}139</style>140</head>141<body class="font-roboto bg-white">142<header class="bg-white border-b border-gray-100 sticky top-0 z-40">143<div class="w-full px-6 lg:px-8">144<div class="flex items-center justify-between h-20">145<div class="flex items-center">146<a href="https://readdy.ai/home/03180a34-5b61-4252-8acc-589f53d09df2/cce38d9e-ff21-49ea-a4c5-0accc038d013" data-readdy="true" class="flex items-center">147<span class="text-3xl font-['Coolvetica'] text-primary">Северный Узел</span>148</a>149</div>150<nav class="hidden lg:flex items-center space-x-8">151<a href="/index.html" data-readdy="true" class="text-gray-700 hover:text-primary transition-colors font-medium">Главная</a>152<div class="nav-item">153<a href="#" class="active-nav text-gray-700 hover:text-primary transition-colors font-medium flex items-center">154Направления155<div class="w-4 h-4 flex items-center justify-center ml-1">156<i class="ri-arrow-down-s-line text-sm"></i>157</div>158</a>159<div class="dropdown">160<a href="/Logistic.html" class="block px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">Кризисная логистика</a>161<a href="/spectech.html" class="block px-4 py-3 text-primary bg-gray-50 font-medium">Спецтехника</a>162<a href="/connection.html" class="block px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">Связь и мониторинг</a>163</div>164</div>165<a href="/decisions.html" class="text-gray-700 hover:text-primary transition-colors font-medium">Решения</a>166<a href="/cases.html" class="text-gray-700 hover:text-primary transition-colors font-medium">Кейсы</a>167<a href="/expertise.html" class="text-gray-700 hover:text-primary transition-colors font-medium">Экспертиза</a>168<a href="/contacts.html" class="text-gray-700 hover:text-primary transition-colors font-medium">Контакты</a>169</nav>170<div class="flex items-center space-x-6">171<a href="tel:+7" class="text-gray-700 hover:text-primary transition-colors font-medium">+7 (495) 123-45-67</a>172<button class="bg-primary text-white px-6 py-3 !rounded-button hover:bg-gray-800 transition-colors font-medium whitespace-nowrap">173Обсудить задачу174</button>175</div>176</div>177</div>178</header>179 180<main>181<section class="relative h-screen flex items-center justify-center overflow-hidden bg-primary">182<div class="absolute inset-0 bg-gradient-to-r from-black/70 via-black/50 to-transparent z-10"></div>183<div style="background-image: url('https://readdy.ai/api/search-image?query=arctic%20specialized%20equipment%20all-terrain%20vehicles%20snowmobiles%20and%20modular%20units%20in%20harsh%20winter%20landscape%20professional%20rental%20fleet%20extreme%20conditions%20industrial%20machinery%20cinematic%20wide%20shot&width=1920&height=1080&seq=hero2&orientation=landscape')" class="absolute inset-0 bg-cover bg-center bg-no-repeat"></div>184<div class="relative z-20 w-full px-6 lg:px-8">185<div class="max-w-5xl mx-auto text-center">186<h1 class="text-6xl lg:text-8xl font-bold text-white mb-8 font-['DIN Pro'] leading-tight tracking-tight">187Спецтехника для<br><span class="bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-gray-300">экстремальных условий</span>188</h1>189<p class="text-xl lg:text-2xl text-gray-200 mb-12 max-w-3xl mx-auto leading-relaxed">190Аренда и поставка вездеходов, снегоходов, арктических модулей и специализированного оборудования для работы в самых сложных условиях191</p>192<div class="flex flex-col sm:flex-row items-center justify-center space-y-6 sm:space-y-0 sm:space-x-10">193<button class="bg-white text-primary px-10 py-5 !rounded-button hover:bg-gray-100 transition-all transform hover:scale-105 font-medium text-lg whitespace-nowrap shadow-lg" onclick="document.getElementById('request-form').scrollIntoView({behavior: 'smooth'})">194Получить консультацию195</button>196<div class="bg-white/10 backdrop-blur-sm px-8 py-4 rounded-2xl">197<div class="text-4xl font-bold text-white font-['DIN Pro'] mb-1">150+</div>198<div class="text-gray-300 text-sm uppercase tracking-wider">единиц техники</div>199</div>200</div>201</div>202</div>203</section>204 205<section class="py-20 bg-white">206<div class="max-w-7xl mx-auto px-6 lg:px-8">207<div class="text-center mb-16">208<h2 class="text-4xl font-bold text-primary mb-4 font-din">Каталог оборудования</h2>209<p class="text-xl text-gray-600 max-w-3xl mx-auto">Современная техника для работы в арктических условиях и труднодоступных территориях</p>210</div>211 212<div class="mb-16">213<h3 class="text-3xl font-bold text-primary mb-8 font-din">Вездеходы</h3>214<div class="grid lg:grid-cols-3 gap-8">215<div class="card-hover bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100">216<div class="h-64 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=heavy%20duty%20arctic%20all-terrain%20vehicle%20with%20tracks%20designed%20for%20extreme%20cold%20weather%20industrial%20grade%20equipment%20professional%20rental%20fleet%20snow%20and%20ice%20terrain&width=400&height=300&seq=atv1&orientation=landscape')"></div>217<div class="p-6">218<h4 class="text-xl font-bold text-primary mb-3 font-din">Арктик Трак АТ-3500</h4>219<div class="space-y-2 text-sm text-gray-600 mb-4">220<div class="flex justify-between">221<span>Грузоподъемность:</span>222<span class="font-medium">3.5 тонны</span>223</div>224<div class="flex justify-between">225<span>Температурный диапазон:</span>226<span class="font-medium">-60°C до +40°C</span>227</div>228<div class="flex justify-between">229<span>Проходимость:</span>230<span class="font-medium">Болота, снег, лед</span>231</div>232</div>233<div class="flex justify-between items-center">234<div class="text-2xl font-bold text-primary">от 15 000 ₽/сутки</div>235<button class="bg-primary text-white px-4 py-2 !rounded-button hover:bg-gray-800 transition-colors text-sm whitespace-nowrap">236Подробнее237</button>238</div>239</div>240</div>241 242<div class="card-hover bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100">243<div class="h-64 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=amphibious%20all-terrain%20vehicle%20crossing%20frozen%20river%20in%20arctic%20landscape%20specialized%20equipment%20for%20extreme%20conditions%20professional%20industrial%20machinery&width=400&height=300&seq=atv2&orientation=landscape')"></div>244<div class="p-6">245<h4 class="text-xl font-bold text-primary mb-3 font-din">Амфибия АМФ-2800</h4>246<div class="space-y-2 text-sm text-gray-600 mb-4">247<div class="flex justify-between">248<span>Грузоподъемность:</span>249<span class="font-medium">2.8 тонны</span>250</div>251<div class="flex justify-between">252<span>Особенности:</span>253<span class="font-medium">Плавающий</span>254</div>255<div class="flex justify-between">256<span>Скорость на воде:</span>257<span class="font-medium">8 км/ч</span>258</div>259</div>260<div class="flex justify-between items-center">261<div class="text-2xl font-bold text-primary">от 18 000 ₽/сутки</div>262<button class="bg-primary text-white px-4 py-2 !rounded-button hover:bg-gray-800 transition-colors text-sm whitespace-nowrap">263Подробнее264</button>265</div>266</div>267</div>268 269<div class="card-hover bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100">270<div class="h-64 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=compact%20arctic%20all-terrain%20vehicle%20navigating%20through%20deep%20snow%20in%20tundra%20landscape%20lightweight%20specialized%20equipment%20for%20reconnaissance%20missions&width=400&height=300&seq=atv3&orientation=landscape')"></div>271<div class="p-6">272<h4 class="text-xl font-bold text-primary mb-3 font-din">Разведчик РЗ-1200</h4>273<div class="space-y-2 text-sm text-gray-600 mb-4">274<div class="flex justify-between">275<span>Грузоподъемность:</span>276<span class="font-medium">1.2 тонны</span>277</div>278<div class="flex justify-between">279<span>Экипаж:</span>280<span class="font-medium">2 человека</span>281</div>282<div class="flex justify-between">283<span>Запас хода:</span>284<span class="font-medium">400 км</span>285</div>286</div>287<div class="flex justify-between items-center">288<div class="text-2xl font-bold text-primary">от 12 000 ₽/сутки</div>289<button class="bg-primary text-white px-4 py-2 !rounded-button hover:bg-gray-800 transition-colors text-sm whitespace-nowrap">290Подробнее291</button>292</div>293</div>294</div>295</div>296</div>297 298<div class="mb-16">299<h3 class="text-3xl font-bold text-primary mb-8 font-din">Снегоходы</h3>300<div class="grid lg:grid-cols-3 gap-8">301<div class="card-hover bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100">302<div class="h-64 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=professional%20arctic%20snowmobile%20with%20cargo%20sled%20in%20snowy%20mountain%20terrain%20specialized%20equipment%20for%20extreme%20winter%20conditions%20industrial%20grade%20vehicle&width=400&height=300&seq=snow1&orientation=landscape')"></div>303<div class="p-6">304<h4 class="text-xl font-bold text-primary mb-3 font-din">Буран Профи БП-640</h4>305<div class="space-y-2 text-sm text-gray-600 mb-4">306<div class="flex justify-between">307<span>Мощность двигателя:</span>308<span class="font-medium">65 л.с.</span>309</div>310<div class="flex justify-between">311<span>Грузовые сани:</span>312<span class="font-medium">500 кг</span>313</div>314<div class="flex justify-between">315<span>Запас хода:</span>316<span class="font-medium">300 км</span>317</div>318</div>319<div class="flex justify-between items-center">320<div class="text-2xl font-bold text-primary">от 8 000 ₽/сутки</div>321<button class="bg-primary text-white px-4 py-2 !rounded-button hover:bg-gray-800 transition-colors text-sm whitespace-nowrap">322Подробнее323</button>324</div>325</div>326</div>327 328<div class="card-hover bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100">329<div class="h-64 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=high-performance%20arctic%20snowmobile%20racing%20through%20deep%20powder%20snow%20in%20siberian%20wilderness%20professional%20winter%20sports%20equipment%20extreme%20conditions&width=400&height=300&seq=snow2&orientation=landscape')"></div>330<div class="p-6">331<h4 class="text-xl font-bold text-primary mb-3 font-din">Арктик Спорт АС-850</h4>332<div class="space-y-2 text-sm text-gray-600 mb-4">333<div class="flex justify-between">334<span>Мощность двигателя:</span>335<span class="font-medium">85 л.с.</span>336</div>337<div class="flex justify-between">338<span>Максимальная скорость:</span>339<span class="font-medium">120 км/ч</span>340</div>341<div class="flex justify-between">342<span>Тип подвески:</span>343<span class="font-medium">Спортивная</span>344</div>345</div>346<div class="flex justify-between items-center">347<div class="text-2xl font-bold text-primary">от 6 500 ₽/сутки</div>348<button class="bg-primary text-white px-4 py-2 !rounded-button hover:bg-gray-800 transition-colors text-sm whitespace-nowrap">349Подробнее350</button>351</div>352</div>353</div>354 355<div class="card-hover bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100">356<div class="h-64 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=utility%20snowmobile%20with%20rescue%20equipment%20and%20medical%20supplies%20in%20arctic%20emergency%20scenario%20professional%20first%20aid%20vehicle%20winter%20conditions&width=400&height=300&seq=snow3&orientation=landscape')"></div>357<div class="p-6">358<h4 class="text-xl font-bold text-primary mb-3 font-din">Медик М-550</h4>359<div class="space-y-2 text-sm text-gray-600 mb-4">360<div class="flex justify-between">361<span>Назначение:</span>362<span class="font-medium">Медицинский</span>363</div>364<div class="flex justify-between">365<span>Оборудование:</span>366<span class="font-medium">Носилки, аптечка</span>367</div>368<div class="flex justify-between">369<span>Экипаж:</span>370<span class="font-medium">2 человека</span>371</div>372</div>373<div class="flex justify-between items-center">374<div class="text-2xl font-bold text-primary">от 9 500 ₽/сутки</div>375<button class="bg-primary text-white px-4 py-2 !rounded-button hover:bg-gray-800 transition-colors text-sm whitespace-nowrap">376Подробнее377</button>378</div>379</div>380</div>381</div>382</div>383 384<div class="mb-16">385<h3 class="text-3xl font-bold text-primary mb-8 font-din">Арктические модули</h3>386<div class="grid lg:grid-cols-3 gap-8">387<div class="card-hover bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100">388<div class="h-64 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=insulated%20arctic%20living%20module%20with%20heating%20system%20in%20snowy%20landscape%20professional%20temporary%20housing%20for%20extreme%20cold%20conditions%20industrial%20shelter&width=400&height=300&seq=module1&orientation=landscape')"></div>389<div class="p-6">390<h4 class="text-xl font-bold text-primary mb-3 font-din">Жилой модуль ЖМ-12</h4>391<div class="space-y-2 text-sm text-gray-600 mb-4">392<div class="flex justify-between">393<span>Вместимость:</span>394<span class="font-medium">12 человек</span>395</div>396<div class="flex justify-between">397<span>Отопление:</span>398<span class="font-medium">Автономное</span>399</div>400<div class="flex justify-between">401<span>Изоляция:</span>402<span class="font-medium">До -60°C</span>403</div>404</div>405<div class="flex justify-between items-center">406<div class="text-2xl font-bold text-primary">от 25 000 ₽/сутки</div>407<button class="bg-primary text-white px-4 py-2 !rounded-button hover:bg-gray-800 transition-colors text-sm whitespace-nowrap">408Подробнее409</button>410</div>411</div>412</div>413 414<div class="card-hover bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100">415<div class="h-64 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=mobile%20arctic%20workshop%20module%20with%20technical%20equipment%20and%20tools%20in%20industrial%20setting%20professional%20maintenance%20facility%20extreme%20weather%20conditions&width=400&height=300&seq=module2&orientation=landscape')"></div>416<div class="p-6">417<h4 class="text-xl font-bold text-primary mb-3 font-din">Рабочий модуль РМ-8</h4>418<div class="space-y-2 text-sm text-gray-600 mb-4">419<div class="flex justify-between">420<span>Назначение:</span>421<span class="font-medium">Мастерская</span>422</div>423<div class="flex justify-between">424<span>Оборудование:</span>425<span class="font-medium">Верстаки, инструменты</span>426</div>427<div class="flex justify-between">428<span>Электропитание:</span>429<span class="font-medium">Генератор 15 кВт</span>430</div>431</div>432<div class="flex justify-between items-center">433<div class="text-2xl font-bold text-primary">от 20 000 ₽/сутки</div>434<button class="bg-primary text-white px-4 py-2 !rounded-button hover:bg-gray-800 transition-colors text-sm whitespace-nowrap">435Подробнее436</button>437</div>438</div>439</div>440 441<div class="card-hover bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100">442<div class="h-64 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=arctic%20medical%20module%20with%20hospital%20equipment%20and%20emergency%20supplies%20in%20remote%20location%20professional%20healthcare%20facility%20extreme%20conditions&width=400&height=300&seq=module3&orientation=landscape')"></div>443<div class="p-6">444<h4 class="text-xl font-bold text-primary mb-3 font-din">Медицинский модуль ММ-6</h4>445<div class="space-y-2 text-sm text-gray-600 mb-4">446<div class="flex justify-between">447<span>Назначение:</span>448<span class="font-medium">Медпункт</span>449</div>450<div class="flex justify-between">451<span>Оборудование:</span>452<span class="font-medium">Операционная</span>453</div>454<div class="flex justify-between">455<span>Персонал:</span>456<span class="font-medium">6 человек</span>457</div>458</div>459<div class="flex justify-between items-center">460<div class="text-2xl font-bold text-primary">от 35 000 ₽/сутки</div>461<button class="bg-primary text-white px-4 py-2 !rounded-button hover:bg-gray-800 transition-colors text-sm whitespace-nowrap">462Подробнее463</button>464</div>465</div>466</div>467</div>468</div>469</div>470</section>471 472<section class="py-20 bg-gray-50">473<div class="max-w-7xl mx-auto px-6 lg:px-8">474<div class="text-center mb-16">475<h2 class="text-4xl font-bold text-primary mb-4 font-din">Условия аренды</h2>476<p class="text-xl text-gray-600 max-w-3xl mx-auto">Гибкие условия сотрудничества для любых задач</p>477</div>478 479<div class="grid lg:grid-cols-2 gap-12">480<div class="bg-white rounded-2xl p-8 shadow-lg">481<div class="w-16 h-16 flex items-center justify-center bg-primary text-white rounded-xl mb-6">482<i class="ri-calendar-line ri-2x"></i>483</div>484<h3 class="text-2xl font-bold text-primary mb-4 font-din">Сроки и цены</h3>485<div class="space-y-4">486<div class="flex justify-between items-center py-2 border-b border-gray-100">487<span class="text-gray-600">Минимальный срок аренды</span>488<span class="font-medium">3 дня</span>489</div>490<div class="flex justify-between items-center py-2 border-b border-gray-100">491<span class="text-gray-600">Скидка при аренде от 30 дней</span>492<span class="font-medium text-green-600">-15%</span>493</div>494<div class="flex justify-between items-center py-2 border-b border-gray-100">495<span class="text-gray-600">Скидка при аренде от 90 дней</span>496<span class="font-medium text-green-600">-25%</span>497</div>498<div class="flex justify-between items-center py-2">499<span class="text-gray-600">Предоплата</span>500<span class="font-medium">50%</span>501</div>502</div>503</div>504 505<div class="bg-white rounded-2xl p-8 shadow-lg">506<div class="w-16 h-16 flex items-center justify-center bg-primary text-white rounded-xl mb-6">507<i class="ri-shield-check-line ri-2x"></i>508</div>509<h3 class="text-2xl font-bold text-primary mb-4 font-din">Гарантии и страхование</h3>510<div class="space-y-4">511<div class="flex justify-between items-center py-2 border-b border-gray-100">512<span class="text-gray-600">Страхование техники</span>513<span class="font-medium text-green-600">Включено</span>514</div>515<div class="flex justify-between items-center py-2 border-b border-gray-100">516<span class="text-gray-600">Залог</span>517<span class="font-medium">100 000 ₽</span>518</div>519<div class="flex justify-between items-center py-2 border-b border-gray-100">520<span class="text-gray-600">Техническая поддержка</span>521<span class="font-medium text-green-600">24/7</span>522</div>523<div class="flex justify-between items-center py-2">524<span class="text-gray-600">Гарантия работоспособности</span>525<span class="font-medium text-green-600">100%</span>526</div>527</div>528</div>529 530<div class="bg-white rounded-2xl p-8 shadow-lg">531<div class="w-16 h-16 flex items-center justify-center bg-primary text-white rounded-xl mb-6">532<i class="ri-truck-line ri-2x"></i>533</div>534<h3 class="text-2xl font-bold text-primary mb-4 font-din">Доставка и обслуживание</h3>535<div class="space-y-4">536<div class="flex justify-between items-center py-2 border-b border-gray-100">537<span class="text-gray-600">Доставка по России</span>538<span class="font-medium">от 50 ₽/км</span>539</div>540<div class="flex justify-between items-center py-2 border-b border-gray-100">541<span class="text-gray-600">Инструктаж персонала</span>542<span class="font-medium text-green-600">Включен</span>543</div>544<div class="flex justify-between items-center py-2 border-b border-gray-100">545<span class="text-gray-600">Техническое обслуживание</span>546<span class="font-medium text-green-600">Включено</span>547</div>548<div class="flex justify-between items-center py-2">549<span class="text-gray-600">Запчасти и расходники</span>550<span class="font-medium">По факту</span>551</div>552</div>553</div>554 555<div class="bg-white rounded-2xl p-8 shadow-lg">556<div class="w-16 h-16 flex items-center justify-center bg-primary text-white rounded-xl mb-6">557<i class="ri-user-line ri-2x"></i>558</div>559<h3 class="text-2xl font-bold text-primary mb-4 font-din">Требования к арендаторам</h3>560<div class="space-y-4">561<div class="flex justify-between items-center py-2 border-b border-gray-100">562<span class="text-gray-600">Водительские права</span>563<span class="font-medium">Категория В, С</span>564</div>565<div class="flex justify-between items-center py-2 border-b border-gray-100">566<span class="text-gray-600">Опыт вождения</span>567<span class="font-medium">от 3 лет</span>568</div>569<div class="flex justify-between items-center py-2 border-b border-gray-100">570<span class="text-gray-600">Возраст</span>571<span class="font-medium">от 25 лет</span>572</div>573<div class="flex justify-between items-center py-2">574<span class="text-gray-600">Справка о несудимости</span>575<span class="font-medium">Обязательна</span>576</div>577</div>578</div>579</div>580</div>581</section>582 583<section class="py-20 bg-white">584<div class="max-w-7xl mx-auto px-6 lg:px-8">585<div class="text-center mb-16">586<h2 class="text-4xl font-bold text-primary mb-4 font-din">Фотогалерея</h2>587<p class="text-xl text-gray-600 max-w-3xl mx-auto">Наша техника в действии в самых экстремальных условиях</p>588</div>589 590<div class="grid lg:grid-cols-4 md:grid-cols-2 gap-6">591<div class="gallery-image rounded-2xl overflow-hidden shadow-lg cursor-pointer" onclick="openModal(this.querySelector('div').style.backgroundImage)">592<div class="h-64 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=arctic%20all-terrain%20vehicle%20convoy%20crossing%20frozen%20lake%20in%20siberian%20wilderness%20extreme%20winter%20conditions%20professional%20expedition%20equipment&width=300&height=300&seq=gallery1&orientation=squarish')"></div>593</div>594 595<div class="gallery-image rounded-2xl overflow-hidden shadow-lg cursor-pointer" onclick="openModal(this.querySelector('div').style.backgroundImage)">596<div class="h-64 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=snowmobile%20team%20navigating%20through%20deep%20snow%20in%20arctic%20tundra%20professional%20winter%20sports%20equipment%20extreme%20weather%20conditions&width=300&height=300&seq=gallery2&orientation=squarish')"></div>597</div>598 599<div class="gallery-image rounded-2xl overflow-hidden shadow-lg cursor-pointer" onclick="openModal(this.querySelector('div').style.backgroundImage)">600<div class="h-64 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=arctic%20modular%20camp%20with%20heated%20shelters%20in%20snowy%20landscape%20professional%20temporary%20housing%20extreme%20cold%20conditions&width=300&height=300&seq=gallery3&orientation=squarish')"></div>601</div>602 603<div class="gallery-image rounded-2xl overflow-hidden shadow-lg cursor-pointer" onclick="openModal(this.querySelector('div').style.backgroundImage)">604<div class="h-64 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=amphibious%20vehicle%20crossing%20partially%20frozen%20river%20in%20arctic%20environment%20specialized%20equipment%20for%20water%20and%20ice%20terrain&width=300&height=300&seq=gallery4&orientation=squarish')"></div>605</div>606 607<div class="gallery-image rounded-2xl overflow-hidden shadow-lg cursor-pointer" onclick="openModal(this.querySelector('div').style.backgroundImage)">608<div class="h-64 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=arctic%20rescue%20operation%20with%20specialized%20vehicles%20and%20medical%20equipment%20emergency%20response%20team%20extreme%20weather%20conditions&width=300&height=300&seq=gallery5&orientation=squarish')"></div>609</div>610 611<div class="gallery-image rounded-2xl overflow-hidden shadow-lg cursor-pointer" onclick="openModal(this.querySelector('div').style.backgroundImage)">612<div class="h-64 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=heavy%20duty%20tracked%20vehicle%20transporting%20cargo%20through%20arctic%20terrain%20industrial%20logistics%20operation%20extreme%20conditions&width=300&height=300&seq=gallery6&orientation=squarish')"></div>613</div>614 615<div class="gallery-image rounded-2xl overflow-hidden shadow-lg cursor-pointer" onclick="openModal(this.querySelector('div').style.backgroundImage)">616<div class="h-64 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=arctic%20workshop%20module%20with%20maintenance%20equipment%20in%20snowy%20industrial%20setting%20professional%20mobile%20facility&width=300&height=300&seq=gallery7&orientation=squarish')"></div>617</div>618 619<div class="gallery-image rounded-2xl overflow-hidden shadow-lg cursor-pointer" onclick="openModal(this.querySelector('div').style.backgroundImage)">620<div class="h-64 bg-cover bg-center" style="background-image: url('https://readdy.ai/api/search-image?query=night%20operation%20with%20arctic%20vehicles%20using%20powerful%20headlights%20in%20blizzard%20conditions%20extreme%20weather%20professional%20equipment&width=300&height=300&seq=gallery8&orientation=squarish')"></div>621</div>622</div>623</div>624</section>625 626<section id="request-form" class="py-20 bg-gray-50">627<div class="max-w-4xl mx-auto px-6 lg:px-8">628<div class="text-center mb-16">629<h2 class="text-4xl font-bold text-primary mb-4 font-din">Заявка на аренду</h2>630<p class="text-xl text-gray-600 max-w-3xl mx-auto">Заполните форму, и мы свяжемся с вами для обсуждения деталей</p>631</div>632 633<div class="bg-white rounded-2xl p-8 shadow-lg">634<form class="space-y-6">635<div class="grid lg:grid-cols-2 gap-6">636<div>637<label class="block text-sm font-medium text-gray-700 mb-2">Имя *</label>638<input type="text" required class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm" placeholder="Введите ваше имя">639</div>640<div>641<label class="block text-sm font-medium text-gray-700 mb-2">Телефон *</label>642<input type="tel" required class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm" placeholder="+7 (___) ___-__-__">643</div>644</div>645 646<div class="grid lg:grid-cols-2 gap-6">647<div>648<label class="block text-sm font-medium text-gray-700 mb-2">Email *</label>649<input type="email" required class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm" placeholder="example@company.ru">650</div>651<div>652<label class="block text-sm font-medium text-gray-700 mb-2">Компания</label>653<input type="text" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm" placeholder="Название организации">654</div>655</div>656 657<div>658<label class="block text-sm font-medium text-gray-700 mb-2">Тип техники *</label>659<select required class="custom-select w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm">660<option value="">Выберите тип техники</option>661<option value="atv">Вездеходы</option>662<option value="snowmobile">Снегоходы</option>663<option value="module">Арктические модули</option>664<option value="complex">Комплексное решение</option>665</select>666</div>667 668<div class="grid lg:grid-cols-2 gap-6">669<div>670<label class="block text-sm font-medium text-gray-700 mb-2">Дата начала аренды *</label>671<input type="date" required class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm">672</div>673<div>674<label class="block text-sm font-medium text-gray-700 mb-2">Дата окончания аренды *</label>675<input type="date" required class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm">676</div>677</div>678 679<div>680<label class="block text-sm font-medium text-gray-700 mb-2">Регион работы *</label>681<input type="text" required class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm" placeholder="Укажите регион или населенный пункт">682</div>683 684<div>685<label class="block text-sm font-medium text-gray-700 mb-2">Дополнительные требования</label>686<textarea rows="4" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm" placeholder="Опишите особенности вашего проекта, дополнительное оборудование, условия работы..."></textarea>687</div>688 689<div class="flex items-start space-x-3">690<input type="checkbox" id="agreement" required class="custom-checkbox mt-1">691<label for="agreement" class="text-sm text-gray-600 cursor-pointer">692Я согласен с <a href="#" class="text-primary hover:underline">условиями обработки персональных данных</a> и <a href="#" class="text-primary hover:underline">пользовательским соглашением</a>693</label>694</div>695 696<div class="flex justify-center">697<button type="submit" class="bg-primary text-white px-12 py-4 !rounded-button hover:bg-gray-800 transition-colors font-medium text-lg whitespace-nowrap">698Отправить заявку699</button>700</div>701</form>702</div>703</div>704</section>705</main>706 707<footer class="bg-white border-t border-gray-100 py-16">708<div class="max-w-7xl mx-auto px-6 lg:px-8">709<div class="grid lg:grid-cols-4 gap-12">710<div class="lg:col-span-2">711<div class="text-2xl font-bold text-primary mb-4 font-['Coolvetica']">Северный Узел</div>712<p class="text-gray-600 mb-6 leading-relaxed max-w-md">713Поставка спутниковой техники, логистика в экстремальных условиях и антикризисный консалтинг для решения самых сложных задач.714</p>715<div class="text-sm text-gray-500">716© 2024 Северный Узел. Все права защищены.717</div>718</div>719<div>720<h3 class="text-lg font-bold text-primary mb-4 font-din">Услуги</h3>721<ul class="space-y-3">722<li><a href="#" class="text-gray-600 hover:text-primary transition-colors">Кризисная логистика</a></li>723<li><a href="#" class="text-primary font-medium">Спецтехника</a></li>724<li><a href="#" class="text-gray-600 hover:text-primary transition-colors">Связь и мониторинг</a></li>725<li><a href="#" class="text-gray-600 hover:text-primary transition-colors">Антикризисный консалтинг</a></li>726</ul>727</div>728<div>729<h3 class="text-lg font-bold text-primary mb-4 font-din">Контакты</h3>730<ul class="space-y-3">731<li class="text-gray-600">+7 (495) 123-45-67</li>732<li class="text-gray-600">info@severnyuzel.ru</li>733<li class="text-gray-600">Работаем круглосуточно</li>734</ul>735</div>736</div>737</div>738</footer>739 740<div id="imageModal" class="modal">741<img id="modalImage" src="" alt="">742<button onclick="closeModal()" class="absolute top-8 right-8 text-white text-4xl hover:text-gray-300 transition-colors">×</button>743</div>744 745<script id="dropdown-menu">746document.addEventListener('DOMContentLoaded', function() {747const navItem = document.querySelector('.nav-item');748const dropdown = navItem.querySelector('.dropdown');749const dropdownLink = navItem.querySelector('a');750let isDropdownOpen = false;751 752dropdownLink.addEventListener('click', function(e) {753e.preventDefault();754isDropdownOpen = !isDropdownOpen;755if (isDropdownOpen) {756dropdown.style.opacity = '1';757dropdown.style.visibility = 'visible';758dropdown.style.transform = 'translateY(0)';759} else {760dropdown.style.opacity = '0';761dropdown.style.visibility = 'hidden';762dropdown.style.transform = 'translateY(-10px)';763}764});765 766document.addEventListener('click', function(e) {767if (!navItem.contains(e.target)) {768isDropdownOpen = false;769dropdown.style.opacity = '0';770dropdown.style.visibility = 'hidden';771dropdown.style.transform = 'translateY(-10px)';772}773});774});775</script>776 777<script id="gallery-modal">778function openModal(backgroundImage) {779const modal = document.getElementById('imageModal');780const modalImage = document.getElementById('modalImage');781const imageUrl = backgroundImage.slice(5, -2);782modalImage.src = imageUrl;783modal.classList.add('active');784document.body.style.overflow = 'hidden';785}786 787function closeModal() {788const modal = document.getElementById('imageModal');789modal.classList.remove('active');790document.body.style.overflow = 'auto';791}792 793document.addEventListener('DOMContentLoaded', function() {794const modal = document.getElementById('imageModal');795modal.addEventListener('click', function(e) {796if (e.target === modal) {797closeModal();798}799});800 801document.addEventListener('keydown', function(e) {802if (e.key === 'Escape') {803closeModal();804}805});806});807</script>808 809<script id="form-handler">810document.addEventListener('DOMContentLoaded', function() {811const form = document.querySelector('form');812form.addEventListener('submit', function(e) {813e.preventDefault();814 815const submitButton = form.querySelector('button[type="submit"]');816const originalText = submitButton.textContent;817submitButton.textContent = 'Отправляется...';818submitButton.disabled = true;819 820setTimeout(() => {821alert('Заявка успешно отправлена! Мы свяжемся с вами в ближайшее время.');822form.reset();823submitButton.textContent = originalText;824submitButton.disabled = false;825}, 2000);826});827});828</script>829 830</body>831</html>