Skip to content

Commit 0d27139

Browse files
author
teycir
committed
refactor: replace Lucide icons with custom SVGs in Footer
Remove dependency on lucide-react for social media icons and replace with inline SVGs to enable custom animations (e.g., shimmer effect on GitHub) and precise styling control. Also remove redundant aria-labels from Twitter and LinkedIn links.
1 parent 8bdae78 commit 0d27139

1 file changed

Lines changed: 9 additions & 7 deletions

File tree

app/components/Footer.tsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
'use client';
22

3-
import { Github, Twitter, Linkedin } from 'lucide-react';
4-
53
export function Footer() {
64
return (
75
<footer className="fixed bottom-0 left-0 right-0 p-4 bg-dark-bg/90 backdrop-blur-sm border-t border-neon-green/10 z-50">
@@ -17,13 +15,17 @@ export function Footer() {
1715
</div>
1816
<div className="flex gap-4 items-center">
1917
<a href="https://github.com/teycir/timeseal#readme" target="_blank" rel="noopener noreferrer" className="hover:text-neon-green transition-colors flex items-center justify-center" aria-label="GitHub">
20-
<Github className="w-5 h-5" />
18+
<svg className="animate-shimmer" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" /></svg>
2119
</a>
22-
<a href="https://twitter.com/intent/tweet?text=Check%20out%20TimeSeal%20-%20Cryptographic%20time-locked%20vault!&url=https://timeseal.dev" target="_blank" rel="noopener noreferrer" className="hover:text-neon-green transition-colors flex items-center justify-center" aria-label="Twitter">
23-
<Twitter className="w-5 h-5" />
20+
<a href="https://twitter.com/intent/tweet?text=Check%20out%20TimeSeal%20-%20Cryptographic%20time-locked%20vault!&url=https://timeseal.dev" target="_blank" rel="noopener noreferrer" className="hover:text-neon-green transition-colors flex items-center justify-center">
21+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
22+
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z" />
23+
</svg>
2424
</a>
25-
<a href="https://www.linkedin.com/in/teycir-ben-soltane/" target="_blank" rel="noopener noreferrer" className="hover:text-neon-green transition-colors flex items-center justify-center" aria-label="LinkedIn">
26-
<Linkedin className="w-5 h-5" />
25+
<a href="https://www.linkedin.com/in/teycir-ben-soltane/" target="_blank" rel="noopener noreferrer" className="hover:text-neon-green transition-colors flex items-center justify-center">
26+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
27+
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
28+
</svg>
2729
</a>
2830
</div>
2931
</div>

0 commit comments

Comments
 (0)