Skip to content

Commit a0ac163

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Refactor AlienTrip and Contact pages
Improve UX/UI design for AlienTrip, update roadmap and ecosystem integration, and fix Contact form layout.
1 parent 26e6511 commit a0ac163

File tree

2 files changed

+153
-77
lines changed

2 files changed

+153
-77
lines changed

‎src/pages/AlienTrip.tsx‎

Lines changed: 136 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
1+
12
import React from 'react';
23
import StarBackground from '@/components/StarBackground';
34
import { Rocket, Star, Clock, ScrollText, BookOpen, PieChart } from 'lucide-react';
45
import { Button } from '@/components/ui/button';
56
import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
7+
68
const AlienTrip: React.FC = () => {
79
const roadmapEvents = [{
810
quarter: "Q3 2025",
911
title: "Genesis Launch",
10-
description: "Initial deployment of AlienFlowSpace DAO with core governance and token mechanics.",
12+
description: "Initial deployment of AlienFlowSpace DAO with core governance and token mechanics. Deploy DApp and integrate Telegram Mini App for user accessibility, establish presence on key platforms, and launch social networks.",
1113
completed: true,
1214
icon: <Rocket className="h-5 w-5" />
1315
}, {
1416
quarter: "Q4 2025",
1517
title: "Ecosystem Integration Phase I",
16-
description: "First wave of ecosystem partners onboarded and interconnected within the network.",
18+
description: "First wave of ecosystem partners onboarded and interconnected within the network. Collaborate with organizations focused on BioFi, DeFi, DePin, DeSci, IPFS, QFS, ReFi, RWA, SocialFi and TradFi, forming strategic alliances.",
1719
completed: false,
1820
icon: <Star className="h-5 w-5" />
1921
}, {
@@ -35,6 +37,7 @@ const AlienTrip: React.FC = () => {
3537
completed: false,
3638
icon: <Star className="h-5 w-5" />
3739
}];
40+
3841
const tokenomics = [{
3942
name: "Community Rewards",
4043
value: 15,
@@ -60,41 +63,62 @@ const AlienTrip: React.FC = () => {
6063
value: 10,
6164
color: "#E91E63"
6265
}];
63-
return <div className="relative flex flex-col flex-1">
66+
67+
return (
68+
<div className="relative flex flex col flex-1">
6469
{/* Cosmic microwave background radiation */}
65-
<div className="fixed inset-0 pointer-events-none" style={{
66-
backgroundImage: `url('/lovable-uploads/74c23ca3-be80-46d6-9817-d6a5cde81736.png')`,
67-
backgroundSize: 'cover',
68-
backgroundPosition: 'center',
69-
backgroundRepeat: 'no-repeat',
70-
opacity: 0.7,
71-
zIndex: -30
72-
}} />
70+
<div
71+
className="fixed inset-0 pointer-events-none"
72+
style={{
73+
backgroundImage: `url('/lovable-uploads/74c23ca3-be80-46d6-9817-d6a5cde81736.png')`,
74+
backgroundSize: 'cover',
75+
backgroundPosition: 'center',
76+
backgroundRepeat: 'no-repeat',
77+
opacity: 0.7,
78+
zIndex: -30
79+
}}
80+
/>
7381

7482
{/* Star background effect */}
75-
<div className="fixed inset-0 pointer-events-none" style={{
76-
zIndex: -20
77-
}}>
83+
<div className="fixed inset-0 pointer-events-none" style={{ zIndex: -20 }}>
7884
<StarBackground />
7985
</div>
8086

8187
<main className="relative z-10 flex-grow container mx-auto px-4 pt-24 pb-16">
8288
<div className="max-w-6xl mx-auto">
83-
<div className="grid grid-cols-1 md:grid-cols-2 gap-16 mb-20">
89+
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
8490
<div>
8591
<h1 className="text-4xl md:text-5xl font-bold text-alien-gold mb-6 font-nasalization">AlienTrip</h1>
86-
<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>
87-
<div className="flex flex-wrap gap-4">
92+
93+
{/* Mission Statement in mini-rectangle */}
94+
<div className="bg-alien-space-dark/50 backdrop-blur-md rounded-lg p-4 mb-6 border border-alien-gold/20">
95+
<p className="text-lg text-gray-300 font-[Exo]">
96+
Explore our cosmic journey through the knowledge skills multiverse as we build the next generation of decentralized collaboration together.
97+
</p>
98+
</div>
99+
100+
{/* Benefits in mini-rectangle */}
101+
<div className="bg-alien-space-dark/50 backdrop-blur-md rounded-lg p-4 mb-8 border border-alien-gold/20">
102+
<p className="text-alien-green font-[Exo] font-semibold">
103+
Join us to enjoy the advantages, benefits and profits of the future ecosystem.
104+
</p>
105+
</div>
106+
107+
<div className="flex flex-wrap gap-4 mb-8">
88108
<Button className="bg-alien-gold hover:bg-alien-gold-light text-alien-space-dark font-nasalization">
89109
<Rocket className="mr-2 h-5 w-5" /> Join the Journey
90110
</Button>
91-
<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")}>
111+
<Button
112+
variant="outline"
113+
className="border-alien-green text-alien-green hover:bg-alien-green/20 font-nasalization"
114+
onClick={() => window.open("https://alienflowspace.gitbook.io/DAO", "_blank")}
115+
>
92116
<ScrollText className="mr-2 h-5 w-5" /> Look Greenpapers
93117
</Button>
94118
</div>
95119

96120
{/* GitBook Card */}
97-
<div className="mt-8 bg-alien-space-dark/50 backdrop-blur-md rounded-lg p-6 border border-alien-gold/20">
121+
<div className="bg-alien-space-dark/50 backdrop-blur-md rounded-lg p-6 border border-alien-gold/20">
98122
<div className="flex items-center mb-4">
99123
<BookOpen className="h-6 w-6 text-alien-gold mr-3" />
100124
<h3 className="text-xl font-semibold text-alien-gold font-nasalization">Official Documentation</h3>
@@ -103,13 +127,19 @@ const AlienTrip: React.FC = () => {
103127
Access our comprehensive documentation to learn about tokenomics, roadmap, and
104128
technical specifications of the ΔlieπFlΦw $pac€ DAO ecosystem.
105129
</p>
106-
<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]">
130+
<a
131+
href="https://alienflowspace.gitbook.io/DAO"
132+
target="_blank"
133+
rel="noopener noreferrer"
134+
className="flex items-center text-alien-green hover:text-alien-green-light font-[Exo]"
135+
>
107136
<span>Visit GitBook</span>
108137
<Rocket className="ml-2 h-4 w-4" />
109138
</a>
110139
</div>
111140
</div>
112-
<div className="bg-alien-space-dark/50 rounded-lg p-6 backdrop-blur-md">
141+
142+
<div className="bg-alien-space-dark/50 rounded-lg p-6 backdrop-blur-md border border-alien-gold/20">
113143
<h2 className="text-2xl font-bold text-alien-green mb-4 font-nasalization">Crypto Mint NFT</h2>
114144
<p className="mb-6 font-[Exo] text-alien-gold">
115145
Secure your place in our cosmic ecosystem by minting an ΔlieπFlΦw $pac€ DAO Passport, granting you early access to all present and future features and governance rights.
@@ -128,9 +158,7 @@ const AlienTrip: React.FC = () => {
128158
<span className="text-alien-green font-semibold font-[Exo]">314.159 / 1,618.034</span>
129159
</div>
130160
<div className="w-full bg-alien-space-dark rounded-full h-2.5 mb-2">
131-
<div className="bg-alien-gold h-2.5 rounded-full" style={{
132-
width: '72%'
133-
}}></div>
161+
<div className="bg-alien-gold h-2.5 rounded-full" style={{ width: '72%' }}></div>
134162
</div>
135163
</div>
136164
<Button className="w-full bg-alien-gold hover:bg-alien-gold-light text-alien-space-dark font-nasalization">
@@ -140,36 +168,44 @@ const AlienTrip: React.FC = () => {
140168
</div>
141169

142170
{/* Tokenomics Section */}
143-
<div className="mb-20">
144-
<div className="text-center mb-12">
171+
<div className="mb-16">
172+
<div className="text-center mb-8">
145173
<h2 className="text-3xl font-bold text-alien-gold mb-4 font-nasalization">Tokenomics</h2>
146-
<p className="text-xl text-gray-300 max-w-3xl mx-auto font-[Exo]">
147-
The A₿TC token distribution is designed to ensure sustainable ecosystem growth and balanced governance.
148-
</p>
174+
<div className="bg-alien-space-dark/50 backdrop-blur-md rounded-lg p-4 mb-6 border border-alien-gold/20 max-w-3xl mx-auto">
175+
<p className="text-lg text-gray-300 font-[Exo]">
176+
The A₿TC token distribution is designed to ensure sustainable ecosystem growth and balanced governance.
177+
</p>
178+
</div>
149179
</div>
150180

151181
<div className="flex flex-col md:flex-row items-center justify-center gap-12">
152182
{/* Pie Chart Visualization */}
153183
<div className="relative w-64 h-64">
154184
<svg viewBox="0 0 100 100" className="w-full h-full">
155185
{tokenomics.reduce((acc, item, i, arr) => {
156-
const startAngle = acc.angle;
157-
const sliceAngle = item.value / 100 * 360;
158-
const endAngle = startAngle + sliceAngle;
186+
const startAngle = acc.angle;
187+
const sliceAngle = (item.value / 100) * 360;
188+
const endAngle = startAngle + sliceAngle;
159189

160-
// Calculate the SVG arc path
161-
const x1 = 50 + 40 * Math.cos((startAngle - 90) * (Math.PI / 180));
162-
const y1 = 50 + 40 * Math.sin((startAngle - 90) * (Math.PI / 180));
163-
const x2 = 50 + 40 * Math.cos((endAngle - 90) * (Math.PI / 180));
164-
const y2 = 50 + 40 * Math.sin((endAngle - 90) * (Math.PI / 180));
165-
const largeArc = sliceAngle > 180 ? 1 : 0;
166-
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" />);
167-
acc.angle = endAngle;
168-
return acc;
169-
}, {
170-
paths: [],
171-
angle: 0
172-
}).paths}
190+
// Calculate the SVG arc path
191+
const x1 = 50 + 40 * Math.cos(((startAngle - 90) * Math.PI) / 180);
192+
const y1 = 50 + 40 * Math.sin(((startAngle - 90) * Math.PI) / 180);
193+
const x2 = 50 + 40 * Math.cos(((endAngle - 90) * Math.PI) / 180);
194+
const y2 = 50 + 40 * Math.sin(((endAngle - 90) * Math.PI) / 180);
195+
const largeArc = sliceAngle > 180 ? 1 : 0;
196+
197+
acc.paths.push(
198+
<path
199+
key={i}
200+
d={`M 50 50 L ${x1} ${y1} A 40 40 0 ${largeArc} 1 ${x2} ${y2} Z`}
201+
fill={item.color}
202+
stroke="rgba(0,0,0,0.3)"
203+
strokeWidth="0.5"
204+
/>
205+
);
206+
acc.angle = endAngle;
207+
return acc;
208+
}, { paths: [], angle: 0 }).paths}
173209
</svg>
174210
<div className="absolute inset-0 flex items-center justify-center">
175211
<div className="bg-alien-space-dark/70 rounded-full w-20 h-20 flex items-center justify-center backdrop-blur-sm">
@@ -180,29 +216,41 @@ const AlienTrip: React.FC = () => {
180216

181217
{/* Legend */}
182218
<div className="grid grid-cols-2 gap-4">
183-
{tokenomics.map((item, index) => <div key={index} className="flex items-center">
184-
<div className="w-4 h-4 mr-2" style={{
185-
backgroundColor: item.color
186-
}}></div>
219+
{tokenomics.map((item, index) => (
220+
<div key={index} className="flex items-center">
221+
<div
222+
className="w-4 h-4 mr-2"
223+
style={{ backgroundColor: item.color }}
224+
></div>
187225
<div>
188226
<span className="text-gray-300 font-[Exo]">{item.name}</span>
189227
<span className="ml-2 text-alien-gold font-bold font-[Exo]">{item.value}%</span>
190228
</div>
191-
</div>)}
229+
</div>
230+
))}
192231
</div>
193232
</div>
194233

195234
<div className="text-center mt-8">
196-
<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]">
235+
<a
236+
href="https://alienflowspace.gitbook.io/DAO"
237+
target="_blank"
238+
rel="noopener noreferrer"
239+
className="text-alien-green hover:text-alien-green-light inline-flex items-center font-[Exo]"
240+
>
197241
View detailed tokenomics <Rocket className="ml-2 h-4 w-4" />
198242
</a>
199243
</div>
200244
</div>
201245

202-
<div className="mb-20">
203-
<div className="text-center mb-12">
246+
<div className="mb-16">
247+
<div className="text-center mb-8">
204248
<h2 className="text-3xl font-bold text-alien-gold mb-4 font-nasalization">Roadmap</h2>
205-
<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>
249+
<div className="bg-alien-space-dark/50 backdrop-blur-md rounded-lg p-4 mb-6 border border-alien-gold/20 max-w-4xl mx-auto">
250+
<p className="text-lg text-gray-300 font-[Exo]">
251+
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.
252+
</p>
253+
</div>
206254
</div>
207255

208256
<div className="relative">
@@ -213,7 +261,8 @@ const AlienTrip: React.FC = () => {
213261
<img src="/lovable-uploads/VC.png" alt="Alien UFO" className="w-16 h-16 object-contain animate-bounce" />
214262
</div>
215263

216-
{roadmapEvents.map((event, index) => <div key={index} className="relative grid grid-cols-1 md:grid-cols-5 gap-8 mb-16">
264+
{roadmapEvents.map((event, index) => (
265+
<div key={index} className="relative grid grid-cols-1 md:grid-cols-5 gap-8 mb-16">
217266
<div className={`md:col-span-2 ${index % 2 === 0 ? 'md:text-right order-1' : 'order-1 md:order-3'}`}>
218267
<h3 className="text-2xl font-bold text-alien-gold mb-2 font-nasalization">{event.title}</h3>
219268
<div className="text-sm text-alien-green mb-2 flex items-center gap-2 justify-start md:justify-end font-[Exo]">
@@ -225,34 +274,56 @@ const AlienTrip: React.FC = () => {
225274

226275
<div className="order-2 flex justify-center">
227276
<div className="relative">
228-
<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'}`}>
277+
<div className={`w-12 h-12 rounded-full flex items-center justify-center z-10 ${
278+
event.completed
279+
? 'bg-alien-gold'
280+
: 'bg-alien-space-light border-2 border-alien-gold/50'
281+
}`}>
229282
<span className={event.completed ? 'text-alien-space-dark' : 'text-alien-gold'}>
230283
{event.icon}
231284
</span>
232285
</div>
233286

234287
{/* Planetary systems */}
235288
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 -z-10">
236-
<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' : 'border-purple-300/20'} opacity-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2`}></div>
237-
<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' : 'bg-purple-900/10'} absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2`}></div>
289+
<div className={`w-24 h-24 rounded-full border ${
290+
index === 0 ? 'border-blue-300/20' :
291+
index === 1 ? 'border-red-300/20' :
292+
index === 2 ? 'border-green-300/20' :
293+
index === 3 ? 'border-yellow-300/20' :
294+
'border-purple-300/20'
295+
} 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 ${
297+
index === 0 ? 'bg-blue-900/10' :
298+
index === 1 ? 'bg-red-900/10' :
299+
index === 2 ? 'bg-green-900/10' :
300+
index === 3 ? 'bg-yellow-900/10' :
301+
'bg-purple-900/10'
302+
} absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2`}></div>
238303
</div>
239304
</div>
240305
</div>
241306

242307
<div className={`md:col-span-2 ${index % 2 === 0 ? 'order-3' : 'order-1 md:text-right'}`}>
243308
{/* Empty space for alignment */}
244309
</div>
245-
</div>)}
310+
</div>
311+
))}
246312
</div>
247313

248314
<div className="text-center mt-8">
249-
<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]">
315+
<a
316+
href="https://alienflowspace.gitbook.io/DAO"
317+
target="_blank"
318+
rel="noopener noreferrer"
319+
className="text-alien-green hover:text-alien-green-light inline-flex items-center font-[Exo]"
320+
>
250321
View complete roadmap <Rocket className="ml-2 h-4 w-4" />
251322
</a>
252323
</div>
253324
</div>
254325

255-
<div className="bg-alien-space-dark/70 rounded-lg p-8 backdrop-blur-md text-center">
326+
<div className="bg-alien-space-dark/70 rounded-lg p-8 backdrop-blur-md text-center border border-alien-gold/20">
256327
<h2 className="text-3xl font-bold text-alien-gold mb-4 font-nasalization">Join Our Cosmic Journey</h2>
257328
<p className="text-gray-300 mb-8 max-w-3xl mx-auto font-[Exo]">
258329
The AlienFlowSpace DAO is more than a project—it's a movement to transform blockchain collaboration across the multiverse. Be part of this revolutionary journey.
@@ -265,6 +336,8 @@ const AlienTrip: React.FC = () => {
265336
</div>
266337
</div>
267338
</main>
268-
</div>;
339+
</div>
340+
);
269341
};
270-
export default AlienTrip;
342+
343+
export default AlienTrip;

0 commit comments

Comments
 (0)