Skip to content

Commit ab98811

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Visual edit in Lovable
Edited UI in Lovable
1 parent 93cc1b1 commit ab98811

File tree

1 file changed

+57
-143
lines changed

1 file changed

+57
-143
lines changed

‎src/pages/AlienTrip.tsx‎

Lines changed: 57 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,52 @@
1-
21
import React from 'react';
32
import StarBackground from '@/components/StarBackground';
43
import { Rocket, Star, Clock, ScrollText, BookOpen, PieChart } from 'lucide-react';
54
import { Button } from '@/components/ui/button';
65
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
7-
86
const AlienTrip: React.FC = () => {
97
const roadmapEvents = [{
108
quarter: "Q3 2025",
119
title: "Genesis Launch",
1210
description: "Initial deployment of AlienFlowSpace DAO with core governance and token mechanics.",
13-
details: [
14-
"Deploy DApp and integrate Telegram Mini App for user accessibility",
15-
"Establish presence on key platforms",
16-
"Launch Social Networks"
17-
],
11+
details: ["Deploy DApp and integrate Telegram Mini App for user accessibility", "Establish presence on key platforms", "Launch Social Networks"],
1812
completed: true,
1913
icon: <Rocket className="h-5 w-5" />
2014
}, {
2115
quarter: "Q4 2025",
2216
title: "Ecosystem Integration Phase I",
2317
description: "First wave of ecosystem partners onboarded and interconnected within the network.",
24-
details: [
25-
"Collaborate with organizations focused on BioFi, DeFi, DePin, DeSci, IPFS, QFS, ReFi, RWA, SocialFi and TradFi",
26-
"Forming Strategic Alliances",
27-
"Address environmental emergencies and Partner with UNESCO to protect land and marine ecosystems",
28-
"Conserve and Expand Natural Heritage"
29-
],
18+
details: ["Collaborate with organizations focused on BioFi, DeFi, DePin, DeSci, IPFS, QFS, ReFi, RWA, SocialFi and TradFi", "Forming Strategic Alliances", "Address environmental emergencies and Partner with UNESCO to protect land and marine ecosystems", "Conserve and Expand Natural Heritage"],
3019
completed: false,
3120
icon: <Star className="h-5 w-5" />
3221
}, {
3322
quarter: "Q1 2026",
3423
title: "Ecosystem Integration Phase II",
3524
description: "Advanced bioecosystem communication and energy efficiency improvements.",
36-
details: [
37-
"Advance Communication Bioecosystem",
38-
"Improve the Endocannabinoid System in biological systems",
39-
"Enhance Energy Efficiency & Explore Entropy Sources",
40-
"Research energy-efficient particles and neutral energy sources"
41-
],
25+
details: ["Advance Communication Bioecosystem", "Improve the Endocannabinoid System in biological systems", "Enhance Energy Efficiency & Explore Entropy Sources", "Research energy-efficient particles and neutral energy sources"],
4226
completed: false,
4327
icon: <Star className="h-5 w-5" />
4428
}, {
4529
quarter: "Q2 2027",
4630
title: "CoNetWorKing Mainnet",
4731
description: "Launch of our distributed networking infrastructure connecting all ecosystems.",
48-
details: [
49-
"Distribute CrypTokens & NFTs",
50-
"Launch airdrops with valuable CrypTokens and exclusive NFTs",
51-
"Utilize tokens for liquidity pools to fund sustainable initiatives"
52-
],
32+
details: ["Distribute CrypTokens & NFTs", "Launch airdrops with valuable CrypTokens and exclusive NFTs", "Utilize tokens for liquidity pools to fund sustainable initiatives"],
5333
completed: false,
5434
icon: <Star className="h-5 w-5" />
5535
}, {
5636
quarter: "Q3 2028",
5737
title: "Cross-Ecosystem Governance",
5838
description: "Implementation of universal governance mechanics for collaborative decision-making.",
59-
details: [
60-
"Deploy cross-chain governance protocols",
61-
"Establish voting mechanisms across ecosystems",
62-
"Create unified decision-making frameworks"
63-
],
39+
details: ["Deploy cross-chain governance protocols", "Establish voting mechanisms across ecosystems", "Create unified decision-making frameworks"],
6440
completed: false,
6541
icon: <Star className="h-5 w-5" />
6642
}, {
6743
quarter: "Q1 2030",
6844
title: "Interplanetary Expansion",
6945
description: "Extension of AlienFlowSpace DAO to additional layer 1 blockchains and ecosystems.",
70-
details: [
71-
"Multi-chain integration across major blockchains",
72-
"Quantum-resistant infrastructure deployment",
73-
"Cosmic governance expansion"
74-
],
46+
details: ["Multi-chain integration across major blockchains", "Quantum-resistant infrastructure deployment", "Cosmic governance expansion"],
7547
completed: false,
7648
icon: <Star className="h-5 w-5" />
7749
}];
78-
7950
const tokenomics = [{
8051
name: "Community Rewards",
8152
value: 15,
@@ -101,24 +72,21 @@ const AlienTrip: React.FC = () => {
10172
value: 10,
10273
color: "#E91E63"
10374
}];
104-
105-
return (
106-
<div className="relative flex flex col flex-1">
75+
return <div className="relative flex flex col flex-1">
10776
{/* Cosmic microwave background radiation */}
108-
<div
109-
className="fixed inset-0 pointer-events-none"
110-
style={{
111-
backgroundImage: `url('/lovable-uploads/74c23ca3-be80-46d6-9817-d6a5cde81736.png')`,
112-
backgroundSize: 'cover',
113-
backgroundPosition: 'center',
114-
backgroundRepeat: 'no-repeat',
115-
opacity: 0.7,
116-
zIndex: -30
117-
}}
118-
/>
77+
<div className="fixed inset-0 pointer-events-none" style={{
78+
backgroundImage: `url('/lovable-uploads/74c23ca3-be80-46d6-9817-d6a5cde81736.png')`,
79+
backgroundSize: 'cover',
80+
backgroundPosition: 'center',
81+
backgroundRepeat: 'no-repeat',
82+
opacity: 0.7,
83+
zIndex: -30
84+
}} />
11985

12086
{/* Star background effect */}
121-
<div className="fixed inset-0 pointer-events-none" style={{ zIndex: -20 }}>
87+
<div className="fixed inset-0 pointer-events-none" style={{
88+
zIndex: -20
89+
}}>
12290
<StarBackground />
12391
</div>
12492

@@ -136,21 +104,15 @@ const AlienTrip: React.FC = () => {
136104
<p className="text-lg text-gray-300 font-[Exo] mb-4">
137105
Explore our cosmic journey through the knowledge skills multiverse as we build the next generation of decentralized collaboration together.
138106
</p>
139-
<p className="text-alien-green font-[Exo] font-semibold">
140-
Join us to enjoy the advantages, benefits and profits of the future ecosystem.
141-
</p>
107+
<p className="text-alien-green font-[Exo] font-semibold">Join us to enjoy the advantages, benefits and profits of the ecosystem.</p>
142108
</CardContent>
143109
</Card>
144110

145111
<div className="flex flex-wrap gap-4 mb-8">
146112
<Button className="bg-alien-gold hover:bg-alien-gold-light text-alien-space-dark font-nasalization">
147113
<Rocket className="mr-2 h-5 w-5" /> Join the Journey
148114
</Button>
149-
<Button
150-
variant="outline"
151-
className="border-alien-green text-alien-green hover:bg-alien-green/20 font-nasalization"
152-
onClick={() => window.open("https://alienflowspace.gitbook.io/DAO", "_blank")}
153-
>
115+
<Button variant="outline" className="border-alien-green text-alien-green hover:bg-alien-green/20 font-nasalization" onClick={() => window.open("https://alienflowspace.gitbook.io/DAO", "_blank")}>
154116
<ScrollText className="mr-2 h-5 w-5" /> Look Greenpapers
155117
</Button>
156118
</div>
@@ -166,12 +128,7 @@ const AlienTrip: React.FC = () => {
166128
Access our comprehensive documentation to learn about tokenomics, roadmap, and
167129
technical specifications of the ΔlieπFlΦw $pac€ DAO ecosystem.
168130
</p>
169-
<a
170-
href="https://alienflowspace.gitbook.io/DAO"
171-
target="_blank"
172-
rel="noopener noreferrer"
173-
className="flex items-center text-alien-green hover:text-alien-green-light font-[Exo]"
174-
>
131+
<a href="https://alienflowspace.gitbook.io/DAO" target="_blank" rel="noopener noreferrer" className="flex items-center text-alien-green hover:text-alien-green-light font-[Exo]">
175132
<span>Visit GitBook</span>
176133
<Rocket className="ml-2 h-4 w-4" />
177134
</a>
@@ -204,7 +161,9 @@ const AlienTrip: React.FC = () => {
204161
<span className="text-alien-green font-semibold font-[Exo] text-sm">314.159 / 1,618.034</span>
205162
</div>
206163
<div className="w-full bg-alien-space-dark rounded-full h-2 mb-2">
207-
<div className="bg-alien-gold h-2 rounded-full" style={{ width: '19.4%' }}></div>
164+
<div className="bg-alien-gold h-2 rounded-full" style={{
165+
width: '19.4%'
166+
}}></div>
208167
</div>
209168
</div>
210169
<Button className="w-full bg-alien-gold hover:bg-alien-gold-light text-alien-space-dark font-nasalization text-sm">
@@ -231,29 +190,23 @@ const AlienTrip: React.FC = () => {
231190
<div className="relative w-64 h-64">
232191
<svg viewBox="0 0 100 100" className="w-full h-full">
233192
{tokenomics.reduce((acc, item, i, arr) => {
234-
const startAngle = acc.angle;
235-
const sliceAngle = (item.value / 100) * 360;
236-
const endAngle = startAngle + sliceAngle;
193+
const startAngle = acc.angle;
194+
const sliceAngle = item.value / 100 * 360;
195+
const endAngle = startAngle + sliceAngle;
237196

238-
// Calculate the SVG arc path
239-
const x1 = 50 + 40 * Math.cos(((startAngle - 90) * Math.PI) / 180);
240-
const y1 = 50 + 40 * Math.sin(((startAngle - 90) * Math.PI) / 180);
241-
const x2 = 50 + 40 * Math.cos(((endAngle - 90) * Math.PI) / 180);
242-
const y2 = 50 + 40 * Math.sin(((endAngle - 90) * Math.PI) / 180);
243-
const largeArc = sliceAngle > 180 ? 1 : 0;
244-
245-
acc.paths.push(
246-
<path
247-
key={i}
248-
d={`M 50 50 L ${x1} ${y1} A 40 40 0 ${largeArc} 1 ${x2} ${y2} Z`}
249-
fill={item.color}
250-
stroke="rgba(0,0,0,0.3)"
251-
strokeWidth="0.5"
252-
/>
253-
);
254-
acc.angle = endAngle;
255-
return acc;
256-
}, { paths: [], angle: 0 }).paths}
197+
// Calculate the SVG arc path
198+
const x1 = 50 + 40 * Math.cos((startAngle - 90) * Math.PI / 180);
199+
const y1 = 50 + 40 * Math.sin((startAngle - 90) * Math.PI / 180);
200+
const x2 = 50 + 40 * Math.cos((endAngle - 90) * Math.PI / 180);
201+
const y2 = 50 + 40 * Math.sin((endAngle - 90) * Math.PI / 180);
202+
const largeArc = sliceAngle > 180 ? 1 : 0;
203+
acc.paths.push(<path key={i} d={`M 50 50 L ${x1} ${y1} A 40 40 0 ${largeArc} 1 ${x2} ${y2} Z`} fill={item.color} stroke="rgba(0,0,0,0.3)" strokeWidth="0.5" />);
204+
acc.angle = endAngle;
205+
return acc;
206+
}, {
207+
paths: [],
208+
angle: 0
209+
}).paths}
257210
</svg>
258211
<div className="absolute inset-0 flex items-center justify-center">
259212
<div className="bg-alien-space-dark/70 rounded-full w-20 h-20 flex items-center justify-center backdrop-blur-sm">
@@ -264,28 +217,20 @@ const AlienTrip: React.FC = () => {
264217

265218
{/* Legend */}
266219
<div className="grid grid-cols-2 gap-4">
267-
{tokenomics.map((item, index) => (
268-
<div key={index} className="flex items-center">
269-
<div
270-
className="w-4 h-4 mr-2"
271-
style={{ backgroundColor: item.color }}
272-
></div>
220+
{tokenomics.map((item, index) => <div key={index} className="flex items-center">
221+
<div className="w-4 h-4 mr-2" style={{
222+
backgroundColor: item.color
223+
}}></div>
273224
<div>
274225
<span className="text-gray-300 font-[Exo]">{item.name}</span>
275226
<span className="ml-2 text-alien-gold font-bold font-[Exo]">{item.value}%</span>
276227
</div>
277-
</div>
278-
))}
228+
</div>)}
279229
</div>
280230
</div>
281231

282232
<div className="text-center mt-8">
283-
<a
284-
href="https://alienflowspace.gitbook.io/DAO"
285-
target="_blank"
286-
rel="noopener noreferrer"
287-
className="text-alien-green hover:text-alien-green-light inline-flex items-center font-[Exo]"
288-
>
233+
<a href="https://alienflowspace.gitbook.io/DAO" target="_blank" rel="noopener noreferrer" className="text-alien-green hover:text-alien-green-light inline-flex items-center font-[Exo]">
289234
View detailed tokenomics <Rocket className="ml-2 h-4 w-4" />
290235
</a>
291236
</div>
@@ -313,12 +258,9 @@ const AlienTrip: React.FC = () => {
313258
<img src="/lovable-uploads/VC.png" alt="Alien UFO" className="w-16 h-16 object-contain animate-bounce" />
314259
</div>
315260

316-
{roadmapEvents.map((event, index) => (
317-
<div key={index} className="relative grid grid-cols-1 md:grid-cols-5 gap-8 mb-16">
261+
{roadmapEvents.map((event, index) => <div key={index} className="relative grid grid-cols-1 md:grid-cols-5 gap-8 mb-16">
318262
<div className={`md:col-span-2 ${index % 2 === 0 ? 'md:text-right order-1' : 'order-1 md:order-3'}`}>
319-
<Card className={`bg-alien-space-dark/80 backdrop-blur-md border-2 ${
320-
event.completed ? 'border-alien-gold/50' : 'border-alien-green/30'
321-
} shadow-xl hover:shadow-2xl transition-all duration-300`}>
263+
<Card className={`bg-alien-space-dark/80 backdrop-blur-md border-2 ${event.completed ? 'border-alien-gold/50' : 'border-alien-green/30'} shadow-xl hover:shadow-2xl transition-all duration-300`}>
322264
<CardHeader className="pb-3">
323265
<CardTitle className="text-2xl font-bold text-alien-gold font-nasalization">
324266
{event.title}
@@ -331,65 +273,39 @@ const AlienTrip: React.FC = () => {
331273
<CardContent>
332274
<p className="text-gray-300 font-[Exo] mb-4">{event.description}</p>
333275
<ul className="space-y-2">
334-
{event.details.map((detail, detailIndex) => (
335-
<li key={detailIndex} className="flex items-start gap-2 text-sm text-gray-300 font-[Exo]">
276+
{event.details.map((detail, detailIndex) => <li key={detailIndex} className="flex items-start gap-2 text-sm text-gray-300 font-[Exo]">
336277
<span className="text-alien-gold mt-1">·</span>
337278
<span>{detail}</span>
338-
</li>
339-
))}
279+
</li>)}
340280
</ul>
341281
</CardContent>
342282
</Card>
343283
</div>
344284

345285
<div className="order-2 flex justify-center">
346286
<div className="relative">
347-
<div className={`w-12 h-12 rounded-full flex items-center justify-center z-10 ${
348-
event.completed
349-
? 'bg-alien-gold'
350-
: 'bg-alien-space-light border-2 border-alien-gold/50'
351-
}`}>
287+
<div className={`w-12 h-12 rounded-full flex items-center justify-center z-10 ${event.completed ? 'bg-alien-gold' : 'bg-alien-space-light border-2 border-alien-gold/50'}`}>
352288
<span className={event.completed ? 'text-alien-space-dark' : 'text-alien-gold'}>
353289
{event.icon}
354290
</span>
355291
</div>
356292

357293
{/* Planetary systems */}
358294
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 -z-10">
359-
<div className={`w-24 h-24 rounded-full border ${
360-
index === 0 ? 'border-blue-300/20' :
361-
index === 1 ? 'border-red-300/20' :
362-
index === 2 ? 'border-green-300/20' :
363-
index === 3 ? 'border-yellow-300/20' :
364-
index === 4 ? 'border-purple-300/20' :
365-
'border-cyan-300/20'
366-
} opacity-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2`}></div>
367-
<div className={`w-20 h-20 rounded-full ${
368-
index === 0 ? 'bg-blue-900/10' :
369-
index === 1 ? 'bg-red-900/10' :
370-
index === 2 ? 'bg-green-900/10' :
371-
index === 3 ? 'bg-yellow-900/10' :
372-
index === 4 ? 'bg-purple-900/10' :
373-
'bg-cyan-900/10'
374-
} absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2`}></div>
295+
<div className={`w-24 h-24 rounded-full border ${index === 0 ? 'border-blue-300/20' : index === 1 ? 'border-red-300/20' : index === 2 ? 'border-green-300/20' : index === 3 ? 'border-yellow-300/20' : index === 4 ? 'border-purple-300/20' : 'border-cyan-300/20'} opacity-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2`}></div>
296+
<div className={`w-20 h-20 rounded-full ${index === 0 ? 'bg-blue-900/10' : index === 1 ? 'bg-red-900/10' : index === 2 ? 'bg-green-900/10' : index === 3 ? 'bg-yellow-900/10' : index === 4 ? 'bg-purple-900/10' : 'bg-cyan-900/10'} absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2`}></div>
375297
</div>
376298
</div>
377299
</div>
378300

379301
<div className={`md:col-span-2 ${index % 2 === 0 ? 'order-3' : 'order-1 md:text-right'}`}>
380302
{/* Empty space for alignment */}
381303
</div>
382-
</div>
383-
))}
304+
</div>)}
384305
</div>
385306

386307
<div className="text-center mt-8">
387-
<a
388-
href="https://alienflowspace.gitbook.io/DAO"
389-
target="_blank"
390-
rel="noopener noreferrer"
391-
className="text-alien-green hover:text-alien-green-light inline-flex items-center font-[Exo]"
392-
>
308+
<a href="https://alienflowspace.gitbook.io/DAO" target="_blank" rel="noopener noreferrer" className="text-alien-green hover:text-alien-green-light inline-flex items-center font-[Exo]">
393309
View complete roadmap <Rocket className="ml-2 h-4 w-4" />
394310
</a>
395311
</div>
@@ -410,8 +326,6 @@ const AlienTrip: React.FC = () => {
410326
</Card>
411327
</div>
412328
</main>
413-
</div>
414-
);
329+
</div>;
415330
};
416-
417-
export default AlienTrip;
331+
export default AlienTrip;

0 commit comments

Comments
 (0)