update: Refont du footer
This commit is contained in:
+97
-23
@@ -1,4 +1,7 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
import { siteConfig } from "@/config/site";
|
import { siteConfig } from "@/config/site";
|
||||||
|
import { motion, type Variants } from "framer-motion";
|
||||||
import { Github, Heart, Linkedin, Mail } from "lucide-react";
|
import { Github, Heart, Linkedin, Mail } from "lucide-react";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
@@ -13,49 +16,120 @@ const socials = [
|
|||||||
{ name: "Email", href: "mailto:contact@jessy-david.dev", icon: Mail },
|
{ name: "Email", href: "mailto:contact@jessy-david.dev", icon: Mail },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const containerVariants: Variants = {
|
||||||
|
hidden: { opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
staggerChildren: 0.1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const itemVariants: Variants = {
|
||||||
|
hidden: { opacity: 0, y: 20 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
transition: { duration: 0.5 },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
return (
|
return (
|
||||||
<footer className="relative z-10 bg-slate-900 border-t border-slate-800">
|
<footer className="relative z-10 overflow-hidden">
|
||||||
<div className="container mx-auto px-4 py-8">
|
<div className="relative bg-slate-900/95 backdrop-blur-xl">
|
||||||
<div className="flex flex-col md:flex-row items-center justify-between gap-6">
|
{/* Background orbs */}
|
||||||
{/* Logo et nom du site - lien vers l'accueil */}
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||||
<Link href="/" className="flex items-center gap-2">
|
<div className="absolute -top-24 -left-24 w-48 h-48 bg-blue-500/10 rounded-full blur-3xl" />
|
||||||
<div className="p-1.5 rounded-lg">
|
<div className="absolute -bottom-24 -right-24 w-48 h-48 bg-purple-500/10 rounded-full blur-3xl" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container mx-auto px-4 py-10 relative">
|
||||||
|
<motion.div
|
||||||
|
variants={containerVariants}
|
||||||
|
initial="hidden"
|
||||||
|
whileInView="visible"
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="flex flex-col md:flex-row items-center justify-between gap-6"
|
||||||
|
>
|
||||||
|
{/* Logo */}
|
||||||
|
<motion.div variants={itemVariants}>
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="inline-flex items-center gap-3 group"
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
className="relative"
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 bg-linear-to-br from-blue-500 to-purple-500 rounded-xl blur-lg opacity-50 group-hover:opacity-75 transition-opacity" />
|
||||||
<Image
|
<Image
|
||||||
src="/logo.webp"
|
src="/logo.webp"
|
||||||
width={500}
|
width={56}
|
||||||
height={500}
|
height={56}
|
||||||
className="w-12 h-12"
|
className="relative w-14 h-14 rounded-xl ring-2 ring-white/10"
|
||||||
alt="Image de profile"
|
alt="Logo"
|
||||||
/>
|
/>
|
||||||
</div>
|
</motion.div>
|
||||||
<span className="text-lg font-bold text-white">
|
<span className="text-xl font-bold bg-linear-to-r from-white to-slate-300 bg-clip-text text-transparent">
|
||||||
{siteConfig.name}
|
{siteConfig.name}
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
{/* Icônes des réseaux sociaux */}
|
{/* Social icons */}
|
||||||
<div className="flex items-center gap-2">
|
<motion.div
|
||||||
|
variants={itemVariants}
|
||||||
|
className="flex flex-col items-center gap-3"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
{socials.map((item) => (
|
{socials.map((item) => (
|
||||||
<a
|
<motion.a
|
||||||
key={item.name}
|
key={item.name}
|
||||||
href={item.href}
|
href={item.href}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="p-2 bg-slate-800 hover:bg-linear-to-br hover:from-blue-500 hover:to-purple-500 rounded-lg transition-all duration-300 group"
|
whileHover={{ scale: 1.1, y: -2 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
className="p-2.5 bg-slate-800/80 border border-slate-700/50 hover:border-blue-500/50 hover:bg-linear-to-br hover:from-blue-500/20 hover:to-purple-500/20 rounded-xl transition-all duration-300 group"
|
||||||
aria-label={item.name}
|
aria-label={item.name}
|
||||||
>
|
>
|
||||||
<item.icon className="w-4 h-4 text-slate-400 group-hover:text-white transition-colors" />
|
<item.icon className="w-5 h-5 text-slate-400 group-hover:text-white transition-colors" />
|
||||||
</a>
|
</motion.a>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Copyright avec année dynamique */}
|
<motion.div
|
||||||
<p className="text-slate-500 text-sm flex items-center gap-1.5">
|
variants={itemVariants}
|
||||||
|
className="text-slate-500 text-sm"
|
||||||
|
>
|
||||||
|
Propulsé par{" "}
|
||||||
|
<Link
|
||||||
|
href="https://quantumcraft-studios.com"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="font-medium text-blue-400 hover:text-purple-400 transition-colors"
|
||||||
|
>
|
||||||
|
QuantumCraft Studios
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Copyright */}
|
||||||
|
<motion.p
|
||||||
|
variants={itemVariants}
|
||||||
|
className="text-slate-500 text-sm flex items-center gap-2 flex-wrap"
|
||||||
|
>
|
||||||
© {new Date().getFullYear()} • Fait avec
|
© {new Date().getFullYear()} • Fait avec
|
||||||
<Heart className="w-3.5 h-3.5 text-red-500 fill-red-500" />
|
<Heart className="w-4 h-4 text-red-500 fill-red-500" />
|
||||||
par Jessy DAVID
|
par{" "}
|
||||||
</p>
|
<span className="font-medium bg-linear-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
|
||||||
|
Jessy DAVID
|
||||||
|
</span>
|
||||||
|
</motion.p>
|
||||||
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
Reference in New Issue
Block a user