init

2026-04-02 23:08:29 +03:00
commit 64ae1d9f5a
124 changed files with 18491 additions and 0 deletions
--- a/src/components/Contact.tsx
+++ b/src/components/Contact.tsx
@@ -0,0 +1,108 @@
+import { Phone, Mail, MapPin, Clock } from 'lucide-react';
+
+export function Contact() {
+  return (
+    <section className="py-4 bg-gray-50">
+      <div className="max-w-[900px] mx-auto px-6">
+        {/* Заголовок */}
+        <div className="text-center mb-12">
+          <h2 className="text-3xl lg:text-4xl text-gray-900 mb-3">
+            Обсудим ваш проект
+          </h2>
+          <p className="text-gray-600">
+            Оставьте заявку — перезвоним в течение часа
+          </p>
+        </div>
+
+        {/* Форма */}
+        <div className="bg-white rounded-2xl p-8 shadow-sm border border-gray-100">
+          <form className="space-y-5">
+            <div className="grid md:grid-cols-2 gap-5">
+              <div>
+                <input
+                  type="text"
+                  id="name"
+                  className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
+                  placeholder="Ваше имя"
+                  required
+                />
+              </div>
+
+              <div>
+                <input
+                  type="text"
+                  id="company"
+                  className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
+                  placeholder="Компания"
+                />
+              </div>
+            </div>
+
+            <div className="grid md:grid-cols-2 gap-5">
+              <div>
+                <input
+                  type="email"
+                  id="email"
+                  className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
+                  placeholder="Email"
+                  required
+                />
+              </div>
+
+              <div>
+                <input
+                  type="tel"
+                  id="phone"
+                  className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
+                  placeholder="Телефон"
+                  required
+                />
+              </div>
+            </div>
+
+            <div>
+              <textarea
+                id="message"
+                rows={4}
+                className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all resize-none"
+                placeholder="Расскажите о вашем проекте"
+              ></textarea>
+            </div>
+
+            <div className="flex flex-col sm:flex-row items-center gap-4">
+              <button
+                type="submit"
+                className="w-full sm:w-auto px-8 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-all"
+              >
+                Отправить заявку
+              </button>
+              <p className="text-sm text-gray-500">
+                Нажимая кнопку, вы соглашаетесь с политикой конфиденциальности
+              </p>
+            </div>
+          </form>
+        </div>
+
+        {/* Контакты компактно */}
+        <div className="mt-12 flex flex-wrap justify-center gap-8 text-sm text-gray-600">
+          <a href="tel:+74951234567" className="flex items-center gap-2 hover:text-blue-600 transition-colors">
+            <Phone className="w-4 h-4" />
+            <span>+7 (495) 123-45-67</span>
+          </a>
+          <a href="mailto:info@softclick.ru" className="flex items-center gap-2 hover:text-blue-600 transition-colors">
+            <Mail className="w-4 h-4" />
+            <span>info@softclick.ru</span>
+          </a>
+          <div className="flex items-center gap-2">
+            <MapPin className="w-4 h-4" />
+            <span>Москва, Пресненская наб., 12</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Clock className="w-4 h-4" />
+            <span>Пн-Пт 9:00–18:00</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}