Skip to content

Commit 652ff11

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Fix font display and update content
1 parent 76b7222 commit 652ff11

File tree

7 files changed

+550
-573
lines changed

7 files changed

+550
-573
lines changed

‎index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,11 @@
1818
<meta name="twitter:site" content="@alien69flow" />
1919
<meta name="twitter:image" content="/lovable-uploads/ALogo.png" />
2020
<!-- Google Fonts: Exo -->
21+
<link rel="preconnect" href="https://fonts.googleapis.com">
22+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
2123
<link href="https://fonts.googleapis.com/css2?family=Exo:wght@400;700&display=swap" rel="stylesheet" />
24+
<!-- Preload Nasalization font -->
25+
<link rel="preload" href="/public/fonts/Nasalization.woff2" as="font" type="font/woff2" crossorigin>
2226
<link rel="stylesheet" href="/src/index.css" />
2327
<link rel="icon" href="/lovable-uploads/ALogo.png" type="image/x-icon" />
2428
</head>

‎src/components/ParticipationSection.tsx‎

Lines changed: 58 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React from 'react';
22
import { motion } from 'framer-motion';
33
import { Button } from '@/components/ui/button';
4-
import { CircleDollarSign, Calendar, MessagesSquare, Users, ShieldCheck, Database, Coins } from 'lucide-react';
4+
import { CircleDollarSign, Calendar, MessagesSquare, Database, Globe } from 'lucide-react';
5+
import { getCurrentChineseYear } from '@/lib/chineseCalendar';
6+
57
const features = [{
68
icon: <CircleDollarSign className="h-6 w-6 text-alien-gold" />,
79
title: "Token Governance",
@@ -15,28 +17,24 @@ const features = [{
1517
title: "Community Forums",
1618
description: "Contribute to ongoing discussions and knowledge sharing in our decentralized forums."
1719
}];
20+
1821
const stats = [{
19-
icon: <Users className="h-8 w-8" />,
20-
value: "10,000+",
21-
label: "DAO Members",
22-
color: "text-alien-gold"
23-
}, {
24-
icon: <ShieldCheck className="h-8 w-8" />,
25-
value: "99.9%",
26-
label: "Protocol Security",
27-
color: "text-alien-green"
22+
value: "195",
23+
label: "Countries - DAO Members",
24+
icon: Globe,
25+
color: "text-alien-green",
26+
planetIcon: true
2827
}, {
29-
icon: <Database className="h-8 w-8" />,
30-
value: "250 TB",
31-
label: "Data Secured",
28+
value: "161 YB",
29+
label: "Data Storage",
30+
icon: Database,
3231
color: "text-alien-gold"
33-
}, {
34-
icon: <Coins className="h-8 w-8" />,
35-
value: "$125M",
36-
label: "Total Value Locked",
37-
color: "text-alien-green"
3832
}];
33+
3934
const ParticipationSection = () => {
35+
const chineseYear = getCurrentChineseYear();
36+
const currentYear = new Date().getFullYear();
37+
4038
return <section id="participate" className="py-20 relative">
4139
<div className="container mx-auto px-4 flex flex-col items-center text-center">
4240
{/* Título */}
@@ -91,9 +89,9 @@ const ParticipationSection = () => {
9189
<Button className="bg-alien-gold hover:bg-alien-gold-light text-alien-space-dark font-medium px-8 py-6 text-lg rounded-full mb-12 font-nasalization">
9290
Connect & Participate
9391
</Button>
94-
{/* Stats Grid - SIEMPRE centrado */}
92+
{/* Stats Grid - MORE TRANSPARENT */}
9593
<div className="flex justify-center mt-12 w-full">
96-
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center max-w-3xl w-full">
94+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-center max-w-2xl w-full">
9795
{stats.map((stat, index) => <motion.div key={index} initial={{
9896
opacity: 0,
9997
y: 20
@@ -105,9 +103,20 @@ const ParticipationSection = () => {
105103
delay: index * 0.1
106104
}} viewport={{
107105
once: true
108-
}} className="text-center">
109-
<div className={`mx-auto mb-4 p-3 rounded-full bg-alien-space-dark w-fit ${stat.color}`}>
110-
{stat.icon}
106+
}} className="bg-alien-space-dark/30 backdrop-blur-sm p-6 rounded-xl border border-alien-gold/20 hover:border-alien-gold/40 transition-all duration-300">
107+
<div className="mx-auto mb-4">
108+
{stat.planetIcon ? (
109+
<div className="h-16 w-16 mx-auto">
110+
<img
111+
src="https://images.unsplash.com/photo-1614730321146-b6fa6a46bcb4?w=150&h=150&fit=crop"
112+
alt="Planet Earth"
113+
className="w-full h-full object-cover rounded-full animate-pulse"
114+
style={{ filter: 'drop-shadow(0 0 12px rgba(34, 197, 94, 0.6))' }}
115+
/>
116+
</div>
117+
) : (
118+
<stat.icon className={`h-16 w-16 ${stat.color} mx-auto`} />
119+
)}
111120
</div>
112121
<motion.div initial={{
113122
scale: 0.8
@@ -122,11 +131,35 @@ const ParticipationSection = () => {
122131
}} className={`text-3xl font-bold mb-2 ${stat.color} font-nasalization`}>
123132
{stat.value}
124133
</motion.div>
125-
<div className="text-gray-300 text-sm">{stat.label}</div>
134+
<div className="text-gray-300 text-sm font-[Exo]">{stat.label}</div>
126135
</motion.div>)}
127136
</div>
128137
</div>
138+
139+
{/* Year Display with Chinese Calendar */}
140+
<motion.div
141+
initial={{ opacity: 0, y: 20 }}
142+
whileInView={{ opacity: 1, y: 0 }}
143+
transition={{ duration: 0.6, delay: 0.4 }}
144+
viewport={{ once: true }}
145+
className="mt-8 bg-alien-space-dark/30 backdrop-blur-sm p-6 rounded-xl border border-alien-gold/20 max-w-md"
146+
>
147+
<div className="flex items-center justify-center gap-4">
148+
<span className="text-4xl" style={{ filter: `drop-shadow(0 0 8px ${chineseYear.color})` }}>
149+
{chineseYear.icon}
150+
</span>
151+
<div className="text-left">
152+
<p className="text-alien-gold font-bold text-xl font-nasalization">
153+
Year {currentYear} / {chineseYear.year}
154+
</p>
155+
<p className="text-sm font-[Exo]" style={{ color: chineseYear.color }}>
156+
{chineseYear.element} {chineseYear.animal}
157+
</p>
158+
</div>
159+
</div>
160+
</motion.div>
129161
</div>
130162
</section>;
131163
};
132-
export default ParticipationSection;
164+
165+
export default ParticipationSection;

‎src/lib/chineseCalendar.ts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
// Chinese Calendar utilities for calculating zodiac year, animal, and element
2+
3+
export interface ChineseYear {
4+
year: number;
5+
animal: string;
6+
element: string;
7+
color: string;
8+
icon: string; // emoji or symbol
9+
}
10+
11+
const animals = [
12+
{ name: 'Rat', icon: '🐀' },
13+
{ name: 'Ox', icon: '🐂' },
14+
{ name: 'Tiger', icon: '🐅' },
15+
{ name: 'Rabbit', icon: '🐇' },
16+
{ name: 'Dragon', icon: '🐉' },
17+
{ name: 'Snake', icon: '🐍' },
18+
{ name: 'Horse', icon: '🐴' },
19+
{ name: 'Goat', icon: '🐐' },
20+
{ name: 'Monkey', icon: '🐵' },
21+
{ name: 'Rooster', icon: '🐓' },
22+
{ name: 'Dog', icon: '🐕' },
23+
{ name: 'Pig', icon: '🐖' }
24+
];
25+
26+
const elements = [
27+
{ name: 'Wood', color: '#22C55E' }, // Green
28+
{ name: 'Fire', color: '#EF4444' }, // Red
29+
{ name: 'Earth', color: '#F59E0B' }, // Orange/Yellow
30+
{ name: 'Metal', color: '#D1D5DB' }, // Gray/Silver
31+
{ name: 'Water', color: '#3B82F6' } // Blue
32+
];
33+
34+
export function getChineseYear(gregorianYear: number): ChineseYear {
35+
// Chinese calendar started in 2697 BCE
36+
const chineseYear = gregorianYear + 2697;
37+
38+
// Calculate animal (12-year cycle)
39+
// 2024 is Year of the Dragon (starting Feb 10, 2024)
40+
// We use a base year of 2024 as Dragon (index 4)
41+
const animalIndex = (gregorianYear - 2024 + 4) % 12;
42+
const animal = animals[animalIndex < 0 ? animalIndex + 12 : animalIndex];
43+
44+
// Calculate element (10-year cycle, 2 years per element)
45+
// 2024 is Wood Dragon
46+
const elementIndex = Math.floor(((gregorianYear - 2024 + 4) % 10) / 2);
47+
const element = elements[elementIndex < 0 ? elementIndex + 5 : elementIndex];
48+
49+
return {
50+
year: chineseYear,
51+
animal: animal.name,
52+
element: element.name,
53+
color: element.color,
54+
icon: animal.icon
55+
};
56+
}
57+
58+
export function getCurrentChineseYear(): ChineseYear {
59+
return getChineseYear(new Date().getFullYear());
60+
}

‎src/pages/About.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@ const About: React.FC = () => {
1111
<div className="max-w-6xl mx-auto">
1212
{/* Hero section with improved styling */}
1313
<div className="text-center mb-16">
14+
<div className="inline-flex items-center justify-center w-20 h-20 bg-alien-gold/20 rounded-full mb-6 border-2 border-alien-gold/40 backdrop-blur-md">
15+
<img src="/lovable-uploads/ALogo.png" alt="About Official Logo" className="h-12 w-12 object-contain" />
16+
</div>
17+
<h1 className="text-4xl md:text-5xl font-bold mb-6 font-nasalization text-glow leading-tight text-alien-green">
18+
About Us
19+
</h1>
1420
<Card className="bg-alien-space-dark/80 backdrop-blur-lg border-alien-gold/30 shadow-2xl rounded-3xl">
1521
<CardHeader className="pb-4">
1622
<CardTitle className="font-bold mb-6 font-nasalization text-glow leading-tight text-alien-green md:text-5xl text-3xl">

‎src/pages/Academy.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -284,8 +284,7 @@ const Academy: React.FC = () => {
284284
}];
285285
return <div className="relative flex flex-col flex-1">
286286
{/* Academy Background Image */}
287-
288-
<main className="relative z-10 flex-grow container mx-auto px-4 pt-4 pb-16">
287+
<main className="relative z-10 flex-grow container mx-auto px-4 pt-20 pb-16">
289288
<div className="max-w-6xl mx-auto">
290289
<div className="text-center mb-12">
291290
<div className="inline-flex items-center justify-center w-20 h-20 bg-alien-gold/20 rounded-full mb-6 border-2 border-alien-gold/40 backdrop-blur-md">

0 commit comments

Comments
 (0)