added Layout and weather card

frontend/src/App.tsx

@@ -1,7 +1,14 @@
 import "./App.css";
+import Layout from "./Layout/Layout.tsx";
+import WeatherCard from "./components/WeatherCard";
 
 function App() {
-  return <></>;
+  return (
+    <Layout>
+      <WeatherCard />
+    </Layout>
+  );
 }
 
+
 export default App;

frontend/src/Layout/Layout.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import Header from "../components/Header";
+
+type LayoutProps = {
+  children: React.ReactNode;
+};
+
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+  return (
+    <div className="flex flex-col min-h-screen bg-gradient-to-br from-blue-50 via-blue-100 to-blue-200 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900">
+      <Header />
+      <main>{children}</main>
+    </div>
+  );
+};
+
+export default Layout;

frontend/src/components/Header.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Cookies from "js-cookie";
+
+const Header: React.FC = () => {
+  const setApiKey = () => {
+    const apiKey = prompt("Enter your API key:");
+    if (apiKey) {
+      Cookies.set("apiKey", apiKey);
+    }
+  };
+  return (
+    <header>
+      <h1>Weather App</h1>
+      <button onClick={() => setApiKey()}>Set API Key</button>
+    </header>
+  );
+};
+
+export default Header;

frontend/src/components/WeatherCard.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+const WeaatherCard: React.FC = () => {
+  return (
+    <div>
+      <h2>Weather Card</h2>
+      <p>Current Weather will be displayed here</p>
+      <form action="" method="post">
+        <label htmlFor="city">Enter City:</label>
+        <input type="text" id="city" name="city" placeholder="City Name" />
+        <button type="submit">Get Weather</button>
+      </form>
+    </div>
+  );
+};
+
+export default WeaatherCard;