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

wip
Some checks failed
Build & Deploy / deploy (push) Failing after 19s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-01-17 16:33:19 +01:00
parent d4e4142381
commit d8184caa9d
17 changed files with 287 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/[locale]/contact/page.tsx
View File

@@ -13,7 +13,7 @@ export default function ContactPage() {
</div>
<Container className="relative z-10">
<div className="max-w-4xl animate-slide-up">
<Heading level={1} subtitle="Get in Touch" className="text-white mb-4 md:mb-6">
<Heading level={1} subtitle={t('heroSubtitle')} className="text-white mb-4 md:mb-6">
<span className="text-white">{t('title')}</span>
</Heading>
<p className="text-lg md:text-2xl text-white/70 leading-relaxed max-w-2xl">
@@ -29,8 +29,8 @@ export default function ContactPage() {
{/* Contact Info */}
<div className="lg:col-span-5 space-y-6 md:space-y-12">
<div className="animate-fade-in">
<Heading level={3} subtitle="Contact Details" className="mb-6 md:mb-8">
How to Reach Us
<Heading level={3} subtitle={t('info.subtitle')} className="mb-6 md:mb-8">
{t('info.howToReachUs')}
</Heading>
<div className="space-y-4 md:space-y-8">
<div className="flex items-start gap-4 md:gap-6 group">
@@ -41,7 +41,7 @@ export default function ContactPage() {
</svg>
</div>
<div>
<h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">Our Office</h4>
<h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">{t('info.office')}</h4>
<p className="text-sm md:text-lg text-text-secondary leading-relaxed whitespace-pre-line">
{t('info.address')}
</p>
@@ -55,7 +55,7 @@ export default function ContactPage() {
</svg>
</div>
<div>
<h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">Phone</h4>
<h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">{t('info.phone')}</h4>
<a href="tel:+4988192537298" className="text-sm md:text-lg text-text-secondary hover:text-primary transition-colors font-medium touch-target">+49 881 92537298</a>
</div>
</div>
@@ -67,7 +67,7 @@ export default function ContactPage() {
</svg>
</div>
<div>
<h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">Email</h4>
<h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">{t('info.email')}</h4>
<a href="mailto:info@klz-vertriebs-gmbh.com" className="text-sm md:text-lg text-text-secondary hover:text-primary transition-colors font-medium touch-target">info@klz-vertriebs-gmbh.com</a>
</div>
</div>
@@ -92,7 +92,7 @@ export default function ContactPage() {
{/* Contact Form */}
<div className="lg:col-span-7">
<Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-none shadow-2xl animate-slide-up">
<Heading level={3} subtitle="Send a Message" className="mb-6 md:mb-10">
<Heading level={3} subtitle={t('form.subtitle')} className="mb-6 md:mb-10">
{t('form.title')}
</Heading>
<form className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
@@ -105,7 +105,7 @@ export default function ContactPage() {
autoComplete="name"
enterKeyHint="next"
className="w-full px-4 md:px-6 py-2.5 md:py-4 bg-neutral rounded-xl md:rounded-2xl border-2 border-transparent focus:border-primary focus:bg-white transition-all outline-none text-sm md:text-lg"
placeholder="Your Name"
placeholder={t('form.namePlaceholder')}
required
/>
</div>
@@ -119,7 +119,7 @@ export default function ContactPage() {
inputMode="email"
enterKeyHint="next"
className="w-full px-4 md:px-6 py-2.5 md:py-4 bg-neutral rounded-xl md:rounded-2xl border-2 border-transparent focus:border-primary focus:bg-white transition-all outline-none text-sm md:text-lg"
placeholder="your@email.com"
placeholder={t('form.emailPlaceholder')}
required
/>
</div>
@@ -131,7 +131,7 @@ export default function ContactPage() {
rows={4}
enterKeyHint="send"
className="w-full px-4 md:px-6 py-2.5 md:py-4 bg-neutral rounded-xl md:rounded-2xl border-2 border-transparent focus:border-primary focus:bg-white transition-all outline-none text-sm md:text-lg resize-none"
placeholder="How can we help you?"
placeholder={t('form.messagePlaceholder')}
required
></textarea>
</div>
@@ -156,7 +156,7 @@ export default function ContactPage() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
</svg>
</div>
<p className="font-bold text-primary text-xl">Interactive Map Coming Soon</p>
<p className="font-bold text-primary text-xl">{t('map.comingSoon')}</p>
</div>
</div>
</section>