feat: Website-Rework mit verbessertem Design, Sicherheit und Deployment

- Neue About/Skills-Sektion hinzugefügt
- Verbesserte UI/UX für alle Komponenten
- Enhanced Contact Form mit Validierung
- Verbesserte Security Headers und Middleware
- Sichere Deployment-Skripte (safe-deploy.sh)
- Zero-Downtime Deployment Support
- Verbesserte Docker-Sicherheit
- Umfassende Sicherheits-Dokumentation
- Performance-Optimierungen
- Accessibility-Verbesserungen

app/components/Hero.tsx

@@ -203,20 +203,21 @@ const Hero = () => {
         >
           <motion.a
             href="#projects"
-            whileHover={{ scale: 1.05 }}
+            whileHover={{ scale: 1.05, y: -2 }}
             whileTap={{ scale: 0.95 }}
-            className="btn-primary px-8 py-4 text-lg font-semibold"
+            className="btn-primary px-8 py-4 text-lg font-semibold inline-flex items-center space-x-2"
           >
-            View My Work
+            <span>View My Work</span>
+            <ArrowDown className="w-5 h-5" />
           </motion.a>
           
           <motion.a
             href="#contact"
-            whileHover={{ scale: 1.05 }}
+            whileHover={{ scale: 1.05, y: -2 }}
             whileTap={{ scale: 0.95 }}
-            className="px-8 py-4 text-lg font-semibold border-2 border-gray-600 text-gray-300 hover:text-white hover:border-gray-500 rounded-lg transition-all duration-200"
+            className="btn-secondary px-8 py-4 text-lg font-semibold inline-flex items-center space-x-2"
           >
-            Contact Me
+            <span>Contact Me</span>
           </motion.a>
         </motion.div>
 
@@ -224,17 +225,18 @@ const Hero = () => {
         <motion.div
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
-          transition={{ duration: 1, delay: 1.5 }}
+          transition={{ duration: 1, delay: 2 }}
           className="mt-12 md:mt-16 text-center relative z-20"
         >
-          <motion.div
+          <motion.a
+            href="#about"
             animate={{ y: [0, 10, 0] }}
-            transition={{ duration: 2, repeat: Infinity }}
-            className="flex flex-col items-center text-white/90 bg-black/30 backdrop-blur-md px-6 py-3 rounded-full border border-white/20 shadow-lg"
+            transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
+            className="inline-flex flex-col items-center text-white/90 bg-black/30 backdrop-blur-md px-6 py-3 rounded-full border border-white/20 shadow-lg hover:bg-black/50 hover:border-white/30 transition-all cursor-pointer group"
           >
-            <span className="text-sm md:text-base mb-2 font-medium">Scroll Down</span>
-            <ArrowDown className="w-5 h-5 md:w-6 md:h-6" />
-          </motion.div>
+            <span className="text-sm md:text-base mb-2 font-medium group-hover:text-white transition-colors">Scroll Down</span>
+            <ArrowDown className="w-5 h-5 md:w-6 md:h-6 group-hover:translate-y-1 transition-transform" />
+          </motion.a>
         </motion.div>
       </div>
     </section>