500 lines
No EOL
17 KiB
Text
500 lines
No EOL
17 KiB
Text
---
|
||
import Layout from '@layouts/Layout.astro';
|
||
import { SITE_URL, COMPANY } from '@constants';
|
||
|
||
// Логика авторизации (пока статичная переменная)
|
||
const isAuthorized = false; // Измените на true, чтобы увидеть форму
|
||
---
|
||
|
||
<Layout
|
||
title="Контакты — автоюрист в Сургуте"
|
||
description="Свяжитесь с нами для консультации по вопросам автоспоров и юридической помощи автовладельцам."
|
||
canonicalLink={`${SITE_URL}/contacts`}
|
||
breadcrumbs={[
|
||
{ label: 'Главная', href: '/' },
|
||
{ label: 'Контакты' }
|
||
]}
|
||
>
|
||
<!-- Hero-секция -->
|
||
<section class="contacts-hero">
|
||
<div class="site-container">
|
||
<div class="hero-content">
|
||
<div class="badge animate-on-scroll" data-animation="fade-up">
|
||
<span class="status-dot"></span>
|
||
БЕСПЛАТНАЯ КОНСУЛЬТАЦИЯ
|
||
</div>
|
||
<h1 class="title animate-on-scroll" data-animation="fade-up" data-delay="100">
|
||
Свяжитесь <span class="text-gold">с нами</span>
|
||
</h1>
|
||
<p class="description animate-on-scroll" data-animation="fade-up" data-delay="200">
|
||
Мы всегда на связи и готовы помочь вам в решении автоспоров. Оставьте заявку или позвоните — первая консультация бесплатно.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Карточки контактов -->
|
||
<section class="contact-cards">
|
||
<div class="site-container">
|
||
<div class="cards-grid">
|
||
<!-- Телефон -->
|
||
<div class="contact-card animate-on-scroll" data-animation="fade-up" data-delay="100">
|
||
<div class="card-icon phone">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
|
||
</svg>
|
||
</div>
|
||
<h3 class="card-title">Телефон</h3>
|
||
<a href={`tel:${COMPANY.phone.replace(/\s/g, '')}`} class="card-link">
|
||
{COMPANY.phone}
|
||
</a>
|
||
<p class="card-description">Звоните в рабочее время</p>
|
||
</div>
|
||
|
||
<!-- Email -->
|
||
<div class="contact-card animate-on-scroll" data-animation="fade-up" data-delay="200">
|
||
<div class="card-icon email">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect width="20" height="16" x="2" y="4" rx="2"></rect>
|
||
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
|
||
</svg>
|
||
</div>
|
||
<h3 class="card-title">Email</h3>
|
||
<a href={`mailto:${COMPANY.email}`} class="card-link">
|
||
{COMPANY.email}
|
||
</a>
|
||
<p class="card-description">Ответим в течение 24 часов</p>
|
||
</div>
|
||
|
||
<!-- Адрес и часы -->
|
||
<div class="contact-card animate-on-scroll" data-animation="fade-up" data-delay="300">
|
||
<div class="card-icon location">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path>
|
||
<circle cx="12" cy="10" r="3"></circle>
|
||
</svg>
|
||
</div>
|
||
<h3 class="card-title">Адрес</h3>
|
||
<p class="card-text">{COMPANY.address}</p>
|
||
<div class="work-hours">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="hours-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="10"></circle>
|
||
<polyline points="12 6 12 12 16 14"></polyline>
|
||
</svg>
|
||
<span>{COMPANY.workHours}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Форма обратной связи -->
|
||
<section class="contact-form-section">
|
||
<div class="site-container">
|
||
<div class="form-header">
|
||
<h2 class="section-title animate-on-scroll" data-animation="fade-up">
|
||
Напишите <span class="text-gold">нам</span>
|
||
</h2>
|
||
<p class="section-description animate-on-scroll" data-animation="fade-up" data-delay="100">
|
||
Опишите вашу ситуацию — мы ответим в ближайшее время
|
||
</p>
|
||
</div>
|
||
|
||
{isAuthorized ? (
|
||
<form class="contact-form animate-on-scroll" data-animation="fade-up" data-delay="200" action="#" method="POST" id="contact-form">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="contact-name" class="form-label">Ваше имя *</label>
|
||
<input
|
||
type="text"
|
||
id="contact-name"
|
||
name="name"
|
||
class="form-input"
|
||
placeholder="Иван Иванов"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="contact-phone" class="form-label">Телефон *</label>
|
||
<input
|
||
type="tel"
|
||
id="contact-phone"
|
||
name="phone"
|
||
class="form-input"
|
||
placeholder="+7 (___) ___-__-__"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="contact-email" class="form-label">Email</label>
|
||
<input
|
||
type="email"
|
||
id="contact-email"
|
||
name="email"
|
||
class="form-input"
|
||
placeholder="example@mail.ru"
|
||
/>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="contact-message" class="form-label">Сообщение *</label>
|
||
<textarea
|
||
id="contact-message"
|
||
name="message"
|
||
class="form-textarea"
|
||
placeholder="Опишите вашу ситуацию..."
|
||
rows="5"
|
||
required
|
||
></textarea>
|
||
</div>
|
||
|
||
<button type="submit" class="submit-btn">
|
||
Отправить сообщение
|
||
</button>
|
||
|
||
<p class="form-privacy">
|
||
Нажимая кнопку, вы соглашаетесь с
|
||
<a href="/privacy" class="privacy-link">политикой конфиденциальности</a>
|
||
</p>
|
||
</form>
|
||
) : (
|
||
<div class="auth-lock-card animate-on-scroll" data-animation="fade-up" data-delay="200">
|
||
<div class="lock-icon-container">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lock-icon">
|
||
<rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
|
||
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
||
</svg>
|
||
</div>
|
||
<h3 class="lock-title">Форма доступна только клиентам</h3>
|
||
<p class="lock-text">Чтобы отправить сообщение напрямую юристу, пожалуйста, авторизуйтесь в личном кабинете.</p>
|
||
<a href="/auth/sign-in" class="auth-button">Войти в кабинет</a>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA-блок -->
|
||
<section class="contacts-cta">
|
||
<div class="site-container">
|
||
<div class="cta-content">
|
||
<h2 class="cta-title animate-on-scroll" data-animation="fade-up">
|
||
Нужна срочная помощь?
|
||
</h2>
|
||
<p class="cta-text animate-on-scroll" data-animation="fade-up" data-delay="100">
|
||
Запишитесь на бесплатную консультацию прямо сейчас — мы перезвоним в течение 15 минут
|
||
</p>
|
||
<button class="cta-button animate-on-scroll" data-animation="fade-up" data-delay="200" id="consultation-btn" data-modal-target="consultation-modal">
|
||
Записаться на консультацию
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</Layout>
|
||
|
||
<style>
|
||
/* ===== HERO ===== */
|
||
.contacts-hero {
|
||
background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%);
|
||
padding: 8rem 0 4rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.contacts-hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
right: -10%;
|
||
width: 600px;
|
||
height: 600px;
|
||
background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.hero-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
text-align: center;
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.6rem;
|
||
background-color: rgba(234, 194, 110, 0.15);
|
||
border: 1px solid rgba(234, 194, 110, 0.3);
|
||
color: #eac26e;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 6px;
|
||
font-size: 0.8rem;
|
||
font-weight: 700;
|
||
letter-spacing: 1.5px;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.status-dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
background: #22c55e;
|
||
border-radius: 50%;
|
||
animation: pulse 2s ease-in-out infinite;
|
||
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
|
||
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
|
||
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
|
||
}
|
||
|
||
.title {
|
||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||
font-weight: 800;
|
||
color: #ffffff;
|
||
margin: 0 0 1.5rem;
|
||
line-height: 1.15;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.text-gold { color: #eac26e; }
|
||
|
||
.description {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-size: 1.15rem;
|
||
line-height: 1.6;
|
||
margin: 0;
|
||
}
|
||
|
||
/* ===== CONTACT CARDS ===== */
|
||
.contact-cards {
|
||
padding: 5rem 0;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.cards-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 2rem;
|
||
}
|
||
|
||
.contact-card {
|
||
background: #ffffff;
|
||
border-radius: 1rem;
|
||
padding: 2.5rem 2rem;
|
||
text-align: center;
|
||
border: 2px solid transparent;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.contact-card:hover {
|
||
border-color: #d4af37;
|
||
box-shadow: 0 12px 30px rgba(212, 175, 55, 0.12);
|
||
transform: translateY(-6px);
|
||
}
|
||
|
||
.card-icon {
|
||
width: 4rem;
|
||
height: 4rem;
|
||
border-radius: 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 1.5rem;
|
||
}
|
||
|
||
.card-icon.phone { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #2563eb; }
|
||
.card-icon.email { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); color: #d4af37; }
|
||
.card-icon.location { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); color: #16a34a; }
|
||
|
||
.card-icon svg { width: 1.75rem; height: 1.75rem; }
|
||
.card-title { color: #1e293b; font-size: 1.25rem; font-weight: 700; margin: 0 0 0.75rem; }
|
||
.card-link { color: #d4af37; font-size: 1.1rem; font-weight: 600; text-decoration: none; transition: color 0.2s ease; display: block; margin-bottom: 0.5rem; }
|
||
.card-link:hover { color: #b8942e; text-decoration: underline; }
|
||
.card-description { color: #94a3b8; font-size: 0.875rem; margin: 0; }
|
||
.card-text { color: #475569; font-size: 1rem; margin: 0 0 0.75rem; line-height: 1.5; }
|
||
|
||
.work-hours {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
color: #64748b;
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
background: #f1f5f9;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 0.5rem;
|
||
}
|
||
|
||
.hours-icon { width: 1rem; height: 1rem; }
|
||
|
||
/* ===== FORM SECTION & AUTH LOCK ===== */
|
||
.contact-form-section {
|
||
padding: 5rem 0;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.form-header { text-align: center; margin-bottom: 3rem; }
|
||
.section-title { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 800; color: #1e293b; margin: 0 0 1rem; }
|
||
.section-description { color: #64748b; font-size: 1.1rem; margin: 0; }
|
||
|
||
/* Auth Lock Card */
|
||
.auth-lock-card {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
background: #f8fafc;
|
||
border: 2px dashed #e2e8f0;
|
||
border-radius: 1.5rem;
|
||
padding: 4rem 2rem;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.lock-icon-container {
|
||
width: 5rem;
|
||
height: 5rem;
|
||
background: #ffffff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #94a3b8;
|
||
margin-bottom: 1.5rem;
|
||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.lock-icon { width: 2rem; height: 2rem; }
|
||
.lock-title { color: #1e293b; font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; }
|
||
.lock-text { color: #64748b; line-height: 1.6; margin: 0 0 2rem; max-width: 400px; }
|
||
|
||
.auth-button {
|
||
background: #1e293b;
|
||
color: #ffffff;
|
||
padding: 0.875rem 2rem;
|
||
border-radius: 0.75rem;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.auth-button:hover { background: #0f172a; transform: translateY(-2px); }
|
||
|
||
/* Contact Form Styles */
|
||
.contact-form {
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
|
||
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
|
||
.form-label { font-size: 0.9rem; font-weight: 600; color: #1e293b; }
|
||
|
||
.form-input, .form-textarea {
|
||
padding: 0.875rem 1rem;
|
||
border: 2px solid #e2e8f0;
|
||
border-radius: 0.75rem;
|
||
font-size: 1rem;
|
||
font-family: inherit;
|
||
transition: all 0.2s ease;
|
||
outline: none;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.form-input:focus, .form-textarea:focus {
|
||
border-color: #d4af37;
|
||
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
|
||
background: #ffffff;
|
||
}
|
||
|
||
.form-textarea { resize: vertical; min-height: 140px; }
|
||
|
||
.submit-btn {
|
||
background: linear-gradient(135deg, #d4af37 0%, #eac26e 100%);
|
||
color: #1e293b;
|
||
border: none;
|
||
padding: 1rem 2rem;
|
||
border-radius: 0.75rem;
|
||
font-size: 1.1rem;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
|
||
}
|
||
|
||
.submit-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4); }
|
||
.form-privacy { font-size: 0.8rem; color: #94a3b8; text-align: center; }
|
||
.privacy-link { color: #d4af37; text-decoration: underline; }
|
||
|
||
/* ===== CTA & MAP ===== */
|
||
.contacts-cta { padding: 5rem 0; background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%); position: relative; overflow: hidden; }
|
||
.cta-content { position: relative; z-index: 1; text-align: center; max-width: 600px; margin: 0 auto; }
|
||
.cta-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: #ffffff; margin: 0 0 1rem; }
|
||
.cta-text { color: rgba(255, 255, 255, 0.75); font-size: 1.1rem; margin: 0 0 2rem; }
|
||
.cta-button { background: linear-gradient(135deg, #d4af37 0%, #eac26e 100%); color: #1e293b; border: none; padding: 1rem 2.5rem; border-radius: 0.75rem; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; }
|
||
.cta-button:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4); }
|
||
|
||
/* ===== ANIMATIONS ===== */
|
||
.animate-on-scroll { opacity: 0; will-change: opacity, transform; }
|
||
[data-animation="fade-up"] { transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
|
||
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
|
||
|
||
/* ===== RESPONSIVE ===== */
|
||
@media (max-width: 1024px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
|
||
@media (max-width: 768px) {
|
||
.cards-grid { grid-template-columns: 1fr; }
|
||
.form-row { grid-template-columns: 1fr; }
|
||
.auth-lock-card { padding: 3rem 1.5rem; }
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
const setupAnimations = () => {
|
||
const observerOptions = { threshold: 0.1 };
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
const el = entry.target as HTMLElement;
|
||
const delay = parseInt(el.dataset.delay || '0');
|
||
setTimeout(() => el.classList.add('is-visible'), delay);
|
||
observer.unobserve(el);
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
document.querySelectorAll('.animate-on-scroll').forEach((el) => observer.observe(el));
|
||
};
|
||
|
||
const setupForm = () => {
|
||
// Проверяем наличие формы, так как она может быть скрыта условием isAuthorized
|
||
const form = document.getElementById('contact-form') as HTMLFormElement;
|
||
if (form) {
|
||
form.addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
const formData = new FormData(form);
|
||
console.log('Отправка формы:', Object.fromEntries(formData));
|
||
alert('Спасибо! Ваше сообщение отправлено.');
|
||
form.reset();
|
||
});
|
||
}
|
||
};
|
||
|
||
// Инициализация
|
||
setupAnimations();
|
||
setupForm();
|
||
|
||
// Для поддержки Astro transitions
|
||
document.addEventListener('astro:after-swap', () => {
|
||
setupAnimations();
|
||
setupForm();
|
||
});
|
||
</script> |