Skip to content

Commit 86551eb

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Changes
1 parent 12bc60b commit 86551eb

1 file changed

Lines changed: 61 additions & 53 deletions

File tree

‎src/pages/Contact.tsx‎

Lines changed: 61 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -115,14 +115,14 @@ const Contact: React.FC = () => {
115115
};
116116

117117
const socialLinks = [
118-
{ name: 'Discord', icon: BrandLogos.Discord, link: 'https://discord.gg/alienflowspace', handle: '@AlienFlowSpace', status: 'Active' },
118+
{ name: 'Discord', icon: BrandLogos.Discord, link: '#', handle: '@AlienFlowSpace', status: 'Coming Soon' },
119119
{ name: 'DoraHacks', icon: BrandLogos.DoraHacks, link: 'https://dorahacks.io/hacker/Alien69Flow', handle: '@Alien69Flow', status: 'Active' },
120120
{ name: 'Facebook', icon: BrandLogos.Facebook, link: 'https://www.facebook.com/Alien69Flow', handle: '@Alien69Flow', status: 'Active' },
121121
{ name: 'GitBook', icon: BrandLogos.GitBook, link: 'https://alienflowspace.gitbook.io', handle: 'Docs', status: 'Active' },
122122
{ name: 'GitHub', icon: BrandLogos.GitHub, link: 'https://github.com/Alien69Flow', handle: '@Alien69Flow', status: 'Active' },
123123
{ name: 'HackMD', icon: BrandLogos.HackMD, link: 'https://hackmd.io/@Alien69Flow', handle: '@Alien69Flow', status: 'Active' },
124124
{ name: 'Instagram', icon: BrandLogos.Instagram, link: 'https://www.instagram.com/alien69flow/', handle: '@alien69flow', status: 'Active' },
125-
{ name: 'LinkedIn Co.', icon: BrandLogos.LinkedIn, link: 'https://linkedin.com/company/alienflowspace', handle: 'AlienFlowSpace', status: 'Active' },
125+
{ name: 'LinkedIn', icon: BrandLogos.LinkedIn, link: 'https://linkedin.com/company/alienflowspace', handle: 'Co & @alien69flow', status: 'Active', secondaryLink: 'https://linkedin.com/in/alien69flow' },
126126
{ name: 'Reddit', icon: BrandLogos.Reddit, link: 'https://reddit.com/user/Alien69Flow', handle: 'u/Alien69Flow', status: 'Active' },
127127
{ name: 'Telegram', icon: BrandLogos.Telegram, link: 'https://t.me/AlienFlow', handle: '@AlienFlow', status: 'Active' },
128128
{ name: 'Threads', icon: BrandLogos.Threads, link: 'https://threads.net/@alien69flow', handle: '@alien69flow', status: 'Active' },
@@ -135,87 +135,94 @@ const Contact: React.FC = () => {
135135
<main className="max-w-7xl mx-auto px-4 pt-16">
136136

137137
{/* ═══════════════════════════════════════════════════════════════════
138-
HERO SECTION - Original design with green/gold cosmic effects
138+
HERO SECTION - Original cosmic green/gold design restored
139139
═══════════════════════════════════════════════════════════════════ */}
140140
<motion.section
141141
initial={{ opacity: 0 }}
142142
animate={{ opacity: 1 }}
143-
transition={{ duration: 1 }}
144-
className="relative flex flex-col items-center text-center mb-20 py-16"
143+
transition={{ duration: 1.2 }}
144+
className="relative flex flex-col items-center text-center mb-24 py-20"
145145
>
146-
{/* Cosmic glow background */}
146+
{/* Multi-layer cosmic glow background */}
147147
<div className="absolute inset-0 overflow-hidden pointer-events-none">
148-
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-alien-green/10 rounded-full blur-[120px] animate-pulse" />
149-
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[400px] bg-alien-gold/10 rounded-full blur-[80px] animate-pulse" style={{ animationDelay: '1s' }} />
148+
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-radial from-alien-green/20 via-alien-green/5 to-transparent rounded-full blur-[100px] animate-pulse" />
149+
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-gradient-radial from-alien-gold/15 via-alien-gold/5 to-transparent rounded-full blur-[80px] animate-pulse" style={{ animationDelay: '1.5s' }} />
150+
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[300px] bg-alien-green/10 rounded-full blur-[60px] animate-pulse" style={{ animationDelay: '0.7s' }} />
150151
</div>
151152

152-
{/* Title with official characters */}
153+
{/* Main Title */}
153154
<motion.h1
154-
initial={{ opacity: 0, y: 30 }}
155-
animate={{ opacity: 1, y: 0 }}
156-
transition={{ duration: 0.8, delay: 0.2 }}
157-
className="relative text-5xl sm:text-6xl md:text-8xl font-nasalization mb-6 drop-shadow-[0_0_40px_rgba(57,255,20,0.3)]"
155+
initial={{ opacity: 0, y: 40, scale: 0.9 }}
156+
animate={{ opacity: 1, y: 0, scale: 1 }}
157+
transition={{ duration: 1, delay: 0.2, type: 'spring', stiffness: 100 }}
158+
className="relative text-5xl sm:text-7xl md:text-8xl lg:text-9xl font-nasalization mb-8 tracking-wider"
158159
>
159-
<span className="text-alien-green drop-shadow-[0_0_20px_rgba(57,255,20,0.5)]">Contact</span>
160-
<span className="text-white mx-4">Us</span>
160+
<span className="text-alien-green drop-shadow-[0_0_30px_rgba(57,255,20,0.6)] [text-shadow:0_0_60px_rgba(57,255,20,0.4)]">
161+
Contact
162+
</span>
163+
<span className="text-white mx-3 drop-shadow-[0_0_20px_rgba(255,255,255,0.3)]">
164+
Us
165+
</span>
161166
</motion.h1>
162167

163-
{/* Brand name with official characters */}
164-
<motion.p
165-
initial={{ opacity: 0, y: 20 }}
166-
animate={{ opacity: 1, y: 0 }}
167-
transition={{ duration: 0.8, delay: 0.4 }}
168-
className="text-lg sm:text-xl md:text-2xl font-nasalization mb-8"
169-
>
170-
<span className="text-alien-green">Δlieπ</span>
171-
<span className="text-alien-gold">FlΦw</span>
172-
<span className="text-alien-green"> $pac€</span>
173-
<span className="text-alien-gold"> DAO</span>
174-
</motion.p>
175-
176-
{/* Subtitle */}
168+
{/* Subtitle with original text */}
177169
<motion.p
178-
initial={{ opacity: 0, y: 20 }}
170+
initial={{ opacity: 0, y: 30 }}
179171
animate={{ opacity: 1, y: 0 }}
180-
transition={{ duration: 0.8, delay: 0.6 }}
181-
className="text-muted-foreground max-w-2xl text-sm sm:text-base font-exo"
172+
transition={{ duration: 0.8, delay: 0.5 }}
173+
className="text-base sm:text-lg md:text-xl lg:text-2xl max-w-4xl leading-relaxed font-exo px-4"
182174
>
183-
Connect with our cosmic community through multiple channels.
184-
We're here to help you navigate the Web3 universe.
175+
<span className="text-muted-foreground">Have questions or want to join the </span>
176+
<span className="text-alien-green font-nasalization drop-shadow-[0_0_10px_rgba(57,255,20,0.5)]">Δlieπ</span>
177+
<span className="text-alien-gold font-nasalization drop-shadow-[0_0_10px_rgba(240,216,130,0.5)]">FlΦw</span>
178+
<span className="text-alien-green font-nasalization drop-shadow-[0_0_10px_rgba(57,255,20,0.5)]"> $pac€</span>
179+
<span className="text-alien-gold font-nasalization drop-shadow-[0_0_10px_rgba(240,216,130,0.5)]"> DAO</span>
180+
<span className="text-muted-foreground">?</span>
181+
<br className="hidden sm:block" />
182+
<span className="text-muted-foreground"> Reach out through any of these cosmic channels:</span>
185183
</motion.p>
186184

187-
{/* Decorative node with lines */}
185+
{/* Decorative cosmic node with radiating lines */}
188186
<motion.div
189187
initial={{ opacity: 0, scale: 0 }}
190188
animate={{ opacity: 1, scale: 1 }}
191-
transition={{ duration: 0.8, delay: 0.8 }}
192-
className="relative mt-12"
189+
transition={{ duration: 1, delay: 0.9, type: 'spring', stiffness: 120 }}
190+
className="relative mt-16"
193191
>
194-
{/* Central node */}
192+
{/* Central glowing node */}
195193
<div className="relative">
196-
<div className="w-4 h-4 bg-alien-green rounded-full shadow-[0_0_20px_rgba(57,255,20,0.8),0_0_40px_rgba(57,255,20,0.4)]" />
197-
<div className="absolute inset-0 w-4 h-4 bg-alien-green/50 rounded-full animate-ping" />
194+
<div className="w-5 h-5 bg-gradient-to-br from-alien-green via-alien-gold to-alien-green rounded-full shadow-[0_0_30px_rgba(57,255,20,0.9),0_0_60px_rgba(57,255,20,0.5),0_0_100px_rgba(240,216,130,0.3)]" />
195+
<div className="absolute inset-0 w-5 h-5 bg-alien-green/60 rounded-full animate-ping" />
196+
<div className="absolute -inset-2 w-9 h-9 border border-alien-green/30 rounded-full animate-pulse" />
198197
</div>
199198

200-
{/* Lines radiating from node */}
199+
{/* Radiating lines - green and gold alternating */}
201200
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
202-
{[...Array(8)].map((_, i) => (
201+
{[...Array(12)].map((_, i) => (
203202
<motion.div
204203
key={i}
205204
initial={{ opacity: 0, scaleX: 0 }}
206-
animate={{ opacity: 0.6, scaleX: 1 }}
207-
transition={{ duration: 0.6, delay: 1 + i * 0.1 }}
208-
className="absolute h-[1px] origin-left"
205+
animate={{ opacity: 0.7, scaleX: 1 }}
206+
transition={{ duration: 0.8, delay: 1.2 + i * 0.08 }}
207+
className="absolute h-[2px] origin-left"
209208
style={{
210-
width: `${60 + i * 10}px`,
211-
transform: `rotate(${i * 45}deg)`,
209+
width: `${80 + i * 12}px`,
210+
transform: `rotate(${i * 30}deg)`,
212211
background: i % 2 === 0
213-
? 'linear-gradient(90deg, hsl(var(--alien-green)), transparent)'
214-
: 'linear-gradient(90deg, hsl(var(--alien-gold)), transparent)'
212+
? 'linear-gradient(90deg, rgba(57,255,20,0.8), rgba(57,255,20,0.1), transparent)'
213+
: 'linear-gradient(90deg, rgba(240,216,130,0.8), rgba(240,216,130,0.1), transparent)'
215214
}}
216215
/>
217216
))}
218217
</div>
218+
219+
{/* Outer decorative ring */}
220+
<motion.div
221+
initial={{ opacity: 0, scale: 0.5 }}
222+
animate={{ opacity: 0.4, scale: 1 }}
223+
transition={{ duration: 1.2, delay: 1.5 }}
224+
className="absolute -inset-20 border border-dashed border-alien-green/20 rounded-full"
225+
/>
219226
</motion.div>
220227
</motion.section>
221228

@@ -267,19 +274,20 @@ const Contact: React.FC = () => {
267274
</div>
268275
</motion.a>
269276

270-
<motion.div
277+
<motion.a
278+
href="mailto:alien69flow@proton.me?subject=Support%20Request"
271279
whileHover={{ scale: 1.02, y: -4 }}
272-
className="group relative p-8 bg-gradient-to-br from-alien-gold/10 to-alien-gold/5 border border-alien-gold/20 rounded-3xl hover:border-alien-gold/50 transition-all overflow-hidden cursor-pointer"
280+
className="group relative p-8 bg-gradient-to-br from-alien-gold/10 to-alien-gold/5 border border-alien-gold/20 rounded-3xl hover:border-alien-gold/50 transition-all overflow-hidden"
273281
>
274282
<div className="absolute inset-0 bg-gradient-to-br from-alien-gold/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
275283
<div className="relative flex flex-col items-center text-center">
276284
<div className="p-4 bg-alien-gold/20 rounded-2xl mb-4 group-hover:shadow-[0_0_30px_rgba(240,216,130,0.3)] transition-shadow">
277285
<LifeBuoy className="w-6 h-6 text-alien-gold" />
278286
</div>
279287
<h3 className="text-white font-nasalization text-lg mb-2">Support Center</h3>
280-
<p className="text-muted-foreground text-sm">Get help from our team</p>
288+
<p className="text-muted-foreground text-sm">Email: alien69flow@proton.me</p>
281289
</div>
282-
</motion.div>
290+
</motion.a>
283291
</div>
284292
</motion.section>
285293

0 commit comments

Comments
 (0)