first commit

2025-11-27 11:44:23 +01:00
commit 989253c72f
32 changed files with 4983 additions and 0 deletions
--- a/app/kontakt/page.tsx
+++ b/app/kontakt/page.tsx
@@ -0,0 +1,132 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { useState } from 'react'
+import Navigation from '@/components/Navigation'
+import Footer from '@/components/Footer'
+
+export default function Kontakt() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    subject: '',
+    message: '',
+  })
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // In production, this would send the form data to a backend
+    window.location.href = `mailto:info@doing-it.de?subject=${encodeURIComponent(formData.subject)}&body=${encodeURIComponent(`Name: ${formData.name}\nE-Mail: ${formData.email}\n\nNachricht:\n${formData.message}`)}`
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    })
+  }
+
+  return (
+    <>
+      <Navigation />
+      <main>
+        {/* Hero Section */}
+        <section className="page-hero">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="container"
+          >
+            <h1>Kontakt</h1>
+            <p className="page-hero-subtitle">
+              Wir freuen uns auf Ihre Nachricht
+            </p>
+          </motion.div>
+        </section>
+
+        {/* Contact Section */}
+        <section className="page-content">
+          <div className="container">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6 }}
+            >
+              <form className="contact-form" onSubmit={handleSubmit}>
+                <div className="form-group">
+                  <label htmlFor="name">Name *</label>
+                  <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    required
+                    value={formData.name}
+                    onChange={handleChange}
+                    placeholder="Ihr Name"
+                  />
+                </div>
+
+                <div className="form-group">
+                  <label htmlFor="email">E-Mail *</label>
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    required
+                    value={formData.email}
+                    onChange={handleChange}
+                    placeholder="ihre.email@beispiel.de"
+                  />
+                </div>
+
+                <div className="form-group">
+                  <label htmlFor="subject">Betreff *</label>
+                  <input
+                    type="text"
+                    id="subject"
+                    name="subject"
+                    required
+                    value={formData.subject}
+                    onChange={handleChange}
+                    placeholder="Betreff Ihrer Nachricht"
+                  />
+                </div>
+
+                <div className="form-group">
+                  <label htmlFor="message">Nachricht *</label>
+                  <textarea
+                    id="message"
+                    name="message"
+                    required
+                    value={formData.message}
+                    onChange={handleChange}
+                    placeholder="Ihre Nachricht an uns..."
+                  />
+                </div>
+
+                <button type="submit" className="btn btn-primary" style={{ width: '100%' }}>
+                  Nachricht senden
+                </button>
+              </form>
+
+              <div className="contact-info">
+                <div className="contact-info-item">
+                  <h3>E-Mail</h3>
+                  <a href="mailto:info@doing-it.de">info@doing-it.de</a>
+                </div>
+                <div className="contact-info-item">
+                  <h3>Kontakt</h3>
+                  <p>Wir melden uns schnellstmöglich bei Ihnen zurück.</p>
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  )
+}
+