Phase 1: Logo, Auszeichnung, Scroll-Animationen, Copyright 2025, nur echtes Testimonial
This commit is contained in:
root
130
src/App.tsx
130
src/App.tsx
@@ -1,28 +1,49 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { ChevronDown, Check, Plus, Minus } from 'lucide-react';
|
||||
|
||||
// Custom hook for scroll animations
|
||||
function useScrollAnimation() {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setIsVisible(true);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
if (ref.current) {
|
||||
observer.observe(ref.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return { ref, isVisible };
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [activeTestimonial, setActiveTestimonial] = useState(0);
|
||||
const [openFaq, setOpenFaq] = useState<number | null>(null);
|
||||
|
||||
// Scroll animation refs
|
||||
const problemSection = useScrollAnimation();
|
||||
const solutionSection = useScrollAnimation();
|
||||
const timelineSection = useScrollAnimation();
|
||||
const pricingSection = useScrollAnimation();
|
||||
const testimonialSection = useScrollAnimation();
|
||||
const faqSection = useScrollAnimation();
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
quote: "Wir haben das SunHouse mit der Familie schon zweimal besucht und waren restlos überzeugt von der ganzheitlichen Technik und dem Wohlbehagen.",
|
||||
author: "Tom Anand",
|
||||
title: "Zukunftsforscher und Indienexperte",
|
||||
company: ""
|
||||
},
|
||||
{
|
||||
quote: "Das SunHouse ist das erste Projekt, bei dem ich merkte: Das ist nicht nur Haus. Das ist Geschäftsmodell.",
|
||||
author: "Thomas K.",
|
||||
title: "Entwickler, Frankfurt",
|
||||
company: "Real Estate Developer mit 8.000+ LinkedIn Followern"
|
||||
},
|
||||
{
|
||||
quote: "Das sollte Standard sein. Manfred zeigt, wie Kommunen ihre Energieunabhängigkeit erreichen.",
|
||||
author: "Bürgermeister R.",
|
||||
title: "Bürgermeister, Baden-Württemberg",
|
||||
company: "Stadt mit 50.000+ Einwohnern"
|
||||
}
|
||||
];
|
||||
|
||||
@@ -46,7 +67,7 @@ function App() {
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<div className="min-h-screen scroll-smooth">
|
||||
{/* SECTION 1: HERO */}
|
||||
<section className="relative min-h-screen flex items-center justify-center bg-gray-900">
|
||||
<div
|
||||
@@ -55,6 +76,15 @@ function App() {
|
||||
></div>
|
||||
<div className="absolute inset-0 bg-black opacity-60"></div>
|
||||
|
||||
{/* Logo top left */}
|
||||
<div className="absolute top-6 left-6 z-20">
|
||||
<img
|
||||
src="/Sunhouse-energy-logo-02.png"
|
||||
alt="SunHouse Energy Logo"
|
||||
className="h-12 md:h-16 w-auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 max-w-5xl mx-auto px-4 text-center">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
|
||||
Autark leben erleben
|
||||
@@ -75,10 +105,17 @@ function App() {
|
||||
↓ Führung Buchen (€79 oder Gruppe)
|
||||
</a>
|
||||
|
||||
<div className="inline-block bg-white bg-opacity-20 backdrop-blur-sm px-6 py-3 rounded-full">
|
||||
<p className="text-white text-sm md:text-base">
|
||||
⭐ 40.000+ LinkedIn Follower | Expertenrat seit 40 Jahren
|
||||
</p>
|
||||
<div className="flex flex-col md:flex-row items-center justify-center gap-4">
|
||||
<div className="bg-white bg-opacity-20 backdrop-blur-sm px-6 py-3 rounded-full">
|
||||
<p className="text-white text-sm md:text-base">
|
||||
40.000+ LinkedIn Follower | Expertenrat seit 40 Jahren
|
||||
</p>
|
||||
</div>
|
||||
<img
|
||||
src="/Arbeitgeber-der-Zukunft-kompakt.png"
|
||||
alt="Auszeichnung: Arbeitgeber der Zukunft"
|
||||
className="h-16 md:h-20 w-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -89,7 +126,12 @@ function App() {
|
||||
|
||||
{/* SECTION 2: PROBLEM */}
|
||||
<section className="py-16 md:py-24 bg-gray-100">
|
||||
<div className="max-w-7xl mx-auto px-4">
|
||||
<div
|
||||
ref={problemSection.ref}
|
||||
className={`max-w-7xl mx-auto px-4 transition-all duration-700 ${
|
||||
problemSection.isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
|
||||
}`}
|
||||
>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 text-center mb-4">
|
||||
Das Dilemma der Energiewende
|
||||
</h2>
|
||||
@@ -156,7 +198,12 @@ function App() {
|
||||
|
||||
{/* SECTION 3: SOLUTION */}
|
||||
<section className="py-16 md:py-24 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4">
|
||||
<div
|
||||
ref={solutionSection.ref}
|
||||
className={`max-w-7xl mx-auto px-4 transition-all duration-700 ${
|
||||
solutionSection.isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
|
||||
}`}
|
||||
>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 text-center mb-4">
|
||||
Das SunHouse Konzept
|
||||
</h2>
|
||||
@@ -255,7 +302,12 @@ function App() {
|
||||
|
||||
{/* SECTION 4: EXPERIENCE TIMELINE */}
|
||||
<section className="py-16 md:py-24 bg-gray-100">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<div
|
||||
ref={timelineSection.ref}
|
||||
className={`max-w-4xl mx-auto px-4 transition-all duration-700 ${
|
||||
timelineSection.isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
|
||||
}`}
|
||||
>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 text-center mb-16">
|
||||
Deine 90-Minuten-Erfahrung
|
||||
</h2>
|
||||
@@ -333,7 +385,12 @@ function App() {
|
||||
|
||||
{/* SECTION 5: PRICING */}
|
||||
<section id="booking" className="py-16 md:py-24 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4">
|
||||
<div
|
||||
ref={pricingSection.ref}
|
||||
className={`max-w-7xl mx-auto px-4 transition-all duration-700 ${
|
||||
pricingSection.isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
|
||||
}`}
|
||||
>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 text-center mb-4">
|
||||
Einführungspreise 2025
|
||||
</h2>
|
||||
@@ -494,7 +551,12 @@ function App() {
|
||||
|
||||
{/* SECTION 6: TESTIMONIALS */}
|
||||
<section className="py-16 md:py-24 bg-gray-100">
|
||||
<div className="max-w-5xl mx-auto px-4">
|
||||
<div
|
||||
ref={testimonialSection.ref}
|
||||
className={`max-w-5xl mx-auto px-4 transition-all duration-700 ${
|
||||
testimonialSection.isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
|
||||
}`}
|
||||
>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 text-center mb-16">
|
||||
Was Besucher sagen
|
||||
</h2>
|
||||
@@ -510,19 +572,6 @@ function App() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-2 mb-12">
|
||||
{testimonials.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setActiveTestimonial(index)}
|
||||
className={`w-3 h-3 rounded-full transition-all duration-300 ${
|
||||
index === activeTestimonial ? 'bg-green-500 w-8' : 'bg-gray-300'
|
||||
}`}
|
||||
aria-label={`Testimonial ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 text-center">
|
||||
<div>
|
||||
<p className="text-3xl font-bold text-green-500 mb-2">⭐ 95%</p>
|
||||
@@ -542,7 +591,12 @@ function App() {
|
||||
|
||||
{/* SECTION 7: FAQ */}
|
||||
<section className="py-16 md:py-24 bg-white">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<div
|
||||
ref={faqSection.ref}
|
||||
className={`max-w-4xl mx-auto px-4 transition-all duration-700 ${
|
||||
faqSection.isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
|
||||
}`}
|
||||
>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 text-center mb-12">
|
||||
Häufig gestellte Fragen
|
||||
</h2>
|
||||
@@ -671,7 +725,7 @@ function App() {
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-700 pt-8 text-center text-sm">
|
||||
<p>© 2024 SunHouse. Alle Rechte vorbehalten.</p>
|
||||
<p>© 2025 SunHouse. Alle Rechte vorbehalten.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user