redi/astro_minivan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
Web-serfer 2026-03-29 17:24:16 +05:00
commit 0065c017e4
496 changed files with 54265 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

69
frontend/src/components/partner/Benefits.astro Normal file
View file

@ -0,0 +1,69 @@
---
import { authService } from '@/lib/authService';
// Типы данных
type BenefitItem = {
title: string;
description: string;
iconPath: string;
};
// Тип записи из PocketBase
type BenefitsRecord = {
headline_start: string;
headline_highlight: string;
description: string;
benefits_list: BenefitItem[];
};
// Инициализация клиента
const pb = authService.createClientFromRequest(Astro.request);
// Прямой запрос без проверок (предполагаем, что запись существует)
const record = await pb.collection('partner_benefits').getFirstListItem('') as unknown as BenefitsRecord;
// Достаем массив карточек
const benefits = record.benefits_list;
---
<section class="py-16 md:py-24 lg:py-32 bg-slate-900">
<div class="max-w-7xl mx-auto px-6 sm:px-8">
<!-- Section Header -->
<div class="text-center mb-16 md:mb-24">
<h2 class="text-4xl md:text-5xl font-bold text-white leading-tight">
{record.headline_start}
<span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-orange-500">
{record.headline_highlight}
</span>
</h2>
<p class="mt-6 text-lg md:text-xl text-slate-400 max-w-3xl mx-auto leading-relaxed">
{record.description}
</p>
</div>
<!-- Benefits Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
{benefits.map((item) => (
<div class="group h-full bg-slate-800/50 border border-slate-700 rounded-2xl p-8 text-center flex flex-col items-center transition-all duration-300 hover:border-amber-500/50 hover:bg-slate-800 hover:-translate-y-2 hover:shadow-[0_20px_40px_-15px_rgba(245,158,11,0.15)]">
<!-- Icon Container -->
<div class="mb-6 flex-shrink-0 w-16 h-16 rounded-full flex items-center justify-center bg-gradient-to-br from-amber-500 to-orange-600 shadow-lg shadow-orange-500/20 group-hover:scale-110 transition-transform duration-300">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={item.iconPath} />
</svg>
</div>
<!-- Content -->
<h3 class="text-xl font-bold text-white mb-3 group-hover:text-amber-400 transition-colors">
{item.title}
</h3>
<p class="text-slate-400 text-sm leading-relaxed flex-grow">
{item.description}
</p>
</div>
))}
</div>
</div>
</section>

53
frontend/src/components/partner/CTA.astro Normal file
View file

@ -0,0 +1,53 @@
---
import Button from '@components/base/Button.astro';
---
<!-- Glass CTA Section -->
<section
id="kontakt"
class="relative min-h-[80vh] md:min-h-screen flex items-center justify-center py-12 md:py-20 px-4 sm:px-6 scroll-mt-16"
>
<!-- Background Image -->
<div class="absolute inset-0 z-0">
<img
src="/images/partner/partner-cta-bg.avif"
alt="Partner werden"
class="object-cover w-full h-full"
/>
<div class="absolute inset-0 bg-black/60" />
</div>
<!-- Form Container -->
<div class="relative z-10 w-full max-w-md md:max-w-2xl mx-4">
<div class="bg-white/10 backdrop-blur-xl rounded-2xl p-6 md:p-12 border border-white/20 shadow-2xl">
<h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-2">
Bereit, neue Maßstäbe zu setzen?
</h2>
<p class="text-slate-300 text-center mb-6 md:mb-8 text-sm md:text-base">
Kontaktieren Sie uns. Wir freuen uns auf eine starke Partnerschaft.
</p>
<form class="space-y-4">
<input
type="text"
placeholder="Name des Unternehmens"
class="w-full bg-white/10 border-white/20 border rounded-lg p-3 text-white placeholder-slate-400 focus:ring-2 focus:ring-amber-500 focus:outline-none transition-all text-sm md:text-base"
/>
<input
type="email"
placeholder="Ihre E-Mail-Adresse"
class="w-full bg-white/10 border-white/20 border rounded-lg p-3 text-white placeholder-slate-400 focus:ring-2 focus:ring-amber-500 focus:outline-none transition-all text-sm md:text-base"
/>
<textarea
rows={4}
placeholder="Ihre Nachricht"
class="w-full bg-white/10 border-white/20 border rounded-lg p-3 text-white placeholder-slate-400 focus:ring-2 focus:ring-amber-500 focus:outline-none transition-all text-sm md:text-base"
></textarea>
<Button type="submit" variant="primary" fullWidth size="md">
Anfrage senden
</Button>
</form>
</div>
</div>
</section>

9
frontend/src/components/partner/Collaboration.astro Normal file
View file

@ -0,0 +1,9 @@
---
---
<div class="bg-white rounded-xl shadow-md p-8">
<h2 class="text-2xl font-semibold mb-6">Interesse an einer Partnerschaft?</h2>
<p>
Wenn Sie Interesse haben, eine Partnerschaft mit uns einzugehen, kontaktieren Sie uns gerne. Wir freuen uns darauf, mit Ihnen zusammenzuarbeiten.
</p>
</div>

134
frontend/src/components/partner/Hero.astro Normal file
View file

@ -0,0 +1,134 @@
---
import { authService } from '@/lib/authService';
// Инициализация клиента PocketBase
const pb = authService.createClientFromRequest(Astro.request);
// Получение данных для героя из коллекции partner_hero
const heroRecord = await pb.collection('partner_hero').getFirstListItem('is_active = true');
// Генерация прямой ссылки на изображение героя
const heroImageUrl = pb.files.getURL(heroRecord, heroRecord.image);
---
<section class="relative w-full bg-slate-900 overflow-hidden py-12 md:py-20 lg:py-24">
<!-- Декоративный фоновый элемент (опционально) -->
<div class="absolute top-0 right-0 w-1/3 h-full bg-amber-500/5 skew-x-12 translate-x-1/2 pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
<!-- Левая колонка: Контент -->
<div class="order-2 lg:order-1 text-center lg:text-left">
<div class="space-y-6 md:space-y-8 max-w-2xl mx-auto lg:mx-0">
<!-- Заголовок -->
<div class="overflow-hidden">
<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight text-white leading-[1.1]">
<span class="block opacity-0 animate-slideInUp">{heroRecord?.title || 'Gemeinsam auf der'}</span>
<span class="block text-amber-400 opacity-0 animate-slideInUp delay-300">{heroRecord?.subtitle || 'Überholspur.'}</span>
</h1>
</div>
<!-- Разделитель -->
<div class="h-1.5 bg-amber-500 w-20 mx-auto lg:mx-0 rounded-full opacity-0 animate-scaleIn delay-500 origin-left"></div>
<!-- Описание -->
<div class="overflow-hidden">
<p class="text-base sm:text-lg md:text-xl text-slate-300 font-light leading-relaxed opacity-0 animate-slideInUp delay-700">
{heroRecord?.description || 'Schaffen Sie mit uns einen unvergesslichen Mehrwert für Ihre Kunden. Eine Partnerschaft, die Exzellenz neu definiert.'}
</p>
</div>
<!-- Кнопка -->
<div class="pt-4 overflow-hidden">
<a href="{heroRecord?.cta_link || '#kontakt'}"
class="group inline-flex items-center gap-3 bg-amber-500 text-slate-900 font-bold py-4 px-8 rounded-xl text-base md:text-lg transition-all duration-300 shadow-xl shadow-amber-500/10 hover:shadow-amber-500/30 opacity-0 animate-slideInUp delay-900 hover:-translate-y-1 active:scale-95">
{heroRecord?.cta_text || 'Partnerschaft starten'}
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</a>
</div>
</div>
</div>
<!-- Правая колонка: Картинка -->
<div class="order-1 lg:order-2">
<div class="relative group mx-auto max-w-[550px] lg:max-w-none">
<!-- Декоративное свечение вокруг картинки -->
<div class="absolute -inset-4 bg-amber-500/10 rounded-[2.5rem] blur-2xl opacity-0 animate-fadeIn delay-1000 group-hover:bg-amber-500/20 transition-duration-500"></div>
<!-- Контейнер картинки -->
<div class="relative aspect-video lg:aspect-square overflow-hidden rounded-[2rem] shadow-2xl border border-white/5">
<img
src={heroImageUrl}
alt={heroRecord?.img_alt || 'Luxuriöser Fahrzeuginnenraum'}
class="absolute inset-0 w-full h-full object-cover object-center scale-105 group-hover:scale-110 transition-transform duration-700 opacity-0 animate-imageReveal delay-500"
/>
<!-- Оверлей для глубины -->
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/60 via-transparent to-transparent opacity-60"></div>
</div>
<!-- Маленький декоративный элемент "бейджик" (опционально) -->
<div class="absolute -bottom-6 -left-6 bg-slate-800 border border-slate-700 p-4 rounded-2xl shadow-xl hidden md:block opacity-0 animate-slideInUp delay-1000">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-amber-500/20 rounded-lg flex items-center justify-center">
<span class="text-amber-500 font-bold">5★</span>
</div>
<div class="text-sm">
<p class="text-white font-semibold">Premium Service</p>
<p class="text-slate-400 text-xs">Exzellenz garantiert</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
@keyframes slideInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
from { opacity: 0; transform: scaleX(0); }
to { opacity: 1; transform: scaleX(1); }
}
@keyframes imageReveal {
0% { opacity: 0; transform: scale(1.15); }
100% { opacity: 1; transform: scale(1.05); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.animate-slideInUp { animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.animate-scaleIn { animation: scaleIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.animate-imageReveal { animation: imageReveal 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.animate-fadeIn { animation: fadeIn 0.8s ease-out forwards; }
.delay-300 { animation-delay: 0.3s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }
a:hover { transform: translateY(-2px); box-shadow: 0 20px 25px -5px rgba(245, 158, 11, 0.4), 0 10px 10px -5px rgba(245, 158, 11, 0.1); }
@media (prefers-reduced-motion: reduce) {
.animate-slideInUp, .animate-scaleIn, .animate-imageReveal, .animate-fadeIn {
animation: none; opacity: 1; transform: none;
}
.delay-300, .delay-500, .delay-600, .delay-700, .delay-800, .delay-900, .delay-1000 {
animation-delay: 0s;
}
}
</style>

192
frontend/src/components/partner/HowItWorks.astro Normal file
View file

@ -0,0 +1,192 @@
<section class="py-16 md:py-32 bg-slate-900 text-white overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6">
<div class="text-center mb-12 md:mb-16">
<h2 class="text-3xl md:text-5xl font-bold">
Der Weg zur Win-Win-Situation.
</h2>
<div class="w-16 h-1 bg-amber-500 mx-auto mt-4 md:mt-6"></div>
</div>
<div class="flex flex-col lg:grid lg:grid-cols-2 gap-8 md:gap-12 items-center">
<!-- Steps Selection -->
<div class="flex flex-col gap-4 md:gap-6 w-full max-w-md mx-auto lg:max-w-none">
<!-- Step 1 -->
<div
class="step-item relative p-5 md:p-6 rounded-xl border-2 cursor-pointer transition-all duration-300 w-full border-slate-700 bg-slate-800/50 hover:border-amber-500 hover:bg-slate-800 hover:shadow-lg"
data-step="1"
>
<h3 class="text-xl md:text-2xl font-bold">
1. Anfragen
</h3>
<div class="step-underline h-1 w-10 md:w-12 bg-amber-500 mt-2 opacity-0 transition-opacity duration-300"></div>
</div>
<!-- Step 2 -->
<div
class="step-item relative p-5 md:p-6 rounded-xl border-2 cursor-pointer transition-all duration-300 w-full border-slate-700 bg-slate-800/50 hover:border-amber-500 hover:bg-slate-800 hover:shadow-lg"
data-step="2"
>
<h3 class="text-xl md:text-2xl font-bold">
2. Abstimmen
</h3>
<div class="step-underline h-1 w-10 md:w-12 bg-amber-500 mt-2 opacity-0 transition-opacity duration-300"></div>
</div>
<!-- Step 3 -->
<div
class="step-item relative p-5 md:p-6 rounded-xl border-2 cursor-pointer transition-all duration-300 w-full border-slate-700 bg-slate-800/50 hover:border-amber-500 hover:bg-slate-800 hover:shadow-lg"
data-step="3"
>
<h3 class="text-xl md:text-2xl font-bold">
3. Profitieren
</h3>
<div class="step-underline h-1 w-10 md:w-12 bg-amber-500 mt-2 opacity-0 transition-opacity duration-300"></div>
</div>
</div>
<!-- Content Display -->
<div class="relative h-64 md:h-96 w-full rounded-2xl overflow-hidden bg-slate-800 mt-6 md:mt-0">
<img
src="/images/partner/step01.avif"
alt="Anfragen Schritt"
class="step-content absolute inset-0 w-full h-full object-cover transition-opacity duration-500"
data-step="1"
/>
<img
src="/images/partner/step02.avif"
alt="Abstimmen Schritt"
class="step-content absolute inset-0 w-full h-full object-cover transition-opacity duration-500 opacity-0"
data-step="2"
/>
<img
src="/images/partner/step03.avif"
alt="Profitieren Schritt"
class="step-content absolute inset-0 w-full h-full object-cover transition-opacity duration-500 opacity-0"
data-step="3"
/>
<div class="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/70 via-black/50 to-transparent p-6 md:p-8">
<p class="step-text text-base md:text-xl leading-relaxed text-slate-100 transition-opacity duration-300" data-step="1">
Ein kurzes Gespräch, um Ihre Wünsche und die Bedürfnisse Ihrer Kunden zu verstehen.
</p>
<p class="step-text text-base md:text-xl leading-relaxed text-slate-100 transition-opacity duration-300 opacity-0 absolute" data-step="2">
Wir erstellen ein individuelles Partnerpaket mit maßgeschneiderten Konditionen und Prozessen.
</p>
<p class="step-text text-base md:text-xl leading-relaxed text-slate-100 transition-opacity duration-300 opacity-0 absolute" data-step="3">
Bieten Sie Ihren Kunden unseren Service an und profitieren Sie von zufriedenen Kunden und attraktiven Provisionen.
</p>
</div>
</div>
</div>
</div>
</section>
<style>
.step-item {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.step-item:hover {
transform: translateY(-2px);
}
.step-content {
transition: opacity 0.5s ease-in-out;
}
.step-text {
transition: opacity 0.3s ease-in-out;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const stepItems = document.querySelectorAll('.step-item');
const stepContents = document.querySelectorAll('.step-content');
const stepTexts = document.querySelectorAll('.step-text');
let activeStep = null;
// Функция для сброса всех активных состояний
function resetActiveStates() {
stepItems.forEach(item => {
item.classList.remove('border-amber-500', 'bg-slate-800');
item.classList.add('border-slate-700', 'bg-slate-800/50');
});
stepContents.forEach(content => {
content.classList.add('opacity-0');
});
stepTexts.forEach(text => {
text.classList.add('opacity-0');
});
// Скрываем все подчеркивания
document.querySelectorAll('.step-underline').forEach(underline => {
underline.style.opacity = '0';
});
}
// Функция для активации шага
function activateStep(stepNumber) {
resetActiveStates();
// Активируем выбранный шаг
const activeItem = document.querySelector(`[data-step="${stepNumber}"]`);
const activeContent = document.querySelector(`.step-content[data-step="${stepNumber}"]`);
const activeText = document.querySelector(`.step-text[data-step="${stepNumber}"]`);
const activeUnderline = activeItem.querySelector('.step-underline');
if (activeItem && activeContent && activeText) {
activeItem.classList.remove('border-slate-700', 'bg-slate-800/50');
activeItem.classList.add('border-amber-500', 'bg-slate-800');
activeContent.classList.remove('opacity-0');
activeText.classList.remove('opacity-0');
if (activeUnderline) {
activeUnderline.style.opacity = '1';
}
}
activeStep = stepNumber;
}
// Обработчики событий для каждого шага
stepItems.forEach(item => {
const stepNumber = item.getAttribute('data-step');
// Клик - постоянная активация
item.addEventListener('click', () => {
activateStep(stepNumber);
});
// Наведение - временный эффект
item.addEventListener('mouseenter', () => {
if (activeStep !== stepNumber) {
item.classList.add('border-amber-500', 'bg-slate-800', 'shadow-lg');
item.classList.remove('border-slate-700', 'bg-slate-800/50');
}
});
item.addEventListener('mouseleave', () => {
if (activeStep !== stepNumber) {
item.classList.remove('border-amber-500', 'bg-slate-800', 'shadow-lg');
item.classList.add('border-slate-700', 'bg-slate-800/50');
}
});
});
// По умолчанию показываем первый шаг, но без визуального выделения
// Контент первого шага виден, но сам пункт не выделен
const firstContent = document.querySelector('.step-content[data-step="1"]');
const firstText = document.querySelector('.step-text[data-step="1"]');
if (firstContent && firstText) {
firstContent.classList.remove('opacity-0');
firstText.classList.remove('opacity-0');
}
});
</script>

9
frontend/src/components/partner/Introduction.astro Normal file
View file

@ -0,0 +1,9 @@
---
---
<div class="bg-white rounded-xl shadow-md p-8 mb-8">
<h2 class="text-2xl font-semibold mb-6">Über unsere Partnerschaften</h2>
<p class="mb-4">
Bei Berlin Minivan Transfers glauben wir an die Kraft von Partnerschaften. Wir arbeiten mit verschiedenen Unternehmen und Organisationen zusammen, um unseren Kunden den bestmöglichen Service zu bieten.
</p>
</div>

9
frontend/src/components/partner/Services.astro Normal file
View file

@ -0,0 +1,9 @@
---
---
<div class="bg-white rounded-xl shadow-md p-8 mb-8">
<h2 class="text-2xl font-semibold mb-6">Unsere Dienstleistungen durch Partnerschaften</h2>
<p class="mb-4">
Unsere Partnerschaften ermöglichen es uns, ein breiteres Spektrum an Dienstleistungen anzubieten, von Flughafentransfers über Geschäftstermine bis hin zu besonderen Anlässen. Gemeinsam schaffen wir nahtlose Reiseerlebnisse für unsere Kunden in Berlin und Umgebung.
</p>
</div>

104
frontend/src/components/partner/TargetAudience.astro Normal file
View file

@ -0,0 +1,104 @@
---
const audiences = [
{
title: "Luxushotels & Boutique-Hotels",
description: "Bieten Sie Ihren Gästen einen nahtlosen Premium-Transferservice direkt vom Check-in.",
icon: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6",
color: "amber",
staggerClass: "sm:mt-8 md:mt-12"
},
{
title: "Unternehmen & Konzerne",
description: "Sorgen Sie für einen erstklassigen Transport Ihrer Führungskräfte, Kunden und Geschäftspartner.",
icon: "M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z",
color: "slate",
staggerClass: ""
},
{
title: "Event- & Hochzeitsagenturen",
description: "Garantieren Sie einen stilvollen und zuverlässigen Shuttleservice für Ihre exklusiven Veranstaltungen.",
icon: "M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7",
color: "rose",
staggerClass: ""
},
{
title: "Premium-Reiseveranstalter",
description: "Integrieren Sie einen Chauffeurdienst, der den hohen Erwartungen Ihrer anspruchsvollen Klientel gerecht wird.",
icon: "M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z M15 13a3 3 0 11-6 0 3 3 0 016 0z",
color: "sky",
staggerClass: "sm:mt-8 md:mt-12"
}
];
// Маппинг цветов для соответствия вашему дизайну
const cardStyles = {
amber: { border: "border-amber-200", iconBg: "from-amber-50 to-amber-100", iconText: "text-amber-600", hoverBg: "from-amber-50 to-amber-100" },
slate: { border: "border-slate-200", iconBg: "from-slate-50 to-slate-100", iconText: "text-slate-600", hoverBg: "from-slate-50 to-slate-100" },
rose: { border: "border-rose-200", iconBg: "from-rose-50 to-rose-100", iconText: "text-rose-600", hoverBg: "from-rose-50 to-rose-100" },
sky: { border: "border-sky-200", iconBg: "from-sky-50 to-sky-100", iconText: "text-sky-600", hoverBg: "from-sky-50 to-sky-100" }
};
---
<section class="py-24 md:py-40 bg-white overflow-hidden">
<div class="max-w-7xl mx-auto px-6 sm:px-8 flex flex-col lg:grid lg:grid-cols-2 gap-20 md:gap-24 items-center">
<!-- Левая часть: Текст -->
<div class="text-center lg:text-left space-y-8">
<h2 class="text-4xl md:text-5xl lg:text-[3.5rem] font-bold text-gray-900 leading-tight tracking-tight">
Für Partner, die Exzellenz{' '}
<span class="relative inline-block">
<span class="relative z-10">erwarten</span>
<span class="absolute bottom-2 left-0 h-3 bg-amber-400/30 -rotate-1 -z-0 w-full"></span>
</span>
.
</h2>
<p class="text-lg md:text-xl text-gray-600 leading-relaxed max-w-xl mx-auto lg:mx-0">
Wir arbeiten mit Unternehmen zusammen, die wie wir den höchsten
Anspruch an Qualität, Diskretion und Service haben.
</p>
<div class="relative inline-block">
<div class="w-24 h-1.5 bg-amber-500 rounded-full mx-auto lg:mx-0" />
<div class="absolute inset-0 w-24 h-1.5 bg-amber-400/30 rounded-full mt-1" />
</div>
</div>
<!-- Правая часть: Сетка карточек -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-7 w-full max-w-2xl mx-auto">
{audiences.map((item) => {
const style = cardStyles[item.color];
return (
<div class={`group relative rounded-xl md:rounded-2xl p-6 md:p-8 flex flex-col items-start border bg-white shadow-sm hover:shadow-md hover:-translate-y-2 transition-all duration-300 ${style.border} ${item.staggerClass}`}>
<!-- Эффект при наведении (как в оригинале) -->
<div class="absolute inset-0 rounded-xl md:rounded-2xl overflow-hidden -z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div class={`absolute inset-0 bg-gradient-to-br opacity-30 ${style.hoverBg}`} />
</div>
<!-- Иконка -->
<div class={`w-14 h-14 md:w-16 md:h-16 rounded-xl mb-5 flex items-center justify-center bg-gradient-to-br shadow-inner ${style.iconBg} ${style.iconText}`}>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 md:w-7 md:h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={item.icon} />
</svg>
</div>
<h3 class="font-bold text-lg md:text-xl text-gray-800 mb-3 leading-snug">
{item.title}
</h3>
<p class="text-sm md:text-base text-gray-600 leading-relaxed">
{item.description}
</p>
<!-- Футер карточки -->
<div class="mt-5 pt-4 border-t border-gray-100 w-full group-hover:border-transparent transition-colors duration-300">
<span class="text-xs font-medium text-gray-400 group-hover:text-gray-500 transition-colors duration-300">
Mehr erfahren →
</span>
</div>
</div>
);
})}
</div>
</div>
</section>