Skip to content

Commit d974f1d

Browse files
eshanizedeshanized
committed
style(footer): apply vibrant theme with enhanced visuals
- Add rainbow gradient top border - Update terminal status indicators with glow effects - Replace cyan colors with blue-purple scheme - Enhance social links and command line styling
1 parent 9c194ac commit d974f1d

1 file changed

Lines changed: 28 additions & 28 deletions

File tree

‎components/layout/footer.tsx‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -68,20 +68,20 @@ export function Footer() {
6868
{/* Code grid background */}
6969
<div className="absolute inset-0 bg-[linear-gradient(to_right,#1e293b12_1px,transparent_1px),linear-gradient(to_bottom,#1e293b12_1px,transparent_1px)] bg-[size:32px_32px]"></div>
7070

71-
{/* Gradient overlays */}
72-
<div className="absolute inset-0 bg-gradient-to-br from-blue-950/20 via-slate-950 to-cyan-950/20"></div>
71+
{/* Gradient overlays - Vibrant */}
72+
<div className="absolute inset-0 bg-gradient-to-br from-blue-950/30 via-slate-950 via-purple-950/20 to-teal-950/30"></div>
7373

74-
{/* Terminal-style top border */}
75-
<div className="h-1 bg-gradient-to-r from-blue-500 via-cyan-400 to-emerald-500"></div>
74+
{/* Terminal-style top border - Vibrant gradient */}
75+
<div className="h-1 bg-gradient-to-r from-blue-500 via-purple-500 via-teal-500 to-emerald-500"></div>
7676

7777
<div className="container relative mx-auto px-4 sm:px-6 lg:px-8 py-16">
7878
{/* Terminal Header */}
7979
<div className="mb-12">
80-
<div className="inline-flex items-center space-x-3 mb-6 px-4 py-2 bg-slate-900/80 backdrop-blur-sm border border-slate-700/50 rounded-lg">
80+
<div className="inline-flex items-center space-x-3 mb-6 px-4 py-2 bg-slate-900/80 backdrop-blur-sm border border-blue-500/30 rounded-lg glow-blue">
8181
<div className="flex space-x-1.5">
82-
<div className="w-2.5 h-2.5 bg-red-400 rounded-full"></div>
83-
<div className="w-2.5 h-2.5 bg-yellow-400 rounded-full"></div>
84-
<div className="w-2.5 h-2.5 bg-emerald-400 rounded-full animate-pulse"></div>
82+
<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>
83+
<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>
84+
<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>
8585
</div>
8686
<span className="text-xs font-mono text-slate-400">footer.component.tsx</span>
8787
</div>
@@ -109,16 +109,16 @@ export function Footer() {
109109

110110
{/* Status indicators */}
111111
<div className="flex flex-wrap gap-3">
112-
<div className="flex items-center space-x-2 px-3 py-1.5 bg-slate-900/60 border border-slate-700/50 rounded-lg">
113-
<div className="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></div>
112+
<div className="flex items-center space-x-2 px-3 py-1.5 bg-slate-900/60 border border-emerald-500/30 rounded-lg hover:border-emerald-500/60 transition-all hover:glow-blue">
113+
<div className="w-2 h-2 bg-gradient-to-r from-emerald-400 to-teal-500 rounded-full animate-pulse shadow-lg shadow-emerald-400/50"></div>
114114
<span className="text-xs font-mono text-slate-400">status: active</span>
115115
</div>
116-
<div className="flex items-center space-x-2 px-3 py-1.5 bg-slate-900/60 border border-slate-700/50 rounded-lg">
117-
<div className="w-2 h-2 bg-blue-400 rounded-full"></div>
116+
<div className="flex items-center space-x-2 px-3 py-1.5 bg-slate-900/60 border border-blue-500/30 rounded-lg hover:border-blue-500/60 transition-all hover:glow-blue">
117+
<div className="w-2 h-2 bg-gradient-to-r from-blue-400 to-blue-500 rounded-full shadow-lg shadow-blue-400/50"></div>
118118
<span className="text-xs font-mono text-slate-400">build: passing</span>
119119
</div>
120-
<div className="flex items-center space-x-2 px-3 py-1.5 bg-slate-900/60 border border-slate-700/50 rounded-lg">
121-
<div className="w-2 h-2 bg-cyan-400 rounded-full"></div>
120+
<div className="flex items-center space-x-2 px-3 py-1.5 bg-slate-900/60 border border-purple-500/30 rounded-lg hover:border-purple-500/60 transition-all hover:glow-purple">
121+
<div className="w-2 h-2 bg-gradient-to-r from-purple-400 to-purple-500 rounded-full shadow-lg shadow-purple-400/50"></div>
122122
<span className="text-xs font-mono text-slate-400">version: 2024.1</span>
123123
</div>
124124
</div>
@@ -127,9 +127,9 @@ export function Footer() {
127127
{/* Social Links with Terminal Style */}
128128
<div className="lg:text-right">
129129
<div className="mb-4">
130-
<span className="text-sm font-mono text-cyan-400">const</span>
130+
<span className="text-sm font-mono text-blue-400">const</span>
131131
<span className="text-sm font-mono text-slate-300"> socialLinks = </span>
132-
<span className="text-sm font-mono text-yellow-400">{"["}</span>
132+
<span className="text-sm font-mono text-purple-400">{"["}</span>
133133
</div>
134134

135135
<div className="space-y-3 mb-4">
@@ -162,7 +162,7 @@ export function Footer() {
162162
))}
163163
</div>
164164

165-
<div className="text-sm font-mono text-yellow-400 lg:text-right">
165+
<div className="text-sm font-mono text-purple-400 lg:text-right">
166166
{"];"}
167167
</div>
168168
</div>
@@ -176,7 +176,7 @@ export function Footer() {
176176
{/* Section header with code syntax */}
177177
<div className="flex items-center space-x-2 mb-4">
178178
<span className="text-sm font-mono text-purple-400">interface</span>
179-
<span className="text-sm font-mono text-cyan-400 capitalize">{section.title}</span>
179+
<span className="text-sm font-mono text-blue-400 capitalize">{section.title}</span>
180180
<span className="text-sm font-mono text-slate-500">{"{"}</span>
181181
</div>
182182

@@ -193,8 +193,8 @@ export function Footer() {
193193
<span className="text-slate-600 text-xs">
194194
{String(index + 1).padStart(2, '0')}
195195
</span>
196-
{Icon && <Icon className="h-3 w-3 text-slate-500 group-hover:text-cyan-400 transition-colors" />}
197-
<span className="group-hover:text-cyan-400 transition-colors">
196+
{Icon && <Icon className="h-3 w-3 text-slate-500 group-hover:text-blue-400 transition-colors" />}
197+
<span className="group-hover:text-blue-400 transition-colors">
198198
{item.name}
199199
</span>
200200
<span className="text-slate-600">;</span>
@@ -212,20 +212,20 @@ export function Footer() {
212212

213213
{/* Terminal Command Line */}
214214
<div className="mb-8">
215-
<div className="bg-slate-900/80 backdrop-blur-sm border border-slate-700/50 rounded-lg p-4">
215+
<div className="bg-slate-900/80 backdrop-blur-sm border border-blue-500/30 rounded-lg p-4 glow-blue">
216216
<div className="flex items-center space-x-2 mb-2">
217-
<div className="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></div>
217+
<div className="w-2 h-2 bg-gradient-to-r from-emerald-400 to-teal-500 rounded-full animate-pulse shadow-lg shadow-emerald-400/50"></div>
218218
<span className="text-xs font-mono text-emerald-400">tiverse@developer</span>
219219
<span className="text-xs font-mono text-slate-500">:</span>
220220
<span className="text-xs font-mono text-blue-400">~/projects</span>
221221
<span className="text-xs font-mono text-slate-400">$</span>
222222
</div>
223223
<div className="flex flex-wrap items-center gap-2 text-xs font-mono">
224-
<span className="text-cyan-400">npm</span>
224+
<span className="text-blue-400">npm</span>
225225
<span className="text-slate-300">install</span>
226-
<span className="text-yellow-400">@tiverse/tools</span>
226+
<span className="text-purple-400">@tiverse/tools</span>
227227
<span className="text-slate-500">--save</span>
228-
<div className="w-2 h-4 bg-slate-400 animate-pulse ml-1"></div>
228+
<div className="w-2 h-4 bg-gradient-to-b from-blue-400 to-purple-400 animate-pulse ml-1"></div>
229229
</div>
230230
</div>
231231
</div>
@@ -255,10 +255,10 @@ export function Footer() {
255255
</div>
256256

257257
{/* Version info */}
258-
<div className="flex items-center space-x-2 px-3 py-1.5 bg-slate-900/60 border border-slate-700/50 rounded-lg">
258+
<div className="flex items-center space-x-2 px-3 py-1.5 bg-slate-900/60 border border-purple-500/30 rounded-lg hover:border-purple-500/60 transition-all hover:glow-purple">
259259
<span className="text-xs font-mono text-slate-500">v</span>
260-
<span className="text-xs font-mono text-cyan-400">2024.1.0</span>
261-
<div className="w-1 h-1 bg-emerald-400 rounded-full"></div>
260+
<span className="text-xs font-mono text-blue-400">2024.1.0</span>
261+
<div className="w-1 h-1 bg-gradient-to-r from-emerald-400 to-teal-500 rounded-full shadow-lg shadow-emerald-400/50"></div>
262262
</div>
263263
</div>
264264
</div>

0 commit comments

Comments
 (0)