chore: restructure a bit
This commit is contained in:
+4
-48
@@ -1,51 +1,7 @@
|
||||
const sections = [
|
||||
{
|
||||
title: "Mobilkran",
|
||||
text: "Wir glauben an digitale Lösungen, die Menschen verbinden. Technologie soll nicht nur funktionieren, sondern begeistern.",
|
||||
image: "/mobilkran.jpg",
|
||||
},
|
||||
{
|
||||
title: "Transport",
|
||||
text: "Ein bunter Mix aus Kreativen, Entwicklern und Strategen – vereint durch die Leidenschaft für gute Ideen und sauberen Code.",
|
||||
image: "/transport.jpg",
|
||||
},
|
||||
{
|
||||
title: "ADAC Abschleppdienst",
|
||||
text: "Transparenz, Empathie und Nachhaltigkeit sind keine Buzzwords für uns, sondern gelebte Prinzipien in jedem Projekt.",
|
||||
image: "/abschleppdienst.jpg",
|
||||
},
|
||||
];
|
||||
|
||||
export default function About() {
|
||||
export default function Page() {
|
||||
return (
|
||||
<div className="bg-white py-20 px-6 lg:px-24">
|
||||
<h1 className="text-4xl font-bold text-center mb-20 text-gray-800">Über uns</h1>
|
||||
<main className="min-h-screen bg-gray-100 py-10">
|
||||
|
||||
<div className="space-y-28">
|
||||
{sections.map((section, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex flex-col lg:flex-row ${
|
||||
index % 2 === 1 ? "lg:flex-row-reverse" : ""
|
||||
} items-center gap-12`}
|
||||
>
|
||||
{/* Bild */}
|
||||
<div className="w-full lg:w-1/2">
|
||||
<img
|
||||
src={section.image}
|
||||
alt={section.title}
|
||||
className="w-full h-auto rounded-xl shadow-xl object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Text */}
|
||||
<div className="w-full lg:w-1/2">
|
||||
<h2 className="text-3xl font-semibold text-gray-700 mb-4">{section.title}</h2>
|
||||
<p className="text-gray-600 text-lg leading-relaxed">{section.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -1,10 +0,0 @@
|
||||
"use client"
|
||||
import ContactForm from "@/components/ContactForm";
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<main className="min-h-screen bg-gray-100 py-10">
|
||||
<ContactForm/>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
+3
-3
@@ -4,20 +4,20 @@ export default function Home() {
|
||||
<main
|
||||
className="bg-[url('/background.jpg')] bg-cover flex flex-col items-center justify-center min-h-screen bg-gray-100 text-white px-4">
|
||||
<section className="text-center max-w-2xl">
|
||||
<h1 className="text-4xl font-bold mb-4">Willkommen bei <span className="bg-[var(--color-primary)]">MKV Kleinholz</span>
|
||||
<h1 className="text-4xl font-bold mb-4">Willkommen bei <span className="bg-(--color-primary)">MKV Kleinholz</span>
|
||||
</h1>
|
||||
<p className="text-lg mb-6">
|
||||
Ihr Mobilkranvermieter aus Mülheim und Umgebung
|
||||
</p>
|
||||
<a
|
||||
href="/about"
|
||||
className="inline-block bg-[var(--color-primary)] text-white px-6 py-2 rounded hover:bg-[var(--color-primary)] transition"
|
||||
className="inline-block bg-(--color-primary) text-white px-6 py-2 rounded hover:bg-(--color-primary) transition"
|
||||
>
|
||||
Mehr erfahren
|
||||
</a>
|
||||
</section>
|
||||
</main>
|
||||
<div className="w-full h-[400px]">
|
||||
<div className="w-full h-100">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2489.1370108126625!2d6.875406576840839!3d51.400537171789225!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b8c14b986f8f25%3A0x8cc0d4e323228ee8!2sAdac%20Mobilit%C3%A4tspartner%20Kleinholz!5e0!3m2!1sde!2sde!4v1755638002671!5m2!1sde!2sde"
|
||||
width="100%"
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
const sections = [
|
||||
{
|
||||
title: "Mobilkran",
|
||||
text: "Wir glauben an digitale Lösungen, die Menschen verbinden. Technologie soll nicht nur funktionieren, sondern begeistern.",
|
||||
image: "/mobilkran.jpg",
|
||||
},
|
||||
{
|
||||
title: "Transport",
|
||||
text: "Ein bunter Mix aus Kreativen, Entwicklern und Strategen – vereint durch die Leidenschaft für gute Ideen und sauberen Code.",
|
||||
image: "/transport.jpg",
|
||||
},
|
||||
{
|
||||
title: "ADAC Abschleppdienst",
|
||||
text: "Transparenz, Empathie und Nachhaltigkeit sind keine Buzzwords für uns, sondern gelebte Prinzipien in jedem Projekt.",
|
||||
image: "/abschleppdienst.jpg",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Services() {
|
||||
return (
|
||||
<div className="bg-white py-20 px-6 lg:px-24">
|
||||
<h1 className="text-4xl font-bold text-center mb-20 text-gray-800">Über uns</h1>
|
||||
|
||||
<div className="space-y-28">
|
||||
{sections.map((section, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex flex-col lg:flex-row ${
|
||||
index % 2 === 1 ? "lg:flex-row-reverse" : ""
|
||||
} items-center gap-12`}
|
||||
>
|
||||
{/* Bild */}
|
||||
<div className="w-full lg:w-1/2">
|
||||
<img
|
||||
src={section.image}
|
||||
alt={section.title}
|
||||
className="w-full h-auto rounded-xl shadow-xl object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Text */}
|
||||
<div className="w-full lg:w-1/2">
|
||||
<h2 className="text-3xl font-semibold text-gray-700 mb-4">{section.title}</h2>
|
||||
<p className="text-gray-600 text-lg leading-relaxed">{section.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
// components/ContactForm.tsx
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function ContactForm() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
message: '',
|
||||
});
|
||||
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Hier kannst du die Daten an dein Backend oder einen Dienst senden
|
||||
console.log('Formulardaten:', formData);
|
||||
setSubmitted(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-xl mx-auto p-6 bg-white shadow-md rounded-md">
|
||||
<h2 className="text-2xl font-semibold mb-4">Kontaktformular</h2>
|
||||
{submitted ? (
|
||||
<p className="text-green-600">Vielen Dank für deine Nachricht!</p>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-gray-700">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
|
||||
E-Mail
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-gray-700">
|
||||
Nachricht
|
||||
</label>
|
||||
<textarea
|
||||
name="message"
|
||||
id="message"
|
||||
rows={5}
|
||||
required
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-[var(--color-primary)] text-white px-4 py-2 rounded hover:bg-[var(--color-primary)] transition"
|
||||
>
|
||||
Absenden
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -9,13 +9,13 @@ const Navbar: React.FC = () => {
|
||||
<nav className="bg-gray-800 text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between h-16 items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="shrink-0">
|
||||
<Link href="/" className="text-[var(--color-primary)] text-xl font-bold">MKV Kleinholz</Link>
|
||||
</div>
|
||||
<div className="hidden md:flex space-x-4">
|
||||
<Link href="/" className="hover:text-gray-300">Home</Link>
|
||||
<Link href="/services" className="hover:text-gray-300">Dienstleistungen</Link>
|
||||
<Link href="/about" className="hover:text-gray-300">Über uns</Link>
|
||||
<Link href="/contact" className="hover:text-gray-300">Kontakt</Link>
|
||||
</div>
|
||||
<div className="md:hidden">
|
||||
<button
|
||||
@@ -31,8 +31,8 @@ const Navbar: React.FC = () => {
|
||||
{isOpen && (
|
||||
<div className="md:hidden px-4 pb-4 space-y-2">
|
||||
<Link href="/" className="block hover:text-gray-300">Home</Link>
|
||||
<Link href="/services" className="block hover:text-gray-300">Dienstleistungen</Link>
|
||||
<Link href="/about" className="block hover:text-gray-300">Über uns</Link>
|
||||
<Link href="/contact" className="block hover:text-gray-300">Kontakt</Link>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
Reference in New Issue
Block a user