Skip to content

Commit 7708eef

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Visual edit in Lovable
Edited UI in Lovable
1 parent b5bdd70 commit 7708eef

File tree

1 file changed

+97
-128
lines changed

1 file changed

+97
-128
lines changed

‎src/pages/AlienTrip.tsx‎

Lines changed: 97 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,70 @@
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 { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
7-
86
const AlienTrip: React.FC = () => {
9-
const roadmapEvents = [
10-
{
11-
quarter: "Q3 2025",
12-
title: "Genesis Launch",
13-
description: "Initial deployment of AlienFlowSpace DAO with core governance and token mechanics.",
14-
completed: true,
15-
icon: <Rocket className="h-5 w-5" />
16-
},
17-
{
18-
quarter: "Q4 2025",
19-
title: "Ecosystem Integration Phase I",
20-
description: "First wave of ecosystem partners onboarded and interconnected within the network.",
21-
completed: false,
22-
icon: <Star className="h-5 w-5" />
23-
},
24-
{
25-
quarter: "Q1 2026",
26-
title: "CoNetWorKing Mainnet",
27-
description: "Launch of our distributed networking infrastructure connecting all ecosystems.",
28-
completed: false,
29-
icon: <Star className="h-5 w-5" />
30-
},
31-
{
32-
quarter: "Q2 2026",
33-
title: "Cross-Ecosystem Governance",
34-
description: "Implementation of universal governance mechanics for collaborative decision-making.",
35-
completed: false,
36-
icon: <Star className="h-5 w-5" />
37-
},
38-
{
39-
quarter: "Q3 2026",
40-
title: "Interplanetary Expansion",
41-
description: "Extension of AlienFlowSpace DAO to additional layer 1 blockchains and ecosystems.",
42-
completed: false,
43-
icon: <Star className="h-5 w-5" />
44-
}
45-
];
46-
47-
const tokenomics = [
48-
{ name: "Community Rewards", value: 15, color: "#4CAF50" },
49-
{ name: "Development Reserve Funds", value: 35, color: "#2196F3" },
50-
{ name: "Liquidity Pools", value: 20, color: "#FFC107" },
51-
{ name: "Founders Teams", value: 10, color: "#9C27B0" },
52-
{ name: "Partners", value: 10, color: "#FF5722" },
53-
{ name: "Marketing", value: 10, color: "#E91E63" }
54-
];
55-
56-
return (
57-
<div className="relative flex flex-col flex-1 bg-alien-space">
7+
const roadmapEvents = [{
8+
quarter: "Q3 2025",
9+
title: "Genesis Launch",
10+
description: "Initial deployment of AlienFlowSpace DAO with core governance and token mechanics.",
11+
completed: true,
12+
icon: <Rocket className="h-5 w-5" />
13+
}, {
14+
quarter: "Q4 2025",
15+
title: "Ecosystem Integration Phase I",
16+
description: "First wave of ecosystem partners onboarded and interconnected within the network.",
17+
completed: false,
18+
icon: <Star className="h-5 w-5" />
19+
}, {
20+
quarter: "Q1 2026",
21+
title: "CoNetWorKing Mainnet",
22+
description: "Launch of our distributed networking infrastructure connecting all ecosystems.",
23+
completed: false,
24+
icon: <Star className="h-5 w-5" />
25+
}, {
26+
quarter: "Q2 2026",
27+
title: "Cross-Ecosystem Governance",
28+
description: "Implementation of universal governance mechanics for collaborative decision-making.",
29+
completed: false,
30+
icon: <Star className="h-5 w-5" />
31+
}, {
32+
quarter: "Q3 2026",
33+
title: "Interplanetary Expansion",
34+
description: "Extension of AlienFlowSpace DAO to additional layer 1 blockchains and ecosystems.",
35+
completed: false,
36+
icon: <Star className="h-5 w-5" />
37+
}];
38+
const tokenomics = [{
39+
name: "Community Rewards",
40+
value: 15,
41+
color: "#4CAF50"
42+
}, {
43+
name: "Development Reserve Funds",
44+
value: 35,
45+
color: "#2196F3"
46+
}, {
47+
name: "Liquidity Pools",
48+
value: 20,
49+
color: "#FFC107"
50+
}, {
51+
name: "Founders Teams",
52+
value: 10,
53+
color: "#9C27B0"
54+
}, {
55+
name: "Partners",
56+
value: 10,
57+
color: "#FF5722"
58+
}, {
59+
name: "Marketing",
60+
value: 10,
61+
color: "#E91E63"
62+
}];
63+
return <div className="relative flex flex-col flex-1 bg-alien-space">
5864
<StarBackground />
59-
<div
60-
className="absolute inset-0 -z-10 bg-cover bg-center bg-no-repeat pointer-events-none"
61-
style={{
62-
backgroundImage: `url('/lovable-uploads/EMWBack.png')`,
63-
}}
64-
>
65+
<div className="absolute inset-0 -z-10 bg-cover bg-center bg-no-repeat pointer-events-none" style={{
66+
backgroundImage: `url('/lovable-uploads/EMWBack.png')`
67+
}}>
6568
<div className="w-full h-full bg-black/50" />
6669
</div>
6770

@@ -70,15 +73,12 @@ const AlienTrip: React.FC = () => {
7073
<div className="grid grid-cols-1 md:grid-cols-2 gap-16 mb-20">
7174
<div>
7275
<h1 className="text-4xl md:text-5xl font-bold text-alien-gold mb-6 font-nasalization">AlienTrip</h1>
73-
<p className="text-xl text-gray-300 mb-8 font-[Exo]">
74-
Explore our cosmic journey through the blockchain multiverse as we build the next generation of decentralized collaboration.
75-
</p>
76+
<p className="text-xl text-gray-300 mb-8 font-[Exo]">Explore our cosmic journey through the knowledge skills multiverse as we build the next generation of decentralized collaboration together, join us to enjoy the advantages, benefits and profits.</p>
7677
<div className="flex flex-wrap gap-4">
7778
<Button className="bg-alien-gold hover:bg-alien-gold-light text-alien-space-dark font-nasalization">
7879
<Rocket className="mr-2 h-5 w-5" /> Join the Journey
7980
</Button>
80-
<Button variant="outline" className="border-alien-green text-alien-green hover:bg-alien-green/20 font-nasalization"
81-
onClick={() => window.open("https://alienflowspace.gitbook.io/DAO", "_blank")}>
81+
<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")}>
8282
<ScrollText className="mr-2 h-5 w-5" /> Look Greenpapers
8383
</Button>
8484
</div>
@@ -93,10 +93,7 @@ const AlienTrip: React.FC = () => {
9393
Access our comprehensive documentation to learn about tokenomics, roadmap, and
9494
technical specifications of the ΔlieπFlΦw $pac€ DAO ecosystem.
9595
</p>
96-
<a href="https://alienflowspace.gitbook.io/DAO"
97-
target="_blank"
98-
rel="noopener noreferrer"
99-
className="flex items-center text-alien-green hover:text-alien-green-light font-[Exo]">
96+
<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]">
10097
<span>Visit GitBook</span>
10198
<Rocket className="ml-2 h-4 w-4" />
10299
</a>
@@ -121,7 +118,9 @@ const AlienTrip: React.FC = () => {
121118
<span className="text-alien-green font-semibold font-[Exo]">314.159 / 1,618.034</span>
122119
</div>
123120
<div className="w-full bg-alien-space-dark rounded-full h-2.5 mb-2">
124-
<div className="bg-alien-gold h-2.5 rounded-full" style={{ width: '72%' }}></div>
121+
<div className="bg-alien-gold h-2.5 rounded-full" style={{
122+
width: '72%'
123+
}}></div>
125124
</div>
126125
</div>
127126
<Button className="w-full bg-alien-gold hover:bg-alien-gold-light text-alien-space-dark font-nasalization">
@@ -144,31 +143,23 @@ const AlienTrip: React.FC = () => {
144143
<div className="relative w-64 h-64">
145144
<svg viewBox="0 0 100 100" className="w-full h-full">
146145
{tokenomics.reduce((acc, item, i, arr) => {
147-
const startAngle = acc.angle;
148-
const sliceAngle = (item.value / 100) * 360;
149-
const endAngle = startAngle + sliceAngle;
150-
151-
// Calculate the SVG arc path
152-
const x1 = 50 + 40 * Math.cos((startAngle - 90) * (Math.PI / 180));
153-
const y1 = 50 + 40 * Math.sin((startAngle - 90) * (Math.PI / 180));
154-
const x2 = 50 + 40 * Math.cos((endAngle - 90) * (Math.PI / 180));
155-
const y2 = 50 + 40 * Math.sin((endAngle - 90) * (Math.PI / 180));
156-
157-
const largeArc = sliceAngle > 180 ? 1 : 0;
158-
159-
acc.paths.push(
160-
<path
161-
key={i}
162-
d={`M 50 50 L ${x1} ${y1} A 40 40 0 ${largeArc} 1 ${x2} ${y2} Z`}
163-
fill={item.color}
164-
stroke="rgba(0,0,0,0.3)"
165-
strokeWidth="0.5"
166-
/>
167-
);
168-
169-
acc.angle = endAngle;
170-
return acc;
171-
}, { paths: [], angle: 0 }).paths}
146+
const startAngle = acc.angle;
147+
const sliceAngle = item.value / 100 * 360;
148+
const endAngle = startAngle + sliceAngle;
149+
150+
// Calculate the SVG arc path
151+
const x1 = 50 + 40 * Math.cos((startAngle - 90) * (Math.PI / 180));
152+
const y1 = 50 + 40 * Math.sin((startAngle - 90) * (Math.PI / 180));
153+
const x2 = 50 + 40 * Math.cos((endAngle - 90) * (Math.PI / 180));
154+
const y2 = 50 + 40 * Math.sin((endAngle - 90) * (Math.PI / 180));
155+
const largeArc = sliceAngle > 180 ? 1 : 0;
156+
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" />);
157+
acc.angle = endAngle;
158+
return acc;
159+
}, {
160+
paths: [],
161+
angle: 0
162+
}).paths}
172163
</svg>
173164
<div className="absolute inset-0 flex items-center justify-center">
174165
<div className="bg-alien-space-dark/70 rounded-full w-20 h-20 flex items-center justify-center backdrop-blur-sm">
@@ -179,25 +170,20 @@ const AlienTrip: React.FC = () => {
179170

180171
{/* Legend */}
181172
<div className="grid grid-cols-2 gap-4">
182-
{tokenomics.map((item, index) => (
183-
<div key={index} className="flex items-center">
184-
<div className="w-4 h-4 mr-2" style={{ backgroundColor: item.color }}></div>
173+
{tokenomics.map((item, index) => <div key={index} className="flex items-center">
174+
<div className="w-4 h-4 mr-2" style={{
175+
backgroundColor: item.color
176+
}}></div>
185177
<div>
186178
<span className="text-gray-300 font-[Exo]">{item.name}</span>
187179
<span className="ml-2 text-alien-gold font-bold font-[Exo]">{item.value}%</span>
188180
</div>
189-
</div>
190-
))}
181+
</div>)}
191182
</div>
192183
</div>
193184

194185
<div className="text-center mt-8">
195-
<a
196-
href="https://alienflowspace.gitbook.io/DAO"
197-
target="_blank"
198-
rel="noopener noreferrer"
199-
className="text-alien-green hover:text-alien-green-light inline-flex items-center font-[Exo]"
200-
>
186+
<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]">
201187
View detailed tokenomics <Rocket className="ml-2 h-4 w-4" />
202188
</a>
203189
</div>
@@ -206,25 +192,18 @@ const AlienTrip: React.FC = () => {
206192
<div className="mb-20">
207193
<div className="text-center mb-12">
208194
<h2 className="text-3xl font-bold text-alien-gold mb-4 font-nasalization">Roadmap</h2>
209-
<p className="text-xl text-gray-300 max-w-3xl mx-auto font-[Exo]">
210-
Our mission to unify the blockchain multiverse follows this strategic path through interstellar space.
211-
</p>
195+
<p className="text-xl text-gray-300 max-w-3xl mx-auto font-[Exo]">Our mission to combine and unify the blockchain (web 3), neural intelligence networks (web 4) and quantum computation (web 5) follows this strategic path through interstellar space time.</p>
212196
</div>
213197

214198
<div className="relative">
215199
{/* UFO traveling through solar systems */}
216200
<div className="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-alien-gold/30"></div>
217201

218202
<div className="absolute left-1/2 transform -translate-x-1/2 top-0 -mt-8">
219-
<img
220-
src="/lovable-uploads/VC.png"
221-
alt="Alien UFO"
222-
className="w-16 h-16 object-contain animate-bounce"
223-
/>
203+
<img src="/lovable-uploads/VC.png" alt="Alien UFO" className="w-16 h-16 object-contain animate-bounce" />
224204
</div>
225205

226-
{roadmapEvents.map((event, index) => (
227-
<div key={index} className="relative grid grid-cols-1 md:grid-cols-5 gap-8 mb-16">
206+
{roadmapEvents.map((event, index) => <div key={index} className="relative grid grid-cols-1 md:grid-cols-5 gap-8 mb-16">
228207
<div className={`md:col-span-2 ${index % 2 === 0 ? 'md:text-right order-1' : 'order-1 md:order-3'}`}>
229208
<h3 className="text-2xl font-bold text-alien-gold mb-2 font-nasalization">{event.title}</h3>
230209
<div className="text-sm text-alien-green mb-2 flex items-center gap-2 justify-start md:justify-end font-[Exo]">
@@ -236,9 +215,7 @@ const AlienTrip: React.FC = () => {
236215

237216
<div className="order-2 flex justify-center">
238217
<div className="relative">
239-
<div className={`w-12 h-12 rounded-full flex items-center justify-center z-10 ${
240-
event.completed ? 'bg-alien-gold' : 'bg-alien-space-light border-2 border-alien-gold/50'
241-
}`}>
218+
<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'}`}>
242219
<span className={event.completed ? 'text-alien-space-dark' : 'text-alien-gold'}>
243220
{event.icon}
244221
</span>
@@ -255,17 +232,11 @@ const AlienTrip: React.FC = () => {
255232
<div className={`md:col-span-2 ${index % 2 === 0 ? 'order-3' : 'order-1 md:text-right'}`}>
256233
{/* Empty space for alignment */}
257234
</div>
258-
</div>
259-
))}
235+
</div>)}
260236
</div>
261237

262238
<div className="text-center mt-8">
263-
<a
264-
href="https://alienflowspace.gitbook.io/DAO"
265-
target="_blank"
266-
rel="noopener noreferrer"
267-
className="text-alien-green hover:text-alien-green-light inline-flex items-center font-[Exo]"
268-
>
239+
<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]">
269240
View complete roadmap <Rocket className="ml-2 h-4 w-4" />
270241
</a>
271242
</div>
@@ -284,8 +255,6 @@ const AlienTrip: React.FC = () => {
284255
</div>
285256
</div>
286257
</main>
287-
</div>
288-
);
258+
</div>;
289259
};
290-
291-
export default AlienTrip;
260+
export default AlienTrip;

0 commit comments

Comments
 (0)