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

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>