2026-04-09 09:35:49 +00:00
<!DOCTYPE html>
< html lang = "ru" class = "scroll-smooth" >
< head >
< meta charset = "utf-8" / >
< meta content = "width=device-width, initial-scale=1.0" name = "viewport" / >
< link rel = "icon" type = "image/png" href = "public/favicon.png" >
< link rel = "apple-touch-icon" href = "public/apple-touch-icon.png" >
< link rel = "preload" as = "image" href = "public/logo.png" fetchpriority = "high" >
< link rel = "preload" as = "image" href = "public/logo-hero.png" fetchpriority = "high" >
< link rel = "preload" as = "image" href = "public/hero-back-poster.jpg" >
< link rel = "preload" as = "font" type = "font/woff2" href = "public/fonts/inter/InterVariable.woff2" crossorigin >
< link rel = "stylesheet" href = "dist/styles.css" >
< / head >
< body class = "text-on-surface" >
<!-- TopNavBar -->
< nav
class="bg-[#f7f9fb]/80 backdrop-blur-xl docked full-width top-0 sticky z-50 transition-all border-b border-outline-variant/10">
< div class = "flex justify-between items-center px-4 md:px-8 lg:px-12 py-4 md:py-6 w-full max-w-screen-2xl mx-auto" >
< a href = "#" >
2026-04-10 07:11:50 +00:00
< img src = "public/logo.png" alt = "Netijeli Binyat" class = "h-14 md:h-16" fetchpriority = "high" >
2026-04-09 09:35:49 +00:00
< / a >
< div class = "hidden lg:flex space-x-10 items-center font-['Manrope'] font-bold tracking-tight" >
< a class = "text-[#2a3439]/70 hover:text-[#3a5f94] transition-colors duration-300" href = "#about" data-i18n = "nav_about" > О < / a >
< a class = "text-[#2a3439]/70 hover:text-[#3a5f94] transition-colors duration-300"
href="#services" data-i18n="nav_services">Услуги< / a >
< a class = "text-[#2a3439]/70 hover:text-[#3a5f94] transition-colors duration-300"
href="#projects" data-i18n="nav_projects">Проекты< / a >
< a class = "text-[#2a3439]/70 hover:text-[#3a5f94] transition-colors duration-300"
href="#current-works" data-i18n="nav_current_works">Текущие работы< / a >
< a class = "text-[#2a3439]/70 hover:text-[#3a5f94] transition-colors duration-300"
href="#contacts" data-i18n="nav_contacts">Контакты< / a >
< / div >
< div class = "flex items-center space-x-4 md:space-x-6" >
< div class = "hidden md:flex items-center gap-1" id = "lang-switcher" >
< button onclick = "setLang('ru')" class = "lang-btn text-sm font-bold px-2 py-1 rounded-sm transition-all" data-lang = "ru" > RU< / button >
< span class = "text-[#2a3439]/30 text-sm" > /< / span >
< button onclick = "setLang('en')" class = "lang-btn text-sm font-bold px-2 py-1 rounded-sm transition-all" data-lang = "en" > EN< / button >
<!-- <span class="text - [#2a3439]/30 text - sm">/</span>
< button onclick = "setLang('tk')" class = "lang-btn text-sm font-bold px-2 py-1 rounded-sm transition-all" data-lang = "tk" > TK< / button > -->
< / div >
< a href = "#contacts"
class="bg-primary text-on-primary px-4 py-2 md:px-6 text-sm font-bold rounded-sm hover:bg-primary-dim transition-all active:opacity-80" data-i18n="nav_contact_btn">
Связаться
< / a >
< button id = "hamburger-btn" class = "lg:hidden flex items-center justify-center w-10 h-10 text-on-surface" aria-label = "Menu" >
< span class = "material-symbols-outlined text-2xl" > menu< / span >
< / button >
< / div >
< / div >
< / nav >
<!-- Mobile Drawer -->
< div id = "drawer-backdrop" class = "drawer-backdrop fixed inset-0 bg-black/40 z-[60]" > < / div >
< aside id = "mobile-drawer" class = "mobile-drawer fixed top-0 right-0 h-full w-72 bg-[#f7f9fb] z-[70] shadow-2xl flex flex-col" >
< div class = "flex justify-between items-center px-6 py-5 border-b border-outline-variant/20" >
< span class = "font-bold text-primary font-['Manrope']" > Netijeli binyat< / span >
< button id = "drawer-close" class = "w-10 h-10 flex items-center justify-center text-on-surface" >
< span class = "material-symbols-outlined" > close< / span >
< / button >
< / div >
< div class = "flex flex-col py-4 flex-grow font-['Manrope'] font-bold" >
< a class = "px-6 py-4 text-[#2a3439]/70 hover:bg-surface-container transition-colors" href = "#about" data-i18n = "nav_about" onclick = "closeDrawer()" > О < / a >
< a class = "px-6 py-4 text-[#2a3439]/70 hover:bg-surface-container transition-colors" href = "#services" data-i18n = "nav_services" onclick = "closeDrawer()" > Услуги< / a >
< a class = "px-6 py-4 text-[#2a3439]/70 hover:bg-surface-container transition-colors" href = "#projects" data-i18n = "nav_projects" onclick = "closeDrawer()" > Проекты< / a >
< a class = "px-6 py-4 text-[#2a3439]/70 hover:bg-surface-container transition-colors" href = "#current-works" data-i18n = "nav_current_works" onclick = "closeDrawer()" > Текущие работы< / a >
< a class = "px-6 py-4 text-[#2a3439]/70 hover:bg-surface-container transition-colors" href = "#contacts" data-i18n = "nav_contacts" onclick = "closeDrawer()" > Контакты< / a >
< / div >
< div class = "px-6 py-6 border-t border-outline-variant/20" >
< div class = "flex items-center gap-2" id = "lang-switcher-mobile" >
< button onclick = "setLang('ru')" class = "lang-btn text-sm font-bold px-2 py-1 rounded-sm transition-all" data-lang = "ru" > RU< / button >
< span class = "text-[#2a3439]/30 text-sm" > /< / span >
< button onclick = "setLang('en')" class = "lang-btn text-sm font-bold px-2 py-1 rounded-sm transition-all" data-lang = "en" > EN< / button >
< / div >
< / div >
< / aside >
<!-- Hero Section -->
< section class = "relative h-[80vh] md:h-screen flex items-center overflow-hidden bg-background" >
< div class = "absolute inset-0 z-0" >
< div class = "absolute inset-0 bg-gradient-to-r from-background via-background/80 to-transparent z-10" > < / div >
< img class = "w-full h-full object-cover md:hidden" src = "public/hero-back-poster.jpg" alt = "Hero background" / >
< video class = "w-full h-full object-cover hidden md:block" autoplay muted loop playsinline preload = "metadata" poster = "public/hero-back-poster.jpg" >
< source src = "public/hero-back-video.webm" type = "video/webm" >
< source src = "public/hero-back-video.mp4" type = "video/mp4" >
< / video >
< / div >
< div class = "relative z-20 max-w-screen-2xl mx-auto px-4 md:px-8 lg:px-12 w-full grid grid-cols-1 lg:grid-cols-2 gap-12" >
< div class = "flex flex-col justify-center" >
< img src = "public/logo-hero.png" alt = "Netijeli Binyat" class = "h-20 md:h-28 lg:h-36 w-auto object-contain mb-4 md:mb-6 self-start" fetchpriority = "high" >
< p class = "text-lg md:text-xl lg:text-2xl font-medium text-on-surface mb-3 md:mb-4" data-i18n = "hero_subtitle" > Надёжное строительство и инженерные решения< / p >
< p class = "text-sm md:text-base text-on-surface-variant max-w-md mb-6 md:mb-10 leading-relaxed font-body" data-i18n = "hero_desc" >
2026-04-10 07:11:50 +00:00
Профессиональный подход к реализации сложных строительных и инфраструктурных задач. Мы строим будущее, опираясь на опыт и точность.
2026-04-09 09:35:49 +00:00
< / p >
< div class = "flex flex-col sm:flex-row gap-3 sm:gap-4" >
< a href = "#contacts"
class="bg-primary text-on-primary px-6 py-3 md:px-8 md:py-4 font-bold rounded-sm flex items-center justify-center gap-2 hover:bg-primary-dim transition-all" data-i18n-html="hero_contact_btn">
Связаться
< span class = "material-symbols-outlined text-sm" > arrow_forward< / span >
< / a >
< a href = "#services"
class="bg-surface-container-high text-on-surface px-6 py-3 md:px-8 md:py-4 font-bold rounded-sm hover:bg-surface-container-highest transition-all text-center" data-i18n="hero_services_btn">
Наши услуги
< / a >
< / div >
< / div >
< / div >
< / section >
<!-- About Section: Architectural Grid -->
< section class = "py-16 md:py-24 lg:py-32 bg-surface-container-low" id = "about" >
< div class = "max-w-screen-2xl mx-auto px-4 md:px-8 lg:px-12 grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-center" >
< div class = "md:col-span-5 relative" >
< div class = "aspect-[3/4] bg-surface-container overflow-hidden flex items-center justify-center p-8 md:p-12" >
< img class = "w-full h-auto object-contain" src = "public/logo-hero.png" alt = "Netijeli Binyat" loading = "lazy" decoding = "async" / >
< / div >
< div class = "absolute -bottom-8 -right-8 bg-primary p-12 text-on-primary hidden lg:block shadow-2xl" >
< div class = "text-5xl font-black" > 2021< / div >
< div class = "text-xs uppercase tracking-[0.2em] opacity-80" data-i18n = "year_established" > Год основания< / div >
< / div >
< / div >
< div class = "md:col-span-7 md:pl-16" >
< span class = "text-primary text-sm font-bold tracking-widest uppercase mb-4 block" data-i18n = "about_label" > О < / span >
< h2 class = "text-3xl md:text-4xl lg:text-5xl font-extrabold text-on-surface mb-6 md:mb-8 tracking-tight" data-i18n = "about_title" > Лицензированная деятельность и
гарантия качества< / h2 >
< p class = "text-base md:text-lg text-on-surface-variant mb-8 md:mb-12 leading-relaxed" data-i18n = "about_desc" >
С
объединяем глубокую техническую экспертизу с
< / p >
< div class = "grid grid-cols-1 sm:grid-cols-3 gap-6 md:gap-8" >
< div >
< span class = "material-symbols-outlined text-primary text-3xl mb-4" > architecture< / span >
< h4 class = "font-bold text-on-surface mb-2" data-i18n = "experience" > Опыт< / h4 >
< p class = "text-sm text-on-surface-variant" data-i18n = "experience_desc" > Команда экспертов с < / p >
< / div >
< div >
< span class = "material-symbols-outlined text-primary text-3xl mb-4" > verified< / span >
< h4 class = "font-bold text-on-surface mb-2" data-i18n = "quality" > Качество< / h4 >
< p class = "text-sm text-on-surface-variant" data-i18n = "quality_desc" > Строгое соответствие международным стандартам.< / p >
< / div >
< div >
< span class = "material-symbols-outlined text-primary text-3xl mb-4" > account_tree< / span >
< h4 class = "font-bold text-on-surface mb-2" data-i18n = "comprehensive" > Комплекс< / h4 >
< p class = "text-sm text-on-surface-variant" data-i18n = "comprehensive_desc" > Реализация проектов от котлована до ввода.< / p >
< / div >
< / div >
< / div >
< / div >
< / section >
<!-- Updated Services Section -->
< section class = "py-16 md:py-24 lg:py-32 bg-white" id = "services" >
< div class = "max-w-screen-2xl mx-auto px-4 md:px-8 lg:px-12" >
< div class = "mb-10 md:mb-16 lg:mb-20 text-center md:text-left" >
< h2 class = "text-3xl md:text-5xl lg:text-6xl font-black text-on-surface tracking-tighter uppercase leading-none mb-4 md:mb-6" data-i18n = "services_title" > Услуги< / h2 >
< div class = "w-20 h-2 bg-primary mb-8 hidden md:block" > < / div >
< p class = "text-base md:text-lg lg:text-xl text-on-surface-variant max-w-2xl" data-i18n = "services_desc" > Мы предоставляем полный спектр строительных и
инженерных работ любой сложности с < / p >
< / div >
< div
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-outline-variant/20 border border-outline-variant/20">
<!-- Construction -->
< div class = "bg-white p-6 md:p-8 lg:p-12 hover:bg-primary transition-all duration-500 group flex flex-col h-full" >
< span
class="material-symbols-outlined text-5xl text-primary group-hover:text-on-primary mb-8 transition-colors">home_work< / span >
< h3
class="text-2xl font-black text-on-surface group-hover:text-on-primary mb-4 uppercase tracking-tight transition-colors" data-i18n="construction">
Строительство< / h3 >
< p class = "text-on-surface-variant group-hover:text-on-primary/80 mb-8 flex-grow transition-colors" data-i18n = "construction_desc" >
2026-04-10 07:11:50 +00:00
Возведение водоочистных сооружении, а с
2026-04-09 09:35:49 +00:00
экологичных материалов.< / p >
< / div >
<!-- Reconstruction -->
< div class = "bg-white p-6 md:p-8 lg:p-12 hover:bg-primary transition-all duration-500 group flex flex-col h-full" >
< span
class="material-symbols-outlined text-5xl text-primary group-hover:text-on-primary mb-8 transition-colors">handyman< / span >
< h3
class="text-2xl font-black text-on-surface group-hover:text-on-primary mb-4 uppercase tracking-tight transition-colors" data-i18n="reconstruction">
Реконструкция< / h3 >
< p class = "text-on-surface-variant group-hover:text-on-primary/80 mb-8 flex-grow transition-colors" data-i18n = "reconstruction_desc" >
Профессиональное восстановление, усиление конструкций и капитальный ремонт объектов любой
сложности.< / p >
< / div >
<!-- Engineering -->
< div class = "bg-white p-6 md:p-8 lg:p-12 hover:bg-primary transition-all duration-500 group flex flex-col h-full" >
< span
class="material-symbols-outlined text-5xl text-primary group-hover:text-on-primary mb-8 transition-colors">settings_input_component< / span >
< h3
class="text-2xl font-black text-on-surface group-hover:text-on-primary mb-4 uppercase tracking-tight transition-colors" data-i18n="engineering">
Инженерные системы< / h3 >
< p class = "text-on-surface-variant group-hover:text-on-primary/80 mb-8 flex-grow transition-colors" data-i18n = "engineering_desc" >
Монтаж и обслуживание систем водоснабжения, канализации, отопления и вентиляции по мировым
стандартам.< / p >
< / div >
<!-- Electrical -->
< div class = "bg-white p-6 md:p-8 lg:p-12 hover:bg-primary transition-all duration-500 group flex flex-col h-full" >
< span
class="material-symbols-outlined text-5xl text-primary group-hover:text-on-primary mb-8 transition-colors">bolt< / span >
< h3
class="text-2xl font-black text-on-surface group-hover:text-on-primary mb-4 uppercase tracking-tight transition-colors" data-i18n="electrical">
Электромонтаж< / h3 >
< p class = "text-on-surface-variant group-hover:text-on-primary/80 mb-8 flex-grow transition-colors" data-i18n = "electrical_desc" >
Полный комплекс электромонтажных работ: от проектирования сетей до установки сложного
промышленного оборудования.< / p >
< / div >
<!-- Landscaping -->
< div class = "bg-white p-6 md:p-8 lg:p-12 hover:bg-primary transition-all duration-500 group flex flex-col h-full" >
< span
class="material-symbols-outlined text-5xl text-primary group-hover:text-on-primary mb-8 transition-colors">forest< / span >
< h3
class="text-2xl font-black text-on-surface group-hover:text-on-primary mb-4 uppercase tracking-tight transition-colors" data-i18n="landscaping">
Благоустройство< / h3 >
< p class = "text-on-surface-variant group-hover:text-on-primary/80 mb-8 flex-grow transition-colors" data-i18n = "landscaping_desc" >
Профессиональное озеленение, создание парковых зон и ландшафтный дизайн для частных и
общественных территорий.< / p >
< / div >
<!-- Consulting / More -->
< div class = "bg-surface-container-low p-6 md:p-8 lg:p-12 flex flex-col justify-center items-center text-center" >
< p class = "text-on-surface-variant font-medium mb-6" data-i18n = "consultation_text" > Нужна консультация по специальному проекту?< / p >
< a href = "#contacts"
class="bg-primary text-on-primary px-8 py-3 font-bold text-sm uppercase tracking-widest hover:bg-primary-dim transition-all shadow-lg shadow-primary/20" data-i18n="nav_contact_btn">
Связаться
< / a >
< / div >
< / div >
< / div >
< / section >
<!-- Projects Section -->
< section class = "py-16 md:py-24 lg:py-32 bg-surface-container-low" id = "projects" >
< div class = "max-w-screen-2xl mx-auto px-4 md:px-8 lg:px-12" >
< h2 class = "text-3xl md:text-4xl lg:text-5xl font-black text-on-surface mb-8 md:mb-12 lg:mb-16 tracking-tight" data-i18n = "completed_projects" > Реализованные проекты< / h2 >
< div class = "grid grid-cols-1 lg:grid-cols-2 gap-px bg-outline-variant overflow-hidden" >
<!-- Project 1: Water Treatment Plant -->
< div class = "group relative bg-background overflow-hidden aspect-video lg:aspect-square" >
< div class = "carousel absolute inset-0" data-autoplay = "4000" >
2026-04-11 08:12:41 +00:00
< img class = "carousel-slide active w-full h-full object-cover" loading = "lazy" decoding = "async" src = "public/tejen_1.webp" alt = "Tejen water treatment plant 1" / >
< img class = "carousel-slide w-full h-full object-cover" loading = "lazy" decoding = "async" src = "public/tejen_2.webp" alt = "Tejen water treatment plant 2" / >
< img class = "carousel-slide w-full h-full object-cover" loading = "lazy" decoding = "async" src = "public/tejen_3.webp" alt = "Tejen water treatment plant 3" / >
< img class = "carousel-slide w-full h-full object-cover" loading = "lazy" decoding = "async" src = "public/tejen_4.webp" alt = "Tejen water treatment plant 4" / >
< img class = "carousel-slide w-full h-full object-cover" loading = "lazy" decoding = "async" src = "public/tejen_5.webp" alt = "Tejen water treatment plant 5" / >
< img class = "carousel-slide w-full h-full object-cover" loading = "lazy" decoding = "async" src = "public/tejen_6.webp" alt = "Tejen water treatment plant 6" / >
< img class = "carousel-slide w-full h-full object-cover" loading = "lazy" decoding = "async" src = "public/tejen_7.webp" alt = "Tejen water treatment plant 7" / >
2026-04-09 09:35:49 +00:00
< button class = "carousel-prev" aria-label = "Previous" > ‹ < / button >
< button class = "carousel-next" aria-label = "Next" > › < / button >
< div class = "carousel-dots" > < / div >
< / div >
< div
class="absolute inset-0 bg-primary/80 opacity-0 group-hover:opacity-100 transition-opacity duration-500 p-4 md:p-8 lg:p-12 flex flex-col justify-end text-on-primary z-20">
2026-04-10 07:11:50 +00:00
< h4 class = "text-xl md:text-2xl lg:text-3xl font-bold mb-2" data-i18n = "project1_title" > Водоочистное сооружение в г < / h4 >
< p class = "text-sm opacity-90" data-i18n = "project1_desc" > Строительство водоочистного сооружения мощностью 30 000 м³ в сутки в городе Теджен Ахалского велаята — завершён 2024 г < / p >
2026-04-09 09:35:49 +00:00
< / div >
< / div >
<!-- Project 2: Power Supply System -->
< div class = "group relative bg-background overflow-hidden aspect-video lg:aspect-square" >
< div class = "carousel absolute inset-0" data-autoplay = "4000" >
2026-04-11 08:12:41 +00:00
< img class = "carousel-slide active w-full h-full object-cover" loading = "lazy" decoding = "async" src = "public/electric_1.webp" alt = "Power supply infrastructure 1" / >
< img class = "carousel-slide w-full h-full object-cover" loading = "lazy" decoding = "async" src = "public/electric_2.webp" alt = "Power supply infrastructure 2" / >
2026-04-09 09:35:49 +00:00
< button class = "carousel-prev" aria-label = "Previous" > ‹ < / button >
< button class = "carousel-next" aria-label = "Next" > › < / button >
< div class = "carousel-dots" > < / div >
< / div >
< div
class="absolute inset-0 bg-primary/80 opacity-0 group-hover:opacity-100 transition-opacity duration-500 p-4 md:p-8 lg:p-12 flex flex-col justify-end text-on-primary z-20">
2026-04-10 07:11:50 +00:00
< h4 class = "text-xl md:text-2xl lg:text-3xl font-bold mb-2" data-i18n = "project2_title" > Электроснабжение водоочистного сооружения< / h4 >
< p class = "text-sm opacity-90" data-i18n = "project2_desc" > Строительно-монтажные работы по внешней системе электроснабжения водоочистного сооружения мощностью 30 000 м³ в сутки в г г < / p >
2026-04-09 09:35:49 +00:00
< / div >
< / div >
< / div >
< / div >
< / section >
<!-- Current Projects: Tonal Layout -->
< section class = "py-16 md:py-24 lg:py-32 bg-primary text-on-primary" id = "current-works" >
< div class = "max-w-screen-2xl mx-auto px-4 md:px-8 lg:px-12" >
< h2 class = "text-3xl md:text-4xl lg:text-5xl font-black mb-4 md:mb-6 tracking-tight uppercase leading-none" data-i18n-html = "current_projects_title" > Текущие < br / > проекты< / h2 >
< p class = "text-base md:text-lg lg:text-xl text-primary-fixed mb-10 md:mb-16 lg:mb-20 max-w-2xl leading-relaxed" data-i18n = "current_projects_desc" >
В
< / p >
<!-- Current Project 1: text left, carousel right -->
< div class = "grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-center mb-12 md:mb-24" >
< div >
< span class = "text-xs uppercase font-bold tracking-widest text-primary-fixed/60" data-i18n = "current1_status" > Статус: В < / span >
2026-04-10 07:11:50 +00:00
< h3 class = "text-xl md:text-2xl lg:text-3xl font-black mt-2 mb-4 uppercase tracking-tight" data-i18n = "current1_title" > Водоочистное сооружение в Бабадайханском районе< / h3 >
< p class = "text-primary-fixed leading-relaxed" data-i18n = "current1_desc" > Строительство водоочистного сооружения мощностью 20 000 м³ в сутки в Бабадайханском районе Ахалского велаята (Туркменистан).< / p >
2026-04-09 09:35:49 +00:00
< / div >
< div class = "relative aspect-video overflow-hidden" >
2026-04-11 08:12:41 +00:00
< img class = "w-full h-full object-cover" loading = "lazy" decoding = "async" src = "public/babdayhan.webp" alt = "Babadayhan water treatment plant" / >
2026-04-09 09:35:49 +00:00
< / div >
< / div >
<!-- Current Project 2: carousel left, text right -->
< div class = "grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-center" >
< div class = "relative aspect-video overflow-hidden order-2 lg:order-1" >
2026-04-11 08:12:41 +00:00
< img class = "w-full h-full object-cover" loading = "lazy" decoding = "async" src = "public/garashsyzlyk.webp" alt = "Garashsyzlyk water supply" / >
2026-04-09 09:35:49 +00:00
< / div >
< div class = "order-1 lg:order-2" >
< span class = "text-xs uppercase font-bold tracking-widest text-primary-fixed/60" data-i18n = "current2_status" > Статус: В < / span >
< h3 class = "text-xl md:text-2xl lg:text-3xl font-black mt-2 mb-4 uppercase tracking-tight" data-i18n = "current2_title" > Водоснабжение генгешлика Гарашызлык< / h3 >
< p class = "text-primary-fixed leading-relaxed" data-i18n = "current2_desc" > Строительство системы водоснабжения генгешлика Гарашызлык в Теженском районе Ахалского велаята (Туркменистан).< / p >
< / div >
< / div >
< / div >
< / section >
<!-- Contact & Feedback Form -->
< section class = "py-16 md:py-24 lg:py-32 bg-background" id = "contacts" >
< div class = "max-w-screen-2xl mx-auto px-4 md:px-8 lg:px-12" >
< div class = "grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-32" >
< div >
< h2 class = "text-3xl md:text-4xl lg:text-5xl font-black text-on-surface mb-8 md:mb-12 tracking-tight" data-i18n = "contacts_title" > Контакты< / h2 >
< div class = "space-y-12" >
< div class = "flex gap-6" >
< span class = "material-symbols-outlined text-primary text-3xl" > location_on< / span >
< div >
< h5 class = "font-bold text-on-surface uppercase text-xs tracking-widest mb-2" data-i18n = "address_label" > Юридический адрес< / h5 >
2026-04-10 07:11:50 +00:00
< p class = "text-sm md:text-lg text-on-surface-variant" data-i18n-html = "address_text" > Ашхабад, Туркменистан< / p >
2026-04-09 09:35:49 +00:00
< / div >
< / div >
< div class = "flex gap-6" >
< span class = "material-symbols-outlined text-primary text-3xl" > call< / span >
< div >
< h5 class = "font-bold text-on-surface uppercase text-xs tracking-widest mb-2" data-i18n = "phones_label" > Телефоны
< / h5 >
2026-04-10 07:11:50 +00:00
< p class = "text-sm md:text-lg text-on-surface-variant" data-i18n-html = "phones_text" > +993 12 753506< br / > +993 65 725570< / p >
2026-04-09 09:35:49 +00:00
< / div >
< / div >
< div class = "flex gap-6" >
< span class = "material-symbols-outlined text-primary text-3xl" > mail< / span >
< div >
< h5 class = "font-bold text-on-surface uppercase text-xs tracking-widest mb-2" > Email< / h5 >
2026-04-10 07:11:50 +00:00
< p class = "text-sm md:text-lg text-on-surface-variant break-all md:break-normal" data-i18n-html = "email_text" > info@netijelibinyat.com< br / > sukrulbinyat@gmail.com< / p >
2026-04-09 09:35:49 +00:00
< / div >
< / div >
< / div >
< div class = "mt-10 md:mt-16 h-64 rounded-sm overflow-hidden" >
< iframe src = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4292.169908939408!2d58.40571007685183!3d37.96763107193738!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f6ffe5d0683f49f%3A0x7d1f88253a775209!2zMjEyNyBrw7bDp2VzaSA2NCwgQcWfZ2FiYXQsINCi0YPRgNC60LzQtdC90LjRgdGC0LDQvQ!5e1!3m2!1sru!2s!4v1775706346815!5m2!1sru!2s" class = "w-full h-full" style = "border:0;" allowfullscreen = "" loading = "lazy" referrerpolicy = "no-referrer-when-downgrade" > < / iframe >
< / div >
< / div >
< div class = "bg-surface-container-low p-6 md:p-8 lg:p-12" >
< h3 class = "text-2xl md:text-3xl font-bold text-on-surface mb-6 md:mb-10" data-i18n = "write_us" > Напишите нам< / h3 >
< form class = "space-y-8" >
< div >
< label
class="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-3" data-i18n="your_name_label">Ваше
имя< / label >
< input
class="w-full bg-surface-container border-none focus:bg-surface-container-lowest focus:ring-0 transition-all py-4 px-6 font-medium text-on-surface"
data-i18n-placeholder="name_placeholder" placeholder="Александр Петров" type="text" />
< / div >
< div >
< label
class="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-3" data-i18n="phone_label">Телефон< / label >
< input
class="w-full bg-surface-container border-none focus:bg-surface-container-lowest focus:ring-0 transition-all py-4 px-6 font-medium text-on-surface"
placeholder="+993 (__) __-__-__" type="tel" />
< / div >
< div >
< label
class="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-3" data-i18n="message_label">Сообщение< / label >
< textarea
class="w-full bg-surface-container border-none focus:bg-surface-container-lowest focus:ring-0 transition-all py-4 px-6 font-medium text-on-surface"
data-i18n-placeholder="message_placeholder" placeholder="Расскажите о < / textarea >
< / div >
< button
class="w-full bg-primary text-on-primary py-5 font-bold uppercase tracking-[0.2em] rounded-sm hover:bg-primary-dim transition-all shadow-lg shadow-primary/20"
type="submit" data-i18n="submit_btn">
Отправить запрос
< / button >
< / form >
< / div >
< / div >
< / div >
< / section >
<!-- Footer -->
< footer class = "bg-surface-container-low py-12 md:py-16 lg:py-20 px-4 md:px-8 lg:px-12" >
< div class = "max-w-screen-2xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12" >
< div >
< div class = "text-xl font-black text-[#3a5f94] mb-6" > Netijeli binyat< / div >
< p class = "font-['Inter'] text-sm tracking-wide text-[#2a3439]/60 leading-relaxed" data-i18n = "footer_desc" >
Строительная компания полного цикла. Качество, проверенное временем и проектами.
< / p >
< / div >
< div >
< h5 class = "text-primary font-bold mb-6 uppercase text-xs tracking-widest" data-i18n = "footer_nav" > Навигация< / h5 >
< ul class = "space-y-4 font-['Inter'] text-sm tracking-wide" >
< li > < a class = "text-[#2a3439]/60 hover:underline transition-all" href = "#about" data-i18n = "nav_about" > О < / a > < / li >
< li > < a class = "text-[#2a3439]/60 hover:underline transition-all" href = "#services" data-i18n = "nav_services" > Услуги< / a > < / li >
< li > < a class = "text-[#2a3439]/60 hover:underline transition-all" href = "#projects" data-i18n = "nav_projects" > Проекты< / a > < / li >
< / ul >
< / div >
< div >
< h5 class = "text-primary font-bold mb-6 uppercase text-xs tracking-widest" data-i18n = "footer_contact" > Контакты< / h5 >
< p class = "text-sm text-[#2a3439]/60 font-['Inter'] tracking-wide" data-i18n-html = "footer_contact_info" >
Ашхабад, Туркменистан< br / >
2026-04-10 07:11:50 +00:00
info@netijelibinyat.com< br / >
+993 12 753506< br / >
2026-04-09 09:35:49 +00:00
+993 65 725570
< / p >
< / div >
< / div >
< div
class="max-w-screen-2xl mx-auto mt-10 md:mt-16 lg:mt-20 pt-8 md:pt-10 border-t border-outline-variant/20 flex flex-col md:flex-row justify-between items-center gap-4">
< p class = "font-['Inter'] text-sm tracking-wide text-[#2a3439]/60" data-i18n = "footer_copyright" > © 2021 Netijeli binyat. В с е
защищены.< / p >
< div class = "flex gap-6" >
< span
class="material-symbols-outlined text-primary cursor-pointer hover:opacity-70 transition-opacity">language< / span >
< span
class="material-symbols-outlined text-primary cursor-pointer hover:opacity-70 transition-opacity">share< / span >
< / div >
< / div >
< / footer >
< script src = "js/i18n.js" > < / script >
< script src = "js/carousel.js" > < / script >
< script >
const drawer = document.getElementById('mobile-drawer');
const backdrop = document.getElementById('drawer-backdrop');
const hamburger = document.getElementById('hamburger-btn');
const closeBtn = document.getElementById('drawer-close');
function openDrawer() { drawer.classList.add('open'); backdrop.classList.add('open'); document.body.style.overflow = 'hidden'; }
function closeDrawer() { drawer.classList.remove('open'); backdrop.classList.remove('open'); document.body.style.overflow = ''; }
hamburger.addEventListener('click', openDrawer);
closeBtn.addEventListener('click', closeDrawer);
backdrop.addEventListener('click', closeDrawer);
< / script >
< / body >
< / html >
