125 lines
4.2 KiB
TypeScript
125 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Heart, Code } from 'lucide-react';
|
|
import { SiGithub, SiLinkedin } from 'react-icons/si';
|
|
import Link from 'next/link';
|
|
|
|
const Footer = () => {
|
|
const [currentYear, setCurrentYear] = useState(2024);
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setCurrentYear(new Date().getFullYear());
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
const socialLinks = [
|
|
{ icon: SiGithub, href: 'https://github.com/Denshooter', label: 'GitHub' },
|
|
{ icon: SiLinkedin, href: 'https://linkedin.com/in/dkonkol', label: 'LinkedIn' }
|
|
];
|
|
|
|
if (!mounted) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<footer className="relative py-12 px-4 bg-black border-t border-gray-800/50">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0">
|
|
{/* Brand */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="flex items-center space-x-3"
|
|
>
|
|
<div className="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center">
|
|
<Code className="w-5 h-5 text-white" />
|
|
</div>
|
|
<div>
|
|
<Link href="/" className="text-xl font-bold font-mono text-white">
|
|
dk<span className="text-red-500">0</span>
|
|
</Link>
|
|
<p className="text-xs text-gray-500">Software Engineer</p>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Social Links */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.1 }}
|
|
className="flex space-x-4"
|
|
>
|
|
{socialLinks.map((social) => (
|
|
<motion.a
|
|
key={social.label}
|
|
href={social.href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
whileHover={{ scale: 1.1, y: -2 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="p-3 bg-gray-800/50 hover:bg-gray-700/50 rounded-lg text-gray-300 hover:text-white transition-all duration-200"
|
|
>
|
|
<social.icon size={18} />
|
|
</motion.a>
|
|
))}
|
|
</motion.div>
|
|
|
|
{/* Copyright */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="flex items-center space-x-2 text-gray-400 text-sm"
|
|
>
|
|
<span>© {currentYear}</span>
|
|
<motion.div
|
|
animate={{ scale: [1, 1.2, 1] }}
|
|
transition={{ duration: 1.5, repeat: Infinity }}
|
|
>
|
|
<Heart size={14} className="text-red-500" />
|
|
</motion.div>
|
|
<span>Made in Germany</span>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Legal Links */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.3 }}
|
|
className="mt-8 pt-6 border-t border-gray-800/50 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0"
|
|
>
|
|
<div className="flex space-x-6 text-sm">
|
|
<Link
|
|
href="/legal-notice"
|
|
className="text-gray-500 hover:text-gray-300 transition-colors duration-200"
|
|
>
|
|
Impressum
|
|
</Link>
|
|
<Link
|
|
href="/privacy-policy"
|
|
className="text-gray-500 hover:text-gray-300 transition-colors duration-200"
|
|
>
|
|
Privacy Policy
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="text-xs text-gray-600">
|
|
Built with Next.js, TypeScript & Tailwind CSS
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
export default Footer;
|