Skip to content

Commit eaa402c

Browse files
Alien69FlowAlien69Flow
authored
Update About.tsx
Signed-off-by: Aitor Alien <[email protected]>
1 parent 0b504b2 commit eaa402c

File tree

1 file changed

+101
-93
lines changed

1 file changed

+101
-93
lines changed

‎src/pages/About.tsx‎

Lines changed: 101 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -5,115 +5,123 @@ import { Button } from '@/components/ui/button';
55

66
const About: React.FC = () => {
77
return (
8-
<div className="min-h-screen bg-alien-space">
8+
<div className="relative min-h-screen bg-alien-space flex flex-col">
9+
{/* Fondo de estrellas */}
910
<StarBackground />
10-
<Header />
11-
{/* Fondo de pantalla sin opacidad */}
11+
{/* Fondo con opacidad suave como el hero */}
1212
<div
13-
className="fixed inset-0 z-0 bg-cover bg-center bg-no-repeat"
14-
style={{ backgroundImage: `url('/lovable-uploads/EMWBack.png')` }}
15-
/>
16-
<main className="container mx-auto px-4 pt-24 pb-16">
17-
<div className="max-w-4xl mx-auto relative z-10">
18-
<h1 className="text-4xl md:text-5xl font-bold text-alien-gold mb-4 font-nasalization">
19-
We offer INNOVATIVE SOLUTIONS with cutting-edge technologies
20-
</h1>
21-
<h2 className="text-2xl text-alien-green mb-8 font-[Exo]">
22-
Improving Energy Efficiency and Environmental Sustainability, managing
23-
to professionally improve work flows and processes, this is WorkFlow.
24-
</h2>
25-
<div className="space-y-8 text-gray-300 font-[Exo]">
26-
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
27-
<h3 className="text-2xl font-semibold text-alien-green mb-4 font-nasalization">Web 5 (Quantum Computing)</h3>
28-
<h3 className="text-2xl font-semibold text-alien-green mb-4 font-nasalization">Web 4 (A.I. Neural Networks)</h3>
29-
<h3 className="text-2xl font-semibold text-alien-green mb-4 font-nasalization">Web 3 (Blockchain)</h3>
30-
<p className="text-lg">
31-
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. [...]
32-
</p>
33-
</div>
34-
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
13+
className="fixed inset-0 z-0 bg-cover bg-center bg-no-repeat pointer-events-none"
14+
style={{
15+
backgroundImage: `url('/lovable-uploads/EMWBack.png')`,
16+
}}
17+
>
18+
<div className="w-full h-full bg-black/50" style={{ minHeight: '100vh' }} />
19+
</div>
20+
{/* 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]">
3533
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
36-
<h3 className="text-xl font-semibold text-alien-gold mb-3 font-nasalization">1st</h3>
37-
<p>We are committed to providing personalized solutions that address current challenges and needs.</p>
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. [...]
39+
</p>
3840
</div>
39-
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
40-
<h3 className="text-xl font-semibold text-alien-gold mb-3 font-nasalization">2nd</h3>
41-
<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>
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>
4260
</div>
4361
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
44-
<h3 className="text-xl font-semibold text-alien-gold mb-3 font-nasalization">3rd</h3>
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.
65+
</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.
69+
</p>
4570
<p>
46-
Improvement in decision making thanks to advanced data analysis and the application of artificial intelligence, raising awareness about gestal consciousness, generating synergies, and more.
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.
4772
</p>
4873
</div>
49-
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
50-
<h3 className="text-xl font-semibold text-alien-gold mb-3 font-nasalization">4th</h3>
51-
<p>Optimization of WorkFlow (processes and work flows) promoting energy efficiency and environmental sustainability, in addition to adding value and reducing costs.</p>
52-
</div>
53-
</div>
54-
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
55-
<h3 className="text-2xl font-semibold text-alien-green mb-4 font-nasalization">Our mission</h3>
56-
<p className="mb-6">
57-
Create the best experiences and synergies that generate greater value for the planet and its beings, implementing environmentally friendly solutions.
58-
</p>
59-
<h3 className="text-2xl font-semibold text-alien-green mb-4 font-nasalization">Our values</h3>
60-
<p className="mb-6">
61-
Create the best experiences and synergies that generate greater value for the planet and its beings, implementing environmentally friendly solutions.
62-
</p>
63-
<p>
64-
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.
65-
</p>
66-
</div>
67-
<div className="flex flex-wrap justify-center gap-6 mb-8">
68-
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20 text-center w-48">
69-
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">Academy</h4>
70-
</div>
71-
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20 text-center w-48">
72-
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">CoNetworking</h4>
73-
</div>
74-
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20 text-center w-48">
75-
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">Club</h4>
76-
</div>
77-
</div>
78-
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
79-
<p className="mb-6">
80-
Acquire Cryptos, NFTs, Tokens to Associate and participate in Advantages, Benefits, Profits… in the DAO… + We also collaborate with Big Brands & International organizations.
81-
</p>
82-
<h3 className="text-2xl font-semibold text-alien-green mb-4 font-nasalization">Association</h3>
83-
<p className="mb-6">
84-
We have an active, committed and dedicated community of farmers, artists, scientists, creators, developers, entrepreneurs, investment companies, researchers, businesses and more.
85-
</p>
86-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
87-
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20">
88-
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">Decentralization</h4>
89-
<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>
90-
</div>
91-
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20">
92-
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">Decentralization</h4>
93-
<p>Allows users to exchange their cryptos & NFTs for other assets, meaning they have more options and flexibility to manage their assets.</p>
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>
9477
</div>
95-
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20">
96-
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">Liquidity</h4>
97-
<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>
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>
9880
</div>
99-
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20">
100-
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">Security</h4>
101-
<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>
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>
10283
</div>
10384
</div>
104-
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20 mb-6">
105-
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">Transparency</h4>
106-
<p>This is completely transparent, meaning that users can see and verify all transactions and operations that occur on blockchain networks.</p>
107-
</div>
108-
<div className="text-center">
109-
<Button className="bg-alien-green hover:bg-alien-green-light text-alien-space-dark font-semibold text-lg px-8 py-3 rounded-full">
110-
Access Cryptotokens & NFTs
111-
</Button>
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.
92+
</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>
112120
</div>
113121
</div>
114122
</div>
115-
</div>
116-
</main>
123+
</main>
124+
</div>
117125
</div>
118126
);
119127
};

0 commit comments

Comments
 (0)