Marc Mintel
1153a79eb6
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 12s
Build & Deploy / 🧪 QA (push) Successful in 4m40s
Build & Deploy / 🏗️ Build (push) Failing after 31s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Smoke Test (push) Has been skipped
Build & Deploy / ⚡ Lighthouse (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
101 lines
4.1 KiB
TypeScript
101 lines
4.1 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-2xl md:text-4xl 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/90 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/90">
|
|
<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"
|
|
aria-hidden="true"
|
|
>
|
|
<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"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M17 8l4 4m0 0l-4 4m4-4H3"
|
|
/>
|
|
</svg>
|
|
</Link>
|
|
<p className="text-white/80 text-sm font-medium">
|
|
{isDe
|
|
? 'Kostenlose Erstberatung für Ihr Vorhaben.'
|
|
: 'Free initial consultation for your project.'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|