Skip to content

Commit d2027e2

Browse files
eshanizedeshanized
committed
feat(contact): modernize contact page with vibrant styling
- Update hero gradients with blue-purple-teal theme - Add glowing terminal status indicators - Enhance form buttons with vibrant gradients - Update contact method cards with new color scheme - Improve CTA section with updated gradients
1 parent 4c2a79a commit d2027e2

1 file changed

Lines changed: 21 additions & 21 deletions

File tree

‎app/contact/page.tsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -109,10 +109,10 @@ export default function Contact() {
109109
{/* Grid pattern background */}
110110
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
111111

112-
{/* Gradient overlays */}
113-
<div className="absolute inset-0 bg-gradient-to-br from-slate-50 via-background to-blue-50/30 dark:from-slate-950 dark:via-background dark:to-slate-900"></div>
114-
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(59,130,246,0.1),transparent_50%)] dark:bg-[radial-gradient(circle_at_30%_20%,rgba(59,130,246,0.15),transparent_50%)]"></div>
115-
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_80%,rgba(16,185,129,0.08),transparent_50%)] dark:bg-[radial-gradient(circle_at_70%_80%,rgba(16,185,129,0.12),transparent_50%)]"></div>
112+
{/* Gradient overlays - Vibrant */}
113+
<div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-background via-purple-50/30 to-teal-50/30 dark:from-blue-950 dark:via-background dark:via-purple-950/30 dark:to-teal-950/30"></div>
114+
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(96,165,250,0.15),transparent_50%)] dark:bg-[radial-gradient(circle_at_30%_20%,rgba(96,165,250,0.2),transparent_50%)]"></div>
115+
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_80%,rgba(167,139,250,0.1),transparent_50%)] dark:bg-[radial-gradient(circle_at_70%_80%,rgba(167,139,250,0.15),transparent_50%)]"></div>
116116

117117
<div className="container relative mx-auto px-4 sm:px-6 lg:px-8 py-32 lg:py-40">
118118
<motion.div
@@ -122,11 +122,11 @@ export default function Contact() {
122122
className="text-center"
123123
>
124124
{/* Terminal-style status badge */}
125-
<div className="inline-flex items-center space-x-3 mb-6 px-4 py-2 bg-background/80 backdrop-blur-sm border border-border/50 rounded-lg shadow-lg">
125+
<div className="inline-flex items-center space-x-3 mb-6 px-4 py-2 bg-background/80 backdrop-blur-sm border border-border/50 rounded-lg shadow-lg glow-blue">
126126
<div className="flex space-x-1.5">
127-
<div className="w-2.5 h-2.5 bg-red-400 rounded-full"></div>
128-
<div className="w-2.5 h-2.5 bg-yellow-400 rounded-full"></div>
129-
<div className="w-2.5 h-2.5 bg-emerald-400 rounded-full animate-pulse"></div>
127+
<div className="w-2.5 h-2.5 bg-gradient-to-r from-red-400 to-red-500 rounded-full shadow-lg shadow-red-400/50"></div>
128+
<div className="w-2.5 h-2.5 bg-gradient-to-r from-yellow-400 to-yellow-500 rounded-full shadow-lg shadow-yellow-400/50"></div>
129+
<div className="w-2.5 h-2.5 bg-gradient-to-r from-emerald-400 to-teal-500 rounded-full animate-pulse shadow-lg shadow-emerald-400/50"></div>
130130
</div>
131131
<span className="text-xs font-mono text-muted-foreground">contact.interface.tsx</span>
132132
</div>
@@ -135,7 +135,7 @@ export default function Contact() {
135135
<div className="mb-6 space-y-2">
136136
<div className="text-left max-w-fit mx-auto">
137137
<span className="text-sm font-mono text-muted-foreground/70">1 </span>
138-
<span className="text-sm font-mono text-cyan-500">const</span>
138+
<span className="text-sm font-mono text-blue-500">const</span>
139139
<span className="text-sm font-mono text-foreground"> contact = </span>
140140
<span className="text-sm font-mono text-purple-500">initializeConnection</span>
141141
<span className="text-sm font-mono text-foreground">();</span>
@@ -144,16 +144,16 @@ export default function Contact() {
144144
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-foreground tracking-tight leading-[1.1]">
145145
Get in{" "}
146146
<span className="relative inline-block">
147-
<span className="font-mono bg-gradient-to-r from-cyan-600 via-blue-500 to-orange-500 bg-clip-text text-transparent">
147+
<span className="font-mono bg-gradient-to-r from-blue-500 via-purple-500 to-teal-500 bg-clip-text text-transparent">
148148
Touch
149149
</span>
150-
<span className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-cyan-600 via-blue-500 to-orange-500 rounded-full"></span>
150+
<span className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 via-purple-500 to-teal-500 rounded-full"></span>
151151
</span>
152152
</h1>
153153

154154
<div className="text-left max-w-fit mx-auto">
155155
<span className="text-sm font-mono text-muted-foreground/70">2 </span>
156-
<span className="text-sm font-mono text-cyan-500">return</span>
156+
<span className="text-sm font-mono text-blue-500">return</span>
157157
<span className="text-sm font-mono text-foreground"> contact.</span>
158158
<span className="text-sm font-mono text-purple-500">establish</span>
159159
<span className="text-sm font-mono text-foreground">(</span>
@@ -186,7 +186,7 @@ export default function Contact() {
186186
transition={{ duration: 0.6, delay: 0.2 }}
187187
className="flex flex-col sm:flex-row gap-4 justify-center mb-16"
188188
>
189-
<Button size="lg" className="font-mono bg-gradient-to-r from-cyan-600 to-orange-600 hover:from-cyan-700 hover:to-orange-700 text-white shadow-lg hover:shadow-xl transition-all group">
189+
<Button size="lg" className="font-mono bg-gradient-to-r from-blue-600 via-purple-600 to-teal-600 hover:from-blue-700 hover:via-purple-700 hover:to-teal-700 text-white shadow-lg hover:shadow-xl transition-all group glow-blue">
190190
<span className="mr-2">$</span>
191191
send --message
192192
<ChevronRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
@@ -241,7 +241,7 @@ export default function Contact() {
241241
>
242242
{/* Terminal-style header */}
243243
<div className="inline-flex items-center space-x-2 mb-4 px-4 py-2 bg-background/80 backdrop-blur-sm border border-border/50 rounded-lg">
244-
<span className="text-xs font-mono text-cyan-500">const</span>
244+
<span className="text-xs font-mono text-blue-500">const</span>
245245
<span className="text-xs font-mono text-blue-500">channels</span>
246246
<span className="text-xs font-mono text-muted-foreground">= getContactMethods();</span>
247247
</div>
@@ -434,7 +434,7 @@ export default function Contact() {
434434
/>
435435
</div>
436436

437-
<Button type="submit" className="w-full font-mono bg-gradient-to-r from-cyan-600 to-orange-600 hover:from-cyan-700 hover:to-orange-700">
437+
<Button type="submit" className="w-full font-mono bg-gradient-to-r from-blue-600 via-purple-600 to-teal-600 hover:from-blue-700 hover:via-purple-700 hover:to-teal-700 glow-blue">
438438
<span className="mr-2">$</span>
439439
send --message
440440
<Send className="ml-2 h-4 w-4" />
@@ -454,7 +454,7 @@ export default function Contact() {
454454
>
455455
<div>
456456
<div className="inline-flex items-center space-x-2 mb-4 px-4 py-2 bg-background/80 backdrop-blur-sm border border-border/50 rounded-lg">
457-
<span className="text-xs font-mono text-cyan-500">const</span>
457+
<span className="text-xs font-mono text-blue-500">const</span>
458458
<span className="text-xs font-mono text-blue-500">reasons</span>
459459
<span className="text-xs font-mono text-muted-foreground">= getContactReasons();</span>
460460
</div>
@@ -488,7 +488,7 @@ export default function Contact() {
488488
</div>
489489
<span className="text-xs font-mono text-muted-foreground/70">{reason.title}.ts</span>
490490
</div>
491-
<reason.icon className="h-4 w-4 text-cyan-600 group-hover:scale-110 transition-transform" />
491+
<reason.icon className="h-4 w-4 text-blue-600 group-hover:scale-110 transition-transform" />
492492
</div>
493493

494494
<div className="flex items-start space-x-3">
@@ -500,7 +500,7 @@ export default function Contact() {
500500
{/* Code snippet */}
501501
<div className="mb-2 p-2 bg-slate-900/20 dark:bg-slate-950/40 rounded border font-mono text-xs">
502502
<span className="text-emerald-400">$ </span>
503-
<span className="text-cyan-400">{reason.syntax}</span>
503+
<span className="text-blue-400">{reason.syntax}</span>
504504
</div>
505505

506506
<p className="text-sm text-muted-foreground">
@@ -603,7 +603,7 @@ export default function Contact() {
603603
{/* Terminal-style gradient background */}
604604
<div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900"></div>
605605
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:40px_40px]"></div>
606-
<div className="absolute inset-0 bg-gradient-to-br from-cyan-600/20 via-blue-500/20 to-orange-500/20"></div>
606+
<div className="absolute inset-0 bg-gradient-to-br from-blue-600/20 via-purple-500/20 to-teal-500/20"></div>
607607

608608
{/* Code line numbers effect */}
609609
<div className="absolute left-0 top-0 bottom-0 w-16 bg-slate-950/50 border-r border-slate-700/50 hidden lg:block">
@@ -627,7 +627,7 @@ export default function Contact() {
627627
<div className="flex items-start justify-center space-x-3 text-left">
628628
<span className="text-sm font-mono text-emerald-400">{"// "}</span>
629629
<div>
630-
<div className="text-sm font-mono text-cyan-400 mb-2">
630+
<div className="text-sm font-mono text-blue-400 mb-2">
631631
<span className="text-blue-400">async function</span> startConversation() {"{"}
632632
</div>
633633
</div>
@@ -654,7 +654,7 @@ export default function Contact() {
654654
</div>
655655

656656
<div className="flex flex-col sm:flex-row gap-4 justify-center mt-10">
657-
<Button size="lg" className="font-mono bg-gradient-to-r from-cyan-600 to-orange-600 hover:from-cyan-700 hover:to-orange-700 text-white shadow-xl group" asChild>
657+
<Button size="lg" className="font-mono bg-gradient-to-r from-blue-600 via-purple-600 to-teal-600 hover:from-blue-700 hover:via-purple-700 hover:to-teal-700 text-white shadow-xl group glow-blue" asChild>
658658
<Link href="mailto:hello@tiverse.dev">
659659
<Mail className="mr-2 h-4 w-4" />
660660
<span className="mr-2">$</span>

0 commit comments

Comments
 (0)