Database eingefügt
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import Header from "@/components/Header";
|
||||
import HeroSection from "@/components/HeroSection";
|
||||
import EnergyTypesSection from "@/components/EnergyTypesSection";
|
||||
import CalculatorNavigation from "@/components/CalculatorNavigation";
|
||||
import WhyChooseUsSection from "@/components/WhyChooseUsSection";
|
||||
import Footer from "@/components/Footer";
|
||||
|
||||
@@ -11,6 +12,7 @@ const Index = () => {
|
||||
<main>
|
||||
<HeroSection />
|
||||
<EnergyTypesSection />
|
||||
<CalculatorNavigation />
|
||||
<WhyChooseUsSection />
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
382
src/pages/InstallateurFinden.tsx
Normal file
382
src/pages/InstallateurFinden.tsx
Normal file
@@ -0,0 +1,382 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSearchParams } 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 } from "lucide-react";
|
||||
import Header from "@/components/Header";
|
||||
import { installerService, analyticsService } from "@/lib/database";
|
||||
import { cleanAndReseedDatabase } from "@/lib/cleanDatabase";
|
||||
import { debugDatabase, forceDeleteAll, testConnection } from "@/lib/debugDatabase";
|
||||
import type { Database } from "@/integrations/supabase/types";
|
||||
|
||||
type Installer = Database['public']['Tables']['installers']['Row'];
|
||||
|
||||
const InstallateurFinden = () => {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [installers, setInstallers] = useState<Installer[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState(searchParams.get("search") || "");
|
||||
const [energyType, setEnergyType] = useState(searchParams.get("type") || "all");
|
||||
const [location, setLocation] = useState(searchParams.get("location") || "");
|
||||
|
||||
// Load installers from database
|
||||
const loadInstallers = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const filters = {
|
||||
energyType: energyType && energyType !== "all" ? energyType : undefined,
|
||||
location: location || undefined,
|
||||
searchTerm: searchTerm || undefined
|
||||
};
|
||||
|
||||
const data = await installerService.getInstallers(filters);
|
||||
setInstallers(data || []);
|
||||
|
||||
// Track search event
|
||||
if (searchTerm || energyType !== "all" || location) {
|
||||
analyticsService.trackEvent({
|
||||
event_type: 'installer_search',
|
||||
page_url: window.location.pathname,
|
||||
event_data: filters,
|
||||
user_agent: navigator.userAgent,
|
||||
session_id: sessionStorage.getItem('session_id') || 'anonymous'
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error loading installers:', err);
|
||||
setError('Fehler beim Laden der Installateure. Bitte versuchen Sie es später erneut.');
|
||||
setInstallers([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Initial load
|
||||
useEffect(() => {
|
||||
loadInstallers();
|
||||
}, []);
|
||||
|
||||
// Reload when filters change
|
||||
useEffect(() => {
|
||||
const timeoutId = setTimeout(() => {
|
||||
loadInstallers();
|
||||
}, 500); // Debounce search
|
||||
|
||||
return () => clearTimeout(timeoutId);
|
||||
}, [searchTerm, energyType, location]);
|
||||
|
||||
// Update URL params when filters change
|
||||
useEffect(() => {
|
||||
const params = new URLSearchParams();
|
||||
if (searchTerm) params.set("search", searchTerm);
|
||||
if (energyType && energyType !== "all") params.set("type", energyType);
|
||||
if (location) params.set("location", location);
|
||||
setSearchParams(params);
|
||||
}, [searchTerm, energyType, location, setSearchParams]);
|
||||
|
||||
const handleReset = () => {
|
||||
setSearchTerm("");
|
||||
setEnergyType("all");
|
||||
setLocation("");
|
||||
};
|
||||
|
||||
// Test connection
|
||||
const handleTestConnection = async () => {
|
||||
await testConnection();
|
||||
};
|
||||
|
||||
// Debug database
|
||||
const handleDebugDatabase = async () => {
|
||||
await debugDatabase();
|
||||
};
|
||||
|
||||
// Force delete all and reseed
|
||||
const handleForceReseed = async () => {
|
||||
try {
|
||||
await forceDeleteAll();
|
||||
await cleanAndReseedDatabase();
|
||||
alert('Database forcefully reseeded!');
|
||||
loadInstallers();
|
||||
} catch (error) {
|
||||
console.error('Error in force reseed:', error);
|
||||
alert('Error in force reseed. Check console.');
|
||||
}
|
||||
};
|
||||
|
||||
// Clean and reseed with proper German data
|
||||
const handleSeedDatabase = async () => {
|
||||
try {
|
||||
await cleanAndReseedDatabase();
|
||||
alert('Deutsche Installateure erfolgreich geladen!');
|
||||
loadInstallers(); // Reload the data
|
||||
} catch (error) {
|
||||
console.error('Error seeding database:', error);
|
||||
alert('Fehler beim Laden der Installateure. Details in der Konsole.');
|
||||
}
|
||||
};
|
||||
|
||||
// Track contact clicks
|
||||
const handleContactClick = async (installerId: string, contactType: string) => {
|
||||
try {
|
||||
await analyticsService.trackContactClick({
|
||||
installer_id: installerId,
|
||||
contact_type: contactType,
|
||||
page_url: window.location.pathname,
|
||||
user_agent: navigator.userAgent,
|
||||
ip_address: await getClientIP()
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error tracking contact click:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Simple IP detection (fallback)
|
||||
const getClientIP = async (): Promise<string> => {
|
||||
try {
|
||||
const response = await fetch('https://api.ipify.org?format=json');
|
||||
const data = await response.json();
|
||||
return data.ip;
|
||||
} catch {
|
||||
return 'unknown';
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary mx-auto"></div>
|
||||
<p className="mt-4 text-muted-foreground">Installateure werden geladen...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Header />
|
||||
<div className="flex items-center justify-center py-32">
|
||||
<div className="text-center max-w-md mx-auto px-4">
|
||||
<AlertCircle className="w-16 h-16 text-destructive mx-auto mb-4" />
|
||||
<h2 className="text-2xl font-bold text-foreground mb-2">Fehler beim Laden</h2>
|
||||
<p className="text-muted-foreground mb-6">{error}</p>
|
||||
<Button onClick={() => loadInstallers()} className="mb-4">
|
||||
Erneut versuchen
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Header Navigation */}
|
||||
<Header />
|
||||
|
||||
{/* Page Header */}
|
||||
<div className="bg-gradient-to-r from-primary to-primary/80 text-white py-16 mt-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">
|
||||
Installateure Finden
|
||||
</h1>
|
||||
<p className="text-xl text-white/90 max-w-3xl">
|
||||
Entdecken Sie qualifizierte Fachbetriebe für erneuerbare Energien in Ihrer Region
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search and Filters */}
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Filter className="w-5 h-5" />
|
||||
Suche & Filter
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
|
||||
<Input
|
||||
placeholder="Installateur oder Spezialität suchen..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</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>
|
||||
|
||||
<div className="relative">
|
||||
<MapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
|
||||
<Input
|
||||
placeholder="PLZ oder Stadt"
|
||||
value={location}
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button onClick={handleReset} variant="outline" className="w-full">
|
||||
Filter zurücksetzen
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Results */}
|
||||
<div className="mb-4">
|
||||
<p className="text-muted-foreground">
|
||||
{installers.length} Installateur{installers.length !== 1 ? 'e' : ''} gefunden
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Installer Cards */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{installers.map((installer) => (
|
||||
<Card key={installer.id} className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<CardTitle className="text-xl mb-2">{installer.name}</CardTitle>
|
||||
<div className="flex items-center gap-2 text-muted-foreground mb-2">
|
||||
<MapPin className="w-4 h-4" />
|
||||
<span>{installer.location}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="flex items-center gap-1">
|
||||
<Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
|
||||
<span className="font-semibold">{installer.rating}</span>
|
||||
<span className="text-muted-foreground">({installer.review_count || 0})</span>
|
||||
</div>
|
||||
<Badge variant="secondary">{installer.experience_years || 0} Jahre Erfahrung</Badge>
|
||||
{installer.verified && (
|
||||
<Badge variant="default" className="bg-green-100 text-green-800">
|
||||
Verifiziert
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Badge
|
||||
variant={installer.energy_type === 'solar' ? 'default' : 'secondary'}
|
||||
className={installer.energy_type === 'solar' ? 'bg-gradient-solar' : 'bg-gradient-wind'}
|
||||
>
|
||||
{installer.energy_type === 'solar' ? 'Solar' : 'Wind'}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<p className="text-muted-foreground mb-4">{installer.description}</p>
|
||||
|
||||
<div className="mb-4">
|
||||
<h4 className="font-semibold mb-2">Spezialitäten:</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{installer.specialties?.map((specialty, index) => (
|
||||
<Badge key={index} variant="outline" className="text-xs">
|
||||
{specialty}
|
||||
</Badge>
|
||||
)) || (
|
||||
<span className="text-muted-foreground text-sm">Keine Spezialitäten angegeben</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{installer.certifications && installer.certifications.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<h4 className="font-semibold mb-2">Zertifizierungen:</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{installer.certifications.map((cert, index) => (
|
||||
<Badge key={index} variant="outline" className="text-xs bg-blue-50 text-blue-700">
|
||||
{cert}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex-1"
|
||||
onClick={() => {
|
||||
handleContactClick(installer.id, 'phone');
|
||||
window.location.href = `tel:${installer.phone}`;
|
||||
}}
|
||||
>
|
||||
<Phone className="w-4 h-4 mr-2" />
|
||||
Anrufen
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex-1"
|
||||
onClick={() => {
|
||||
handleContactClick(installer.id, 'email');
|
||||
window.location.href = `mailto:${installer.email}`;
|
||||
}}
|
||||
>
|
||||
<Mail className="w-4 h-4 mr-2" />
|
||||
E-Mail
|
||||
</Button>
|
||||
{installer.website && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex-1"
|
||||
onClick={() => {
|
||||
handleContactClick(installer.id, 'website');
|
||||
window.open(`https://${installer.website}`, '_blank');
|
||||
}}
|
||||
>
|
||||
<Globe className="w-4 h-4 mr-2" />
|
||||
Website
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{installers.length === 0 && (
|
||||
<Card className="text-center py-12">
|
||||
<CardContent>
|
||||
<p className="text-muted-foreground text-lg mb-4">
|
||||
Keine Installateure gefunden, die Ihren Kriterien entsprechen.
|
||||
</p>
|
||||
<Button onClick={handleReset} variant="outline">
|
||||
Alle Filter zurücksetzen
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InstallateurFinden;
|
||||
364
src/pages/KostenloseBeratung.tsx
Normal file
364
src/pages/KostenloseBeratung.tsx
Normal file
@@ -0,0 +1,364 @@
|
||||
import { useState } from "react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Phone, Mail, MapPin, Calendar, Clock, CheckCircle } from "lucide-react";
|
||||
import Header from "@/components/Header";
|
||||
|
||||
const KostenloseBeratung = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
zipCode: "",
|
||||
city: "",
|
||||
energyType: "",
|
||||
projectType: "",
|
||||
description: "",
|
||||
budget: "",
|
||||
timeline: "",
|
||||
contactPreference: "email",
|
||||
newsletter: false,
|
||||
privacyPolicy: false
|
||||
});
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
|
||||
const handleInputChange = (field: string, value: string | boolean) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[field]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
|
||||
setIsSubmitting(false);
|
||||
setIsSubmitted(true);
|
||||
};
|
||||
|
||||
if (isSubmitted) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background flex items-center justify-center">
|
||||
<Card className="max-w-md text-center">
|
||||
<CardContent className="pt-6">
|
||||
<CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
|
||||
<h2 className="text-2xl font-bold mb-2">Beratungsanfrage gesendet!</h2>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Vielen Dank für Ihr Interesse. Wir werden uns innerhalb von 24 Stunden bei Ihnen melden.
|
||||
</p>
|
||||
<Button onClick={() => window.location.href = "/"} className="w-full">
|
||||
Zurück zur Startseite
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Header Navigation */}
|
||||
<Header />
|
||||
|
||||
{/* Page Header */}
|
||||
<div className="bg-gradient-to-r from-primary to-primary/80 text-white py-16 mt-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">
|
||||
Kostenlose Beratung
|
||||
</h1>
|
||||
<p className="text-xl text-white/90 max-w-3xl">
|
||||
Lassen Sie sich von unseren Experten beraten und erhalten Sie ein maßgeschneidertes Angebot
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Form */}
|
||||
<div className="lg:col-span-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Ihre Beratungsanfrage</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Personal Information */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="firstName">Vorname *</Label>
|
||||
<Input
|
||||
id="firstName"
|
||||
value={formData.firstName}
|
||||
onChange={(e) => handleInputChange("firstName", e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="lastName">Nachname *</Label>
|
||||
<Input
|
||||
id="lastName"
|
||||
value={formData.lastName}
|
||||
onChange={(e) => handleInputChange("lastName", e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">E-Mail *</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleInputChange("email", e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="phone">Telefon</Label>
|
||||
<Input
|
||||
id="phone"
|
||||
type="tel"
|
||||
value={formData.phone}
|
||||
onChange={(e) => handleInputChange("phone", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="zipCode">PLZ *</Label>
|
||||
<Input
|
||||
id="zipCode"
|
||||
value={formData.zipCode}
|
||||
onChange={(e) => handleInputChange("zipCode", e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="city">Stadt *</Label>
|
||||
<Input
|
||||
id="city"
|
||||
value={formData.city}
|
||||
onChange={(e) => handleInputChange("city", e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Project Information */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="energyType">Energieart *</Label>
|
||||
<Select value={formData.energyType} onValueChange={(value) => handleInputChange("energyType", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Energieart wählen" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="solar">Solar</SelectItem>
|
||||
<SelectItem value="wind">Wind</SelectItem>
|
||||
<SelectItem value="both">Beide</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="projectType">Projekttyp *</Label>
|
||||
<Select value={formData.projectType} onValueChange={(value) => handleInputChange("projectType", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Projekttyp wählen" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="private">Privathaushalt</SelectItem>
|
||||
<SelectItem value="commercial">Gewerbe</SelectItem>
|
||||
<SelectItem value="industrial">Industrie</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="budget">Budget</Label>
|
||||
<Select value={formData.budget} onValueChange={(value) => handleInputChange("budget", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Budget wählen" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="under-10k">Unter 10.000 €</SelectItem>
|
||||
<SelectItem value="10k-25k">10.000 - 25.000 €</SelectItem>
|
||||
<SelectItem value="25k-50k">25.000 - 50.000 €</SelectItem>
|
||||
<SelectItem value="over-50k">Über 50.000 €</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="timeline">Zeitplan</Label>
|
||||
<Select value={formData.timeline} onValueChange={(value) => handleInputChange("timeline", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Zeitplan wählen" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="immediate">Sofort</SelectItem>
|
||||
<SelectItem value="3months">Innerhalb 3 Monate</SelectItem>
|
||||
<SelectItem value="6months">Innerhalb 6 Monate</SelectItem>
|
||||
<SelectItem value="1year">Innerhalb 1 Jahr</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Projektbeschreibung</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
placeholder="Beschreiben Sie Ihr Projekt, Ihre Anforderungen und Ziele..."
|
||||
value={formData.description}
|
||||
onChange={(e) => handleInputChange("description", e.target.value)}
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Kontaktpräferenz</Label>
|
||||
<div className="flex gap-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="radio"
|
||||
id="email-pref"
|
||||
name="contactPreference"
|
||||
value="email"
|
||||
checked={formData.contactPreference === "email"}
|
||||
onChange={(e) => handleInputChange("contactPreference", e.target.value)}
|
||||
/>
|
||||
<Label htmlFor="email-pref">E-Mail</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="radio"
|
||||
id="phone-pref"
|
||||
name="contactPreference"
|
||||
value="phone"
|
||||
checked={formData.contactPreference === "phone"}
|
||||
onChange={(e) => handleInputChange("contactPreference", e.target.value)}
|
||||
/>
|
||||
<Label htmlFor="phone-pref">Telefon</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="newsletter"
|
||||
checked={formData.newsletter}
|
||||
onCheckedChange={(checked) => handleInputChange("newsletter", checked as boolean)}
|
||||
/>
|
||||
<Label htmlFor="newsletter">
|
||||
Ich möchte den Newsletter mit Tipps zu erneuerbaren Energien erhalten
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="privacyPolicy"
|
||||
checked={formData.privacyPolicy}
|
||||
onCheckedChange={(checked) => handleInputChange("privacyPolicy", checked as boolean)}
|
||||
required
|
||||
/>
|
||||
<Label htmlFor="privacyPolicy">
|
||||
Ich akzeptiere die <a href="/datenschutz" className="text-primary hover:underline">Datenschutzerklärung</a> *
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Wird gesendet..." : "Beratungsanfrage senden"}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Benefits */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Ihre Vorteile</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-semibold">Kostenlose Beratung</h4>
|
||||
<p className="text-sm text-muted-foreground">Unverbindliche Erstberatung ohne Kosten</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-semibold">Expertenwissen</h4>
|
||||
<p className="text-sm text-muted-foreground">Beratung durch zertifizierte Fachleute</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-semibold">Maßgeschneiderte Lösungen</h4>
|
||||
<p className="text-sm text-muted-foreground">Individuelle Beratung für Ihr Projekt</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-semibold">Förderung & Finanzierung</h4>
|
||||
<p className="text-sm text-muted-foreground">Informationen zu staatlichen Förderungen</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Contact Info */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Kontakt</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Phone className="w-5 h-5 text-primary" />
|
||||
<span>+49 (0) 800 123 4567</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Mail className="w-5 h-5 text-primary" />
|
||||
<span>beratung@energieprofis.de</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<MapPin className="w-5 h-5 text-primary" />
|
||||
<span>München, Deutschland</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Clock className="w-5 h-5 text-primary" />
|
||||
<span>Mo-Fr: 8:00 - 18:00</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default KostenloseBeratung;
|
||||
@@ -1,5 +1,6 @@
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import SolarCalculator from "@/components/SolarCalculator";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Sun, Zap, TrendingUp, Shield, ArrowRight } from "lucide-react";
|
||||
@@ -62,11 +63,6 @@ const Solar = () => {
|
||||
Solar-Installateur Finden
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="solar-outline" size="xl" className="border-white/30 text-white hover:bg-white hover:text-solar">
|
||||
<Link to="/kostenlose-beratung?type=solar">
|
||||
Kostenlose Beratung
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -106,6 +102,9 @@ const Solar = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Solar Calculator Section */}
|
||||
<SolarCalculator />
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-20 bg-gradient-solar text-white">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
@@ -118,8 +117,8 @@ const Solar = () => {
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button variant="hero" size="xl" className="bg-white text-solar hover:bg-white/90" asChild>
|
||||
<Link to="/kostenlose-beratung?type=solar">
|
||||
Jetzt kostenlose Beratung anfordern
|
||||
<Link to="/installateur-finden?type=solar">
|
||||
Solar-Installateure finden
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
446
src/pages/UnternehmenListen.tsx
Normal file
446
src/pages/UnternehmenListen.tsx
Normal file
@@ -0,0 +1,446 @@
|
||||
import { useState } from "react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Building2, MapPin, Phone, Mail, Globe, CheckCircle, Users, Award, Clock } from "lucide-react";
|
||||
import Header from "@/components/Header";
|
||||
|
||||
const UnternehmenListen = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
companyName: "",
|
||||
contactPerson: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
website: "",
|
||||
zipCode: "",
|
||||
city: "",
|
||||
energyTypes: [] as string[],
|
||||
services: [] as string[],
|
||||
description: "",
|
||||
experience: "",
|
||||
certifications: [] as string[],
|
||||
coverageArea: "",
|
||||
contactPreference: "email",
|
||||
newsletter: false,
|
||||
privacyPolicy: false
|
||||
});
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
|
||||
const handleInputChange = (field: string, value: string | boolean | string[]) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[field]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleEnergyTypeChange = (type: string, checked: boolean) => {
|
||||
if (checked) {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
energyTypes: [...prev.energyTypes, type]
|
||||
}));
|
||||
} else {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
energyTypes: prev.energyTypes.filter(t => t !== type)
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleServiceChange = (service: string, checked: boolean) => {
|
||||
if (checked) {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
services: [...prev.services, service]
|
||||
}));
|
||||
} else {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
services: prev.services.filter(s => s !== service)
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
|
||||
setIsSubmitting(false);
|
||||
setIsSubmitted(true);
|
||||
};
|
||||
|
||||
if (isSubmitted) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background flex items-center justify-center">
|
||||
<Card className="max-w-md text-center">
|
||||
<CardContent className="pt-6">
|
||||
<CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
|
||||
<h2 className="text-2xl font-bold mb-2">Anmeldung erfolgreich!</h2>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Vielen Dank für Ihre Anmeldung. Wir werden Ihr Unternehmen innerhalb von 48 Stunden prüfen und freischalten.
|
||||
</p>
|
||||
<Button onClick={() => window.location.href = "/"} className="w-full">
|
||||
Zurück zur Startseite
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Header Navigation */}
|
||||
<Header />
|
||||
|
||||
{/* Page Header */}
|
||||
<div className="bg-gradient-to-r from-primary to-primary/80 text-white py-16 mt-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">
|
||||
Unternehmen Listen
|
||||
</h1>
|
||||
<p className="text-xl text-white/90 max-w-3xl">
|
||||
Werden Sie Teil unseres Netzwerks und erreichen Sie neue Kunden für erneuerbare Energien
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Form */}
|
||||
<div className="lg:col-span-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Unternehmensanmeldung</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Company Information */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="companyName">Firmenname *</Label>
|
||||
<Input
|
||||
id="companyName"
|
||||
value={formData.companyName}
|
||||
onChange={(e) => handleInputChange("companyName", e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="contactPerson">Ansprechpartner *</Label>
|
||||
<Input
|
||||
id="contactPerson"
|
||||
value={formData.contactPerson}
|
||||
onChange={(e) => handleInputChange("contactPerson", e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">E-Mail *</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleInputChange("email", e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="phone">Telefon *</Label>
|
||||
<Input
|
||||
id="phone"
|
||||
type="tel"
|
||||
value={formData.phone}
|
||||
onChange={(e) => handleInputChange("phone", e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="website">Website</Label>
|
||||
<Input
|
||||
id="website"
|
||||
type="url"
|
||||
value={formData.website}
|
||||
onChange={(e) => handleInputChange("website", e.target.value)}
|
||||
placeholder="https://www.example.de"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="zipCode">PLZ *</Label>
|
||||
<Input
|
||||
id="zipCode"
|
||||
value={formData.zipCode}
|
||||
onChange={(e) => handleInputChange("zipCode", e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="city">Stadt *</Label>
|
||||
<Input
|
||||
id="city"
|
||||
value={formData.city}
|
||||
onChange={(e) => handleInputChange("city", e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Energy Types */}
|
||||
<div className="space-y-2">
|
||||
<Label>Energiearten *</Label>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="solar"
|
||||
checked={formData.energyTypes.includes("solar")}
|
||||
onCheckedChange={(checked) => handleEnergyTypeChange("solar", checked as boolean)}
|
||||
/>
|
||||
<Label htmlFor="solar">Solar</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="wind"
|
||||
checked={formData.energyTypes.includes("wind")}
|
||||
onCheckedChange={(checked) => handleEnergyTypeChange("wind", checked as boolean)}
|
||||
/>
|
||||
<Label htmlFor="wind">Wind</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Services */}
|
||||
<div className="space-y-2">
|
||||
<Label>Angebotene Leistungen *</Label>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="planning"
|
||||
checked={formData.services.includes("planning")}
|
||||
onCheckedChange={(checked) => handleServiceChange("planning", checked as boolean)}
|
||||
/>
|
||||
<Label htmlFor="planning">Planung & Beratung</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="installation"
|
||||
checked={formData.services.includes("installation")}
|
||||
onCheckedChange={(checked) => handleServiceChange("installation", checked as boolean)}
|
||||
/>
|
||||
<Label htmlFor="installation">Installation</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="maintenance"
|
||||
checked={formData.services.includes("maintenance")}
|
||||
onCheckedChange={(checked) => handleServiceChange("maintenance", checked as boolean)}
|
||||
/>
|
||||
<Label htmlFor="maintenance">Wartung & Service</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="financing"
|
||||
checked={formData.services.includes("financing")}
|
||||
onCheckedChange={(checked) => handleServiceChange("financing", checked as boolean)}
|
||||
/>
|
||||
<Label htmlFor="financing">Finanzierung</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="experience">Jahre Erfahrung *</Label>
|
||||
<Select value={formData.experience} onValueChange={(value) => handleInputChange("experience", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Erfahrung wählen" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="0-2">0-2 Jahre</SelectItem>
|
||||
<SelectItem value="3-5">3-5 Jahre</SelectItem>
|
||||
<SelectItem value="6-10">6-10 Jahre</SelectItem>
|
||||
<SelectItem value="10+">Über 10 Jahre</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="coverageArea">Einzugsgebiet</Label>
|
||||
<Input
|
||||
id="coverageArea"
|
||||
value={formData.coverageArea}
|
||||
onChange={(e) => handleInputChange("coverageArea", e.target.value)}
|
||||
placeholder="z.B. Bayern, 50km Umkreis"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Unternehmensbeschreibung *</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
placeholder="Beschreiben Sie Ihr Unternehmen, Ihre Spezialitäten und warum Kunden Sie wählen sollten..."
|
||||
value={formData.description}
|
||||
onChange={(e) => handleInputChange("description", e.target.value)}
|
||||
rows={4}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Kontaktpräferenz</Label>
|
||||
<div className="flex gap-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="radio"
|
||||
id="email-pref"
|
||||
name="contactPreference"
|
||||
value="email"
|
||||
checked={formData.contactPreference === "email"}
|
||||
onChange={(e) => handleInputChange("contactPreference", e.target.value)}
|
||||
/>
|
||||
<Label htmlFor="email-pref">E-Mail</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="radio"
|
||||
id="phone-pref"
|
||||
name="contactPreference"
|
||||
value="phone"
|
||||
checked={formData.contactPreference === "phone"}
|
||||
onChange={(e) => handleInputChange("contactPreference", e.target.value)}
|
||||
/>
|
||||
<Label htmlFor="phone-pref">Telefon</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="newsletter"
|
||||
checked={formData.newsletter}
|
||||
onCheckedChange={(checked) => handleInputChange("newsletter", checked as boolean)}
|
||||
/>
|
||||
<Label htmlFor="newsletter">
|
||||
Ich möchte über neue Funktionen und Marketing-Möglichkeiten informiert werden
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="privacyPolicy"
|
||||
checked={formData.privacyPolicy}
|
||||
onCheckedChange={(checked) => handleInputChange("privacyPolicy", checked as boolean)}
|
||||
required
|
||||
/>
|
||||
<Label htmlFor="privacyPolicy">
|
||||
Ich akzeptiere die <a href="/datenschutz" className="text-primary hover:underline">Datenschutzerklärung</a> *
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Wird gesendet..." : "Unternehmen anmelden"}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Benefits */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Ihre Vorteile</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Users className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-semibold">Neue Kunden gewinnen</h4>
|
||||
<p className="text-sm text-muted-foreground">Erreichen Sie potenzielle Kunden in Ihrer Region</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<Award className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-semibold">Vertrauen aufbauen</h4>
|
||||
<p className="text-sm text-muted-foreground">Präsentieren Sie sich als verifizierter Experte</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<Clock className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-semibold">Zeit sparen</h4>
|
||||
<p className="text-sm text-muted-foreground">Kunden finden Sie automatisch über unsere Plattform</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<Building2 className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-semibold">Professioneller Auftritt</h4>
|
||||
<p className="text-sm text-muted-foreground">Präsentieren Sie Ihr Unternehmen professionell</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Process */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Ablauf</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0">1</div>
|
||||
<div>
|
||||
<h4 className="font-semibold">Anmeldung</h4>
|
||||
<p className="text-sm text-muted-foreground">Füllen Sie das Formular aus</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0">2</div>
|
||||
<div>
|
||||
<h4 className="font-semibold">Prüfung</h4>
|
||||
<p className="text-sm text-muted-foreground">Wir prüfen Ihre Angaben (48h)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0">3</div>
|
||||
<div>
|
||||
<h4 className="font-semibold">Freischaltung</h4>
|
||||
<p className="text-sm text-muted-foreground">Ihr Profil wird veröffentlicht</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0">4</div>
|
||||
<div>
|
||||
<h4 className="font-semibold">Kundenkontakte</h4>
|
||||
<p className="text-sm text-muted-foreground">Erhalten Sie Anfragen von Kunden</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UnternehmenListen;
|
||||
@@ -1,5 +1,6 @@
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import WindCalculator from "@/components/WindCalculator";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Wind, Zap, TrendingUp, Shield, ArrowRight } from "lucide-react";
|
||||
@@ -62,11 +63,6 @@ const WindPage = () => {
|
||||
Wind-Installateur Finden
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="wind-outline" size="xl" className="border-white/30 text-white hover:bg-white hover:text-wind">
|
||||
<Link to="/kostenlose-beratung?type=wind">
|
||||
Kostenlose Beratung
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -106,6 +102,9 @@ const WindPage = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Wind Calculator Section */}
|
||||
<WindCalculator />
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-20 bg-gradient-wind text-white">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
@@ -118,8 +117,8 @@ const WindPage = () => {
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button variant="hero" size="xl" className="bg-white text-wind hover:bg-white/90" asChild>
|
||||
<Link to="/kostenlose-beratung?type=wind">
|
||||
Jetzt kostenlose Beratung anfordern
|
||||
<Link to="/installateur-finden?type=wind">
|
||||
Wind-Installateure finden
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user