Skip to content

Commit ecc5015

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Refactor: Improve UX/UI of footer, menu, and pages
Improve the design and responsiveness of the footer, menu, and all pages for various screen resolutions.
1 parent 5e973fb commit ecc5015

File tree

6 files changed

+391
-256
lines changed

6 files changed

+391
-256
lines changed

‎src/components/Footer.tsx‎

Lines changed: 87 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,115 @@
1+
12
import React from 'react';
23
import { X, Facebook, Instagram, Mail, Disc, Send, Github, Linkedin } from 'lucide-react';
34
import { Link } from 'react-router-dom';
45

56
const Footer = () => {
67
return (
7-
<footer className="bg-alien-space-dark border-t border-alien-gold/10 py-8">
8-
<div className="container mx-auto px-4">
9-
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
8+
<footer className="bg-alien-space-dark border-t border-alien-gold/20 py-8 lg:py-12">
9+
<div className="container mx-auto px-4 lg:px-6">
10+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
1011
{/* Logo and description */}
11-
<div className="flex flex-col gap-3">
12-
<div className="flex items-center gap-2">
12+
<div className="lg:col-span-2 flex flex-col gap-4">
13+
<div className="flex items-center gap-3">
1314
<img
1415
src="/lovable-uploads/ALogo.png"
1516
alt="AlienFlowSpaceDAO Logo"
16-
className="h-9 w-auto object-contain"
17+
className="h-10 w-auto object-contain gold-glow"
1718
/>
18-
<span className="text-lg text-alien-gold font-nasalization font-bold">AlienFlowSpace</span>
19+
<span className="text-xl font-bold text-alien-gold font-nasalization">
20+
AlienFlowSpace DAO
21+
</span>
1922
</div>
20-
<p className="text-gray-400 text-sm font-[Exo] leading-snug">
21-
Uniting diverse blockchain domains under a cosmic governance structure.
23+
<p className="text-gray-300 text-sm lg:text-base font-[Exo] leading-relaxed max-w-md">
24+
Uniting diverse blockchain domains under a cosmic governance structure.
25+
Building the future of decentralized finance and sustainable technology across the multiverse.
2226
</p>
23-
<div className="flex gap-3 pt-1 flex-wrap">
24-
<a href="https://x.com/alien69flow" target="_blank" rel="noopener noreferrer" aria-label="X" className="text-gray-400 hover:text-alien-gold transition-colors"><X size={18} /></a>
25-
<a href="https://www.facebook.com/Alien69Flow" target="_blank" rel="noopener noreferrer" aria-label="Facebook" className="text-gray-400 hover:text-alien-gold transition-colors"><Facebook size={18} /></a>
26-
<a href="https://www.instagram.com/alien69flow/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="text-gray-400 hover:text-alien-gold transition-colors"><Instagram size={18} /></a>
27-
<a href="https://discord.gg/alienflowspace" target="_blank" rel="noopener noreferrer" aria-label="Discord" className="text-gray-400 hover:text-alien-gold transition-colors"><Disc size={18} /></a>
28-
<a href="mailto:[email protected]" aria-label="Email" className="text-gray-400 hover:text-alien-gold transition-colors"><Mail size={18} /></a>
29-
<a href="https://t.me/AlienFlow" target="_blank" rel="noopener noreferrer" aria-label="Telegram" className="text-gray-400 hover:text-alien-gold transition-colors"><Send size={18} /></a>
30-
<a href="https://github.com/AlienFlowSpaceDAO" target="_blank" rel="noopener noreferrer" aria-label="Github" className="text-gray-400 hover:text-alien-gold transition-colors"><Github size={18} /></a>
31-
<a href="https://linkedin.com/in/alienflow" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" className="text-gray-400 hover:text-alien-gold transition-colors"><Linkedin size={18} /></a>
27+
<div className="flex gap-3 pt-2 flex-wrap">
28+
{[
29+
{ href: "https://x.com/alien69flow", icon: X, label: "X (Twitter)" },
30+
{ href: "https://www.facebook.com/Alien69Flow", icon: Facebook, label: "Facebook" },
31+
{ href: "https://www.instagram.com/alien69flow/", icon: Instagram, label: "Instagram" },
32+
{ href: "https://discord.gg/alienflowspace", icon: Disc, label: "Discord" },
33+
{ href: "mailto:[email protected]", icon: Mail, label: "Email" },
34+
{ href: "https://t.me/AlienFlow", icon: Send, label: "Telegram" },
35+
{ href: "https://github.com/AlienFlowSpaceDAO", icon: Github, label: "Github" },
36+
{ href: "https://linkedin.com/in/alienflow", icon: Linkedin, label: "LinkedIn" }
37+
].map((social, index) => (
38+
<a
39+
key={index}
40+
href={social.href}
41+
target="_blank"
42+
rel="noopener noreferrer"
43+
aria-label={social.label}
44+
className="p-2 text-gray-400 hover:text-alien-gold transition-all duration-300 hover:scale-110 hover:bg-alien-space-light/20 rounded-lg"
45+
>
46+
<social.icon size={20} />
47+
</a>
48+
))}
3249
</div>
3350
</div>
3451

3552
{/* Navigation Links */}
3653
<div>
37-
<h4 className="text-alien-gold font-nasalization font-bold mb-3 text-base">Navigation</h4>
38-
<ul className="space-y-1 text-gray-400 font-[Exo] text-sm leading-tight">
39-
<li><Link to="/" className="hover:text-alien-green transition-colors">Home</Link></li>
40-
<li><Link to="/about" className="hover:text-alien-green transition-colors">About</Link></li>
41-
<li><Link to="/alien-trip" className="hover:text-alien-green transition-colors">AlienTrip</Link></li>
42-
<li><Link to="/contact" className="hover:text-alien-green transition-colors">Contact</Link></li>
43-
<li><Link to="/academy" className="hover:text-alien-green transition-colors">Academy</Link></li>
44-
<li><Link to="/clubs" className="hover:text-alien-green transition-colors">Clubs</Link></li>
45-
<li><Link to="/conetworking" className="hover:text-alien-green transition-colors">CoNetWorKing</Link></li>
54+
<h4 className="text-alien-gold font-nasalization font-bold mb-4 text-lg">Navigation</h4>
55+
<ul className="space-y-3 text-gray-300 font-[Exo]">
56+
{[
57+
{ to: "/", label: "Home" },
58+
{ to: "/about", label: "About" },
59+
{ to: "/alien-trip", label: "AlienTrip" },
60+
{ to: "/contact", label: "Contact" },
61+
{ to: "/academy", label: "Academy" },
62+
{ to: "/clubs", label: "Clubs" },
63+
{ to: "/conetworking", label: "CoNetWorKing" }
64+
].map((link, index) => (
65+
<li key={index}>
66+
<Link
67+
to={link.to}
68+
className="hover:text-alien-green transition-colors duration-300 hover:translate-x-1 inline-block"
69+
>
70+
{link.label}
71+
</Link>
72+
</li>
73+
))}
4674
</ul>
4775
</div>
4876

49-
{/* Legal */}
77+
{/* Legal & Resources */}
5078
<div>
51-
<h4 className="text-alien-gold font-nasalization font-bold mb-3 text-base">Legal</h4>
52-
<ul className="space-y-1 text-gray-400 font-[Exo] text-sm leading-tight">
53-
<li>
54-
<a href="https://alienflowspace.gitbook.io/DAO" target="_blank" rel="noopener noreferrer" className="hover:text-alien-green transition-colors">
55-
Terms of Service
56-
</a>
57-
</li>
58-
<li>
59-
<a href="https://alienflowspace.gitbook.io/DAO" target="_blank" rel="noopener noreferrer" className="hover:text-alien-green transition-colors">
60-
Privacy Policy
61-
</a>
62-
</li>
63-
<li>
64-
<a href="https://alienflowspace.gitbook.io/DAO" target="_blank" rel="noopener noreferrer" className="hover:text-alien-green transition-colors">
65-
Cookie Policy
66-
</a>
67-
</li>
79+
<h4 className="text-alien-gold font-nasalization font-bold mb-4 text-lg">Resources</h4>
80+
<ul className="space-y-3 text-gray-300 font-[Exo]">
81+
{[
82+
{ href: "https://alienflowspace.gitbook.io/DAO", label: "Documentation" },
83+
{ href: "https://alienflowspace.gitbook.io/DAO", label: "Terms of Service" },
84+
{ href: "https://alienflowspace.gitbook.io/DAO", label: "Privacy Policy" },
85+
{ href: "https://alienflowspace.gitbook.io/DAO", label: "Cookie Policy" }
86+
].map((link, index) => (
87+
<li key={index}>
88+
<a
89+
href={link.href}
90+
target="_blank"
91+
rel="noopener noreferrer"
92+
className="hover:text-alien-green transition-colors duration-300 hover:translate-x-1 inline-block"
93+
>
94+
{link.label}
95+
</a>
96+
</li>
97+
))}
6898
</ul>
6999
</div>
70100
</div>
71-
<div className="border-t border-alien-gold/10 mt-8 pt-4 text-center text-xs text-gray-500 font-[Exo]">
72-
© {new Date().getFullYear()} AlienFlowSpace DAO. All rights reserved across the multiverse.
101+
102+
<div className="border-t border-alien-gold/20 mt-8 lg:mt-12 pt-6 lg:pt-8">
103+
<div className="flex flex-col lg:flex-row justify-between items-center gap-4">
104+
<p className="text-xs lg:text-sm text-gray-500 font-[Exo] text-center lg:text-left">
105+
© {new Date().getFullYear()} AlienFlowSpace DAO. All rights reserved across the multiverse.
106+
</p>
107+
<div className="flex items-center gap-2 text-xs text-gray-500">
108+
<span>Made with</span>
109+
<span className="text-alien-gold">💚</span>
110+
<span>for the cosmic community</span>
111+
</div>
112+
</div>
73113
</div>
74114
</div>
75115
</footer>

‎src/components/Header/DesktopNav.tsx‎

Lines changed: 66 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -11,72 +11,75 @@ import {
1111
import { Button } from "@/components/ui/button";
1212

1313
const DesktopNav = () => {
14+
const navLinks = [
15+
{ to: "/", label: "Home" },
16+
{ to: "/about", label: "About" },
17+
{ to: "/alien-trip", label: "AlienTrip" },
18+
{ to: "/contact", label: "Contact" }
19+
];
20+
21+
const spaceLinks = [
22+
{ to: "/academy", label: "Academy", desc: "Unlock cosmic knowledge through educational resources" },
23+
{ to: "/clubs", label: "Clubs", desc: "Join specialized communities focused on interests" },
24+
{ to: "/conetworking", label: "CoNetWorKing", desc: "Connect with like-minded profits across the multiverse" }
25+
];
26+
27+
const languages = [
28+
{ code: 'us', name: 'English', lang: 'en' },
29+
{ code: 'es', name: 'Español', lang: 'es' },
30+
{ code: 'fr', name: 'Français', lang: 'fr' },
31+
{ code: 'cn', name: '汉语 (Hànyǔ)', lang: 'zh' },
32+
{ code: 'in', name: 'हिन्दी (Hindī)', lang: 'hi' },
33+
{ code: 'pt', name: 'Português', lang: 'pt' },
34+
{ code: 'jp', name: '日本語 (Nihongo)', lang: 'ja' }
35+
];
36+
1437
return (
15-
<nav className="hidden md:flex items-center gap-6">
16-
<div className="hidden md:flex space-x-4">
17-
<Link to="/" className="text-alien-gold hover:text-alien-green px-2 py-2 font-nasalization">
18-
Home
19-
</Link>
20-
<Link to="/about" className="text-alien-gold hover:text-alien-green px-2 py-2 font-nasalization">
21-
About
22-
</Link>
23-
<Link to="/alien-trip" className="text-alien-gold hover:text-alien-green px-2 py-2 font-nasalization">
24-
AlienTrip
25-
</Link>
26-
<Link to="/contact" className="text-alien-gold hover:text-alien-green px-2 py-2 font-nasalization">
27-
Contact
28-
</Link>
38+
<nav className="hidden lg:flex items-center gap-8">
39+
<div className="flex items-center space-x-6">
40+
{/* Main Navigation */}
41+
{navLinks.map((link) => (
42+
<Link
43+
key={link.to}
44+
to={link.to}
45+
className="text-alien-gold hover:text-alien-green px-3 py-2 font-nasalization transition-all duration-300 hover:scale-105 relative group"
46+
>
47+
{link.label}
48+
<span className="absolute inset-x-0 -bottom-1 h-0.5 bg-alien-green scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
49+
</Link>
50+
))}
2951

3052
{/* Explore Spaces Dropdown */}
3153
<DropdownMenu>
3254
<DropdownMenuTrigger asChild>
3355
<Button
3456
variant="ghost"
35-
className="text-alien-gold hover:text-alien-green bg-transparent hover:bg-alien-space-light/30 px-2 py-2 rounded flex items-center group font-nasalization"
57+
className="text-alien-gold hover:text-alien-green bg-transparent hover:bg-alien-space-light/20 px-3 py-2 rounded-lg flex items-center group font-nasalization transition-all duration-300 hover:scale-105"
3658
>
37-
<span className="font-nasalization">Explore Spaces</span>
38-
<ChevronDown
39-
className="ml-2 h-4 w-4 transform transition-transform duration-300 group-data-[state=open]:rotate-180 group-hover:text-alien-green"
40-
/>
59+
<span>Explore Spaces</span>
60+
<ChevronDown className="ml-2 h-4 w-4 transform transition-transform duration-300 group-data-[state=open]:rotate-180" />
4161
</Button>
4262
</DropdownMenuTrigger>
4363
<DropdownMenuContent
44-
className="bg-alien-space-dark border border-alien-gold/20 p-4 rounded-md w-[320px] shadow-lg z-[9999]"
64+
className="bg-alien-space-dark/95 backdrop-blur-md border border-alien-gold/30 p-2 rounded-xl w-[380px] shadow-2xl shadow-alien-gold/10 z-[9999]"
65+
sideOffset={8}
4566
>
46-
<div className="flex flex-col space-y-4">
47-
<DropdownMenuItem asChild>
48-
<Link
49-
to="/academy"
50-
className="flex items-start p-2 rounded-lg hover:bg-alien-space-light/20 group cursor-pointer"
51-
>
52-
<div className="flex-1">
53-
<h3 className="text-alien-gold group-hover:text-alien-green mb-1 font-nasalization">Academy</h3>
54-
<p className="text-sm text-gray-400">Unlock cosmic knowledge through educational resources</p>
55-
</div>
56-
</Link>
57-
</DropdownMenuItem>
58-
<DropdownMenuItem asChild>
59-
<Link
60-
to="/clubs"
61-
className="flex items-start p-2 rounded-lg hover:bg-alien-space-light/20 group cursor-pointer"
62-
>
63-
<div className="flex-1">
64-
<h3 className="text-alien-gold group-hover:text-alien-green mb-1 font-nasalization">Clubs</h3>
65-
<p className="text-sm text-gray-400">Join specialized communities focused on interests</p>
66-
</div>
67-
</Link>
68-
</DropdownMenuItem>
69-
<DropdownMenuItem asChild>
70-
<Link
71-
to="/conetworking"
72-
className="flex items-start p-2 rounded-lg hover:bg-alien-space-light/20 group cursor-pointer"
73-
>
74-
<div className="flex-1">
75-
<h3 className="text-alien-gold group-hover:text-alien-green mb-1 font-nasalization">CoNetWorKing</h3>
76-
<p className="text-sm text-gray-400">Connect with like-minded and profits across the multiverse</p>
77-
</div>
78-
</Link>
79-
</DropdownMenuItem>
67+
<div className="flex flex-col space-y-1">
68+
{spaceLinks.map((link) => (
69+
<DropdownMenuItem key={link.to} asChild>
70+
<Link
71+
to={link.to}
72+
className="flex flex-col items-start p-4 rounded-lg hover:bg-alien-space-light/30 group cursor-pointer transition-all duration-300"
73+
>
74+
<h3 className="text-alien-gold group-hover:text-alien-green mb-2 font-nasalization font-semibold transition-colors duration-300">
75+
{link.label}
76+
</h3>
77+
<p className="text-sm text-gray-400 group-hover:text-gray-300 leading-relaxed transition-colors duration-300">
78+
{link.desc}
79+
</p>
80+
</Link>
81+
</DropdownMenuItem>
82+
))}
8083
</div>
8184
</DropdownMenuContent>
8285
</DropdownMenu>
@@ -86,38 +89,29 @@ const DesktopNav = () => {
8689
<DropdownMenuTrigger asChild>
8790
<Button
8891
variant="ghost"
89-
className="flex items-center text-alien-gold hover:text-alien-green focus:outline-none group p-2"
92+
className="flex items-center text-alien-gold hover:text-alien-green focus:outline-none group p-2 hover:bg-alien-space-light/20 rounded-lg transition-all duration-300 hover:scale-105"
9093
>
91-
<Globe className="h-5 w-5 group-hover:text-alien-green" />
92-
<ChevronDown
93-
className="ml-1 h-4 w-4 transform transition-transform duration-300 group-data-[state=open]:rotate-180"
94-
/>
94+
<Globe className="h-5 w-5" />
95+
<ChevronDown className="ml-1 h-4 w-4 transform transition-transform duration-300 group-data-[state=open]:rotate-180" />
9596
</Button>
9697
</DropdownMenuTrigger>
9798
<DropdownMenuContent
98-
className="bg-alien-space-dark border border-alien-gold/20 p-2 rounded-md w-[220px] shadow-lg z-[9999]"
99+
className="bg-alien-space-dark/95 backdrop-blur-md border border-alien-gold/30 p-2 rounded-xl w-[240px] shadow-2xl shadow-alien-gold/10 z-[9999] max-h-80 overflow-y-auto"
99100
align="end"
101+
sideOffset={8}
100102
>
101103
<div className="flex flex-col space-y-1">
102-
{[
103-
{ code: 'us', name: 'English', lang: 'en' },
104-
{ code: 'es', name: 'Español', lang: 'es' },
105-
{ code: 'fr', name: 'Français', lang: 'fr' },
106-
{ code: 'cn', name: '汉语 (Hànyǔ)', lang: 'zh' },
107-
{ code: 'in', name: 'हिन्दी (Hindī)', lang: 'hi' },
108-
{ code: 'pt', name: 'Português', lang: 'pt' },
109-
{ code: 'jp', name: '日本語 (Nihongo)', lang: 'ja' },
110-
].map((lang) => (
104+
{languages.map((lang) => (
111105
<DropdownMenuItem
112106
key={lang.code}
113-
className="flex items-center gap-2 text-alien-gold hover:text-alien-green hover:bg-alien-space-light/20 cursor-pointer p-2 rounded"
107+
className="flex items-center gap-3 text-alien-gold hover:text-alien-green hover:bg-alien-space-light/30 cursor-pointer p-3 rounded-lg transition-all duration-300"
114108
>
115109
<img
116110
src={`https://flagcdn.com/w20/${lang.code}.png`}
117111
alt={`${lang.name} flag`}
118-
className="w-5 h-4"
112+
className="w-5 h-4 rounded-sm"
119113
/>
120-
<span>{lang.name}</span>
114+
<span className="font-medium">{lang.name}</span>
121115
</DropdownMenuItem>
122116
))}
123117
</div>

0 commit comments

Comments
 (0)