mirror of
https://github.com/Motion-Games/MotionWebStudio.git
synced 2026-04-21 09:00:53 +02:00
stripe
This commit is contained in:
@@ -1,18 +1,20 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { ArrowLeft, Sun, Battery, Zap, ChevronRight, Menu, X, Phone, Mail, CheckCircle, Home, Info, Briefcase, Calculator, ArrowRight } from 'lucide-react';
|
||||
import {
|
||||
ArrowLeft, ArrowRight, Sun, Battery, Zap, ChevronRight, Menu, X, Phone,
|
||||
Mail, CheckCircle, Home, Info, Briefcase, Calculator,
|
||||
MapPin, Clock, Star, Share2, ArrowUpRight, Play, BookOpen
|
||||
} from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
export const BlueWave: React.FC = () => {
|
||||
const [activePage, setActivePage] = useState<'home' | 'services' | 'about' | 'contact'>('home');
|
||||
const [activePage, setActivePage] = useState<'home' | 'services' | 'blog' | 'about' | 'contact'>('home');
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
|
||||
// Smooth scroll to top when "changing pages" in this SPA simulation
|
||||
useEffect(() => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}, [activePage]);
|
||||
|
||||
// Navbar scroll effect
|
||||
useEffect(() => {
|
||||
const handleScroll = () => setScrolled(window.scrollY > 20);
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
@@ -22,267 +24,224 @@ export const BlueWave: React.FC = () => {
|
||||
const navItems = [
|
||||
{ id: 'home', label: 'Főoldal', icon: Home },
|
||||
{ id: 'services', label: 'Megoldások', icon: Zap },
|
||||
{ id: 'about', label: 'Cégünkről', icon: Info },
|
||||
{ id: 'blog', label: 'Blog', icon: BookOpen },
|
||||
{ id: 'about', label: 'Rólunk', icon: Info },
|
||||
{ id: 'contact', label: 'Kapcsolat', icon: Phone },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="font-sans text-gray-800 bg-white min-h-screen flex flex-col selection:bg-[#0284c7] selection:text-white">
|
||||
{/* Return to Main Site */}
|
||||
<div className="fixed bottom-6 right-6 z-[60]">
|
||||
{/* Back to main site button */}
|
||||
<div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-[60]">
|
||||
<Link to="/#references">
|
||||
<button className="bg-gray-900 text-white shadow-xl px-5 py-3 rounded-xl text-sm font-sans font-medium flex items-center hover:bg-gray-800 hover:-translate-y-1 transition-all duration-300">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" /> Vissza a referenciákhoz
|
||||
<button className="bg-gray-900 text-white shadow-2xl px-4 md:px-5 py-2.5 md:py-3 rounded-lg md:rounded-xl text-xs md:text-sm font-sans font-bold flex items-center hover:bg-[#0284c7] transition-all transform hover:-translate-y-1">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" /> Vissza a portfólióhoz
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Top Bar */}
|
||||
<div className="bg-[#0f172a] text-gray-300 py-2.5 px-4 text-xs font-medium hidden md:block border-b border-gray-800">
|
||||
<div className="bg-[#0f172a] text-gray-300 py-2.5 px-4 text-[10px] md:text-xs font-semibold hidden sm:block border-b border-gray-800">
|
||||
<div className="max-w-7xl mx-auto flex justify-between items-center">
|
||||
<div className="flex space-x-8">
|
||||
<div className="flex space-x-6">
|
||||
<span className="flex items-center hover:text-white transition-colors cursor-pointer"><Phone className="w-3.5 h-3.5 mr-2 text-[#38bdf8]" /> +36 30 999 8888</span>
|
||||
<span className="flex items-center hover:text-white transition-colors cursor-pointer"><Mail className="w-3.5 h-3.5 mr-2 text-[#38bdf8]" /> info@bluewave-solar.demo</span>
|
||||
<span className="flex items-center hover:text-white transition-colors cursor-pointer"><Mail className="w-3.5 h-3.5 mr-2 text-[#38bdf8]" /> info@bluewave-solar.hu</span>
|
||||
</div>
|
||||
<div className="flex space-x-6">
|
||||
<a href="#" className="hover:text-white transition-colors">Lakossági</a>
|
||||
<a href="#" className="hover:text-white transition-colors">Ipari</a>
|
||||
<a href="#" className="hover:text-white transition-colors text-[#38bdf8]">Partnerprogram</a>
|
||||
<span className="text-[#38bdf8] uppercase tracking-widest text-[9px]">Ingyenes felmérés az ország egész területén</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navbar */}
|
||||
<nav className={`sticky top-0 z-50 transition-all duration-300 border-b ${scrolled ? 'bg-white/95 backdrop-blur-md shadow-md py-0 border-gray-200' : 'bg-white py-4 border-transparent'}`}>
|
||||
<nav className={`sticky top-0 z-50 transition-all duration-500 border-b ${scrolled ? 'bg-white/95 backdrop-blur-md shadow-xl py-0 border-gray-100' : 'bg-white py-2 md:py-4 border-transparent'}`}>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between h-20 items-center">
|
||||
<div className="flex justify-between h-16 md:h-20 items-center">
|
||||
<div className="flex items-center cursor-pointer group" onClick={() => setActivePage('home')}>
|
||||
<div className="bg-gradient-to-tr from-[#0284c7] to-[#0ea5e9] p-2.5 rounded-xl mr-3 shadow-lg shadow-sky-200 group-hover:scale-105 transition-transform duration-300">
|
||||
<Sun className="w-7 h-7 text-white" />
|
||||
<div className="bg-gradient-to-tr from-[#0284c7] to-[#0ea5e9] p-2.5 rounded-xl mr-3 shadow-lg shadow-sky-100 group-hover:rotate-12 transition-transform">
|
||||
<Sun className="w-6 h-6 md:w-8 md:h-8 text-white" />
|
||||
</div>
|
||||
<div className="leading-none">
|
||||
<span className="block text-2xl font-bold text-gray-900 tracking-tight">BlueWave</span>
|
||||
<span className="block text-xs font-bold text-[#0284c7] uppercase tracking-widest ml-0.5">Solar Systems</span>
|
||||
<span className="block text-xl md:text-2xl font-black text-gray-900 tracking-tighter uppercase">BlueWave</span>
|
||||
<span className="block text-[8px] md:text-[10px] font-black text-[#0284c7] uppercase tracking-[0.3em] ml-0.5">Napenergia Stúdió</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="hidden md:flex items-center space-x-1">
|
||||
<div className="hidden lg:flex items-center space-x-2">
|
||||
{navItems.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => setActivePage(item.id as any)}
|
||||
className={`relative px-5 py-2.5 rounded-lg text-sm font-semibold transition-all duration-300 ${
|
||||
className={`px-4 py-2 rounded-xl text-sm font-bold transition-all ${
|
||||
activePage === item.id
|
||||
? 'text-[#0284c7] bg-sky-50'
|
||||
: 'text-gray-600 hover:text-[#0284c7] hover:bg-gray-50'
|
||||
: 'text-gray-500 hover:text-[#0284c7] hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
{activePage === item.id && (
|
||||
<span className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1/2 h-0.5 bg-[#0284c7] rounded-full"></span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
<div className="pl-4 ml-4 border-l border-gray-200">
|
||||
<div className="pl-6 ml-4 border-l border-gray-100">
|
||||
<button
|
||||
onClick={() => setActivePage('contact')}
|
||||
className="bg-[#0284c7] hover:bg-[#0369a1] text-white px-6 py-3 rounded-lg font-bold text-sm transition-all shadow-lg shadow-sky-200 hover:-translate-y-0.5"
|
||||
className="bg-[#0284c7] hover:bg-gray-900 text-white px-6 py-3 rounded-xl font-black text-xs uppercase tracking-widest transition-all shadow-lg shadow-sky-100 active:scale-95"
|
||||
>
|
||||
Ingyenes felmérés
|
||||
Ajánlatkérés
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6 md:hidden">
|
||||
<button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
|
||||
<button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="lg:hidden p-2 text-gray-600 bg-gray-50 rounded-lg">
|
||||
{mobileMenuOpen ? <X /> : <Menu />}
|
||||
</button>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="md:hidden bg-white border-t border-gray-100 p-4 space-y-2 shadow-xl absolute w-full animate-fade-in">
|
||||
<div className="lg:hidden bg-white border-t border-gray-100 p-6 space-y-3 shadow-2xl absolute w-full animate-fade-in">
|
||||
{navItems.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => { setActivePage(item.id as any); setMobileMenuOpen(false); }}
|
||||
className={`w-full flex items-center px-4 py-4 rounded-xl text-base font-medium ${activePage === item.id ? 'bg-sky-50 text-[#0284c7]' : 'text-gray-700 hover:bg-gray-50'}`}
|
||||
className={`w-full flex items-center px-5 py-4 rounded-2xl text-base font-bold ${activePage === item.id ? 'bg-sky-50 text-[#0284c7]' : 'text-gray-600'}`}
|
||||
>
|
||||
<item.icon className="w-5 h-5 mr-3 opacity-70" />
|
||||
<item.icon className="w-5 h-5 mr-4 opacity-50" />
|
||||
{item.label}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
onClick={() => { setActivePage('contact'); setMobileMenuOpen(false); }}
|
||||
className="w-full mt-4 bg-[#0284c7] text-white px-4 py-4 rounded-xl font-bold shadow-md"
|
||||
className="w-full mt-6 bg-gray-900 text-white py-5 rounded-2xl font-black uppercase tracking-widest text-xs"
|
||||
>
|
||||
Ingyenes felmérés
|
||||
Ingyenes Konzultáció
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* Main Content Area - Simulating Routing with smooth fade */}
|
||||
<main className="flex-grow relative">
|
||||
{/* Main Content Area */}
|
||||
<main className="flex-grow">
|
||||
<div key={activePage} className="animate-fade-in">
|
||||
|
||||
{/* HOME PAGE */}
|
||||
{/* --- HOME PAGE --- */}
|
||||
{activePage === 'home' && (
|
||||
<>
|
||||
<section className="relative bg-[#0f172a] py-32 lg:py-48 overflow-hidden">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<img src="https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80" alt="Solar Panels" className="w-full h-full object-cover opacity-30 scale-105 animate-pulse-slow" />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-[#0f172a] via-[#0f172a]/90 to-transparent"></div>
|
||||
{/* Hero */}
|
||||
<section className="relative min-h-[85vh] flex items-center pt-20 overflow-hidden px-4">
|
||||
<div className="absolute inset-0 z-0 scale-105">
|
||||
<img src="https://images.unsplash.com/photo-1508514177221-188b1cf16e9d?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80" alt="Home Solar" className="w-full h-full object-cover" />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-white via-white/80 to-transparent"></div>
|
||||
</div>
|
||||
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-3xl">
|
||||
<div className="inline-flex items-center px-4 py-2 rounded-full bg-[#0ea5e9]/10 text-[#38bdf8] text-sm font-bold mb-8 border border-[#0ea5e9]/20 backdrop-blur-sm animate-fade-in-up">
|
||||
<CheckCircle className="w-4 h-4 mr-2" /> Hivatalos állami kivitelező partner
|
||||
<div className="relative z-10 max-w-7xl mx-auto w-full">
|
||||
<div className="max-w-2xl">
|
||||
<div className="inline-flex items-center px-4 py-2 rounded-full bg-sky-50 text-[#0284c7] text-[10px] md:text-xs font-black uppercase tracking-widest mb-8 border border-sky-100 shadow-sm animate-fade-in-up">
|
||||
<Star className="w-3 h-3 mr-2 fill-current" /> 2024 Év Kivitelezője Díj
|
||||
</div>
|
||||
<h1 className="text-5xl md:text-7xl font-extrabold text-white mb-8 leading-tight animate-fade-in-up" style={{ animationDelay: '0.1s' }}>
|
||||
Váltson tiszta energiára <br/>
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#38bdf8] to-[#0ea5e9]">a jövőjéért</span>
|
||||
<h1 className="text-4xl md:text-7xl font-black text-gray-900 mb-8 leading-[0.9] tracking-tighter animate-fade-in-up" style={{ animationDelay: '0.1s' }}>
|
||||
A NAPENERGIA <br/>
|
||||
<span className="text-[#0284c7]">MINDENKIÉ.</span>
|
||||
</h1>
|
||||
<p className="text-xl text-gray-300 mb-10 leading-relaxed max-w-2xl animate-fade-in-up" style={{ animationDelay: '0.2s' }}>
|
||||
Csökkentse rezsijét akár 100%-kal prémium napelem rendszereinkkel. Teljeskörű ügyintézés a tervezéstől a kulcsrakész átadásig, 25 év garanciával.
|
||||
<p className="text-lg md:text-xl text-gray-600 mb-10 leading-relaxed font-medium animate-fade-in-up" style={{ animationDelay: '0.2s' }}>
|
||||
Felejtse el a villanyszámlát. Komplett napelemes rendszerek telepítése 0% önerővel, teljes körű állami támogatás ügyintézéssel.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-5 animate-fade-in-up" style={{ animationDelay: '0.3s' }}>
|
||||
<button onClick={() => setActivePage('contact')} className="bg-[#0284c7] hover:bg-[#0369a1] text-white px-10 py-4 rounded-xl font-bold text-lg transition-all flex items-center justify-center shadow-lg shadow-sky-900/50 hover:scale-105">
|
||||
Kalkuláció kérése <ChevronRight className="w-5 h-5 ml-2" />
|
||||
<div className="flex flex-col sm:flex-row gap-4 animate-fade-in-up" style={{ animationDelay: '0.3s' }}>
|
||||
<button onClick={() => setActivePage('contact')} className="bg-[#0284c7] hover:bg-gray-900 text-white px-10 py-5 rounded-2xl font-black text-sm uppercase tracking-widest transition-all shadow-xl shadow-sky-200 flex items-center justify-center">
|
||||
Kérjen ajánlatot <ArrowUpRight className="ml-2 w-5 h-5" />
|
||||
</button>
|
||||
<button onClick={() => setActivePage('services')} className="bg-white/5 hover:bg-white/10 text-white backdrop-blur-sm px-10 py-4 rounded-xl font-bold text-lg transition-all border border-white/10 hover:border-white/30">
|
||||
Rendszereink
|
||||
<button onClick={() => setActivePage('services')} className="bg-white hover:bg-gray-50 text-gray-900 border-2 border-gray-100 px-10 py-5 rounded-2xl font-black text-sm uppercase tracking-widest transition-all">
|
||||
Ismerje meg a technológiát
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-16 flex items-center gap-8 text-gray-400 text-sm font-medium animate-fade-in-up" style={{ animationDelay: '0.5s' }}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-green-500"></div> 1000+ elégedett ügyfél
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-green-500"></div> Országos lefedettség
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-24 bg-gray-50 relative">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-32 relative z-20">
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ icon: Sun, color: 'text-[#0284c7]', bg: 'bg-sky-50', title: 'Prémium Panelek', desc: 'Tier-1 kategóriás napelemek 25 év teljesítménygaranciával és kiemelkedő hatásfokkal.' },
|
||||
{ icon: Battery, color: 'text-emerald-600', bg: 'bg-emerald-50', title: 'Energiatárolás', desc: 'Hibrid rendszerek és akkumulátoros megoldások a teljes függetlenségért.' },
|
||||
{ icon: Briefcase, color: 'text-orange-600', bg: 'bg-orange-50', title: 'Kulcsrakész', desc: 'Minden papírmunkát, pályázatot és engedélyeztetést elintézünk Ön helyett.' }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="bg-white p-10 rounded-2xl shadow-xl border border-gray-100 hover:-translate-y-2 transition-transform duration-300">
|
||||
<div className={`w-16 h-16 ${item.bg} rounded-2xl flex items-center justify-center mb-8 ${item.color}`}>
|
||||
<item.icon className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-4 text-gray-900">{item.title}</h3>
|
||||
<p className="text-gray-600 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-24">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Miért válassza a BlueWave-et?</h2>
|
||||
<p className="text-xl text-gray-600">Szakértelem, minőség és megbízhatóság egy helyen.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-12 items-center">
|
||||
<img src="https://images.unsplash.com/photo-1581092160562-40aa08e78837?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Engineer" className="rounded-3xl shadow-2xl" />
|
||||
<div className="space-y-8">
|
||||
{[
|
||||
{ title: 'Szakértő Mérnökcsapat', text: 'Saját, magasan képzett mérnökeink tervezik meg rendszerét a maximális hatékonyság érdekében.' },
|
||||
{ title: 'Gyors Kivitelezés', text: 'A szerződéskötéstől számított 30 napon belül telepítjük rendszerét.' },
|
||||
{ title: 'Folyamatos Támogatás', text: 'Telepítés után sem engedjük el a kezét, távfelügyeletet és karbantartást biztosítunk.' }
|
||||
].map((feat, i) => (
|
||||
<div key={i} className="flex gap-4">
|
||||
<div className="w-8 h-8 rounded-full bg-[#0284c7] flex-shrink-0 flex items-center justify-center text-white font-bold mt-1">
|
||||
{i + 1}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">{feat.title}</h3>
|
||||
<p className="text-gray-600 leading-relaxed">{feat.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<button onClick={() => setActivePage('about')} className="mt-4 text-[#0284c7] font-bold flex items-center hover:underline">
|
||||
Tudjon meg többet rólunk <ArrowRight className="w-5 h-5 ml-2" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Status Grid */}
|
||||
<section className="py-20 bg-white border-b border-gray-100">
|
||||
<div className="max-w-7xl mx-auto px-4">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
|
||||
{[
|
||||
{ val: '1200+', label: 'Telepített rendszer' },
|
||||
{ val: '25 Év', label: 'Garancia' },
|
||||
{ val: '99%', label: 'Ügyfél-elégedettség' },
|
||||
{ val: '24 Óra', label: 'Válaszidő' }
|
||||
].map((s, i) => (
|
||||
<div key={i} className="text-center">
|
||||
<p className="text-3xl md:text-5xl font-black text-gray-900 mb-2">{s.val}</p>
|
||||
<p className="text-[10px] md:text-xs font-black text-[#0284c7] uppercase tracking-[0.2em]">{s.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Featured Section */}
|
||||
<section className="py-24 bg-gray-50">
|
||||
<div className="max-w-7xl mx-auto px-4">
|
||||
<div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
|
||||
<div className="max-w-2xl">
|
||||
<h2 className="text-sm font-black text-[#0284c7] uppercase tracking-[0.3em] mb-4">Prémium Szolgáltatás</h2>
|
||||
<p className="text-3xl md:text-5xl font-black text-gray-900 leading-tight tracking-tighter">Miért a BlueWave a legjobb választás?</p>
|
||||
</div>
|
||||
<button onClick={() => setActivePage('about')} className="text-sm font-bold text-gray-400 hover:text-[#0284c7] transition-colors flex items-center group">
|
||||
Tudjon meg többet rólunk <ChevronRight className="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ icon: Sun, title: 'Csúcskategóriás Panelek', desc: 'Csak Tier-1 besorolású, bizonyítottan tartós napelemeket használunk a legnagyobb hatásfokért.' },
|
||||
{ icon: Battery, title: 'Intelligens Tárolás', desc: 'Hibrid invertereink és akkumulátoros rendszereink révén akár éjszaka is tiszta energiát használhat.' },
|
||||
{ icon: Shield, title: '25 Év Teljes Biztonság', desc: 'Nemcsak a termékekre, hanem a munkavégzésre is kiemelkedő garanciális feltételeket biztosítunk.' }
|
||||
].map((f, i) => (
|
||||
<div key={i} className="bg-white p-10 rounded-[32px] shadow-sm hover:shadow-xl transition-all group">
|
||||
<div className="w-16 h-16 bg-sky-50 rounded-2xl flex items-center justify-center text-[#0284c7] mb-8 group-hover:bg-[#0284c7] group-hover:text-white transition-colors">
|
||||
<f.icon className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-black text-gray-900 mb-4 uppercase tracking-tighter">{f.title}</h3>
|
||||
<p className="text-gray-500 text-sm leading-relaxed font-medium">{f.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* SERVICES PAGE */}
|
||||
{/* --- SERVICES PAGE --- */}
|
||||
{activePage === 'services' && (
|
||||
<div className="py-20 bg-gray-50 min-h-screen">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="py-24 bg-white min-h-screen px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-20">
|
||||
<span className="text-[#0284c7] font-bold uppercase tracking-wider text-sm mb-2 block">Megoldásaink</span>
|
||||
<h2 className="text-4xl md:text-5xl font-extrabold text-gray-900 mb-6">Minden igényre van válaszunk</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">Legyen szó kis családi házról vagy hatalmas ipari létesítményről, mi megtaláljuk az optimális rendszert.</p>
|
||||
<span className="text-[#0284c7] font-black uppercase tracking-[0.4em] text-xs mb-4 block">Szolgáltatások</span>
|
||||
<h2 className="text-4xl md:text-6xl font-black text-gray-900 mb-8 tracking-tighter">Komplex Energetikai Megoldások</h2>
|
||||
<p className="text-lg text-gray-500 max-w-3xl mx-auto font-medium leading-relaxed">Saját mérnöki csapattal, alvállalkozók nélkül végezzük a teljes kivitelezést.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-16">
|
||||
{/* Residential */}
|
||||
<div className="group bg-white rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 border border-gray-100">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
<div className="bg-gray-900 rounded-[40px] overflow-hidden group shadow-2xl">
|
||||
<div className="h-80 overflow-hidden relative">
|
||||
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors z-10"></div>
|
||||
<img src="https://images.unsplash.com/photo-1613665813446-82a78c468a1d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Residential" className="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700" />
|
||||
<div className="absolute bottom-6 left-6 z-20">
|
||||
<span className="bg-white px-4 py-1 rounded-full text-sm font-bold text-[#0284c7] mb-2 inline-block">Lakossági</span>
|
||||
<h3 className="text-3xl font-bold text-white">Családi Házak</h3>
|
||||
</div>
|
||||
<img src="https://images.unsplash.com/photo-1613665813446-82a78c468a1d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Res" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 opacity-80" />
|
||||
<div className="absolute top-8 left-8 bg-white/10 backdrop-blur-md px-4 py-2 rounded-full border border-white/20 text-white text-[10px] font-black uppercase tracking-widest">Családi Házak</div>
|
||||
</div>
|
||||
<div className="p-10">
|
||||
<p className="text-gray-600 mb-8 text-lg leading-relaxed">
|
||||
Csökkentse otthona energiafüggőségét és növelje ingatlana értékét. Rendszereink diszkrétek, esztétikusak és okosotthon-kompatibilisek.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-4 mb-8">
|
||||
{['Rezsi nullázása', 'Hibrid Inverterek', 'Okos monitorozás', 'Elektromos autó töltés'].map((item, i) => (
|
||||
<div key={i} className="flex items-center text-gray-700 font-medium">
|
||||
<CheckCircle className="w-5 h-5 text-green-500 mr-3" /> {item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button onClick={() => setActivePage('contact')} className="w-full py-4 border-2 border-[#0284c7] text-[#0284c7] font-bold rounded-xl hover:bg-[#0284c7] hover:text-white transition-all">
|
||||
Ajánlatkérés Családi Házra
|
||||
<div className="p-10 md:p-12">
|
||||
<h3 className="text-3xl font-black text-white mb-6 uppercase tracking-tighter">Lakossági Napelem</h3>
|
||||
<p className="text-gray-400 mb-10 leading-relaxed font-medium">Optimalizálja otthona fenntartási költségeit. Teljes körű engedélyeztetés, H-tarifa ügyintézés és statikai tervezés.</p>
|
||||
<button onClick={() => setActivePage('contact')} className="w-full py-5 border-2 border-white/10 text-white font-black rounded-2xl hover:bg-white hover:text-gray-900 transition-all uppercase tracking-widest text-xs">
|
||||
Kérjen lakossági ajánlatot
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Industrial */}
|
||||
<div className="group bg-white rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 border border-gray-100">
|
||||
<div className="bg-[#0284c7] rounded-[40px] overflow-hidden group shadow-2xl">
|
||||
<div className="h-80 overflow-hidden relative">
|
||||
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors z-10"></div>
|
||||
<img src="https://images.unsplash.com/photo-1624397640148-949b1732bb0a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Commercial" className="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700" />
|
||||
<div className="absolute bottom-6 left-6 z-20">
|
||||
<span className="bg-white px-4 py-1 rounded-full text-sm font-bold text-[#0284c7] mb-2 inline-block">Ipari</span>
|
||||
<h3 className="text-3xl font-bold text-white">Vállalatok & Üzemek</h3>
|
||||
</div>
|
||||
<img src="https://images.unsplash.com/photo-1624397640148-949b1732bb0a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Comm" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 opacity-80" />
|
||||
<div className="absolute top-8 left-8 bg-white/20 backdrop-blur-md px-4 py-2 rounded-full border border-white/30 text-white text-[10px] font-black uppercase tracking-widest">Ipar & Mezőgazdaság</div>
|
||||
</div>
|
||||
<div className="p-10">
|
||||
<p className="text-gray-600 mb-8 text-lg leading-relaxed">
|
||||
Optimalizálja vállalkozása működési költségeit. Nagy teljesítményű rendszerek, amelyek fedezik a gépek és üzemcsarnokok energiaigényét.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-4 mb-8">
|
||||
{['Gyors megtérülés', '50kW - 5MW teljesítmény', 'ESG megfelelőség', 'Saját transzformátor'].map((item, i) => (
|
||||
<div key={i} className="flex items-center text-gray-700 font-medium">
|
||||
<CheckCircle className="w-5 h-5 text-green-500 mr-3" /> {item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button onClick={() => setActivePage('contact')} className="w-full py-4 border-2 border-[#0284c7] text-[#0284c7] font-bold rounded-xl hover:bg-[#0284c7] hover:text-white transition-all">
|
||||
Ipari Konzultáció Kérése
|
||||
<div className="p-10 md:p-12 text-white">
|
||||
<h3 className="text-3xl font-black mb-6 uppercase tracking-tighter">Vállalati Rendszerek</h3>
|
||||
<p className="text-sky-100 mb-10 leading-relaxed font-medium">Csökkentse cége rezsiköltségét ipari méretű naperőművekkel. Megtérülési számítások és pályázati tanácsadás professzionálisan.</p>
|
||||
<button onClick={() => setActivePage('contact')} className="w-full py-5 bg-white text-[#0284c7] font-black rounded-2xl hover:bg-gray-900 hover:text-white transition-all uppercase tracking-widest text-xs">
|
||||
Ipari konzultáció kérése
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -291,138 +250,155 @@ export const BlueWave: React.FC = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ABOUT PAGE */}
|
||||
{activePage === 'about' && (
|
||||
<div className="py-20 bg-white">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div className="inline-block p-3 rounded-full bg-sky-100 mb-6 text-[#0284c7]">
|
||||
<Sun className="w-8 h-8" />
|
||||
{/* --- BLOG PAGE --- */}
|
||||
{activePage === 'blog' && (
|
||||
<div className="py-24 bg-gray-50 min-h-screen px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-20">
|
||||
<span className="text-[#0284c7] font-black uppercase tracking-[0.4em] text-xs mb-4 block">Tudástár</span>
|
||||
<h2 className="text-4xl md:text-6xl font-black text-gray-900 tracking-tighter">Friss hírek & Cikkek</h2>
|
||||
</div>
|
||||
<h2 className="text-4xl font-extrabold text-gray-900 mb-8">A BlueWave Küldetése</h2>
|
||||
<p className="text-xl text-gray-700 leading-relaxed mb-12">
|
||||
A BlueWave Solar Kft. 2015-ben azzal a céllal alakult, hogy elérhetővé tegye a napenergiát mindenki számára. Hiszünk abban, hogy a fenntarthatóság nem luxus, hanem a jövő záloga. Csapatunk okleveles mérnökökből, pályázati szakértőkből és tapasztalt kivitelezőkből áll.
|
||||
</p>
|
||||
|
||||
<div className="bg-gradient-to-br from-[#0f172a] to-[#1e293b] rounded-3xl p-12 text-white shadow-2xl mb-16 relative overflow-hidden">
|
||||
<div className="relative z-10 grid grid-cols-1 md:grid-cols-3 gap-12">
|
||||
<div>
|
||||
<div className="text-5xl font-bold text-[#38bdf8] mb-2">500+</div>
|
||||
<div className="text-gray-400 font-medium uppercase tracking-wide text-sm">Telepített rendszer</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-5xl font-bold text-[#38bdf8] mb-2">15MW</div>
|
||||
<div className="text-gray-400 font-medium uppercase tracking-wide text-sm">Össz teljesítmény</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-5xl font-bold text-[#38bdf8] mb-2">100%</div>
|
||||
<div className="text-gray-400 font-medium uppercase tracking-wide text-sm">Ügyfél elégedettség</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Background decorations */}
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-[#38bdf8] rounded-full filter blur-[100px] opacity-20"></div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ date: '2024.03.15', title: 'Új napelemes pályázatok: Mire számíthatunk?', img: 'https://images.unsplash.com/photo-1559302504-64aae6ca6b6d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' },
|
||||
{ date: '2024.03.02', title: 'Hibrid vagy szigetüzemű rendszer? Segítünk dönteni.', img: 'https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' },
|
||||
{ date: '2024.02.20', title: 'Hogyan tartsuk karban napelemes rendszerünket?', img: 'https://images.unsplash.com/photo-1548550023-2bdb3c5beed7?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' }
|
||||
].map((post, i) => (
|
||||
<article key={i} className="bg-white rounded-[32px] overflow-hidden shadow-sm hover:shadow-2xl transition-all group">
|
||||
<div className="h-60 overflow-hidden">
|
||||
<img src={post.img} alt={post.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</div>
|
||||
<div className="p-8">
|
||||
<time className="text-[10px] font-black text-[#0284c7] uppercase tracking-widest">{post.date}</time>
|
||||
<h3 className="text-xl font-black text-gray-900 mt-3 mb-6 leading-tight uppercase tracking-tighter">{post.title}</h3>
|
||||
<button className="flex items-center text-xs font-black text-gray-400 hover:text-[#0284c7] uppercase tracking-widest transition-colors">
|
||||
Tovább olvasom <ArrowRight className="w-4 h-4 ml-2" />
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 text-left">
|
||||
<div className="bg-gray-50 p-8 rounded-2xl">
|
||||
<h3 className="font-bold text-xl mb-3">Minőség</h3>
|
||||
<p className="text-gray-600">Kizárólag minősített, prémium gyártók termékeit használjuk, hogy rendszere évtizedekig működjön.</p>
|
||||
{/* --- ABOUT PAGE --- */}
|
||||
{activePage === 'about' && (
|
||||
<div className="py-24 bg-white min-h-screen px-4">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<h2 className="text-4xl md:text-7xl font-black text-gray-900 mb-12 tracking-tighter uppercase leading-[0.9]">Több mint egy <br/><span className="text-[#0284c7]">kivitelező cég.</span></h2>
|
||||
<div className="grid md:grid-cols-2 gap-16 items-center">
|
||||
<div className="space-y-6">
|
||||
<p className="text-lg text-gray-600 leading-relaxed font-medium">A BlueWave Solar azért jött létre, hogy a megújuló energiát elérhetővé, egyszerűvé és átláthatóvá tegye mindenki számára. Csapatunk több mint 10 éves tapasztalattal rendelkezik a villamosenergia-szektorban.</p>
|
||||
<p className="text-lg text-gray-600 leading-relaxed font-medium">Saját mérnökeinkkel és telepítő csapatunkkal garantáljuk, hogy minden rendszerünk évtizedekig hibátlanul működjön. Számunkra nemcsak a panelek felrakása a cél, hanem egy fenntarthatóbb jövő építése.</p>
|
||||
<div className="pt-10 flex gap-6">
|
||||
<div className="p-4 bg-sky-50 rounded-2xl border border-sky-100">
|
||||
<p className="text-2xl font-black text-[#0284c7]">10+</p>
|
||||
<p className="text-[10px] font-black text-gray-400 uppercase tracking-widest">Év tapasztalat</p>
|
||||
</div>
|
||||
<div className="p-4 bg-sky-50 rounded-2xl border border-sky-100">
|
||||
<p className="text-2xl font-black text-[#0284c7]">HU</p>
|
||||
<p className="text-[10px] font-black text-gray-400 uppercase tracking-widest">Országos lefedettség</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-50 p-8 rounded-2xl">
|
||||
<h3 className="font-bold text-xl mb-3">Innováció</h3>
|
||||
<p className="text-gray-600">Folyamatos követjük a technológia fejlődését, hogy a legmodernebb megoldásokat kínálhassuk.</p>
|
||||
</div>
|
||||
<div className="bg-gray-50 p-8 rounded-2xl">
|
||||
<h3 className="font-bold text-xl mb-3">Garancia</h3>
|
||||
<p className="text-gray-600">A kivitelezésre és a termékekre is kiemelkedő garanciális feltételeket biztosítunk.</p>
|
||||
<div className="rounded-[40px] overflow-hidden shadow-2xl">
|
||||
<img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Team" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* CONTACT PAGE */}
|
||||
{/* --- CONTACT PAGE --- */}
|
||||
{activePage === 'contact' && (
|
||||
<div className="py-20 bg-[#f8fafc] min-h-screen">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid lg:grid-cols-5 gap-10 bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100">
|
||||
{/* Left Panel */}
|
||||
<div className="lg:col-span-2 bg-[#0284c7] p-10 text-white flex flex-col justify-between relative overflow-hidden">
|
||||
<div className="py-20 bg-gray-50 min-h-screen px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-5 bg-white rounded-[48px] shadow-2xl overflow-hidden border border-gray-100">
|
||||
{/* Contact Info Card */}
|
||||
<div className="lg:col-span-2 bg-[#0284c7] p-10 md:p-14 text-white flex flex-col justify-between relative overflow-hidden">
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-2xl font-bold mb-6">Lépjen velünk kapcsolatba</h3>
|
||||
<p className="text-sky-100 mb-8">
|
||||
Töltse ki az űrlapot egy ingyenes, kötelezettségmentes előzetes kalkulációért. Mérnök kollégánk 24 órán belül keresni fogja.
|
||||
</p>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Phone className="w-6 h-6 text-sky-200" />
|
||||
<span className="font-medium">+36 30 999 8888</span>
|
||||
<h3 className="text-3xl font-black mb-8 tracking-tighter uppercase">Keressen bizalommal</h3>
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-start gap-5">
|
||||
<div className="p-3 bg-white/10 rounded-xl"><Phone className="w-6 h-6" /></div>
|
||||
<div><p className="text-[10px] font-bold text-sky-200 uppercase tracking-widest mb-1">Hívjon minket</p><p className="text-lg font-bold">+36 30 999 8888</p></div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Mail className="w-6 h-6 text-sky-200" />
|
||||
<span className="font-medium">info@bluewave-solar.demo</span>
|
||||
<div className="flex items-start gap-5">
|
||||
<div className="p-3 bg-white/10 rounded-xl"><Mail className="w-6 h-6" /></div>
|
||||
<div><p className="text-[10px] font-bold text-sky-200 uppercase tracking-widest mb-1">Írjon nekünk</p><p className="text-lg font-bold">info@bluewave-solar.hu</p></div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Home className="w-6 h-6 text-sky-200" />
|
||||
<span className="font-medium">1117 Budapest, Napelem u. 1.</span>
|
||||
<div className="flex items-start gap-5">
|
||||
<div className="p-3 bg-white/10 rounded-xl"><MapPin className="w-6 h-6" /></div>
|
||||
<div><p className="text-[10px] font-bold text-sky-200 uppercase tracking-widest mb-1">Irodánk</p><p className="text-lg font-bold">1117 Budapest, Napelem u. 1.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative z-10 mt-12">
|
||||
<p className="text-sm text-sky-200 opacity-80">
|
||||
Nyitvatartás: H-P 8:00 - 17:00
|
||||
</p>
|
||||
|
||||
<div className="mt-16 pt-10 border-t border-white/10 relative z-10">
|
||||
<div className="flex gap-4">
|
||||
<button className="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center hover:bg-white/20 transition-all"><Share2 className="w-5 h-5" /></button>
|
||||
<button className="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center hover:bg-white/20 transition-all"><Play className="w-5 h-5" /></button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Circle decorations */}
|
||||
<div className="absolute -bottom-10 -right-10 w-48 h-48 bg-sky-500 rounded-full opacity-50"></div>
|
||||
<div className="absolute top-10 right-10 w-20 h-20 bg-sky-400 rounded-full opacity-30"></div>
|
||||
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute -bottom-20 -right-20 w-64 h-64 bg-sky-500 rounded-full opacity-30 blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
{/* Right Panel - Form */}
|
||||
<div className="lg:col-span-3 p-10">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">Ingyenes Ajánlatkérés</h2>
|
||||
{/* FORM SECTION */}
|
||||
<div className="lg:col-span-3 p-10 md:p-14 bg-[#0f172a]">
|
||||
<h2 className="text-2xl md:text-3xl font-black text-white mb-10 tracking-tighter uppercase">Ajánlatkérés</h2>
|
||||
<form className="space-y-6">
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-gray-700 mb-2">Teljes Név</label>
|
||||
<input type="text" className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-[#0284c7] focus:border-transparent outline-none transition-all bg-gray-50 focus:bg-white text-gray-900" placeholder="Kovács János" />
|
||||
<label className="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Teljes Név</label>
|
||||
<input type="text" className="w-full px-5 py-4 rounded-2xl border-none bg-white text-black font-bold focus:ring-4 focus:ring-[#0ea5e9]/30 outline-none transition-all placeholder:text-gray-300" placeholder="Kovács János" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-gray-700 mb-2">Telefonszám</label>
|
||||
<input type="tel" className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-[#0284c7] focus:border-transparent outline-none transition-all bg-gray-50 focus:bg-white text-gray-900" placeholder="+36 30 123 4567" />
|
||||
<label className="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Telefonszám</label>
|
||||
<input type="tel" className="w-full px-5 py-4 rounded-2xl border-none bg-white text-black font-bold focus:ring-4 focus:ring-[#0ea5e9]/30 outline-none transition-all placeholder:text-gray-300" placeholder="+36 30 ..." />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-gray-700 mb-2">Email Cím</label>
|
||||
<input type="email" className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-[#0284c7] focus:border-transparent outline-none transition-all bg-gray-50 focus:bg-white text-gray-900" placeholder="janos@pelda.hu" />
|
||||
</div>
|
||||
|
||||
<div className="p-6 bg-sky-50 rounded-xl border border-sky-100">
|
||||
<div className="flex items-center gap-2 mb-4 text-[#0284c7] font-bold">
|
||||
<Calculator className="w-5 h-5" /> Gyors Kalkulátor Adatok
|
||||
<div className="p-6 md:p-8 bg-[#1e293b] rounded-[32px] border border-gray-800 space-y-6">
|
||||
<div className="flex items-center gap-3 text-[#38bdf8] font-black text-xs uppercase tracking-widest">
|
||||
<Calculator className="w-5 h-5" /> Villám Kalkulátor
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-gray-700 mb-2">Havi villanyszámla (kb.)</label>
|
||||
<input type="number" className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-[#0284c7] outline-none bg-white text-gray-900" placeholder="Pl: 25000" />
|
||||
<label className="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Havi villanyszámla (Ft)</label>
|
||||
<input type="number" className="w-full px-5 py-4 rounded-2xl border-none bg-white text-black font-bold placeholder:text-gray-300" placeholder="Pl: 15.000" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-gray-700 mb-2">Telepítés Helyszíne</label>
|
||||
<input type="text" className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-[#0284c7] outline-none bg-white text-gray-900" placeholder="Város / Irányítószám" />
|
||||
<label className="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Helyszín</label>
|
||||
<input type="text" className="w-full px-5 py-4 rounded-2xl border-none bg-white text-black font-bold placeholder:text-gray-300" placeholder="Irányítószám / Város" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
<button type="button" className="w-full bg-[#0284c7] hover:bg-[#0369a1] text-white font-bold py-4 rounded-xl transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1">
|
||||
Díjmentes Kalkuláció Kérése
|
||||
<div className="pt-4">
|
||||
<button type="button" className="w-full bg-[#0284c7] hover:bg-white hover:text-gray-900 text-white font-black py-6 rounded-2xl shadow-2xl transition-all active:scale-95 uppercase tracking-[0.2em] text-xs">
|
||||
Ingyenes Kalkuláció Kérése
|
||||
</button>
|
||||
<p className="text-center text-xs text-gray-500 mt-4">
|
||||
Az ajánlatkérés nem jár kötelezettséggel. Adatvédelmi irányelveinket elfogadom.
|
||||
</p>
|
||||
<p className="text-center text-gray-500 text-[10px] mt-6 font-bold uppercase tracking-widest">Kollégánk 24 órán belül keresni fogja Önt.</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Google Map Placeholder */}
|
||||
<div className="mt-12 bg-white rounded-[40px] overflow-hidden h-[400px] shadow-sm border border-gray-100 relative group">
|
||||
<div className="absolute inset-0 bg-gray-200 flex items-center justify-center overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Map" className="w-full h-full object-cover opacity-50 grayscale group-hover:grayscale-0 transition-all duration-700" />
|
||||
<div className="absolute inset-0 bg-sky-900/10 group-hover:bg-transparent transition-all"></div>
|
||||
<div className="relative z-10 bg-white p-6 rounded-3xl shadow-2xl text-center border border-gray-100">
|
||||
<MapPin className="w-10 h-10 text-[#0284c7] mx-auto mb-3" />
|
||||
<p className="font-black text-gray-900 uppercase tracking-widest text-xs">Interaktív Térkép</p>
|
||||
<p className="text-[10px] text-gray-400 font-bold mt-1">1117 BUDAPEST, NAPELEM U. 1.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -431,44 +407,62 @@ export const BlueWave: React.FC = () => {
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-[#0f172a] text-white py-16 border-t border-gray-800">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid md:grid-cols-4 gap-12 mb-12">
|
||||
<div className="col-span-1 md:col-span-2">
|
||||
<div className="flex items-center mb-6">
|
||||
<div className="bg-gradient-to-tr from-[#0284c7] to-[#0ea5e9] p-2 rounded-lg mr-3">
|
||||
<footer className="bg-gray-900 text-white py-20 border-t border-gray-800 px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-16">
|
||||
<div className="sm:col-span-2">
|
||||
<div className="flex items-center mb-8">
|
||||
<div className="bg-gradient-to-tr from-[#0284c7] to-[#0ea5e9] p-3 rounded-2xl mr-4">
|
||||
<Sun className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<span className="text-2xl font-bold">BlueWave<span className="text-[#38bdf8]">Solar</span></span>
|
||||
<span className="text-2xl font-black uppercase tracking-tighter">BlueWave<span className="text-[#38bdf8]">Solar</span></span>
|
||||
</div>
|
||||
<p className="text-gray-400 max-w-sm leading-relaxed">
|
||||
Magyarország vezető napenergia szolgáltatója. Célunk, hogy ügyfeleink számára energiafüggetlenséget és fenntartható jövőt biztosítsunk.
|
||||
<p className="text-gray-400 max-w-sm text-sm leading-relaxed font-medium mb-10">
|
||||
A jövő energiája ma kezdődik. Segítünk elszakadni a hálózati függőségtől és csökkenteni ökológiai lábnyomát professzionális technológiával.
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
<div className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-[#0284c7] transition-all cursor-pointer"><FacebookIcon className="w-4 h-4" /></div>
|
||||
<div className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-[#0284c7] transition-all cursor-pointer"><InstagramIcon className="w-4 h-4" /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-lg mb-6 text-white">Navigáció</h4>
|
||||
<ul className="space-y-3 text-gray-400">
|
||||
<li onClick={() => setActivePage('home')} className="cursor-pointer hover:text-[#38bdf8] transition-colors">Főoldal</li>
|
||||
<li onClick={() => setActivePage('services')} className="cursor-pointer hover:text-[#38bdf8] transition-colors">Megoldások</li>
|
||||
<li onClick={() => setActivePage('about')} className="cursor-pointer hover:text-[#38bdf8] transition-colors">Rólunk</li>
|
||||
<li onClick={() => setActivePage('contact')} className="cursor-pointer hover:text-[#38bdf8] transition-colors">Kapcsolat</li>
|
||||
<h4 className="font-black text-xs mb-8 text-white uppercase tracking-[0.3em]">Navigáció</h4>
|
||||
<ul className="space-y-4 text-xs font-bold text-gray-500 uppercase tracking-widest">
|
||||
<li onClick={() => setActivePage('home')} className="cursor-pointer hover:text-white transition-colors">Főoldal</li>
|
||||
<li onClick={() => setActivePage('services')} className="cursor-pointer hover:text-white transition-colors">Megoldások</li>
|
||||
<li onClick={() => setActivePage('blog')} className="cursor-pointer hover:text-white transition-colors">Blog</li>
|
||||
<li onClick={() => setActivePage('contact')} className="cursor-pointer hover:text-white transition-colors">Kapcsolat</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-lg mb-6 text-white">Kapcsolat</h4>
|
||||
<div className="space-y-3 text-gray-400">
|
||||
<p>1117 Budapest, Napelem u. 1.</p>
|
||||
<p>+36 30 999 8888</p>
|
||||
<p>info@bluewave-solar.demo</p>
|
||||
</div>
|
||||
<h4 className="font-black text-xs mb-8 text-white uppercase tracking-[0.3em]">Kapcsolat</h4>
|
||||
<ul className="space-y-4 text-xs font-bold text-gray-500">
|
||||
<li className="flex items-center gap-3"><MapPin className="w-4 h-4 text-[#38bdf8]" /> 1117 Budapest, Napelem u. 1.</li>
|
||||
<li className="flex items-center gap-3"><Phone className="w-4 h-4 text-[#38bdf8]" /> +36 30 999 8888</li>
|
||||
<li className="flex items-center gap-3"><Mail className="w-4 h-4 text-[#38bdf8]" /> info@bluewave-solar.hu</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center text-gray-500 text-sm">
|
||||
<p>© 2024 BlueWave Solar Kft. Minden jog fenntartva.</p>
|
||||
<p>Demonstrációs weboldal - MotionWeb Pro csomag</p>
|
||||
<div className="border-t border-gray-800 mt-20 pt-10 flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
<p className="text-gray-600 text-[10px] font-bold uppercase tracking-widest">© 2024 BlueWave Solar Kft. Minden jog fenntartva.</p>
|
||||
<div className="flex gap-8 text-[10px] font-bold text-gray-600 uppercase tracking-widest">
|
||||
<span className="hover:text-white cursor-pointer transition-colors">Adatvédelem</span>
|
||||
<span className="hover:text-white cursor-pointer transition-colors">ÁSZF</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
// Internal social icons to avoid extra lucide-react dependency issues in demo
|
||||
const Shield = ({ className }: { className?: string }) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||||
);
|
||||
const FacebookIcon = ({ className }: { className?: string }) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
|
||||
);
|
||||
const InstagramIcon = ({ className }: { className?: string }) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user