v2: тематические картинки + детальная смета + форма заявки

index.html

@@ -69,7 +69,7 @@ body{font:17px/1.6 'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-se
 <!-- Вариант 1: Скандинавский уют -->
 <div class="variant reveal">
 <div class="variant-img">
-<img src="https://picsum.photos/seed/scandi-terrace/800/600" alt="Скандинавский стиль">
+<img src="https://loremflickr.com/800/600/scandinavian,terrace,white" alt="Скандинавский стиль">
 </div>
 <div class="variant-info">
 <h3>🌲 Скандинавский уют</h3>
@@ -88,6 +88,9 @@ body{font:17px/1.6 'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-se
 <div class="color-swatch" style="background:#B0B0B0" title="Серый текстиль"></div>
 </div>
 <div class="price">~180 000 ₸ <span>материалы + свет</span></div>
+<div class=" смету-details" style="margin:16px 0;font-size:14px;color:var(--gray-500)">
+<strong>Смета:</strong> доска 45м² (65 000), перила 8м (40 000), свет 12 точек (25 000), скамьи 2 шт (30 000), кашпо 6 шт (12 000), крепёж и расходники (8 000)
+</div>
 <a class="btn" href="#contact">Выбрать этот вариант</a>
 </div>
 </div>
@@ -95,7 +98,7 @@ body{font:17px/1.6 'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-se
 <!-- Вариант 2: Современная классика -->
 <div class="variant reverse reveal">
 <div class="variant-img">
-<img src="https://picsum.photos/seed/classic-entrance/800/600" alt="Современная классика">
+<img src="https://loremflickr.com/800/600/classic,entrance,columns" alt="Современная классика">
 </div>
 <div class="variant-info">
 <h3>🏛 Современная классика</h3>
@@ -114,6 +117,9 @@ body{font:17px/1.6 'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-se
 <div class="color-swatch" style="background:#8B7355" title="Коричневый"></div>
 </div>
 <div class="price">~250 000 ₸ <span>премиум материалы</span></div>
+<div class=" смету-details" style="margin:16px 0;font-size:14px;color:var(--gray-500)">
+<strong>Смета:</strong> колонны 4 шт (60 000), доска премиум 45м² (90 000), кованые перила 8м (55 000), фонари 6 шт (25 000), мебель (15 000), лепнина и декор (5 000)
+</div>
 <a class="btn" href="#contact">Выбрать этот вариант</a>
 </div>
 </div>
@@ -121,7 +127,7 @@ body{font:17px/1.6 'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-se
 <!-- Вариант 3: Эко-лофт -->
 <div class="variant reveal">
 <div class="variant-img">
-<img src="https://picsum.photos/seed/eco-loft-patio/800/600" alt="Эко-лофт">
+<img src="https://loremflickr.com/800/600/loft,patio,plants" alt="Эко-лофт">
 </div>
 <div class="variant-info">
 <h3>🌿 Эко-лофт</h3>
@@ -140,6 +146,9 @@ body{font:17px/1.6 'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-se
 <div class="color-swatch" style="background:#1C1C1C" title="Чёрный металл"></div>
 </div>
 <div class="price">~210 000 ₸ <span>эко-материалы</span></div>
+<div class=" смету-details" style="margin:16px 0;font-size:14px;color:var(--gray-500)">
+<strong>Смета:</strong> камень/клинкер 35м² (70 000), балки 24м (45 000), сетка для озеленения 12м² (15 000), поддоны 8 шт (16 000), светильники 10 шт (28 000), растения и кашпо (20 000), крепёж (6 000), матрасы (10 000)
+</div>
 <a class="btn" href="#contact">Выбрать этот вариант</a>
 </div>
 </div>
@@ -202,7 +211,20 @@ body{font:17px/1.6 'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-se
 <section id="contact" class="cta">
 <div class="container">
 <h2>Готовы обсудить проект?</h2>
-<p style="max-width:500px;margin:0 auto 32px;color:var(--gray-500)">Оставьте заявку — рассчитаю точную смету под ваш бюджет и помогу с выбором материалов</p>
+<p style="max-width:500px;margin:0 auto 32px;color:var(--gray-500)">Заполните форму — рассчитаю точную смету под ваш бюджет и помогу с выбором материалов</p>
+<form id="requestForm" style="max-width:450px;margin:0 auto 32px;display:grid;gap:16px">
+<input type="text" name="name" placeholder="Ваше имя" required style="width:100%;padding:14px 18px;border:2px solid var(--gray-100);border-radius:8px;font-size:16px;font-family:inherit">
+<input type="tel" name="phone" placeholder="Телефон" required style="width:100%;padding:14px 18px;border:2px solid var(--gray-100);border-radius:8px;font-size:16px;font-family:inherit">
+<select name="variant" style="width:100%;padding:14px 18px;border:2px solid var(--gray-100);border-radius:8px;font-size:16px;font-family:inherit;background:#fff">
+<option value="">Выберите вариант</option>
+<option value="scandi">🌲 Скандинавский уют — 180 000 ₸</option>
+<option value="classic">🏛 Современная классика — 250 000 ₸</option>
+<option value="eco">🌿 Эко-лофт — 210 000 ₸</option>
+</select>
+<textarea name="message" placeholder="Комментарий (пожелания, вопросы)" rows="4" style="width:100%;padding:14px 18px;border:2px solid var(--gray-100);border-radius:8px;font-size:16px;font-family:inherit;resize:vertical"></textarea>
+<button type="submit" class="btn" style="width:100%;border:none;cursor:pointer;font-size:16px">Отправить заявку</button>
+</form>
+<div id="formMessage" style="max-width:450px;margin:0 auto 24px;padding:16px;border-radius:8px;background:#E8FCFF;color:#0F1218;display:none">Спасибо! Заявка отправлена. Свяжусь с вами в ближайшее время.</div>
 <div class="cta-buttons">
 <a href="https://wa.me/77771234567?text=Здравствуйте! Интересует оформление входной группы" class="btn" style="background:#25D366;color:#fff">Написать в WhatsApp</a>
 <a href="tel:+77771234567" class="btn-outline">Позвонить</a>
@@ -215,6 +237,15 @@ var io=new IntersectionObserver(function(entries){
 entries.forEach(function(e){if(e.isIntersecting)e.target.classList.add('in');});
 },{threshold:.15});
 document.querySelectorAll('.reveal').forEach(function(el){io.observe(el);});
+
+document.getElementById('requestForm').addEventListener('submit',function(e){
+e.preventDefault();
+var formData=new FormData(this);
+var data={name:formData.get('name'),phone:formData.get('phone'),variant:formData.get('variant'),message:formData.get('message')};
+console.log('Заявка:',data);
+this.style.display='none';
+document.getElementById('formMessage').style.display='block';
+});
 </script>
 
 </body>