74 lines
3.7 KiB
TypeScript
74 lines
3.7 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
|
|
interface PowerCTAProps {
|
|
locale: string;
|
|
}
|
|
|
|
export default function PowerCTA({ locale }: PowerCTAProps) {
|
|
const isDe = locale === 'de';
|
|
|
|
return (
|
|
<div className="my-16 p-10 md:p-16 bg-neutral-dark rounded-[2rem] shadow-2xl relative overflow-hidden group">
|
|
{/* Industrial background pattern */}
|
|
<div className="absolute inset-0 opacity-10 pointer-events-none">
|
|
<div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(#3b82f6_1px,transparent_1px)] [background-size:40px_40px]" />
|
|
</div>
|
|
|
|
{/* Decorative accent */}
|
|
<div className="absolute top-0 right-0 w-64 h-64 bg-primary/20 rounded-full blur-3xl -mr-32 -mt-32 transition-transform group-hover:scale-110 duration-1000" />
|
|
|
|
<div className="relative z-10">
|
|
<div className="inline-block px-4 py-1 bg-accent/20 text-accent text-xs font-bold uppercase tracking-[0.2em] rounded-full mb-8">
|
|
{isDe ? 'Lösungen' : 'Solutions'}
|
|
</div>
|
|
|
|
<h3 className="text-3xl md:text-5xl font-bold text-white mb-8 leading-tight">
|
|
{isDe ? 'Bereit für die' : 'Ready for the'}
|
|
<span className="text-accent block">{isDe ? 'Energiewende?' : 'Energy Transition?'}</span>
|
|
</h3>
|
|
|
|
<p className="text-xl text-white/70 mb-10 leading-relaxed max-w-2xl">
|
|
{isDe
|
|
? 'Von der Planung von Wind- und Solarparks bis zur Lieferung hochwertiger Energiekabel erwecken wir Ihre Projekte zum Leben.'
|
|
: 'From wind and solar park planning to delivering high-quality energy cables, we bring your projects to life.'
|
|
}
|
|
</p>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
|
|
{[
|
|
isDe ? 'Strategischer Hub für schnelle Lieferung' : 'Strategic hub for fast delivery',
|
|
isDe ? 'Nachhaltige Kabelinfrastruktur' : 'Sustainable cable infrastructure',
|
|
isDe ? 'Expertenberatung für Großprojekte' : 'Expert consulting for large-scale projects',
|
|
isDe ? 'Zertifizierte Qualität nach EU-Standards' : 'Certified quality according to EU standards'
|
|
].map((item, i) => (
|
|
<div key={i} className="flex items-center gap-4 text-white/80">
|
|
<div className="w-6 h-6 rounded-full bg-accent/20 flex items-center justify-center flex-shrink-0">
|
|
<svg className="w-3 h-3 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<span className="text-sm font-medium">{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-6 items-start sm:items-center pt-8 border-t border-white/10">
|
|
<Link
|
|
href={`/${locale}/contact`}
|
|
className="inline-flex items-center gap-3 px-8 py-4 bg-primary text-white font-bold rounded-full hover:bg-primary/90 transition-all shadow-xl hover:shadow-primary/20 transform hover:-translate-y-1 group/btn"
|
|
>
|
|
{isDe ? 'Projekt anfragen' : 'Inquire Project'}
|
|
<svg className="w-5 h-5 transition-transform group-hover/btn:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
|
</svg>
|
|
</Link>
|
|
<p className="text-white/50 text-sm font-medium">
|
|
{isDe ? 'Kostenlose Erstberatung für Ihr Vorhaben.' : 'Free initial consultation for your project.'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|