Skip to content

Commit 97a5393

Browse files
Alien69FlowAlien69Flow
authored
Update Footer.tsx
Signed-off-by: Aitor Alien <111972684+Alien69Flow@users.noreply.github.com>
1 parent c37c221 commit 97a5393

1 file changed

Lines changed: 71 additions & 142 deletions

File tree

‎src/components/Footer.tsx‎

Lines changed: 71 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -2,169 +2,98 @@ import React from 'react';
22
import { X, Facebook, Instagram, Mail, Disc, Send, Github, Linkedin, MessageSquare, BookOpen } from 'lucide-react';
33
import { Link } from 'react-router-dom';
44
import { getCurrentChineseYear } from '@/lib/chineseCalendar';
5+
56
const Footer = () => {
67
const chineseYear = getCurrentChineseYear();
78
const currentYear = new Date().getFullYear();
89

9-
return <footer className="bg-gradient-to-br from-alien-space-dark/95 to-alien-space/90 backdrop-blur-sm border-t-2 border-alien-gold/30 py-6 lg:py-8 mt-auto relative z-20">
10-
<div className="container mx-auto px-4 lg:px-6">
11-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
12-
{/* Logo and description */}
13-
<div className="lg:col-span-2 flex flex-col gap-3">
10+
// 1. Redes Sociales Ordenadas Alfabéticamente
11+
const socialLinks = [
12+
{ href: "https://discord.gg/alienflowspace", icon: Disc, label: "Discord", color: "#5865F2" },
13+
{ href: "mailto:info@alienflow.space", icon: Mail, label: "Email", color: "#F0D882" },
14+
{ href: "https://www.facebook.com/Alien69Flow", icon: Facebook, label: "Facebook", color: "#1877F2" },
15+
{ href: "https://alienflowspace.gitbook.io/DAO", icon: BookOpen, label: "GitBook", color: "#22C55E" },
16+
{ href: "https://github.com/Alien69Flow", icon: Github, label: "Github", color: "#22C55E" },
17+
{ href: "https://www.instagram.com/alien69flow/", icon: Instagram, label: "Instagram", color: "#E4405F" },
18+
{ href: "https://linkedin.com/in/alienflow", icon: Linkedin, label: "LinkedIn", color: "#0A66C2" },
19+
{ href: "https://t.me/AlienFlow", icon: Send, label: "Telegram", color: "#0088CC" },
20+
{ href: "https://threads.net/@alien69flow", icon: MessageSquare, label: "Threads", color: "#000" },
21+
{ href: "https://x.com/alien69flow", icon: X, label: "X (Twitter)", color: "#1DA1F2" }
22+
].sort((a, b) => a.label.localeCompare(b.label));
23+
24+
// 2. Navegación Ordenada Alfabéticamente (Sin duplicar Home si no quieres)
25+
const navLinks = [
26+
{ to: "/about", label: "About" },
27+
{ to: "/academy", label: "Academy" },
28+
{ to: "/alien-trip", label: "AlienTrip" },
29+
{ to: "/clubs", label: "Clubs" },
30+
{ to: "/conetworking", label: "CoNetWorKing" },
31+
{ to: "/contact", label: "Contact" },
32+
{ to: "/", label: "Home" }
33+
].sort((a, b) => a.label.localeCompare(b.label));
34+
35+
return (
36+
<footer className="bg-gradient-to-br from-alien-space-dark/95 to-alien-space/90 backdrop-blur-md border-t-2 border-alien-gold/30 py-8 mt-auto relative z-30">
37+
<div className="container mx-auto px-4">
38+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
39+
40+
<div className="lg:col-span-2 flex flex-col gap-4">
1441
<div className="flex items-center gap-2">
15-
<img src="/lovable-uploads/ALogo.png" alt="AlienFlowSpaceDAO Logo" className="h-8 w-auto object-contain gold-glow" />
16-
<span className="text-lg font-bold font-nasalization text-glow text-alien-green">
17-
AlienFlowSpace DAO
18-
</span>
42+
<img src="/lovable-uploads/ALogo.png" alt="Logo" className="h-10 w-auto object-contain gold-glow" />
43+
<span className="text-xl font-bold font-nasalization text-alien-green">AlienFlowSpace DAO</span>
1944
</div>
20-
<p className="text-alien-green/90 text-sm font-[Exo] leading-relaxed max-w-md">
45+
<p className="text-alien-green/80 text-sm font-exo leading-relaxed max-w-md">
2146
Uniting diverse blockchain domains under a cosmic governance structure.
22-
Building the future of decentralized finance and sustainable technology across the multiverse.
47+
Building the future of decentralized finance across the multiverse.
2348
</p>
24-
<div className="flex gap-2 pt-1 flex-wrap">
25-
{[{
26-
href: "https://discord.gg/alienflowspace",
27-
icon: Disc,
28-
label: "Discord",
29-
color: "#5865F2"
30-
}, {
31-
href: "mailto:info@alienflow.space",
32-
icon: Mail,
33-
label: "Email",
34-
color: "#F0D882"
35-
}, {
36-
href: "https://www.facebook.com/Alien69Flow",
37-
icon: Facebook,
38-
label: "Facebook",
39-
color: "#1877F2"
40-
}, {
41-
href: "https://alienflowspace.gitbook.io/DAO",
42-
icon: BookOpen,
43-
label: "GitBook",
44-
color: "#22C55E"
45-
}, {
46-
href: "https://github.com/Alien69Flow",
47-
icon: Github,
48-
label: "Github",
49-
color: "#22C55E"
50-
}, {
51-
href: "https://www.instagram.com/alien69flow/",
52-
icon: Instagram,
53-
label: "Instagram",
54-
color: "#E4405F"
55-
}, {
56-
href: "https://linkedin.com/in/alienflow",
57-
icon: Linkedin,
58-
label: "LinkedIn",
59-
color: "#0A66C2"
60-
}, {
61-
href: "https://t.me/AlienFlow",
62-
icon: Send,
63-
label: "Telegram",
64-
color: "#0088CC"
65-
}, {
66-
href: "https://threads.net/@alien69flow",
67-
icon: MessageSquare,
68-
label: "Threads",
69-
color: "#000"
70-
}, {
71-
href: "https://x.com/alien69flow",
72-
icon: X,
73-
label: "X (Twitter)",
74-
color: "#1DA1F2"
75-
}].map((social, index) => <a key={index} href={social.href} target="_blank" rel="noopener noreferrer" aria-label={social.label} className="p-1.5 transition-all duration-300 hover:scale-110 hover:bg-alien-space-light/20 rounded-lg border border-alien-gold/20 hover:border-alien-green/40" style={{
76-
color: social.color
77-
}}>
78-
<social.icon size={16} />
79-
</a>)}
49+
<div className="flex gap-2 pt-2 flex-wrap">
50+
{socialLinks.map((social, i) => (
51+
<a key={i} href={social.href} target="_blank" rel="noopener noreferrer" className="p-2 transition-all hover:scale-110 border border-alien-gold/20 rounded-lg bg-black/20" style={{ color: social.color }}>
52+
<social.icon size={18} />
53+
</a>
54+
))}
8055
</div>
8156
</div>
82-
83-
{/* Navigation Links */}
57+
8458
<div>
85-
<h4 className="text-alien-gold font-nasalization font-bold mb-3 text-base text-glow">Navigation</h4>
86-
<ul className="space-y-2 font-[Exo]">
87-
{[{
88-
to: "/",
89-
label: "Home"
90-
}, {
91-
to: "/about",
92-
label: "About"
93-
}, {
94-
to: "/alien-trip",
95-
label: "AlienTrip"
96-
}, {
97-
to: "/contact",
98-
label: "Contact"
99-
}, {
100-
to: "/academy",
101-
label: "Academy"
102-
}, {
103-
to: "/clubs",
104-
label: "Clubs"
105-
}, {
106-
to: "/conetworking",
107-
label: "CoNetWorKing"
108-
}].map((link, index) => <li key={index}>
109-
<Link to={link.to} className="text-sm text-alien-green/80 hover:text-alien-gold transition-all duration-300 hover:translate-x-1 inline-block border-b border-transparent hover:border-alien-gold/30">
59+
<h4 className="text-alien-gold font-nasalization font-bold mb-4 text-glow">Navigation</h4>
60+
<ul className="space-y-2">
61+
{navLinks.map((link, i) => (
62+
<li key={i}>
63+
<Link to={link.to} className="text-sm text-alien-green/70 hover:text-alien-gold transition-all hover:translate-x-1 inline-block">
11064
{link.label}
11165
</Link>
112-
</li>)}
66+
</li>
67+
))}
11368
</ul>
11469
</div>
115-
116-
{/* Legal & Resources */}
70+
11771
<div>
118-
<h4 className="text-alien-gold font-nasalization font-bold mb-3 text-base text-glow">Resources</h4>
119-
<ul className="space-y-2 font-[Exo]">
120-
<li>
121-
<a href="https://alienflowspace.gitbook.io/DAO" target="_blank" rel="noopener noreferrer" className="text-sm text-alien-green/80 hover:text-alien-gold transition-all duration-300 hover:translate-x-1 inline-block border-b border-transparent hover:border-alien-gold/30">
122-
Documentation
123-
</a>
124-
</li>
125-
<li>
126-
<a href="https://alienflowspace.gitbook.io/DAO" target="_blank" rel="noopener noreferrer" className="text-sm text-alien-green/80 hover:text-alien-gold transition-all duration-300 hover:translate-x-1 inline-block border-b border-transparent hover:border-alien-gold/30">
127-
Terms of Service
128-
</a>
129-
</li>
130-
<li>
131-
<Link to="/privacy-policy" className="text-sm text-alien-green/80 hover:text-alien-gold transition-all duration-300 hover:translate-x-1 inline-block border-b border-transparent hover:border-alien-gold/30">
132-
Privacy & Cookie Policy
133-
</Link>
134-
</li>
72+
<h4 className="text-alien-gold font-nasalization font-bold mb-4 text-glow">Resources</h4>
73+
<ul className="space-y-2">
74+
<li><a href="https://alienflowspace.gitbook.io/DAO" className="text-sm text-alien-green/70 hover:text-alien-gold">Documentation</a></li>
75+
<li><Link to="/privacy-policy" className="text-sm text-alien-green/70 hover:text-alien-gold">Privacy Policy</Link></li>
76+
<li><a href="https://alienflowspace.gitbook.io/DAO" className="text-sm text-alien-green/70 hover:text-alien-gold">Terms of Service</a></li>
13577
</ul>
13678
</div>
13779
</div>
138-
139-
<div className="border-t-2 border-alien-gold/30 mt-6 pt-4 bg-gradient-to-r from-alien-space-dark/50 to-alien-space/30 rounded-lg px-4 py-3">
140-
<div className="flex flex-col lg:flex-row justify-between items-center gap-3">
141-
<p className="text-xs text-alien-green/70 font-[Exo] text-center lg:text-left">
142-
© {currentYear} AlienFlowSpace DAO. All rights reserved across the multiverse.
143-
</p>
144-
145-
{/* Chinese Calendar Display */}
146-
<div className="flex items-center gap-2 bg-alien-space-dark/40 px-3 py-1.5 rounded-lg border border-alien-gold/20">
147-
<span className="text-2xl" style={{ filter: `drop-shadow(0 0 6px ${chineseYear.color})` }}>
148-
{chineseYear.icon}
149-
</span>
150-
<div className="text-left">
151-
<p className="text-alien-gold font-bold text-xs font-nasalization">
152-
{currentYear} / {chineseYear.year}
153-
</p>
154-
<p className="text-[10px] font-[Exo]" style={{ color: chineseYear.color }}>
155-
{chineseYear.element} {chineseYear.animal}
156-
</p>
157-
</div>
158-
</div>
159-
160-
<div className="flex items-center gap-1 text-xs text-alien-gold/80">
161-
<span>Made with</span>
162-
<span className="text-alien-green text-base">💚</span>
163-
<span>for the cosmic community</span>
80+
81+
<div className="border-t border-alien-gold/20 mt-8 pt-6 flex flex-col lg:flex-row justify-between items-center gap-4">
82+
<p className="text-[10px] font-nasalization text-alien-green/50 uppercase tracking-widest">
83+
© {currentYear} AlienFlowSpace DAO • Cosmic Governance Enabled
84+
</p>
85+
86+
<div className="flex items-center gap-3 bg-black/40 px-4 py-2 rounded-2xl border border-alien-gold/30">
87+
<span className="text-2xl animate-pulse" style={{ filter: `drop-shadow(0 0 8px ${chineseYear.color})` }}>{chineseYear.icon}</span>
88+
<div className="text-left leading-none">
89+
<p className="text-alien-gold font-bold text-xs">{currentYear} / {chineseYear.year}</p>
90+
<p className="text-[9px] uppercase tracking-tighter" style={{ color: chineseYear.color }}>{chineseYear.element} {chineseYear.animal}</p>
16491
</div>
16592
</div>
16693
</div>
16794
</div>
168-
</footer>;
95+
</footer>
96+
);
16997
};
170-
export default Footer;
98+
99+
export default Footer;

0 commit comments

Comments
 (0)