Fix - Mail vom 16.02.2025

src/components/ExtendedGroup.tsx

@@ -94,13 +94,6 @@ export default function ExtendedGroup() {
                   Zentrale: Oberhausen
                 </p>
               </div>
-
-              {/* Link for more information */}
-              <a href="#" className="absolute bottom-4 right-4 bg-[#C25B3F] hover:bg-[#A34832] text-white
-                          px-4 py-2 rounded-full shadow-lg transform transition-all duration-300
-                          group-hover:scale-105 font-medium">
-                Mehr Informationen zur Unternehmensgruppe
-              </a>
             </div>
           </div>
         </div>

src/components/Footer.tsx

@@ -7,8 +7,8 @@ type FooterSection = {
 };
 
 const links = [
-    { href: '#technologies', text: 'Unterstützte Technologien' },
+    { href: '#technologien', text: 'Unterstützte Technologien' },
-    { href: '#group', text: 'Gruppenbeitritt' },
+    { href: '#gruppenmehrwert', text: 'Gruppenmehrwert' },
     { href: 'mailto:kontakt@technologie.team?subject=Gruppenbeitritt%20anfragen', text: 'Gruppenbeitritt anfragen' },
     { href: '#impressum', text: 'Impressum' },
 ];
@@ -39,27 +39,39 @@ export default function Footer() {
         };
     }, []);
 
+    // Funktion zum Öffnen von mailto Links
+    const handleMailtoClick = (e: React.MouseEvent<HTMLAnchorElement>, mailtoUrl: string) => {
+        e.preventDefault(); // Verhindert die Standard-Link-Aktion
+        window.location.href = mailtoUrl; // Öffnet den mailto-Link direkt
+    };
+
     const sections: FooterSection[] = [
         {
             title: 'Links',
             content: (
                 <div className="space-y-3">
-                    {links.map((link) => (
+                    {links.map((link) => {
-                        <a
+                        // Prüfen, ob es ein mailto-Link ist
-                            key={link.href}
+                        const isMailto = link.href.startsWith('mailto:');
-                            href={link.href}
+
-                            className="block transform transition-all duration-300 hover:text-white
+                        return (
-                       hover:translate-x-1 focus:outline-none focus:text-white
+                            <a
-                       group relative"
+                                key={link.href}
-                            onMouseEnter={() => setHoveredLink(link.href)}
+                                href={link.href}
-                            onMouseLeave={() => setHoveredLink(null)}
+                                className="block transform transition-all duration-300 hover:text-white
-                        >
+                                   hover:translate-x-1 focus:outline-none focus:text-white
-                            <span className="relative z-10 inline-block">{link.text}</span>
+                                   group relative"
-                            <span className={`absolute left-0 bottom-0 w-0 h-0.5 bg-[#C25B3F] 
+                                onMouseEnter={() => setHoveredLink(link.href)}
-                            transition-all duration-300 group-hover:w-full
+                                onMouseLeave={() => setHoveredLink(null)}
-                            ${hoveredLink === link.href ? 'w-full' : 'w-0'}`} />
+                                onClick={isMailto ? (e) => handleMailtoClick(e, link.href) : undefined}
-                        </a>
+                            >
-                    ))}
+                                <span className="relative z-10 inline-block">{link.text}</span>
+                                <span className={`absolute left-0 bottom-0 w-0 h-0.5 bg-[#C25B3F] 
+                                    transition-all duration-300 group-hover:w-full
+                                    ${hoveredLink === link.href ? 'w-full' : 'w-0'}`} />
+                            </a>
+                        );
+                    })}
                 </div>
             ),
         },
@@ -82,17 +94,18 @@ export default function Footer() {
                 <div>
                     <a href="mailto:kontakt@technologie.team"
                        className="block mb-4 transition-all duration-300 hover:text-white
-                      hover:translate-x-1 relative group">
+                          hover:translate-x-1 relative group"
+                       onClick={(e) => handleMailtoClick(e, "mailto:kontakt@technologie.team")}>
                         <span>kontakt@technologie.team</span>
                         <span className="absolute left-0 bottom-0 w-0 h-0.5 bg-[#C25B3F]
-                         transition-all duration-300 group-hover:w-full" />
+                             transition-all duration-300 group-hover:w-full" />
                     </a>
                     <a
                         href="https://www.linkedin.com/company/technologie-team"
                         target="_blank"
                         rel="noopener noreferrer"
                         className="inline-block transform transition-all duration-300
-                     hover:scale-110 focus:outline-none focus:scale-110"
+                         hover:scale-110 focus:outline-none focus:scale-110"
                         aria-label="Besuchen Sie uns auf LinkedIn"
                     >
                         <img
@@ -129,7 +142,8 @@ export default function Footer() {
                         {sections.map((section, index) => (
                             <div key={section.title}
                                  className={`transition-all duration-500 delay-${index * 100}
-                           ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}>
+                           ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}
+                                 style={{ transitionDelay: `${index * 100}ms` }}>
                                 <h3 className="font-outfit text-white font-semibold mb-4 text-base sm:text-lg
                            transform transition-all duration-300 hover:text-[#C25B3F]">
                                     {section.title}

src/components/GroupCompanies.tsx

@@ -38,7 +38,7 @@ const companies = [
   },
   {
     name: 'DEMOS COMPUTER',
-    logo: '/images/2gdigital.png', // Placeholder, should be replaced with the actual image
+    logo: '/images/demoscomputer.png', // Korrigiert zu einem passenderen Namen
     link: 'https://www.demoscomputer.de'
   }
 ];
@@ -94,12 +94,13 @@ export default function GroupCompanies() {
                 aspect-[4/3] group
                 border border-gray-100
                 ${hoveredIndex === index ? 'shadow-lg scale-[1.02]' : 'shadow-sm'}
-                ${isVisible ? 'animate-fade-in' : 'opacity-0'}
+                ${isVisible ? 'opacity-100' : 'opacity-0'}
-                animate-delay-${(index + 1) * 100}
+                transition-opacity duration-500
               `}
                     onMouseEnter={() => setHoveredIndex(index)}
                     onMouseLeave={() => setHoveredIndex(null)}
                     aria-label={`Besuchen Sie ${company.name}`}
+                    style={{ transitionDelay: `${(index % 8) * 100}ms` }}
                 >
                   {/* Logo */}
                   <img

src/components/GroupValue.tsx

@@ -68,7 +68,7 @@ export default function GroupValue() {
         { threshold: 0.1 }
     );
 
-    const section = document.getElementById('group-value');
+    const section = document.getElementById('gruppenmehrwert');
     if (section) {
       observer.observe(section);
     }
@@ -81,7 +81,7 @@ export default function GroupValue() {
   }, []);
 
   return (
-      <section id="group-value" className="bg-[#C25B3F] py-12 sm:py-16 lg:py-24 overflow-hidden">
+      <section id="gruppenmehrwert" className="bg-[#C25B3F] py-12 sm:py-16 lg:py-24 overflow-hidden">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className={`mb-8 sm:mb-12 lg:mb-16 mx-auto text-center 
                       ${isVisible ? 'animate-fade-in' : 'opacity-0'}`}>

src/components/Hero.tsx

@@ -7,6 +7,12 @@ export default function Hero() {
         setIsLoaded(true);
     }, []);
 
+    // Funktion zum Öffnen von mailto-Links
+    const handleMailtoClick = (e: React.MouseEvent<HTMLAnchorElement>, mailtoUrl: string) => {
+        e.preventDefault(); // Verhindert die Standard-Link-Aktion
+        window.location.href = mailtoUrl; // Öffnet den mailto-Link direkt
+    };
+
     return (
         <section className="relative overflow-hidden bg-gray-900">
             {/* Hero section with background */}
@@ -51,6 +57,7 @@ export default function Hero() {
                                          text-white w-full sm:w-auto shadow-lg
                                          transition-all duration-300 ease-out
                                          hover:bg-[#A34832]"
+                                onClick={(e) => handleMailtoClick(e, "mailto:kontakt@technologie.team?subject=Gruppenbeitritt%20anfragen")}
                             >
                                 <span className="flex items-center gap-2">
                                     Gruppenbeitritt anfragen
@@ -69,13 +76,6 @@ export default function Hero() {
                                     </svg>
                                 </span>
                             </a>
-                            <a
-                                href="mailto:kontakt@technologie.team"
-                                className="font-outfit text-white text-base sm:text-lg md:text-xl
-                                         hover:text-[#C25B3F] transition-colors duration-300"
-                            >
-                                kontakt@technologie.team
-                            </a>
                         </div>
                     </div>
                 </div>

src/components/Technologies.tsx

@@ -65,7 +65,7 @@ export default function Technologies() {
   };
 
   return (
-      <section className="bg-gray-50 overflow-hidden">
+      <section id="technologien" className="bg-gray-50 overflow-hidden">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
           {/* Header */}
           <div className="flex items-center justify-between mb-6">