Handwerker-Website: Guide für mehr Aufträge

// app/projekte/page.jsx
import Image from 'next/image'
 
const projekte = [
  {
    id: 1,
    titel: 'Badsanierung Familie Müller',
    kategorie: 'Sanitär',
    beschreibung: 'Komplette Badsanierung inkl. Fliesen, Sanitärinstallation und Elektrik',
    vorher: '/projekte/bad-vorher.jpg',
    nachher: '/projekte/bad-nachher.jpg',
    leistungen: ['Fliesenarbeiten', 'Sanitärinstallation', 'Elektroinstallation'],
    dauer: '2 Wochen',
    ort: 'Bad Mergentheim',
  },
]
 
export default function ProjektePage() {
  return (
    <div className="container mx-auto px-4 py-12">
      <h1 className="mb-8 text-4xl font-bold">Unsere Referenzprojekte</h1>
 
      <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
        {projekte.map((projekt) => (
          <div key={projekt.id} className="overflow-hidden rounded-lg bg-white shadow-lg">
            <div className="grid grid-cols-2">
              <div className="relative h-48">
                <div className="absolute top-2 left-2 rounded bg-black/70 px-2 py-1 text-sm text-white">
                  Vorher
                </div>
                <Image
                  src={projekt.vorher}
                  alt={`${projekt.titel} Vorher`}
                  fill
                  className="object-cover"
                />
              </div>
              <div className="relative h-48">
                <div className="absolute top-2 left-2 rounded bg-green-600 px-2 py-1 text-sm text-white">
                  Nachher
                </div>
                <Image
                  src={projekt.nachher}
                  alt={`${projekt.titel} Nachher`}
                  fill
                  className="object-cover"
                />
              </div>
            </div>
 
            <div className="p-6">
              <span className="text-primary text-sm font-semibold">{projekt.kategorie}</span>
              <h3 className="mt-2 mb-3 text-xl font-bold">{projekt.titel}</h3>
              <p className="mb-4 text-gray-600">{projekt.beschreibung}</p>
 
              <div className="space-y-2 border-t pt-4">
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">Dauer:</span>
                  <span className="font-semibold">{projekt.dauer}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">Ort:</span>
                  <span className="font-semibold">{projekt.ort}</span>
                </div>
              </div>
 
              <div className="mt-4">
                <p className="mb-2 text-sm text-gray-600">Leistungen:</p>
                <div className="flex flex-wrap gap-2">
                  {projekt.leistungen.map((leistung) => (
                    <span key={leistung} className="rounded-full bg-gray-100 px-3 py-1 text-sm">
                      {leistung}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

'use client'
 
import { useForm } from 'react-hook-form'
 
export default function AnfrageFormular() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm()
 
  const onSubmit = async (data) => {
    await fetch('/api/anfrage', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    })
 
    alert('Anfrage gesendet! Wir melden uns innerhalb von 24 Stunden.')
  }
 
  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 rounded-lg bg-white p-8 shadow">
      <h2 className="text-2xl font-bold">Jetzt unverbindlich anfragen</h2>
 
      <div className="grid gap-4 md:grid-cols-2">
        <input
          {...register('name', { required: true })}
          placeholder="Ihr Name *"
          className="rounded border px-4 py-3"
        />
        {errors.name && <span className="text-sm text-red-500">Name erforderlich</span>}
 
        <input
          {...register('telefon', { required: true })}
          type="tel"
          placeholder="Telefon *"
          className="rounded border px-4 py-3"
        />
      </div>
 
      <input
        {...register('email', { required: true })}
        type="email"
        placeholder="E-Mail *"
        className="w-full rounded border px-4 py-3"
      />
 
      <select
        {...register('projektart', { required: true })}
        className="w-full rounded border px-4 py-3"
      >
        <option value="">Projekt-Art wählen *</option>
        <option value="neubau">Neubau</option>
        <option value="sanierung">Sanierung</option>
        <option value="reparatur">Reparatur</option>
        <option value="wartung">Wartung</option>
      </select>
 
      <select {...register('dringlichkeit')} className="w-full rounded border px-4 py-3">
        <option value="">Dringlichkeit</option>
        <option value="sofort">Sofort / Notfall</option>
        <option value="bald">1-2 Wochen</option>
        <option value="flexibel">Flexibel</option>
      </select>
 
      <textarea
        {...register('nachricht', { required: true })}
        placeholder="Beschreiben Sie Ihr Projekt *"
        rows={5}
        className="w-full rounded border px-4 py-3"
      />
 
      <button
        type="submit"
        className="bg-primary hover:bg-primary-dark w-full rounded px-8 py-4 font-semibold text-white"
      >
        Kostenlose Anfrage senden
      </button>
 
      <p className="text-sm text-gray-600">
        * Pflichtfelder. Wir melden uns innerhalb von 24 Stunden bei Ihnen.
      </p>
    </form>
  )
}

## Unsere Leistungen
 
### Sanitärarbeiten
 
- Badsanierung komplett
- Heizungsinstallation
- Rohrleitungsbau
- Wartung & Reparatur
 
### Elektroarbeiten
 
- Elektroinstallationen Neubau
- Elektro-Sanierung Altbau
- Smart Home Integration
- E-Mobilität / Wallbox
 
### Fliesenarbeiten
 
- Badezimmer-Fliesen
- Küchen-Fliesen
- Terrassen & Balkone
- Naturstein-Verlegung

<header className="sticky top-0 z-50 bg-white shadow-sm">
  <div className="container mx-auto px-4 py-4">
    <div className="flex items-center justify-between">
      <Logo />
 
      <div className="flex items-center gap-6">
        {/* Telefon */}
        <a
          href="tel:+497931123456"
          className="text-primary flex items-center gap-2 text-lg font-semibold"
        >
          <Phone size={20} />
          <span className="hidden md:inline">07931 123456</span>
        </a>
 
        {/* Öffnungszeiten */}
        <div className="hidden text-sm text-gray-600 lg:block">
          <div>Mo-Fr: 7:00 - 17:00</div>
          <div>Sa: 8:00 - 12:00</div>
        </div>
 
        {/* CTA Button */}
        <a
          href="/anfrage"
          className="bg-primary hover:bg-primary-dark rounded px-6 py-3 font-semibold text-white"
        >
          Jetzt anfragen
        </a>
      </div>
    </div>
  </div>
</header>

export const metadata = {
  title: 'Meisterbetrieb Müller - Sanitär & Heizung Bad Mergentheim',
  description:
    'Ihr Meisterbetrieb für Sanitär, Heizung und Badsanierung in Bad Mergentheim ✓ 25 Jahre Erfahrung ✓ 24h Notdienst ✓ Festpreisgarantie. Jetzt anfragen!',
}
 
export default function HomePage() {
  return (
    <>
      <h1>Sanitär & Heizung Meisterbetrieb in Bad Mergentheim</h1>
 
      <p>
        Willkommen bei Ihrem Meisterbetrieb für Sanitär, Heizung und Badsanierung in Bad Mergentheim
        und im Main-Tauber-Kreis. Seit 25 Jahren sind wir Ihr zuverlässiger Partner für alle
        Sanitär- und Heizungsarbeiten.
      </p>
 
      <section>
        <h2>Unsere Leistungen in Bad Mergentheim</h2>
        <p>
          Als Meisterbetrieb bieten wir Ihnen in Bad Mergentheim, Wertheim, Lauda-Königshofen und
          Umgebung ein umfassendes Leistungsspektrum...
        </p>
      </section>
    </>
  )
}

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    "name": "Meisterbetrieb Müller GmbH",
    "image": "https://meisterbetrieb-mueller.de/logo.jpg",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "Handwerkerstraße 15",
      "addressLocality": "Bad Mergentheim",
      "postalCode": "97980",
      "addressCountry": "DE"
    },
    "geo": {
      "@type": "GeoCoordinates",
      "latitude": 49.4922,
      "longitude": 9.7736
    },
    "telephone": "+497931123456",
    "openingHoursSpecification": [
      {
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
        "opens": "07:00",
        "closes": "17:00"
      }
    ],
    "priceRange": "€€",
    "areaServed": {
      "@type": "GeoCircle",
      "geoMidpoint": {
        "@type": "GeoCoordinates",
        "latitude": 49.4922,
        "longitude": 9.7736
      },
      "geoRadius": "50000"
    }
  }
</script>

const testimonials = [
  {
    name: 'Familie Schmidt',
    projekt: 'Badsanierung',
    bewertung: 5,
    text: 'Absolut professionelle Arbeit! Von der Planung bis zur Ausführung alles perfekt. Saubere Arbeit, pünktlich fertig. Sehr empfehlenswert!',
    ort: 'Bad Mergentheim',
  },
]
 
export default function Testimonials() {
  return (
    <section className="bg-gray-50 py-16">
      <div className="container mx-auto px-4">
        <h2 className="mb-12 text-center text-3xl font-bold">Das sagen unsere Kunden</h2>
 
        <div className="grid gap-8 md:grid-cols-3">
          {testimonials.map((testimonial, index) => (
            <div key={index} className="rounded-lg bg-white p-6 shadow">
              <div className="mb-4 flex gap-1">
                {[...Array(5)].map((_, i) => (
                  <Star
                    key={i}
                    size={20}
                    className={
                      i < testimonial.bewertung
                        ? 'fill-yellow-400 text-yellow-400'
                        : 'text-gray-300'
                    }
                  />
                ))}
              </div>
 
              <p className="mb-4 text-gray-700">"{testimonial.text}"</p>
 
              <div className="border-t pt-4">
                <p className="font-semibold">{testimonial.name}</p>
                <p className="text-sm text-gray-600">
                  {testimonial.projekt} • {testimonial.ort}
                </p>
              </div>
            </div>
          ))}
        </div>
 
        <div className="mt-8 text-center">
          <a
            href="https://g.page/r/YOUR_BUSINESS_ID/review"
            target="_blank"
            className="text-primary inline-flex items-center gap-2 font-semibold"
          >
            Jetzt auf Google bewerten <ExternalLink size={16} />
          </a>
        </div>
      </div>
    </section>
  )
}