mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Marc Mintel
2026-01-17 02:57:53 +01:00
parent de87c62312
commit 021d23ab93
21 changed files with 967 additions and 578 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/home/CTA.tsx
View File

@@ -1,25 +1,32 @@
import React from 'react';
import Link from 'next/link';
import { useTranslations, useLocale } from 'next-intl';
import { Section, Container } from '../../components/ui';
import { Section, Container, Button, Heading } from '../../components/ui';
export default function CTA() {
const t = useTranslations('Home.cta');
const locale = useLocale();
return (
<Section className="bg-primary text-white py-24">
<Container>
<div className="flex flex-col md:flex-row items-center justify-between gap-8">
<h2 className="text-3xl md:text-4xl font-bold max-w-2xl">
{t('title')}
</h2>
<Link href={`/${locale}/contact`} className="group flex items-center gap-4 text-xl font-bold text-[#82ed20]">
{t('button')}
<span className="w-10 h-10 border-2 border-[#82ed20] rounded-full flex items-center justify-center group-hover:bg-[#82ed20] group-hover:text-primary transition-all">
&rarr;
</span>
</Link>
<Section className="bg-primary-dark text-white py-32 relative overflow-hidden">
<div className="absolute top-0 right-0 w-1/3 h-full bg-accent/5 -skew-x-12 translate-x-1/2" />
<div className="absolute bottom-0 left-0 w-1/4 h-1/2 bg-primary/10 rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />
<Container className="relative z-10">
<div className="flex flex-col lg:flex-row items-center justify-between gap-16">
<div className="max-w-3xl text-center lg:text-left">
<Heading level={2} subtitle="Get Started" className="text-white mb-6">
<span className="text-white">{t('title')}</span>
</Heading>
<p className="text-xl text-white/70 leading-relaxed">
Partner with KLZ for reliable, high-performance cable solutions tailored to your project's unique requirements.
</p>
</div>
<div className="flex-shrink-0">
<Button href={`/${locale}/contact`} variant="accent" size="xl" className="group px-12">
{t('button')}
<span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
</Button>
</div>
</div>
</Container>
</Section>