192 lines
No EOL
8.6 KiB
Text
192 lines
No EOL
8.6 KiB
Text
<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> |