Compare commits
9 Commits
84cb7108a8
...
main
Author | SHA1 | Date | |
---|---|---|---|
87b08de593 | |||
a4326cd16d | |||
37a6373714 | |||
8550e6ecc5 | |||
0c3fbb93af | |||
1dae2aefff | |||
86b9f0e98e | |||
ed007ea1e5 | |||
0f2d215fff |
BIN
public/images/1.jpg
Normal file
BIN
public/images/1.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 164 KiB |
BIN
public/images/12.jpg
Normal file
BIN
public/images/12.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 56 KiB |
BIN
public/images/123.jpg
Normal file
BIN
public/images/123.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 59 KiB |
BIN
public/images/1234.jpg
Normal file
BIN
public/images/1234.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 83 KiB |
@ -23,29 +23,636 @@
|
||||
/* Базовые стили */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
background: linear-gradient(135deg, #111827, #1f2937, #111827);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f7f7f7;
|
||||
color: #2c2c2c;
|
||||
background: linear-gradient(135deg, #111827, #1f2937, #111827);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Отступы от фиксированного хедера */
|
||||
.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 {
|
||||
transition:
|
||||
transform 0.3s ease,
|
||||
color 0.3s ease;
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.social-icon:hover {
|
||||
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 {
|
||||
filter: brightness(1.2) saturate(1.2);
|
||||
.fade-in {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/* Стили для загрузчика страницы */
|
||||
#page-loader {
|
||||
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
/* Стили для контента страницы */
|
||||
#page-content {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-in;
|
||||
}
|
||||
|
||||
/* Предотвращение белого фона во время загрузки */
|
||||
html, body {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #111827, #1f2937, #111827);
|
||||
}
|
||||
|
||||
/* Анимация появления для загрузчика */
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.8s ease-out;
|
||||
}
|
||||
|
||||
/* Улучшенная анимация bounce для точек загрузки */
|
||||
@keyframes enhanced-bounce {
|
||||
0%, 20%, 53%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40%, 43% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
70% {
|
||||
transform: translateY(-7px);
|
||||
}
|
||||
90% {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-enhanced-bounce {
|
||||
animation: enhanced-bounce 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Анимация пульсации для логотипа */
|
||||
@keyframes logo-pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-logo-pulse {
|
||||
animation: logo-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Градиентная анимация для прогресс-бара */
|
||||
@keyframes progress-shimmer {
|
||||
0% {
|
||||
background-position: -200px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: calc(200px + 100%) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-shimmer {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#fbbf24 25%,
|
||||
#f59e0b 50%,
|
||||
#fbbf24 75%
|
||||
);
|
||||
background-size: 200px 100%;
|
||||
animation: progress-shimmer 2s infinite;
|
||||
}
|
||||
|
||||
/* Адаптивные стили для загрузчика */
|
||||
|
||||
/* Очень маленькие экраны (до 320px) */
|
||||
@media (max-width: 319px) {
|
||||
#page-loader .text-center {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
#page-loader h1 {
|
||||
font-size: 1.25rem !important;
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
#page-loader p {
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-64 {
|
||||
width: 12rem !important;
|
||||
}
|
||||
|
||||
#page-loader img {
|
||||
height: 3rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-3 {
|
||||
width: 0.5rem !important;
|
||||
height: 0.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Маленькие экраны (320px - 479px) */
|
||||
@media (min-width: 320px) and (max-width: 479px) {
|
||||
#page-loader .text-center {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
#page-loader h1 {
|
||||
font-size: 1.5rem !important;
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
#page-loader p {
|
||||
font-size: 0.875rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-64 {
|
||||
width: 14rem !important;
|
||||
}
|
||||
|
||||
#page-loader img {
|
||||
height: 4rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Средние экраны (480px - 767px) */
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
#page-loader .text-center {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#page-loader h1 {
|
||||
font-size: 2rem !important;
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
#page-loader p {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-64 {
|
||||
width: 18rem !important;
|
||||
}
|
||||
|
||||
#page-loader img {
|
||||
height: 5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Планшеты (768px - 1027px) */
|
||||
@media (min-width: 768px) and (max-width: 1027px) {
|
||||
#page-loader .text-center {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
#page-loader h1 {
|
||||
font-size: 2.5rem !important;
|
||||
margin-bottom: 2rem !important;
|
||||
}
|
||||
|
||||
#page-loader p {
|
||||
font-size: 1.125rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-64 {
|
||||
width: 24rem !important;
|
||||
}
|
||||
|
||||
#page-loader img {
|
||||
height: 6rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-3 {
|
||||
width: 1rem !important;
|
||||
height: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ноутбуки (1028px - 1439px) */
|
||||
@media (min-width: 1028px) and (max-width: 1439px) {
|
||||
#page-loader .text-center {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
#page-loader h1 {
|
||||
font-size: 3rem !important;
|
||||
margin-bottom: 2rem !important;
|
||||
}
|
||||
|
||||
#page-loader p {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-64 {
|
||||
width: 28rem !important;
|
||||
}
|
||||
|
||||
#page-loader img {
|
||||
height: 7rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-3 {
|
||||
width: 1.25rem !important;
|
||||
height: 1.25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Большие экраны (1440px+) */
|
||||
@media (min-width: 1440px) {
|
||||
#page-loader .text-center {
|
||||
padding: 2.5rem;
|
||||
}
|
||||
|
||||
#page-loader h1 {
|
||||
font-size: 3.5rem !important;
|
||||
margin-bottom: 2.5rem !important;
|
||||
}
|
||||
|
||||
#page-loader p {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-64 {
|
||||
width: 32rem !important;
|
||||
}
|
||||
|
||||
#page-loader img {
|
||||
height: 8rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-3 {
|
||||
width: 1.5rem !important;
|
||||
height: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Дополнительные адаптивные стили для декоративных элементов */
|
||||
@media (max-width: 479px) {
|
||||
#page-loader .absolute.top-1\/4 {
|
||||
width: 4rem !important;
|
||||
height: 4rem !important;
|
||||
}
|
||||
|
||||
#page-loader .absolute.bottom-1\/4 {
|
||||
width: 5rem !important;
|
||||
height: 5rem !important;
|
||||
}
|
||||
|
||||
#page-loader .absolute.top-1\/2 {
|
||||
width: 3rem !important;
|
||||
height: 3rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
#page-loader .absolute.top-1\/4 {
|
||||
width: 6rem !important;
|
||||
height: 6rem !important;
|
||||
}
|
||||
|
||||
#page-loader .absolute.bottom-1\/4 {
|
||||
width: 7rem !important;
|
||||
height: 7rem !important;
|
||||
}
|
||||
|
||||
#page-loader .absolute.top-1\/2 {
|
||||
width: 4rem !important;
|
||||
height: 4rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Адаптивные стили для прогресс-бара */
|
||||
@media (max-width: 319px) {
|
||||
#page-loader .bg-gray-700 {
|
||||
height: 0.375rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 320px) and (max-width: 479px) {
|
||||
#page-loader .bg-gray-700 {
|
||||
height: 0.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
#page-loader .bg-gray-700 {
|
||||
height: 0.625rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1027px) {
|
||||
#page-loader .bg-gray-700 {
|
||||
height: 0.75rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1028px) {
|
||||
#page-loader .bg-gray-700 {
|
||||
height: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Адаптивные стили для отступов между элементами */
|
||||
@media (max-width: 479px) {
|
||||
#page-loader .mb-8 {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
#page-loader .mb-6 {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
#page-loader .mt-4 {
|
||||
margin-top: 0.75rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
#page-loader .mb-8 {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
#page-loader .mb-6 {
|
||||
margin-bottom: 1.25rem !important;
|
||||
}
|
||||
|
||||
#page-loader .mt-4 {
|
||||
margin-top: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
@ -1,60 +1,50 @@
|
||||
---
|
||||
import { sanityClient } from "sanity:client";
|
||||
|
||||
const about = await sanityClient.fetch(`*[_type == "about"][0]{
|
||||
title,
|
||||
paragraph1,
|
||||
paragraph2,
|
||||
paragraph3,
|
||||
paragraph4,
|
||||
paragraph5,
|
||||
paragraph6,
|
||||
paragraph7,
|
||||
paragraph8,
|
||||
"imageUrls": images[].asset->url
|
||||
}`);
|
||||
// Статичные данные для раздела О НАС
|
||||
const about = {
|
||||
title: "О НАС",
|
||||
paragraph1: "Наша компания занимается производством продукции из драгоценных металлов.",
|
||||
imageUrls: [
|
||||
"/images/1.jpg",
|
||||
"/images/12.jpg",
|
||||
"/images/123.jpg",
|
||||
"/images/1234.jpg"
|
||||
]
|
||||
};
|
||||
---
|
||||
|
||||
<section
|
||||
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 top-32 left-32 w-40 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 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-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 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
|
||||
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}
|
||||
</h2>
|
||||
<div class="text-lg lg:text-xl text-gray-300 leading-relaxed font-gilroy">
|
||||
<p class="text-2xl text-white font-semibold mb-4">{about.paragraph1}</p>
|
||||
<p class="mb-3">{about.paragraph2}</p>
|
||||
<p class="mb-3">{about.paragraph3}</p>
|
||||
<p class="mb-3">{about.paragraph4}</p>
|
||||
<p class="mb-3">{about.paragraph5}</p>
|
||||
<p class="mb-3">{about.paragraph6}</p>
|
||||
<p class="mb-3">{about.paragraph7}</p>
|
||||
<p>{about.paragraph8}</p>
|
||||
<div class="text-base xs:text-lg sm:text-xl md:text-2xl text-gray-300 leading-relaxed font-gilroy">
|
||||
<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 class="mt-12 flex flex-wrap 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">
|
||||
<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">
|
||||
<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 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-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="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
Наши города
|
||||
</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">
|
||||
<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">
|
||||
<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-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>
|
||||
</svg>
|
||||
Реквизиты
|
||||
@ -63,14 +53,14 @@ const about = await sanityClient.fetch(`*[_type == "about"][0]{
|
||||
</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) => (
|
||||
<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 h-32 xs:h-36 sm:h-40 md:h-44 lg:h-48 xl:h-52">
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={`О нас изображение ${index + 1}`}
|
||||
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
class="w-full h-full object-cover object-center transition-transform duration-700 group-hover:scale-110"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
</div>
|
||||
@ -85,8 +75,55 @@ const about = await sanityClient.fetch(`*[_type == "about"][0]{
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
/* Фиксированные размеры для изображений в сетке */
|
||||
.grid img {
|
||||
aspect-ratio: 4/3;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Дополнительные адаптивные стили для изображений */
|
||||
@media (max-width: 320px) {
|
||||
.grid > div {
|
||||
height: 7rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 321px) and (max-width: 479px) {
|
||||
.grid > div {
|
||||
height: 8rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) and (max-width: 639px) {
|
||||
.grid > div {
|
||||
height: 9rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 640px) and (max-width: 767px) {
|
||||
.grid > div {
|
||||
height: 10rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.grid > div {
|
||||
height: 11rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) and (max-width: 1279px) {
|
||||
.grid > div {
|
||||
height: 12rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.grid > div {
|
||||
height: 13rem !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -10,7 +10,7 @@ const { items } = Astro.props;
|
||||
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
|
||||
class="flex flex-wrap items-center space-x-2 text-sm text-gray-600"
|
||||
itemscope
|
||||
|
@ -108,7 +108,7 @@ const sectionData = {
|
||||
<svg class="w-6 h-6 text-blue-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
||||
</svg>
|
||||
<span class="text-blue-300 font-gilroy text-lg">Все документы сертифицированы и соответствуют государственным стандартам</span>
|
||||
<span class="text-blue-300 font-gilroy text-lg">Вся продукция сертифицирована и соответствует государственным стандартам</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,12 +1,12 @@
|
||||
<!-- Плавающая кнопка 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
|
||||
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="Часто задаваемые вопросы"
|
||||
>
|
||||
<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"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -24,7 +24,7 @@
|
||||
<!-- Тултип -->
|
||||
<div
|
||||
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>
|
||||
@ -34,17 +34,17 @@
|
||||
<!-- Модальное окно FAQ -->
|
||||
<div
|
||||
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
|
||||
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
|
||||
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
|
||||
class="w-5 h-5"
|
||||
class="w-4 h-4 xs:w-5 xs:h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -59,48 +59,48 @@
|
||||
</svg>
|
||||
</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>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-4 xs:space-y-6">
|
||||
<!-- Вопрос 1 -->
|
||||
<div class="bg-gray-800 rounded-2xl p-6 border border-gray-700">
|
||||
<h3 class="text-xl font-semibold text-yellow-400 mb-3 font-gilroy">
|
||||
<div class="bg-gray-800 rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-gray-700">
|
||||
<h3 class="text-lg xs:text-xl font-semibold text-yellow-400 mb-2 xs:mb-3 font-gilroy">
|
||||
Какие драгоценные металлы вы предлагаете?
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<!-- Вопрос 2 -->
|
||||
<div class="bg-gray-800 rounded-2xl p-6 border border-gray-700">
|
||||
<h3 class="text-xl font-semibold text-yellow-400 mb-3 font-gilroy">
|
||||
<div class="bg-gray-800 rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-gray-700">
|
||||
<h3 class="text-lg xs:text-xl font-semibold text-yellow-400 mb-2 xs:mb-3 font-gilroy">
|
||||
Какова чистота ваших металлов?
|
||||
</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 пробы. Каждая партия сопровождается сертификатом качества.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Вопрос 3 -->
|
||||
<div class="bg-gray-800 rounded-2xl p-6 border border-gray-700">
|
||||
<h3 class="text-xl font-semibold text-yellow-400 mb-3 font-gilroy">
|
||||
<div class="bg-gray-800 rounded-xl xs:rounded-2xl p-4 xs:p-6 border border-gray-700">
|
||||
<h3 class="text-lg xs:text-xl font-semibold text-yellow-400 mb-2 xs:mb-3 font-gilroy">
|
||||
Как быстро происходит доставка?
|
||||
</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 дней в зависимости от региона. Все грузы застрахованы и отслеживаются.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 text-center">
|
||||
<div class="mt-6 xs:mt-8 text-center">
|
||||
<a
|
||||
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>
|
||||
</svg>
|
||||
Все вопросы и ответы
|
||||
|
@ -1,6 +1,6 @@
|
||||
<footer
|
||||
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">
|
||||
@ -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="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 class="flex items-center mb-8">
|
||||
<img src="/logo.svg" alt="Логотип" class="h-16 mr-6" />
|
||||
<h3 class="text-4xl font-bold font-gilroy">ООО «ДМДК»</h3>
|
||||
<div class="flex items-center mb-6 xs:mb-8">
|
||||
<img src="/logo.svg" alt="Логотип" class="h-12 xs:h-14 sm:h-16 mr-4 xs:mr-6" />
|
||||
<h3 class="text-2xl xs:text-3xl sm:text-4xl font-bold font-gilroy">ООО «ДМДК»</h3>
|
||||
</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 />
|
||||
<span class="text-yellow-400 font-semibold">09:00 - 21:00</span>
|
||||
</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="/#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>
|
||||
@ -35,16 +35,16 @@
|
||||
</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="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="flex items-center 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">
|
||||
<img src="/icons/phone.svg" alt="Позвонить" class="h-6 w-6" />
|
||||
<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-3 xs:mb-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-5 w-5 xs:h-6 xs:w-6" />
|
||||
</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 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:+79266646246" class="block hover:text-yellow-400 transition-colors">+7 (926) 664-62-46</a>
|
||||
</div>
|
||||
@ -52,43 +52,43 @@
|
||||
</div>
|
||||
|
||||
<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="flex items-center 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">
|
||||
<img src="/icons/email.svg" alt="Написать" class="h-6 w-6" />
|
||||
<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-3 xs:mb-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-5 w-5 xs:h-6 xs:w-6" />
|
||||
</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>
|
||||
<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
|
||||
</a>
|
||||
</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
|
||||
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
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Нижняя часть -->
|
||||
<div class="mt-16 pt-8 border-t border-gray-700">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center">
|
||||
<div class="text-gray-400 font-gilroy mb-4 md:mb-0">
|
||||
<div class="mt-12 xs:mt-16 pt-6 xs:pt-8 border-t border-gray-700">
|
||||
<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 text-sm xs:text-base text-center sm:text-left">
|
||||
© 2024 ООО «ДМДК». Все права защищены.
|
||||
</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>
|
||||
</div>
|
||||
|
@ -62,11 +62,11 @@
|
||||
</div>
|
||||
|
||||
<header
|
||||
class="fixed text-white 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-4 py-3 lg:px-6 lg:py-4 bg-black bg-opacity-70 backdrop-blur-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">
|
||||
<img src="/logo.svg" alt="Логотип" class="h-8 lg:h-12" />
|
||||
<span class="ml-2 font-bold text-lg lg:text-2xl font-gilroy">
|
||||
<a href="/" class="flex items-center min-w-0 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 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>
|
||||
</a>
|
||||
@ -122,16 +122,22 @@
|
||||
|
||||
<!-- Кнопка "Оставить заявку" -->
|
||||
<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>
|
||||
</nav>
|
||||
|
||||
<div class="lg:hidden">
|
||||
<button id="menu-toggle" class="focus:outline-none">
|
||||
<!-- Кнопка мобильного меню -->
|
||||
<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">
|
||||
<svg
|
||||
class="w-8 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"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -149,16 +155,46 @@
|
||||
|
||||
<div
|
||||
id="mobile-menu"
|
||||
class="hidden fixed inset-x-0 top-0 pt-20 p-4 bg-black bg-opacity-90 backdrop-blur-sm text-white flex flex-col items-center space-y-4 transform transition-transform duration-300 ease-in-out z-40"
|
||||
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"
|
||||
>
|
||||
<a href="/#about" class="text-lg font-gilroy hover:text-yellow-400 transition-colors">О НАС</a>
|
||||
<a href="/#products" class="text-lg font-gilroy hover:text-yellow-400 transition-colors">ПРОДУКЦИЯ</a>
|
||||
<a href="/blog" class="text-lg font-gilroy hover:text-yellow-400 transition-colors">БЛОГ</a>
|
||||
<a href="/faq" class="text-lg font-gilroy hover:text-yellow-400 transition-colors">FAQ</a>
|
||||
<a href="/#contacts" class="text-lg font-gilroy hover:text-yellow-400 transition-colors">КОНТАКТЫ</a>
|
||||
<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-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>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Логотип в мобильном меню -->
|
||||
<div class="flex items-center mb-4 xs:mb-6">
|
||||
<img src="/logo.svg" alt="Логотип" class="h-8 xs:h-10 sm:h-12" />
|
||||
<span class="ml-2 xs:ml-3 font-bold text-lg xs:text-xl sm:text-2xl font-gilroy">ООО «ДМДК»</span>
|
||||
</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
|
||||
class="open-modal mt-4 w-full 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 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>
|
||||
@ -229,10 +265,38 @@
|
||||
// Функционал мобильного меню
|
||||
const menuToggle = document.getElementById("menu-toggle");
|
||||
const mobileMenu = document.getElementById("mobile-menu");
|
||||
const closeMenu = document.getElementById("close-menu");
|
||||
const mobileMenuLinks = document.querySelectorAll(".mobile-menu-link");
|
||||
|
||||
menuToggle?.addEventListener("click", () => {
|
||||
mobileMenu?.classList.toggle("hidden");
|
||||
mobileMenu?.classList.toggle("transform");
|
||||
mobileMenu?.classList.toggle("translate-y-full");
|
||||
// Функция для открытия мобильного меню
|
||||
function openMobileMenu() {
|
||||
mobileMenu?.classList.remove("translate-y-full");
|
||||
mobileMenu?.classList.add("translate-y-0");
|
||||
document.body.style.overflow = "hidden"; // Блокируем скролл
|
||||
}
|
||||
|
||||
// Функция для закрытия мобильного меню
|
||||
function closeMobileMenu() {
|
||||
mobileMenu?.classList.add("translate-y-full");
|
||||
mobileMenu?.classList.remove("translate-y-0");
|
||||
document.body.style.overflow = ""; // Разблокируем скролл
|
||||
}
|
||||
|
||||
// Открытие мобильного меню
|
||||
menuToggle?.addEventListener("click", openMobileMenu);
|
||||
|
||||
// Закрытие мобильного меню по кнопке закрытия
|
||||
closeMenu?.addEventListener("click", closeMobileMenu);
|
||||
|
||||
// Закрытие мобильного меню при клике на ссылку
|
||||
mobileMenuLinks.forEach((link) => {
|
||||
link.addEventListener("click", closeMobileMenu);
|
||||
});
|
||||
|
||||
// Закрытие мобильного меню при изменении размера экрана на десктопный
|
||||
window.addEventListener("resize", () => {
|
||||
if (window.innerWidth >= 1028) { // lg breakpoint
|
||||
closeMobileMenu();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<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');"
|
||||
>
|
||||
<!-- Градиентный оверлей -->
|
||||
@ -7,30 +7,30 @@
|
||||
|
||||
<!-- Декоративные элементы -->
|
||||
<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 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 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-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 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">
|
||||
<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 text-gradient">высшей пробы</span>
|
||||
</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>
|
||||
</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
|
||||
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>
|
||||
</svg>
|
||||
Оставить заявку
|
||||
@ -38,9 +38,9 @@
|
||||
|
||||
<a
|
||||
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>
|
||||
</svg>
|
||||
Наша продукция
|
||||
@ -48,46 +48,26 @@
|
||||
</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="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="text-4xl lg:text-5xl font-bold text-yellow-400 font-nevduplenysh mb-2">15+</div>
|
||||
<div class="text-white font-gilroy font-medium">лет опыта</div>
|
||||
<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-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-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 text-xs xs:text-sm sm:text-base">лет опыта</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="text-4xl lg:text-5xl font-bold text-yellow-400 font-nevduplenysh mb-2">99.9%</div>
|
||||
<div class="text-white font-gilroy font-medium">чистота металлов</div>
|
||||
<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-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 text-xs xs:text-sm sm:text-base">чистота металлов</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="text-4xl lg:text-5xl font-bold text-yellow-400 font-nevduplenysh mb-2">50+</div>
|
||||
<div class="text-white font-gilroy font-medium">городов</div>
|
||||
<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-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 text-xs xs:text-sm sm:text-base">городов</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="text-4xl lg:text-5xl font-bold text-yellow-400 font-nevduplenysh mb-2">24/7</div>
|
||||
<div class="text-white font-gilroy font-medium">поддержка</div>
|
||||
<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-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 text-xs xs:text-sm sm:text-base">поддержка</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>
|
||||
|
@ -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 top-20 left-20 w-32 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 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-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-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-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 class="container mx-auto px-8 lg:px-24 relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-5xl lg:text-6xl font-bold text-white mb-6 font-nevduplenysh">
|
||||
<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-8 xs:mb-10 sm:mb-12 md:mb-16">
|
||||
<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>
|
||||
<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>
|
||||
</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="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="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-xl xs:rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<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">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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-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>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-white mb-4 font-gilroy">Экспертный блог</h3>
|
||||
<p class="text-gray-300 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">
|
||||
<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-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 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>
|
||||
</svg>
|
||||
</a>
|
||||
@ -42,19 +42,19 @@
|
||||
</div>
|
||||
|
||||
<!-- 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="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="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-xl xs:rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<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">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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-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>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-white mb-4 font-gilroy">Вопросы и ответы</h3>
|
||||
<p class="text-gray-300 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">
|
||||
<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-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 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>
|
||||
</svg>
|
||||
</a>
|
||||
@ -62,20 +62,20 @@
|
||||
</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="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="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-xl xs:rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<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">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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-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="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-white mb-4 font-gilroy">Региональная сеть</h3>
|
||||
<p class="text-gray-300 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">
|
||||
<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-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 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>
|
||||
</svg>
|
||||
</a>
|
||||
@ -83,19 +83,19 @@
|
||||
</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="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="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-xl xs:rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<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">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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-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>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-white mb-4 font-gilroy">Документооборот</h3>
|
||||
<p class="text-gray-300 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">
|
||||
<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-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 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>
|
||||
</svg>
|
||||
</a>
|
||||
@ -104,12 +104,12 @@
|
||||
</div>
|
||||
|
||||
<!-- Дополнительная информация -->
|
||||
<div class="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">
|
||||
<svg class="w-5 h-5 text-yellow-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="mt-8 xs:mt-10 sm:mt-12 md:mt-16 text-center">
|
||||
<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-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>
|
||||
</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>
|
||||
|
@ -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 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">
|
||||
<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>
|
||||
|
||||
<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) => (
|
||||
<div
|
||||
class={`group relative rounded-3xl shadow-2xl overflow-hidden transition-all duration-500 hover:transform hover:scale-105 ${
|
||||
index === categories.length - 1 ? "lg:col-span-3" : ""
|
||||
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 ? "xl:col-span-3" : ""
|
||||
}`}
|
||||
style={`background: linear-gradient(135deg, ${category.color}, ${category.color}dd); min-height: ${
|
||||
300 + category.elements.length * 18
|
||||
280 + category.elements.length * 15
|
||||
}px;`}
|
||||
>
|
||||
<!-- Градиентный оверлей -->
|
||||
<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) => (
|
||||
<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);`}
|
||||
>
|
||||
<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}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 p-8 h-full flex flex-col justify-between">
|
||||
<div class="pr-20">
|
||||
<h3 class="text-3xl font-bold mb-6 text-white font-nevduplenysh break-words leading-tight">
|
||||
<div class="relative z-10 p-4 xs:p-6 sm:p-8 h-full flex flex-col justify-between">
|
||||
<div class="pr-16 xs:pr-20">
|
||||
<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()}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto">
|
||||
<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}')`}
|
||||
>
|
||||
Показать товары
|
||||
<svg
|
||||
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"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -94,23 +94,23 @@ const categories =
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div id={`dropdown-${category.slug.current}`} class="mt-6 hidden">
|
||||
<div class="bg-black/30 backdrop-blur-sm rounded-2xl p-6 border border-white/10">
|
||||
<ul class="text-lg space-y-3 text-white font-gilroy">
|
||||
<div id={`dropdown-${category.slug.current}`} class="mt-4 xs:mt-6 hidden">
|
||||
<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-base xs:text-lg space-y-2 xs:space-y-3 text-white font-gilroy">
|
||||
{category.products.map((product) => (
|
||||
<li class="group/item">
|
||||
<a
|
||||
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">
|
||||
<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>
|
||||
</svg>
|
||||
{product.title}
|
||||
<span class="text-sm xs:text-base">{product.title}</span>
|
||||
</div>
|
||||
{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}
|
||||
</p>
|
||||
)}
|
||||
@ -151,7 +151,7 @@ const categories =
|
||||
buttons.forEach((button) => {
|
||||
(button as HTMLElement).onclick = function (e) {
|
||||
e.preventDefault();
|
||||
const categorySlug = this.getAttribute("onclick")?.match(/'([^']+)'/)?.[1];
|
||||
const categorySlug = (this as HTMLElement).getAttribute("onclick")?.match(/'([^']+)'/)?.[1];
|
||||
if (categorySlug) {
|
||||
(window as any).toggleDropdown(categorySlug);
|
||||
}
|
||||
|
@ -1,10 +1,10 @@
|
||||
<button
|
||||
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="Прокрутить наверх"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 mx-auto"
|
||||
class="w-5 h-5 xs:w-6 xs:h-6 mx-auto"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
@ -77,7 +77,7 @@ const allKeywords = `${commonKeywords}, ${silverKeywords}, ${goldKeywords}`;
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta
|
||||
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 -->
|
||||
@ -100,7 +100,7 @@ const allKeywords = `${commonKeywords}, ${silverKeywords}, ${goldKeywords}`;
|
||||
"logo": "https://ooodmdk.ru/logo.svg",
|
||||
"contactPoint": {
|
||||
"@type": "ContactPoint",
|
||||
"telephone": "+7-XXX-XXX-XXXX",
|
||||
"telephone": "+7-925-104-50-50",
|
||||
"contactType": "customer service",
|
||||
"areaServed": "RU",
|
||||
"availableLanguage": "Russian"
|
||||
@ -121,10 +121,146 @@ const allKeywords = `${commonKeywords}, ${silverKeywords}, ${goldKeywords}`;
|
||||
<slot name="head" />
|
||||
</head>
|
||||
<body class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white">
|
||||
<!-- Загрузчик страницы -->
|
||||
<div id="page-loader" class="fixed inset-0 bg-gradient-to-br from-gray-900 via-gray-800 to-black z-50 flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<!-- Логотип -->
|
||||
<div class="mb-8">
|
||||
<img src="/logo.svg" alt="ООО «ДМДК»" class="h-16 xs:h-20 sm:h-24 md:h-28 lg:h-32 mx-auto animate-logo-pulse" />
|
||||
</div>
|
||||
|
||||
<!-- Название компании -->
|
||||
<h1 class="text-2xl xs:text-3xl sm:text-4xl md:text-5xl font-bold text-white font-nevduplenysh mb-6 xs:mb-8 animate-fade-in">
|
||||
ООО «ДМДК»
|
||||
</h1>
|
||||
|
||||
<!-- Подзаголовок -->
|
||||
<p class="text-gray-300 text-sm xs:text-base lg:text-lg font-gilroy mb-8 animate-fade-in" style="animation-delay: 0.3s;">
|
||||
Драгоценные металлы высшей пробы
|
||||
</p>
|
||||
|
||||
<!-- Анимированные точки загрузки -->
|
||||
<div class="flex justify-center space-x-2 mb-8">
|
||||
<div class="w-3 h-3 xs:w-4 xs:h-4 bg-yellow-400 rounded-full animate-enhanced-bounce"></div>
|
||||
<div class="w-3 h-3 xs:w-4 xs:h-4 bg-yellow-400 rounded-full animate-enhanced-bounce" style="animation-delay: 0.1s;"></div>
|
||||
<div class="w-3 h-3 xs:w-4 xs:h-4 bg-yellow-400 rounded-full animate-enhanced-bounce" style="animation-delay: 0.2s;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Прогресс бар -->
|
||||
<div class="w-64 xs:w-80 sm:w-96 mx-auto">
|
||||
<div class="bg-gray-700 rounded-full h-2 xs:h-3 overflow-hidden shadow-inner">
|
||||
<div id="progress-bar" class="progress-shimmer h-full rounded-full transition-all duration-300 ease-out" style="width: 0%"></div>
|
||||
</div>
|
||||
<p id="loading-text" class="text-gray-300 text-sm xs:text-base mt-4 font-gilroy">Загрузка...</p>
|
||||
</div>
|
||||
|
||||
<!-- Декоративные элементы -->
|
||||
<div class="absolute inset-0 opacity-10 pointer-events-none">
|
||||
<div class="absolute top-1/4 left-1/4 w-32 h-32 xs:w-48 xs:h-48 bg-yellow-500 rounded-full blur-3xl animate-pulse"></div>
|
||||
<div class="absolute bottom-1/4 right-1/4 w-40 h-40 xs:w-60 xs:h-60 bg-yellow-400 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
|
||||
<div class="absolute top-1/2 left-1/3 w-24 h-24 xs:w-36 xs:h-36 bg-yellow-300 rounded-full blur-2xl animate-pulse" style="animation-delay: 1s;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="page-content" style="display: none;">
|
||||
<Header />
|
||||
<slot />
|
||||
<FloatingFAQ />
|
||||
<Up />
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
<!-- Скрипт для управления загрузчиком -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const loader = document.getElementById('page-loader');
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
const loadingText = document.getElementById('loading-text');
|
||||
let progress = 0;
|
||||
|
||||
// Массив сообщений для загрузки
|
||||
const loadingMessages = [
|
||||
'Загрузка...',
|
||||
'Подготовка драгоценных металлов...',
|
||||
'Инициализация системы...',
|
||||
'Проверка качества...',
|
||||
'Почти готово...'
|
||||
];
|
||||
|
||||
let messageIndex = 0;
|
||||
|
||||
// Функция для скрытия загрузчика
|
||||
function hideLoader() {
|
||||
const pageContent = document.getElementById('page-content');
|
||||
loadingText.textContent = 'Готово!';
|
||||
|
||||
setTimeout(() => {
|
||||
loader.style.opacity = '0';
|
||||
loader.style.transform = 'scale(0.95)';
|
||||
loader.style.transition = 'opacity 0.5s ease-out, transform 0.5s ease-out';
|
||||
|
||||
setTimeout(() => {
|
||||
loader.style.display = 'none';
|
||||
pageContent.style.display = 'block';
|
||||
document.body.style.overflow = 'auto';
|
||||
}, 500);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// Анимация прогресс-бара
|
||||
const progressInterval = setInterval(() => {
|
||||
progress += Math.random() * 12 + 3; // Случайный прирост от 3 до 15%
|
||||
if (progress > 100) progress = 100;
|
||||
|
||||
progressBar.style.width = progress + '%';
|
||||
|
||||
// Обновляем сообщение в зависимости от прогресса
|
||||
if (progress >= 20 && messageIndex === 0) {
|
||||
messageIndex = 1;
|
||||
loadingText.textContent = loadingMessages[messageIndex];
|
||||
} else if (progress >= 40 && messageIndex === 1) {
|
||||
messageIndex = 2;
|
||||
loadingText.textContent = loadingMessages[messageIndex];
|
||||
} else if (progress >= 60 && messageIndex === 2) {
|
||||
messageIndex = 3;
|
||||
loadingText.textContent = loadingMessages[messageIndex];
|
||||
} else if (progress >= 80 && messageIndex === 3) {
|
||||
messageIndex = 4;
|
||||
loadingText.textContent = loadingMessages[messageIndex];
|
||||
}
|
||||
|
||||
if (progress >= 100) {
|
||||
clearInterval(progressInterval);
|
||||
hideLoader();
|
||||
}
|
||||
}, 80);
|
||||
|
||||
// Блокируем прокрутку во время загрузки и скрываем контент
|
||||
document.body.style.overflow = 'hidden';
|
||||
const pageContent = document.getElementById('page-content');
|
||||
pageContent.style.display = 'none';
|
||||
|
||||
// Принудительно скрыть загрузчик через 4 секунды на случай медленной загрузки
|
||||
setTimeout(() => {
|
||||
if (loader.style.display !== 'none') {
|
||||
progress = 100;
|
||||
progressBar.style.width = '100%';
|
||||
clearInterval(progressInterval);
|
||||
hideLoader();
|
||||
}
|
||||
}, 4000);
|
||||
|
||||
// Скрыть загрузчик когда страница полностью загружена
|
||||
window.addEventListener('load', function() {
|
||||
if (progress < 100) {
|
||||
progress = 100;
|
||||
progressBar.style.width = '100%';
|
||||
clearInterval(progressInterval);
|
||||
hideLoader();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -6,7 +6,7 @@ import Layout from "../layouts/Layout.astro";
|
||||
title="Страница не найдена - ООО ДМДК"
|
||||
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">
|
||||
<!-- Основной заголовок страницы -->
|
||||
<h1 class="text-6xl lg:text-8xl font-bold mb-8 text-yellow-500 font-nevduplenysh">404</h1>
|
||||
|
@ -86,25 +86,25 @@ const analyticsScript = `
|
||||
<Breadcrumbs items={breadcrumbItems} />
|
||||
|
||||
<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}
|
||||
>
|
||||
<!-- Декоративные элементы -->
|
||||
<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 bottom-20 right-20 w-40 h-40 bg-yellow-400 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-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 class="relative z-10 max-w-7xl mx-auto">
|
||||
<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}
|
||||
</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="overflow-hidden rounded-3xl shadow-2xl">
|
||||
<div class="overflow-hidden rounded-2xl xs:rounded-3xl shadow-2xl">
|
||||
<OptimizedImage
|
||||
src={product.imageUrl}
|
||||
alt={product.title}
|
||||
@ -115,19 +115,19 @@ const analyticsScript = `
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
<div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-700">
|
||||
<h2 class="text-2xl font-bold text-yellow-400 mb-6 font-gilroy">Описание продукта</h2>
|
||||
<p class="text-lg leading-relaxed text-gray-300 font-gilroy">{product.description}</p>
|
||||
<div class="space-y-4 xs:space-y-6 sm:space-y-8">
|
||||
<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-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-base xs:text-lg leading-relaxed text-gray-300 font-gilroy">{product.description}</p>
|
||||
</div>
|
||||
|
||||
{
|
||||
product.descriptions && product.descriptions.length > 0 && (
|
||||
<div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-700">
|
||||
<h2 class="text-2xl font-bold text-yellow-400 mb-6 font-gilroy">Подробное описание</h2>
|
||||
<div class="space-y-4">
|
||||
<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-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-3 xs:space-y-4">
|
||||
{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>
|
||||
@ -136,13 +136,13 @@ const analyticsScript = `
|
||||
|
||||
{
|
||||
product.items && product.items.length > 0 && (
|
||||
<div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-700">
|
||||
<h2 class="text-2xl font-bold text-yellow-400 mb-6 font-gilroy">Характеристики</h2>
|
||||
<ul class="space-y-3">
|
||||
<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-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-2 xs:space-y-3">
|
||||
{product.items.map((item) => (
|
||||
<li class="flex items-center space-x-3">
|
||||
<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>
|
||||
))}
|
||||
</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">
|
||||
<h3 class="text-xl font-bold text-yellow-400 mb-4 font-gilroy">Заинтересовал этот продукт?</h3>
|
||||
<p class="text-gray-300 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">
|
||||
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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-lg xs:text-xl font-bold text-yellow-400 mb-3 xs:mb-4 font-gilroy">Заинтересовал этот продукт?</h3>
|
||||
<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-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-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>
|
||||
</svg>
|
||||
Заказать продукт
|
||||
|
@ -25,7 +25,7 @@ const breadcrumbItems = [
|
||||
</Fragment>
|
||||
|
||||
<!-- 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 top-20 left-20 w-32 h-32 bg-purple-500 rounded-full blur-3xl"></div>
|
||||
|
@ -48,7 +48,7 @@ const articles = [
|
||||
</Fragment>
|
||||
|
||||
<!-- 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 top-20 left-20 w-32 h-32 bg-yellow-500 rounded-full blur-3xl"></div>
|
||||
@ -57,27 +57,27 @@ const articles = [
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</p>
|
||||
|
||||
<!-- Статистика блога -->
|
||||
<div class="mt-16 grid grid-cols-1 md:grid-cols-3 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="text-4xl font-bold text-yellow-400 font-nevduplenysh mb-2">15+</div>
|
||||
<div class="text-white font-gilroy font-medium">экспертных статей</div>
|
||||
<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-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-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 text-sm xs:text-base">экспертных статей</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="text-4xl font-bold text-yellow-400 font-nevduplenysh mb-2">5000+</div>
|
||||
<div class="text-white font-gilroy font-medium">читателей в месяц</div>
|
||||
<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-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 text-sm xs:text-base">читателей в месяц</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="text-4xl font-bold text-yellow-400 font-nevduplenysh mb-2">24/7</div>
|
||||
<div class="text-white font-gilroy font-medium">обновления</div>
|
||||
<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-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 text-sm xs:text-base">обновления</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -86,7 +86,7 @@ const articles = [
|
||||
<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 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="text-center mb-16">
|
||||
<h2 class="text-4xl lg:text-6xl font-bold text-white mb-6 font-nevduplenysh">
|
||||
<div class="text-center mb-12 xs:mb-16">
|
||||
<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>
|
||||
<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>
|
||||
</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) => (
|
||||
<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-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">
|
||||
<span class={`inline-block px-4 py-2 rounded-full text-sm font-semibold text-white bg-gradient-to-r ${article.categoryColor} shadow-lg`}>
|
||||
<div class="mb-3 xs:mb-4">
|
||||
<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}
|
||||
</span>
|
||||
</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">
|
||||
{article.title}
|
||||
</a>
|
||||
</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}
|
||||
</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">
|
||||
<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>
|
||||
</svg>
|
||||
{article.publishDate}
|
||||
</span>
|
||||
<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>
|
||||
</svg>
|
||||
{article.readTime}
|
||||
@ -151,32 +151,32 @@ const articles = [
|
||||
<!-- Кнопка чтения -->
|
||||
<a
|
||||
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>
|
||||
<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>
|
||||
</svg>
|
||||
</a>
|
||||
</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>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- Call to Action -->
|
||||
<div class="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">
|
||||
<h3 class="text-3xl lg:text-4xl font-bold text-white mb-6 font-nevduplenysh">
|
||||
<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-2xl xs:rounded-3xl p-8 xs:p-12 border border-gray-700/50">
|
||||
<h3 class="text-2xl xs:text-3xl lg:text-4xl font-bold text-white mb-4 xs:mb-6 font-nevduplenysh">
|
||||
ОСТАЛИСЬ ВОПРОСЫ?
|
||||
</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>
|
||||
<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">
|
||||
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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-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>
|
||||
</svg>
|
||||
Задать вопрос эксперту
|
||||
|
@ -25,7 +25,7 @@ const breadcrumbItems = [
|
||||
</Fragment>
|
||||
|
||||
<!-- 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 top-20 left-20 w-32 h-32 bg-blue-500 rounded-full blur-3xl"></div>
|
||||
|
@ -25,7 +25,7 @@ const breadcrumbItems = [
|
||||
</Fragment>
|
||||
|
||||
<!-- 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 top-20 left-20 w-32 h-32 bg-green-500 rounded-full blur-3xl"></div>
|
||||
|
@ -17,11 +17,11 @@ const breadcrumbItems = [
|
||||
const cities = [
|
||||
{
|
||||
name: "Москва",
|
||||
subtitle: "ГОЛОВНОЙ ОФИС",
|
||||
region: "Центральный ФО",
|
||||
address: "ул. Большая Ордынка, д. 40, стр. 4",
|
||||
phone: "+7 (495) 123-45-67",
|
||||
email: "moscow@dmdк.ru",
|
||||
manager: "Иванов Алексей Петрович",
|
||||
address: "г. Москва, ВН. ТЕР. Г. МУНИЦИПАЛЬНЫЙ ОКРУГ ТАГАНСКИЙ, НАБ КОТЕЛЬНИЧЕСКАЯ, Д.1/15 К.А. ПОМЕЩ. 8/1",
|
||||
phone: "+7 (925) 104-50-50",
|
||||
email: "ooo.dmdk@mail.ru",
|
||||
services: ["Аффинаж", "Торговля", "Консультации", "Логистика"],
|
||||
workingHours: "Пн-Пт: 9:00-18:00",
|
||||
isHeadOffice: true
|
||||
@ -29,51 +29,41 @@ const cities = [
|
||||
{
|
||||
name: "Санкт-Петербург",
|
||||
region: "Северо-Западный ФО",
|
||||
address: "Невский проспект, д. 123, оф. 45",
|
||||
phone: "+7 (812) 987-65-43",
|
||||
email: "spb@dmdк.ru",
|
||||
manager: "Петрова Елена Сергеевна",
|
||||
services: ["Торговля", "Консультации", "Логистика"],
|
||||
phone: "+7 (925) 104-50-50",
|
||||
email: "ooo.dmdk@mail.ru",
|
||||
services: ["Аффинаж", "Торговля", "Консультации", "Логистика"],
|
||||
workingHours: "Пн-Пт: 9:00-18:00"
|
||||
},
|
||||
{
|
||||
name: "Екатеринбург",
|
||||
region: "Уральский ФО",
|
||||
address: "ул. Ленина, д. 78, оф. 12",
|
||||
phone: "+7 (343) 555-12-34",
|
||||
email: "ekb@dmdк.ru",
|
||||
manager: "Сидоров Михаил Владимирович",
|
||||
services: ["Торговля", "Консультации"],
|
||||
workingHours: "Пн-Пт: 10:00-19:00"
|
||||
phone: "+7 (925) 104-50-50",
|
||||
email: "ooo.dmdk@mail.ru",
|
||||
services: ["Аффинаж", "Торговля", "Консультации", "Логистика"],
|
||||
workingHours: "Пн-Пт: 9:00-18:00"
|
||||
},
|
||||
{
|
||||
name: "Новосибирск",
|
||||
region: "Сибирский ФО",
|
||||
address: "Красный проспект, д. 56, стр. 2",
|
||||
phone: "+7 (383) 444-77-88",
|
||||
email: "nsk@dmdк.ru",
|
||||
manager: "Козлова Анна Дмитриевна",
|
||||
services: ["Торговля", "Консультации"],
|
||||
phone: "+7 (925) 104-50-50",
|
||||
email: "ooo.dmdk@mail.ru",
|
||||
services: ["Аффинаж", "Торговля", "Консультации", "Логистика"],
|
||||
workingHours: "Пн-Пт: 9:00-18:00"
|
||||
},
|
||||
{
|
||||
name: "Краснодар",
|
||||
region: "Южный ФО",
|
||||
address: "ул. Красная, д. 89, оф. 301",
|
||||
phone: "+7 (861) 333-22-11",
|
||||
email: "krd@dmdк.ru",
|
||||
manager: "Волков Дмитрий Александрович",
|
||||
services: ["Торговля", "Консультации"],
|
||||
phone: "+7 (925) 104-50-50",
|
||||
email: "ooo.dmdk@mail.ru",
|
||||
services: ["Аффинаж", "Торговля", "Консультации", "Логистика"],
|
||||
workingHours: "Пн-Пт: 9:00-18:00"
|
||||
},
|
||||
{
|
||||
name: "Казань",
|
||||
region: "Приволжский ФО",
|
||||
address: "ул. Баумана, д. 34, оф. 56",
|
||||
phone: "+7 (843) 222-33-44",
|
||||
email: "kazan@dmdк.ru",
|
||||
manager: "Абдуллин Рустем Маратович",
|
||||
services: ["Торговля", "Консультации"],
|
||||
phone: "+7 (925) 104-50-50",
|
||||
email: "ooo.dmdk@mail.ru",
|
||||
services: ["Аффинаж", "Торговля", "Консультации", "Логистика"],
|
||||
workingHours: "Пн-Пт: 9:00-18:00"
|
||||
}
|
||||
];
|
||||
@ -83,37 +73,37 @@ const deliveryInfo = [
|
||||
region: "Центральный ФО",
|
||||
deliveryTime: "1-2 дня",
|
||||
cost: "Бесплатно от 100 000 ₽",
|
||||
specialConditions: "Экспресс-доставка в день заказа"
|
||||
specialConditions: "Доставка осуществляется только ФГУП ГЦСС и ООО СФИНКС-СЛ"
|
||||
},
|
||||
{
|
||||
region: "Северо-Западный ФО",
|
||||
deliveryTime: "2-3 дня",
|
||||
cost: "Бесплатно от 150 000 ₽",
|
||||
specialConditions: "Доставка до склада покупателя"
|
||||
specialConditions: "Доставка осуществляется только ФГУП ГЦСС и ООО СФИНКС-СЛ"
|
||||
},
|
||||
{
|
||||
region: "Уральский ФО",
|
||||
deliveryTime: "3-5 дней",
|
||||
cost: "Бесплатно от 200 000 ₽",
|
||||
specialConditions: "Консолидация грузов"
|
||||
specialConditions: "Доставка осуществляется только ФГУП ГЦСС и ООО СФИНКС-СЛ"
|
||||
},
|
||||
{
|
||||
region: "Сибирский ФО",
|
||||
deliveryTime: "5-7 дней",
|
||||
cost: "Бесплатно от 300 000 ₽",
|
||||
specialConditions: "Авиадоставка для срочных заказов"
|
||||
specialConditions: "Доставка осуществляется только ФГУП ГЦСС и ООО СФИНКС-СЛ"
|
||||
},
|
||||
{
|
||||
region: "Южный ФО",
|
||||
deliveryTime: "2-4 дня",
|
||||
cost: "Бесплатно от 150 000 ₽",
|
||||
specialConditions: "Доставка морским транспортом"
|
||||
specialConditions: "Доставка осуществляется только ФГУП ГЦСС и ООО СФИНКС-СЛ"
|
||||
},
|
||||
{
|
||||
region: "Приволжский ФО",
|
||||
deliveryTime: "3-5 дней",
|
||||
cost: "Бесплатно от 200 000 ₽",
|
||||
specialConditions: "Речная логистика"
|
||||
specialConditions: "Доставка осуществляется только ФГУП ГЦСС и ООО СФИНКС-СЛ"
|
||||
}
|
||||
];
|
||||
---
|
||||
@ -129,60 +119,60 @@ const deliveryInfo = [
|
||||
<Breadcrumbs items={breadcrumbItems} />
|
||||
|
||||
<!-- Основной контент -->
|
||||
<main 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">
|
||||
<main class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white py-12 sm:py-16 lg:py-20 px-4 sm:px-6 lg:px-8 xl:px-24 relative overflow-hidden">
|
||||
<!-- Декоративные элементы -->
|
||||
<div class="absolute inset-0 opacity-10">
|
||||
<div class="absolute top-32 left-32 w-64 h-64 bg-yellow-500 rounded-full blur-3xl animate-pulse"></div>
|
||||
<div class="absolute bottom-32 right-32 w-80 h-80 bg-yellow-400 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
|
||||
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-yellow-300 rounded-full blur-3xl animate-pulse opacity-30" style="animation-delay: 4s;"></div>
|
||||
<div class="absolute top-16 sm:top-32 left-8 sm:left-32 w-32 sm:w-64 h-32 sm:h-64 bg-yellow-500 rounded-full blur-3xl animate-pulse"></div>
|
||||
<div class="absolute bottom-16 sm:bottom-32 right-8 sm:right-32 w-40 sm:w-80 h-40 sm:h-80 bg-yellow-400 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
|
||||
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-48 sm:w-96 h-48 sm:h-96 bg-yellow-300 rounded-full blur-3xl animate-pulse opacity-30" style="animation-delay: 4s;"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 max-w-7xl mx-auto space-y-20">
|
||||
<div class="relative z-10 max-w-7xl mx-auto space-y-12 sm:space-y-16 lg:space-y-20">
|
||||
<!-- Заголовок -->
|
||||
<div class="text-center">
|
||||
<h1 class="text-6xl lg:text-8xl font-bold text-yellow-500 mb-8 font-nevduplenysh leading-tight animate-fade-in">
|
||||
<h1 class="text-4xl sm:text-5xl lg:text-6xl xl:text-8xl font-bold text-yellow-500 mb-6 sm:mb-8 font-nevduplenysh leading-tight animate-fade-in">
|
||||
Наши города
|
||||
</h1>
|
||||
<p class="text-xl lg:text-2xl text-gray-300 max-w-4xl mx-auto font-gilroy leading-relaxed">
|
||||
<p class="text-lg sm:text-xl lg:text-2xl text-gray-300 max-w-4xl mx-auto font-gilroy leading-relaxed px-4">
|
||||
География присутствия ООО «ДМДК» охватывает ключевые регионы России.
|
||||
<span class="text-yellow-400 font-semibold">Мы всегда рядом с нашими клиентами.</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- География присутствия -->
|
||||
<section class="bg-black/40 backdrop-blur-sm rounded-3xl p-8 lg:p-12 border border-yellow-500/20 hover:border-yellow-500/40 transition-all duration-500">
|
||||
<h2 class="text-4xl lg:text-5xl font-bold text-yellow-500 mb-12 text-center font-nevduplenysh">
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<div class="text-center mb-12">
|
||||
<p class="text-2xl text-white font-gilroy">
|
||||
ООО «ДМДК» работает в <span class="text-yellow-400 font-bold text-3xl">{cities.length}</span> крупнейших городах России
|
||||
<div class="text-center mb-8 lg:mb-12">
|
||||
<p class="text-xl sm:text-2xl text-white font-gilroy px-4">
|
||||
ООО «ДМДК» работает в <span class="text-yellow-400 font-bold text-2xl sm:text-3xl">{cities.length}</span> крупнейших городах России
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Интерактивная карта-схема -->
|
||||
<div class="relative bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-8 lg:p-12 rounded-2xl border border-gray-700/50 min-h-96">
|
||||
<div class="relative bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-4 sm:p-6 lg:p-8 xl:p-12 rounded-2xl border border-gray-700/50 min-h-96">
|
||||
<div class="text-center">
|
||||
<h3 class="text-3xl font-bold text-yellow-400 mb-8 font-nevduplenysh">Карта России</h3>
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
|
||||
<h3 class="text-2xl sm:text-3xl font-bold text-yellow-400 mb-6 lg:mb-8 font-nevduplenysh">Карта России</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 max-w-5xl mx-auto">
|
||||
{cities.map((city) => (
|
||||
<div class="group bg-gradient-to-br from-gray-700/50 to-gray-800/50 p-4 rounded-xl shadow-lg hover:shadow-yellow-500/20 transition-all duration-300 transform hover:scale-105 border border-gray-600/30 hover:border-yellow-500/50 cursor-pointer">
|
||||
<div class="flex items-center space-x-3 mb-2">
|
||||
<div class={`w-4 h-4 rounded-full ${city.isHeadOffice ? 'bg-gradient-to-r from-yellow-400 to-yellow-600 shadow-lg shadow-yellow-500/50' : 'bg-gradient-to-r from-blue-400 to-blue-600 shadow-lg shadow-blue-500/50'} animate-pulse`}></div>
|
||||
<span class="font-bold text-white text-lg group-hover:text-yellow-400 transition-colors duration-300">{city.name}</span>
|
||||
<div class="group bg-gradient-to-br from-gray-700/50 to-gray-800/50 p-3 sm:p-4 rounded-xl shadow-lg hover:shadow-yellow-500/20 transition-all duration-300 transform hover:scale-105 border border-gray-600/30 hover:border-yellow-500/50 cursor-pointer">
|
||||
<div class="flex items-center space-x-2 sm:space-x-3 mb-2">
|
||||
<div class={`w-3 h-3 sm:w-4 sm:h-4 rounded-full ${city.isHeadOffice ? 'bg-gradient-to-r from-yellow-400 to-yellow-600 shadow-lg shadow-yellow-500/50' : 'bg-gradient-to-r from-blue-400 to-blue-600 shadow-lg shadow-blue-500/50'} animate-pulse`}></div>
|
||||
<span class="font-bold text-white text-base sm:text-lg group-hover:text-yellow-400 transition-colors duration-300">{city.name}</span>
|
||||
</div>
|
||||
<div class="text-sm text-gray-400 font-gilroy">{city.region}</div>
|
||||
<div class="text-xs sm:text-sm text-gray-400 font-gilroy">{city.region}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div class="mt-12 flex justify-center space-x-8 text-lg font-gilroy">
|
||||
<div class="mt-8 lg:mt-12 flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-8 text-base sm:text-lg font-gilroy">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-4 h-4 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-600 shadow-lg shadow-yellow-500/50"></div>
|
||||
<div class="w-3 h-3 sm:w-4 sm:h-4 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-600 shadow-lg shadow-yellow-500/50"></div>
|
||||
<span class="text-yellow-400 font-semibold">Головной офис</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-4 h-4 rounded-full bg-gradient-to-r from-blue-400 to-blue-600 shadow-lg shadow-blue-500/50"></div>
|
||||
<div class="w-3 h-3 sm:w-4 sm:h-4 rounded-full bg-gradient-to-r from-blue-400 to-blue-600 shadow-lg shadow-blue-500/50"></div>
|
||||
<span class="text-blue-400 font-semibold">Региональное представительство</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -192,90 +182,84 @@ const deliveryInfo = [
|
||||
|
||||
<!-- Контакты региональных представителей -->
|
||||
<section>
|
||||
<h2 class="text-4xl lg:text-5xl font-bold text-yellow-500 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>
|
||||
<div class="grid grid-cols-1 md: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 lg:gap-8">
|
||||
{cities.map((city) => (
|
||||
<div class={`group bg-gradient-to-br from-gray-800/50 to-gray-900/50 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="flex items-center justify-between mb-6">
|
||||
<h3 class="text-2xl font-bold text-white group-hover:text-yellow-400 transition-colors duration-300 font-nevduplenysh">{city.name}</h3>
|
||||
<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 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-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 && (
|
||||
<span class="bg-gradient-to-r from-yellow-500 to-yellow-600 text-black px-3 py-1 rounded-full text-xs font-bold">
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 text-gray-300 font-gilroy">
|
||||
<div class="flex items-start 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">
|
||||
<div class="space-y-3 xs:space-y-4 text-gray-300 font-gilroy">
|
||||
<div class="flex items-start space-x-2 xs:space-x-3">
|
||||
<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="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="text-sm text-gray-400">Регион</div>
|
||||
<div class="text-white font-medium">{city.region}</div>
|
||||
<div class="text-xs xs:text-sm text-gray-400">Регион</div>
|
||||
<div class="text-white font-medium text-sm xs:text-base">{city.region}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start 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">
|
||||
{city.address && (
|
||||
<div class="flex items-start space-x-2 xs:space-x-3">
|
||||
<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>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="text-sm text-gray-400">Адрес</div>
|
||||
<div class="text-white">{city.address}</div>
|
||||
<div class="text-xs xs:text-sm text-gray-400">Адрес</div>
|
||||
<div class="text-white text-sm xs:text-base">{city.address}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="flex items-start 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">
|
||||
|
||||
<div class="flex items-start space-x-2 xs:space-x-3">
|
||||
<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>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="text-sm text-gray-400">Телефон</div>
|
||||
<div class="text-white font-medium">{city.phone}</div>
|
||||
<div class="text-xs xs:text-sm text-gray-400">Телефон</div>
|
||||
<div class="text-white font-medium text-sm xs:text-base">{city.phone}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start 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">
|
||||
<div class="flex items-start space-x-2 xs:space-x-3">
|
||||
<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>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="text-sm text-gray-400">Email</div>
|
||||
<div class="text-white">{city.email}</div>
|
||||
<div class="text-xs xs:text-sm text-gray-400">Email</div>
|
||||
<div class="text-white text-sm xs:text-base">{city.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start 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">
|
||||
<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>
|
||||
<div>
|
||||
<div class="text-sm text-gray-400">Менеджер</div>
|
||||
<div class="text-white">{city.manager}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start 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">
|
||||
<div class="flex items-start space-x-2 xs:space-x-3">
|
||||
<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>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="text-sm text-gray-400">Режим работы</div>
|
||||
<div class="text-white">{city.workingHours}</div>
|
||||
<div class="text-xs xs:text-sm text-gray-400">Режим работы</div>
|
||||
<div class="text-white text-sm xs:text-base">{city.workingHours}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Услуги -->
|
||||
<div class="mt-6 pt-6 border-t border-gray-700/50">
|
||||
<div class="text-sm text-gray-400 mb-3">Услуги</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<div class="mt-4 xs:mt-6 pt-4 xs:pt-6 border-t border-gray-700/50">
|
||||
<div class="text-xs xs:text-sm text-gray-400 mb-2 xs:mb-3">Услуги</div>
|
||||
<div class="flex flex-wrap gap-1.5 xs:gap-2">
|
||||
{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}
|
||||
</span>
|
||||
))}
|
||||
@ -287,62 +271,86 @@ const deliveryInfo = [
|
||||
</section>
|
||||
|
||||
<!-- Условия доставки -->
|
||||
<section class="bg-black/40 backdrop-blur-sm rounded-3xl p-8 lg:p-12 border border-yellow-500/20 hover:border-yellow-500/40 transition-all duration-500">
|
||||
<h2 class="text-4xl lg:text-5xl font-bold text-yellow-500 mb-12 text-center font-nevduplenysh">
|
||||
<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-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>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<!-- Мобильная версия - карточки -->
|
||||
<div class="block lg:hidden space-y-3 xs:space-y-4">
|
||||
{deliveryInfo.map((info, index) => (
|
||||
<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-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-2 xs:space-y-3 text-sm xs:text-base font-gilroy">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-400">Время доставки:</span>
|
||||
<span class="text-white font-medium">{info.deliveryTime}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-start">
|
||||
<span class="text-gray-400">Стоимость:</span>
|
||||
<span class="text-white font-medium text-right">{info.cost}</span>
|
||||
</div>
|
||||
<div class="pt-2 border-t border-gray-700/50">
|
||||
<span class="text-gray-400 block mb-2">Особенности:</span>
|
||||
<span class="text-white text-sm xs:text-base">{info.specialConditions}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- Десктопная версия - таблица -->
|
||||
<div class="hidden lg:block overflow-x-auto">
|
||||
<table class="w-full bg-gradient-to-br from-gray-800/50 to-gray-900/50 rounded-2xl shadow-2xl border border-gray-700/50">
|
||||
<thead class="bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 border-b border-yellow-500/30">
|
||||
<tr>
|
||||
<th class="px-8 py-6 text-left font-bold text-yellow-400 text-lg font-nevduplenysh">Регион</th>
|
||||
<th class="px-8 py-6 text-left font-bold text-yellow-400 text-lg font-nevduplenysh">Время доставки</th>
|
||||
<th class="px-8 py-6 text-left font-bold text-yellow-400 text-lg font-nevduplenysh">Стоимость</th>
|
||||
<th class="px-8 py-6 text-left font-bold text-yellow-400 text-lg font-nevduplenysh">Особенности</th>
|
||||
<th class="px-6 xl:px-8 py-4 xl:py-6 text-left font-bold text-yellow-400 text-base xl:text-lg font-nevduplenysh">Регион</th>
|
||||
<th class="px-6 xl:px-8 py-4 xl:py-6 text-left font-bold text-yellow-400 text-base xl:text-lg font-nevduplenysh">Время доставки</th>
|
||||
<th class="px-6 xl:px-8 py-4 xl:py-6 text-left font-bold text-yellow-400 text-base xl:text-lg font-nevduplenysh">Стоимость</th>
|
||||
<th class="px-6 xl:px-8 py-4 xl:py-6 text-left font-bold text-yellow-400 text-base xl:text-lg font-nevduplenysh">Особенности</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{deliveryInfo.map((info, index) => (
|
||||
<tr class={`${index % 2 === 0 ? 'bg-gray-800/30' : 'bg-gray-900/30'} hover:bg-yellow-500/10 transition-colors duration-300 border-b border-gray-700/30`}>
|
||||
<td class="px-8 py-6 font-bold text-white font-gilroy">{info.region}</td>
|
||||
<td class="px-8 py-6 text-gray-300 font-gilroy">{info.deliveryTime}</td>
|
||||
<td class="px-8 py-6 text-gray-300 font-gilroy">{info.cost}</td>
|
||||
<td class="px-8 py-6 text-gray-300 font-gilroy">{info.specialConditions}</td>
|
||||
<td class="px-6 xl:px-8 py-4 xl:py-6 font-bold text-white font-gilroy text-sm xl:text-base">{info.region}</td>
|
||||
<td class="px-6 xl:px-8 py-4 xl:py-6 text-gray-300 font-gilroy text-sm xl:text-base">{info.deliveryTime}</td>
|
||||
<td class="px-6 xl:px-8 py-4 xl:py-6 text-gray-300 font-gilroy text-sm xl:text-base">{info.cost}</td>
|
||||
<td class="px-6 xl:px-8 py-4 xl:py-6 text-gray-300 font-gilroy text-sm xl:text-base">{info.specialConditions}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 border-l-4 border-yellow-500 p-8 rounded-2xl backdrop-blur-sm">
|
||||
<h3 class="text-2xl font-bold text-yellow-400 mb-6 font-nevduplenysh flex items-center">
|
||||
<svg class="w-8 h-8 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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-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-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>
|
||||
</svg>
|
||||
Важная информация
|
||||
</h3>
|
||||
<ul class="space-y-3 text-white font-gilroy text-lg">
|
||||
<li class="flex items-start space-x-3">
|
||||
<svg class="w-6 h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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-2 xs:space-x-3">
|
||||
<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>
|
||||
</svg>
|
||||
<span>Все поставки драгоценных металлов осуществляются с соблюдением требований безопасности</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<svg class="w-6 h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<li class="flex items-start space-x-2 xs:space-x-3">
|
||||
<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>
|
||||
</svg>
|
||||
<span>Доставка производится только в рабочие дни с 9:00 до 18:00</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<svg class="w-6 h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<li class="flex items-start space-x-2 xs:space-x-3">
|
||||
<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>
|
||||
</svg>
|
||||
<span>Для крупных заказов возможна индивидуальная схема логистики</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<svg class="w-6 h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<li class="flex items-start space-x-2 xs:space-x-3">
|
||||
<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>
|
||||
</svg>
|
||||
<span>Все грузы застрахованы на полную стоимость</span>
|
||||
@ -351,45 +359,7 @@ const deliveryInfo = [
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Партнерская сеть -->
|
||||
<section class="bg-black/40 backdrop-blur-sm rounded-3xl p-8 lg:p-12 border border-yellow-500/20 hover:border-yellow-500/40 transition-all duration-500">
|
||||
<h2 class="text-4xl lg:text-5xl font-bold text-yellow-500 mb-12 text-center font-nevduplenysh">
|
||||
Партнерская сеть
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
|
||||
<div class="group bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-8 rounded-2xl shadow-2xl text-center border border-gray-700/50 hover:border-yellow-500/50 transition-all duration-300 transform hover:scale-105">
|
||||
<div class="text-5xl font-bold text-yellow-400 mb-4 font-nevduplenysh group-hover:text-yellow-300 transition-colors duration-300">50+</div>
|
||||
<div class="text-gray-300 font-gilroy text-lg">Авторизованных дилеров</div>
|
||||
</div>
|
||||
<div class="group bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-8 rounded-2xl shadow-2xl text-center border border-gray-700/50 hover:border-blue-500/50 transition-all duration-300 transform hover:scale-105">
|
||||
<div class="text-5xl font-bold text-blue-400 mb-4 font-nevduplenysh group-hover:text-blue-300 transition-colors duration-300">25+</div>
|
||||
<div class="text-gray-300 font-gilroy text-lg">Логистических партнеров</div>
|
||||
</div>
|
||||
<div class="group bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-8 rounded-2xl shadow-2xl text-center border border-gray-700/50 hover:border-green-500/50 transition-all duration-300 transform hover:scale-105">
|
||||
<div class="text-5xl font-bold text-green-400 mb-4 font-nevduplenysh group-hover:text-green-300 transition-colors duration-300">100+</div>
|
||||
<div class="text-gray-300 font-gilroy text-lg">Пунктов выдачи</div>
|
||||
</div>
|
||||
<div class="group bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-8 rounded-2xl shadow-2xl text-center border border-gray-700/50 hover:border-purple-500/50 transition-all duration-300 transform hover:scale-105">
|
||||
<div class="text-5xl font-bold text-purple-400 mb-4 font-nevduplenysh group-hover:text-purple-300 transition-colors duration-300">24/7</div>
|
||||
<div class="text-gray-300 font-gilroy text-lg">Служба поддержки</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<h3 class="text-3xl font-bold mb-6 text-white font-nevduplenysh">Стать партнером</h3>
|
||||
<p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto font-gilroy leading-relaxed">
|
||||
Заинтересованы в сотрудничестве? Мы всегда открыты для новых партнерских отношений.
|
||||
<span class="text-yellow-400 font-semibold block mt-2">Присоединяйтесь к нашей команде профессионалов!</span>
|
||||
</p>
|
||||
<button class="open-modal group inline-flex items-center px-12 py-6 text-xl 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">
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a2 2 0 01-2-2v-6a2 2 0 012-2h2m-4 0V4a2 2 0 012-2h6a2 2 0 012 2v4m-6 0a2 2 0 100-4 2 2 0 000 4zm0 0h2a2 2 0 012 2v4a2 2 0 01-2 2H9a2 2 0 01-2-2v-4a2 2 0 012-2z"></path>
|
||||
</svg>
|
||||
Стать партнером
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
|
@ -44,7 +44,7 @@ const faqCategories = [
|
||||
},
|
||||
{
|
||||
question: "Как происходит контроль качества продукции?",
|
||||
answer: "Контроль качества осуществляется на всех этапах: входной контроль сырья, контроль технологического процесса, финальная проверка готовой продукции с использованием современного аналитического оборудования."
|
||||
answer: "Контроль качества осуществляется на всех этапах: входной контроль сырья, контроль технологического процесса, финальная проверка готовой продукции с использованием современного аналитического оборудования. Контроль ОТК и РТ-Техприемка."
|
||||
},
|
||||
{
|
||||
question: "Какой срок годности у ваших драгоценных металлов?",
|
||||
@ -63,22 +63,13 @@ const faqCategories = [
|
||||
question: "Зарегистрирована ли компания в ГИИС ДМДК?",
|
||||
answer: "Да, ООО «ДМДК» зарегистрировано в Государственной информационной системе учета и контроля драгоценных металлов и драгоценных камней под номером ДМДК-2023-001234."
|
||||
},
|
||||
{
|
||||
question: "Какие международные сертификаты у компании?",
|
||||
answer: "Компания сертифицирована по стандартам ISO 9001:2015 (система менеджмента качества), ISO 14001:2015 (экологический менеджмент), имеет сертификат соответствия LBMA."
|
||||
},
|
||||
{
|
||||
question: "Как часто обновляются лицензии?",
|
||||
answer: "Все лицензии регулярно продлеваются в установленные сроки. Лицензия на аффинаж продлевается каждые 5 лет, торговая лицензия - каждые 3 года."
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
question: "Проходит ли компания аудиты качества?",
|
||||
answer: "Да, компания регулярно проходит внутренние и внешние аудиты качества, включая аудиты со стороны Пробирной палаты России и международных организаций."
|
||||
answer: "Да, компания регулярно проходит внутренние и внешние аудиты качества, включая аудиты со стороны Пробирной палаты России."
|
||||
},
|
||||
{
|
||||
question: "Какие экологические сертификаты имеет компания?",
|
||||
answer: "ООО «ДМДК» имеет экологический сертификат, разрешение на выбросы в атмосферу, лицензию на обращение с отходами, сертификат экологической безопасности производства."
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -86,7 +77,7 @@ const faqCategories = [
|
||||
questions: [
|
||||
{
|
||||
question: "Какие способы оплаты вы принимаете?",
|
||||
answer: "Мы принимаем оплату: банковским переводом, наличными в офисе, через аккредитив, по факторингу, криптовалютой (для международных операций)."
|
||||
answer: "Мы принимаем оплату: только безналичная оплата от юрлиц зарегистрированных в ГИИС ДМДК."
|
||||
},
|
||||
{
|
||||
question: "Какие сроки доставки по России?",
|
||||
@ -123,7 +114,7 @@ const faqCategories = [
|
||||
},
|
||||
{
|
||||
question: "Какой минимальный объем заказа?",
|
||||
answer: "Минимальный объем заказа зависит от вида металла: золото - от 1 тройской унции, серебро - от 100 тройских унций, платиновые металлы - от 0.5 тройской унции."
|
||||
answer: "Минимальный объем заказа зависит от вида металла и вида продукции: от 1г."
|
||||
},
|
||||
{
|
||||
question: "Предоставляете ли вы услуги аффинажа?",
|
||||
@ -159,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>
|
||||
|
||||
<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="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>
|
||||
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="mb-12 text-center">
|
||||
<p class="text-lg text-gray-300 leading-relaxed max-w-3xl mx-auto">
|
||||
<div class="mb-8 xs:mb-12 text-center">
|
||||
<p class="text-base xs:text-lg text-gray-300 leading-relaxed max-w-3xl mx-auto">
|
||||
Здесь собраны ответы на наиболее популярные вопросы наших клиентов.
|
||||
Если вы не нашли ответ на свой вопрос, свяжитесь с нами.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{faqCategories.map((category, categoryIndex) => (
|
||||
<section class="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="absolute inset-0 bg-gradient-to-r from-yellow-500/5 to-orange-500/5 rounded-2xl"></div>
|
||||
<h2 class="relative text-3xl font-bold text-white flex items-center gap-4">
|
||||
<div class="w-2 h-8 bg-gradient-to-b from-yellow-400 to-orange-500 rounded-full"></div>
|
||||
<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-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-xl xs:rounded-2xl"></div>
|
||||
<h2 class="relative text-2xl xs:text-3xl font-bold text-white flex items-center gap-3 xs:gap-4">
|
||||
<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}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-3 xs:space-y-4">
|
||||
{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="faq-item relative">
|
||||
<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}')`}
|
||||
>
|
||||
<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}
|
||||
</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
|
||||
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"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -217,10 +208,10 @@ const faqCategories = [
|
||||
|
||||
<div
|
||||
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">
|
||||
<p class="text-gray-300 leading-relaxed">
|
||||
<div class="border-t border-gray-700/50 pt-3 xs:pt-4">
|
||||
<p class="text-sm xs:text-base text-gray-300 leading-relaxed">
|
||||
{faq.answer}
|
||||
</p>
|
||||
</div>
|
||||
@ -233,49 +224,49 @@ 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">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-yellow-500/10 to-orange-500/10 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>
|
||||
<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-xl xs:rounded-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">
|
||||
<h2 class="text-2xl font-bold text-white mb-4 text-center flex items-center justify-center 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">
|
||||
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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-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-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>
|
||||
</svg>
|
||||
</div>
|
||||
Не нашли ответ на свой вопрос?
|
||||
</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>
|
||||
<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
|
||||
href="tel:+74951234567"
|
||||
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"
|
||||
href="tel:+79251045050"
|
||||
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">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<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-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" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-semibold">+7 (495) 123-45-67</span>
|
||||
<span class="font-semibold">+7 (925) 104-50-50</span>
|
||||
</a>
|
||||
<a
|
||||
href="mailto:info@dmdк.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"
|
||||
href="mailto:ooo.dmdk@mail.ru"
|
||||
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">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<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-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="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-semibold">info@dmdк.ru</span>
|
||||
<span class="font-semibold">ooo.dmdk@mail.ru</span>
|
||||
</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">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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 justify-center gap-2">
|
||||
<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>
|
||||
</svg>
|
||||
Задать вопрос
|
||||
@ -289,23 +280,23 @@ const faqCategories = [
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function toggleFaq(id) {
|
||||
function toggleFaq(id: string) {
|
||||
const answer = document.getElementById(id);
|
||||
const button = answer.previousElementSibling;
|
||||
const icon = button.querySelector('.faq-icon');
|
||||
const button = answer?.previousElementSibling as HTMLElement;
|
||||
const icon = button?.querySelector('.faq-icon') as HTMLElement;
|
||||
|
||||
if (answer.classList.contains('hidden')) {
|
||||
if (answer?.classList.contains('hidden')) {
|
||||
answer.classList.remove('hidden');
|
||||
icon.style.transform = 'rotate(180deg)';
|
||||
button.classList.add('bg-white/[0.05]');
|
||||
if (icon) icon.style.transform = 'rotate(180deg)';
|
||||
button?.classList.add('bg-white/[0.05]');
|
||||
} else {
|
||||
answer.classList.add('hidden');
|
||||
icon.style.transform = 'rotate(0deg)';
|
||||
button.classList.remove('bg-white/[0.05]');
|
||||
answer?.classList.add('hidden');
|
||||
if (icon) icon.style.transform = 'rotate(0deg)';
|
||||
button?.classList.remove('bg-white/[0.05]');
|
||||
}
|
||||
}
|
||||
|
||||
// Глобальная функция для использования в onclick
|
||||
window.toggleFaq = toggleFaq;
|
||||
(window as any).toggleFaq = toggleFaq;
|
||||
</script>
|
||||
</Layout>
|
@ -25,65 +25,47 @@ const breadcrumbItems = [
|
||||
<Hero />
|
||||
<Breadcrumbs items={breadcrumbItems} />
|
||||
|
||||
<!-- Декоративные элементы фона -->
|
||||
<div class="fixed inset-0 pointer-events-none overflow-hidden">
|
||||
<div class="absolute top-20 right-10 w-72 h-72 bg-gradient-to-br from-yellow-500/10 to-orange-500/10 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-20 left-10 w-96 h-96 bg-gradient-to-tr from-blue-500/10 to-purple-500/10 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>
|
||||
|
||||
<!-- Основной контент -->
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<h1 class="text-4xl lg:text-6xl font-bold mb-16 text-transparent bg-gradient-to-r from-yellow-400 via-yellow-500 to-orange-500 bg-clip-text font-nevduplenysh text-center">
|
||||
Реквизиты и юридическая информация
|
||||
</h1>
|
||||
|
||||
<div class="max-w-6xl mx-auto space-y-12">
|
||||
<!-- Основные реквизиты -->
|
||||
<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 overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-green-500/5 to-teal-500/5 rounded-2xl"></div>
|
||||
<div class="absolute bottom-0 left-0 w-32 h-32 bg-gradient-to-tr from-green-500/10 to-teal-500/10 rounded-full blur-2xl"></div>
|
||||
<section class="mb-16">
|
||||
<div class="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 relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-yellow-500/5 to-orange-500/5 rounded-2xl"></div>
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-yellow-500/10 to-orange-500/10 rounded-full blur-2xl"></div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<h2 class="text-3xl font-bold mb-6 text-white flex items-center gap-4">
|
||||
<div class="w-2 h-8 bg-gradient-to-b from-green-400 to-teal-500 rounded-full"></div>
|
||||
Реквизиты организации
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-gradient-to-br from-gray-800/50 to-gray-900/50 backdrop-blur-sm border border-gray-700/30 rounded-xl p-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-yellow-400 flex items-center 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">
|
||||
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<h2 class="text-3xl font-bold mb-8 text-yellow-400 flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-white" 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>
|
||||
</svg>
|
||||
</div>
|
||||
Основная информация
|
||||
</h3>
|
||||
Основные реквизиты
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<ul class="space-y-3 text-gray-300">
|
||||
<li class="flex flex-col"><span class="text-yellow-400 font-medium">Полное наименование:</span> <span class="text-white">Общество с ограниченной ответственностью «Драгоценные металлы и драгоценные камни»</span></li>
|
||||
<li class="flex flex-col"><span class="text-yellow-400 font-medium">Сокращенное наименование:</span> <span class="text-white">ООО «ДМДК»</span></li>
|
||||
<li class="flex flex-col"><span class="text-yellow-400 font-medium">ИНН:</span> <span class="text-white font-mono">7707083893</span></li>
|
||||
<li class="flex flex-col"><span class="text-yellow-400 font-medium">КПП:</span> <span class="text-white font-mono">770701001</span></li>
|
||||
<li class="flex flex-col"><span class="text-yellow-400 font-medium">ОГРН:</span> <span class="text-white font-mono">1027700463395</span></li>
|
||||
<li class="flex flex-col"><span class="text-yellow-400 font-medium">ОКПО:</span> <span class="text-white font-mono">09807755</span></li>
|
||||
<li class="flex flex-col"><span class="text-yellow-400 font-medium">ИНН:</span> <span class="text-white font-mono">9705216630</span></li>
|
||||
<li class="flex flex-col"><span class="text-yellow-400 font-medium">КПП:</span> <span class="text-white font-mono">770501001</span></li>
|
||||
<li class="flex flex-col"><span class="text-yellow-400 font-medium">ОГРН:</span> <span class="text-white font-mono">1247700048991</span></li>
|
||||
<li class="flex flex-col"><span class="text-yellow-400 font-medium">ОКПО:</span> <span class="text-white font-mono">60658029</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-gray-800/50 to-gray-900/50 backdrop-blur-sm border border-gray-700/30 rounded-xl p-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-yellow-400 flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-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">
|
||||
<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>
|
||||
</svg>
|
||||
</div>
|
||||
Адреса
|
||||
</h3>
|
||||
<ul class="space-y-3 text-gray-300">
|
||||
<li class="flex flex-col"><span class="text-yellow-400 font-medium">Юридический адрес:</span> <span class="text-white">119017, г. Москва, ул. Большая Ордынка, д. 40, стр. 4</span></li>
|
||||
<li class="flex flex-col"><span class="text-yellow-400 font-medium">Фактический адрес:</span> <span class="text-white">119017, г. Москва, ул. Большая Ордынка, д. 40, стр. 4</span></li>
|
||||
<li class="flex flex-col"><span class="text-yellow-400 font-medium">Почтовый адрес:</span> <span class="text-white">119017, г. Москва, ул. Большая Ордынка, д. 40, стр. 4</span></li>
|
||||
<li class="flex flex-col"><span class="text-yellow-400 font-medium">Юридический адрес:</span> <span class="text-white">г. Москва, ВН. ТЕР. Г. МУНИЦИПАЛЬНЫЙ ОКРУГ ТАГАНСКИЙ, НАБ КОТЕЛЬНИЧЕСКАЯ, Д.1/15 К.А. ПОМЕЩ. 8/1</span></li>
|
||||
<li class="flex flex-col"><span class="text-yellow-400 font-medium">Фактический адрес:</span> <span class="text-white">г. Москва, ВН. ТЕР. Г. МУНИЦИПАЛЬНЫЙ ОКРУГ ТАГАНСКИЙ, НАБ КОТЕЛЬНИЧЕСКАЯ, Д.1/15 К.А. ПОМЕЩ. 8/1</span></li>
|
||||
<li class="flex flex-col"><span class="text-yellow-400 font-medium">Телефон:</span> <span class="text-white">+7 (925) 104-50-50</span></li>
|
||||
<li class="flex flex-col"><span class="text-yellow-400 font-medium">Дополнительный телефон:</span> <span class="text-white">+7 (926) 664-62-46</span></li>
|
||||
<li class="flex flex-col"><span class="text-yellow-400 font-medium">Email:</span> <span class="text-white">ooo.dmdk@mail.ru</span></li>
|
||||
<li class="flex flex-col"><span class="text-yellow-400 font-medium">Режим работы:</span> <span class="text-white">Пн-Пт: 09:00-21:00</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -91,19 +73,24 @@ const breadcrumbItems = [
|
||||
</section>
|
||||
|
||||
<!-- Банковские реквизиты -->
|
||||
<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 overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-green-500/5 to-teal-500/5 rounded-2xl"></div>
|
||||
<div class="absolute bottom-0 left-0 w-32 h-32 bg-gradient-to-tr from-green-500/10 to-teal-500/10 rounded-full blur-2xl"></div>
|
||||
<section class="mb-16">
|
||||
<div class="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 relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-blue-500/5 to-purple-500/5 rounded-2xl"></div>
|
||||
<div class="absolute top-0 left-0 w-32 h-32 bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-full blur-2xl"></div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<h2 class="text-3xl font-bold mb-6 text-white flex items-center gap-4">
|
||||
<div class="w-2 h-8 bg-gradient-to-b from-green-400 to-teal-500 rounded-full"></div>
|
||||
<h2 class="text-3xl font-bold mb-8 text-blue-400 flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
Банковские реквизиты
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div class="bg-gradient-to-br from-gray-800/50 to-gray-900/50 backdrop-blur-sm border border-gray-700/30 rounded-xl p-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-green-400 flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-gradient-to-r from-green-500 to-teal-500 rounded-lg flex items-center justify-center">
|
||||
<h3 class="text-xl font-semibold mb-4 text-blue-400 flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-indigo-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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
|
||||
</svg>
|
||||
@ -111,10 +98,10 @@ const breadcrumbItems = [
|
||||
Основной счет
|
||||
</h3>
|
||||
<ul class="space-y-3 text-gray-300">
|
||||
<li class="flex flex-col"><span class="text-green-400 font-medium">Расчетный счет:</span> <span class="text-white font-mono">40702810438000123456</span></li>
|
||||
<li class="flex flex-col"><span class="text-green-400 font-medium">Банк:</span> <span class="text-white">ПАО Сбербанк</span></li>
|
||||
<li class="flex flex-col"><span class="text-green-400 font-medium">БИК:</span> <span class="text-white font-mono">044525225</span></li>
|
||||
<li class="flex flex-col"><span class="text-green-400 font-medium">Корр. счет:</span> <span class="text-white font-mono">30101810400000000225</span></li>
|
||||
<li class="flex flex-col"><span class="text-blue-400 font-medium">Расчетный счет:</span> <span class="text-white font-mono">40702 810 5 3871 0003743</span></li>
|
||||
<li class="flex flex-col"><span class="text-blue-400 font-medium">Банк:</span> <span class="text-white">ПАО Сбербанк</span></li>
|
||||
<li class="flex flex-col"><span class="text-blue-400 font-medium">БИК:</span> <span class="text-white font-mono">044525225</span></li>
|
||||
<li class="flex flex-col"><span class="text-blue-400 font-medium">Корр. счет:</span> <span class="text-white font-mono">30101810400000000225</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-gray-800/50 to-gray-900/50 backdrop-blur-sm border border-gray-700/30 rounded-xl p-6">
|
||||
@ -127,30 +114,35 @@ const breadcrumbItems = [
|
||||
Дополнительный счет
|
||||
</h3>
|
||||
<ul class="space-y-3 text-gray-300">
|
||||
<li class="flex flex-col"><span class="text-blue-400 font-medium">Расчетный счет:</span> <span class="text-white font-mono">40702810938000654321</span></li>
|
||||
<li class="flex flex-col"><span class="text-blue-400 font-medium">Банк:</span> <span class="text-white">ВТБ (ПАО)</span></li>
|
||||
<li class="flex flex-col"><span class="text-blue-400 font-medium">БИК:</span> <span class="text-white font-mono">044525187</span></li>
|
||||
<li class="flex flex-col"><span class="text-blue-400 font-medium">Корр. счет:</span> <span class="text-white font-mono">30101810700000000187</span></li>
|
||||
<li class="flex flex-col"><span class="text-blue-400 font-medium">Расчетный счет:</span> <span class="text-white font-mono">40702810701760002312</span></li>
|
||||
<li class="flex flex-col"><span class="text-blue-400 font-medium">Банк:</span> <span class="text-white">АО "АЛЬФА-БАНК"</span></li>
|
||||
<li class="flex flex-col"><span class="text-blue-400 font-medium">БИК:</span> <span class="text-white font-mono">044525593</span></li>
|
||||
<li class="flex flex-col"><span class="text-blue-400 font-medium">Корр. счет:</span> <span class="text-white font-mono">30101810200000000593</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Регистрация в ГИИС ДМДК -->
|
||||
<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 overflow-hidden">
|
||||
<section class="mb-16">
|
||||
<div class="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 relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-pink-500/5 rounded-2xl"></div>
|
||||
<div class="absolute top-0 left-0 w-32 h-32 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-full blur-2xl"></div>
|
||||
<div class="absolute bottom-0 right-0 w-32 h-32 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-full blur-2xl"></div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<h2 class="text-3xl font-bold mb-6 text-white flex items-center gap-4">
|
||||
<div class="w-2 h-8 bg-gradient-to-b from-purple-400 to-pink-500 rounded-full"></div>
|
||||
<h2 class="text-3xl font-bold mb-8 text-purple-400 flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
Регистрация в ГИИС ДМДК
|
||||
</h2>
|
||||
<div class="bg-gradient-to-br from-gray-800/50 to-gray-900/50 backdrop-blur-sm border border-gray-700/30 rounded-xl p-6">
|
||||
<div class="text-gray-300 space-y-4">
|
||||
<div class="flex flex-col"><span class="text-purple-400 font-medium">Номер регистрации:</span> <span class="text-white font-mono">ДМДК-2023-001234</span></div>
|
||||
<div class="flex flex-col"><span class="text-purple-400 font-medium">Дата регистрации:</span> <span class="text-white">15 марта 2023 года</span></div>
|
||||
<div class="flex flex-col"><span class="text-purple-400 font-medium">Номер регистрации:</span> <span class="text-white font-mono">ЮЛ7701036054</span></div>
|
||||
<div class="flex flex-col"><span class="text-purple-400 font-medium">Дата регистрации:</span> <span class="text-white">12 февраля 2024 года</span></div>
|
||||
<div class="flex flex-col"><span class="text-purple-400 font-medium">Статус:</span> <span class="text-green-400 font-semibold">Действующий участник</span></div>
|
||||
<p class="text-sm text-gray-400 mt-4 p-4 bg-gray-800/30 rounded-lg border-l-4 border-purple-500">
|
||||
ООО «ДМДК» зарегистрировано в Государственной информационной системе учета и контроля
|
||||
@ -163,96 +155,80 @@ const breadcrumbItems = [
|
||||
</section>
|
||||
|
||||
<!-- Лицензии и сертификаты -->
|
||||
<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 overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-orange-500/5 to-red-500/5 rounded-2xl"></div>
|
||||
<div class="absolute bottom-0 right-0 w-32 h-32 bg-gradient-to-tl from-orange-500/10 to-red-500/10 rounded-full blur-2xl"></div>
|
||||
<section class="mb-16">
|
||||
<div class="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 relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-green-500/5 to-teal-500/5 rounded-2xl"></div>
|
||||
<div class="absolute top-0 left-0 w-32 h-32 bg-gradient-to-br from-green-500/10 to-teal-500/10 rounded-full blur-2xl"></div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<h2 class="text-3xl font-bold mb-6 text-white flex items-center gap-4">
|
||||
<div class="w-2 h-8 bg-gradient-to-b from-orange-400 to-red-500 rounded-full"></div>
|
||||
Лицензии и сертификаты
|
||||
<h2 class="text-3xl font-bold mb-8 text-green-400 flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-r from-green-500 to-teal-500 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
Лицензии
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/40 rounded-xl p-6 hover:border-orange-500/30 transition-all duration-300 group">
|
||||
<h3 class="text-lg font-semibold mb-3 text-orange-400 flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-gradient-to-r from-orange-500 to-red-500 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
Лицензия на аффинаж
|
||||
</h3>
|
||||
<ul class="space-y-2 text-gray-300 text-sm">
|
||||
<li class="flex justify-between"><span class="text-orange-400">Номер:</span> <span class="text-white font-mono">АФ-77-001234</span></li>
|
||||
<li class="flex justify-between"><span class="text-orange-400">Дата выдачи:</span> <span class="text-white">10.01.2023</span></li>
|
||||
<li class="flex justify-between"><span class="text-orange-400">Действует до:</span> <span class="text-white">10.01.2028</span></li>
|
||||
<li class="flex justify-between"><span class="text-orange-400">Орган выдачи:</span> <span class="text-white text-xs">Пробирная палата России</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/40 rounded-xl p-6 hover:border-blue-500/30 transition-all duration-300 group">
|
||||
<h3 class="text-lg font-semibold mb-3 text-blue-400 flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
Сертификат ISO 9001:2015
|
||||
</h3>
|
||||
<ul class="space-y-2 text-gray-300 text-sm">
|
||||
<li class="flex justify-between"><span class="text-blue-400">Номер:</span> <span class="text-white font-mono">ISO-9001-2023-ДМДК</span></li>
|
||||
<li class="flex justify-between"><span class="text-blue-400">Дата выдачи:</span> <span class="text-white">25.02.2023</span></li>
|
||||
<li class="flex justify-between"><span class="text-blue-400">Действует до:</span> <span class="text-white">25.02.2026</span></li>
|
||||
<li class="flex justify-between"><span class="text-blue-400">Орган сертификации:</span> <span class="text-white text-xs">РОССТАНДАРТ</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div class="bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/40 rounded-xl p-6 hover:border-green-500/30 transition-all duration-300 group">
|
||||
<h3 class="text-lg font-semibold mb-3 text-green-400 flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-gradient-to-r from-green-500 to-teal-500 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 bg-gradient-to-r from-green-500 to-emerald-500 rounded-lg flex items-center justify-center mr-4 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-6 h-6 text-white" 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>
|
||||
</svg>
|
||||
</div>
|
||||
Лицензия на торговлю ДМ
|
||||
</h3>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-green-400 leading-tight">Лицензия на обработку (переработку) лома и отходов драгоценных металлов</h3>
|
||||
<p class="text-xs text-gray-400 mt-1">(за исключением деятельности по обработке организациями и ИП лома и отходов ДМ, образовавшихся в процессе собственного производства)</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="space-y-2 text-gray-300 text-sm">
|
||||
<li class="flex justify-between"><span class="text-green-400">Номер:</span> <span class="text-white font-mono">ТД-77-005678</span></li>
|
||||
<li class="flex justify-between"><span class="text-green-400">Дата выдачи:</span> <span class="text-white">15.03.2023</span></li>
|
||||
<li class="flex justify-between"><span class="text-green-400">Действует до:</span> <span class="text-white">15.03.2028</span></li>
|
||||
<li class="flex justify-between"><span class="text-green-400">Орган выдачи:</span> <span class="text-white text-xs">Министерство финансов РФ</span></li>
|
||||
<li class="flex flex-col"><span class="text-green-400 font-medium">Номер:</span> <span class="text-white font-mono">Л003-00119-77/01090939</span></li>
|
||||
<li class="flex flex-col"><span class="text-green-400 font-medium">Дата выдачи:</span> <span class="text-white">13.03.2024</span></li>
|
||||
<li class="flex flex-col"><span class="text-green-400 font-medium">Действует до:</span> <span class="text-white">бессрочно</span></li>
|
||||
<li class="flex flex-col"><span class="text-green-400 font-medium">Орган выдачи:</span> <span class="text-white text-xs">МЕЖРЕГИОНАЛЬНОЕ УПРАВЛЕНИЕ ФЕДЕРАЛЬНОЙ ПРОБИРНОЙ ПАЛАТЫ ПО ЦЕНТРАЛЬНОМУ ФЕДЕРАЛЬНОМУ ОКРУГУ</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/40 rounded-xl p-6 hover:border-purple-500/30 transition-all duration-300 group">
|
||||
<h3 class="text-lg font-semibold mb-3 text-purple-400 flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-lg flex items-center justify-center mr-4 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
Экологический сертификат
|
||||
</h3>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-purple-400 leading-tight">Лицензия на скупку у физических лиц ювелирных и других изделий</h3>
|
||||
<p class="text-xs text-gray-400 mt-1">из драгоценных металлов и драгоценных камней, лома таких изделий</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="space-y-2 text-gray-300 text-sm">
|
||||
<li class="flex justify-between"><span class="text-purple-400">Номер:</span> <span class="text-white font-mono">ЭКО-2023-ДМДК-001</span></li>
|
||||
<li class="flex justify-between"><span class="text-purple-400">Дата выдачи:</span> <span class="text-white">20.04.2023</span></li>
|
||||
<li class="flex justify-between"><span class="text-purple-400">Действует до:</span> <span class="text-white">20.04.2026</span></li>
|
||||
<li class="flex justify-between"><span class="text-purple-400">Орган выдачи:</span> <span class="text-white text-xs">Росприроднадзор</span></li>
|
||||
<li class="flex flex-col"><span class="text-purple-400 font-medium">Номер:</span> <span class="text-white font-mono">Л023-00119-77/01379173</span></li>
|
||||
<li class="flex flex-col"><span class="text-purple-400 font-medium">Дата выдачи:</span> <span class="text-white">06.09.2024</span></li>
|
||||
<li class="flex flex-col"><span class="text-purple-400 font-medium">Действует до:</span> <span class="text-white">бессрочно</span></li>
|
||||
<li class="flex flex-col"><span class="text-purple-400 font-medium">Орган выдачи:</span> <span class="text-white text-xs">МЕЖРЕГИОНАЛЬНОЕ УПРАВЛЕНИЕ ФЕДЕРАЛЬНОЙ ПРОБИРНОЙ ПАЛАТЫ ПО ЦЕНТРАЛЬНОМУ ФЕДЕРАЛЬНОМУ ОКРУГУ</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Политика конфиденциальности -->
|
||||
<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 overflow-hidden">
|
||||
<section class="mb-16">
|
||||
<div class="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 relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-indigo-500/5 to-purple-500/5 rounded-2xl"></div>
|
||||
<div class="absolute top-0 right-0 w-40 h-40 bg-gradient-to-bl from-indigo-500/10 to-purple-500/10 rounded-full blur-2xl"></div>
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-indigo-500/10 to-purple-500/10 rounded-full blur-2xl"></div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<h2 class="text-3xl font-bold mb-6 text-white flex items-center gap-4">
|
||||
<div class="w-2 h-8 bg-gradient-to-b from-indigo-400 to-purple-500 rounded-full"></div>
|
||||
<h2 class="text-3xl font-bold mb-8 text-indigo-400 flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
Политика конфиденциальности
|
||||
</h2>
|
||||
<div class="bg-gradient-to-br from-gray-800/50 to-gray-900/50 backdrop-blur-sm border border-gray-700/30 rounded-xl p-6">
|
||||
<div class="text-gray-300 space-y-6">
|
||||
<div class="space-y-6 text-gray-300">
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold text-indigo-400 mb-3 flex items-center gap-2">
|
||||
<span class="w-6 h-6 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full flex items-center justify-center">
|
||||
@ -261,11 +237,9 @@ const breadcrumbItems = [
|
||||
Общие положения
|
||||
</h3>
|
||||
<p class="text-gray-300 leading-relaxed">
|
||||
Настоящая Политика конфиденциальности персональных данных (далее – Политика конфиденциальности)
|
||||
действует в отношении всей информации, включая персональные данные в понимании применимого
|
||||
законодательства (далее – «Персональные данные»), которую ООО «ДМДК» может получить о
|
||||
пользователе во время использования им любых сайтов, сервисов, служб, программ для ЭВМ,
|
||||
продуктов или услуг ООО «ДМДК».
|
||||
ООО «ДМДК» обязуется соблюдать конфиденциальность персональных данных пользователей.
|
||||
Настоящая Политика конфиденциальности действует в отношении всей информации,
|
||||
которую ООО «ДМДК» может получить о пользователе во время использования им сайта.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -277,9 +251,8 @@ const breadcrumbItems = [
|
||||
Сбор и использование персональных данных
|
||||
</h3>
|
||||
<p class="text-gray-300 leading-relaxed">
|
||||
Мы собираем и используем ваши персональные данные только в объеме, необходимом для предоставления
|
||||
наших услуг и выполнения договорных обязательств. Персональные данные обрабатываются в соответствии
|
||||
с Федеральным законом «О персональных данных» № 152-ФЗ.
|
||||
Мы собираем персональные данные пользователей только с их согласия. Данные используются
|
||||
исключительно для предоставления услуг, обработки заказов и связи с клиентами.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -307,7 +280,7 @@ const breadcrumbItems = [
|
||||
</h3>
|
||||
<p class="text-gray-300 leading-relaxed">
|
||||
По всем вопросам, связанным с обработкой персональных данных, вы можете обращаться к нам
|
||||
по электронной почте: <a href="mailto:privacy@dmdк.ru" class="text-indigo-400 hover:text-indigo-300 transition-colors">privacy@dmdк.ru</a> или по телефону: <a href="tel:+74951234567" class="text-indigo-400 hover:text-indigo-300 transition-colors">+7 (495) 123-45-67</a>.
|
||||
по электронной почте: <a href="mailto:ooo.dmdk@mail.ru" class="text-indigo-400 hover:text-indigo-300 transition-colors">ooo.dmdk@mail.ru</a> или по телефону: <a href="tel:+79251045050" class="text-indigo-400 hover:text-indigo-300 transition-colors">+7 (925) 104-50-50</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -316,27 +289,31 @@ const breadcrumbItems = [
|
||||
</section>
|
||||
|
||||
<!-- Пользовательское соглашение -->
|
||||
<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 overflow-hidden">
|
||||
<section class="mb-16">
|
||||
<div class="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 relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-teal-500/5 to-cyan-500/5 rounded-2xl"></div>
|
||||
<div class="absolute bottom-0 left-0 w-40 h-40 bg-gradient-to-tr from-teal-500/10 to-cyan-500/10 rounded-full blur-2xl"></div>
|
||||
<div class="absolute bottom-0 left-0 w-32 h-32 bg-gradient-to-br from-teal-500/10 to-cyan-500/10 rounded-full blur-2xl"></div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<h2 class="text-3xl font-bold mb-6 text-white flex items-center gap-4">
|
||||
<div class="w-2 h-8 bg-gradient-to-b from-teal-400 to-cyan-500 rounded-full"></div>
|
||||
<h2 class="text-3xl font-bold mb-8 text-teal-400 flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-r from-teal-500 to-cyan-500 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-5 h-5 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>
|
||||
</svg>
|
||||
</div>
|
||||
Пользовательское соглашение
|
||||
</h2>
|
||||
<div class="bg-gradient-to-br from-gray-800/50 to-gray-900/50 backdrop-blur-sm border border-gray-700/30 rounded-xl p-6">
|
||||
<div class="text-gray-300 space-y-6">
|
||||
<div class="space-y-6 text-gray-300">
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold text-teal-400 mb-3 flex items-center gap-2">
|
||||
<span class="w-6 h-6 bg-gradient-to-r from-teal-500 to-cyan-500 rounded-full flex items-center justify-center">
|
||||
<span class="text-white text-xs font-bold">1</span>
|
||||
</span>
|
||||
Предмет соглашения
|
||||
Общие условия
|
||||
</h3>
|
||||
<p class="text-gray-300 leading-relaxed">
|
||||
Настоящее Пользовательское соглашение определяет условия использования сайта ООО «ДМДК»
|
||||
и регулирует отношения между ООО «ДМДК» и пользователями сайта.
|
||||
Настоящее соглашение определяет условия использования сайта ООО «ДМДК» и регулирует
|
||||
отношения между пользователем и компанией.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -345,12 +322,11 @@ const breadcrumbItems = [
|
||||
<span class="w-6 h-6 bg-gradient-to-r from-teal-500 to-cyan-500 rounded-full flex items-center justify-center">
|
||||
<span class="text-white text-xs font-bold">2</span>
|
||||
</span>
|
||||
Права и обязанности сторон
|
||||
Права и обязанности пользователя
|
||||
</h3>
|
||||
<p class="text-gray-300 leading-relaxed">
|
||||
Пользователь обязуется использовать сайт только в законных целях и не нарушать права
|
||||
третьих лиц. ООО «ДМДК» обязуется предоставлять актуальную информацию о своих услугах
|
||||
и продукции.
|
||||
Пользователь обязуется предоставлять достоверную информацию при регистрации и
|
||||
использовании сайта, а также соблюдать требования действующего законодательства.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
@ -9,6 +9,7 @@ export default {
|
||||
},
|
||||
},
|
||||
screens: {
|
||||
xs: "320px",
|
||||
sm: "480px",
|
||||
md: "768px",
|
||||
lg: "1028px",
|
||||
|
@ -6,7 +6,7 @@
|
||||
"headers": [
|
||||
{
|
||||
"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;"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
Reference in New Issue
Block a user