team menu

apps/frontend/src/layouts/Layout.astro

@@ -23,6 +23,7 @@ import '../styles/global.css';
 				<a href="/blog" class="p-2 hover:text-purple-300 transition-colors duration-200">Blog</a>
 				<a href="/howtos" class="p-2 hover:text-purple-300 transition-colors duration-200">How-tos</a>
 				<a href="/code" class="p-2 hover:text-purple-300 transition-colors duration-200">Code</a>
+				<a href="/team" class="p-2 hover:text-purple-300 transition-colors duration-200">Team</a>
 				<a href="/contact" class="p-2 hover:text-purple-300 transition-colors duration-200">Contact us</a>
 			</nav>
 
@@ -40,6 +41,7 @@ import '../styles/global.css';
 				<a href="/blog" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Blog</a>
 				<a href="/howtos" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">How-tos</a>
 				<a href="/code" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Code</a>
+				<a href="/team" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Team</a>
 				<a href="/contact" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Contact us</a>
 			</nav>
 		</header>

apps/frontend/src/pages/team.astro

@@ -0,0 +1,81 @@
+---
+import Layout from '../layouts/Layout.astro';
+import mrZeroImg from '../assets/team/mr.zero.png';
+import mrOneImg from '../assets/team/mr.one.png';
+import mrTwoImg from '../assets/team/mr.two.png';
+import mrThreeImg from '../assets/team/mr.three.png';
+
+const teamMembers = [
+  {
+    name: 'Mr. Zero: Tasi',
+    description: 'His dream is to become an open-source knight.',
+    image: mrZeroImg.src
+  },
+  {
+    name: 'Mr. One: Ballz',
+    description: 'The cheese is half-eaten. Something here went very wrong.',
+    image: mrOneImg.src
+  },
+  {
+    name: 'Mr. Two: Z',
+    description: 'The egg was first or the chicken? It doesn\'t matter, we eat both.',
+    image: mrTwoImg.src
+  },
+  {
+    name: 'Mr. Three: gBird',
+    description: 'Life is beautiful because it contains the possibility of becoming human.',
+    image: mrThreeImg.src
+  }
+];
+---
+
+<Layout>
+  <header class="hero-section-gradient from-purple-600 to-blue-700 py-20 text-white">
+    <div class="hero-container text-center">
+      <h1 class="hero-title mb-6">Our Team</h1>
+      <p class="hero-subtitle mb-10 text-purple-100">
+        Meet the brilliant minds behind Teletype Games.
+      </p>
+    </div>
+  </header>
+
+  <main class="main-container py-16 px-4">
+    <div class="team-grid">
+      {teamMembers.map((member) => (
+        <div class="team-card">
+          <div class="team-card-image-container">
+            <img src={member.image} alt={member.name} class="team-card-image" />
+          </div>
+          <div class="team-card-content">
+            <h2 class="team-card-title">{member.name}</h2>
+            <p class="team-card-desc">{member.description}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  </main>
+</Layout>
+
+<style>
+  .team-grid {
+    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 max-w-7xl mx-auto;
+  }
+  .team-card {
+    @apply bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100 transition-all hover:scale-105;
+  }
+  .team-card-image-container {
+    @apply aspect-square overflow-hidden bg-gray-200;
+  }
+  .team-card-image {
+    @apply w-full h-full object-cover;
+  }
+  .team-card-content {
+    @apply p-6;
+  }
+  .team-card-title {
+    @apply text-xl font-black text-gray-900 mb-2;
+  }
+  .team-card-desc {
+    @apply text-gray-600 leading-relaxed;
+  }
+</style>