giteadmin/sunhouse-landingpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 1: Logo, Auszeichnung, Scroll-Animationen, Copyright 2025, nur echtes Testimonial

Browse Source
This commit is contained in:
root
2025-12-03 16:22:22 +01:00
parent f91edf70e0
commit 3c4653a4c6
1 changed files with 92 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/App.tsx
View File

@@ -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,11 +105,18 @@ 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">
<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
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>
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
@@ -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>&copy; 2024 SunHouse. Alle Rechte vorbehalten.</p>
<p>&copy; 2025 SunHouse. Alle Rechte vorbehalten.</p>
</div>
</div>
</footer>