BivekiGroup/ooodmdk
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance responsiveness and layout across multiple components: Added new screen sizes in Tailwind configuration, improved padding and margins in various sections, and updated styles for better mobile compatibility. Adjusted header and footer designs for improved user experience.

Browse Source
This commit is contained in:
albivkt
2025-07-06 19:09:22 +03:00
parent 0c3fbb93af
commit 8550e6ecc5
21 changed files with 632 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
public/styles/global.css
View File

@ -30,22 +30,276 @@ body {
color: #2c2c2c; color: #2c2c2c;
} }
/* Отступы от фиксированного хедера */
.header-offset {
padding-top: 4rem; /* 64px */
}
@media (min-width: 320px) {
.header-offset {
padding-top: 4.5rem; /* 72px */
}
}
@media (min-width: 480px) {
.header-offset {
padding-top: 5rem; /* 80px */
}
}
@media (min-width: 640px) {
.header-offset {
padding-top: 5.5rem; /* 88px */
}
}
@media (min-width: 768px) {
.header-offset {
padding-top: 6rem; /* 96px */
}
}
@media (min-width: 1024px) {
.header-offset {
padding-top: 7rem; /* 112px */
}
}
/* Планшетные стили */
@media (min-width: 768px) and (max-width: 1023px) {
/* Оптимизация для планшетов */
.tablet-grid {
grid-template-columns: repeat(2, 1fr);
}
.tablet-text-lg {
font-size: 1.125rem;
}
.tablet-p-6 {
padding: 1.5rem;
}
.tablet-gap-6 {
gap: 1.5rem;
}
/* Увеличиваем размер кликабельных элементов для планшетов */
.tablet-touch-target {
min-height: 48px;
min-width: 48px;
}
}
/* Портретная ориентация планшетов */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
.tablet-portrait-stack {
flex-direction: column;
}
.tablet-portrait-full {
width: 100%;
}
.tablet-portrait-center {
text-align: center;
}
}
/* Альбомная ориентация планшетов */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
.tablet-landscape-grid {
grid-template-columns: repeat(3, 1fr);
}
.tablet-landscape-flex {
display: flex;
align-items: center;
}
}
/* Ноутбучные стили */
@media (min-width: 1024px) and (max-width: 1439px) {
/* Оптимизация для ноутбуков */
.laptop-grid {
grid-template-columns: repeat(3, 1fr);
}
.laptop-text-xl {
font-size: 1.25rem;
}
.laptop-p-8 {
padding: 2rem;
}
.laptop-gap-8 {
gap: 2rem;
}
/* Компактные отступы для ноутбуков */
.laptop-compact {
padding: 1rem 2rem;
}
.laptop-sidebar {
width: 280px;
}
}
/* Оптимизация для touch-устройств */
@media (hover: none) and (pointer: coarse) {
/* Увеличиваем размер кликабельных элементов */
button,
.btn,
a[role="button"],
input[type="button"],
input[type="submit"] {
min-height: 44px;
min-width: 44px;
padding: 12px 16px;
}
/* Убираем hover эффекты для touch-устройств */
.hover\:scale-105:hover {
transform: none;
}
/* Добавляем активные состояния для touch */
.touch-active:active {
transform: scale(0.95);
transition: transform 0.1s ease;
}
}
/* Улучшенная прокрутка для планшетов */
@media (min-width: 768px) and (max-width: 1023px) {
.scroll-smooth {
scroll-behavior: smooth;
}
/* Скрываем скроллбары на планшетах для более чистого вида */
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
}
/* Адаптивная типографика */
@media (min-width: 768px) and (max-width: 1023px) {
.responsive-text-sm {
font-size: 0.875rem;
}
.responsive-text-base {
font-size: 1rem;
}
.responsive-text-lg {
font-size: 1.125rem;
}
.responsive-text-xl {
font-size: 1.25rem;
}
.responsive-text-2xl {
font-size: 1.5rem;
}
}
@media (min-width: 1024px) and (max-width: 1439px) {
.responsive-text-sm {
font-size: 0.875rem;
}
.responsive-text-base {
font-size: 1rem;
}
.responsive-text-lg {
font-size: 1.125rem;
}
.responsive-text-xl {
font-size: 1.25rem;
}
.responsive-text-2xl {
font-size: 1.5rem;
}
.responsive-text-3xl {
font-size: 1.875rem;
}
}
/* Кастомные стили */ /* Кастомные стили */
.social-icon { .social-icon {
transition: transition: transform 0.3s ease, opacity 0.3s ease;
transform 0.3s ease,
color 0.3s ease;
} }
.social-icon:hover { .social-icon:hover {
transform: scale(1.1); transform: scale(1.1);
color: #facc15; opacity: 0.8;
} }
.social-icon img { /* Анимации */
transition: filter 0.3s ease; @keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }
.social-icon:hover img { .fade-in {
filter: brightness(1.2) saturate(1.2); animation: fadeIn 0.6s ease-out;
}
/* Специальные стили для модальных окон на планшетах */
@media (min-width: 768px) and (max-width: 1023px) {
.modal-tablet {
max-width: 90vw;
max-height: 90vh;
}
.modal-tablet .modal-content {
padding: 2rem;
}
.modal-tablet .modal-header {
font-size: 1.5rem;
}
.modal-tablet .modal-text {
font-size: 1rem;
}
}
/* Специальные стили для модальных окон на ноутбуках */
@media (min-width: 1024px) and (max-width: 1439px) {
.modal-laptop {
max-width: 80vw;
max-height: 85vh;
}
.modal-laptop .modal-content {
padding: 2.5rem;
}
.modal-laptop .modal-header {
font-size: 1.75rem;
}
.modal-laptop .modal-text {
font-size: 1.125rem;
}
} }

28
src/components/About.astro
View File

@ -14,37 +14,37 @@ const about = {
<section <section
id="about" id="about"
class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white py-20 px-8 lg:px-24 relative overflow-hidden" class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white py-12 xs:py-16 sm:py-20 md:py-24 lg:py-28 px-4 xs:px-6 sm:px-8 md:px-12 lg:px-24 relative overflow-hidden"
> >
<!-- Декоративные элементы --> <!-- Декоративные элементы -->
<div class="absolute inset-0 opacity-5"> <div class="absolute inset-0 opacity-5">
<div class="absolute top-32 left-32 w-40 h-40 bg-yellow-500 rounded-full blur-3xl"></div> <div class="absolute top-16 xs:top-20 sm:top-24 md:top-32 left-16 xs:left-20 sm:left-24 md:left-32 w-24 xs:w-28 sm:w-32 md:w-40 h-24 xs:h-28 sm:h-32 md:h-40 bg-yellow-500 rounded-full blur-3xl"></div>
<div class="absolute bottom-32 right-32 w-48 h-48 bg-yellow-400 rounded-full blur-3xl"></div> <div class="absolute bottom-16 xs:bottom-20 sm:bottom-24 md:bottom-32 right-16 xs:right-20 sm:right-24 md:right-32 w-28 xs:w-32 sm:w-36 md:w-48 h-28 xs:h-32 sm:h-36 md:h-48 bg-yellow-400 rounded-full blur-3xl"></div>
</div> </div>
<div class="relative z-10 flex flex-col lg:flex-row items-center justify-between max-w-7xl mx-auto"> <div class="relative z-10 flex flex-col lg:flex-row items-center justify-between max-w-7xl mx-auto">
<!-- Левая часть: заголовок и описание --> <!-- Левая часть: заголовок и описание -->
<div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-16"> <div class="lg:w-1/2 mb-8 xs:mb-10 sm:mb-12 lg:mb-0 lg:pr-8 xl:pr-16">
<h2 <h2
class="text-6xl lg:text-8xl font-bold text-yellow-500 mb-8 font-nevduplenysh leading-tight" class="text-4xl xs:text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold text-yellow-500 mb-4 xs:mb-6 sm:mb-8 font-nevduplenysh leading-tight"
> >
{about.title} {about.title}
</h2> </h2>
<div class="text-lg lg:text-xl text-gray-300 leading-relaxed font-gilroy"> <div class="text-base xs:text-lg sm:text-xl md:text-2xl text-gray-300 leading-relaxed font-gilroy">
<p class="text-2xl text-white font-semibold mb-4">{about.paragraph1}</p> <p class="text-xl xs:text-2xl sm:text-3xl md:text-4xl text-white font-semibold mb-3 xs:mb-4 leading-tight">{about.paragraph1}</p>
</div> </div>
<!-- Блок быстрых ссылок --> <!-- Блок быстрых ссылок -->
<div class="mt-12 flex flex-wrap gap-4"> <div class="mt-8 xs:mt-10 sm:mt-12 flex flex-col xs:flex-row gap-3 xs:gap-4">
<a href="/cities" class="group inline-flex items-center px-6 py-3 bg-gradient-to-r from-yellow-500 to-yellow-600 text-black rounded-xl hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-yellow-500/25"> <a href="/cities" class="group inline-flex items-center justify-center px-4 xs:px-5 sm:px-6 py-2.5 xs:py-3 sm:py-3.5 bg-gradient-to-r from-yellow-500 to-yellow-600 text-black rounded-lg xs:rounded-xl hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-yellow-500/25 text-sm xs:text-base">
<svg class="w-5 h-5 mr-3 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 xs:w-5 xs:h-5 mr-2 xs:mr-3 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg> </svg>
Наши города Наши города
</a> </a>
<a href="/requisites" class="group inline-flex items-center px-6 py-3 bg-gradient-to-r from-gray-700 to-gray-800 text-white rounded-xl hover:from-gray-600 hover:to-gray-700 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold border border-gray-600 hover:border-gray-500"> <a href="/requisites" class="group inline-flex items-center justify-center px-4 xs:px-5 sm:px-6 py-2.5 xs:py-3 sm:py-3.5 bg-gradient-to-r from-gray-700 to-gray-800 text-white rounded-lg xs:rounded-xl hover:from-gray-600 hover:to-gray-700 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold border border-gray-600 hover:border-gray-500 text-sm xs:text-base">
<svg class="w-5 h-5 mr-3 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 xs:w-5 xs:h-5 mr-2 xs:mr-3 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg> </svg>
Реквизиты Реквизиты
@ -53,10 +53,10 @@ const about = {
</div> </div>
<!-- Правая часть: коллаж из изображений --> <!-- Правая часть: коллаж из изображений -->
<div class="lg:w-1/2 grid grid-cols-2 gap-6"> <div class="lg:w-1/2 grid grid-cols-2 gap-3 xs:gap-4 sm:gap-6">
{ {
about.imageUrls.map((imageUrl, index) => ( about.imageUrls.map((imageUrl, index) => (
<div class="group relative overflow-hidden rounded-2xl shadow-2xl hover:shadow-yellow-500/20 transition-all duration-500 transform hover:scale-105"> <div class="group relative overflow-hidden rounded-xl xs:rounded-2xl shadow-2xl hover:shadow-yellow-500/20 transition-all duration-500 transform hover:scale-105">
<img <img
src={imageUrl} src={imageUrl}
alt={`О нас изображение ${index + 1}`} alt={`О нас изображение ${index + 1}`}

2
src/components/Breadcrumbs.astro
View File

@ -10,7 +10,7 @@ const { items } = Astro.props;
const SITE_URL = "https://ooodmdk.ru"; const SITE_URL = "https://ooodmdk.ru";
--- ---
<nav aria-label="Хлебные крошки" class="py-4 px-8 lg:px-24"> <nav aria-label="Хлебные крошки" class="py-4 px-8 lg:px-24 header-offset">
<ol <ol
class="flex flex-wrap items-center space-x-2 text-sm text-gray-600" class="flex flex-wrap items-center space-x-2 text-sm text-gray-600"
itemscope itemscope

44
src/components/FloatingFAQ.astro
View File

@ -1,12 +1,12 @@
<!-- Плавающая кнопка FAQ --> <!-- Плавающая кнопка FAQ -->
<div class="fixed bottom-8 left-8 z-50"> <div class="fixed bottom-4 xs:bottom-6 sm:bottom-8 left-4 xs:left-6 sm:left-8 z-50">
<button <button
id="floating-faq-btn" id="floating-faq-btn"
class="group w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-2xl shadow-2xl shadow-blue-500/25 hover:shadow-blue-400/40 hover:from-blue-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-110 flex items-center justify-center" class="group w-12 h-12 xs:w-14 xs:h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-xl xs:rounded-2xl shadow-2xl shadow-blue-500/25 hover:shadow-blue-400/40 hover:from-blue-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-110 flex items-center justify-center"
aria-label="Часто задаваемые вопросы" aria-label="Часто задаваемые вопросы"
> >
<svg <svg
class="w-8 h-8 group-hover:scale-110 transition-transform duration-300" class="w-6 h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8 group-hover:scale-110 transition-transform duration-300"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -24,7 +24,7 @@
<!-- Тултип --> <!-- Тултип -->
<div <div
id="faq-tooltip" id="faq-tooltip"
class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-4 px-4 py-2 bg-gray-900 text-white text-sm rounded-xl shadow-lg opacity-0 invisible transition-all duration-300 whitespace-nowrap font-gilroy border border-gray-700" class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 xs:mb-4 px-2 xs:px-4 py-1 xs:py-2 bg-gray-900 text-white text-xs xs:text-sm rounded-lg xs:rounded-xl shadow-lg opacity-0 invisible transition-all duration-300 whitespace-nowrap font-gilroy border border-gray-700"
> >
Часто задаваемые вопросы Часто задаваемые вопросы
<div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900"></div> <div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900"></div>
@ -34,17 +34,17 @@
<!-- Модальное окно FAQ --> <!-- Модальное окно FAQ -->
<div <div
id="faq-modal" id="faq-modal"
class="fixed inset-0 bg-black bg-opacity-75 backdrop-blur-sm flex items-center justify-center z-50 opacity-0 invisible transition-all duration-300" class="fixed inset-0 bg-black bg-opacity-75 backdrop-blur-sm flex items-center justify-center z-50 opacity-0 invisible transition-all duration-300 p-4"
> >
<div <div
class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-3xl p-8 max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto relative border border-gray-700 shadow-2xl" class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-2xl xs:rounded-3xl p-6 xs:p-8 max-w-2xl w-full max-h-[90vh] xs:max-h-[80vh] overflow-y-auto relative border border-gray-700 shadow-2xl"
> >
<button <button
id="close-faq-modal" id="close-faq-modal"
class="absolute top-6 right-6 w-10 h-10 bg-gray-700 hover:bg-gray-600 text-white rounded-xl transition-colors duration-300 flex items-center justify-center" class="absolute top-4 xs:top-6 right-4 xs:right-6 w-8 h-8 xs:w-10 xs:h-10 bg-gray-700 hover:bg-gray-600 text-white rounded-lg xs:rounded-xl transition-colors duration-300 flex items-center justify-center"
> >
<svg <svg
class="w-5 h-5" class="w-4 h-4 xs:w-5 xs:h-5"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -59,48 +59,48 @@
</svg> </svg>
</button> </button>
<h2 class="text-3xl font-bold mb-8 text-white font-nevduplenysh"> <h2 class="text-2xl xs:text-3xl font-bold mb-6 xs:mb-8 text-white font-nevduplenysh">
Быстрые ответы Быстрые ответы
</h2> </h2>
<div class="space-y-6"> <div class="space-y-4 xs:space-y-6">
<!-- Вопрос 1 --> <!-- Вопрос 1 -->
<div class="bg-gray-800 rounded-2xl p-6 border border-gray-700"> <div class="bg-gray-800 rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-gray-700">
<h3 class="text-xl font-semibold text-yellow-400 mb-3 font-gilroy"> <h3 class="text-lg xs:text-xl font-semibold text-yellow-400 mb-2 xs:mb-3 font-gilroy">
Какие драгоценные металлы вы предлагаете? Какие драгоценные металлы вы предлагаете?
</h3> </h3>
<p class="text-gray-300 font-gilroy leading-relaxed"> <p class="text-sm xs:text-base text-gray-300 font-gilroy leading-relaxed">
Мы работаем с полным спектром драгоценных металлов: золото, серебро, платина, палладий, родий. Предлагаем различные формы: слитки, гранулы, проволока, фольга. Мы работаем с полным спектром драгоценных металлов: золото, серебро, платина, палладий, родий. Предлагаем различные формы: слитки, гранулы, проволока, фольга.
</p> </p>
</div> </div>
<!-- Вопрос 2 --> <!-- Вопрос 2 -->
<div class="bg-gray-800 rounded-2xl p-6 border border-gray-700"> <div class="bg-gray-800 rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-gray-700">
<h3 class="text-xl font-semibold text-yellow-400 mb-3 font-gilroy"> <h3 class="text-lg xs:text-xl font-semibold text-yellow-400 mb-2 xs:mb-3 font-gilroy">
Какова чистота ваших металлов? Какова чистота ваших металлов?
</h3> </h3>
<p class="text-gray-300 font-gilroy leading-relaxed"> <p class="text-sm xs:text-base text-gray-300 font-gilroy leading-relaxed">
Мы гарантируем высочайшую чистоту: золото 999,9 пробы, серебро 999,9 пробы, платина 999,5 пробы. Каждая партия сопровождается сертификатом качества. Мы гарантируем высочайшую чистоту: золото 999,9 пробы, серебро 999,9 пробы, платина 999,5 пробы. Каждая партия сопровождается сертификатом качества.
</p> </p>
</div> </div>
<!-- Вопрос 3 --> <!-- Вопрос 3 -->
<div class="bg-gray-800 rounded-2xl p-6 border border-gray-700"> <div class="bg-gray-800 rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-gray-700">
<h3 class="text-xl font-semibold text-yellow-400 mb-3 font-gilroy"> <h3 class="text-lg xs:text-xl font-semibold text-yellow-400 mb-2 xs:mb-3 font-gilroy">
Как быстро происходит доставка? Как быстро происходит доставка?
</h3> </h3>
<p class="text-gray-300 font-gilroy leading-relaxed"> <p class="text-sm xs:text-base text-gray-300 font-gilroy leading-relaxed">
Доставка по Москве — в день заказа, по России — 1-7 дней в зависимости от региона. Все грузы застрахованы и отслеживаются. Доставка по Москве — в день заказа, по России — 1-7 дней в зависимости от региона. Все грузы застрахованы и отслеживаются.
</p> </p>
</div> </div>
</div> </div>
<div class="mt-8 text-center"> <div class="mt-6 xs:mt-8 text-center">
<a <a
href="/faq" href="/faq"
class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-2xl hover:from-blue-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-blue-500/25" class="inline-flex items-center px-6 xs:px-8 py-3 xs:py-4 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl xs:rounded-2xl hover:from-blue-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-blue-500/25 text-sm xs:text-base"
> >
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 xs:w-5 xs:h-5 mr-2 xs:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg> </svg>
Все вопросы и ответы Все вопросы и ответы

58
src/components/Footer.astro
View File

@ -1,6 +1,6 @@
<footer <footer
id="contacts" id="contacts"
class="bg-gradient-to-br from-gray-900 via-black to-gray-900 text-white py-16 px-8 lg:px-24 relative overflow-hidden" class="bg-gradient-to-br from-gray-900 via-black to-gray-900 text-white py-12 xs:py-16 px-4 xs:px-6 sm:px-8 lg:px-24 relative overflow-hidden"
> >
<!-- Декоративные элементы --> <!-- Декоративные элементы -->
<div class="absolute inset-0 opacity-10"> <div class="absolute inset-0 opacity-10">
@ -12,18 +12,18 @@
<div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-yellow-500 to-transparent"></div> <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-yellow-500 to-transparent"></div>
<div class="relative z-10 max-w-7xl mx-auto"> <div class="relative z-10 max-w-7xl mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 xs:gap-10 sm:gap-12">
<!-- Левая колонка --> <!-- Левая колонка -->
<div> <div>
<div class="flex items-center mb-8"> <div class="flex items-center mb-6 xs:mb-8">
<img src="/logo.svg" alt="Логотип" class="h-16 mr-6" /> <img src="/logo.svg" alt="Логотип" class="h-12 xs:h-14 sm:h-16 mr-4 xs:mr-6" />
<h3 class="text-4xl font-bold font-gilroy">ООО «ДМДК»</h3> <h3 class="text-2xl xs:text-3xl sm:text-4xl font-bold font-gilroy">ООО «ДМДК»</h3>
</div> </div>
<p class="text-2xl mb-8 font-gilroy text-gray-300"> <p class="text-lg xs:text-xl sm:text-2xl mb-6 xs:mb-8 font-gilroy text-gray-300">
Режим работы:<br /> Режим работы:<br />
<span class="text-yellow-400 font-semibold">09:00 - 21:00</span> <span class="text-yellow-400 font-semibold">09:00 - 21:00</span>
</p> </p>
<nav class="space-y-4 text-lg"> <nav class="space-y-3 xs:space-y-4 text-base xs:text-lg">
<a href="/#about" class="block hover:text-yellow-400 font-gilroy transition-colors duration-300 hover:translate-x-2 transform">о нас</a> <a href="/#about" class="block hover:text-yellow-400 font-gilroy transition-colors duration-300 hover:translate-x-2 transform">о нас</a>
<a href="/#products" class="block hover:text-yellow-400 font-gilroy transition-colors duration-300 hover:translate-x-2 transform">продукция</a> <a href="/#products" class="block hover:text-yellow-400 font-gilroy transition-colors duration-300 hover:translate-x-2 transform">продукция</a>
<a href="/cities" class="block hover:text-yellow-400 font-gilroy transition-colors duration-300 hover:translate-x-2 transform">наши города</a> <a href="/cities" class="block hover:text-yellow-400 font-gilroy transition-colors duration-300 hover:translate-x-2 transform">наши города</a>
@ -35,16 +35,16 @@
</div> </div>
<!-- Правая колонка --> <!-- Правая колонка -->
<div class="flex flex-col space-y-8"> <div class="flex flex-col space-y-6 xs:space-y-8">
<div class="group"> <div class="group">
<div class="bg-gradient-to-br from-gray-800 to-gray-900 p-8 rounded-2xl border border-gray-700 hover:border-yellow-500/50 transition-all duration-300 hover:transform hover:scale-105"> <div class="bg-gradient-to-br from-gray-800 to-gray-900 p-6 xs:p-8 rounded-xl xs:rounded-2xl border border-gray-700 hover:border-yellow-500/50 transition-all duration-300 hover:transform hover:scale-105">
<div class="flex items-center mb-4"> <div class="flex items-center mb-3 xs:mb-4">
<div class="w-12 h-12 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-xl flex items-center justify-center mr-4"> <div class="w-10 h-10 xs:w-12 xs:h-12 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-lg xs:rounded-xl flex items-center justify-center mr-3 xs:mr-4">
<img src="/icons/phone.svg" alt="Позвонить" class="h-6 w-6" /> <img src="/icons/phone.svg" alt="Позвонить" class="h-5 w-5 xs:h-6 xs:w-6" />
</div> </div>
<h4 class="text-2xl text-yellow-400 font-semibold font-gilroy">ПОЗВОНИТЬ</h4> <h4 class="text-xl xs:text-2xl text-yellow-400 font-semibold font-gilroy">ПОЗВОНИТЬ</h4>
</div> </div>
<div class="text-xl text-white font-gilroy"> <div class="text-lg xs:text-xl text-white font-gilroy">
<a href="tel:+79251045050" class="block hover:text-yellow-400 transition-colors">+7 (925) 104-50-50</a> <a href="tel:+79251045050" class="block hover:text-yellow-400 transition-colors">+7 (925) 104-50-50</a>
<a href="tel:+79266646246" class="block hover:text-yellow-400 transition-colors">+7 (926) 664-62-46</a> <a href="tel:+79266646246" class="block hover:text-yellow-400 transition-colors">+7 (926) 664-62-46</a>
</div> </div>
@ -52,43 +52,43 @@
</div> </div>
<div class="group"> <div class="group">
<div class="bg-gradient-to-br from-gray-800 to-gray-900 p-8 rounded-2xl border border-gray-700 hover:border-blue-500/50 transition-all duration-300 hover:transform hover:scale-105"> <div class="bg-gradient-to-br from-gray-800 to-gray-900 p-6 xs:p-8 rounded-xl xs:rounded-2xl border border-gray-700 hover:border-blue-500/50 transition-all duration-300 hover:transform hover:scale-105">
<div class="flex items-center mb-4"> <div class="flex items-center mb-3 xs:mb-4">
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center mr-4"> <div class="w-10 h-10 xs:w-12 xs:h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg xs:rounded-xl flex items-center justify-center mr-3 xs:mr-4">
<img src="/icons/email.svg" alt="Написать" class="h-6 w-6" /> <img src="/icons/email.svg" alt="Написать" class="h-5 w-5 xs:h-6 xs:w-6" />
</div> </div>
<h4 class="text-2xl text-blue-400 font-semibold font-gilroy">НАПИСАТЬ</h4> <h4 class="text-xl xs:text-2xl text-blue-400 font-semibold font-gilroy">НАПИСАТЬ</h4>
</div> </div>
<a href="mailto:ooo.dmdk@mail.ru" class="text-xl text-white font-gilroy hover:text-blue-400 transition-colors"> <a href="mailto:ooo.dmdk@mail.ru" class="text-lg xs:text-xl text-white font-gilroy hover:text-blue-400 transition-colors">
ooo.dmdk@mail.ru ooo.dmdk@mail.ru
</a> </a>
</div> </div>
</div> </div>
<div class="flex space-x-6 mt-8"> <div class="flex justify-center lg:justify-start space-x-4 xs:space-x-6 mt-6 xs:mt-8">
<a <a
href="https://wa.me/79251045050" href="https://wa.me/79251045050"
class="group bg-gradient-to-br from-green-500 to-green-600 p-6 rounded-2xl text-white flex items-center justify-center w-20 h-20 hover:from-green-400 hover:to-green-500 transition-all duration-300 transform hover:scale-110 shadow-lg shadow-green-500/25" class="group bg-gradient-to-br from-green-500 to-green-600 p-4 xs:p-6 rounded-xl xs:rounded-2xl text-white flex items-center justify-center w-16 h-16 xs:w-20 xs:h-20 hover:from-green-400 hover:to-green-500 transition-all duration-300 transform hover:scale-110 shadow-lg shadow-green-500/25"
> >
<img src="/icons/ws.svg" alt="WhatsApp" class="h-10 w-10" /> <img src="/icons/ws.svg" alt="WhatsApp" class="h-8 w-8 xs:h-10 xs:w-10" />
</a> </a>
<a <a
href="https://t.me/OOO_DMDK" href="https://t.me/OOO_DMDK"
class="group bg-gradient-to-br from-blue-500 to-blue-600 p-6 rounded-2xl text-white flex items-center justify-center w-20 h-20 hover:from-blue-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-110 shadow-lg shadow-blue-500/25" class="group bg-gradient-to-br from-blue-500 to-blue-600 p-4 xs:p-6 rounded-xl xs:rounded-2xl text-white flex items-center justify-center w-16 h-16 xs:w-20 xs:h-20 hover:from-blue-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-110 shadow-lg shadow-blue-500/25"
> >
<img src="/icons/tg.svg" alt="Telegram" class="h-10 w-10" /> <img src="/icons/tg.svg" alt="Telegram" class="h-8 w-8 xs:h-10 xs:w-10" />
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<!-- Нижняя часть --> <!-- Нижняя часть -->
<div class="mt-16 pt-8 border-t border-gray-700"> <div class="mt-12 xs:mt-16 pt-6 xs:pt-8 border-t border-gray-700">
<div class="flex flex-col md:flex-row justify-between items-center"> <div class="flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
<div class="text-gray-400 font-gilroy mb-4 md:mb-0"> <div class="text-gray-400 font-gilroy text-sm xs:text-base text-center sm:text-left">
© 2024 ООО «ДМДК». Все права защищены. © 2024 ООО «ДМДК». Все права защищены.
</div> </div>
<div class="flex space-x-6 text-sm text-gray-400 font-gilroy"> <div class="flex flex-col xs:flex-row space-y-2 xs:space-y-0 xs:space-x-4 sm:space-x-6 text-xs xs:text-sm text-gray-400 font-gilroy text-center">
<a href="/requisites" class="hover:text-yellow-400 transition-colors">Политика конфиденциальности</a> <a href="/requisites" class="hover:text-yellow-400 transition-colors">Политика конфиденциальности</a>
<a href="/requisites" class="hover:text-yellow-400 transition-colors">Пользовательское соглашение</a> <a href="/requisites" class="hover:text-yellow-400 transition-colors">Пользовательское соглашение</a>
</div> </div>

61
src/components/Header.astro
View File

@ -62,11 +62,11 @@
</div> </div>
<header <header
class="fixed text-white top-2 sm:top-4 left-1/2 transform -translate-x-1/2 w-11/12 max-w-screen-xl z-50 flex justify-between items-center px-3 py-2 sm:px-4 sm:py-3 lg:px-6 lg:py-4 bg-black bg-opacity-70 backdrop-blur-sm rounded-xl sm:rounded-2xl border border-white border-opacity-20" class="fixed text-white top-1 xs:top-2 sm:top-3 md:top-4 left-1/2 transform -translate-x-1/2 w-[95%] xs:w-11/12 max-w-screen-xl z-50 flex justify-between items-center px-2 py-1.5 xs:px-3 xs:py-2 sm:px-4 sm:py-3 md:px-6 md:py-4 bg-black bg-opacity-70 backdrop-blur-sm rounded-lg xs:rounded-xl sm:rounded-2xl border border-white border-opacity-20"
> >
<a href="/" class="flex items-center min-w-0"> <a href="/" class="flex items-center min-w-0 flex-shrink-0">
<img src="/logo.svg" alt="Логотип" class="h-6 sm:h-8 lg:h-12 flex-shrink-0" /> <img src="/logo.svg" alt="Логотип" class="h-5 xs:h-6 sm:h-8 md:h-10 lg:h-12 flex-shrink-0" />
<span class="ml-1 sm:ml-2 font-bold text-base sm:text-lg lg:text-2xl font-gilroy truncate"> <span class="ml-1 xs:ml-1.5 sm:ml-2 font-bold text-sm xs:text-base sm:text-lg md:text-xl lg:text-2xl font-gilroy truncate">
ООО «ДМДК» ООО «ДМДК»
</span> </span>
</a> </a>
@ -122,16 +122,22 @@
<!-- Кнопка "Оставить заявку" --> <!-- Кнопка "Оставить заявку" -->
<button <button
class="open-modal ml-6 px-6 py-3 text-lg font-semibold bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 text-white rounded-lg shadow-lg shadow-yellow-500/50 hover:shadow-xl hover:shadow-yellow-400/70 hover:bg-opacity-90 transition-all duration-300 font-gilroy" class="open-modal ml-6 px-4 py-2 xl:px-6 xl:py-3 text-base xl:text-lg font-semibold bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 text-white rounded-lg shadow-lg shadow-yellow-500/50 hover:shadow-xl hover:shadow-yellow-400/70 hover:bg-opacity-90 transition-all duration-300 font-gilroy"
> >
Оставить заявку Оставить заявку
</button> </button>
</nav> </nav>
<div class="lg:hidden"> <!-- Кнопка мобильного меню -->
<div class="lg:hidden flex items-center space-x-2">
<!-- Компактная кнопка заявки для планшетов -->
<button class="open-modal hidden md:block lg:hidden px-3 py-2 text-sm font-semibold bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 text-white rounded-lg shadow-lg shadow-yellow-500/50 hover:shadow-xl hover:shadow-yellow-400/70 hover:bg-opacity-90 transition-all duration-300 font-gilroy">
Заявка
</button>
<button id="menu-toggle" class="focus:outline-none p-1 hover:text-yellow-400 transition-colors"> <button id="menu-toggle" class="focus:outline-none p-1 hover:text-yellow-400 transition-colors">
<svg <svg
class="w-6 h-6 sm:w-8 sm:h-8" class="w-5 h-5 xs:w-6 xs:h-6 sm:w-7 sm:h-7 md:w-8 md:h-8"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -149,23 +155,46 @@
<div <div
id="mobile-menu" id="mobile-menu"
class="fixed inset-x-0 top-0 h-screen bg-black bg-opacity-95 backdrop-blur-sm text-white flex flex-col justify-center items-center space-y-6 transform translate-y-full transition-transform duration-300 ease-in-out z-50" class="fixed inset-0 bg-black bg-opacity-95 backdrop-blur-sm text-white flex flex-col justify-center items-center space-y-4 xs:space-y-6 md:space-y-8 transform translate-y-full transition-transform duration-300 ease-in-out z-50"
> >
<button id="close-menu" class="absolute top-6 right-6 text-white hover:text-yellow-400 transition-colors"> <button id="close-menu" class="absolute top-4 xs:top-6 right-4 xs:right-6 text-white hover:text-yellow-400 transition-colors">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg> </svg>
</button> </button>
<a href="/#about" class="text-xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">О НАС</a> <!-- Логотип в мобильном меню -->
<a href="/#products" class="text-xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">ПРОДУКЦИЯ</a> <div class="flex items-center mb-4 xs:mb-6">
<a href="/blog" class="text-xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">БЛОГ</a> <img src="/logo.svg" alt="Логотип" class="h-8 xs:h-10 sm:h-12" />
<a href="/faq" class="text-xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">FAQ</a> <span class="ml-2 xs:ml-3 font-bold text-lg xs:text-xl sm:text-2xl font-gilroy">ООО «ДМДК»</span>
<a href="/#contacts" class="text-xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">КОНТАКТЫ</a> </div>
<a href="/#about" class="text-lg xs:text-xl sm:text-2xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">О НАС</a>
<a href="/#products" class="text-lg xs:text-xl sm:text-2xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">ПРОДУКЦИЯ</a>
<a href="/blog" class="text-lg xs:text-xl sm:text-2xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">БЛОГ</a>
<a href="/faq" class="text-lg xs:text-xl sm:text-2xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">FAQ</a>
<a href="/#contacts" class="text-lg xs:text-xl sm:text-2xl font-gilroy hover:text-yellow-400 transition-colors mobile-menu-link">КОНТАКТЫ</a>
<!-- Контактная информация в мобильном меню -->
<div class="mt-6 xs:mt-8 text-center space-y-2 xs:space-y-3">
<div class="text-sm xs:text-base text-gray-300 font-gilroy">
<p>+7 (925) 104-50-50</p>
<p>+7 (926) 664-62-46</p>
<p>ooo.dmdk@mail.ru</p>
</div>
<div class="flex justify-center space-x-4 mt-4">
<a href="https://t.me/OOO_DMDK" class="social-icon">
<img src="/icons/tg.svg" alt="Telegram" class="w-8 h-8" />
</a>
<a href="https://wa.me/79251045050" class="social-icon">
<img src="/icons/ws.svg" alt="WhatsApp" class="w-8 h-8" />
</a>
</div>
</div>
<!-- Кнопка "Оставить заявку" в мобильном меню --> <!-- Кнопка "Оставить заявку" в мобильном меню -->
<button <button
class="open-modal mt-8 px-8 py-4 text-lg font-semibold bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 text-white rounded-lg shadow-lg shadow-yellow-500/50 hover:shadow-xl hover:shadow-yellow-400/70 hover:bg-opacity-90 transition-all duration-300 font-gilroy" class="open-modal mt-6 xs:mt-8 px-6 xs:px-8 py-3 xs:py-4 text-base xs:text-lg font-semibold bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 text-white rounded-lg xs:rounded-xl shadow-lg shadow-yellow-500/50 hover:shadow-xl hover:shadow-yellow-400/70 hover:bg-opacity-90 transition-all duration-300 font-gilroy"
> >
Оставить заявку Оставить заявку
</button> </button>

70
src/components/Hero.astro
View File

@ -1,5 +1,5 @@
<section <section
class="relative flex items-center justify-start h-screen bg-cover bg-center overflow-hidden" class="relative flex items-center justify-start min-h-screen bg-cover bg-center overflow-hidden header-offset"
style="background-image: url('/images/hero.webp');" style="background-image: url('/images/hero.webp');"
> >
<!-- Градиентный оверлей --> <!-- Градиентный оверлей -->
@ -7,30 +7,30 @@
<!-- Декоративные элементы --> <!-- Декоративные элементы -->
<div class="absolute inset-0 opacity-20"> <div class="absolute inset-0 opacity-20">
<div class="absolute top-1/4 left-1/4 w-64 h-64 bg-yellow-500 rounded-full blur-3xl animate-pulse"></div> <div class="absolute top-1/4 left-1/4 w-32 h-32 xs:w-48 xs:h-48 sm:w-64 sm:h-64 bg-yellow-500 rounded-full blur-3xl animate-pulse"></div>
<div class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-yellow-400 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div> <div class="absolute bottom-1/4 right-1/4 w-40 h-40 xs:w-60 xs:h-60 sm:w-80 sm:h-80 bg-yellow-400 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
</div> </div>
<!-- Контент --> <!-- Контент -->
<div class="relative text-left z-10 p-8 lg:p-16 w-full"> <div class="relative text-left z-10 p-3 xs:p-4 sm:p-6 md:p-8 lg:p-16 w-full">
<div class="max-w-4xl"> <div class="max-w-4xl">
<h1 <h1
class="text-5xl sm:text-7xl lg:text-8xl xl:text-9xl font-bold text-white font-nevduplenysh tracking-wider leading-tight mb-8 animate-fade-in" class="text-2xl xs:text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl 2xl:text-8xl font-bold text-white font-nevduplenysh tracking-wider leading-tight mb-4 xs:mb-6 sm:mb-8 animate-fade-in"
> >
<span class="block">Драгоценные металлы</span> <span class="block">Драгоценные металлы</span>
<span class="block text-gradient">высшей пробы</span> <span class="block text-gradient">высшей пробы</span>
</h1> </h1>
<p class="mt-8 lg:mt-12 text-white text-xl lg:text-3xl max-w-3xl font-gilroy leading-relaxed animate-slide-in"> <p class="mt-4 xs:mt-6 sm:mt-8 lg:mt-12 text-white text-base xs:text-lg sm:text-xl md:text-2xl lg:text-3xl max-w-3xl font-gilroy leading-relaxed animate-slide-in">
ООО «ДМДК» — ведущий поставщик аффинированных драгоценных металлов. ООО «ДМДК» — ведущий поставщик аффинированных драгоценных металлов.
<span class="text-yellow-400 font-semibold">Блеск и надежность в каждом грамме.</span> <span class="text-yellow-400 font-semibold">Блеск и надежность в каждом грамме.</span>
</p> </p>
<div class="mt-12 lg:mt-16 flex flex-col sm:flex-row gap-6 animate-fade-in" style="animation-delay: 0.3s;"> <div class="mt-6 xs:mt-8 sm:mt-12 lg:mt-16 flex flex-col xs:flex-row gap-3 xs:gap-4 sm:gap-6 animate-fade-in" style="animation-delay: 0.3s;">
<button <button
class="open-modal group inline-flex items-center px-10 py-5 lg:px-14 lg:py-7 text-xl lg:text-2xl font-bold bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 text-black rounded-2xl shadow-2xl shadow-yellow-500/50 hover:shadow-yellow-400/70 hover:from-yellow-400 hover:to-yellow-600 transition-all duration-300 transform hover:scale-105 font-gilroy" class="open-modal group inline-flex items-center justify-center px-4 py-3 xs:px-6 xs:py-4 sm:px-8 sm:py-5 lg:px-14 lg:py-7 text-base xs:text-lg sm:text-xl lg:text-2xl font-bold bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700 text-black rounded-lg xs:rounded-xl sm:rounded-2xl shadow-2xl shadow-yellow-500/50 hover:shadow-yellow-400/70 hover:from-yellow-400 hover:to-yellow-600 transition-all duration-300 transform hover:scale-105 font-gilroy"
> >
<svg class="w-6 h-6 mr-3 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 xs:w-5 xs:h-5 sm:w-6 sm:h-6 mr-2 xs:mr-2 sm:mr-3 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg> </svg>
Оставить заявку Оставить заявку
@ -38,9 +38,9 @@
<a <a
href="/#products" href="/#products"
class="group inline-flex items-center px-10 py-5 lg:px-14 lg:py-7 text-xl lg:text-2xl font-bold bg-white/10 backdrop-blur-sm text-white rounded-2xl border-2 border-white/20 hover:bg-white hover:text-gray-900 transition-all duration-300 transform hover:scale-105 font-gilroy" class="group inline-flex items-center justify-center px-4 py-3 xs:px-6 xs:py-4 sm:px-8 sm:py-5 lg:px-14 lg:py-7 text-base xs:text-lg sm:text-xl lg:text-2xl font-bold bg-white/10 backdrop-blur-sm text-white rounded-lg xs:rounded-xl sm:rounded-2xl border-2 border-white/20 hover:bg-white hover:text-gray-900 transition-all duration-300 transform hover:scale-105 font-gilroy"
> >
<svg class="w-6 h-6 mr-3 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 xs:w-5 xs:h-5 sm:w-6 sm:h-6 mr-2 xs:mr-2 sm:mr-3 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0l-4-4m4 4l-4 4"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0l-4-4m4 4l-4 4"></path>
</svg> </svg>
Наша продукция Наша продукция
@ -48,46 +48,26 @@
</div> </div>
<!-- Статистика --> <!-- Статистика -->
<div class="mt-16 lg:mt-20 grid grid-cols-2 lg:grid-cols-4 gap-6 animate-fade-in max-w-4xl" style="animation-delay: 0.6s;"> <div class="mt-8 xs:mt-10 sm:mt-12 lg:mt-20 grid grid-cols-2 md:grid-cols-4 gap-2 xs:gap-3 sm:gap-4 lg:gap-6 animate-fade-in max-w-4xl" style="animation-delay: 0.6s;">
<div class="bg-black/40 backdrop-blur-sm rounded-2xl p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300"> <div class="bg-black/40 backdrop-blur-sm rounded-lg xs:rounded-xl lg:rounded-2xl p-3 xs:p-4 sm:p-5 lg:p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
<div class="text-4xl lg:text-5xl font-bold text-yellow-400 font-nevduplenysh mb-2">15+</div> <div class="text-xl xs:text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold text-yellow-400 font-nevduplenysh mb-1 lg:mb-2">15+</div>
<div class="text-white font-gilroy font-medium">лет опыта</div> <div class="text-white font-gilroy font-medium text-xs xs:text-sm sm:text-base">лет опыта</div>
</div> </div>
<div class="bg-black/40 backdrop-blur-sm rounded-2xl p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300"> <div class="bg-black/40 backdrop-blur-sm rounded-lg xs:rounded-xl lg:rounded-2xl p-3 xs:p-4 sm:p-5 lg:p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
<div class="text-4xl lg:text-5xl font-bold text-yellow-400 font-nevduplenysh mb-2">99.9%</div> <div class="text-xl xs:text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold text-yellow-400 font-nevduplenysh mb-1 lg:mb-2">99.9%</div>
<div class="text-white font-gilroy font-medium">чистота металлов</div> <div class="text-white font-gilroy font-medium text-xs xs:text-sm sm:text-base">чистота металлов</div>
</div> </div>
<div class="bg-black/40 backdrop-blur-sm rounded-2xl p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300"> <div class="bg-black/40 backdrop-blur-sm rounded-lg xs:rounded-xl lg:rounded-2xl p-3 xs:p-4 sm:p-5 lg:p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
<div class="text-4xl lg:text-5xl font-bold text-yellow-400 font-nevduplenysh mb-2">50+</div> <div class="text-xl xs:text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold text-yellow-400 font-nevduplenysh mb-1 lg:mb-2">50+</div>
<div class="text-white font-gilroy font-medium">городов</div> <div class="text-white font-gilroy font-medium text-xs xs:text-sm sm:text-base">городов</div>
</div> </div>
<div class="bg-black/40 backdrop-blur-sm rounded-2xl p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300"> <div class="bg-black/40 backdrop-blur-sm rounded-lg xs:rounded-xl lg:rounded-2xl p-3 xs:p-4 sm:p-5 lg:p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
<div class="text-4xl lg:text-5xl font-bold text-yellow-400 font-nevduplenysh mb-2">24/7</div> <div class="text-xl xs:text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold text-yellow-400 font-nevduplenysh mb-1 lg:mb-2">24/7</div>
<div class="text-white font-gilroy font-medium">поддержка</div> <div class="text-white font-gilroy font-medium text-xs xs:text-sm sm:text-base">поддержка</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Двигающаяся стрелочка с подсказкой -->
<div class="absolute bottom-12 left-1/2 transform -translate-x-1/2 text-white animate-bounce">
<div class="flex flex-col items-center">
<div class="text-lg mb-3 font-gilroy text-white/80">Листай ниже</div>
<div class="w-8 h-8 border-2 border-yellow-400 rounded-full flex items-center justify-center">
<svg
class="w-4 h-4 text-yellow-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"></path>
</svg>
</div>
</div>
</div>
</section> </section>

90
src/components/InfoSection.astro
View File

@ -2,39 +2,39 @@
// Компонент информационного блока с ссылками на важные страницы // Компонент информационного блока с ссылками на важные страницы
--- ---
<section class="py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-black relative overflow-hidden"> <section class="py-12 xs:py-16 sm:py-20 md:py-24 lg:py-28 bg-gradient-to-br from-gray-900 via-gray-800 to-black relative overflow-hidden">
<!-- Декоративные элементы --> <!-- Декоративные элементы -->
<div class="absolute inset-0 opacity-5"> <div class="absolute inset-0 opacity-5">
<div class="absolute top-20 left-20 w-32 h-32 bg-yellow-500 rounded-full blur-3xl"></div> <div class="absolute top-10 xs:top-12 sm:top-16 md:top-20 left-10 xs:left-12 sm:left-16 md:left-20 w-20 xs:w-24 sm:w-28 md:w-32 h-20 xs:h-24 sm:h-28 md:h-32 bg-yellow-500 rounded-full blur-3xl"></div>
<div class="absolute bottom-20 right-20 w-40 h-40 bg-yellow-400 rounded-full blur-3xl"></div> <div class="absolute bottom-10 xs:bottom-12 sm:bottom-16 md:bottom-20 right-10 xs:right-12 sm:right-16 md:right-20 w-24 xs:w-28 sm:w-32 md:w-40 h-24 xs:h-28 sm:h-32 md:h-40 bg-yellow-400 rounded-full blur-3xl"></div>
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-60 h-60 bg-yellow-300 rounded-full blur-3xl"></div> <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-40 xs:w-48 sm:w-56 md:w-60 h-40 xs:h-48 sm:h-56 md:h-60 bg-yellow-300 rounded-full blur-3xl"></div>
</div> </div>
<div class="container mx-auto px-8 lg:px-24 relative z-10"> <div class="container mx-auto px-4 xs:px-6 sm:px-8 md:px-12 lg:px-24 relative z-10">
<div class="text-center mb-16"> <div class="text-center mb-8 xs:mb-10 sm:mb-12 md:mb-16">
<h2 class="text-5xl lg:text-6xl font-bold text-white mb-6 font-nevduplenysh"> <h2 class="text-3xl xs:text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white mb-4 xs:mb-5 sm:mb-6 font-nevduplenysh">
Экспертиза и сервис Экспертиза и сервис
</h2> </h2>
<p class="text-xl lg:text-2xl text-gray-300 max-w-4xl mx-auto font-gilroy leading-relaxed"> <p class="text-base xs:text-lg sm:text-xl md:text-2xl text-gray-300 max-w-4xl mx-auto font-gilroy leading-relaxed">
Профессиональная поддержка, экспертные знания и комплексные решения для вашего бизнеса Профессиональная поддержка, экспертные знания и комплексные решения для вашего бизнеса
</p> </p>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 xs:gap-6 sm:gap-8">
<!-- Блог --> <!-- Блог -->
<div class="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-8 border border-gray-700 hover:border-yellow-500/50 transition-all duration-500 hover:transform hover:scale-105"> <div class="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl xs:rounded-2xl p-4 xs:p-6 sm:p-8 border border-gray-700 hover:border-yellow-500/50 transition-all duration-500 hover:transform hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-br from-yellow-500/10 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <div class="absolute inset-0 bg-gradient-to-br from-yellow-500/10 to-transparent rounded-xl xs:rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="relative z-10"> <div class="relative z-10">
<div class="w-16 h-16 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-xl flex items-center justify-center mb-6 group-hover:shadow-lg group-hover:shadow-yellow-500/25 transition-shadow duration-500"> <div class="w-12 h-12 xs:w-14 xs:h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-lg xs:rounded-xl flex items-center justify-center mb-4 xs:mb-5 sm:mb-6 group-hover:shadow-lg group-hover:shadow-yellow-500/25 transition-shadow duration-500">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
</svg> </svg>
</div> </div>
<h3 class="text-2xl font-bold text-white mb-4 font-gilroy">Экспертный блог</h3> <h3 class="text-lg xs:text-xl sm:text-2xl font-bold text-white mb-3 xs:mb-4 font-gilroy">Экспертный блог</h3>
<p class="text-gray-300 mb-6 font-gilroy leading-relaxed">Глубокие знания о драгоценных металлах, технологиях аффинажа и рыночных тенденциях</p> <p class="text-sm xs:text-base text-gray-300 mb-4 xs:mb-5 sm:mb-6 font-gilroy leading-relaxed">Глубокие знания о драгоценных металлах, технологиях аффинажа и рыночных тенденциях</p>
<a href="/blog" class="inline-flex items-center text-yellow-400 hover:text-yellow-300 font-gilroy font-semibold transition-colors group-hover:translate-x-1 transform duration-300"> <a href="/blog" class="inline-flex items-center text-yellow-400 hover:text-yellow-300 font-gilroy font-semibold transition-colors group-hover:translate-x-1 transform duration-300 text-sm xs:text-base">
Читать статьи Читать статьи
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-3 h-3 xs:w-4 xs:h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg> </svg>
</a> </a>
@ -42,19 +42,19 @@
</div> </div>
<!-- FAQ --> <!-- FAQ -->
<div class="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-8 border border-gray-700 hover:border-blue-500/50 transition-all duration-500 hover:transform hover:scale-105"> <div class="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl xs:rounded-2xl p-4 xs:p-6 sm:p-8 border border-gray-700 hover:border-blue-500/50 transition-all duration-500 hover:transform hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent rounded-xl xs:rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="relative z-10"> <div class="relative z-10">
<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center mb-6 group-hover:shadow-lg group-hover:shadow-blue-500/25 transition-shadow duration-500"> <div class="w-12 h-12 xs:w-14 xs:h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg xs:rounded-xl flex items-center justify-center mb-4 xs:mb-5 sm:mb-6 group-hover:shadow-lg group-hover:shadow-blue-500/25 transition-shadow duration-500">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg> </svg>
</div> </div>
<h3 class="text-2xl font-bold text-white mb-4 font-gilroy">Вопросы и ответы</h3> <h3 class="text-lg xs:text-xl sm:text-2xl font-bold text-white mb-3 xs:mb-4 font-gilroy">Вопросы и ответы</h3>
<p class="text-gray-300 mb-6 font-gilroy leading-relaxed">Исчерпывающие ответы на вопросы о продукции, сотрудничестве и технических решениях</p> <p class="text-sm xs:text-base text-gray-300 mb-4 xs:mb-5 sm:mb-6 font-gilroy leading-relaxed">Исчерпывающие ответы на вопросы о продукции, сотрудничестве и технических решениях</p>
<a href="/faq" class="inline-flex items-center text-blue-400 hover:text-blue-300 font-gilroy font-semibold transition-colors group-hover:translate-x-1 transform duration-300"> <a href="/faq" class="inline-flex items-center text-blue-400 hover:text-blue-300 font-gilroy font-semibold transition-colors group-hover:translate-x-1 transform duration-300 text-sm xs:text-base">
Найти ответы Найти ответы
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-3 h-3 xs:w-4 xs:h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg> </svg>
</a> </a>
@ -62,20 +62,20 @@
</div> </div>
<!-- Наши города --> <!-- Наши города -->
<div class="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-8 border border-gray-700 hover:border-green-500/50 transition-all duration-500 hover:transform hover:scale-105"> <div class="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl xs:rounded-2xl p-4 xs:p-6 sm:p-8 border border-gray-700 hover:border-green-500/50 transition-all duration-500 hover:transform hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-br from-green-500/10 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <div class="absolute inset-0 bg-gradient-to-br from-green-500/10 to-transparent rounded-xl xs:rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="relative z-10"> <div class="relative z-10">
<div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center mb-6 group-hover:shadow-lg group-hover:shadow-green-500/25 transition-shadow duration-500"> <div class="w-12 h-12 xs:w-14 xs:h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-lg xs:rounded-xl flex items-center justify-center mb-4 xs:mb-5 sm:mb-6 group-hover:shadow-lg group-hover:shadow-green-500/25 transition-shadow duration-500">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg> </svg>
</div> </div>
<h3 class="text-2xl font-bold text-white mb-4 font-gilroy">Региональная сеть</h3> <h3 class="text-lg xs:text-xl sm:text-2xl font-bold text-white mb-3 xs:mb-4 font-gilroy">Региональная сеть</h3>
<p class="text-gray-300 mb-6 font-gilroy leading-relaxed">Широкая география присутствия, надежная логистика и локальная поддержка клиентов</p> <p class="text-sm xs:text-base text-gray-300 mb-4 xs:mb-5 sm:mb-6 font-gilroy leading-relaxed">Широкая география присутствия, надежная логистика и локальная поддержка клиентов</p>
<a href="/cities" class="inline-flex items-center text-green-400 hover:text-green-300 font-gilroy font-semibold transition-colors group-hover:translate-x-1 transform duration-300"> <a href="/cities" class="inline-flex items-center text-green-400 hover:text-green-300 font-gilroy font-semibold transition-colors group-hover:translate-x-1 transform duration-300 text-sm xs:text-base">
География работы География работы
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-3 h-3 xs:w-4 xs:h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg> </svg>
</a> </a>
@ -83,19 +83,19 @@
</div> </div>
<!-- Реквизиты --> <!-- Реквизиты -->
<div class="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-8 border border-gray-700 hover:border-purple-500/50 transition-all duration-500 hover:transform hover:scale-105"> <div class="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl xs:rounded-2xl p-4 xs:p-6 sm:p-8 border border-gray-700 hover:border-purple-500/50 transition-all duration-500 hover:transform hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-transparent rounded-xl xs:rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="relative z-10"> <div class="relative z-10">
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center mb-6 group-hover:shadow-lg group-hover:shadow-purple-500/25 transition-shadow duration-500"> <div class="w-12 h-12 xs:w-14 xs:h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg xs:rounded-xl flex items-center justify-center mb-4 xs:mb-5 sm:mb-6 group-hover:shadow-lg group-hover:shadow-purple-500/25 transition-shadow duration-500">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg> </svg>
</div> </div>
<h3 class="text-2xl font-bold text-white mb-4 font-gilroy">Документооборот</h3> <h3 class="text-lg xs:text-xl sm:text-2xl font-bold text-white mb-3 xs:mb-4 font-gilroy">Документооборот</h3>
<p class="text-gray-300 mb-6 font-gilroy leading-relaxed">Полная юридическая информация, реквизиты и документы для ведения бизнеса</p> <p class="text-sm xs:text-base text-gray-300 mb-4 xs:mb-5 sm:mb-6 font-gilroy leading-relaxed">Полная юридическая информация, реквизиты и документы для ведения бизнеса</p>
<a href="/requisites" class="inline-flex items-center text-purple-400 hover:text-purple-300 font-gilroy font-semibold transition-colors group-hover:translate-x-1 transform duration-300"> <a href="/requisites" class="inline-flex items-center text-purple-400 hover:text-purple-300 font-gilroy font-semibold transition-colors group-hover:translate-x-1 transform duration-300 text-sm xs:text-base">
Документы Документы
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-3 h-3 xs:w-4 xs:h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg> </svg>
</a> </a>
@ -104,12 +104,12 @@
</div> </div>
<!-- Дополнительная информация --> <!-- Дополнительная информация -->
<div class="mt-16 text-center"> <div class="mt-8 xs:mt-10 sm:mt-12 md:mt-16 text-center">
<div class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 rounded-full border border-yellow-500/30"> <div class="inline-flex items-center px-4 xs:px-5 sm:px-6 py-2 xs:py-2.5 sm:py-3 bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 rounded-full border border-yellow-500/30">
<svg class="w-5 h-5 text-yellow-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg> </svg>
<span class="text-yellow-300 font-gilroy">Профессиональная поддержка 24/7</span> <span class="text-yellow-300 font-gilroy text-sm xs:text-base">Профессиональная поддержка 24/7</span>
</div> </div>
</div> </div>
</div> </div>

44
src/components/Products.astro
View File

@ -20,7 +20,7 @@ const categories =
}`); }`);
--- ---
<section id="products" class="bg-gradient-to-br from-black via-gray-900 to-gray-800 text-white py-20 px-8 lg:px-24 relative overflow-hidden"> <section id="products" class="bg-gradient-to-br from-black via-gray-900 to-gray-800 text-white py-12 xs:py-16 sm:py-20 px-4 xs:px-6 sm:px-8 lg:px-24 relative overflow-hidden">
<!-- Декоративные элементы --> <!-- Декоративные элементы -->
<div class="absolute inset-0 opacity-5"> <div class="absolute inset-0 opacity-5">
<div class="absolute top-20 left-20 w-32 h-32 bg-yellow-500 rounded-full blur-3xl"></div> <div class="absolute top-20 left-20 w-32 h-32 bg-yellow-500 rounded-full blur-3xl"></div>
@ -30,56 +30,56 @@ const categories =
<div class="relative z-10 max-w-7xl mx-auto"> <div class="relative z-10 max-w-7xl mx-auto">
<h2 <h2
class="text-center text-6xl lg:text-8xl font-bold text-yellow-500 mb-16 font-nevduplenysh" class="text-center text-4xl xs:text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-bold text-yellow-500 mb-8 xs:mb-12 sm:mb-16 font-nevduplenysh"
> >
ПРОДУКЦИЯ ПРОДУКЦИЯ
</h2> </h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 xs:gap-6 sm:gap-8">
{ {
categories.map((category, index) => ( categories.map((category, index) => (
<div <div
class={`group relative rounded-3xl shadow-2xl overflow-hidden transition-all duration-500 hover:transform hover:scale-105 ${ class={`group relative rounded-2xl xs:rounded-3xl shadow-2xl overflow-hidden transition-all duration-500 hover:transform hover:scale-105 ${
index === categories.length - 1 ? "lg:col-span-3" : "" index === categories.length - 1 ? "xl:col-span-3" : ""
}`} }`}
style={`background: linear-gradient(135deg, ${category.color}, ${category.color}dd); min-height: ${ style={`background: linear-gradient(135deg, ${category.color}, ${category.color}dd); min-height: ${
300 + category.elements.length * 18 280 + category.elements.length * 15
}px;`} }px;`}
> >
<!-- Градиентный оверлей --> <!-- Градиентный оверлей -->
<div class="absolute inset-0 bg-gradient-to-br from-black/20 to-black/60"></div> <div class="absolute inset-0 bg-gradient-to-br from-black/20 to-black/60"></div>
<!-- Декоративные элементы --> <!-- Декоративные элементы -->
<div class={`absolute top-4 right-4 z-20 ${category.elements.length > 2 ? 'grid grid-cols-2 gap-1 max-w-[80px]' : 'flex flex-col space-y-2 max-w-[70px]'}`}> <div class={`absolute top-3 xs:top-4 right-3 xs:right-4 z-20 ${category.elements.length > 2 ? 'grid grid-cols-2 gap-1 max-w-[70px] xs:max-w-[80px]' : 'flex flex-col space-y-1.5 xs:space-y-2 max-w-[60px] xs:max-w-[70px]'}`}>
{category.elements.map((element, idx) => ( {category.elements.map((element, idx) => (
<div <div
class={`relative flex flex-col items-center justify-center rounded-lg text-white font-bold shadow-lg backdrop-blur-sm border border-white/20 shrink-0 ${category.elements.length > 2 ? 'w-9 h-9' : 'w-14 h-14'}`} class={`relative flex flex-col items-center justify-center rounded-lg text-white font-bold shadow-lg backdrop-blur-sm border border-white/20 shrink-0 ${category.elements.length > 2 ? 'w-8 h-8 xs:w-9 xs:h-9' : 'w-12 h-12 xs:w-14 xs:h-14'}`}
style={`background: linear-gradient(135deg, ${category.color}ee, ${category.color}aa);`} style={`background: linear-gradient(135deg, ${category.color}ee, ${category.color}aa);`}
> >
<span class={category.elements.length > 2 ? 'text-xs' : 'text-sm'}>{element.element}</span> <span class={category.elements.length > 2 ? 'text-xs' : 'text-sm'}>{element.element}</span>
<span class={`font-normal opacity-90 ${category.elements.length > 2 ? 'text-[10px]' : 'text-xs'}`}> <span class={`font-normal opacity-90 ${category.elements.length > 2 ? 'text-[9px] xs:text-[10px]' : 'text-xs'}`}>
{element.elementNumber} {element.elementNumber}
</span> </span>
</div> </div>
))} ))}
</div> </div>
<div class="relative z-10 p-8 h-full flex flex-col justify-between"> <div class="relative z-10 p-4 xs:p-6 sm:p-8 h-full flex flex-col justify-between">
<div class="pr-20"> <div class="pr-16 xs:pr-20">
<h3 class="text-3xl font-bold mb-6 text-white font-nevduplenysh break-words leading-tight"> <h3 class="text-xl xs:text-2xl sm:text-3xl font-bold mb-4 xs:mb-6 text-white font-nevduplenysh break-words leading-tight">
{category.title.toUpperCase()} {category.title.toUpperCase()}
</h3> </h3>
</div> </div>
<div class="mt-auto"> <div class="mt-auto">
<button <button
class="w-full text-xl font-semibold py-4 px-6 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20 text-white transition-all duration-300 flex items-center justify-center hover:bg-white hover:text-gray-900 group-hover:transform group-hover:scale-105 font-gilroy shadow-lg" class="w-full text-base xs:text-lg sm:text-xl font-semibold py-3 xs:py-4 px-4 xs:px-6 rounded-xl xs:rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20 text-white transition-all duration-300 flex items-center justify-center hover:bg-white hover:text-gray-900 group-hover:transform group-hover:scale-105 font-gilroy shadow-lg"
onclick={`toggleDropdown('${category.slug.current}')`} onclick={`toggleDropdown('${category.slug.current}')`}
> >
Показать товары Показать товары
<svg <svg
id={`arrow-${category.slug.current}`} id={`arrow-${category.slug.current}`}
class="ml-3 w-6 h-6 transform transition-transform duration-300" class="ml-2 xs:ml-3 w-5 h-5 xs:w-6 xs:h-6 transform transition-transform duration-300"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -94,23 +94,23 @@ const categories =
</svg> </svg>
</button> </button>
<div id={`dropdown-${category.slug.current}`} class="mt-6 hidden"> <div id={`dropdown-${category.slug.current}`} class="mt-4 xs:mt-6 hidden">
<div class="bg-black/30 backdrop-blur-sm rounded-2xl p-6 border border-white/10"> <div class="bg-black/30 backdrop-blur-sm rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-white/10">
<ul class="text-lg space-y-3 text-white font-gilroy"> <ul class="text-base xs:text-lg space-y-2 xs:space-y-3 text-white font-gilroy">
{category.products.map((product) => ( {category.products.map((product) => (
<li class="group/item"> <li class="group/item">
<a <a
href={`/${product.slug.current}`} href={`/${product.slug.current}`}
class="block hover:text-yellow-400 transition-colors duration-300 font-gilroy p-3 rounded-xl hover:bg-white/5" class="block hover:text-yellow-400 transition-colors duration-300 font-gilroy p-2 xs:p-3 rounded-lg xs:rounded-xl hover:bg-white/5"
> >
<div class="flex items-center"> <div class="flex items-center">
<svg class="w-4 h-4 mr-3 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-3 h-3 xs:w-4 xs:h-4 mr-2 xs:mr-3 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg> </svg>
{product.title} <span class="text-sm xs:text-base">{product.title}</span>
</div> </div>
{product.description && ( {product.description && (
<p class="ml-7 text-sm text-gray-300 mt-2 line-clamp-2 font-gilroy"> <p class="ml-5 xs:ml-7 text-xs xs:text-sm text-gray-300 mt-1 xs:mt-2 line-clamp-2 font-gilroy">
{product.description} {product.description}
</p> </p>
)} )}
@ -151,7 +151,7 @@ const categories =
buttons.forEach((button) => { buttons.forEach((button) => {
(button as HTMLElement).onclick = function (e) { (button as HTMLElement).onclick = function (e) {
e.preventDefault(); e.preventDefault();
const categorySlug = this.getAttribute("onclick")?.match(/'([^']+)'/)?.[1]; const categorySlug = (this as HTMLElement).getAttribute("onclick")?.match(/'([^']+)'/)?.[1];
if (categorySlug) { if (categorySlug) {
(window as any).toggleDropdown(categorySlug); (window as any).toggleDropdown(categorySlug);
} }

4
src/components/Up.astro
View File

@ -1,10 +1,10 @@
<button <button
id="scroll-to-top" id="scroll-to-top"
class="fixed bottom-8 right-8 w-14 h-14 bg-gradient-to-br from-yellow-500 to-yellow-600 text-black rounded-2xl shadow-2xl shadow-yellow-500/25 hover:shadow-yellow-400/40 hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-110 z-50 opacity-0 invisible" class="fixed bottom-4 xs:bottom-6 sm:bottom-8 right-4 xs:right-6 sm:right-8 w-12 h-12 xs:w-14 xs:h-14 bg-gradient-to-br from-yellow-500 to-yellow-600 text-black rounded-xl xs:rounded-2xl shadow-2xl shadow-yellow-500/25 hover:shadow-yellow-400/40 hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-110 z-50 opacity-0 invisible"
aria-label="Прокрутить наверх" aria-label="Прокрутить наверх"
> >
<svg <svg
class="w-6 h-6 mx-auto" class="w-5 h-5 xs:w-6 xs:h-6 mx-auto"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"

2
src/layouts/Layout.astro
View File

@ -77,7 +77,7 @@ const allKeywords = `${commonKeywords}, ${silverKeywords}, ${goldKeywords}`;
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta <meta
http-equiv="Content-Security-Policy" http-equiv="Content-Security-Policy"
content="default-src 'self'; img-src 'self' https: data: mc.yandex.ru; script-src 'self' 'unsafe-inline' 'unsafe-eval' www.googletagmanager.com mc.yandex.ru; style-src 'self' 'unsafe-inline'; font-src 'self'; connect-src 'self' https://api.telegram.org;" content="default-src 'self'; img-src 'self' https: data: mc.yandex.ru; script-src 'self' 'unsafe-inline' 'unsafe-eval' www.googletagmanager.com mc.yandex.ru; style-src 'self' 'unsafe-inline'; font-src 'self'; connect-src 'self' https://api.telegram.org https://mc.yandex.ru https://www.google-analytics.com; frame-src 'self' https://mc.yandex.ru;"
/> />
<!-- Canonical URL --> <!-- Canonical URL -->

2
src/pages/404.astro
View File

@ -6,7 +6,7 @@ import Layout from "../layouts/Layout.astro";
title="Страница не найдена - ООО ДМДК" title="Страница не найдена - ООО ДМДК"
description="Запрашиваемая страница не найдена. Вернитесь на главную страницу или воспользуйтесь навигацией по сайту ООО ДМДК." description="Запрашиваемая страница не найдена. Вернитесь на главную страницу или воспользуйтесь навигацией по сайту ООО ДМДК."
> >
<main class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 px-4 sm:px-6 lg:px-8"> <main class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 px-4 sm:px-6 lg:px-8 header-offset">
<div class="max-w-md mx-auto text-center"> <div class="max-w-md mx-auto text-center">
<!-- Основной заголовок страницы --> <!-- Основной заголовок страницы -->
<h1 class="text-6xl lg:text-8xl font-bold mb-8 text-yellow-500 font-nevduplenysh">404</h1> <h1 class="text-6xl lg:text-8xl font-bold mb-8 text-yellow-500 font-nevduplenysh">404</h1>

46
src/pages/[slug].astro
View File

@ -86,25 +86,25 @@ const analyticsScript = `
<Breadcrumbs items={breadcrumbItems} /> <Breadcrumbs items={breadcrumbItems} />
<article <article
class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white py-20 px-8 lg:px-24 relative overflow-hidden" class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white py-12 xs:py-16 sm:py-20 md:py-24 lg:py-28 px-4 xs:px-6 sm:px-8 md:px-12 lg:px-24 relative overflow-hidden"
data-product-id={product._id} data-product-id={product._id}
> >
<!-- Декоративные элементы --> <!-- Декоративные элементы -->
<div class="absolute inset-0 opacity-5"> <div class="absolute inset-0 opacity-5">
<div class="absolute top-20 left-20 w-32 h-32 bg-yellow-500 rounded-full blur-3xl"></div> <div class="absolute top-10 xs:top-12 sm:top-16 md:top-20 left-10 xs:left-12 sm:left-16 md:left-20 w-20 xs:w-24 sm:w-28 md:w-32 h-20 xs:h-24 sm:h-28 md:h-32 bg-yellow-500 rounded-full blur-3xl"></div>
<div class="absolute bottom-20 right-20 w-40 h-40 bg-yellow-400 rounded-full blur-3xl"></div> <div class="absolute bottom-10 xs:bottom-12 sm:bottom-16 md:bottom-20 right-10 xs:right-12 sm:right-16 md:right-20 w-24 xs:w-28 sm:w-32 md:w-40 h-24 xs:h-28 sm:h-32 md:h-40 bg-yellow-400 rounded-full blur-3xl"></div>
</div> </div>
<div class="relative z-10 max-w-7xl mx-auto"> <div class="relative z-10 max-w-7xl mx-auto">
<h1 <h1
class="text-5xl lg:text-7xl font-bold mb-12 text-yellow-500 font-nevduplenysh text-center" class="text-3xl xs:text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-6 xs:mb-8 sm:mb-10 md:mb-12 text-yellow-500 font-nevduplenysh text-center"
> >
{product.title} {product.title}
</h1> </h1>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 xs:gap-10 sm:gap-12 md:gap-16">
<div class="relative group"> <div class="relative group">
<div class="overflow-hidden rounded-3xl shadow-2xl"> <div class="overflow-hidden rounded-2xl xs:rounded-3xl shadow-2xl">
<OptimizedImage <OptimizedImage
src={product.imageUrl} src={product.imageUrl}
alt={product.title} alt={product.title}
@ -115,19 +115,19 @@ const analyticsScript = `
</div> </div>
</div> </div>
<div class="space-y-8"> <div class="space-y-4 xs:space-y-6 sm:space-y-8">
<div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-700"> <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl xs:rounded-2xl p-4 xs:p-6 sm:p-8 border border-gray-700">
<h2 class="text-2xl font-bold text-yellow-400 mb-6 font-gilroy">Описание продукта</h2> <h2 class="text-lg xs:text-xl sm:text-2xl font-bold text-yellow-400 mb-3 xs:mb-4 sm:mb-6 font-gilroy">Описание продукта</h2>
<p class="text-lg leading-relaxed text-gray-300 font-gilroy">{product.description}</p> <p class="text-base xs:text-lg leading-relaxed text-gray-300 font-gilroy">{product.description}</p>
</div> </div>
{ {
product.descriptions && product.descriptions.length > 0 && ( product.descriptions && product.descriptions.length > 0 && (
<div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-700"> <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl xs:rounded-2xl p-4 xs:p-6 sm:p-8 border border-gray-700">
<h2 class="text-2xl font-bold text-yellow-400 mb-6 font-gilroy">Подробное описание</h2> <h2 class="text-lg xs:text-xl sm:text-2xl font-bold text-yellow-400 mb-3 xs:mb-4 sm:mb-6 font-gilroy">Подробное описание</h2>
<div class="space-y-4"> <div class="space-y-3 xs:space-y-4">
{product.descriptions.map((desc) => ( {product.descriptions.map((desc) => (
<p class="text-base text-gray-300 leading-relaxed font-gilroy">{desc}</p> <p class="text-sm xs:text-base text-gray-300 leading-relaxed font-gilroy">{desc}</p>
))} ))}
</div> </div>
</div> </div>
@ -136,13 +136,13 @@ const analyticsScript = `
{ {
product.items && product.items.length > 0 && ( product.items && product.items.length > 0 && (
<div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-700"> <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl xs:rounded-2xl p-4 xs:p-6 sm:p-8 border border-gray-700">
<h2 class="text-2xl font-bold text-yellow-400 mb-6 font-gilroy">Характеристики</h2> <h2 class="text-lg xs:text-xl sm:text-2xl font-bold text-yellow-400 mb-3 xs:mb-4 sm:mb-6 font-gilroy">Характеристики</h2>
<ul class="space-y-3"> <ul class="space-y-2 xs:space-y-3">
{product.items.map((item) => ( {product.items.map((item) => (
<li class="flex items-center space-x-3"> <li class="flex items-center space-x-3">
<div class="w-2 h-2 bg-yellow-500 rounded-full flex-shrink-0" /> <div class="w-2 h-2 bg-yellow-500 rounded-full flex-shrink-0" />
<span class="text-gray-300 font-gilroy">{item}</span> <span class="text-gray-300 font-gilroy text-sm xs:text-base">{item}</span>
</li> </li>
))} ))}
</ul> </ul>
@ -151,11 +151,11 @@ const analyticsScript = `
} }
<!-- Кнопка заказа --> <!-- Кнопка заказа -->
<div class="bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 rounded-2xl p-8 border border-yellow-500/30"> <div class="bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 rounded-xl xs:rounded-2xl p-4 xs:p-6 sm:p-8 border border-yellow-500/30">
<h3 class="text-xl font-bold text-yellow-400 mb-4 font-gilroy">Заинтересовал этот продукт?</h3> <h3 class="text-lg xs:text-xl font-bold text-yellow-400 mb-3 xs:mb-4 font-gilroy">Заинтересовал этот продукт?</h3>
<p class="text-gray-300 mb-6 font-gilroy">Свяжитесь с нами для получения подробной информации и оформления заказа</p> <p class="text-sm xs:text-base text-gray-300 mb-4 xs:mb-6 font-gilroy">Свяжитесь с нами для получения подробной информации и оформления заказа</p>
<button class="open-modal w-full inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-yellow-500 to-yellow-600 text-black rounded-xl hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-yellow-500/25"> <button class="open-modal w-full inline-flex items-center justify-center px-4 xs:px-6 sm:px-8 py-3 xs:py-4 bg-gradient-to-r from-yellow-500 to-yellow-600 text-black rounded-lg xs:rounded-xl hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-yellow-500/25 text-sm xs:text-base">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 xs:w-5 xs:h-5 mr-2 xs:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg> </svg>
Заказать продукт Заказать продукт

2
src/pages/blog/affinazh-dragocennyh-metallov.astro
View File

@ -25,7 +25,7 @@ const breadcrumbItems = [
</Fragment> </Fragment>
<!-- Hero секция статьи --> <!-- Hero секция статьи -->
<section class="relative bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white pt-32 pb-20 px-8 lg:px-24 overflow-hidden"> <section class="relative bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white header-offset pb-20 px-8 lg:px-24 overflow-hidden">
<!-- Декоративные элементы --> <!-- Декоративные элементы -->
<div class="absolute inset-0 opacity-10"> <div class="absolute inset-0 opacity-10">
<div class="absolute top-20 left-20 w-32 h-32 bg-purple-500 rounded-full blur-3xl"></div> <div class="absolute top-20 left-20 w-32 h-32 bg-purple-500 rounded-full blur-3xl"></div>

72
src/pages/blog/index.astro
View File

@ -48,7 +48,7 @@ const articles = [
</Fragment> </Fragment>
<!-- Hero секция для блога --> <!-- Hero секция для блога -->
<section class="relative bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white pt-32 pb-24 px-8 lg:px-24 overflow-hidden"> <section class="relative bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white header-offset pb-16 xs:pb-20 sm:pb-24 px-4 xs:px-6 sm:px-8 lg:px-24 overflow-hidden">
<!-- Декоративные элементы --> <!-- Декоративные элементы -->
<div class="absolute inset-0 opacity-10"> <div class="absolute inset-0 opacity-10">
<div class="absolute top-20 left-20 w-32 h-32 bg-yellow-500 rounded-full blur-3xl"></div> <div class="absolute top-20 left-20 w-32 h-32 bg-yellow-500 rounded-full blur-3xl"></div>
@ -57,27 +57,27 @@ const articles = [
</div> </div>
<div class="relative z-10 max-w-7xl mx-auto text-center"> <div class="relative z-10 max-w-7xl mx-auto text-center">
<h1 class="text-6xl lg:text-8xl font-bold text-yellow-500 mb-8 font-nevduplenysh"> <h1 class="text-4xl xs:text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-bold text-yellow-500 mb-6 xs:mb-8 font-nevduplenysh">
ЭКСПЕРТНЫЙ БЛОГ ЭКСПЕРТНЫЙ БЛОГ
</h1> </h1>
<p class="text-xl lg:text-2xl text-gray-300 max-w-4xl mx-auto font-gilroy leading-relaxed"> <p class="text-base xs:text-lg sm:text-xl lg:text-2xl text-gray-300 max-w-4xl mx-auto font-gilroy leading-relaxed">
Профессиональные знания и экспертные материалы о драгоценных металлах, Профессиональные знания и экспертные материалы о драгоценных металлах,
<span class="text-yellow-400 font-semibold">технологиях и стандартах качества</span> <span class="text-yellow-400 font-semibold">технологиях и стандартах качества</span>
</p> </p>
<!-- Статистика блога --> <!-- Статистика блога -->
<div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto"> <div class="mt-12 xs:mt-16 grid grid-cols-1 sm:grid-cols-3 gap-4 xs:gap-6 sm:gap-8 max-w-4xl mx-auto">
<div class="bg-black/40 backdrop-blur-sm rounded-2xl p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300"> <div class="bg-black/40 backdrop-blur-sm rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
<div class="text-4xl font-bold text-yellow-400 font-nevduplenysh mb-2">15+</div> <div class="text-3xl xs:text-4xl font-bold text-yellow-400 font-nevduplenysh mb-1 xs:mb-2">15+</div>
<div class="text-white font-gilroy font-medium">экспертных статей</div> <div class="text-white font-gilroy font-medium text-sm xs:text-base">экспертных статей</div>
</div> </div>
<div class="bg-black/40 backdrop-blur-sm rounded-2xl p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300"> <div class="bg-black/40 backdrop-blur-sm rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
<div class="text-4xl font-bold text-yellow-400 font-nevduplenysh mb-2">5000+</div> <div class="text-3xl xs:text-4xl font-bold text-yellow-400 font-nevduplenysh mb-1 xs:mb-2">5000+</div>
<div class="text-white font-gilroy font-medium">читателей в месяц</div> <div class="text-white font-gilroy font-medium text-sm xs:text-base">читателей в месяц</div>
</div> </div>
<div class="bg-black/40 backdrop-blur-sm rounded-2xl p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300"> <div class="bg-black/40 backdrop-blur-sm rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-yellow-500/20 hover:border-yellow-500/50 transition-all duration-300">
<div class="text-4xl font-bold text-yellow-400 font-nevduplenysh mb-2">24/7</div> <div class="text-3xl xs:text-4xl font-bold text-yellow-400 font-nevduplenysh mb-1 xs:mb-2">24/7</div>
<div class="text-white font-gilroy font-medium">обновления</div> <div class="text-white font-gilroy font-medium text-sm xs:text-base">обновления</div>
</div> </div>
</div> </div>
</div> </div>
@ -86,7 +86,7 @@ const articles = [
<Breadcrumbs items={breadcrumbItems} /> <Breadcrumbs items={breadcrumbItems} />
<!-- Основной контент блога --> <!-- Основной контент блога -->
<main class="bg-gradient-to-br from-black via-gray-900 to-gray-800 text-white py-20 px-8 lg:px-24 relative overflow-hidden"> <main class="bg-gradient-to-br from-black via-gray-900 to-gray-800 text-white py-12 xs:py-16 sm:py-20 px-4 xs:px-6 sm:px-8 lg:px-24 relative overflow-hidden">
<!-- Декоративные элементы --> <!-- Декоративные элементы -->
<div class="absolute inset-0 opacity-5"> <div class="absolute inset-0 opacity-5">
<div class="absolute top-40 left-40 w-32 h-32 bg-blue-500 rounded-full blur-3xl"></div> <div class="absolute top-40 left-40 w-32 h-32 bg-blue-500 rounded-full blur-3xl"></div>
@ -95,53 +95,53 @@ const articles = [
<div class="relative z-10 max-w-7xl mx-auto"> <div class="relative z-10 max-w-7xl mx-auto">
<!-- Заголовок раздела --> <!-- Заголовок раздела -->
<div class="text-center mb-16"> <div class="text-center mb-12 xs:mb-16">
<h2 class="text-4xl lg:text-6xl font-bold text-white mb-6 font-nevduplenysh"> <h2 class="text-3xl xs:text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-4 xs:mb-6 font-nevduplenysh">
ПОСЛЕДНИЕ СТАТЬИ ПОСЛЕДНИЕ СТАТЬИ
</h2> </h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto font-gilroy leading-relaxed"> <p class="text-base xs:text-lg sm:text-xl text-gray-300 max-w-3xl mx-auto font-gilroy leading-relaxed">
Актуальные материалы от наших экспертов о драгоценных металлах, технологиях и рыночных трендах Актуальные материалы от наших экспертов о драгоценных металлах, технологиях и рыночных трендах
</p> </p>
</div> </div>
<!-- Сетка статей --> <!-- Сетка статей -->
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 xs:gap-8">
{articles.map((article, index) => ( {articles.map((article, index) => (
<article class="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl overflow-hidden shadow-2xl hover:transform hover:scale-105 transition-all duration-500 border border-gray-700 hover:border-yellow-500/50"> <article class="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl xs:rounded-3xl overflow-hidden shadow-2xl hover:transform hover:scale-105 transition-all duration-500 border border-gray-700 hover:border-yellow-500/50">
<!-- Фоновое изображение --> <!-- Фоновое изображение -->
<div class="absolute inset-0 bg-cover bg-center opacity-20" style={`background-image: url('${article.image}');`}></div> <div class="absolute inset-0 bg-cover bg-center opacity-20" style={`background-image: url('${article.image}');`}></div>
<div class="absolute inset-0 bg-gradient-to-br from-black/60 to-black/80"></div> <div class="absolute inset-0 bg-gradient-to-br from-black/60 to-black/80"></div>
<div class="relative z-10 p-8 h-full flex flex-col"> <div class="relative z-10 p-6 xs:p-8 h-full flex flex-col">
<!-- Категория --> <!-- Категория -->
<div class="mb-4"> <div class="mb-3 xs:mb-4">
<span class={`inline-block px-4 py-2 rounded-full text-sm font-semibold text-white bg-gradient-to-r ${article.categoryColor} shadow-lg`}> <span class={`inline-block px-3 py-1 xs:px-4 xs:py-2 rounded-full text-xs xs:text-sm font-semibold text-white bg-gradient-to-r ${article.categoryColor} shadow-lg`}>
{article.category} {article.category}
</span> </span>
</div> </div>
<!-- Заголовок --> <!-- Заголовок -->
<h3 class="text-2xl font-bold mb-4 text-white font-gilroy leading-tight group-hover:text-yellow-400 transition-colors duration-300"> <h3 class="text-xl xs:text-2xl font-bold mb-3 xs:mb-4 text-white font-gilroy leading-tight group-hover:text-yellow-400 transition-colors duration-300">
<a href={`/blog/${article.slug}`} class="block"> <a href={`/blog/${article.slug}`} class="block">
{article.title} {article.title}
</a> </a>
</h3> </h3>
<!-- Описание --> <!-- Описание -->
<p class="text-gray-300 mb-6 font-gilroy leading-relaxed flex-grow"> <p class="text-sm xs:text-base text-gray-300 mb-4 xs:mb-6 font-gilroy leading-relaxed flex-grow">
{article.excerpt} {article.excerpt}
</p> </p>
<!-- Метаинформация --> <!-- Метаинформация -->
<div class="flex justify-between items-center text-sm text-gray-400 font-gilroy mb-6"> <div class="flex justify-between items-center text-xs xs:text-sm text-gray-400 font-gilroy mb-4 xs:mb-6">
<span class="flex items-center"> <span class="flex items-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-3 h-3 xs:w-4 xs:h-4 mr-1 xs:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg> </svg>
{article.publishDate} {article.publishDate}
</span> </span>
<span class="flex items-center"> <span class="flex items-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-3 h-3 xs:w-4 xs:h-4 mr-1 xs:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg> </svg>
{article.readTime} {article.readTime}
@ -151,32 +151,32 @@ const articles = [
<!-- Кнопка чтения --> <!-- Кнопка чтения -->
<a <a
href={`/blog/${article.slug}`} href={`/blog/${article.slug}`}
class="group/btn inline-flex items-center justify-center w-full px-6 py-4 bg-gradient-to-r from-yellow-500 to-yellow-600 text-black rounded-xl hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-yellow-500/25" class="group/btn inline-flex items-center justify-center w-full px-4 py-3 xs:px-6 xs:py-4 bg-gradient-to-r from-yellow-500 to-yellow-600 text-black rounded-lg xs:rounded-xl hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-yellow-500/25 text-sm xs:text-base"
> >
<span>Читать статью</span> <span>Читать статью</span>
<svg class="w-5 h-5 ml-3 group-hover/btn:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 xs:w-5 xs:h-5 ml-2 xs:ml-3 group-hover/btn:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg> </svg>
</a> </a>
</div> </div>
<!-- Декоративный элемент --> <!-- Декоративный элемент -->
<div class="absolute top-4 right-4 w-12 h-12 bg-gradient-to-br from-yellow-500/20 to-yellow-600/20 rounded-full blur-xl group-hover:from-yellow-400/30 group-hover:to-yellow-500/30 transition-all duration-500"></div> <div class="absolute top-3 xs:top-4 right-3 xs:right-4 w-10 h-10 xs:w-12 xs:h-12 bg-gradient-to-br from-yellow-500/20 to-yellow-600/20 rounded-full blur-xl group-hover:from-yellow-400/30 group-hover:to-yellow-500/30 transition-all duration-500"></div>
</article> </article>
))} ))}
</div> </div>
<!-- Call to Action --> <!-- Call to Action -->
<div class="mt-20 text-center"> <div class="mt-16 xs:mt-20 text-center">
<div class="bg-gradient-to-r from-gray-800/60 to-gray-900/60 backdrop-blur-sm rounded-3xl p-12 border border-gray-700/50"> <div class="bg-gradient-to-r from-gray-800/60 to-gray-900/60 backdrop-blur-sm rounded-2xl xs:rounded-3xl p-8 xs:p-12 border border-gray-700/50">
<h3 class="text-3xl lg:text-4xl font-bold text-white mb-6 font-nevduplenysh"> <h3 class="text-2xl xs:text-3xl lg:text-4xl font-bold text-white mb-4 xs:mb-6 font-nevduplenysh">
ОСТАЛИСЬ ВОПРОСЫ? ОСТАЛИСЬ ВОПРОСЫ?
</h3> </h3>
<p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto font-gilroy leading-relaxed"> <p class="text-base xs:text-lg sm:text-xl text-gray-300 mb-6 xs:mb-8 max-w-2xl mx-auto font-gilroy leading-relaxed">
Наши эксперты готовы ответить на любые вопросы о драгоценных металлах и поделиться профессиональным опытом Наши эксперты готовы ответить на любые вопросы о драгоценных металлах и поделиться профессиональным опытом
</p> </p>
<button class="open-modal inline-flex items-center px-8 py-4 bg-gradient-to-r from-yellow-500 to-yellow-600 text-black rounded-xl hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-yellow-500/25"> <button class="open-modal inline-flex items-center px-6 py-3 xs:px-8 xs:py-4 bg-gradient-to-r from-yellow-500 to-yellow-600 text-black rounded-lg xs:rounded-xl hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-yellow-500/25 text-sm xs:text-base">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 xs:w-5 xs:h-5 mr-2 xs:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg> </svg>
Задать вопрос эксперту Задать вопрос эксперту

2
src/pages/blog/platinovye-metally-promyshlennost.astro
View File

@ -25,7 +25,7 @@ const breadcrumbItems = [
</Fragment> </Fragment>
<!-- Hero секция статьи --> <!-- Hero секция статьи -->
<section class="relative bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white pt-32 pb-20 px-8 lg:px-24 overflow-hidden"> <section class="relative bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white header-offset pb-20 px-8 lg:px-24 overflow-hidden">
<!-- Декоративные элементы --> <!-- Декоративные элементы -->
<div class="absolute inset-0 opacity-10"> <div class="absolute inset-0 opacity-10">
<div class="absolute top-20 left-20 w-32 h-32 bg-blue-500 rounded-full blur-3xl"></div> <div class="absolute top-20 left-20 w-32 h-32 bg-blue-500 rounded-full blur-3xl"></div>

2
src/pages/blog/sertifikaciya-kontrolj-kachestva.astro
View File

@ -25,7 +25,7 @@ const breadcrumbItems = [
</Fragment> </Fragment>
<!-- Hero секция статьи --> <!-- Hero секция статьи -->
<section class="relative bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white pt-32 pb-20 px-8 lg:px-24 overflow-hidden"> <section class="relative bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white header-offset pb-20 px-8 lg:px-24 overflow-hidden">
<!-- Декоративные элементы --> <!-- Декоративные элементы -->
<div class="absolute inset-0 opacity-10"> <div class="absolute inset-0 opacity-10">
<div class="absolute top-20 left-20 w-32 h-32 bg-green-500 rounded-full blur-3xl"></div> <div class="absolute top-20 left-20 w-32 h-32 bg-green-500 rounded-full blur-3xl"></div>

108
src/pages/cities.astro
View File

@ -183,96 +183,96 @@ const deliveryInfo = [
<!-- Контакты региональных представителей --> <!-- Контакты региональных представителей -->
<section> <section>
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-yellow-500 mb-8 lg:mb-12 text-center font-nevduplenysh"> <h2 class="text-2xl xs:text-3xl sm:text-4xl lg:text-5xl font-bold text-yellow-500 mb-6 xs:mb-8 lg:mb-12 text-center font-nevduplenysh">
Контакты региональных представителей Контакты региональных представителей
</h2> </h2>
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6 lg:gap-8"> <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 xs:gap-6 lg:gap-8">
{cities.map((city) => ( {cities.map((city) => (
<div class={`group bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-6 lg:p-8 rounded-2xl shadow-2xl border-l-4 ${city.isHeadOffice ? 'border-yellow-500 shadow-yellow-500/20' : 'border-blue-500 shadow-blue-500/20'} hover:shadow-2xl transition-all duration-500 transform hover:scale-105 backdrop-blur-sm border border-gray-700/50 hover:border-yellow-500/50`}> <div class={`group bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-4 xs:p-6 lg:p-8 rounded-xl xs:rounded-2xl shadow-2xl border-l-4 ${city.isHeadOffice ? 'border-yellow-500 shadow-yellow-500/20' : 'border-blue-500 shadow-blue-500/20'} hover:shadow-2xl transition-all duration-500 transform hover:scale-105 backdrop-blur-sm border border-gray-700/50 hover:border-yellow-500/50`}>
<div class="flex flex-col sm:flex-row sm:items-center justify-between mb-4 lg:mb-6 space-y-2 sm:space-y-0"> <div class="flex flex-col xs:flex-row xs:items-center justify-between mb-3 xs:mb-4 lg:mb-6 space-y-2 xs:space-y-0">
<h3 class="text-xl sm:text-2xl font-bold text-white group-hover:text-yellow-400 transition-colors duration-300 font-nevduplenysh">{city.name}</h3> <h3 class="text-lg xs:text-xl sm:text-2xl font-bold text-white group-hover:text-yellow-400 transition-colors duration-300 font-nevduplenysh">{city.name}</h3>
{city.isHeadOffice && ( {city.isHeadOffice && (
<span class="bg-gradient-to-r from-yellow-500 to-yellow-600 text-black px-2 sm:px-3 py-1 rounded-full text-xs font-bold self-start sm:self-center"> <span class="bg-gradient-to-r from-yellow-500 to-yellow-600 text-black px-2 xs:px-3 py-1 rounded-full text-xs font-bold self-start xs:self-center">
ГОЛОВНОЙ ОФИС ГОЛОВНОЙ ОФИС
</span> </span>
)} )}
</div> </div>
<div class="space-y-4 text-gray-300 font-gilroy"> <div class="space-y-3 xs:space-y-4 text-gray-300 font-gilroy">
<div class="flex items-start space-x-3"> <div class="flex items-start space-x-2 xs:space-x-3">
<svg class="w-5 h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg> </svg>
<div> <div>
<div class="text-sm text-gray-400">Регион</div> <div class="text-xs xs:text-sm text-gray-400">Регион</div>
<div class="text-white font-medium">{city.region}</div> <div class="text-white font-medium text-sm xs:text-base">{city.region}</div>
</div> </div>
</div> </div>
{city.address && ( {city.address && (
<div class="flex items-start space-x-3"> <div class="flex items-start space-x-2 xs:space-x-3">
<svg class="w-5 h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
</svg> </svg>
<div> <div>
<div class="text-sm text-gray-400">Адрес</div> <div class="text-xs xs:text-sm text-gray-400">Адрес</div>
<div class="text-white">{city.address}</div> <div class="text-white text-sm xs:text-base">{city.address}</div>
</div> </div>
</div> </div>
)} )}
<div class="flex items-start space-x-3"> <div class="flex items-start space-x-2 xs:space-x-3">
<svg class="w-5 h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
</svg> </svg>
<div> <div>
<div class="text-sm text-gray-400">Телефон</div> <div class="text-xs xs:text-sm text-gray-400">Телефон</div>
<div class="text-white font-medium">{city.phone}</div> <div class="text-white font-medium text-sm xs:text-base">{city.phone}</div>
</div> </div>
</div> </div>
<div class="flex items-start space-x-3"> <div class="flex items-start space-x-2 xs:space-x-3">
<svg class="w-5 h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg> </svg>
<div> <div>
<div class="text-sm text-gray-400">Email</div> <div class="text-xs xs:text-sm text-gray-400">Email</div>
<div class="text-white">{city.email}</div> <div class="text-white text-sm xs:text-base">{city.email}</div>
</div> </div>
</div> </div>
{city.manager && ( {city.manager && (
<div class="flex items-start space-x-3"> <div class="flex items-start space-x-2 xs:space-x-3">
<svg class="w-5 h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg> </svg>
<div> <div>
<div class="text-sm text-gray-400">Менеджер</div> <div class="text-xs xs:text-sm text-gray-400">Менеджер</div>
<div class="text-white">{city.manager}</div> <div class="text-white text-sm xs:text-base">{city.manager}</div>
</div> </div>
</div> </div>
)} )}
<div class="flex items-start space-x-3"> <div class="flex items-start space-x-2 xs:space-x-3">
<svg class="w-5 h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg> </svg>
<div> <div>
<div class="text-sm text-gray-400">Режим работы</div> <div class="text-xs xs:text-sm text-gray-400">Режим работы</div>
<div class="text-white">{city.workingHours}</div> <div class="text-white text-sm xs:text-base">{city.workingHours}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Услуги --> <!-- Услуги -->
<div class="mt-6 pt-6 border-t border-gray-700/50"> <div class="mt-4 xs:mt-6 pt-4 xs:pt-6 border-t border-gray-700/50">
<div class="text-sm text-gray-400 mb-3">Услуги</div> <div class="text-xs xs:text-sm text-gray-400 mb-2 xs:mb-3">Услуги</div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-1.5 xs:gap-2">
{city.services.map((service) => ( {city.services.map((service) => (
<span class="bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 text-yellow-400 px-3 py-1 rounded-full text-xs font-medium border border-yellow-500/30"> <span class="bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 text-yellow-400 px-2 xs:px-3 py-1 rounded-full text-xs font-medium border border-yellow-500/30">
{service} {service}
</span> </span>
))} ))}
@ -284,17 +284,17 @@ const deliveryInfo = [
</section> </section>
<!-- Условия доставки --> <!-- Условия доставки -->
<section class="bg-black/40 backdrop-blur-sm rounded-3xl p-4 sm:p-6 lg:p-8 xl:p-12 border border-yellow-500/20 hover:border-yellow-500/40 transition-all duration-500"> <section class="bg-black/40 backdrop-blur-sm rounded-2xl xs:rounded-3xl p-4 xs:p-6 sm:p-8 lg:p-12 border border-yellow-500/20 hover:border-yellow-500/40 transition-all duration-500">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-yellow-500 mb-8 lg:mb-12 text-center font-nevduplenysh"> <h2 class="text-2xl xs:text-3xl sm:text-4xl lg:text-5xl font-bold text-yellow-500 mb-6 xs:mb-8 lg:mb-12 text-center font-nevduplenysh">
Условия доставки по регионам Условия доставки по регионам
</h2> </h2>
<!-- Мобильная версия - карточки --> <!-- Мобильная версия - карточки -->
<div class="block lg:hidden space-y-4"> <div class="block lg:hidden space-y-3 xs:space-y-4">
{deliveryInfo.map((info, index) => ( {deliveryInfo.map((info, index) => (
<div class="bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-4 sm:p-6 rounded-2xl shadow-2xl border border-gray-700/50 hover:border-yellow-500/50 transition-all duration-300"> <div class="bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-4 xs:p-6 rounded-xl xs:rounded-2xl shadow-2xl border border-gray-700/50 hover:border-yellow-500/50 transition-all duration-300">
<h3 class="text-lg sm:text-xl font-bold text-yellow-400 mb-4 font-nevduplenysh">{info.region}</h3> <h3 class="text-base xs:text-lg sm:text-xl font-bold text-yellow-400 mb-3 xs:mb-4 font-nevduplenysh">{info.region}</h3>
<div class="space-y-3 text-sm sm:text-base font-gilroy"> <div class="space-y-2 xs:space-y-3 text-sm xs:text-base font-gilroy">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<span class="text-gray-400">Время доставки:</span> <span class="text-gray-400">Время доставки:</span>
<span class="text-white font-medium">{info.deliveryTime}</span> <span class="text-white font-medium">{info.deliveryTime}</span>
@ -305,7 +305,7 @@ const deliveryInfo = [
</div> </div>
<div class="pt-2 border-t border-gray-700/50"> <div class="pt-2 border-t border-gray-700/50">
<span class="text-gray-400 block mb-2">Особенности:</span> <span class="text-gray-400 block mb-2">Особенности:</span>
<span class="text-white">{info.specialConditions}</span> <span class="text-white text-sm xs:text-base">{info.specialConditions}</span>
</div> </div>
</div> </div>
</div> </div>
@ -336,34 +336,34 @@ const deliveryInfo = [
</table> </table>
</div> </div>
<div class="mt-8 lg:mt-12 bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 border-l-4 border-yellow-500 p-4 sm:p-6 lg:p-8 rounded-2xl backdrop-blur-sm"> <div class="mt-6 xs:mt-8 lg:mt-12 bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 border-l-4 border-yellow-500 p-4 xs:p-6 lg:p-8 rounded-xl xs:rounded-2xl backdrop-blur-sm">
<h3 class="text-xl sm:text-2xl font-bold text-yellow-400 mb-4 sm:mb-6 font-nevduplenysh flex items-center"> <h3 class="text-lg xs:text-xl sm:text-2xl font-bold text-yellow-400 mb-3 xs:mb-4 sm:mb-6 font-nevduplenysh flex items-center">
<svg class="w-6 h-6 sm:w-8 sm:h-8 mr-2 sm:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 xs:w-6 xs:h-6 sm:w-8 sm:h-8 mr-2 xs:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg> </svg>
Важная информация Важная информация
</h3> </h3>
<ul class="space-y-3 text-white font-gilroy text-base sm:text-lg"> <ul class="space-y-2 xs:space-y-3 text-white font-gilroy text-sm xs:text-base sm:text-lg">
<li class="flex items-start space-x-3"> <li class="flex items-start space-x-2 xs:space-x-3">
<svg class="w-5 h-5 sm:w-6 sm:h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 xs:w-5 xs:h-5 sm:w-6 sm:h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg> </svg>
<span>Все поставки драгоценных металлов осуществляются с соблюдением требований безопасности</span> <span>Все поставки драгоценных металлов осуществляются с соблюдением требований безопасности</span>
</li> </li>
<li class="flex items-start space-x-3"> <li class="flex items-start space-x-2 xs:space-x-3">
<svg class="w-5 h-5 sm:w-6 sm:h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 xs:w-5 xs:h-5 sm:w-6 sm:h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg> </svg>
<span>Доставка производится только в рабочие дни с 9:00 до 18:00</span> <span>Доставка производится только в рабочие дни с 9:00 до 18:00</span>
</li> </li>
<li class="flex items-start space-x-3"> <li class="flex items-start space-x-2 xs:space-x-3">
<svg class="w-5 h-5 sm:w-6 sm:h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 xs:w-5 xs:h-5 sm:w-6 sm:h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg> </svg>
<span>Для крупных заказов возможна индивидуальная схема логистики</span> <span>Для крупных заказов возможна индивидуальная схема логистики</span>
</li> </li>
<li class="flex items-start space-x-3"> <li class="flex items-start space-x-2 xs:space-x-3">
<svg class="w-5 h-5 sm:w-6 sm:h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 xs:w-5 xs:h-5 sm:w-6 sm:h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg> </svg>
<span>Все грузы застрахованы на полную стоимость</span> <span>Все грузы застрахованы на полную стоимость</span>

90
src/pages/faq.astro
View File

@ -150,48 +150,48 @@ const faqCategories = [
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-gradient-to-r from-green-500/5 to-teal-500/5 rounded-full blur-3xl"></div> <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-gradient-to-r from-green-500/5 to-teal-500/5 rounded-full blur-3xl"></div>
</div> </div>
<main class="relative bg-gradient-to-br from-black via-gray-900 to-black text-white py-16 px-8 lg:px-24 min-h-screen"> <main class="relative bg-gradient-to-br from-black via-gray-900 to-black text-white py-12 xs:py-16 px-4 xs:px-6 sm:px-8 lg:px-24 min-h-screen">
<div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.02),transparent)] pointer-events-none"></div> <div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.02),transparent)] pointer-events-none"></div>
<div class="relative z-10"> <div class="relative z-10">
<h1 class="text-4xl lg:text-6xl font-bold mb-12 text-transparent bg-gradient-to-r from-yellow-400 via-yellow-500 to-orange-500 bg-clip-text font-nevduplenysh text-center"> <h1 class="text-3xl xs:text-4xl sm:text-5xl lg:text-6xl font-bold mb-8 xs:mb-12 text-transparent bg-gradient-to-r from-yellow-400 via-yellow-500 to-orange-500 bg-clip-text font-nevduplenysh text-center">
Часто задаваемые вопросы Часто задаваемые вопросы
</h1> </h1>
<div class="max-w-6xl mx-auto"> <div class="max-w-6xl mx-auto">
<div class="mb-12 text-center"> <div class="mb-8 xs:mb-12 text-center">
<p class="text-lg text-gray-300 leading-relaxed max-w-3xl mx-auto"> <p class="text-base xs:text-lg text-gray-300 leading-relaxed max-w-3xl mx-auto">
Здесь собраны ответы на наиболее популярные вопросы наших клиентов. Здесь собраны ответы на наиболее популярные вопросы наших клиентов.
Если вы не нашли ответ на свой вопрос, свяжитесь с нами. Если вы не нашли ответ на свой вопрос, свяжитесь с нами.
</p> </p>
</div> </div>
{faqCategories.map((category, categoryIndex) => ( {faqCategories.map((category, categoryIndex) => (
<section class="mb-16"> <section class="mb-12 xs:mb-16">
<div class="relative bg-gradient-to-r from-gray-900/80 via-gray-800/80 to-gray-900/80 backdrop-blur-sm border border-gray-700/50 rounded-2xl p-8 mb-8"> <div class="relative bg-gradient-to-r from-gray-900/80 via-gray-800/80 to-gray-900/80 backdrop-blur-sm border border-gray-700/50 rounded-xl xs:rounded-2xl p-6 xs:p-8 mb-6 xs:mb-8">
<div class="absolute inset-0 bg-gradient-to-r from-yellow-500/5 to-orange-500/5 rounded-2xl"></div> <div class="absolute inset-0 bg-gradient-to-r from-yellow-500/5 to-orange-500/5 rounded-xl xs:rounded-2xl"></div>
<h2 class="relative text-3xl font-bold text-white flex items-center gap-4"> <h2 class="relative text-2xl xs:text-3xl font-bold text-white flex items-center gap-3 xs:gap-4">
<div class="w-2 h-8 bg-gradient-to-b from-yellow-400 to-orange-500 rounded-full"></div> <div class="w-1.5 xs:w-2 h-6 xs:h-8 bg-gradient-to-b from-yellow-400 to-orange-500 rounded-full"></div>
{category.title} {category.title}
</h2> </h2>
</div> </div>
<div class="space-y-4"> <div class="space-y-3 xs:space-y-4">
{category.questions.map((faq, index) => ( {category.questions.map((faq, index) => (
<div class="group relative bg-gradient-to-br from-gray-900/60 via-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/30 rounded-xl overflow-hidden hover:border-gray-600/50 transition-all duration-300"> <div class="group relative bg-gradient-to-br from-gray-900/60 via-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/30 rounded-lg xs:rounded-xl overflow-hidden hover:border-gray-600/50 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="faq-item relative"> <div class="faq-item relative">
<button <button
class="faq-question w-full text-left flex justify-between items-start focus:outline-none p-6 group-hover:bg-white/[0.02] transition-colors duration-300" class="faq-question w-full text-left flex justify-between items-start focus:outline-none p-4 xs:p-6 group-hover:bg-white/[0.02] transition-colors duration-300"
onclick={`toggleFaq('faq-${categoryIndex}-${index}')`} onclick={`toggleFaq('faq-${categoryIndex}-${index}')`}
> >
<h3 class="text-lg font-semibold text-white pr-4 group-hover:text-yellow-300 transition-colors duration-300"> <h3 class="text-base xs:text-lg font-semibold text-white pr-3 xs:pr-4 group-hover:text-yellow-300 transition-colors duration-300">
{faq.question} {faq.question}
</h3> </h3>
<div class="flex-shrink-0 w-10 h-10 bg-gradient-to-r from-yellow-500/20 to-orange-500/20 rounded-lg flex items-center justify-center group-hover:from-yellow-500/30 group-hover:to-orange-500/30 transition-all duration-300"> <div class="flex-shrink-0 w-8 h-8 xs:w-10 xs:h-10 bg-gradient-to-r from-yellow-500/20 to-orange-500/20 rounded-lg flex items-center justify-center group-hover:from-yellow-500/30 group-hover:to-orange-500/30 transition-all duration-300">
<svg <svg
class="faq-icon w-5 h-5 text-yellow-400 transition-transform duration-300" class="faq-icon w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 transition-transform duration-300"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -208,10 +208,10 @@ const faqCategories = [
<div <div
id={`faq-${categoryIndex}-${index}`} id={`faq-${categoryIndex}-${index}`}
class="faq-answer hidden px-6 pb-6" class="faq-answer hidden px-4 xs:px-6 pb-4 xs:pb-6"
> >
<div class="border-t border-gray-700/50 pt-4"> <div class="border-t border-gray-700/50 pt-3 xs:pt-4">
<p class="text-gray-300 leading-relaxed"> <p class="text-sm xs:text-base text-gray-300 leading-relaxed">
{faq.answer} {faq.answer}
</p> </p>
</div> </div>
@ -224,29 +224,29 @@ const faqCategories = [
))} ))}
<!-- Контактная информация --> <!-- Контактная информация -->
<section class="relative bg-gradient-to-br from-gray-900/80 via-gray-800/80 to-gray-900/80 backdrop-blur-sm border border-gray-700/50 rounded-2xl p-8 mt-16 overflow-hidden"> <section class="relative bg-gradient-to-br from-gray-900/80 via-gray-800/80 to-gray-900/80 backdrop-blur-sm border border-gray-700/50 rounded-xl xs:rounded-2xl p-6 xs:p-8 mt-12 xs:mt-16 overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-yellow-500/10 to-orange-500/10 rounded-2xl"></div> <div class="absolute inset-0 bg-gradient-to-r from-yellow-500/10 to-orange-500/10 rounded-xl xs:rounded-2xl"></div>
<div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-yellow-500/20 to-orange-500/20 rounded-full blur-2xl"></div> <div class="absolute top-0 right-0 w-24 h-24 xs:w-32 xs:h-32 bg-gradient-to-br from-yellow-500/20 to-orange-500/20 rounded-full blur-2xl"></div>
<div class="relative z-10"> <div class="relative z-10">
<h2 class="text-2xl font-bold text-white mb-4 text-center flex items-center justify-center gap-3"> <h2 class="text-xl xs:text-2xl font-bold text-white mb-3 xs:mb-4 text-center flex items-center justify-center gap-2 xs:gap-3">
<div class="w-8 h-8 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-lg flex items-center justify-center"> <div class="w-6 h-6 xs:w-8 xs:h-8 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-lg flex items-center justify-center">
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-3 h-3 xs:w-4 xs:h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg> </svg>
</div> </div>
Не нашли ответ на свой вопрос? Не нашли ответ на свой вопрос?
</h2> </h2>
<p class="text-gray-300 text-center mb-8 max-w-2xl mx-auto"> <p class="text-sm xs:text-base text-gray-300 text-center mb-6 xs:mb-8 max-w-2xl mx-auto">
Свяжитесь с нашими специалистами, и мы обязательно поможем вам Свяжитесь с нашими специалистами, и мы обязательно поможем вам
</p> </p>
<div class="flex flex-col md:flex-row justify-center items-center gap-6"> <div class="flex flex-col sm:flex-row justify-center items-center gap-4 xs:gap-6">
<a <a
href="tel:+79251045050" href="tel:+79251045050"
class="group flex items-center gap-3 px-6 py-3 bg-gradient-to-r from-blue-600/80 to-blue-500/80 backdrop-blur-sm text-white rounded-xl hover:from-blue-500 hover:to-blue-400 transition-all duration-300 shadow-lg hover:shadow-blue-500/25 hover:scale-105" class="group flex items-center gap-2 xs:gap-3 px-4 py-2.5 xs:px-6 xs:py-3 bg-gradient-to-r from-blue-600/80 to-blue-500/80 backdrop-blur-sm text-white rounded-lg xs:rounded-xl hover:from-blue-500 hover:to-blue-400 transition-all duration-300 shadow-lg hover:shadow-blue-500/25 hover:scale-105 text-sm xs:text-base w-full sm:w-auto"
> >
<div class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center group-hover:bg-white/30 transition-colors"> <div class="w-6 h-6 xs:w-8 xs:h-8 bg-white/20 rounded-lg flex items-center justify-center group-hover:bg-white/30 transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"> <svg class="w-3 h-3 xs:w-4 xs:h-4" fill="currentColor" viewBox="0 0 20 20">
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" /> <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
</svg> </svg>
</div> </div>
@ -254,19 +254,19 @@ const faqCategories = [
</a> </a>
<a <a
href="mailto:ooo.dmdk@mail.ru" href="mailto:ooo.dmdk@mail.ru"
class="group flex items-center gap-3 px-6 py-3 bg-gradient-to-r from-purple-600/80 to-purple-500/80 backdrop-blur-sm text-white rounded-xl hover:from-purple-500 hover:to-purple-400 transition-all duration-300 shadow-lg hover:shadow-purple-500/25 hover:scale-105" class="group flex items-center gap-2 xs:gap-3 px-4 py-2.5 xs:px-6 xs:py-3 bg-gradient-to-r from-purple-600/80 to-purple-500/80 backdrop-blur-sm text-white rounded-lg xs:rounded-xl hover:from-purple-500 hover:to-purple-400 transition-all duration-300 shadow-lg hover:shadow-purple-500/25 hover:scale-105 text-sm xs:text-base w-full sm:w-auto"
> >
<div class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center group-hover:bg-white/30 transition-colors"> <div class="w-6 h-6 xs:w-8 xs:h-8 bg-white/20 rounded-lg flex items-center justify-center group-hover:bg-white/30 transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"> <svg class="w-3 h-3 xs:w-4 xs:h-4" fill="currentColor" viewBox="0 0 20 20">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" /> <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" /> <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
</svg> </svg>
</div> </div>
<span class="font-semibold">ooo.dmdk@mail.ru</span> <span class="font-semibold">ooo.dmdk@mail.ru</span>
</a> </a>
<button class="open-modal group px-6 py-3 bg-gradient-to-r from-yellow-600 to-orange-600 text-white rounded-xl font-semibold hover:from-yellow-500 hover:to-orange-500 transition-all duration-300 shadow-lg hover:shadow-yellow-500/25 hover:scale-105"> <button class="open-modal group px-4 py-2.5 xs:px-6 xs:py-3 bg-gradient-to-r from-yellow-600 to-orange-600 text-white rounded-lg xs:rounded-xl font-semibold hover:from-yellow-500 hover:to-orange-500 transition-all duration-300 shadow-lg hover:shadow-yellow-500/25 hover:scale-105 text-sm xs:text-base w-full sm:w-auto">
<span class="flex items-center gap-2"> <span class="flex items-center justify-center gap-2">
<svg class="w-4 h-4 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-3 h-3 xs:w-4 xs:h-4 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg> </svg>
Задать вопрос Задать вопрос
@ -280,23 +280,23 @@ const faqCategories = [
</main> </main>
<script> <script>
function toggleFaq(id) { function toggleFaq(id: string) {
const answer = document.getElementById(id); const answer = document.getElementById(id);
const button = answer.previousElementSibling; const button = answer?.previousElementSibling as HTMLElement;
const icon = button.querySelector('.faq-icon'); const icon = button?.querySelector('.faq-icon') as HTMLElement;
if (answer.classList.contains('hidden')) { if (answer?.classList.contains('hidden')) {
answer.classList.remove('hidden'); answer.classList.remove('hidden');
icon.style.transform = 'rotate(180deg)'; if (icon) icon.style.transform = 'rotate(180deg)';
button.classList.add('bg-white/[0.05]'); button?.classList.add('bg-white/[0.05]');
} else { } else {
answer.classList.add('hidden'); answer?.classList.add('hidden');
icon.style.transform = 'rotate(0deg)'; if (icon) icon.style.transform = 'rotate(0deg)';
button.classList.remove('bg-white/[0.05]'); button?.classList.remove('bg-white/[0.05]');
} }
} }
// Глобальная функция для использования в onclick // Глобальная функция для использования в onclick
window.toggleFaq = toggleFaq; (window as any).toggleFaq = toggleFaq;
</script> </script>
</Layout> </Layout>

1
tailwind.config.mjs
View File

@ -9,6 +9,7 @@ export default {
}, },
}, },
screens: { screens: {
xs: "320px",
sm: "480px", sm: "480px",
md: "768px", md: "768px",
lg: "1028px", lg: "1028px",

2
vercel.json
View File

@ -6,7 +6,7 @@
"headers": [ "headers": [
{ {
"key": "Content-Security-Policy", "key": "Content-Security-Policy",
"value": "default-src 'self'; img-src 'self' https: data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; font-src 'self';" "value": "default-src 'self'; img-src 'self' https: data: mc.yandex.ru; script-src 'self' 'unsafe-inline' 'unsafe-eval' www.googletagmanager.com mc.yandex.ru; style-src 'self' 'unsafe-inline'; font-src 'self'; connect-src 'self' https://api.telegram.org https://mc.yandex.ru https://www.google-analytics.com; frame-src 'self' https://mc.yandex.ru;"
} }
] ]
} }