app/App.css

@@ -0,0 +1,83 @@
+/* app.css */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Basic body styling */
+body {
+  background-color: #f4f4f4;
+  color: #333;
+  line-height: 1.6;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+/* Header styling */
+.header {
+  background-color: #333;
+  color: #fff;
+  padding: 20px;
+  text-align: center;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: 100%;
+}
+
+.header h1 {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.header nav {
+  margin-top: 10px;
+}
+
+.header button {
+  margin: 0 10px;
+  padding: 10px 20px;
+  border-radius: 4px;
+  background-color: #4a90e2;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  border: none;
+}
+
+.header button:hover {
+  background-color: #357ab8;
+}
+
+/* Content container */
+.content {
+  padding: 20px;
+  flex: 1;
+  text-align: center;
+  max-width: 1200px;
+  margin: 0 auto;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  margin-top: 20px;
+}
+
+/* Responsive layout */
+@media (max-width: 768px) {
+  .header h1 {
+    font-size: 20px;
+  }
+
+  .header button {
+    margin: 5px 0;
+    padding: 10px;
+    font-size: 14px;
+  }
+
+  .content {
+    padding: 15px;
+    margin-top: 15px;
+  }
+}

app/page.tsx

@@ -1,22 +1,41 @@
-// MyApp.tsx
-import React from 'react';
+"use client";
+import React, { useState } from 'react';
 import Luca from './Luca';
 import Patrick from './Patrick';
 import Yasin from './Yasin';
 import './App.css'; // Import main styles
 
-function MyButton({ title }: { title: string }) {
-  return <button>{title}</button>;
-}
+function MyApp() {
+  // State to track the current view
+  const [currentView, setCurrentView] = useState('landing');
+
+  // Function to handle navigation
+  const handleNavigation = (view: string) => {
+    setCurrentView(view);
+  };
 
-export default function MyApp() {
   return (
     <div>
-      <div className="programmer-container">
-        <Luca />
-        <Patrick />
-        <Yasin />
+      {/* Header with navigation buttons */}
+      <header className="header">
+        <h1>Welcome to the Programmer Space</h1>
+        <nav>
+          <button onClick={() => handleNavigation('landing')}>Home</button>
+          <button onClick={() => handleNavigation('luca')}>Luca</button>
+          <button onClick={() => handleNavigation('patrick')}>Patrick</button>
+          <button onClick={() => handleNavigation('yasin')}>Yasin</button>
+        </nav>
+      </header>
+
+      <div className="content">
+        {/* Conditionally render the selected component */}
+        {currentView === 'landing' && <p>Welcome to our site! Choose a programmer's space above.</p>}
+        {currentView === 'luca' && <Luca />}
+        {currentView === 'patrick' && <Patrick />}
+        {currentView === 'yasin' && <Yasin />}
       </div>
     </div>
   );
 }
+
+export default MyApp;