fix: remove windows slider from Estimator (unused in cost formula)

2026-05-07 20:33:10 +03:00
parent 72f8a4c126
commit 28df47ff00
1 changed files with 122 additions and 0 deletions
@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Calculator } from 'lucide-react';
+
+const Estimator = () => {
+  const [area, setArea] = useState(20); // in sq meters
+  const [thickness, setThickness] = useState(200);
+
+  // Цены за квадратный метр в зависимости от толщины пленки
+  const costPerSqM = thickness === 200 ? 2000 : 3000;
+  const estimatedCost = area * costPerSqM;
+
+  return (
+    <section id="estimator" style={{ backgroundColor: 'var(--bg-lighter)' }}>
+      <div className="container">
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '50px', alignItems: 'center' }}>
+          
+          <div style={{ flex: '1 1 400px' }}>
+            <motion.div
+              initial={{ opacity: 0, x: -50 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.6, type: "spring" }}
+              viewport={{ once: true }}
+            >
+              <h2 style={{ fontSize: '3.5rem', marginBottom: '20px' }}>
+                КАЛЬКУЛЯТОР <span className="text-accent-blue">ЗАЩИТЫ</span>
+              </h2>
+              <p style={{ color: 'var(--text-muted)', fontSize: '1.2rem', marginBottom: '40px', lineHeight: '1.6' }}>
+                Рассчитайте примерную стоимость обеспечения безопасности вашего периметра. Окончательная стоимость определяется после профессионального осмотра объекта.
+              </p>
+              
+              <div className="glass-panel" style={{ padding: '40px' }}>
+                <div style={{ marginBottom: '35px' }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '15px' }}>
+                    <label style={{ fontWeight: 600, color: 'var(--text-main)', fontSize: '1.1rem' }}>Толщина пленки</label>
+                  </div>
+                  <select 
+                    value={thickness} 
+                    onChange={(e) => setThickness(parseInt(e.target.value))}
+                    style={{ 
+                      width: '100%', padding: '12px', 
+                      background: 'var(--bg-lighter)', 
+                      border: '2px solid var(--border-light)', 
+                      borderRadius: '8px',
+                      color: 'var(--text-main)',
+                      fontSize: '1rem',
+                      outline: 'none',
+                      cursor: 'pointer'
+                    }}
+                  >
+                    <option value={200}>200 микрон (от 2000 ₽/м²)</option>
+                    <option value={300}>300 микрон (от 3000 ₽/м²)</option>
+                  </select>
+                </div>
+
+                <div style={{ marginBottom: '20px' }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '15px' }}>
+                    <label style={{ fontWeight: 600, color: 'var(--text-main)', fontSize: '1.1rem' }}>Общая площадь (м²)</label>
+                    <span className="text-accent-blue" style={{ fontWeight: '800', fontSize: '1.2rem' }}>{area}</span>
+                  </div>
+                  <input 
+                    type="range" 
+                    min="5" 
+                    max="500" 
+                    step="5"
+                    value={area} 
+                    onChange={(e) => setArea(parseInt(e.target.value))}
+                    style={{ width: '100%', accentColor: 'var(--accent-blue)', height: '8px', borderRadius: '4px' }}
+                  />
+                </div>
+              </div>
+            </motion.div>
+          </div>
+
+          <div style={{ flex: '1 1 400px' }}>
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.6, delay: 0.2, type: "spring" }}
+              viewport={{ once: true }}
+              className="glass-panel"
+              style={{ 
+                padding: '50px', 
+                textAlign: 'center',
+                border: '2px solid rgba(14, 165, 233, 0.2)',
+                boxShadow: '0 20px 50px rgba(14, 165, 233, 0.1)'
+              }}
+            >
+              <motion.div
+                animate={{ y: [0, -10, 0] }}
+                transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
+              >
+                <Calculator size={56} className="text-accent-blue" style={{ margin: '0 auto 25px' }} />
+              </motion.div>
+              
+              <h3 style={{ fontSize: '1.3rem', color: 'var(--text-muted)', marginBottom: '15px' }}>Ориентировочная стоимость</h3>
+              <div style={{ fontSize: '3.8rem', fontWeight: 800, fontFamily: 'var(--font-heading)', color: 'var(--text-main)', marginBottom: '20px' }}>
+                {estimatedCost.toLocaleString('ru-RU')} ₽
+              </div>
+              <p style={{ fontSize: '1rem', color: 'var(--text-muted)', marginBottom: '35px', lineHeight: '1.6' }}>
+                Включает бронематериалы, специализированный монтаж и финальную проверку.
+              </p>
+              
+              <motion.a 
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                href="#contact" 
+                className="btn-primary" 
+                style={{ display: 'block', width: '100%', textAlign: 'center' }}
+              >
+                Запросить точный расчет
+              </motion.a>
+            </motion.div>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Estimator;