From 3c4653a4c6d5b81ab971e1fa7e7fde7d45019112 Mon Sep 17 00:00:00 2001
From: root <root@v2202502254776314774.ultrasrv.de>
Date: Wed, 3 Dec 2025 16:22:22 +0100
Subject: [PATCH] Phase 1: Logo, Auszeichnung, Scroll-Animationen, Copyright
 2025, nur echtes Testimonial

---
 src/App.tsx | 130 +++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 92 insertions(+), 38 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index b33092c..70962cf 100644
--- a/src/App.tsx
+++ b/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>&copy; 2024 SunHouse. Alle Rechte vorbehalten.</p>
+            <p>&copy; 2025 SunHouse. Alle Rechte vorbehalten.</p>
           </div>
         </div>
       </footer>