Feature: lots of styling improvements!

2026-03-18 09:02:32 +00:00 · 2024-08-09 19:43:33 +05:30
parent ce62fedfb8
commit 395fbce5b3
5 changed files with 107 additions and 43 deletions
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -2,8 +2,26 @@ import React from "react";

 const Header = () => {
  return (
-    <header className="bg-black text-white p-4">
+    <header className="bg-gradient-to-r from-cyan-500 via-green-500 to-blue-500 text-white p-4 animate-gradient">
      <h1 className="text-xl font-bold">DownLink</h1>
+      <style jsx>{`
+        @keyframes gradientFlow {
+          0% {
+            background-position: 0% 0%;
+          }
+          50% {
+            background-position: 100% 100%;
+          }
+          100% {
+            background-position: 0% 0%;
+          }
+        }
+
+        .animate-gradient {
+          background-size: 300% 300%;
+          animation: gradientFlow 15s ease infinite;
+        }
+      `}</style>
    </header>
  );
 };