AdemNefzi/LexiChain
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

backup point before blockchain

Browse Source
This commit is contained in:
Adem
2026-04-19 01:42:00 +01:00
parent 185c680b37
commit e0dc9ba2ba
13 changed files with 1261 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
features/home/components/Footer.tsx
View File

@@ -1,10 +1,12 @@
"use client";
import { useScrollAnimation } from "@/hooks/useScrollAnimation";
import { Sparkles, Github, Twitter, Linkedin, Mail } from "lucide-react";
import { Github, Twitter, Linkedin, Mail } from "lucide-react";
import Image from "next/image";
// Social Icon Component
// ==========================================
// Composant : Icône Sociale Premium
// ==========================================
function SocialIcon({
icon: Icon,
href,
@@ -20,13 +22,20 @@ function SocialIcon({
target="_blank"
rel="noopener noreferrer"
aria-label={label}
className="text-slate-500 hover:text-slate-900 dark:hover:text-white transition-colors duration-200"
className="group relative flex items-center justify-center w-10 h-10 rounded-full bg-slate-50 dark:bg-white/[0.03] border border-slate-200 dark:border-white/10 transition-all duration-300 hover:-translate-y-1 hover:border-primary/50 hover:shadow-[0_0_20px_rgba(var(--primary),0.2)]"
>
<Icon className="w-5 h-5" />
{/* Lueur d'arrière-plan au survol */}
<div className="absolute inset-0 rounded-full bg-primary/10 opacity-0 group-hover:opacity-100 blur-md transition-opacity duration-300" />
{/* Icône */}
<Icon className="w-4 h-4 text-slate-500 dark:text-slate-400 group-hover:text-primary relative z-10 transition-colors duration-300" />
</a>
);
}
// ==========================================
// Composant Principal : Footer
// ==========================================
export function Footer() {
const { ref, isVisible } = useScrollAnimation<HTMLElement>({
threshold: 0.1,
@@ -42,60 +51,66 @@ export function Footer() {
<footer
id="footer"
ref={ref}
className="relative bg-white dark:bg-slate-950 border-t border-slate-200 dark:border-slate-800 py-12 px-4 sm:px-6 lg:px-8"
className="relative overflow-hidden bg-background pt-20 pb-12 px-4 sm:px-6 lg:px-8"
>
{/* Effet Wow 1 : Ligne de démarcation en dégradé */}
<div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-foreground/20 dark:via-foreground/15 to-transparent" />
{/* Effet Wow 2 : Lueur d'ambiance à la base de la page */}
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[800px] h-[300px] bg-[radial-gradient(ellipse_at_bottom,hsla(var(--primary),0.15)_0%,transparent_60%)] pointer-events-none" />
<div
className="max-w-7xl mx-auto"
className="relative z-10 max-w-7xl mx-auto"
style={{
opacity: isVisible ? 1 : 0,
transform: isVisible ? "translateY(0)" : "translateY(20px)",
transition: "all 0.6s ease-out",
transform: isVisible ? "translateY(0)" : "translateY(30px)",
transition: "all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1)",
}}
>
{/* Main Content */}
<div className="flex flex-col items-center space-y-8">
{/* Logo */}
<a href="#" className="inline-flex items-center gap-2 group">
<div className="flex flex-col items-center space-y-10">
{/* Logo & Nom de la marque avec Lueur */}
<a href="#" className="inline-flex flex-col items-center gap-3 group">
<div className="relative">
{/* Lueur sous le logo */}
<div className="absolute inset-0 bg-primary/20 blur-xl rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<Image
src="/LexiChain.png"
alt="LexiChain Logo"
width={48}
height={48}
className="
relative z-10
w-12 h-12 object-contain
transition-all duration-300 ease-out
group-hover:scale-110
"
width={56}
height={56}
className="relative z-10 w-14 h-14 object-contain transition-transform duration-500 ease-out group-hover:scale-110"
/>
</div>
<span className="text-xl font-bold tracking-tight text-foreground/90 group-hover:text-foreground transition-colors duration-300">
LexiChain
</span>
</a>
{/* Navigation Links */}
<nav className="flex items-center gap-8">
{/* Liens de Navigation avec animation de soulignement */}
<nav className="flex items-center gap-8 md:gap-12">
{navLinks.map((link) => (
<a
key={link.label}
href={link.href}
className="text-sm text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors duration-200"
className="relative text-sm font-medium text-muted-foreground hover:text-foreground transition-colors duration-300 group py-1"
>
{link.label}
{/* Ligne d'animation au survol */}
<span className="absolute bottom-0 left-0 w-0 h-[2px] bg-primary transition-all duration-300 ease-out group-hover:w-full rounded-full" />
</a>
))}
</nav>
{/* Divider */}
<div className="w-full max-w-4xl h-px bg-slate-200 dark:bg-slate-800" />
{/* Séparateur minimaliste */}
<div className="w-full max-w-md h-px bg-gradient-to-r from-transparent via-border to-transparent" />
{/* Bottom Row */}
<div className="flex items-center gap-8">
{/* Copyright */}
<p className="text-sm text-slate-500 dark:text-slate-500">
© LexiChain
{/* Section Inférieure (Copyright & Réseaux) */}
<div className="flex flex-col md:flex-row items-center justify-between w-full max-w-4xl gap-6">
<p className="text-sm font-medium text-muted-foreground/60 flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-primary/80 animate-pulse" />
© {new Date().getFullYear()} LexiChain. All rights reserved.
</p>
{/* Social Icons */}
<div className="flex items-center gap-4">
<SocialIcon
icon={Twitter}