v1 production

app/kontakt/page.tsx

@@ -1,36 +1,14 @@
 '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 }}
@@ -45,7 +23,6 @@ export default function Kontakt() {
           </motion.div>
         </section>
 
-        {/* Contact Section */}
         <section className="page-content">
           <div className="container">
             <motion.div
@@ -53,73 +30,55 @@ export default function Kontakt() {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
               transition={{ duration: 0.6 }}
+              className="content-block"
             >
-              <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>
+              <h2>Kontaktieren Sie uns</h2>
+              <p style={{ marginBottom: '40px' }}>
+                Haben Sie Fragen oder möchten Sie mehr über unsere Angebote erfahren? Schreiben Sie uns eine E-Mail oder buchen Sie direkt einen Termin.
+              </p>
+              
+              <a 
+                href="mailto:info@doing-it.de" 
+                className="btn btn-primary btn-large"
+                style={{ 
+                  display: 'inline-block',
+                  marginBottom: '40px',
+                  fontSize: '20px',
+                  padding: '20px 40px'
+                }}
+              >
+                E-Mail senden: info@doing-it.de
+              </a>
+            </motion.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>
+            {/* Cal.com Widget */}
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="cal-widget"
+            >
+              <div 
+                style={{
+                  width: '100%',
+                  height: '700px',
+                  border: '1px solid rgba(255, 255, 255, 0.1)',
+                  borderRadius: '20px',
+                  overflow: 'hidden',
+                  background: 'var(--color-card)'
+                }}
+              >
+                <iframe
+                  src="https://cal.com/embed/doing-it-de"
+                  style={{
+                    width: '100%',
+                    height: '100%',
+                    border: 'none',
+                    borderRadius: '20px'
+                  }}
+                  title="Cal.com Booking"
+                />
               </div>
             </motion.div>
           </div>
@@ -129,4 +88,3 @@ export default function Kontakt() {
     </>
   )
 }
-