Skip to content

Commit 943fcad

Browse files
Alien69FlowAlien69Flow
authored
Update About.tsx
Signed-off-by: Aitor Alien <[email protected]>
1 parent 8acfff1 commit 943fcad

File tree

1 file changed

+199
-95
lines changed

1 file changed

+199
-95
lines changed

‎src/pages/About.tsx‎

Lines changed: 199 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,231 @@
1-
import React from 'react';
2-
import StarBackground from '@/components/StarBackground';
3-
import Header from '@/components/Header';
4-
import { Button } from '@/components/ui/button';
1+
import React from "react";
2+
import StarBackground from "@/components/StarBackground";
3+
import { Button } from "@/components/ui/button";
54

65
const About: React.FC = () => {
76
return (
8-
<div className="relative min-h-screen bg-alien-space flex flex-col">
7+
<div className="relative flex flex-col flex-1 bg-alien-space">
98
{/* Fondo de estrellas */}
109
<StarBackground />
11-
{/* Fondo con opacidad suave como el hero */}
10+
{/* Fondo principal: debe ser absolute y -z-10 */}
1211
<div
13-
className="fixed inset-0 z-0 bg-cover bg-center bg-no-repeat pointer-events-none"
12+
className="absolute inset-0 -z-10 bg-cover bg-center bg-no-repeat pointer-events-none"
1413
style={{
1514
backgroundImage: `url('/lovable-uploads/EMWBack.png')`,
1615
}}
1716
>
18-
<div className="w-full h-full bg-black/50" style={{ minHeight: '100vh' }} />
17+
<div className="w-full h-full bg-black/50" />
1918
</div>
2019
{/* Contenido principal */}
21-
<div className="relative z-10 flex flex-col flex-1">
22-
<Header />
23-
<main className="container mx-auto px-4 pt-24 pb-16 flex-1">
24-
<div className="max-w-4xl mx-auto">
25-
<h1 className="text-4xl md:text-5xl font-bold text-alien-gold mb-4 font-nasalization">
26-
We offer INNOVATIVE SOLUTIONS with cutting-edge technologies
27-
</h1>
28-
<h2 className="text-2xl text-alien-green mb-8 font-[Exo]">
29-
Improving Energy Efficiency and Environmental Sustainability, managing
30-
to professionally improve work flows and processes, this is WorkFlow.
31-
</h2>
32-
<div className="space-y-8 text-gray-300 font-[Exo]">
20+
<main className="relative z-10 flex-grow container mx-auto px-4 pt-24 pb-16">
21+
<div className="max-w-4xl mx-auto">
22+
<h1 className="text-4xl md:text-5xl font-bold text-alien-gold mb-4 font-nasalization">
23+
We offer INNOVATIVE SOLUTIONS with cutting-edge
24+
technologies
25+
</h1>
26+
<h2 className="text-2xl text-alien-green mb-8 font-[Exo]">
27+
Improving Energy Efficiency and Environmental
28+
Sustainability, managing to professionally
29+
improve work flows and processes, this is
30+
WorkFlow.
31+
</h2>
32+
<div className="space-y-8 text-gray-300 font-[Exo]">
33+
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
34+
<h3 className="text-2xl font-semibold text-alien-green mb-4 font-nasalization">
35+
Web 5 (Quantum Computing)
36+
</h3>
37+
<h3 className="text-2xl font-semibold text-alien-green mb-4 font-nasalization">
38+
Web 4 (A.I. Neural Networks)
39+
</h3>
40+
<h3 className="text-2xl font-semibold text-alien-green mb-4 font-nasalization">
41+
Web 3 (Blockchain)
42+
</h3>
43+
<p className="text-lg">
44+
AlienFlowSpace DAO = (Decentralized
45+
Autonomous Organization) is a space that
46+
allows users; access, acquire, redeem, buy,
47+
sell and exchange Cryptos, NFTs in an easy
48+
and secure way. [...]
49+
</p>
50+
</div>
51+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
3352
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
34-
<h3 className="text-2xl font-semibold text-alien-green mb-4 font-nasalization">Web 5 (Quantum Computing)</h3>
35-
<h3 className="text-2xl font-semibold text-alien-green mb-4 font-nasalization">Web 4 (A.I. Neural Networks)</h3>
36-
<h3 className="text-2xl font-semibold text-alien-green mb-4 font-nasalization">Web 3 (Blockchain)</h3>
37-
<p className="text-lg">
38-
AlienFlowSpace DAO = (Decentralized Autonomous Organization) is a space that allows users; access, acquire, redeem, buy, sell and exchange Cryptos, NFTs in an easy and secure way. [...]
53+
<h3 className="text-xl font-semibold text-alien-gold mb-3 font-nasalization">
54+
1st
55+
</h3>
56+
<p>
57+
We are committed to providing personalized
58+
solutions that address current challenges
59+
and needs.
3960
</p>
4061
</div>
41-
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
42-
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
43-
<h3 className="text-xl font-semibold text-alien-gold mb-3 font-nasalization">1st</h3>
44-
<p>We are committed to providing personalized solutions that address current challenges and needs.</p>
45-
</div>
46-
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
47-
<h3 className="text-xl font-semibold text-alien-gold mb-3 font-nasalization">2nd</h3>
48-
<p>Greater security by being able to trust the management of data and transactions thanks to the use of cryptography, blockchain, and quantum computing.</p>
49-
</div>
50-
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
51-
<h3 className="text-xl font-semibold text-alien-gold mb-3 font-nasalization">3rd</h3>
52-
<p>
53-
Improvement in decision making thanks to advanced data analysis and the application of artificial intelligence, raising awareness about gestal consciousness, generating synergies, and more.
54-
</p>
55-
</div>
56-
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
57-
<h3 className="text-xl font-semibold text-alien-gold mb-3 font-nasalization">4th</h3>
58-
<p>Optimization of WorkFlow (processes and work flows) promoting energy efficiency and environmental sustainability, in addition to adding value and reducing costs.</p>
59-
</div>
60-
</div>
6162
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
62-
<h3 className="text-2xl font-semibold text-alien-green mb-4 font-nasalization">Our mission</h3>
63-
<p className="mb-6">
64-
Create the best experiences and synergies that generate greater value for the planet and its beings, implementing environmentally friendly solutions.
63+
<h3 className="text-xl font-semibold text-alien-gold mb-3 font-nasalization">
64+
2nd
65+
</h3>
66+
<p>
67+
Greater security by being able to trust
68+
the management of data and transactions
69+
thanks to the use of cryptography,
70+
blockchain, and quantum computing.
6571
</p>
66-
<h3 className="text-2xl font-semibold text-alien-green mb-4 font-nasalization">Our values</h3>
67-
<p className="mb-6">
68-
Create the best experiences and synergies that generate greater value for the planet and its beings, implementing environmentally friendly solutions.
72+
</div>
73+
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
74+
<h3 className="text-xl font-semibold text-alien-gold mb-3 font-nasalization">
75+
3rd
76+
</h3>
77+
<p>
78+
Improvement in decision making thanks to
79+
advanced data analysis and the application
80+
of artificial intelligence, raising
81+
awareness about gestal consciousness,
82+
generating synergies, and more.
6983
</p>
84+
</div>
85+
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
86+
<h3 className="text-xl font-semibold text-alien-gold mb-3 font-nasalization">
87+
4th
88+
</h3>
7089
<p>
71-
Our main objective is to disseminate knowledge to provide a greater understanding of wisdom in different fields and concepts, such as digitalization, efficiency, sustainability, and more.
90+
Optimization of WorkFlow (processes and
91+
work flows) promoting energy efficiency
92+
and environmental sustainability, in
93+
addition to adding value and reducing
94+
costs.
7295
</p>
7396
</div>
74-
<div className="flex flex-wrap justify-center gap-6 mb-8">
75-
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20 text-center w-48">
76-
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">Academy</h4>
97+
</div>
98+
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
99+
<h3 className="text-2xl font-semibold text-alien-green mb-4 font-nasalization">
100+
Our mission
101+
</h3>
102+
<p className="mb-6">
103+
Create the best experiences and synergies
104+
that generate greater value for the planet
105+
and its beings, implementing environmentally
106+
friendly solutions.
107+
</p>
108+
<h3 className="text-2xl font-semibold text-alien-green mb-4 font-nasalization">
109+
Our values
110+
</h3>
111+
<p className="mb-6">
112+
Create the best experiences and synergies
113+
that generate greater value for the planet
114+
and its beings, implementing environmentally
115+
friendly solutions.
116+
</p>
117+
<p>
118+
Our main objective is to disseminate
119+
knowledge to provide a greater understanding
120+
of wisdom in different fields and concepts,
121+
such as digitalization, efficiency,
122+
sustainability, and more.
123+
</p>
124+
</div>
125+
<div className="flex flex-wrap justify-center gap-6 mb-8">
126+
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20 text-center w-48">
127+
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">
128+
Academy
129+
</h4>
130+
</div>
131+
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20 text-center w-48">
132+
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">
133+
CoNetworking
134+
</h4>
135+
</div>
136+
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20 text-center w-48">
137+
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">
138+
Club
139+
</h4>
140+
</div>
141+
</div>
142+
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
143+
<p className="mb-6">
144+
Acquire Cryptos, NFTs, Tokens to Associate
145+
and participate in Advantages, Benefits,
146+
Profits… in the DAO… + We also collaborate
147+
with Big Brands & International
148+
organizations.
149+
</p>
150+
<h3 className="text-2xl font-semibold text-alien-green mb-4 font-nasalization">
151+
Association
152+
</h3>
153+
<p className="mb-6">
154+
We have an active, committed and dedicated
155+
community of farmers, artists, scientists,
156+
creators, developers, entrepreneurs,
157+
investment companies, researchers,
158+
businesses and more.
159+
</p>
160+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
161+
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20">
162+
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">
163+
Decentralization
164+
</h4>
165+
<p>
166+
It means that it is not controlled by a
167+
single entity, person or being. This
168+
makes it more resistant to censorship
169+
and manipulation.
170+
</p>
77171
</div>
78-
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20 text-center w-48">
79-
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">CoNetworking</h4>
172+
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20">
173+
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">
174+
Decentralization
175+
</h4>
176+
<p>
177+
Allows users to exchange their cryptos &
178+
NFTs for other assets, meaning they have
179+
more options and flexibility to manage
180+
their assets.
181+
</p>
80182
</div>
81-
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20 text-center w-48">
82-
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">Club</h4>
183+
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20">
184+
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">
185+
Liquidity
186+
</h4>
187+
<p>
188+
Offers great liquidity for users who
189+
want to buy or sell their
190+
cryptocurrencies and NFTs. This means
191+
that users can quickly and easily
192+
convert their cryptocurrencies and NFTs
193+
to other assets.
194+
</p>
195+
</div>
196+
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20">
197+
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">
198+
Security
199+
</h4>
200+
<p>
201+
Thanks to the use of blockchain
202+
technology, quantum computing and
203+
artificial intelligence, which means
204+
that all transactions are secure and
205+
protected against fraud and hacking.
206+
</p>
83207
</div>
84208
</div>
85-
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
86-
<p className="mb-6">
87-
Acquire Cryptos, NFTs, Tokens to Associate and participate in Advantages, Benefits, Profits… in the DAO… + We also collaborate with Big Brands & International organizations.
88-
</p>
89-
<h3 className="text-2xl font-semibold text-alien-green mb-4 font-nasalization">Association</h3>
90-
<p className="mb-6">
91-
We have an active, committed and dedicated community of farmers, artists, scientists, creators, developers, entrepreneurs, investment companies, researchers, businesses and more.
209+
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20 mb-6">
210+
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">
211+
Transparency
212+
</h4>
213+
<p>
214+
This is completely transparent, meaning
215+
that users can see and verify all
216+
transactions and operations that occur on
217+
blockchain networks.
92218
</p>
93-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
94-
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20">
95-
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">Decentralization</h4>
96-
<p>It means that it is not controlled by a single entity, person or being. This makes it more resistant to censorship and manipulation.</p>
97-
</div>
98-
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20">
99-
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">Decentralization</h4>
100-
<p>Allows users to exchange their cryptos & NFTs for other assets, meaning they have more options and flexibility to manage their assets.</p>
101-
</div>
102-
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20">
103-
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">Liquidity</h4>
104-
<p>Offers great liquidity for users who want to buy or sell their cryptocurrencies and NFTs. This means that users can quickly and easily convert their cryptocurrencies and NFTs to other assets.</p>
105-
</div>
106-
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20">
107-
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">Security</h4>
108-
<p>Thanks to the use of blockchain technology, quantum computing and artificial intelligence, which means that all transactions are secure and protected against fraud and hacking.</p>
109-
</div>
110-
</div>
111-
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20 mb-6">
112-
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">Transparency</h4>
113-
<p>This is completely transparent, meaning that users can see and verify all transactions and operations that occur on blockchain networks.</p>
114-
</div>
115-
<div className="text-center">
116-
<Button className="bg-alien-green hover:bg-alien-green-light text-alien-space-dark font-semibold text-lg px-8 py-3 rounded-full">
117-
Access Cryptotokens & NFTs
118-
</Button>
119-
</div>
219+
</div>
220+
<div className="text-center">
221+
<Button className="bg-alien-green hover:bg-alien-green-light text-alien-space-dark font-semibold text-lg px-8 py-3 rounded-full font-nasalization">
222+
Access Cryptotokens & NFTs
223+
</Button>
120224
</div>
121225
</div>
122226
</div>
123-
</main>
124-
</div>
227+
</div>
228+
</main>
125229
</div>
126230
);
127231
};

0 commit comments

Comments
 (0)