108 lines
3.8 KiB
TypeScript
108 lines
3.8 KiB
TypeScript
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>
|
||
</>
|
||
);
|
||
}
|