Add PRD for EnergieProfis
Add Product Requirements Document for the EnergieProfis platform, outlining product overview, core features, technical architecture, design system, routing, admin panel requirements, authentication, monetization, SEO, development phases, success metrics, risk assessment, and future roadmap.
This commit is contained in:
gpt-engineer-app[bot]
parent
427f45ce78
commit
bf4078d1b6
13
index.html
13
index.html
|
|
@ -3,17 +3,18 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>energie-finder-profi</title>
|
<title>EnergieProfis - Erneuerbare Energie Installateure in Deutschland</title>
|
||||||
<meta name="description" content="Lovable Generated Project" />
|
<meta name="description" content="Finden Sie qualifizierte Installateure für Solar, Wind, Geothermie und Batteriespeicher. Kostenlose Beratung und Angebote von geprüften Fachbetrieben." />
|
||||||
<meta name="author" content="Lovable" />
|
<meta name="author" content="EnergieProfis" />
|
||||||
|
<meta name="keywords" content="Solar, Photovoltaik, Windkraft, Geothermie, Batteriespeicher, Installateur, Deutschland, erneuerbare Energie" />
|
||||||
|
|
||||||
<meta property="og:title" content="energie-finder-profi" />
|
<meta property="og:title" content="EnergieProfis - Erneuerbare Energie Installateure" />
|
||||||
<meta property="og:description" content="Lovable Generated Project" />
|
<meta property="og:description" content="Finden Sie qualifizierte Installateure für Solar, Wind, Geothermie und Batteriespeicher in Deutschland." />
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
||||||
|
|
||||||
<meta name="twitter:card" content="summary_large_image" />
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
<meta name="twitter:site" content="@lovable_dev" />
|
<meta name="twitter:site" content="@energieprofis" />
|
||||||
<meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
<meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,8 @@ import { TooltipProvider } from "@/components/ui/tooltip";
|
||||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||||
import Index from "./pages/Index";
|
import Index from "./pages/Index";
|
||||||
|
import Solar from "./pages/Solar";
|
||||||
|
import Wind from "./pages/Wind";
|
||||||
import NotFound from "./pages/NotFound";
|
import NotFound from "./pages/NotFound";
|
||||||
|
|
||||||
const queryClient = new QueryClient();
|
const queryClient = new QueryClient();
|
||||||
|
|
@ -16,6 +18,8 @@ const App = () => (
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Index />} />
|
<Route path="/" element={<Index />} />
|
||||||
|
<Route path="/solar" element={<Solar />} />
|
||||||
|
<Route path="/wind" element={<Wind />} />
|
||||||
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
|
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
|
||||||
<Route path="*" element={<NotFound />} />
|
<Route path="*" element={<NotFound />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 249 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
|
|
@ -0,0 +1,65 @@
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { ArrowRight } from "lucide-react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
interface EnergyTypeCardProps {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
image: string;
|
||||||
|
gradient: string;
|
||||||
|
buttonVariant: "solar" | "wind" | "geo" | "battery";
|
||||||
|
href: string;
|
||||||
|
features: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const EnergyTypeCard = ({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
image,
|
||||||
|
gradient,
|
||||||
|
buttonVariant,
|
||||||
|
href,
|
||||||
|
features
|
||||||
|
}: EnergyTypeCardProps) => {
|
||||||
|
return (
|
||||||
|
<Card className="group overflow-hidden hover:shadow-2xl transition-all duration-500 transform hover:scale-105 border-0">
|
||||||
|
<div className="relative h-48 overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={image}
|
||||||
|
alt={title}
|
||||||
|
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
|
||||||
|
/>
|
||||||
|
<div className={`absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent`}></div>
|
||||||
|
<div className="absolute top-4 left-4">
|
||||||
|
<div className={`w-12 h-12 rounded-xl ${gradient} flex items-center justify-center text-white font-bold text-lg shadow-lg`}>
|
||||||
|
{title.charAt(0)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<h3 className="text-2xl font-bold mb-3 text-foreground">{title}</h3>
|
||||||
|
<p className="text-muted-foreground mb-4 leading-relaxed">{description}</p>
|
||||||
|
|
||||||
|
<ul className="space-y-2 mb-6">
|
||||||
|
{features.map((feature, index) => (
|
||||||
|
<li key={index} className="flex items-center text-sm text-muted-foreground">
|
||||||
|
<div className={`w-2 h-2 rounded-full ${gradient} mr-3 flex-shrink-0`}></div>
|
||||||
|
{feature}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<Button variant={buttonVariant} className="w-full group" asChild>
|
||||||
|
<Link to={href}>
|
||||||
|
{title} Installateure Finden
|
||||||
|
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EnergyTypeCard;
|
||||||
|
|
@ -0,0 +1,90 @@
|
||||||
|
import EnergyTypeCard from "./EnergyTypeCard";
|
||||||
|
import solarImage from "@/assets/solar-installation.jpg";
|
||||||
|
import windImage from "@/assets/wind-turbines.jpg";
|
||||||
|
import geoImage from "@/assets/geothermal-system.jpg";
|
||||||
|
import batteryImage from "@/assets/battery-storage.jpg";
|
||||||
|
|
||||||
|
const EnergyTypesSection = () => {
|
||||||
|
const energyTypes = [
|
||||||
|
{
|
||||||
|
title: "Solar",
|
||||||
|
description: "Nutzen Sie die Kraft der Sonne mit modernsten Photovoltaik-Anlagen für Ihr Zuhause oder Unternehmen.",
|
||||||
|
image: solarImage,
|
||||||
|
gradient: "bg-gradient-solar",
|
||||||
|
buttonVariant: "solar" as const,
|
||||||
|
href: "/solar",
|
||||||
|
features: [
|
||||||
|
"Bis zu 70% Stromkostenersparnis",
|
||||||
|
"20+ Jahre Garantie",
|
||||||
|
"Staatliche Förderungen verfügbar",
|
||||||
|
"Umweltfreundlich & nachhaltig"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Wind",
|
||||||
|
description: "Erzeugen Sie saubere Energie mit effizienten Windkraftanlagen für private und gewerbliche Nutzung.",
|
||||||
|
image: windImage,
|
||||||
|
gradient: "bg-gradient-wind",
|
||||||
|
buttonVariant: "wind" as const,
|
||||||
|
href: "/wind",
|
||||||
|
features: [
|
||||||
|
"Konstante Energieproduktion",
|
||||||
|
"Hohe Effizienz auch bei schwachem Wind",
|
||||||
|
"Wartungsarme Technologie",
|
||||||
|
"Ideale Ergänzung zu Solar"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Geothermie",
|
||||||
|
description: "Heizen und kühlen Sie Ihr Gebäude mit der natürlichen Erdwärme - effizient und umweltschonend.",
|
||||||
|
image: geoImage,
|
||||||
|
gradient: "bg-gradient-geo",
|
||||||
|
buttonVariant: "geo" as const,
|
||||||
|
href: "/geothermie",
|
||||||
|
features: [
|
||||||
|
"Ganzjährig konstante Temperaturen",
|
||||||
|
"Niedrige Betriebskosten",
|
||||||
|
"Heizen und Kühlen in einem System",
|
||||||
|
"Sehr lange Lebensdauer"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Batteriespeicher",
|
||||||
|
description: "Speichern Sie überschüssige Energie und nutzen Sie sie bei Bedarf - für maximale Unabhängigkeit.",
|
||||||
|
image: batteryImage,
|
||||||
|
gradient: "bg-gradient-battery",
|
||||||
|
buttonVariant: "battery" as const,
|
||||||
|
href: "/batteriespeicher",
|
||||||
|
features: [
|
||||||
|
"24/7 Energieverfügbarkeit",
|
||||||
|
"Notstromfunktion",
|
||||||
|
"Intelligente Steuerung",
|
||||||
|
"Erhöhte Eigenverbrauchsquote"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-20 bg-gradient-to-b from-background to-secondary/20">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-foreground">
|
||||||
|
Erneuerbare Energielösungen
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
||||||
|
Entdecken Sie die Vielfalt nachhaltiger Energietechnologien und finden Sie
|
||||||
|
die perfekte Lösung für Ihre Bedürfnisse.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
{energyTypes.map((type) => (
|
||||||
|
<EnergyTypeCard key={type.title} {...type} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EnergyTypesSection;
|
||||||
|
|
@ -0,0 +1,159 @@
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { Mail, Phone, MapPin, Facebook, Twitter, Linkedin, Instagram } from "lucide-react";
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
return (
|
||||||
|
<footer className="bg-primary text-primary-foreground">
|
||||||
|
<div className="container mx-auto px-4 py-16">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
|
||||||
|
{/* Company Info */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<div className="w-8 h-8 bg-gradient-hero rounded-lg flex items-center justify-center">
|
||||||
|
<span className="text-white font-bold text-lg">E</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-xl font-bold">EnergieProfis</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-primary-foreground/80 leading-relaxed">
|
||||||
|
Ihr vertrauensvoller Partner für erneuerbare Energielösungen in Deutschland.
|
||||||
|
Wir verbinden Sie mit den besten Installateuren für eine nachhaltige Zukunft.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<Phone className="w-5 h-5 text-solar" />
|
||||||
|
<span>+49 (0) 800 123 4567</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<Mail className="w-5 h-5 text-wind" />
|
||||||
|
<span>info@energieprofis.de</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<MapPin className="w-5 h-5 text-geo" />
|
||||||
|
<span>München, Deutschland</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Energy Types */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h3 className="text-lg font-semibold">Energielösungen</h3>
|
||||||
|
<ul className="space-y-3">
|
||||||
|
<li>
|
||||||
|
<Link to="/solar" className="text-primary-foreground/80 hover:text-solar transition-colors">
|
||||||
|
Solar-Installateure
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/wind" className="text-primary-foreground/80 hover:text-wind transition-colors">
|
||||||
|
Wind-Installateure
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/geothermie" className="text-primary-foreground/80 hover:text-geo transition-colors">
|
||||||
|
Geothermie-Installateure
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/batteriespeicher" className="text-primary-foreground/80 hover:text-battery transition-colors">
|
||||||
|
Batteriespeicher-Installateure
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Services */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h3 className="text-lg font-semibold">Services</h3>
|
||||||
|
<ul className="space-y-3">
|
||||||
|
<li>
|
||||||
|
<Link to="/installateur-finden" className="text-primary-foreground/80 hover:text-white transition-colors">
|
||||||
|
Installateur Finden
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/kostenlose-beratung" className="text-primary-foreground/80 hover:text-white transition-colors">
|
||||||
|
Kostenlose Beratung
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/unternehmen-listen" className="text-primary-foreground/80 hover:text-white transition-colors">
|
||||||
|
Unternehmen Listen
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/preisvergleich" className="text-primary-foreground/80 hover:text-white transition-colors">
|
||||||
|
Preisvergleich
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Newsletter */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h3 className="text-lg font-semibold">Newsletter</h3>
|
||||||
|
<p className="text-primary-foreground/80">
|
||||||
|
Bleiben Sie informiert über die neuesten Entwicklungen
|
||||||
|
in der erneuerbaren Energie.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<Input
|
||||||
|
placeholder="Ihre E-Mail-Adresse"
|
||||||
|
className="bg-white/10 border-white/20 text-white placeholder:text-white/60"
|
||||||
|
/>
|
||||||
|
<Button variant="hero" className="w-full bg-white text-primary hover:bg-white/90">
|
||||||
|
Anmelden
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Social Media */}
|
||||||
|
<div className="flex space-x-4">
|
||||||
|
<Button variant="ghost" size="icon" className="hover:bg-white/10">
|
||||||
|
<Facebook className="w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="icon" className="hover:bg-white/10">
|
||||||
|
<Twitter className="w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="icon" className="hover:bg-white/10">
|
||||||
|
<Linkedin className="w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="icon" className="hover:bg-white/10">
|
||||||
|
<Instagram className="w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom Bar */}
|
||||||
|
<div className="border-t border-white/20 mt-12 pt-8">
|
||||||
|
<div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
|
||||||
|
<p className="text-primary-foreground/60 text-sm">
|
||||||
|
© 2024 EnergieProfis. Alle Rechte vorbehalten.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex space-x-6 text-sm">
|
||||||
|
<Link to="/datenschutz" className="text-primary-foreground/60 hover:text-white transition-colors">
|
||||||
|
Datenschutz
|
||||||
|
</Link>
|
||||||
|
<Link to="/agb" className="text-primary-foreground/60 hover:text-white transition-colors">
|
||||||
|
AGB
|
||||||
|
</Link>
|
||||||
|
<Link to="/impressum" className="text-primary-foreground/60 hover:text-white transition-colors">
|
||||||
|
Impressum
|
||||||
|
</Link>
|
||||||
|
<Link to="/kontakt" className="text-primary-foreground/60 hover:text-white transition-colors">
|
||||||
|
Kontakt
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Menu, Search, Phone } from "lucide-react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
const Header = () => {
|
||||||
|
return (
|
||||||
|
<header className="bg-white/95 backdrop-blur-sm border-b border-border shadow-sm sticky top-0 z-50">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="flex items-center justify-between h-16">
|
||||||
|
{/* Logo */}
|
||||||
|
<Link to="/" className="flex items-center space-x-2">
|
||||||
|
<div className="w-8 h-8 bg-gradient-hero rounded-lg flex items-center justify-center">
|
||||||
|
<span className="text-white font-bold text-lg">E</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-xl font-bold text-primary">EnergieProfis</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Desktop Navigation */}
|
||||||
|
<nav className="hidden lg:flex items-center space-x-8">
|
||||||
|
<Link to="/solar" className="text-foreground hover:text-solar transition-colors font-medium">
|
||||||
|
Solar
|
||||||
|
</Link>
|
||||||
|
<Link to="/wind" className="text-foreground hover:text-wind transition-colors font-medium">
|
||||||
|
Wind
|
||||||
|
</Link>
|
||||||
|
<Link to="/geothermie" className="text-foreground hover:text-geo transition-colors font-medium">
|
||||||
|
Geothermie
|
||||||
|
</Link>
|
||||||
|
<Link to="/batteriespeicher" className="text-foreground hover:text-battery transition-colors font-medium">
|
||||||
|
Batteriespeicher
|
||||||
|
</Link>
|
||||||
|
<Link to="/installateur-finden" className="text-foreground hover:text-primary transition-colors font-medium">
|
||||||
|
Installateur Finden
|
||||||
|
</Link>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Action Buttons */}
|
||||||
|
<div className="hidden md:flex items-center space-x-4">
|
||||||
|
<Button variant="outline" size="sm" asChild>
|
||||||
|
<Link to="/unternehmen-listen">Unternehmen Listen</Link>
|
||||||
|
</Button>
|
||||||
|
<Button variant="hero" size="sm" asChild>
|
||||||
|
<Link to="/kostenlose-beratung">
|
||||||
|
<Phone className="w-4 h-4 mr-2" />
|
||||||
|
Kostenlose Beratung
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Menu Button */}
|
||||||
|
<Button variant="ghost" size="icon" className="lg:hidden">
|
||||||
|
<Menu className="w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Header;
|
||||||
|
|
@ -0,0 +1,102 @@
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Search, MapPin, Zap } from "lucide-react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import heroImage from "@/assets/hero-renewable-energy.jpg";
|
||||||
|
|
||||||
|
const HeroSection = () => {
|
||||||
|
return (
|
||||||
|
<section className="relative min-h-[600px] flex items-center overflow-hidden">
|
||||||
|
{/* Background Image with Overlay */}
|
||||||
|
<div className="absolute inset-0">
|
||||||
|
<img
|
||||||
|
src={heroImage}
|
||||||
|
alt="Renewable Energy Solutions in Germany"
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-r from-primary/80 via-primary/60 to-transparent"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="container mx-auto px-4 relative z-10">
|
||||||
|
<div className="max-w-2xl text-white">
|
||||||
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
|
||||||
|
Finden Sie Ihren perfekten{" "}
|
||||||
|
<span className="bg-gradient-to-r from-solar via-wind to-geo bg-clip-text text-transparent">
|
||||||
|
Erneuerbaren Energie
|
||||||
|
</span>{" "}
|
||||||
|
Installateur
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-xl md:text-2xl text-white/90 mb-8 leading-relaxed">
|
||||||
|
Vergleichen Sie qualifizierte Fachbetriebe für Solar, Wind, Geothermie
|
||||||
|
und Batteriespeicher in Ihrer Region. Kostenlos und unverbindlich.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Search Box */}
|
||||||
|
<div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-6 mb-8">
|
||||||
|
<div className="flex flex-col md:flex-row gap-4">
|
||||||
|
<div className="flex-1 relative">
|
||||||
|
<MapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/60 w-5 h-5" />
|
||||||
|
<Input
|
||||||
|
placeholder="PLZ oder Stadt eingeben..."
|
||||||
|
className="pl-10 bg-white/10 border-white/20 text-white placeholder:text-white/60 h-12"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 relative">
|
||||||
|
<Zap className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/60 w-5 h-5" />
|
||||||
|
<select className="w-full h-12 pl-10 pr-4 bg-white/10 border border-white/20 rounded-lg text-white appearance-none">
|
||||||
|
<option value="">Energieart wählen</option>
|
||||||
|
<option value="solar">Solar</option>
|
||||||
|
<option value="wind">Wind</option>
|
||||||
|
<option value="geothermal">Geothermie</option>
|
||||||
|
<option value="battery">Batteriespeicher</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<Button variant="hero" size="lg" className="bg-white text-primary hover:bg-white/90">
|
||||||
|
<Search className="w-5 h-5 mr-2" />
|
||||||
|
Installateur Finden
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CTA Buttons */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4">
|
||||||
|
<Button variant="hero" size="xl" asChild>
|
||||||
|
<Link to="/kostenlose-beratung">
|
||||||
|
Kostenlose Beratung Anfordern
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" size="xl" className="border-white/30 text-white hover:bg-white hover:text-primary">
|
||||||
|
<Link to="/installateur-finden">
|
||||||
|
Alle Installateure Ansehen
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Floating Stats */}
|
||||||
|
<div className="absolute bottom-8 right-8 hidden xl:block">
|
||||||
|
<div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-6 text-white">
|
||||||
|
<div className="grid grid-cols-3 gap-6 text-center">
|
||||||
|
<div>
|
||||||
|
<div className="text-2xl font-bold">500+</div>
|
||||||
|
<div className="text-sm text-white/80">Installateure</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-2xl font-bold">2,500+</div>
|
||||||
|
<div className="text-sm text-white/80">Projekte</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-2xl font-bold">4.8★</div>
|
||||||
|
<div className="text-sm text-white/80">Bewertung</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HeroSection;
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Shield, Users, Award, Clock, HeartHandshake, TrendingUp } from "lucide-react";
|
||||||
|
|
||||||
|
const WhyChooseUsSection = () => {
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: "Verifizierte Installateure",
|
||||||
|
description: "Alle Fachbetriebe werden sorgfältig geprüft und zertifiziert für höchste Qualitätsstandards.",
|
||||||
|
gradient: "bg-gradient-solar"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Users,
|
||||||
|
title: "Kostenlose Beratung",
|
||||||
|
description: "Erhalten Sie unverbindliche Beratung und bis zu 3 Angebote von qualifizierten Experten.",
|
||||||
|
gradient: "bg-gradient-wind"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Award,
|
||||||
|
title: "Beste Preise",
|
||||||
|
description: "Durch unseren Vergleich erhalten Sie garantiert die besten Konditionen für Ihr Projekt.",
|
||||||
|
gradient: "bg-gradient-geo"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Clock,
|
||||||
|
title: "Schnelle Vermittlung",
|
||||||
|
description: "In nur wenigen Minuten erhalten Sie passende Installateur-Vorschläge für Ihre Region.",
|
||||||
|
gradient: "bg-gradient-battery"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: HeartHandshake,
|
||||||
|
title: "Persönlicher Service",
|
||||||
|
description: "Unser Expertenteam steht Ihnen bei allen Fragen rund um erneuerbare Energien zur Seite.",
|
||||||
|
gradient: "bg-gradient-solar"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: TrendingUp,
|
||||||
|
title: "Langfristige Erfolge",
|
||||||
|
description: "Profitieren Sie von nachhaltigen Energielösungen und langfristigen Kosteneinsparungen.",
|
||||||
|
gradient: "bg-gradient-wind"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-20 bg-background">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-foreground">
|
||||||
|
Warum EnergieProfis?
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
||||||
|
Wir verbinden Sie mit den besten Fachbetrieben für erneuerbare Energien
|
||||||
|
und sorgen für eine professionelle Umsetzung Ihres Projekts.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{features.map((feature, index) => (
|
||||||
|
<Card key={index} className="group hover:shadow-xl transition-all duration-300 border-0 bg-white/50 backdrop-blur-sm">
|
||||||
|
<CardContent className="p-8 text-center">
|
||||||
|
<div className={`w-16 h-16 ${feature.gradient} rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300`}>
|
||||||
|
<feature.icon className="w-8 h-8 text-white" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="text-xl font-bold mb-4 text-foreground">
|
||||||
|
{feature.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p className="text-muted-foreground leading-relaxed">
|
||||||
|
{feature.description}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WhyChooseUsSection;
|
||||||
|
|
@ -5,24 +5,35 @@ import { cva, type VariantProps } from "class-variance-authority"
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const buttonVariants = cva(
|
const buttonVariants = cva(
|
||||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-md hover:shadow-lg transform hover:scale-105",
|
||||||
destructive:
|
destructive:
|
||||||
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||||
outline:
|
outline:
|
||||||
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
"border-2 border-primary bg-transparent text-primary hover:bg-primary hover:text-primary-foreground",
|
||||||
secondary:
|
secondary:
|
||||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||||
link: "text-primary underline-offset-4 hover:underline",
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
|
// Energy-specific variants
|
||||||
|
solar: "bg-gradient-solar text-white hover:shadow-solar transform hover:scale-105",
|
||||||
|
wind: "bg-gradient-wind text-white hover:shadow-wind transform hover:scale-105",
|
||||||
|
geo: "bg-gradient-geo text-white hover:shadow-geo transform hover:scale-105",
|
||||||
|
battery: "bg-gradient-battery text-white hover:shadow-battery transform hover:scale-105",
|
||||||
|
"solar-outline": "border-2 border-solar bg-transparent text-solar hover:bg-solar hover:text-white",
|
||||||
|
"wind-outline": "border-2 border-wind bg-transparent text-wind hover:bg-wind hover:text-white",
|
||||||
|
"geo-outline": "border-2 border-geo bg-transparent text-geo hover:bg-geo hover:text-white",
|
||||||
|
"battery-outline": "border-2 border-battery bg-transparent text-battery hover:bg-battery hover:text-white",
|
||||||
|
hero: "bg-gradient-hero text-white hover:shadow-lg transform hover:scale-105 border border-white/20",
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
default: "h-10 px-4 py-2",
|
default: "h-12 px-6 py-3",
|
||||||
sm: "h-9 rounded-md px-3",
|
sm: "h-9 rounded-md px-3",
|
||||||
lg: "h-11 rounded-md px-8",
|
lg: "h-14 rounded-lg px-8 text-base",
|
||||||
|
xl: "h-16 rounded-lg px-10 text-lg",
|
||||||
icon: "h-10 w-10",
|
icon: "h-10 w-10",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
148
src/index.css
148
src/index.css
|
|
@ -2,41 +2,80 @@
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
/* Definition of the design system. All colors, gradients, fonts, etc should be defined here.
|
/* EnergieProfis Design System - German Renewable Energy Platform */
|
||||||
All colors MUST be HSL.
|
|
||||||
*/
|
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
|
/* Base System Colors */
|
||||||
--background: 0 0% 100%;
|
--background: 0 0% 100%;
|
||||||
--foreground: 222.2 84% 4.9%;
|
--foreground: 218 11% 15%;
|
||||||
|
|
||||||
--card: 0 0% 100%;
|
--card: 0 0% 100%;
|
||||||
--card-foreground: 222.2 84% 4.9%;
|
--card-foreground: 218 11% 15%;
|
||||||
|
|
||||||
--popover: 0 0% 100%;
|
--popover: 0 0% 100%;
|
||||||
--popover-foreground: 222.2 84% 4.9%;
|
--popover-foreground: 218 11% 15%;
|
||||||
|
|
||||||
--primary: 222.2 47.4% 11.2%;
|
/* Energy Type Colors - Solar Orange */
|
||||||
|
--solar-primary: 22 95% 58%;
|
||||||
|
--solar-secondary: 31 95% 60%;
|
||||||
|
--solar-light: 31 100% 85%;
|
||||||
|
--solar-dark: 22 85% 45%;
|
||||||
|
|
||||||
|
/* Energy Type Colors - Wind Blue */
|
||||||
|
--wind-primary: 207 90% 54%;
|
||||||
|
--wind-secondary: 207 90% 61%;
|
||||||
|
--wind-light: 207 100% 85%;
|
||||||
|
--wind-dark: 207 80% 41%;
|
||||||
|
|
||||||
|
/* Energy Type Colors - Geothermal Green */
|
||||||
|
--geo-primary: 122 39% 49%;
|
||||||
|
--geo-secondary: 122 40% 56%;
|
||||||
|
--geo-light: 122 45% 80%;
|
||||||
|
--geo-dark: 122 35% 36%;
|
||||||
|
|
||||||
|
/* Energy Type Colors - Battery Purple */
|
||||||
|
--battery-primary: 291 64% 42%;
|
||||||
|
--battery-secondary: 291 64% 49%;
|
||||||
|
--battery-light: 291 70% 80%;
|
||||||
|
--battery-dark: 291 60% 29%;
|
||||||
|
|
||||||
|
/* Brand Colors */
|
||||||
|
--primary: 218 47% 18%;
|
||||||
--primary-foreground: 210 40% 98%;
|
--primary-foreground: 210 40% 98%;
|
||||||
|
--secondary: 210 20% 94%;
|
||||||
|
--secondary-foreground: 218 47% 18%;
|
||||||
|
|
||||||
--secondary: 210 40% 96.1%;
|
/* Utility Colors */
|
||||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
--muted: 210 20% 94%;
|
||||||
|
--muted-foreground: 218 11% 50%;
|
||||||
--muted: 210 40% 96.1%;
|
--accent: 210 20% 92%;
|
||||||
--muted-foreground: 215.4 16.3% 46.9%;
|
--accent-foreground: 218 47% 18%;
|
||||||
|
--destructive: 0 84% 60%;
|
||||||
--accent: 210 40% 96.1%;
|
|
||||||
--accent-foreground: 222.2 47.4% 11.2%;
|
|
||||||
|
|
||||||
--destructive: 0 84.2% 60.2%;
|
|
||||||
--destructive-foreground: 210 40% 98%;
|
--destructive-foreground: 210 40% 98%;
|
||||||
|
--border: 214 32% 91%;
|
||||||
|
--input: 214 32% 91%;
|
||||||
|
--ring: 218 47% 18%;
|
||||||
|
|
||||||
--border: 214.3 31.8% 91.4%;
|
/* Energy Gradients */
|
||||||
--input: 214.3 31.8% 91.4%;
|
--gradient-solar: linear-gradient(135deg, hsl(var(--solar-primary)) 0%, hsl(var(--solar-secondary)) 100%);
|
||||||
--ring: 222.2 84% 4.9%;
|
--gradient-wind: linear-gradient(135deg, hsl(var(--wind-primary)) 0%, hsl(var(--wind-secondary)) 100%);
|
||||||
|
--gradient-geo: linear-gradient(135deg, hsl(var(--geo-primary)) 0%, hsl(var(--geo-secondary)) 100%);
|
||||||
|
--gradient-battery: linear-gradient(135deg, hsl(var(--battery-primary)) 0%, hsl(var(--battery-secondary)) 100%);
|
||||||
|
--gradient-hero: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(218 47% 25%) 100%);
|
||||||
|
|
||||||
--radius: 0.5rem;
|
/* Shadows */
|
||||||
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||||
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||||
|
--shadow-solar: 0 8px 32px hsl(var(--solar-primary) / 0.25);
|
||||||
|
--shadow-wind: 0 8px 32px hsl(var(--wind-primary) / 0.25);
|
||||||
|
--shadow-geo: 0 8px 32px hsl(var(--geo-primary) / 0.25);
|
||||||
|
--shadow-battery: 0 8px 32px hsl(var(--battery-primary) / 0.25);
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
--transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||||
|
|
||||||
|
--radius: 0.75rem;
|
||||||
|
|
||||||
--sidebar-background: 0 0% 98%;
|
--sidebar-background: 0 0% 98%;
|
||||||
|
|
||||||
|
|
@ -100,6 +139,67 @@ All colors MUST be HSL.
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground;
|
@apply bg-background text-foreground font-sans;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom scrollbar */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
@apply bg-secondary;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
@apply bg-muted-foreground/30 rounded-full;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
@apply bg-muted-foreground/50;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Smooth animations for all elements */
|
||||||
|
* {
|
||||||
|
transition: var(--transition-smooth);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Focus styles */
|
||||||
|
*:focus-visible {
|
||||||
|
@apply outline-none ring-2 ring-primary ring-offset-2 ring-offset-background;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Selection styles */
|
||||||
|
::selection {
|
||||||
|
@apply bg-primary/20;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom gradient text utilities */
|
||||||
|
.gradient-text-solar {
|
||||||
|
background: var(--gradient-solar);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-text-wind {
|
||||||
|
background: var(--gradient-wind);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-text-geo {
|
||||||
|
background: var(--gradient-geo);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-text-battery {
|
||||||
|
background: var(--gradient-battery);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,12 +1,19 @@
|
||||||
// Update this page (the content is just a fallback if you fail to update the page)
|
import Header from "@/components/Header";
|
||||||
|
import HeroSection from "@/components/HeroSection";
|
||||||
|
import EnergyTypesSection from "@/components/EnergyTypesSection";
|
||||||
|
import WhyChooseUsSection from "@/components/WhyChooseUsSection";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
|
||||||
const Index = () => {
|
const Index = () => {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex items-center justify-center bg-background">
|
<div className="min-h-screen">
|
||||||
<div className="text-center">
|
<Header />
|
||||||
<h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
|
<main>
|
||||||
<p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
|
<HeroSection />
|
||||||
</div>
|
<EnergyTypesSection />
|
||||||
|
<WhyChooseUsSection />
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,135 @@
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Sun, Zap, TrendingUp, Shield, ArrowRight } from "lucide-react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import solarImage from "@/assets/solar-installation.jpg";
|
||||||
|
|
||||||
|
const Solar = () => {
|
||||||
|
const benefits = [
|
||||||
|
{
|
||||||
|
icon: Sun,
|
||||||
|
title: "Nachhaltige Energie",
|
||||||
|
description: "100% saubere, erneuerbare Energie direkt von der Sonne"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Zap,
|
||||||
|
title: "Kosteneinsparung",
|
||||||
|
description: "Bis zu 70% Reduzierung Ihrer Stromkosten"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: TrendingUp,
|
||||||
|
title: "Wertsteigerung",
|
||||||
|
description: "Erhöhung des Immobilienwerts um bis zu 10%"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: "Langzeitgarantie",
|
||||||
|
description: "20+ Jahre Produktgarantie und Leistungsgarantie"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="relative min-h-[500px] flex items-center overflow-hidden">
|
||||||
|
<div className="absolute inset-0">
|
||||||
|
<img
|
||||||
|
src={solarImage}
|
||||||
|
alt="Solar Installation"
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-r from-solar/80 via-solar/60 to-transparent"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container mx-auto px-4 relative z-10">
|
||||||
|
<div className="max-w-2xl text-white">
|
||||||
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
|
||||||
|
Solar-Installateure in Ihrer Nähe
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-xl md:text-2xl text-white/90 mb-8 leading-relaxed">
|
||||||
|
Finden Sie qualifizierte Solartechnik-Experten für Photovoltaik-Anlagen,
|
||||||
|
Solarthermie und komplette Energiesysteme.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4">
|
||||||
|
<Button variant="hero" size="xl" className="bg-white text-solar hover:bg-white/90" asChild>
|
||||||
|
<Link to="/installateur-finden?type=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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Benefits Section */}
|
||||||
|
<section className="py-20 bg-gradient-to-b from-background to-solar-light/10">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold mb-6 text-foreground">
|
||||||
|
Warum Solar?
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||||
|
Investieren Sie in die Zukunft mit nachhaltiger Solarenergie
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
{benefits.map((benefit, index) => (
|
||||||
|
<Card key={index} className="group hover:shadow-solar/20 hover:shadow-xl transition-all duration-300 border-0 bg-white/80 backdrop-blur-sm">
|
||||||
|
<CardContent className="p-8 text-center">
|
||||||
|
<div className="w-16 h-16 bg-gradient-solar rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||||
|
<benefit.icon className="w-8 h-8 text-white" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="text-xl font-bold mb-4 text-foreground">
|
||||||
|
{benefit.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p className="text-muted-foreground leading-relaxed">
|
||||||
|
{benefit.description}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<section className="py-20 bg-gradient-solar text-white">
|
||||||
|
<div className="container mx-auto px-4 text-center">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold mb-6">
|
||||||
|
Bereit für Ihre Solar-Installation?
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl mb-8 text-white/90 max-w-2xl mx-auto">
|
||||||
|
Erhalten Sie kostenlose Angebote von geprüften Solar-Installateuren in Ihrer Region
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<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
|
||||||
|
<ArrowRight className="w-5 h-5 ml-2" />
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Solar;
|
||||||
|
|
@ -0,0 +1,135 @@
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Wind, Zap, TrendingUp, Shield, ArrowRight } from "lucide-react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import windImage from "@/assets/wind-turbines.jpg";
|
||||||
|
|
||||||
|
const WindPage = () => {
|
||||||
|
const benefits = [
|
||||||
|
{
|
||||||
|
icon: Wind,
|
||||||
|
title: "Konstante Energie",
|
||||||
|
description: "24/7 Energieproduktion bei ausreichender Windgeschwindigkeit"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Zap,
|
||||||
|
title: "Hohe Effizienz",
|
||||||
|
description: "Moderne Anlagen nutzen auch schwache Winde effektiv"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: TrendingUp,
|
||||||
|
title: "Skalierbarkeit",
|
||||||
|
description: "Von kleinen Anlagen bis zu großen Windparks"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: "Bewährte Technologie",
|
||||||
|
description: "Jahrzehntelange Erfahrung und zuverlässige Systeme"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="relative min-h-[500px] flex items-center overflow-hidden">
|
||||||
|
<div className="absolute inset-0">
|
||||||
|
<img
|
||||||
|
src={windImage}
|
||||||
|
alt="Wind Turbines"
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-r from-wind/80 via-wind/60 to-transparent"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container mx-auto px-4 relative z-10">
|
||||||
|
<div className="max-w-2xl text-white">
|
||||||
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
|
||||||
|
Wind-Installateure für Ihre Region
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-xl md:text-2xl text-white/90 mb-8 leading-relaxed">
|
||||||
|
Entdecken Sie die Kraft des Windes mit modernen Windkraftanlagen
|
||||||
|
für private und gewerbliche Nutzung.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4">
|
||||||
|
<Button variant="hero" size="xl" className="bg-white text-wind hover:bg-white/90" asChild>
|
||||||
|
<Link to="/installateur-finden?type=wind">
|
||||||
|
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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Benefits Section */}
|
||||||
|
<section className="py-20 bg-gradient-to-b from-background to-wind-light/10">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold mb-6 text-foreground">
|
||||||
|
Warum Windenergie?
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||||
|
Nutzen Sie die unerschöpfliche Kraft des Windes für saubere Energie
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
{benefits.map((benefit, index) => (
|
||||||
|
<Card key={index} className="group hover:shadow-wind/20 hover:shadow-xl transition-all duration-300 border-0 bg-white/80 backdrop-blur-sm">
|
||||||
|
<CardContent className="p-8 text-center">
|
||||||
|
<div className="w-16 h-16 bg-gradient-wind rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||||
|
<benefit.icon className="w-8 h-8 text-white" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="text-xl font-bold mb-4 text-foreground">
|
||||||
|
{benefit.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p className="text-muted-foreground leading-relaxed">
|
||||||
|
{benefit.description}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<section className="py-20 bg-gradient-wind text-white">
|
||||||
|
<div className="container mx-auto px-4 text-center">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold mb-6">
|
||||||
|
Bereit für Ihre Windkraft-Installation?
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl mb-8 text-white/90 max-w-2xl mx-auto">
|
||||||
|
Erhalten Sie kostenlose Angebote von geprüften Wind-Installateuren in Ihrer Region
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<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
|
||||||
|
<ArrowRight className="w-5 h-5 ml-2" />
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WindPage;
|
||||||
|
|
@ -52,6 +52,31 @@ export default {
|
||||||
DEFAULT: 'hsl(var(--card))',
|
DEFAULT: 'hsl(var(--card))',
|
||||||
foreground: 'hsl(var(--card-foreground))'
|
foreground: 'hsl(var(--card-foreground))'
|
||||||
},
|
},
|
||||||
|
// Energy Type Colors
|
||||||
|
solar: {
|
||||||
|
DEFAULT: 'hsl(var(--solar-primary))',
|
||||||
|
secondary: 'hsl(var(--solar-secondary))',
|
||||||
|
light: 'hsl(var(--solar-light))',
|
||||||
|
dark: 'hsl(var(--solar-dark))'
|
||||||
|
},
|
||||||
|
wind: {
|
||||||
|
DEFAULT: 'hsl(var(--wind-primary))',
|
||||||
|
secondary: 'hsl(var(--wind-secondary))',
|
||||||
|
light: 'hsl(var(--wind-light))',
|
||||||
|
dark: 'hsl(var(--wind-dark))'
|
||||||
|
},
|
||||||
|
geo: {
|
||||||
|
DEFAULT: 'hsl(var(--geo-primary))',
|
||||||
|
secondary: 'hsl(var(--geo-secondary))',
|
||||||
|
light: 'hsl(var(--geo-light))',
|
||||||
|
dark: 'hsl(var(--geo-dark))'
|
||||||
|
},
|
||||||
|
battery: {
|
||||||
|
DEFAULT: 'hsl(var(--battery-primary))',
|
||||||
|
secondary: 'hsl(var(--battery-secondary))',
|
||||||
|
light: 'hsl(var(--battery-light))',
|
||||||
|
dark: 'hsl(var(--battery-dark))'
|
||||||
|
},
|
||||||
sidebar: {
|
sidebar: {
|
||||||
DEFAULT: 'hsl(var(--sidebar-background))',
|
DEFAULT: 'hsl(var(--sidebar-background))',
|
||||||
foreground: 'hsl(var(--sidebar-foreground))',
|
foreground: 'hsl(var(--sidebar-foreground))',
|
||||||
|
|
@ -63,6 +88,23 @@ export default {
|
||||||
ring: 'hsl(var(--sidebar-ring))'
|
ring: 'hsl(var(--sidebar-ring))'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
backgroundImage: {
|
||||||
|
'gradient-solar': 'var(--gradient-solar)',
|
||||||
|
'gradient-wind': 'var(--gradient-wind)',
|
||||||
|
'gradient-geo': 'var(--gradient-geo)',
|
||||||
|
'gradient-battery': 'var(--gradient-battery)',
|
||||||
|
'gradient-hero': 'var(--gradient-hero)'
|
||||||
|
},
|
||||||
|
boxShadow: {
|
||||||
|
'solar': 'var(--shadow-solar)',
|
||||||
|
'wind': 'var(--shadow-wind)',
|
||||||
|
'geo': 'var(--shadow-geo)',
|
||||||
|
'battery': 'var(--shadow-battery)'
|
||||||
|
},
|
||||||
|
transitionTimingFunction: {
|
||||||
|
'smooth': 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||||
|
'bounce': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
|
||||||
|
},
|
||||||
borderRadius: {
|
borderRadius: {
|
||||||
lg: 'var(--radius)',
|
lg: 'var(--radius)',
|
||||||
md: 'calc(var(--radius) - 2px)',
|
md: 'calc(var(--radius) - 2px)',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue