Skip to content

Commit b7967d3

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Redesigned Academy page
Implemented compact, elegant Hero with circular logo frame and Quantum glow; restored and alphabetized Partner sections with official logos and hover effects; added gradient separators and responsive grid; applied UI/UX polish; fixed Contact page H1 separator and added comic-style chat pointer. X-Lovable-Edit-ID: edt-d6c9c5a6-66e8-4de0-912d-93e17f700586
2 parents 3a541a9 + 1550514 commit b7967d3

2 files changed

Lines changed: 141 additions & 45 deletions

File tree

‎src/pages/Academy.tsx‎

Lines changed: 135 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -49,47 +49,78 @@ const academyModules = [
4949
}
5050
];
5151

52-
// --- PARTNERS POR CATEGORÍAS (ALFABÉTICO) ---
52+
// --- PARTNERS POR CATEGORÍAS (ALFABÉTICO) - 7 CATEGORÍAS ---
5353
const partnerCategories = [
5454
{
5555
label: 'ACADEMY PARTNERS',
5656
partners: [
57-
{ name: "Academia", url: "https://www.academia.edu/", logo: "Academia.svg" },
58-
{ name: "Coursera", url: "https://www.coursera.org/", logo: "Coursera.svg" },
59-
{ name: "UNESCO", url: "https://www.unesco.org/", logo: "UnescoLogo.svg" }
57+
{ name: "Academia", url: "https://www.academia.edu/", logo: "/lovable-uploads/Academy/Academia.svg" },
58+
{ name: "AulaFacil", url: "https://www.aulafacil.com/", logo: "/lovable-uploads/Academy/AulaFacil.png" },
59+
{ name: "Coursera", url: "https://www.coursera.org/", logo: "https://upload.wikimedia.org/wikipedia/commons/9/97/Coursera-Logo_600x600.svg" },
60+
{ name: "Cursa", url: "https://cursa.app/", logo: "/lovable-uploads/Academy/Cursa.webp" },
61+
{ name: "edX", url: "https://www.edx.org/", logo: "/lovable-uploads/Academy/edX.png" },
62+
{ name: "GrowGoogle", url: "https://grow.google/", logo: "/lovable-uploads/Academy/GrowGoogle.png" },
63+
{ name: "Hotmart", url: "https://www.hotmart.com/", logo: "/lovable-uploads/Academy/Hotmart.png" },
64+
{ name: "MasterClass", url: "https://www.masterclass.com/", logo: "/lovable-uploads/Academy/MasterClass.jpeg" },
65+
{ name: "Mooc", url: "https://www.mooc.org/", logo: "/lovable-uploads/Academy/Mooc.png" },
66+
{ name: "SkillShare", url: "https://www.skillshare.com/", logo: "/lovable-uploads/Academy/SkillShare.jpeg" },
67+
{ name: "Udacity", url: "https://www.udacity.com/", logo: "/lovable-uploads/Academy/Udacity.svg" },
68+
{ name: "UNED", url: "https://www.uned.es/", logo: "/lovable-uploads/Academy/UNED.png" }
69+
]
70+
},
71+
{
72+
label: 'CASHFLOW',
73+
partners: [
74+
{ name: "Azrael Codex", url: "https://www.bitget.com/", logo: "/lovable-uploads/Clubs/Bitget.png" },
75+
{ name: "Predik", url: "https://predik.io/", logo: "https://predik.io/assets/images/logo-predik.svg" }
6076
]
6177
},
6278
{
6379
label: 'DATAFLOW',
6480
partners: [
65-
{ name: "Alchemy", url: "https://www.alchemy.com/", logo: "Alchemy.png" },
66-
{ name: "Bitcoin", url: "https://bitcoin.org", logo: "Bitcoin.svg" }
81+
{ name: "Alchemy", url: "https://www.alchemy.com/", logo: "/lovable-uploads/Academy/Alchemy.png" },
82+
{ name: "HackMD", url: "https://hackmd.io/", logo: "/lovable-uploads/Academy/HackMD.svg" },
83+
{ name: "HackerRank", url: "https://www.hackerrank.com/", logo: "/lovable-uploads/Academy/HackerRank.svg" }
6784
]
6885
},
6986
{
7087
label: 'ECOFLOW',
7188
partners: [
72-
{ name: "Ecology", url: "https://www.ecology.org/", logo: "Ecology.png" }
89+
{ name: "ClimateReanalyzer", url: "https://climatereanalyzer.org/", logo: "/lovable-uploads/Academy/ClimateReanalyzer.svg" },
90+
{ name: "OEGlobal", url: "https://www.oeglobal.org/", logo: "/lovable-uploads/Academy/OEGlobal.jpeg" },
91+
{ name: "OpenUpEd", url: "https://www.openuped.eu/", logo: "/lovable-uploads/Academy/OpenUpEd.jpeg" }
7392
]
7493
},
7594
{
7695
label: 'GAMEFLOW',
7796
partners: [
78-
{ name: "GameTheory", url: "https://plato.stanford.edu/entries/game-theory/", logo: "GameTheory.png" }
97+
{ name: "Explore", url: "https://explore.org/", logo: "/lovable-uploads/Academy/Explore.png" },
98+
{ name: "Unity Learn", url: "https://learn.unity.com/", logo: "/lovable-uploads/Academy/UnityLearn.svg" }
7999
]
80100
},
81101
{
82102
label: 'HEALTHFLOW',
83103
partners: [
84-
{ name: "Yazio", url: "https://www.yazio.com/", logo: "Yazio.png" }
104+
{ name: "Meslo Ltd", url: "https://meslo.com/", logo: "https://meslo.com/logo.svg" },
105+
{ name: "Motus DAO", url: "https://motusdao.io/", logo: "https://motusdao.io/logo.svg" },
106+
{ name: "My DNA Bank", url: "https://mydnabank.com/", logo: "https://mydnabank.com/logo.png" },
107+
{ name: "Proton", url: "https://proton.me/", logo: "https://upload.wikimedia.org/wikipedia/commons/4/4a/Proton_Technologies_AG_logo.svg" },
108+
{ name: "Yazio", url: "https://www.yazio.com/", logo: "https://upload.wikimedia.org/wikipedia/commons/5/5c/YAZIO_Logo.svg" }
85109
]
86110
},
87111
{
88112
label: 'SPACEFLOW',
89113
partners: [
90-
{ name: "ESA", url: "https://www.esa.int/", logo: "ESA.svg" },
91-
{ name: "NASA Eyes", url: "https://eyes.nasa.gov/", logo: "NASA_logo.svg" },
92-
{ name: "Virgo", url: "https://www.virgo-gw.eu/", logo: "VirgoLogo.svg" }
114+
{ name: "CERN", url: "https://home.cern/", logo: "https://upload.wikimedia.org/wikipedia/en/a/ae/CERN_logo.svg" },
115+
{ name: "ESA", url: "https://www.esa.int/", logo: "/lovable-uploads/Academy/ESA.svg" },
116+
{ name: "KAGRA", url: "https://gwcenter.icrr.u-tokyo.ac.jp/en/", logo: "/lovable-uploads/Academy/KAGRA.svg" },
117+
{ name: "LIGO", url: "https://www.ligo.org/", logo: "/lovable-uploads/Academy/LIGO.png" },
118+
{ name: "LSC", url: "https://www.ligo.org/", logo: "/lovable-uploads/Academy/LSC.png" },
119+
{ name: "NASA", url: "https://www.nasa.gov/", logo: "https://upload.wikimedia.org/wikipedia/commons/e/e5/NASA_logo.svg" },
120+
{ name: "SpaceX", url: "https://www.spacex.com/", logo: "https://upload.wikimedia.org/wikipedia/commons/2/2e/SpaceX_logo_black.svg" },
121+
{ name: "UNESCO", url: "https://www.unesco.org/", logo: "/lovable-uploads/Academy/Unesco.svg" },
122+
{ name: "UNSSC", url: "https://www.unssc.org/", logo: "/lovable-uploads/Academy/UNSSC.png" },
123+
{ name: "Virgo", url: "https://www.virgo-gw.eu/", logo: "/lovable-uploads/Academy/Virgo.svg" }
93124
]
94125
}
95126
];
@@ -100,43 +131,90 @@ const Academy = () => {
100131
return (
101132
<div className="min-h-screen bg-transparent text-white font-exo pb-32">
102133

103-
{/* 1. HERO ORIGINAL (RESTAURADO) */}
104-
<header className="pt-16 pb-20 text-center px-4">
105-
<motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} className="w-24 h-24 mx-auto mb-8 relative">
106-
<div className="absolute inset-0 bg-alien-gold/10 blur-3xl rounded-full" />
107-
<img src="/lovable-uploads/AcademyLogo.png" alt="Logo" className="w-full h-full object-contain relative z-10 drop-shadow-[0_0_20px_rgba(212,175,55,0.5)]" />
134+
{/* ═══════════════════════════════════════════════════════════════════
135+
1. HERO HEADER - 23rd Jan Restoration (Quantum Glow)
136+
═══════════════════════════════════════════════════════════════════ */}
137+
<header className="pt-16 pb-20 text-center px-4 relative">
138+
{/* Multi-layer quantum glow background */}
139+
<div className="absolute inset-0 overflow-hidden pointer-events-none">
140+
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-gradient-radial from-alien-gold/15 via-alien-gold/5 to-transparent rounded-full blur-[80px] animate-pulse" />
141+
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[300px] bg-gradient-radial from-alien-green/12 via-alien-green/3 to-transparent rounded-full blur-[60px] animate-pulse" style={{ animationDelay: '1s' }} />
142+
</div>
143+
144+
{/* Double-ring circular frame with Quantum Glow */}
145+
<motion.div
146+
initial={{ scale: 0, rotate: -180 }}
147+
animate={{ scale: 1, rotate: 0 }}
148+
transition={{ type: 'spring', stiffness: 120, damping: 15 }}
149+
className="w-28 h-28 md:w-32 md:h-32 mx-auto mb-10 relative"
150+
>
151+
{/* Outer pulsating ring */}
152+
<div className="absolute inset-0 rounded-full border-2 border-alien-gold/40 animate-pulse shadow-[0_0_40px_rgba(212,175,55,0.3)]" />
153+
{/* Inner ring with depth */}
154+
<div className="absolute inset-2 rounded-full border border-alien-green/30 bg-black/60 backdrop-blur-md shadow-[inset_0_0_20px_rgba(57,255,20,0.1)]" />
155+
{/* Logo */}
156+
<img
157+
src="/lovable-uploads/AcademyLogo.png"
158+
alt="Academy Logo"
159+
className="w-full h-full object-contain relative z-10 p-4 drop-shadow-[0_0_25px_rgba(212,175,55,0.6)]"
160+
/>
108161
</motion.div>
109162

110-
<h1 className="text-6xl md:text-8xl font-nasalization mb-8 tracking-widest text-[#39FF14] drop-shadow-[0_0_15px_rgba(212,175,55,0.7)] uppercase">
111-
Academy
112-
</h1>
163+
{/* Title with Nasalization + green/gold gradient */}
164+
<motion.h1
165+
initial={{ opacity: 0, y: 20 }}
166+
animate={{ opacity: 1, y: 0 }}
167+
transition={{ delay: 0.3, duration: 0.6 }}
168+
className="text-5xl md:text-7xl lg:text-8xl font-nasalization mb-8 tracking-widest uppercase"
169+
>
170+
<span className="bg-gradient-to-r from-alien-green via-alien-gold to-alien-green bg-clip-text text-transparent drop-shadow-[0_0_20px_rgba(57,255,20,0.5)] animate-pulse">
171+
Academy
172+
</span>
173+
</motion.h1>
113174

114-
<p className="max-w-3xl mx-auto text-alien-gold italic text-base md:text-lg mb-10 leading-relaxed opacity-90">
175+
{/* Subtitle/Quote - italicized, wide-spaced */}
176+
<motion.p
177+
initial={{ opacity: 0 }}
178+
animate={{ opacity: 1 }}
179+
transition={{ delay: 0.5, duration: 0.8 }}
180+
className="max-w-3xl mx-auto text-alien-gold/80 italic text-base md:text-lg mb-10 leading-relaxed tracking-wide font-light"
181+
>
115182
"Acquire complete attention capabilities to connect, discover and expand knowledge and skills. Evolve towards an optimal experience with fullness of flow."
116-
</p>
183+
</motion.p>
117184

118-
<div className="inline-flex items-center gap-3 px-6 py-3 rounded-full border border-[#39FF14]/30 bg-[#39FF14]/5 text-[#39FF14] text-[11px] font-mono tracking-[0.3em] uppercase animate-pulse shadow-[0_0_20px_rgba(57,255,20,0.1)]">
185+
{/* CTA Badge */}
186+
<motion.div
187+
initial={{ opacity: 0, scale: 0.9 }}
188+
animate={{ opacity: 1, scale: 1 }}
189+
transition={{ delay: 0.7, duration: 0.5 }}
190+
className="inline-flex items-center gap-3 px-6 py-3 rounded-full border border-alien-green/30 bg-alien-green/5 text-alien-green text-[11px] font-mono tracking-[0.3em] uppercase animate-pulse shadow-[0_0_20px_rgba(57,255,20,0.1)]"
191+
>
119192
<Zap className="w-4 h-4" /> Ready to evolve? Join the decentralized learning revolution
120-
</div>
193+
</motion.div>
121194
</header>
122195

196+
{/* Separator: gradient line */}
197+
<div className="max-w-4xl mx-auto mb-16 px-8">
198+
<div className="h-px bg-gradient-to-r from-transparent via-alien-gold/40 to-transparent" />
199+
</div>
200+
123201
{/* 2. MÓDULOS (GRID HORIZONTAL CON EXPANSIÓN) */}
124202
<div className="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-3 gap-8 mb-28 items-start">
125203
{academyModules.map((module) => (
126204
<motion.div
127205
key={module.id}
128206
layout
129-
className="flex flex-col bg-black/40 backdrop-blur-2xl rounded-[2.5rem] border border-white/10 hover:border-alien-gold/40 transition-all duration-500 shadow-2xl relative overflow-hidden group"
207+
className="flex flex-col bg-black/40 backdrop-blur-2xl rounded-[2.5rem] border border-white/10 hover:border-alien-gold/40 transition-all duration-300 shadow-2xl relative overflow-hidden group hover:scale-[1.01]"
130208
>
131209
<div
132210
onClick={() => setExpandedModule(expandedModule === module.id ? null : module.id)}
133211
className="p-10 cursor-pointer"
134212
>
135213
<div className="flex justify-between items-start mb-6">
136-
<div className="p-4 rounded-2xl bg-white/5 border border-white/10 group-hover:bg-alien-gold/10 group-hover:border-alien-gold/30 transition-all duration-500">
214+
<div className="p-4 rounded-2xl bg-white/5 border border-white/10 group-hover:bg-alien-gold/10 group-hover:border-alien-gold/30 transition-all duration-300">
137215
{module.icon}
138216
</div>
139-
<ChevronDown className={`w-6 h-6 text-alien-gold transition-transform duration-500 ${expandedModule === module.id ? 'rotate-180' : ''}`} />
217+
<ChevronDown className={`w-6 h-6 text-alien-gold transition-transform duration-300 ${expandedModule === module.id ? 'rotate-180' : ''}`} />
140218
</div>
141219

142220
<h3 className="text-3xl font-nasalization mb-4 text-white tracking-tight">{module.title}</h3>
@@ -152,19 +230,19 @@ const Academy = () => {
152230
>
153231
{module.modules.map((sub, i) => (
154232
<div key={i} className="space-y-3">
155-
<h4 className="text-[#39FF14] text-[11px] font-bold tracking-[0.2em] uppercase flex items-center gap-3">
233+
<h4 className="text-alien-green text-[11px] font-bold tracking-[0.2em] uppercase flex items-center gap-3">
156234
<CheckCircle2 className="w-4 h-4 text-alien-gold" /> {sub.name}
157235
</h4>
158236
<ul className="grid grid-cols-1 gap-2 pl-7">
159237
{sub.topics.map((topic, j) => (
160-
<li key={j} className="text-[11px] text-gray-500 hover:text-alien-gold transition-colors leading-relaxed">
238+
<li key={j} className="text-[11px] text-gray-500 hover:text-alien-gold transition-colors duration-300 leading-relaxed">
161239
• {topic}
162240
</li>
163241
))}
164242
</ul>
165243
</div>
166244
))}
167-
<Button className="w-full mt-4 bg-transparent border border-alien-gold/30 text-alien-gold hover:bg-alien-gold hover:text-black font-bold tracking-widest text-[10px] h-12 rounded-xl">
245+
<Button className="w-full mt-4 bg-transparent border border-alien-gold/30 text-alien-gold hover:bg-alien-gold hover:text-black font-bold tracking-widest text-[10px] h-12 rounded-xl transition-all duration-300">
168246
ENTER MODULE
169247
</Button>
170248
</motion.div>
@@ -175,7 +253,7 @@ const Academy = () => {
175253
))}
176254
</div>
177255

178-
{/* 3. MASTER CERTIFICATION (ORIGINAL) */}
256+
{/* 3. MASTER CERTIFICATION */}
179257
<section className="max-w-6xl mx-auto px-6 mb-32">
180258
<div className="relative p-[1px] bg-gradient-to-r from-transparent via-alien-gold/40 to-transparent rounded-[3rem]">
181259
<div className="bg-black/80 backdrop-blur-xl rounded-[2.95rem] p-12 flex flex-col md:flex-row items-center justify-between gap-10 border border-white/5 shadow-2xl">
@@ -188,42 +266,55 @@ const Academy = () => {
188266
<p className="text-alien-gold/70 text-sm italic mt-2 font-medium tracking-wide">On-chain validation of your evolutionary journey through the flow.</p>
189267
</div>
190268
</div>
191-
<Button className="bg-alien-gold text-black font-black px-12 h-14 rounded-full hover:bg-[#39FF14] transition-all uppercase text-[11px] tracking-[0.2em] shadow-xl shadow-alien-gold/20">
269+
<Button className="bg-alien-gold text-black font-black px-12 h-14 rounded-full hover:bg-alien-green transition-all duration-300 uppercase text-[11px] tracking-[0.2em] shadow-xl shadow-alien-gold/20">
192270
MINT CREDENTIAL
193271
</Button>
194272
</div>
195273
</div>
196274
</section>
197275

198-
{/* 4. PARTNERS (FUNCIONALIDAD TOTAL) */}
276+
{/* ═══════════════════════════════════════════════════════════════════
277+
4. PARTNERS - 7 Categories (Alphabetical Order)
278+
═══════════════════════════════════════════════════════════════════ */}
199279
<footer className="max-w-7xl mx-auto px-8">
200-
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-12">
280+
{/* Section Title */}
281+
<div className="text-center mb-12">
282+
<h2 className="text-2xl md:text-3xl font-nasalization text-alien-gold/80 tracking-widest uppercase mb-4">
283+
Partner Ecosystem
284+
</h2>
285+
<div className="h-px w-32 mx-auto bg-gradient-to-r from-transparent via-alien-green/50 to-transparent" />
286+
</div>
287+
288+
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-7 gap-10 md:gap-8">
201289
{partnerCategories.map((cat, i) => (
202-
<div key={i} className="space-y-6">
203-
<h5 className="text-[11px] font-nasalization text-alien-gold tracking-[0.3em] border-b border-white/10 pb-4 uppercase opacity-70">
290+
<div key={i} className="space-y-5">
291+
<h5 className="text-[10px] md:text-[11px] font-nasalization text-alien-gold tracking-[0.25em] border-b border-white/10 pb-3 uppercase opacity-80">
204292
{cat.label}
205293
</h5>
206-
<div className="flex flex-col gap-4">
207-
{cat.partners.sort((a,b) => a.name.localeCompare(b.name)).map((p, j) => (
294+
<div className="flex flex-col gap-3">
295+
{cat.partners.sort((a, b) => a.name.localeCompare(b.name)).map((p, j) => (
208296
<a
209297
key={j}
210298
href={p.url}
211299
target="_blank"
212300
rel="noopener noreferrer"
213-
className="flex items-center gap-3 group"
301+
className="flex items-center gap-3 group hover:scale-[1.01] transition-all duration-300"
214302
>
215-
<div className="w-8 h-8 rounded-xl bg-white/5 p-1.5 border border-white/5 group-hover:border-[#39FF14]/40 group-hover:bg-[#39FF14]/10 transition-all duration-300 flex items-center justify-center overflow-hidden">
303+
<div className="w-9 h-9 md:w-10 md:h-10 rounded-xl bg-white/5 p-1.5 border border-white/10 group-hover:border-alien-green/50 group-hover:bg-alien-green/10 transition-all duration-300 flex items-center justify-center overflow-hidden">
216304
<img
217-
src={`/lovable-uploads/Academy/${p.logo}`}
305+
src={p.logo}
218306
alt={p.name}
219307
className="w-full h-full object-contain grayscale group-hover:grayscale-0 transition-all duration-500 scale-90 group-hover:scale-100"
220-
onError={(e) => { e.currentTarget.style.opacity = '0.2'; }}
308+
onError={(e) => {
309+
e.currentTarget.style.opacity = '0.3';
310+
e.currentTarget.style.filter = 'none';
311+
}}
221312
/>
222313
</div>
223-
<span className="text-[12px] text-gray-500 group-hover:text-white transition-colors tracking-tight font-medium">
314+
<span className="text-[11px] md:text-[12px] text-gray-500 group-hover:text-white transition-colors duration-300 tracking-tight font-medium truncate max-w-[100px]">
224315
{p.name}
225316
</span>
226-
<ExternalLink className="w-2.5 h-2.5 text-white/0 group-hover:text-[#39FF14] transition-all" />
317+
<ExternalLink className="w-2.5 h-2.5 text-transparent group-hover:text-alien-green transition-all duration-300 flex-shrink-0" />
227318
</a>
228319
))}
229320
</div>

0 commit comments

Comments
 (0)