440 lines
36 KiB
HTML
440 lines
36 KiB
HTML
<!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="#">
|
||
<img src="public/logo.png" alt="Netijeli Binyat" class="h-8 md:h-10" fetchpriority="high">
|
||
</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">
|
||
Профессиональный подход к реализации сложных инфраструктурных задач. Мы строим будущее, опираясь на опыт и точность.
|
||
</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">
|
||
С 2021 года «Netijeli binyat» осуществляет профессиональную деятельность в строительном секторе. Мы
|
||
объединяем глубокую техническую экспертизу с современными технологиями управления проектами.
|
||
</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">
|
||
Возведение современных жилых и коммерческих зданий с использованием передовых технологий и
|
||
экологичных материалов.</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">
|
||
<img class="carousel-slide active w-full h-full object-cover" loading="lazy" decoding="async" src="public/Tejen-SAD_1.webp" alt="Water treatment plant aerial view" />
|
||
<img class="carousel-slide w-full h-full object-cover" loading="lazy" decoding="async" src="public/Tejen-SAD_2.webp" alt="Water treatment plant wide view" />
|
||
<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">
|
||
<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>
|
||
</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">
|
||
<img class="carousel-slide active w-full h-full object-cover" loading="lazy" decoding="async" src="public/Elektrika_4.webp" alt="Power lines near facility" />
|
||
<img class="carousel-slide w-full h-full object-cover" loading="lazy" decoding="async" src="public/Elektrika_1.webp" alt="Power lines in green field" />
|
||
<img class="carousel-slide w-full h-full object-cover" loading="lazy" decoding="async" src="public/Elektrika_2.webp" alt="Power line infrastructure" />
|
||
<img class="carousel-slide w-full h-full object-cover" loading="lazy" decoding="async" src="public/Elektrika_3.webp" alt="Power lines in desert" />
|
||
<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">
|
||
<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 м³ в сутки в г. Теджен — завершён 2026 г.</p>
|
||
</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">
|
||
В настоящее время частное предприятие «Netijeli binyat» осуществляет следующие строительно-монтажные работы:
|
||
</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>
|
||
<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>
|
||
</div>
|
||
<div class="relative aspect-video overflow-hidden">
|
||
<div class="carousel absolute inset-0" data-autoplay="4000">
|
||
<img class="carousel-slide active w-full h-full object-cover" loading="lazy" decoding="async" src="public/babadayhan_1.webp" alt="Babadayhan water treatment 1" />
|
||
<img class="carousel-slide w-full h-full object-cover" loading="lazy" decoding="async" src="public/babadayhan_2.webp" alt="Babadayhan water treatment 2" />
|
||
<img class="carousel-slide w-full h-full object-cover" loading="lazy" decoding="async" src="public/babadayhan_3.webp" alt="Babadayhan water treatment 3" />
|
||
<button class="carousel-prev" aria-label="Previous">‹</button>
|
||
<button class="carousel-next" aria-label="Next">›</button>
|
||
<div class="carousel-dots"></div>
|
||
</div>
|
||
</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">
|
||
<div class="carousel absolute inset-0" data-autoplay="4000">
|
||
<img class="carousel-slide active w-full h-full object-cover" loading="lazy" decoding="async" src="public/Garashsyzlyk_1.webp" alt="Garashsyzlyk water supply 1" />
|
||
<img class="carousel-slide w-full h-full object-cover" loading="lazy" decoding="async" src="public/Garashsyzlyk_2.webp" alt="Garashsyzlyk water supply 2" />
|
||
<img class="carousel-slide w-full h-full object-cover" loading="lazy" decoding="async" src="public/Garashsyzlyk_3.webp" alt="Garashsyzlyk water supply 3" />
|
||
<img class="carousel-slide w-full h-full object-cover" loading="lazy" decoding="async" src="public/Garashsyzlyk_4.webp" alt="Garashsyzlyk water supply 4" />
|
||
<button class="carousel-prev" aria-label="Previous">‹</button>
|
||
<button class="carousel-next" aria-label="Next">›</button>
|
||
<div class="carousel-dots"></div>
|
||
</div>
|
||
</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>
|
||
<p class="text-sm md:text-lg text-on-surface-variant" data-i18n-html="address_text">Туркменистан, Ашхабад, Беркарарлыкский район,<br />улица Г. Гулиева (2127), дом 64
|
||
</p>
|
||
</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>
|
||
<p class="text-sm md:text-lg text-on-surface-variant" data-i18n-html="phones_text">75 35 06<br />+993 65 725570 - Директор<br />+993 65 705509 - Заместитель директора
|
||
</p>
|
||
</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>
|
||
<p class="text-sm md:text-lg text-on-surface-variant break-all md:break-normal" data-i18n-html="email_text">sukrulbinyat@gmail.com - Директор<br />charievmuratberdi@gmail.com - Заместитель директора</p>
|
||
</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="Расскажите о вашем проекте..." rows="4"></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 />
|
||
sukrulbinyat@gmail.com<br />
|
||
+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>
|