90 lines
4.8 KiB
TypeScript
90 lines
4.8 KiB
TypeScript
import { useTranslations } from 'next-intl';
|
|
import { Section, Container, Button } from '@/components/ui';
|
|
|
|
export default function ContactPage() {
|
|
const t = useTranslations('Navigation'); // Reusing navigation translations for now
|
|
|
|
return (
|
|
<div className="flex flex-col min-h-screen">
|
|
<Section className="bg-neutral">
|
|
<Container>
|
|
<div className="max-w-3xl mx-auto text-center mb-12">
|
|
<h1 className="text-4xl font-bold mb-4">Get in Touch</h1>
|
|
<p className="text-xl text-text-secondary">
|
|
Have questions about our products or need a custom solution? We're here to help.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-5xl mx-auto">
|
|
{/* Contact Info */}
|
|
<div className="space-y-8">
|
|
<div>
|
|
<h3 className="text-xl font-bold mb-4">Contact Information</h3>
|
|
<div className="space-y-4 text-text-secondary">
|
|
<p className="flex items-start">
|
|
<svg className="w-6 h-6 text-primary mr-3 mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<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" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
<span>
|
|
Raiffeisenstraße 22<br />
|
|
73630 Remshalden<br />
|
|
Germany
|
|
</span>
|
|
</p>
|
|
<p className="flex items-center">
|
|
<svg className="w-6 h-6 text-primary mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
|
</svg>
|
|
<a href="tel:+4988192537298" className="hover:text-primary transition-colors">+49 881 92537298</a>
|
|
</p>
|
|
<p className="flex items-center">
|
|
<svg className="w-6 h-6 text-primary mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
<a href="mailto:info@klz-vertriebs-gmbh.com" className="hover:text-primary transition-colors">info@klz-vertriebs-gmbh.com</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-xl font-bold mb-4">Business Hours</h3>
|
|
<ul className="space-y-2 text-text-secondary">
|
|
<li className="flex justify-between">
|
|
<span>Monday - Friday</span>
|
|
<span>8:00 AM - 5:00 PM</span>
|
|
</li>
|
|
<li className="flex justify-between">
|
|
<span>Saturday - Sunday</span>
|
|
<span>Closed</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contact Form Placeholder */}
|
|
<div className="bg-white p-8 rounded-lg shadow-sm border border-neutral-dark">
|
|
<h3 className="text-xl font-bold mb-6">Send us a message</h3>
|
|
<form className="space-y-4">
|
|
<div>
|
|
<label htmlFor="name" className="block text-sm font-medium text-text-primary mb-1">Name</label>
|
|
<input type="text" id="name" className="w-full px-4 py-2 border border-neutral-dark rounded-md focus:ring-primary focus:border-primary" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium text-text-primary mb-1">Email</label>
|
|
<input type="email" id="email" className="w-full px-4 py-2 border border-neutral-dark rounded-md focus:ring-primary focus:border-primary" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="message" className="block text-sm font-medium text-text-primary mb-1">Message</label>
|
|
<textarea id="message" rows={4} className="w-full px-4 py-2 border border-neutral-dark rounded-md focus:ring-primary focus:border-primary"></textarea>
|
|
</div>
|
|
<Button type="submit" className="w-full">Send Message</Button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
</div>
|
|
);
|
|
}
|