Added a few pages and components to the frontend

frontend/src/Components/BasicWindow.tsx

@@ -0,0 +1,18 @@
+import Header from './Header';
+import Footer from './Footer';
+
+function BasicWindow({ username, content, buttons }: { username: string, content: React.ReactNode, buttons:React.ReactNode }) {
+  return (
+    <div className="font-sans flex flex-col h-screen bg-white border-2 border-black overflow-auto pt-[110px]">
+      <Header username={username} />
+      <div className="flex flex-col items-center flex-grow">           
+        {content}
+      </div>
+      <Footer>
+        {buttons}
+      </Footer>
+    </div>
+  );
+}
+
+export default BasicWindow;

frontend/src/Components/Button.tsx

@@ -0,0 +1,10 @@
+function Button({text, onClick}: {text: string; onClick: () => void;}){
+   return <button 
+   onClick={onClick} 
+   className="inline-block py-1 px-8 font-bold bg-orange-500 text-white border-2 border-black rounded-full cursor-pointer mt-5 mb-5 transition-colors duration-10 hover:bg-orange-600 hover:text-gray-300 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 4vh;"
+   >
+       {text}
+      </button>
+}
+
+export default Button;

frontend/src/Components/Footer.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+function Footer({ children }: { children: React.ReactNode }) {
+  return (
+    <footer className="bg-white">
+     <div className="flex justify-end items-center h-16 space-x-6 pr-6">
+        {children}
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

frontend/src/Components/Header.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+
+function Header({ username }: { username: string }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleLogout = () => {
+    // Add any logout logic here
+  };
+
+  return (
+    <header className="fixed top-0 left-0 right-0 border-[1.75px] border-black text-black p-3 pl-5 flex items-center justify-between bg-cover"
+    style={{ backgroundImage: `url('src/assets/1.jpg')` }}>
+      <Link to="/your-projects">
+      <img src="/src/assets/TTIMElogo.png" alt="TTIME Logo" className="w-11 h-14 cursor-pointer" />
+      </Link>
+  
+      <div 
+        className="relative"
+        onMouseEnter={() => setIsOpen(true)}
+        onMouseLeave={() => setIsOpen(false)}
+      >
+        <button className="mr-4 underline font-bold text-white">
+          {username}
+        </button>
+  
+        {isOpen && (
+          <div className="absolute right-0 bg-white border rounded shadow-lg">
+            <Link to="/">
+            <button onClick={handleLogout} className="block px-2 py-1 text-black hover:bg-gray-200">Logout</button>
+            </Link>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+        }
+
+export default Header;
+