wip
This commit is contained in:
@@ -1,87 +1,153 @@
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Section, Container, Button } from '@/components/ui';
|
||||
import { Section, Container, Button, Heading, Card } from '@/components/ui';
|
||||
|
||||
export default function ContactPage() {
|
||||
const t = useTranslations('Contact');
|
||||
|
||||
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">{t('title')}</h1>
|
||||
<p className="text-xl text-text-secondary">
|
||||
<div className="flex flex-col min-h-screen bg-neutral-light">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-primary-dark text-white py-32 relative overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent via-transparent to-transparent" />
|
||||
</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-6">
|
||||
<span className="text-white">{t('title')}</span>
|
||||
</Heading>
|
||||
<p className="text-2xl text-white/70 leading-relaxed max-w-2xl">
|
||||
{t('subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-5xl mx-auto">
|
||||
<Section className="bg-neutral-light -mt-20 relative z-20">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
|
||||
{/* Contact Info */}
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold mb-4">{t('info.title')}</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 className="whitespace-pre-line">
|
||||
{t('info.address')}
|
||||
</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 className="lg:col-span-5 space-y-12">
|
||||
<div className="animate-fade-in">
|
||||
<Heading level={3} subtitle="Contact Details" className="mb-8">
|
||||
How to Reach Us
|
||||
</Heading>
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-start gap-6 group">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary-light flex items-center justify-center text-primary group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 shadow-sm">
|
||||
<svg className="w-7 h-7" 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>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xl font-bold text-primary mb-2">Our Office</h4>
|
||||
<p className="text-lg text-text-secondary leading-relaxed whitespace-pre-line">
|
||||
{t('info.address')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-6 group">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary-light flex items-center justify-center text-primary group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 shadow-sm">
|
||||
<svg className="w-7 h-7" 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>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xl font-bold text-primary mb-2">Phone</h4>
|
||||
<a href="tel:+4988192537298" className="text-lg text-text-secondary hover:text-primary transition-colors font-medium">+49 881 92537298</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-6 group">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary-light flex items-center justify-center text-primary group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 shadow-sm">
|
||||
<svg className="w-7 h-7" 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>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xl font-bold text-primary mb-2">Email</h4>
|
||||
<a href="mailto:info@klz-vertriebs-gmbh.com" className="text-lg text-text-secondary hover:text-primary transition-colors font-medium">info@klz-vertriebs-gmbh.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xl font-bold mb-4">{t('hours.title')}</h3>
|
||||
<ul className="space-y-2 text-text-secondary">
|
||||
<li className="flex justify-between">
|
||||
<span>{t('hours.weekdays')}</span>
|
||||
<span>{t('hours.weekdaysTime')}</span>
|
||||
<div className="p-10 bg-white rounded-3xl border border-neutral-medium shadow-sm animate-fade-in">
|
||||
<Heading level={4} className="mb-6">{t('hours.title')}</Heading>
|
||||
<ul className="space-y-4">
|
||||
<li className="flex justify-between items-center pb-4 border-b border-neutral-medium">
|
||||
<span className="font-bold text-primary">{t('hours.weekdays')}</span>
|
||||
<span className="text-text-secondary">{t('hours.weekdaysTime')}</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span>{t('hours.weekend')}</span>
|
||||
<span>{t('hours.closed')}</span>
|
||||
<li className="flex justify-between items-center">
|
||||
<span className="font-bold text-primary">{t('hours.weekend')}</span>
|
||||
<span className="text-accent-dark font-bold">{t('hours.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">{t('form.title')}</h3>
|
||||
<form className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-text-primary mb-1">{t('form.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">{t('form.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">{t('form.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">{t('form.submit')}</Button>
|
||||
</form>
|
||||
{/* Contact Form */}
|
||||
<div className="lg:col-span-7">
|
||||
<Card className="p-12 rounded-[40px] border-none shadow-2xl animate-slide-up">
|
||||
<Heading level={3} subtitle="Send a Message" className="mb-10">
|
||||
{t('form.title')}
|
||||
</Heading>
|
||||
<form className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="name" className="text-sm font-extrabold text-primary uppercase tracking-widest">{t('form.name')}</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
className="w-full px-6 py-4 bg-neutral rounded-2xl border-2 border-transparent focus:border-primary focus:bg-white transition-all outline-none text-lg"
|
||||
placeholder="Your Name"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="email" className="text-sm font-extrabold text-primary uppercase tracking-widest">{t('form.email')}</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
className="w-full px-6 py-4 bg-neutral rounded-2xl border-2 border-transparent focus:border-primary focus:bg-white transition-all outline-none text-lg"
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 space-y-2">
|
||||
<label htmlFor="message" className="text-sm font-extrabold text-primary uppercase tracking-widest">{t('form.message')}</label>
|
||||
<textarea
|
||||
id="message"
|
||||
rows={6}
|
||||
className="w-full px-6 py-4 bg-neutral rounded-2xl border-2 border-transparent focus:border-primary focus:bg-white transition-all outline-none text-lg resize-none"
|
||||
placeholder="How can we help you?"
|
||||
></textarea>
|
||||
</div>
|
||||
<div className="md:col-span-2 pt-4">
|
||||
<Button type="submit" size="xl" className="w-full shadow-xl shadow-primary/20">
|
||||
{t('form.submit')}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Map Placeholder */}
|
||||
<section className="h-[500px] bg-neutral-medium relative overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="w-20 h-20 bg-primary rounded-full flex items-center justify-center text-white mb-4 mx-auto shadow-2xl animate-bounce">
|
||||
<svg className="w-10 h-10" 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" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="font-bold text-primary text-xl">Interactive Map Coming Soon</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user