Skip to content

Commit 1a161fa

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Add animations and classify partners
Enhance About page with interactive animations and parallax effects; complete CoNetWorKing partners classification into Academy and Clubs with visual separation; update crypto price widget with new coin IDs.
1 parent e2eab0c commit 1a161fa

File tree

3 files changed

+537
-271
lines changed

3 files changed

+537
-271
lines changed

‎src/components/PriceTicker.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const PriceTicker: React.FC = () => {
3232
locale="es"
3333
dark-mode="true"
3434
outlined="true"
35-
coin-ids="bitcoin,ethereum,tether-gold,binancecoin,solana,near,nexo,polkadot,cardano,cosmos,osmosis,axie-infinity,crypto-com-chain,ronin,polygon-ecosystem-token"
35+
coin-ids="bitcoin,ethereum,tether-gold,binancecoin,zcash,bittensor,solana,litecoin,chainlink,uniswap,story-2,polkadot,aptos,cosmos,near,filecoin,pancakeswap-token,the-open-network,mantle,axie-infinity,tron,pi-network,polygon-ecosystem-token,crypto-com-chain,cardano,ronin,osmosis,bitcoin-cash"
3636
initial-currency="usd"
3737
/>
3838
</div>

‎src/pages/About.tsx‎

Lines changed: 129 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,66 @@ import { Button } from "@/components/ui/button";
33
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
44
import { Link } from "react-router-dom";
55
import { GraduationCap, Users, Trophy, Shield, Zap, Globe, Leaf } from "lucide-react";
6+
import { motion } from "framer-motion";
7+
import AnimatedText from "@/components/AnimatedText";
68
const About: React.FC = () => {
79
return <div className="relative flex flex-col flex-1 min-h-screen">
810

911
{/* Main content */}
1012
<main className="relative z-10 flex-grow container mx-auto px-4 pt-8 pb-16">
1113
<div className="max-w-6xl mx-auto">
1214
{/* Hero section with improved styling */}
13-
<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+
<motion.div
16+
className="text-center mb-16"
17+
initial={{ opacity: 0, y: 50 }}
18+
animate={{ opacity: 1, y: 0 }}
19+
transition={{ duration: 0.8 }}
20+
>
21+
<motion.div
22+
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"
23+
whileHover={{ scale: 1.1, rotate: 360 }}
24+
transition={{ duration: 0.6 }}
25+
>
1526
<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">
27+
</motion.div>
28+
<AnimatedText
29+
className="text-4xl md:text-5xl font-bold mb-6 font-nasalization text-glow leading-tight text-alien-green"
30+
initial={{ opacity: 0, y: 30 }}
31+
animate={{ opacity: 1, y: 0 }}
32+
transition={{ duration: 0.8, delay: 0.2 }}
33+
>
1834
About Us
19-
</h1>
20-
<Card className="bg-alien-space-dark/80 backdrop-blur-lg border-alien-gold/30 shadow-2xl rounded-3xl">
21-
<CardHeader className="pb-4">
22-
<CardTitle className="font-bold mb-6 font-nasalization text-glow leading-tight text-alien-green md:text-5xl text-3xl">
23-
We offer INNOVATIVE SOLUTIONS with cutting-edge technologies
24-
</CardTitle>
25-
</CardHeader>
26-
<CardContent>
27-
<h2 className="md:text-2xl text-alien-green mb-8 font-[Exo] max-w-4xl mx-auto leading-relaxed text-lg">
28-
Improving Energy Efficiency and Environmental Sustainability, managing to professionally improve work flows and processes, this is WorkFlow.
29-
</h2>
30-
</CardContent>
31-
</Card>
32-
</div>
35+
</AnimatedText>
36+
<motion.div
37+
initial={{ opacity: 0, scale: 0.9 }}
38+
animate={{ opacity: 1, scale: 1 }}
39+
transition={{ duration: 0.6, delay: 0.4 }}
40+
>
41+
<Card className="bg-alien-space-dark/80 backdrop-blur-lg border-alien-gold/30 shadow-2xl rounded-3xl hover:shadow-alien-gold/30 transition-all duration-500">
42+
<CardHeader className="pb-4">
43+
<CardTitle className="font-bold mb-6 font-nasalization text-glow leading-tight text-alien-green md:text-5xl text-3xl">
44+
We offer INNOVATIVE SOLUTIONS with cutting-edge technologies
45+
</CardTitle>
46+
</CardHeader>
47+
<CardContent>
48+
<h2 className="md:text-2xl text-alien-green mb-8 font-[Exo] max-w-4xl mx-auto leading-relaxed text-lg">
49+
Improving Energy Efficiency and Environmental Sustainability, managing to professionally improve work flows and processes, this is WorkFlow.
50+
</h2>
51+
</CardContent>
52+
</Card>
53+
</motion.div>
54+
</motion.div>
3355

3456
<div className="space-y-12 text-gray-200 font-[Exo]">
3557
{/* Web technologies section with enhanced design */}
36-
<Card className="bg-alien-space-dark/80 backdrop-blur-lg border-alien-gold/30 shadow-2xl">
37-
<CardContent className="p-8">
58+
<motion.div
59+
initial={{ opacity: 0, x: -50 }}
60+
whileInView={{ opacity: 1, x: 0 }}
61+
viewport={{ once: true, amount: 0.3 }}
62+
transition={{ duration: 0.8 }}
63+
>
64+
<Card className="bg-alien-space-dark/80 backdrop-blur-lg border-alien-gold/30 shadow-2xl hover:border-alien-gold/50 transition-all duration-500">
65+
<CardContent className="p-8">
3866
<div className="space-y-8">
3967
<div className="text-center">
4068
<h3 className="text-3xl font-semibold mb-2 font-nasalization text-glow text-alien-green">
@@ -69,65 +97,92 @@ const About: React.FC = () => {
6997
</div>
7098
</CardContent>
7199
</Card>
100+
</motion.div>
72101

73102
{/* Four pillars section with improved grid and cards */}
74-
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
75-
<Card className="bg-alien-space-dark/80 backdrop-blur-lg border-alien-gold/30 shadow-xl hover:border-alien-gold/50 transition-all duration-300 hover:transform hover:scale-105">
76-
<CardHeader className="pb-3">
77-
<CardTitle className="text-2xl font-semibold font-nasalization text-glow flex items-center gap-3 text-alien-green">
78-
<Shield className="h-8 w-8" />
79-
1st Pillar
80-
</CardTitle>
81-
</CardHeader>
82-
<CardContent>
83-
<p className="leading-relaxed">
84-
We are committed to providing personalized solutions that address current challenges and needs.
85-
</p>
86-
</CardContent>
87-
</Card>
103+
<motion.div
104+
className="grid grid-cols-1 md:grid-cols-2 gap-6"
105+
initial={{ opacity: 0, y: 50 }}
106+
whileInView={{ opacity: 1, y: 0 }}
107+
viewport={{ once: true, amount: 0.2 }}
108+
transition={{ duration: 0.8, staggerChildren: 0.2 }}
109+
>
110+
<motion.div
111+
whileHover={{ scale: 1.05, rotateY: 5 }}
112+
transition={{ duration: 0.3 }}
113+
>
114+
<Card className="bg-alien-space-dark/80 backdrop-blur-lg border-alien-gold/30 shadow-xl hover:border-alien-gold/50 transition-all duration-300 h-full">
115+
<CardHeader className="pb-3">
116+
<CardTitle className="text-2xl font-semibold font-nasalization text-glow flex items-center gap-3 text-alien-green">
117+
<Shield className="h-8 w-8" />
118+
1st Pillar
119+
</CardTitle>
120+
</CardHeader>
121+
<CardContent>
122+
<p className="leading-relaxed">
123+
We are committed to providing personalized solutions that address current challenges and needs.
124+
</p>
125+
</CardContent>
126+
</Card>
127+
</motion.div>
88128

89-
<Card className="bg-alien-space-dark/80 backdrop-blur-lg border-alien-green/30 shadow-xl hover:border-alien-green/50 transition-all duration-300 hover:transform hover:scale-105">
90-
<CardHeader className="pb-3">
91-
<CardTitle className="text-2xl font-semibold text-alien-green font-nasalization flex items-center gap-3">
92-
<Zap className="h-8 w-8" />
93-
2nd Pillar
94-
</CardTitle>
95-
</CardHeader>
96-
<CardContent>
97-
<p className="leading-relaxed">
98-
Greater security by being able to trust the management of data and transactions thanks to the use of cryptography, blockchain, and quantum computing.
99-
</p>
100-
</CardContent>
101-
</Card>
129+
<motion.div
130+
whileHover={{ scale: 1.05, rotateY: -5 }}
131+
transition={{ duration: 0.3 }}
132+
>
133+
<Card className="bg-alien-space-dark/80 backdrop-blur-lg border-alien-green/30 shadow-xl hover:border-alien-green/50 transition-all duration-300 h-full">
134+
<CardHeader className="pb-3">
135+
<CardTitle className="text-2xl font-semibold text-alien-green font-nasalization flex items-center gap-3">
136+
<Zap className="h-8 w-8" />
137+
2nd Pillar
138+
</CardTitle>
139+
</CardHeader>
140+
<CardContent>
141+
<p className="leading-relaxed">
142+
Greater security by being able to trust the management of data and transactions thanks to the use of cryptography, blockchain, and quantum computing.
143+
</p>
144+
</CardContent>
145+
</Card>
146+
</motion.div>
102147

103-
<Card className="bg-alien-space-dark/80 backdrop-blur-lg border-alien-gold/30 shadow-xl hover:border-alien-gold/50 transition-all duration-300 hover:transform hover:scale-105">
104-
<CardHeader className="pb-3">
105-
<CardTitle className="text-2xl font-semibold font-nasalization text-glow flex items-center gap-3 text-alien-green">
106-
<Globe className="h-8 w-8" />
107-
3rd Pillar
108-
</CardTitle>
109-
</CardHeader>
110-
<CardContent>
111-
<p className="leading-relaxed">
112-
Improvement in decision making thanks to advanced data analysis and the application of artificial intelligence, raising awareness about gestal consciousness, generating synergies, and more.
113-
</p>
114-
</CardContent>
115-
</Card>
148+
<motion.div
149+
whileHover={{ scale: 1.05, rotateY: 5 }}
150+
transition={{ duration: 0.3 }}
151+
>
152+
<Card className="bg-alien-space-dark/80 backdrop-blur-lg border-alien-gold/30 shadow-xl hover:border-alien-gold/50 transition-all duration-300 h-full">
153+
<CardHeader className="pb-3">
154+
<CardTitle className="text-2xl font-semibold font-nasalization text-glow flex items-center gap-3 text-alien-green">
155+
<Globe className="h-8 w-8" />
156+
3rd Pillar
157+
</CardTitle>
158+
</CardHeader>
159+
<CardContent>
160+
<p className="leading-relaxed">
161+
Improvement in decision making thanks to advanced data analysis and the application of artificial intelligence, raising awareness about gestal consciousness, generating synergies, and more.
162+
</p>
163+
</CardContent>
164+
</Card>
165+
</motion.div>
116166

117-
<Card className="bg-alien-space-dark/80 backdrop-blur-lg border-alien-green/30 shadow-xl hover:border-alien-green/50 transition-all duration-300 hover:transform hover:scale-105">
118-
<CardHeader className="pb-3">
119-
<CardTitle className="text-2xl font-semibold text-alien-green font-nasalization flex items-center gap-3">
120-
<Leaf className="h-8 w-8" />
121-
4th Pillar
122-
</CardTitle>
123-
</CardHeader>
124-
<CardContent>
125-
<p className="leading-relaxed">
126-
Optimization of WorkFlow (processes and work flows) promoting energy efficiency and environmental sustainability, in addition to adding value and reducing costs.
127-
</p>
128-
</CardContent>
129-
</Card>
130-
</div>
167+
<motion.div
168+
whileHover={{ scale: 1.05, rotateY: -5 }}
169+
transition={{ duration: 0.3 }}
170+
>
171+
<Card className="bg-alien-space-dark/80 backdrop-blur-lg border-alien-green/30 shadow-xl hover:border-alien-green/50 transition-all duration-300 h-full">
172+
<CardHeader className="pb-3">
173+
<CardTitle className="text-2xl font-semibold text-alien-green font-nasalization flex items-center gap-3">
174+
<Leaf className="h-8 w-8" />
175+
4th Pillar
176+
</CardTitle>
177+
</CardHeader>
178+
<CardContent>
179+
<p className="leading-relaxed">
180+
Optimization of WorkFlow (processes and work flows) promoting energy efficiency and environmental sustainability, in addition to adding value and reducing costs.
181+
</p>
182+
</CardContent>
183+
</Card>
184+
</motion.div>
185+
</motion.div>
131186

132187
{/* Mission and Values section */}
133188
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">

0 commit comments

Comments
 (0)