joungmin/tasteby
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign footer with playful cartoon-style animations

Browse Source 
Larger icon with border, hover scale+rotate effect, ping dot indicator,
gradient background, and smooth transitions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
joungmin
2026-03-09 15:09:56 +09:00
parent 237c982e6c
commit 08ea282baf
1 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/app/page.tsx
View File

@@ -852,9 +852,19 @@ export default function Home() {
</div>
{/* Footer */}
<footer className="shrink-0 border-t bg-gray-50 py-2 flex items-center justify-center gap-1.5 text-[11px] text-gray-400">
<img src="/icon.jpg" alt="SDJ Labs" className="w-4 h-4 rounded-full" />
SDJ Labs Co., Ltd.
<footer className="shrink-0 border-t bg-gradient-to-r from-gray-50 via-white to-gray-50 py-2.5 flex items-center justify-center gap-2 text-[11px] text-gray-400 group">
<div className="relative">
<img
src="/icon.jpg"
alt="SDJ Labs"
className="w-6 h-6 rounded-full border-2 border-orange-200 shadow-sm group-hover:scale-110 group-hover:rotate-12 transition-all duration-300"
/>
<span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-orange-300 rounded-full animate-ping opacity-75" />
<span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-orange-400 rounded-full" />
</div>
<span className="font-medium tracking-wide group-hover:text-gray-600 transition-colors">
SDJ Labs Co., Ltd.
</span>
</footer>
</div>
);