Header and Footer components are created

package.json

@@ -22,6 +22,6 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
-    "vite": "^7.0.4"
+    "vite": "^4.4.9"
   }
 }

src/App.css

@@ -5,7 +5,7 @@
   border: 1px solid #ccc;
   border-radius: 10px;
   font-family: sans-serif;
-  text-align: center;
+  /* text-align: center; */
 }
 
 button {

src/App.jsx

@@ -1,17 +1,22 @@
 import './App.css'
+import Header from './Header'
+import Footer from './Footer';
 
 function App() {
   return (
-    <div className="card">
-      <h1>Hello React</h1>
-      <p>This is a clean React + Vite project.</p>
-      <button onClick={() => alert('Clicked!')}>Click Me</button>
-      <footer style={{ textAlign: 'center', marginTop: '2rem' }}>
-  © 2025 vite-react-starter
-</footer>
-
+    <div className="app">
+      <Header />
+      <div className="card">
+        <h1>Hello React</h1>
+        <p>This is a clean React + Vite project.</p>
+        <button onClick={() => alert("Clicked!")}>Click Me</button>
+        {/* <footer style={{ textAlign: "center", marginTop: "2rem" }}>
+          © 2025 vite-react-starter
+        </footer> */}
+      </div>
+      <Footer />
     </div>
-  )
+  );
 }
 
 export default App

src/Footer.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+const Footer = () => {
+  return (
+    <div className="footer" style={{background:"#e3e6e9", bottom: 0, position: "absolute" , width:"100%", padding:"20px"}}>
+      <footer style={{ textAlign: "center", padding:"2erm" }}>
+        © 2025 vite-react-starter
+      </footer>
+    </div>
+  );
+};
+
+export default Footer;

src/Header.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import './header.css'
+function Header() {
+  return (
+    <div className="header-container">
+      <h1 className="title">Vite React Starter</h1>
+
+      <nav className="nav-links">
+        <p className="nav-item">Home</p>
+        <p className="nav-item">About</p>
+        <p className="nav-item">Contact</p>
+      </nav>
+    </div>
+  );
+}
+
+export default Header;

src/header.css

@@ -0,0 +1,48 @@
+.header-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 2rem;
+    width: 100%;
+    background-color: #e3e6e9;
+}
+
+.title {
+    margin: 0;
+    font-size: 1.8rem;
+}
+
+.nav-links {
+    display: flex;
+    gap: 2rem;
+}
+
+.nav-item {
+    margin: 0;
+    cursor: pointer;
+    font-weight: 500;
+}
+
+.nav-item:hover {
+    color: #007bff;
+}
+
+@media (max-width: 768px) {
+    .header-container {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .nav-links {
+        flex-direction: column;
+        gap: 0.5rem;
+        width: 100%;
+        margin-top: 1rem;
+    }
+
+    .title {
+        width: 100%;
+        font-size: 1.2rem;
+        text-decoration: underline;
+    }
+}

src/index.css

@@ -12,7 +12,9 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
+* {
+  box-sizing: border-box;
+}
 a {
   font-weight: 500;
   color: #646cff;
@@ -23,11 +25,12 @@ a:hover {
 }
 
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  margin: auto;
+  text-align: center;
+  /* display: flex; */
+  /* place-items: center; */
+  /* min-width: 320px;
+  min-height: 100vh; */
 }
 
 h1 {

vite.config.js

@@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  define: {
+    "crypto.hash": "undefined",
+  },
+});