first commit

2026-08-03 21:02:34 +04:00
commit 2dd4f32646
39 changed files with 2326 additions and 0 deletions
@@ -0,0 +1,107 @@
+import type { Metadata } from "next";
+import { Send, MessageCircle, Phone, Mail, MapPin, Clock } from "lucide-react";
+import SectionEyebrow from "@/components/SectionEyebrow";
+import NetworkGraphic from "@/components/NetworkGraphic";
+import ContactForm from "@/components/ContactForm";
+import { contacts } from "@/config/contacts";
+
+export const metadata: Metadata = {
+  title: "Контакты",
+  description: "Свяжитесь с командой LabNetHub через форму, Telegram, WhatsApp или email.",
+};
+
+const directContacts = [
+  {
+    icon: Send,
+    label: "Telegram",
+    value: "Написать в чат",
+    href: contacts.telegramBot,
+  },
+  {
+    icon: Phone,
+    label: "WhatsApp",
+    value: "Написать в WhatsApp",
+    href: contacts.whatsapp,
+  },
+  {
+    icon: Mail,
+    label: "Email",
+    value: contacts.email,
+    href: `mailto:${contacts.email}`,
+  },
+  {
+    icon: MessageCircle,
+    label: "ВКонтакте",
+    value: "Наше сообщество",
+    href: contacts.vk,
+  },
+];
+
+export default function ContactsPage() {
+  return (
+    <>
+      <section className="relative overflow-hidden border-b border-white/[0.06] px-6 pb-16 pt-32 sm:pb-20 sm:pt-40">
+        <div className="pointer-events-none absolute right-0 top-0 w-[420px] max-w-[60%] opacity-70 sm:opacity-100">
+          <NetworkGraphic className="w-full" />
+        </div>
+        <div className="mx-auto max-w-3xl">
+          <SectionEyebrow>Контакты</SectionEyebrow>
+          <h1 className="text-balance font-display text-4xl font-medium leading-[1.1] sm:text-5xl">
+            Свяжитесь <span className="text-gradient-blue">с нами</span>
+          </h1>
+          <p className="mt-5 max-w-xl text-lg leading-relaxed text-ink-500">
+            Расскажите о задаче — предложим решение и сроки. Форма ниже
+            приходит нам напрямую в Telegram.
+          </p>
+        </div>
+      </section>
+
+      <section className="px-6 py-20">
+        <div className="mx-auto grid max-w-6xl gap-12 lg:grid-cols-[1.1fr_0.9fr]">
+          <div>
+            <h2 className="mb-6 font-display text-xl font-medium">
+              Напишите нам
+            </h2>
+            <ContactForm />
+          </div>
+
+          <div>
+            <h2 className="mb-6 font-display text-xl font-medium">
+              Прямые контакты
+            </h2>
+            <div className="space-y-3">
+              {directContacts.map((c) => (
+                <a
+                  key={c.label}
+                  href={c.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-4 rounded-xl border border-white/[0.06] bg-base-900/50 p-4 transition-colors hover:border-blue-500/30"
+                >
+                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-blue-500/25 bg-blue-500/10 text-blue-400">
+                    <c.icon size={18} strokeWidth={1.75} />
+                  </div>
+                  <div>
+                    <p className="text-sm text-ink-500">{c.label}</p>
+                    <p className="font-medium text-ink-100">{c.value}</p>
+                  </div>
+                </a>
+              ))}
+            </div>
+
+            <div className="mt-6 space-y-3 border-t border-white/[0.06] pt-6">
+              <div className="flex items-center gap-3 text-sm text-ink-500">
+                <MapPin size={16} className="text-ink-700" />
+                {contacts.city}
+              </div>
+              <div className="flex items-center gap-3 text-sm text-ink-500">
+                <Clock size={16} className="text-ink-700" />
+                {contacts.workingHours}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}