added more design using tailwind classes

frontend/src/components/Header.tsx

@@ -9,22 +9,40 @@ const Header: React.FC = () => {
 
   return (
     <>
-      <header className="bg-blue-600 text-white shadow-md py-6 px-4 flex items-center justify-between">
-        <h1 className="text-3xl font-bold tracking-wide drop-shadow">
-          Weather App
-        </h1>
+      <header className="bg-gradient-to-r from-blue-700 via-blue-600 to-blue-500 text-white shadow-lg py-8 px-6 flex items-center justify-between rounded-b-3xl">
+        <div className="flex items-center gap-4">
+          <img
+            src="/favicon.ico"
+            alt="Weather App Logo"
+            className="w-10 h-10 drop-shadow-lg"
+          />
+          <h1 className="text-4xl font-extrabold tracking-wide drop-shadow-lg">
+            Weather App
+          </h1>
+        </div>
         <button
-          className="bg-white text-blue-600 font-semibold px-4 py-2 rounded-lg shadow hover:bg-blue-100 transition"
+          className="bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200"
           onClick={() => setApiCard(true)}
         >
-          Set API Key
+          <span className="flex items-center gap-2">
+            <svg
+              className="w-5 h-5"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              viewBox="0 0 24 24"
+            >
+              <path d="M12 4v16m8-8H4" />
+            </svg>
+            Set API Key
+          </span>
         </button>
       </header>
       {apiCard && (
-        <div className="fixed inset-0 bg-gray-800 bg-opacity-40 flex items-center justify-center z-50">
-          <div className="bg-white rounded-xl shadow-lg p-8 w-full max-w-md relative">
+        <div className="fixed inset-0 bg-gray-900 bg-opacity-60 flex items-center justify-center z-50 transition-all">
+          <div className="bg-white rounded-2xl shadow-2xl p-10 w-full max-w-md relative border-2 border-blue-200">
             <button
-              className="absolute top-4 right-4 text-gray-400 hover:text-blue-600 text-xl"
+              className="absolute top-4 right-4 text-gray-400 hover:text-blue-600 text-2xl font-bold"
               onClick={() => setApiCard(false)}
               aria-label="Close"
             >