feat: modernize digital presence, team layout, and hero component parity

components/blocks/CompanyTimeline.tsx

@@ -21,7 +21,7 @@ const defaultMilestones = [
     date: '16.12.2015',
     year: '2015',
     title: 'Gründung E-TIB GmbH',
-    desc: 'Ausführung elektrischer Infrastrukturprojekte, Kabelbau und Horizontalspülbohrungen.',
+    desc: 'Ausführung elektrischer Infrastrukturprojekte, Kabeltiefbau und Horizontalspülbohrungen.',
     iconName: 'Building2',
   },
   {

components/blocks/CompetenceBentoGrid.tsx

@@ -19,6 +19,7 @@ interface CompetenceBentoGridProps {
     title?: string;
     description?: string;
     tag?: string;
+    href?: string;
     image?: {
       url?: string;
       alt?: string;
@@ -34,6 +35,7 @@ interface CompetenceBentoGridProps {
       title?: string;
       description?: string;
       tag?: string;
+      href?: string;
       image?: {
         url?: string;
         alt?: string;
@@ -111,8 +113,11 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
                   whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true }}
                   transition={{ delay: idx * 0.1 }}
-                  className={gridClasses}
+                  className={`${gridClasses} ${item.href ? 'cursor-pointer hover:-translate-y-1 transition-transform duration-300' : ''}`}
                 >
+                  {item.href && (
+                    <Link href={item.href} className="absolute inset-0 z-30" aria-label={item.title} />
+                  )}
                   <div className="absolute top-0 right-0 w-32 h-32 bg-primary/30 blur-3xl rounded-full -mr-10 -mt-10 group-hover:bg-primary/50 transition-colors duration-500" />
                   
                   {/* Subtle Background Logo Arcs */}
@@ -135,8 +140,11 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
                 whileInView={{ opacity: 1, scale: 1 }}
                 viewport={{ once: true }}
                 transition={{ delay: idx * 0.1 }}
-                className={gridClasses}
+                className={`${gridClasses} ${item.href ? 'cursor-pointer hover:-translate-y-1 transition-transform duration-300' : ''}`}
               >
+                {item.href && (
+                  <Link href={item.href} className="absolute inset-0 z-30" aria-label={item.title} />
+                )}
                 {!imgSrc && (
                   <div className="absolute inset-0 bg-neutral-dark z-0 transition-colors duration-500 group-hover:bg-primary-dark" />
                 )}

components/blocks/HeroSection.tsx

@@ -42,7 +42,7 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
 
   return (
     <section
-      className={`relative min-h-[50vh] md:min-h-[70vh] flex items-center pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden bg-primary-dark ${alignment === 'center' ? 'justify-center text-center' : ''}`}
+      className={`relative min-h-[45vh] md:min-h-[55vh] flex items-center pt-32 pb-20 md:pt-36 md:pb-24 overflow-hidden bg-neutral-dark ${alignment === 'center' ? 'justify-center text-center' : ''}`}
     >
       {bgSrc && (
         <motion.div 
@@ -55,14 +55,22 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
             src={bgSrc}
             alt={title || 'Hero Background'}
             fill
-            className="object-cover opacity-30 md:opacity-40"
+            className="object-cover filter contrast-110 saturate-110 brightness-95"
             style={{
               objectPosition: `${backgroundImage?.focalX ?? 50}% ${backgroundImage?.focalY ?? 50}%`,
             }}
             sizes="100vw"
             priority
           />
-          <div className="absolute inset-0 bg-gradient-to-b from-primary-dark/80 via-primary-dark/40 to-primary-dark/80" />
+          {/* Cinematic Color Grading Overlay */}
+          <div className="absolute inset-0 bg-[#0a192f]/30 z-[2] mix-blend-multiply" />
+          
+          {/* Dramatic Vignette & Fade to content */}
+          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-transparent via-black/20 to-black/80 z-[2]" />
+          <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark via-neutral-dark/60 to-transparent z-[3]" />
+          
+          {/* Top Fade for Header Navigation Readability */}
+          <div className="absolute top-0 left-0 w-full h-48 bg-gradient-to-b from-black/70 to-transparent z-[3] pointer-events-none" />
         </motion.div>
       )}
       <Container className={`relative z-10 ${alignment === 'center' ? 'max-w-5xl' : ''}`}>
@@ -80,19 +88,19 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
             </motion.div>
           )}
           <motion.div variants={itemVariants}>
-            <Heading level={1} variant="white" className="mb-4 md:mb-8">
+            <Heading level={1} variant="white" align={alignment || 'left'} className="mb-4 md:mb-8">
               {title}
             </Heading>
           </motion.div>
           {subtitle && (
             <motion.div variants={itemVariants}>
-              <p className="text-lg md:text-2xl text-white/70 font-medium leading-relaxed max-w-2xl">
+              <p className={`text-lg md:text-2xl text-white/70 font-medium leading-relaxed max-w-2xl ${alignment === 'center' ? 'mx-auto' : ''}`}>
                 {subtitle}
               </p>
             </motion.div>
           )}
           {ctaLabel && ctaHref && (
-            <motion.div variants={itemVariants} className="mt-8">
+            <motion.div variants={itemVariants} className={`mt-8 ${alignment === 'center' ? 'flex justify-center' : ''}`}>
               <Button
                 href={ctaHref}
                 variant="accent"

components/blocks/HeroVideo.tsx

@@ -12,6 +12,7 @@ interface HeroVideoProps {
   description?: string;
   videoUrl?: string;
   posterImage?: any;
+  backgroundImage?: any;
   ctaLabel?: string;
   ctaHref?: string;
   linkText?: string;
@@ -25,11 +26,11 @@ export function HeroVideo(props: HeroVideoProps) {
   const { data } = props;
   const title = props.title || data?.title || 'DIE EXPERTEN FÜR KABELTIEFBAU';
   const subtitle = props.subtitle || props.description || data?.subtitle || 'Wir verbinden Infrastruktur mit Präzision. Von Horizontalbohrungen bis zu komplexen Leitungsnetzen.';
-  const videoUrl = props.videoUrl || data?.videoUrl || '/assets/dummy-hero.mp4';
+  const explicitNoVideo = props.videoUrl === 'none' || props.videoUrl === '';
+  const videoUrl = explicitNoVideo ? null : (props.videoUrl || data?.videoUrl || '/assets/dummy-hero.mp4');
 
-  
-  const posterSrc = data?.posterImage?.url || "/assets/photos/DJI_0048.JPG";
-  const posterAlt = data?.posterImage?.alt || "E-TIB Gruppe Baustelle";
+  const posterSrc = props.backgroundImage?.url || props.posterImage?.url || data?.posterImage?.url || "/assets/photos/DJI_0048.JPG";
+  const posterAlt = props.backgroundImage?.alt || data?.posterImage?.alt || "E-TIB Gruppe Baustelle";
 
   const ctaLabel = props.ctaLabel || props.linkText || data?.ctaLabel || 'Unternehmen entdecken';
   const ctaHref = props.ctaHref || props.linkHref || data?.ctaHref || '#unternehmen';
@@ -53,7 +54,7 @@ export function HeroVideo(props: HeroVideoProps) {
       {/* Background color while video loads */}
       <div className="absolute inset-0 z-0 bg-neutral-dark" />
       
-      {videoUrl && (
+      {videoUrl ? (
         <video
           key={videoUrl}
           className="absolute inset-0 w-full h-full object-cover z-1 pointer-events-none filter contrast-125 saturate-110 brightness-90"
@@ -64,6 +65,15 @@ export function HeroVideo(props: HeroVideoProps) {
           playsInline
           preload="auto"
         />
+      ) : (
+        <Image
+          src={posterSrc}
+          alt={posterAlt}
+          fill
+          className="object-cover z-1 pointer-events-none filter contrast-125 saturate-110 brightness-90"
+          sizes="100vw"
+          priority
+        />
       )}
       
       {/* Cinematic Color Grading Overlay */}

components/blocks/ServiceDetailGrid.tsx

@@ -194,8 +194,8 @@ export function ServiceDetailGrid({
                 <HoverShineOverlay shineColor="via-primary/5" />
 
                 <div className="relative z-10 flex flex-col md:flex-row justify-between items-start mb-12 gap-6">
-                  <div className="pt-2">
-                    <h4 className="text-2xl md:text-3xl font-extrabold text-neutral-dark uppercase tracking-wider">{panel.title}</h4>
+                  <div className="pt-2 flex-1 min-w-0 pr-4">
+                    <h4 className="text-2xl md:text-3xl font-extrabold text-neutral-dark uppercase tracking-wider break-words hyphens-auto" lang="de">{panel.title}</h4>
                     <div className="h-1 w-12 bg-primary mt-6 transition-all duration-700 group-hover:w-24 rounded-full"></div>
                   </div>
                   

components/blocks/TeamGrid.tsx

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { motion } from 'framer-motion';
 import Image from 'next/image';
-import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
 
 export interface TeamMember {
   id: string;
@@ -15,7 +14,7 @@ export interface TeamMember {
     url: string;
     alt?: string;
   } | string | null;
-  branch: string;
+  branch?: string;
 }
 
 interface TeamGridProps {
@@ -36,61 +35,137 @@ export function TeamGrid({ members }: TeamGridProps) {
           </p>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {members.map((member, i) => (
+        {members.length > 0 && (
+          <div className="mb-20">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              className="relative rounded-[2.5rem] bg-neutral-dark overflow-hidden shadow-2xl border border-white/10"
+            >
+              {/* Premium Background Effects */}
+              <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(238,114,3,0.15),transparent_50%)] pointer-events-none" />
+              <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-primary/20 blur-[120px] mix-blend-screen rounded-full pointer-events-none" />
+              <div className="absolute inset-0 opacity-20 pointer-events-none" style={{ backgroundImage: "url('data:image/svg+xml,%3Csvg width=\\'40\\' height=\\'40\\' viewBox=\\'0 0 40 40\\' xmlns=\\'http://www.w3.org/2000/svg\\'%3E%3Cpath d=\\'M0 0h40v40H0V0zm20 20h20v20H20V20zM0 20h20v20H0V20z\\' fill=\\'%23ffffff\\' fill-opacity=\\'0.02\\' fill-rule=\\'evenodd\\'/%3E%3C/svg%3E')" }} />
+
+              <div className="relative z-10 flex flex-col lg:flex-row items-center justify-between p-8 md:p-12 lg:p-20 gap-12 lg:gap-16">
+                {/* Text Content */}
+                <div className="w-full lg:w-[55%] flex flex-col justify-center text-white">
+                  <div className="inline-flex items-center space-x-2 px-4 py-1.5 mb-8 rounded-full border border-primary/30 bg-primary/10 text-primary text-xs font-bold uppercase tracking-widest self-start backdrop-blur-md shadow-[0_0_20px_rgba(238,114,3,0.2)]">
+                    <span className="relative flex h-2 w-2 mr-1">
+                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+                      <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+                    </span>
+                    Geschäftsführung
+                  </div>
+                  <h3 className="font-heading font-black text-5xl md:text-6xl lg:text-7xl mb-4 leading-[1.1] tracking-tight">
+                    {members[0].name}
+                  </h3>
+                  <p className="text-xl md:text-2xl text-white/70 font-medium mb-10 leading-relaxed max-w-xl">
+                    {members[0].position}
+                  </p>
+                  
+                  <div className="flex flex-col sm:flex-row gap-4">
+                    {members[0].email && (
+                      <a href={`mailto:${members[0].email}`} className="group flex items-center justify-center sm:justify-start gap-4 bg-white/5 hover:bg-primary border border-white/10 hover:border-primary px-6 py-4 rounded-2xl transition-all duration-300 shadow-lg">
+                        <svg className="w-5 h-5 text-white/70 group-hover:text-white transition-colors" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                        <span className="font-semibold text-white/90 group-hover:text-white transition-colors">{members[0].email}</span>
+                      </a>
+                    )}
+                    {members[0].phone && (
+                      <a href={`tel:${members[0].phone}`} className="group flex items-center justify-center sm:justify-start gap-4 bg-white/5 hover:bg-white/10 border border-white/10 px-6 py-4 rounded-2xl transition-all duration-300 shadow-lg">
+                        <svg className="w-5 h-5 text-white/70 group-hover:text-white transition-colors" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
+                        <span className="font-semibold text-white/90 group-hover:text-white transition-colors">{members[0].phone}</span>
+                      </a>
+                    )}
+                  </div>
+                </div>
+
+                {/* Premium Image Block */}
+                <div className="w-full lg:w-[45%] flex justify-center lg:justify-end perspective-1000">
+                  <div className="relative w-64 h-64 md:w-80 md:h-80 lg:w-[400px] lg:h-[400px] rounded-[3rem] overflow-hidden border-4 border-white/10 shadow-[0_30px_60px_rgba(0,0,0,0.6)] transform md:rotate-3 hover:rotate-0 transition-all duration-700 bg-neutral-800 group">
+                    {members[0].image && (typeof members[0].image === 'string' ? members[0].image : members[0].image.url) ? (
+                      <Image
+                        src={typeof members[0].image === 'string' ? members[0].image : members[0].image.url}
+                        alt={members[0].name}
+                        fill
+                        sizes="400px"
+                        className="object-cover scale-110 group-hover:scale-100 transition-transform duration-1000 ease-out"
+                      />
+                    ) : (
+                      <div className="absolute inset-0 flex items-center justify-center text-white/20">
+                        <svg className="w-20 h-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        )}
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 xl:gap-10">
+          {members.slice(1).map((member, i) => (
             <motion.div
               key={member.id}
               initial={{ opacity: 0, y: 30 }}
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true, margin: "-50px" }}
               transition={{ delay: i * 0.1, duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
-              className="group relative bg-neutral-50 rounded-[2rem] p-8 border border-neutral-200/60 transition-all duration-500 hover:bg-white hover:border-primary/30 hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] hover:-translate-y-2 overflow-hidden"
+              className="group flex flex-col bg-white rounded-[2rem] border border-neutral-100 shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgba(238,114,3,0.1)] transition-all duration-500 hover:-translate-y-2 overflow-hidden"
             >
-              <HoverShineOverlay shineColor="via-primary/5" />
-              
-              <div className="relative z-10 flex flex-col h-full">
-                <div className="flex items-center gap-6 mb-6">
-                  <div className="relative w-24 h-24 flex-shrink-0 rounded-[1.25rem] overflow-hidden bg-neutral-200 border border-neutral-100 shadow-sm group-hover:shadow-md transition-shadow duration-500">
-                    {member.image && typeof member.image === 'object' && member.image.url ? (
-                      <Image
-                        src={member.image.url}
-                        alt={member.name}
-                        fill
-                        sizes="96px"
-                        className="object-cover group-hover:scale-110 transition-transform duration-700 ease-in-out"
-                      />
-                    ) : (
-                      <div className="absolute inset-0 flex items-center justify-center text-neutral-400">
-                        <svg className="w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                      </div>
-                    )}
-                  </div>
-                  <div>
-                    <h4 className="font-heading font-bold text-2xl text-neutral-dark mb-1 leading-tight group-hover:text-primary transition-colors duration-300">{member.name}</h4>
-                    <p className="text-primary font-medium text-sm mb-1">{member.position}</p>
-                    <p className="inline-block px-2 py-0.5 mt-1 bg-neutral-100 text-neutral-600 rounded-md text-xs uppercase tracking-widest font-semibold border border-neutral-200/60">
-                      {member.branch === 'e-tib' ? 'E-TIB GmbH' : member.branch === 'ing' ? 'Ingenieurgesellschaft' : 'Bohrtechnik'}
-                    </p>
-                  </div>
+              {/* Card Banner */}
+              <div className="h-32 bg-neutral-50 relative border-b border-neutral-100 overflow-hidden">
+                <div className="absolute inset-0 bg-gradient-to-br from-neutral-100 to-neutral-200/50" />
+                <div className="absolute inset-0 opacity-[0.03] pointer-events-none" style={{ backgroundImage: "url('data:image/svg+xml,%3Csvg width=\\'20\\' height=\\'20\\' viewBox=\\'0 0 20 20\\' xmlns=\\'http://www.w3.org/2000/svg\\'%3E%3Crect width=\\'1\\' height=\\'1\\' fill=\\'%23000000\\'/%3E%3C/svg%3E')" }} />
+              </div>
+
+              <div className="px-8 pb-8 relative flex-grow flex flex-col">
+                {/* Overlapping Profile Picture */}
+                <div className="w-24 h-24 rounded-2xl overflow-hidden border-4 border-white shadow-xl bg-white relative -mt-12 mb-6 group-hover:-translate-y-2 transition-transform duration-500">
+                  {member.image && (typeof member.image === 'string' ? member.image : member.image.url) ? (
+                    <Image
+                      src={typeof member.image === 'string' ? member.image : member.image.url}
+                      alt={member.name}
+                      fill
+                      sizes="96px"
+                      className="object-cover"
+                    />
+                  ) : (
+                    <div className="absolute inset-0 flex items-center justify-center text-neutral-300 bg-neutral-50">
+                      <svg className="w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                    </div>
+                  )}
                 </div>
+
+                {/* Details */}
+                <h4 className="font-heading font-extrabold text-2xl text-neutral-dark mb-1 group-hover:text-primary transition-colors duration-300 leading-tight">{member.name}</h4>
+                <p className="text-primary font-bold text-xs uppercase tracking-widest mb-6">{member.position}</p>
                 
-                <div className="mt-auto pt-6 border-t border-neutral-200/60 space-y-3">
+                {member.branch && (
+                  <div className="mb-6">
+                    <span className="inline-block px-3 py-1 bg-neutral-100 text-neutral-600 rounded-md text-xs uppercase tracking-widest font-semibold border border-neutral-200/60">
+                      {member.branch === 'e-tib' ? 'E-TIB GmbH' : member.branch === 'ing' ? 'Ingenieurgesellschaft' : member.branch === 'bohrtechnik' ? 'Bohrtechnik' : member.branch}
+                    </span>
+                  </div>
+                )}
+
+                {/* Contacts (Sticky at bottom) */}
+                <div className="mt-auto pt-6 border-t border-neutral-100 flex flex-col gap-4">
                   {member.email && (
-                    <a href={`mailto:${member.email}`} className="group/link flex items-center gap-3 text-text-secondary hover:text-primary transition-colors text-sm font-medium">
-                      <div className="w-8 h-8 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-500 group-hover/link:bg-primary/10 group-hover/link:text-primary transition-colors">
+                    <a href={`mailto:${member.email}`} className="group/link flex items-center gap-4 text-text-secondary hover:text-primary transition-colors font-medium">
+                      <div className="w-10 h-10 rounded-xl bg-neutral-50 flex items-center justify-center text-neutral-400 group-hover/link:bg-primary/10 group-hover/link:text-primary transition-colors border border-neutral-100">
                         <svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
                       </div>
                       <span className="truncate">{member.email}</span>
-                      <svg className="w-4 h-4 ml-auto opacity-0 -translate-x-2 group-hover/link:opacity-100 group-hover/link:translate-x-0 transition-all duration-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                     </a>
                   )}
                   {member.phone && (
-                    <a href={`tel:${member.phone}`} className="group/link flex items-center gap-3 text-text-secondary hover:text-primary transition-colors text-sm font-medium">
-                      <div className="w-8 h-8 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-500 group-hover/link:bg-primary/10 group-hover/link:text-primary transition-colors">
+                    <a href={`tel:${member.phone}`} className="group/link flex items-center gap-4 text-text-secondary hover:text-primary transition-colors font-medium">
+                      <div className="w-10 h-10 rounded-xl bg-neutral-50 flex items-center justify-center text-neutral-400 group-hover/link:bg-primary/10 group-hover/link:text-primary transition-colors border border-neutral-100">
                         <svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                       </div>
                       <span>{member.phone}</span>
-                      <svg className="w-4 h-4 ml-auto opacity-0 -translate-x-2 group-hover/link:opacity-100 group-hover/link:translate-x-0 transition-all duration-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                     </a>
                   )}
                 </div>