app/App.css

@@ -0,0 +1,458 @@
+/* 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;
+    margin-top: 10em;
+    background-image: url(/img/image.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+/* 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%;
+    position: fixed;
+    top: 0;
+}
+
+.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);
+}
+
+/* Card styles */
+section .cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 20px;
+    margin-top: 50px;
+}
+
+section .card {
+    text-align: center;
+    list-style: none;
+    background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
+    border: 1px solid #3a4971; /* Slightly lighter border for card edges */
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+section .card:hover {
+    transform: translateY(-5px); /* Slight lift effect */
+    box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */
+}
+
+section .card img {
+  height: 80px; /* Image size */
+  width: 80px;
+  object-fit: cover;
+  border-radius: 50%; /* Circular image */
+  margin: 0 auto 15px;
+  box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */
+}
+
+section .card h3 {
+  margin: 10px 0;
+  font-size: 1.2em;
+  font-weight: bold;
+  color: #ffdd55; /* Star yellow for card titles */
+  text-shadow: 0 0 10px #ffdd55; /* Glow effect */
+}
+
+section .card p {
+  flex-grow: 1;
+  color: #c7d5e0; /* Light gray-blue for card content */
+  margin-bottom: 10px;
+}
+
+/* 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;
+  }
+
+   section .card {
+    padding: 12px; /* Adjusted padding */
+  }
+
+  section .card img {
+    height: 60px; /* Adjusted height */
+    width: 60px; /* Adjusted width */
+    border-radius: 8px; /* Adjusted border-radius */
+  }
+}
+/* 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;
+}
+
+/* Card styles */
+section.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  margin-top: 50px;
+}
+
+section.card {
+  text-align: center;
+  list-style: none;
+  background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
+  border: 1px solid #3a4971; /* Slightly lighter border for card edges */
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+section.card:hover {
+  transform: translateY(-5px); /* Slight lift effect */
+  box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */
+}
+
+section.card img {
+  height: 80px; /* Image size */
+  width: 80px;
+  object-fit: cover;
+  border-radius: 50%; /* Circular image */
+  margin: 0 auto 15px;
+  box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */
+}
+
+section.card h3 {
+  margin: 10px 0;
+  font-size: 1.2em;
+  font-weight: bold;
+  color: #ffdd55; /* Star yellow for card titles */
+  text-shadow: 0 0 10px #ffdd55; /* Glow effect */
+}
+
+section.card p {
+  flex-grow: 1;
+  color: #c7d5e0; /* Light gray-blue for card content */
+  margin-bottom: 10px;
+}
+
+/* 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;
+  }
+
+  section.cards {/* 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;
+    background-image: url(/img/image.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+/* 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%;
+    position: fixed;
+    top: 0;
+    z-index: 1000; /* Ensure header stays above other content */
+}
+
+.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: 80px auto 0; /* Adjusted for fixed header height */
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Card styles */
+section.cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 20px;
+    margin-top: 50px;
+}
+
+section.card {
+    text-align: center;
+    list-style: none;
+    background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
+    border: 1px solid #3a4971; /* Slightly lighter border for card edges */
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+section.card:hover {
+    transform: translateY(-5px); /* Slight lift effect */
+    box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */
+}
+
+section.card img {
+    height: 80px; /* Image size */
+    width: 80px;
+    object-fit: cover;
+    border-radius: 50%; /* Circular image */
+    margin: 0 auto 15px;
+    box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */
+}
+
+section.card h3 {
+    margin: 10px 0;
+    font-size: 1.2em;
+    font-weight: bold;
+    color: #ffdd55; /* Star yellow for card titles */
+    text-shadow: 0 0 10px #ffdd55; /* Glow effect */
+}
+
+section.card p {
+    flex-grow: 1;
+    color: #c7d5e0; /* Light gray-blue for card content */
+    margin-bottom: 10px;
+}
+
+/* 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; /* Adjusted for smaller screen size */
+    }
+
+    section.cards {
+        grid-template-columns: 1fr; /* One card per row on mobile */
+    }
+
+    section.card {
+        padding: 12px; /* Adjusted padding */
+    }
+
+    section.card img {
+        height: 60px; /* Adjusted height */
+        width: 60px; /* Adjusted width */
+        border-radius: 8px; /* Adjusted border-radius */
+    }
+}
+
+    grid-template-columns: 1fr; /* One card per row on mobile */
+  }
+
+  section.card {
+    padding: 12px; /* Adjusted padding */
+  }
+
+  section.card img {
+    height: 60px; /* Adjusted height */
+    width: 60px; /* Adjusted width */
+    border-radius: 8px; /* Adjusted border-radius */
+  }
+}
+

app/LandingPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React from 'react';
+import './App.css'; // Import specific styles for the Home page
+
+const Home = () => {
+  return (
+    <>
+      <div className="home-container">
+        <h2>About Us</h2>
+        <p>
+          We are a group of informatics students from IMS (Informatik Schule Sargans), currently learning React to prepare for an upcoming project. This project will be part of our traineeship at a company, where we'll apply our skills in a real-world setting. Our coursework in React is equipping us with the knowledge and experience needed to excel in this practical opportunity.
+        </p>
+
+        <section className="cards">
+          <div className="card">
+            <a href="https://interstellardevelopment.org/code/Patrick_Pluto" className="card-link" target="_blank" rel="noopener noreferrer">
+                <img src="/img/Patrick.png" alt="Patrick" />
+                <h3>Patrick</h3>
+                <p>
+                    Patrick is a highly skilled programmer with expertise in Java, GDScript, Bash, C, C++, and C#. He excels in developing scalable applications, automating tasks, and crafting interactive games. Additionally, Patrick is proficient in system administration, adeptly managing and optimizing IT infrastructures for smooth and secure operations.
+                </p>
+            </a>
+          </div>
+
+          <div className="card">
+            <a href="https://interstellardevelopment.org/code/sageTheDm" className="card-link" target="_blank" rel="noopener noreferrer">
+                <img src="/img/sage.png" alt="Sage" />
+                <h3>Luca</h3>
+                <p>
+                    Luca, Patrick's co-programmer, is skilled in Java, GDScript, Bash, and Basic Typewriter. His expertise in Java and GDScript supports robust application and game development, while his Bash scripting skills streamline automation. His knowledge of Basic Typewriter adds a classic touch to his versatile programming capabilities.
+                </p>
+            </a>
+          </div>
+
+          <div className="card">
+            <a href="https://interstellardevelopment.org/code/Patrick_Pluto" className="card-link" target="_blank" rel="noopener noreferrer">
+                <img src="/img/yasin.png" alt="Norway" />
+                <h3>Yasin</h3>
+                <p>
+                    Yasin is a proficient programmer with expertise in Java, where he has even developed games, as well as Bash, HTML, CSS, SQL, and NoSQL. His skills span from backend development and automation to web design and database management, making him a versatile asset in any tech project.
+                </p>
+            </a>
+          </div>
+        </section>
+      </div>
+    </>
+  );
+};
+
+export default Home;

app/layout.tsx

@@ -1,6 +1,6 @@
 export const metadata = {
-  title: 'Next.js',
-  description: 'Generated by Next.js',
+  title: 'React test v1',
+  description: 'Generated by Us.js',
 }
 
 export default function RootLayout({
@@ -13,4 +13,4 @@ export default function RootLayout({
       <body>{children}</body>
     </html>
   )
-}
+} 

app/luca/Luca.css

@@ -0,0 +1,31 @@
+/* Luca.css */
+.programmer-space {
+  padding: 20px;
+  margin: 10px;
+  border-radius: 8px;
+  color: #fff;
+}
+
+.luca {
+  background-color: #4a90e2; /* Blue */
+}
+
+.click-button {
+  padding: 10px 20px;
+  margin-top: 10px;
+  border: none;
+  border-radius: 4px;
+  background-color: #fff;
+  color: #4a90e2;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.click-button:hover {
+  background-color: #e3e3e3;
+}
+
+.lorem-ipsum {
+  margin-top: 20px;
+  font-size: 14px;
+}

app/luca/Luca.tsx

@@ -0,0 +1,37 @@
+// Luca.tsx
+"use client";
+
+import React, { useState } from 'react';
+import './Luca.css'; // Import specific styles for Luca
+
+const Luca = () => {
+  // State to keep track of the number of clicks
+  const [clickCount, setClickCount] = useState(0);
+
+  // Function to handle button click
+  const handleClick = () => {
+    setClickCount(clickCount + 1);
+  };
+
+  return (
+    <div className="programmer-space luca">
+      <h2>Luca's Space</h2>
+      <p>Welcome, Luca! This is your programming space.</p>
+
+      {/* Button to count clicks */}
+      <button onClick={handleClick} className="click-button">
+        Click me
+      </button>
+      <p>You've clicked the button {clickCount} times!</p>
+
+      {/* Lorem Ipsum text */}
+      <div className="lorem-ipsum">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Luca;

app/page.tsx

@@ -1,14 +1,42 @@
-function MyButton({ title }: { title: string }) {
-    return (
-        <button>{title}</button>
-    );
+"use client";
+import React, { useState } from 'react';
+import Luca from './luca/Luca';
+import Patrick from './patrick/Patrick';
+import Yasin from './yasin/Yasin';
+import Home from './LandingPage';
+import './App.css'; // Import main styles
+
+function MyApp() {
+  // State to track the current view
+  const [currentView, setCurrentView] = useState('landing');
+
+  // Function to handle navigation
+  const handleNavigation = (view: string) => {
+    setCurrentView(view);
+  };
+
+  return (
+    <div>
+      {/* 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' && <Home />}
+        {currentView === 'luca' && <Luca />}
+        {currentView === 'patrick' && <Patrick />}
+        {currentView === 'yasin' && <Yasin />}
+      </div>
+    </div>
+  );
 }
 
-export default function MyApp() {
-    return (
-        <div>
-        <h1>Welcome to my app</h1>
-        <MyButton title="I'm a button" />
-        </div>
-    );
-}
+export default MyApp;

app/patrick/Patrick.css

@@ -0,0 +1,11 @@
+/* Patrick.css */
+.programmer-space {
+  padding: 20px;
+  margin: 10px;
+  border-radius: 8px;
+  color: #fff;
+}
+
+.patrick {
+  background-color: #e94e77; /* Pink */
+}

app/patrick/Patrick.tsx

@@ -0,0 +1,13 @@
+// Patrick.tsx
+"use client";
+import React from 'react';
+import './Patrick.css'; // Import specific styles for Patrick
+
+const Patrick = () => (
+  <div className="programmer-space patrick">
+    <h2>Patrick's Space</h2>
+    <p>Welcome, Patrick! This is your programming space.</p>
+  </div>
+);
+
+export default Patrick;

app/yasin/Yasin.css

@@ -0,0 +1,11 @@
+/* Yasin.css */
+.programmer-space {
+  padding: 20px;
+  margin: 10px;
+  border-radius: 8px;
+  color: #fff;
+}
+
+.yasin {
+  background-color: #50e3c2; /* Teal */
+}

app/yasin/Yasin.tsx

@@ -0,0 +1,13 @@
+// Yasin.tsx
+"use client";
+import React from 'react';
+import './Yasin.css'; // Import specific styles for Yasin
+
+const Yasin = () => (
+  <div className="programmer-space yasin">
+    <h2>Yasin's Space</h2>
+    <p>Welcome, Yasin! This is your programming space.</p>
+  </div>
+);
+
+export default Yasin;