Add "Kontakt" page with contact details, map embed, and navbar link;

This commit is contained in:
2025-06-23 12:40:00 +09:00
parent 4e8b26764e
commit 2d5db10df4
5 changed files with 88 additions and 0 deletions

View File

@@ -0,0 +1,75 @@
'use client';
import SubpageHero from '@/components/SubpageHero';
import {Mail, Phone, Printer} from 'lucide-react';
export default function KontaktPage() {
return (
<>
<SubpageHero title="Kontakt"/>
<main className="bg-white py-20 px-6 md:px-16 lg:px-36 text-gray-900">
<section className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12">
{/* Left Column Öffnungszeiten + Info */}
<div className="space-y-6 text-lg text-gray-700">
<p>
Sie erreichen uns:<br/>
MontagDonnerstag von 08:0012:00 Uhr und 13:3017:15 Uhr<br/>
sowie Freitag bis 12:00 Uhr.
</p>
<p>
Nach Absprache sind auch Terminvereinbarungen außerhalb dieser Zeiten möglich.
</p>
<p>
Nutzen Sie gerne auch unser Kontaktformular, wir antworten Ihnen wenn Sie Ihre Anfrage
montags bis donnerstags senden in der Regel innerhalb von 24 h.
</p>
</div>
{/* Right Column Adresse + Kontakt */}
<div className="space-y-6 text-lg text-gray-700">
<div>
<p className="font-medium">Kanzlei Mustermann & Künstler Partnerschaft mbB</p>
<p>Musterstraße 1 Kanzleihaus<br/>12345 Musterstadt</p>
</div>
<div className="space-y-4 text-red-700">
<p className="flex items-center gap-2">
<Phone className="w-5 h-5"/>
<a href="tel:+491234567890" className="hover:underline">
Telefon +49 123 4567890
</a>
</p>
<p className="flex items-center gap-2">
<Printer className="w-5 h-5"/>
<a href="fax:+491234567891" className="hover:underline">
Telefax +49 123 4567891
</a>
</p>
<p className="flex items-center gap-2">
<Mail className="w-5 h-5"/>
<a href="mailto:info@kanzlei-mustermann.de" className="hover:underline">
info@kanzlei-mustermann.de
</a>
</p>
</div>
</div>
</section>
{/* Map */}
<section className="max-w-6xl mx-auto mt-20">
<div className="w-full h-[400px] rounded-xl overflow-hidden shadow-md">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2647.2535381707483!2d8.68212681574048!3d50.11092297942908!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bcd6b8d2a64a71%3A0x3f9b3931687d79f3!2sMusterstra%C3%9Fe%201%2C%2065432%20Musterstadt!5e0!3m2!1sde!2sde!4v1719150000000!5m2!1sde!2sde"
width="100%"
height="100%"
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
></iframe>
</div>
</section>
</main>
</>
);
}

View File

@@ -36,6 +36,7 @@ export default function Navbar() {
<div className="space-x-6 text-base md:text-lg font-semibold">
<Link href={Links.about}>Über uns</Link>
<Link href={Links.lawyers}>Rechtsanwälte</Link>
<Link href={Links.contact}>Kontakt</Link>
</div>
</div>
</nav>

View File

@@ -6,6 +6,7 @@ const Links = {
about: '/ueber-uns/',
imprint: '/impressum/',
privacy: '/datenschutz/',
contact: '/kontakt/',
};
export default Links;

View File

@@ -9,6 +9,7 @@
"version": "0.1.0",
"dependencies": {
"framer-motion": "^12.16.0",
"lucide-react": "^0.522.0",
"next": "15.3.3",
"react": "^19.0.0",
"react-dom": "^19.0.0",
@@ -4501,6 +4502,15 @@
"loose-envify": "cli.js"
}
},
"node_modules/lucide-react": {
"version": "0.522.0",
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.522.0.tgz",
"integrity": "sha512-jnJbw974yZ7rQHHEFKJOlWAefG3ATSCZHANZxIdx8Rk/16siuwjgA4fBULpXEAWx/RlTs3FzmKW/udWUuO0aRw==",
"license": "ISC",
"peerDependencies": {
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/magic-string": {
"version": "0.30.17",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",

View File

@@ -10,6 +10,7 @@
},
"dependencies": {
"framer-motion": "^12.16.0",
"lucide-react": "^0.522.0",
"next": "15.3.3",
"react": "^19.0.0",
"react-dom": "^19.0.0",