tknuth
/
energie-finder-profi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

kleinigkeiten und dropdownmenu

This commit is contained in:
knuthtimo-lab 2025-09-05 11:04:14 +02:00
parent 36067596e6
commit 1be8b2e9bd
7 changed files with 272 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/Footer.tsx
View File

@ -1,5 +1,6 @@
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Link } from "react-router-dom";
import {
Mail,
Phone,
@ -52,29 +53,63 @@ const Footer = () => {
<h3 className="text-lg font-semibold">Schnellzugriff</h3>
<ul className="space-y-2 text-sm">
<li>
<a href="/" className="text-gray-300 hover:text-white transition-colors">
<Link
to="/solar"
className="text-gray-300 hover:text-white transition-colors"
onClick={() => window.scrollTo(0, 0)}
>
Solar-Installation
</a>
</Link>
</li>
<li>
<a href="/" className="text-gray-300 hover:text-white transition-colors">
<Link
to="/wind"
className="text-gray-300 hover:text-white transition-colors"
onClick={() => window.scrollTo(0, 0)}
>
Windenergie
</a>
</Link>
</li>
<li>
<a href="/" className="text-gray-300 hover:text-white transition-colors">
<Link to="/installateur-finden" className="text-gray-300 hover:text-white transition-colors">
Installateur finden
</a>
</Link>
</li>
<li>
<a href="/" className="text-gray-300 hover:text-white transition-colors">
Förderungen 2025
</a>
<Link
to="/solar"
className="text-gray-300 hover:text-white transition-colors"
onClick={() => {
setTimeout(() => {
const calculatorElement = document.querySelector('[data-calculator]') ||
document.querySelector('.calculator') ||
document.querySelector('h2');
if (calculatorElement) {
calculatorElement.scrollIntoView({ behavior: 'smooth' });
}
}, 100);
}}
>
Solar-Kostenrechner
</Link>
</li>
<li>
<a href="/" className="text-gray-300 hover:text-white transition-colors">
Kostenrechner
</a>
<Link
to="/wind"
className="text-gray-300 hover:text-white transition-colors"
onClick={() => {
setTimeout(() => {
const calculatorElement = document.querySelector('[data-calculator]') ||
document.querySelector('.calculator') ||
document.querySelector('h2');
if (calculatorElement) {
calculatorElement.scrollIntoView({ behavior: 'smooth' });
}
}, 100);
}}
>
Wind-Kostenrechner
</Link>
</li>
</ul>
</div>

65
src/components/HeroSection.tsx
View File

@ -19,7 +19,7 @@ const HeroSection = () => {
{/* Content */}
<div className="container mx-auto px-4 relative z-10">
<div className="max-w-2xl text-white">
<div className="max-w-4xl text-white">
{/* Clean headline with subtle color accents */}
<div className="mb-6">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
@ -47,30 +47,50 @@ const HeroSection = () => {
</p>
{/* Clean search box */}
<div className="bg-white/15 backdrop-blur-sm border border-white/30 rounded-2xl p-6 mb-8">
<div className="flex flex-col md:flex-row gap-4">
<div className="flex-1 relative group">
<MapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 text-cyan-200 w-5 h-5" />
<Input
placeholder="PLZ oder Stadt eingeben..."
className="pl-10 bg-white/20 border-white/30 text-white placeholder:text-white/70 h-12 focus:border-cyan-200 focus:ring-cyan-200/20 transition-all duration-300"
/>
<div className="bg-white/15 backdrop-blur-sm border border-white/30 rounded-2xl px-12 py-8 mb-8 max-w-4xl mx-auto">
<div className="flex flex-col md:flex-row gap-6">
<div className="flex-1 relative group min-w-0">
<MapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 text-cyan-200 w-5 h-5 z-10" />
<select className="pl-10 bg-white border-gray-300 text-gray-900 h-12 w-full rounded-md border px-3 py-2 text-sm focus:border-cyan-200 focus:ring-2 focus:ring-cyan-200/20 focus:outline-none min-w-[200px]">
<option value="">Bundesland wählen</option>
<option value="all">Alle Bundesländer</option>
<option value="Baden-Württemberg">Baden-Württemberg</option>
<option value="Bayern">Bayern</option>
<option value="Berlin">Berlin</option>
<option value="Brandenburg">Brandenburg</option>
<option value="Bremen">Bremen</option>
<option value="Hamburg">Hamburg</option>
<option value="Hessen">Hessen</option>
<option value="Mecklenburg-Vorpommern">Mecklenburg-Vorpommern</option>
<option value="Niedersachsen">Niedersachsen</option>
<option value="Nordrhein-Westfalen">Nordrhein-Westfalen</option>
<option value="Rheinland-Pfalz">Rheinland-Pfalz</option>
<option value="Saarland">Saarland</option>
<option value="Sachsen">Sachsen</option>
<option value="Sachsen-Anhalt">Sachsen-Anhalt</option>
<option value="Schleswig-Holstein">Schleswig-Holstein</option>
<option value="Thüringen">Thüringen</option>
</select>
</div>
<div className="flex-1 relative group">
<Zap className="absolute left-3 top-1/2 transform -translate-y-1/2 text-yellow-200 w-5 h-5" />
<select className="w-full h-12 pl-10 pr-4 bg-white/20 border-white/30 rounded-lg text-white appearance-none focus:border-yellow-200 focus:ring-yellow-200/20 transition-all duration-300">
<div className="flex-1 relative group min-w-0">
<Zap className="absolute left-3 top-1/2 transform -translate-y-1/2 text-yellow-200 w-5 h-5 z-10" />
<select className="pl-10 bg-white border-gray-300 text-gray-900 h-12 w-full rounded-md border px-3 py-2 text-sm focus:border-yellow-200 focus:ring-2 focus:ring-yellow-200/20 focus:outline-none min-w-[200px]">
<option value="">Energieart wählen</option>
<option value="all">Alle Energiearten</option>
<option value="solar">Solar</option>
<option value="wind">Wind</option>
</select>
</div>
<Button
asChild
variant="hero"
size="lg"
className="bg-cyan-600 hover:bg-cyan-700 text-white border-0 shadow-lg hover:shadow-xl transition-all duration-300"
>
<Search className="w-5 h-5 mr-2" />
Installateur Finden
<Link to="/installateur-finden">
<Search className="w-5 h-5 mr-2" />
Installateur Finden
</Link>
</Button>
</div>
</div>
@ -80,15 +100,11 @@ const HeroSection = () => {
{/* Clean floating stats */}
<div className="absolute bottom-8 right-8 hidden xl:block">
<div className="bg-white/20 backdrop-blur-sm border border-white/30 rounded-2xl p-6 text-white shadow-lg">
<div className="grid grid-cols-3 gap-6 text-center">
<div className="grid grid-cols-2 gap-6 text-center">
<div>
<div className="text-3xl font-bold text-yellow-200">500+</div>
<div className="text-3xl font-bold text-yellow-200">60+</div>
<div className="text-sm text-white/90 font-medium">Installateure</div>
</div>
<div>
<div className="text-3xl font-bold text-cyan-200">2,500+</div>
<div className="text-sm text-white/90 font-medium">Projekte</div>
</div>
<div>
<div className="text-3xl font-bold text-green-200">4.8★</div>
<div className="text-sm text-white/90 font-medium">Bewertung</div>
@ -98,19 +114,14 @@ const HeroSection = () => {
</div>
{/* SEO: Additional content section for better indexing */}
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent py-8 hidden lg:block">
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent py-3 hidden lg:block">
<div className="container mx-auto px-4">
<div className="grid grid-cols-3 gap-8 text-white/90">
<div className="grid grid-cols-2 gap-8 text-white/90 max-w-2xl mx-auto">
<div className="text-center">
<Calculator className="w-8 h-8 mx-auto mb-2 text-yellow-300" />
<h3 className="font-semibold mb-1">Kostenlose Rechner</h3>
<p className="text-sm">Solar- und Windenergie berechnen</p>
</div>
<div className="text-center">
<Award className="w-8 h-8 mx-auto mb-2 text-cyan-300" />
<h3 className="font-semibold mb-1">Förderprogramme</h3>
<p className="text-sm">BAFA, KfW & kommunale Zuschüsse</p>
</div>
<div className="text-center">
<Shield className="w-8 h-8 mx-auto mb-2 text-green-300" />
<h3 className="font-semibold mb-1">Verifizierte Experten</h3>

45
src/components/SolarCalculator.tsx
View File

@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { HelpCircle } from 'lucide-react';
import { analyticsService, quoteService } from '@/lib/database';
@ -290,17 +289,16 @@ const SolarCalculator = () => {
Dachtyp
<HelpCircle className="inline w-4 h-4 ml-1 text-gray-400" />
</label>
<Select value={roofType} onValueChange={setRoofType}>
<SelectTrigger className="h-12 border-2 border-gray-200">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="asphalt">Ziegeldach</SelectItem>
<SelectItem value="tile">Tonziegel</SelectItem>
<SelectItem value="metal">Metalldach</SelectItem>
<SelectItem value="flat">Flachdach</SelectItem>
</SelectContent>
</Select>
<select
value={roofType}
onChange={(e) => setRoofType(e.target.value)}
className="h-12 w-full rounded-md border-2 border-gray-200 bg-white px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
>
<option value="asphalt">Ziegeldach</option>
<option value="tile">Tonziegel</option>
<option value="metal">Metalldach</option>
<option value="flat">Flachdach</option>
</select>
</div>
</div>
</CardContent>
@ -314,18 +312,17 @@ const SolarCalculator = () => {
Tägliche Sonnenstunden
<HelpCircle className="inline w-4 h-4 ml-1 text-gray-400" />
</label>
<Select value={sunlightHours} onValueChange={setSunlightHours}>
<SelectTrigger className="h-12 border-2 border-gray-200">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="4">4 Stunden (Weniger sonnige Gebiete)</SelectItem>
<SelectItem value="5">5 Stunden (Mäßige Sonne)</SelectItem>
<SelectItem value="6">6 Stunden (Gute Sonneneinstrahlung)</SelectItem>
<SelectItem value="7">7 Stunden (Sehr sonnig)</SelectItem>
<SelectItem value="8">8+ Stunden (Ausgezeichnete Sonne)</SelectItem>
</SelectContent>
</Select>
<select
value={sunlightHours}
onChange={(e) => setSunlightHours(e.target.value)}
className="h-12 w-full rounded-md border-2 border-gray-200 bg-white px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
>
<option value="4">4 Stunden (Weniger sonnige Gebiete)</option>
<option value="5">5 Stunden (Mäßige Sonne)</option>
<option value="6">6 Stunden (Gute Sonneneinstrahlung)</option>
<option value="7">7 Stunden (Sehr sonnig)</option>
<option value="8">8+ Stunden (Ausgezeichnete Sonne)</option>
</select>
</div>
<div>

68
src/components/WindCalculator.tsx
View File

@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { HelpCircle, Wind, Zap } from 'lucide-react';
import { analyticsService } from '@/lib/database';
@ -285,17 +284,16 @@ const WindCalculator = () => {
Grundstücksart
<HelpCircle className="inline w-4 h-4 ml-1 text-gray-400" />
</label>
<Select value={zoning} onValueChange={setZoning}>
<SelectTrigger className="h-12 border-2 border-green-200">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="rural">Ländlich</SelectItem>
<SelectItem value="suburban">Vorstädtisch</SelectItem>
<SelectItem value="urban">Städtisch</SelectItem>
<SelectItem value="agricultural">Landwirtschaftlich</SelectItem>
</SelectContent>
</Select>
<select
value={zoning}
onChange={(e) => setZoning(e.target.value)}
className="h-12 w-full rounded-md border-2 border-green-200 bg-white px-3 py-2 text-sm focus:border-emerald-500 focus:outline-none"
>
<option value="rural">Ländlich</option>
<option value="suburban">Vorstädtisch</option>
<option value="urban">Städtisch</option>
<option value="agricultural">Landwirtschaftlich</option>
</select>
</div>
</div>
</CardContent>
@ -309,18 +307,17 @@ const WindCalculator = () => {
Durchschnittliche Windgeschwindigkeit (km/h)
<HelpCircle className="inline w-4 h-4 ml-1 text-gray-400" />
</label>
<Select value={windSpeed} onValueChange={setWindSpeed}>
<SelectTrigger className="h-12 border-2 border-green-200">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="8">13 km/h (Schwache Windzone)</SelectItem>
<SelectItem value="10">16 km/h (Mäßiger Wind)</SelectItem>
<SelectItem value="12">19 km/h (Gute Windressource)</SelectItem>
<SelectItem value="15">24 km/h (Ausgezeichneter Wind)</SelectItem>
<SelectItem value="18">29+ km/h (Hervorragender Wind)</SelectItem>
</SelectContent>
</Select>
<select
value={windSpeed}
onChange={(e) => setWindSpeed(e.target.value)}
className="h-12 w-full rounded-md border-2 border-green-200 bg-white px-3 py-2 text-sm focus:border-emerald-500 focus:outline-none"
>
<option value="8">13 km/h (Schwache Windzone)</option>
<option value="10">16 km/h (Mäßiger Wind)</option>
<option value="12">19 km/h (Gute Windressource)</option>
<option value="15">24 km/h (Ausgezeichneter Wind)</option>
<option value="18">29+ km/h (Hervorragender Wind)</option>
</select>
</div>
<div>
@ -328,18 +325,17 @@ const WindCalculator = () => {
Max. erlaubte Anlagenhöhe (m)
<HelpCircle className="inline w-4 h-4 ml-1 text-gray-400" />
</label>
<Select value={turbineHeight} onValueChange={setTurbineHeight}>
<SelectTrigger className="h-12 border-2 border-green-200">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="40">12 m (Eingeschränkte Gebiete)</SelectItem>
<SelectItem value="60">18 m (Vorstädtisches Limit)</SelectItem>
<SelectItem value="80">24 m (Standard Wohngebiet)</SelectItem>
<SelectItem value="100">30 m (Ländliche Gebiete)</SelectItem>
<SelectItem value="120">36+ m (Keine Beschränkungen)</SelectItem>
</SelectContent>
</Select>
<select
value={turbineHeight}
onChange={(e) => setTurbineHeight(e.target.value)}
className="h-12 w-full rounded-md border-2 border-green-200 bg-white px-3 py-2 text-sm focus:border-emerald-500 focus:outline-none"
>
<option value="40">12 m (Eingeschränkte Gebiete)</option>
<option value="60">18 m (Vorstädtisches Limit)</option>
<option value="80">24 m (Standard Wohngebiet)</option>
<option value="100">30 m (Ländliche Gebiete)</option>
<option value="120">36+ m (Keine Beschränkungen)</option>
</select>
</div>
<div>

4
src/components/ui/select.tsx
View File

@ -73,9 +73,9 @@ const SelectContent = React.forwardRef<
<SelectPrimitive.Content
ref={ref}
className={cn(
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md [&]:!transition-none [&]:!duration-0 [&]:!animate-none",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
"",
className
)}
position={position}

73
src/pages/Index.tsx
View File

@ -160,7 +160,7 @@ const Index = () => {
{/* SEO: Rich content section for better indexing */}
<section className="py-16 bg-gradient-to-b from-background to-secondary/10">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12 max-w-4xl mx-auto">
{/* SEO Content Block 1: Installateur finden */}
<Card className="border-l-4 border-l-orange-500">
<CardHeader>
@ -191,37 +191,7 @@ const Index = () => {
</CardContent>
</Card>
{/* SEO Content Block 2: Förderprogramme */}
<Card className="border-l-4 border-l-green-500">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-green-700">
<Award className="w-5 h-5" />
Förderprogramme 2025
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-muted-foreground mb-4">
Aktuelle Förderungen für erneuerbare Energien: BAFA, KfW und kommunale
Zuschüsse je nach Bundesland und Projektgröße.
</p>
<div className="space-y-2 text-sm">
<div className="flex items-center gap-2">
<CheckCircle className="w-4 h-4 text-green-600" />
<span>BAFA bis 500€ für Balkonkraftwerke</span>
</div>
<div className="flex items-center gap-2">
<CheckCircle className="w-4 h-4 text-green-600" />
<span>KfW-Kredite mit Tilgungszuschuss</span>
</div>
<div className="flex items-center gap-2">
<CheckCircle className="w-4 h-4 text-green-600" />
<span>Kommunale Förderprogramme</span>
</div>
</div>
</CardContent>
</Card>
{/* SEO Content Block 3: Regionale Expertise */}
{/* SEO Content Block 2: Regionale Expertise */}
<Card className="border-l-4 border-l-blue-500">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-blue-700">
@ -271,13 +241,6 @@ const Index = () => {
regionale Expertise vergleichen. Lokale Installateure kennen die regionalen Vorgaben.
</p>
</div>
<div className="bg-white p-6 rounded-lg shadow-sm">
<h3 className="font-semibold mb-3 text-lg">Welche Förderungen gibt es 2025?</h3>
<p className="text-muted-foreground">
BAFA-Förderung für Balkonkraftwerke (bis 500€), KfW-Kredite mit Tilgungszuschuss,
EEG-Vergütung für Überschussstrom und kommunale Zuschüsse je nach Bundesland.
</p>
</div>
<div className="bg-white p-6 rounded-lg shadow-sm">
<h3 className="font-semibold mb-3 text-lg">Was kostet eine Solar- oder Windanlage?</h3>
<p className="text-muted-foreground">
@ -309,7 +272,21 @@ const Index = () => {
Berechnen Sie Ihre Solareinsparungen und vergleichen Sie Angebote
</p>
<Button variant="outline" className="w-full" asChild>
<Link to="/solar">Zum Solarrechner</Link>
<Link
to="/solar"
onClick={() => {
setTimeout(() => {
const calculatorElement = document.querySelector('[data-calculator]') ||
document.querySelector('.calculator') ||
document.querySelector('h2');
if (calculatorElement) {
calculatorElement.scrollIntoView({ behavior: 'smooth' });
}
}, 100);
}}
>
Zum Solarrechner
</Link>
</Button>
</Card>
<Card className="text-center p-8 hover:shadow-lg transition-shadow">
@ -319,7 +296,21 @@ const Index = () => {
Windenergie berechnen: Ertrag, Kosten & Angebote vergleichen
</p>
<Button variant="outline" className="w-full" asChild>
<Link to="/wind">Zum Windrechner</Link>
<Link
to="/wind"
onClick={() => {
setTimeout(() => {
const calculatorElement = document.querySelector('[data-calculator]') ||
document.querySelector('.calculator') ||
document.querySelector('h2');
if (calculatorElement) {
calculatorElement.scrollIntoView({ behavior: 'smooth' });
}
}, 100);
}}
>
Zum Windrechner
</Link>
</Button>
</Card>
<Card className="text-center p-8 hover:shadow-lg transition-shadow">

174
src/pages/InstallateurFinden.tsx
View File

@ -1,9 +1,8 @@
import { useState, useEffect } from "react";
import { useSearchParams } from "react-router-dom";
import { useSearchParams, Link } from "react-router-dom";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Search, MapPin, Star, Phone, Mail, Globe, Filter, AlertCircle, Calculator, Award, Shield, TrendingUp, Map, Users, Clock, CheckCircle } from "lucide-react";
import Header from "@/components/Header";
@ -271,38 +270,39 @@ const InstallateurFinden = () => {
e.preventDefault(); // Prevent default button behavior
e.stopPropagation(); // Stop event bubbling
if (currentPage >= 2) {
// After 3 clicks (30 installers), show all remaining
setShowAll(true);
setCurrentPage(0);
await loadInstallers(false);
} else {
// Load next 10 installers
const nextPage = currentPage + 1;
setCurrentPage(nextPage);
// Hard cut at 69 installers - don't load more after that
if (displayedInstallers.length >= 69) {
return;
}
// Load next 10 installers, but limit to 69 total
const nextPage = currentPage + 1;
setCurrentPage(nextPage);
try {
setLoading(true);
setError(null);
try {
setLoading(true);
setError(null);
const filters = {
energyType: energyType && energyType !== "all" ? energyType : undefined,
bundesland: bundesland && bundesland !== "all" ? bundesland : undefined,
searchTerm: searchTerm || undefined,
limit: 10,
offset: nextPage * 10
};
const filters = {
energyType: energyType && energyType !== "all" ? energyType : undefined,
bundesland: bundesland && bundesland !== "all" ? bundesland : undefined,
searchTerm: searchTerm || undefined,
limit: 10,
offset: nextPage * 10
};
const result = await installerService.getInstallers(filters);
const newInstallers = [...displayedInstallers, ...(result.data || [])];
setDisplayedInstallers(newInstallers);
setTotalInstallers(result.totalCount || 0);
} catch (err) {
console.error('Error loading more installers:', err);
setError('Fehler beim Laden weiterer Installateure. Bitte versuchen Sie es später erneut.');
} finally {
setLoading(false);
}
const result = await installerService.getInstallers(filters);
const newInstallers = [...displayedInstallers, ...(result.data || [])];
// Hard cut at 69 installers
const limitedInstallers = newInstallers.slice(0, 69);
setDisplayedInstallers(limitedInstallers);
setTotalInstallers(Math.max(limitedInstallers.length, result.totalCount || 0));
} catch (err) {
console.error('Error loading more installers:', err);
setError('Fehler beim Laden weiterer Installateure. Bitte versuchen Sie es später erneut.');
} finally {
setLoading(false);
}
};
@ -547,41 +547,39 @@ const InstallateurFinden = () => {
/>
</div>
<Select value={energyType} onValueChange={setEnergyType}>
<SelectTrigger>
<SelectValue placeholder="Energieart wählen" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">Alle Energiearten</SelectItem>
<SelectItem value="solar">Solar</SelectItem>
<SelectItem value="wind">Wind</SelectItem>
</SelectContent>
</Select>
<select
value={energyType}
onChange={(e) => setEnergyType(e.target.value)}
className="h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
>
<option value="all">Alle Energiearten</option>
<option value="solar">Solar</option>
<option value="wind">Wind</option>
</select>
<Select value={bundesland} onValueChange={setBundesland}>
<SelectTrigger>
<SelectValue placeholder="Bundesland wählen" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">Alle Bundesländer</SelectItem>
<SelectItem value="Baden-Württemberg">Baden-Württemberg</SelectItem>
<SelectItem value="Bayern">Bayern</SelectItem>
<SelectItem value="Berlin">Berlin</SelectItem>
<SelectItem value="Brandenburg">Brandenburg</SelectItem>
<SelectItem value="Bremen">Bremen</SelectItem>
<SelectItem value="Hamburg">Hamburg</SelectItem>
<SelectItem value="Hessen">Hessen</SelectItem>
<SelectItem value="Mecklenburg-Vorpommern">Mecklenburg-Vorpommern</SelectItem>
<SelectItem value="Niedersachsen">Niedersachsen</SelectItem>
<SelectItem value="Nordrhein-Westfalen">Nordrhein-Westfalen</SelectItem>
<SelectItem value="Rheinland-Pfalz">Rheinland-Pfalz</SelectItem>
<SelectItem value="Saarland">Saarland</SelectItem>
<SelectItem value="Sachsen">Sachsen</SelectItem>
<SelectItem value="Sachsen-Anhalt">Sachsen-Anhalt</SelectItem>
<SelectItem value="Schleswig-Holstein">Schleswig-Holstein</SelectItem>
<SelectItem value="Thüringen">Thüringen</SelectItem>
</SelectContent>
</Select>
<select
value={bundesland}
onChange={(e) => setBundesland(e.target.value)}
className="h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
>
<option value="all">Alle Bundesländer</option>
<option value="Baden-Württemberg">Baden-Württemberg</option>
<option value="Bayern">Bayern</option>
<option value="Berlin">Berlin</option>
<option value="Brandenburg">Brandenburg</option>
<option value="Bremen">Bremen</option>
<option value="Hamburg">Hamburg</option>
<option value="Hessen">Hessen</option>
<option value="Mecklenburg-Vorpommern">Mecklenburg-Vorpommern</option>
<option value="Niedersachsen">Niedersachsen</option>
<option value="Nordrhein-Westfalen">Nordrhein-Westfalen</option>
<option value="Rheinland-Pfalz">Rheinland-Pfalz</option>
<option value="Saarland">Saarland</option>
<option value="Sachsen">Sachsen</option>
<option value="Sachsen-Anhalt">Sachsen-Anhalt</option>
<option value="Schleswig-Holstein">Schleswig-Holstein</option>
<option value="Thüringen">Thüringen</option>
</select>
<Button onClick={handleReset} variant="outline" className="w-full">
Filter zurücksetzen
@ -653,12 +651,12 @@ const InstallateurFinden = () => {
{/* Results */}
<div className="mb-4">
<p className="text-muted-foreground">
{displayedInstallers.length} von {totalInstallers} Installateur{totalInstallers !== 1 ? 'e' : ''} angezeigt
{displayedInstallers.length} von {Math.max(displayedInstallers.length, totalInstallers)} Installateur{Math.max(displayedInstallers.length, totalInstallers) !== 1 ? 'e' : ''} angezeigt
</p>
</div>
{/* Installer Cards */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-16">
{displayedInstallers.map((installer) => (
<Card key={installer.id} className="hover:shadow-lg transition-shadow">
<CardHeader>
@ -769,7 +767,7 @@ const InstallateurFinden = () => {
</div>
{/* Show More Button */}
{displayedInstallers.length > 0 && displayedInstallers.length < totalInstallers && (
{displayedInstallers.length > 0 && displayedInstallers.length < 69 && displayedInstallers.length < totalInstallers && (
<div className="text-center mt-12 mb-16">
<Button
type="button"
@ -778,7 +776,7 @@ const InstallateurFinden = () => {
size="lg"
className="px-12 py-3 text-lg font-semibold"
>
{currentPage >= 2 ? 'Alle anzeigen' : 'Mehr anzeigen'}
Mehr anzeigen
</Button>
</div>
)}
@ -848,8 +846,22 @@ const InstallateurFinden = () => {
<p className="text-muted-foreground mb-4">
Berechnen Sie Ihre Solareinsparungen und vergleichen Sie Angebote
</p>
<Button variant="outline" className="w-full">
Zum Solarrechner
<Button variant="outline" className="w-full" asChild>
<Link
to="/solar"
onClick={() => {
setTimeout(() => {
const calculatorElement = document.querySelector('[data-calculator]') ||
document.querySelector('.calculator') ||
document.querySelector('h2');
if (calculatorElement) {
calculatorElement.scrollIntoView({ behavior: 'smooth' });
}
}, 100);
}}
>
Zum Solarrechner
</Link>
</Button>
</Card>
<Card className="text-center p-6 hover:shadow-md transition-shadow">
@ -858,8 +870,22 @@ const InstallateurFinden = () => {
<p className="text-muted-foreground mb-4">
Windenergie berechnen: Ertrag, Kosten & Angebote vergleichen
</p>
<Button variant="outline" className="w-full">
Zum Windrechner
<Button variant="outline" className="w-full" asChild>
<Link
to="/wind"
onClick={() => {
setTimeout(() => {
const calculatorElement = document.querySelector('[data-calculator]') ||
document.querySelector('.calculator') ||
document.querySelector('h2');
if (calculatorElement) {
calculatorElement.scrollIntoView({ behavior: 'smooth' });
}
}, 100);
}}
>
Zum Windrechner
</Link>
</Button>
</Card>
</div>