From a66f51b9a2d4f7ff40552f67e32ad40ab929fe35 Mon Sep 17 00:00:00 2001
From: Damjan Savic <info@damjan-savic.com>
Date: Mon, 5 Jan 2026 23:50:10 +0100
Subject: [PATCH] Fix: Hero Icons wie im Footer (lucide-react, nicht sticky)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Linkedin und Github Icons aus lucide-react importiert
- fixed zu absolute geändert (nicht mehr sticky)
- Styling wie im Footer (text-zinc-400, hover-Effekte)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/pages/home/components/Hero.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/pages/home/components/Hero.tsx b/src/pages/home/components/Hero.tsx
index 6e89bc4..ca9be82 100644
--- a/src/pages/home/components/Hero.tsx
+++ b/src/pages/home/components/Hero.tsx
@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { Linkedin, Github } from 'lucide-react';
 
 const Hero = () => {
     const { t } = useTranslation();
@@ -29,31 +30,31 @@ const Hero = () => {
             </div>
 
             {/* Social Links Bar */}
-            <div className="fixed top-20 left-0 right-0 z-50 px-4 sm:px-8">
+            <div className="absolute top-20 left-0 right-0 px-4 sm:px-8" style={{ zIndex: 40 }}>
                 <div className="max-w-7xl mx-auto flex justify-between items-center">
-                    <div className="flex gap-3">
+                    <div className="flex gap-4">
                         <a
                             href="https://www.linkedin.com/in/damjan-savi%C4%87-720288127/"
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="w-10 h-10 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 transition-colors text-white text-lg"
+                            className="group text-zinc-400 hover:text-white transition-colors"
                             aria-label="LinkedIn"
                         >
-                            in
+                            <Linkedin className="transform transition-transform group-hover:scale-110" size={20} />
                         </a>
                         <a
                             href="https://github.com/damjan1996"
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="w-10 h-10 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 transition-colors text-white text-lg font-mono"
+                            className="group text-zinc-400 hover:text-white transition-colors"
                             aria-label="GitHub"
                         >
-                            &lt;/&gt;
+                            <Github className="transform transition-transform group-hover:scale-110" size={20} />
                         </a>
                     </div>
                     <a
                         href="mailto:info@damjan-savic.com"
-                        className="text-sm text-white hover:text-zinc-300 transition-colors uppercase tracking-wider"
+                        className="text-sm text-zinc-400 hover:text-white transition-colors uppercase tracking-wider"
                     >
                         {t('pages.home.hero.cta')}
                     </a>