78 lines
3.8 KiB
TypeScript
78 lines
3.8 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
import { Settings2, Zap, Palette, Calculator, Lightbulb } from 'lucide-react';
|
|
|
|
const steps = [
|
|
{ icon: Settings2, label: 'Marka i model' },
|
|
{ icon: Zap, label: 'Moc chłodnicza' },
|
|
{ icon: Palette, label: 'Design i funkcje' },
|
|
{ icon: Calculator, label: 'Wycena montażu' },
|
|
];
|
|
|
|
export const ConfiguratorTeaser = () => {
|
|
return (
|
|
<section className="py-20 bg-primary text-white relative overflow-hidden">
|
|
{/* Background decoration */}
|
|
<div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-accent/20 to-transparent pointer-events-none" />
|
|
<div className="absolute -bottom-24 -left-24 w-64 h-64 bg-accent rounded-full blur-[120px] opacity-20 pointer-events-none" />
|
|
|
|
<div className="container mx-auto px-4 md:px-8 max-w-7xl relative z-10">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-6">
|
|
Skonfiguruj swój idealny zestaw w 4 krokach
|
|
</h2>
|
|
<p className="text-gray-300 text-lg mb-8 max-w-xl">
|
|
Nie wiesz jakie urządzenie wybrać? Nasz prosty konfigurator krok po kroku pomoże Ci dobrać sprzęt i natychmiast sprawdzić szacunkowy koszt wraz z montażem.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 mb-10 lg:mb-0">
|
|
<Link
|
|
href="/kalkulator"
|
|
className={cn("btn btn-primary text-white group")}
|
|
>
|
|
Uruchom konfigurator
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative">
|
|
{/* Visual representation of steps */}
|
|
<div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-8">
|
|
<div className="space-y-6 relative before:absolute before:inset-0 before:ml-6 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-white/30 before:to-transparent">
|
|
{steps.map((step, idx) => {
|
|
const Icon = step.icon;
|
|
return (
|
|
<div key={idx} className="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group">
|
|
<div className="flex items-center justify-center w-12 h-12 rounded-full border-4 border-primary bg-accent text-white shadow md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 z-10">
|
|
<Icon className="w-5 h-5" />
|
|
</div>
|
|
<div className="w-[calc(100%-4rem)] md:w-[calc(50%-3rem)] bg-white/10 border border-white/20 p-4 rounded-xl backdrop-blur-sm group-hover:bg-white/20 transition-colors">
|
|
<h3 className="font-semibold text-lg">{step.label}</h3>
|
|
<p className="text-sm text-gray-300">Krok {idx + 1}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Pro tip card */}
|
|
<div className="mt-8 bg-accent/20 border border-accent/40 rounded-xl p-4 flex items-start">
|
|
<Lightbulb className="w-6 h-6 text-accent shrink-0 mr-3 mt-0.5" />
|
|
<div>
|
|
<h4 className="font-semibold text-accent-light mb-1">Porada eksperta</h4>
|
|
<p className="text-sm text-gray-200">
|
|
Szybki przelicznik mocy: <strong>10 m² = 1 kW</strong> mocy chłodniczej. Dla pokoju 25 m² szukaj urządzenia o mocy ok. 2.5 kW.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|