team page

src/components/Nav.astro

@@ -22,9 +22,10 @@ import OutlineButton from "../components/buttons/OutlineButton.astro";
     
     <div class="text-xl font-mono space-x-24 max-lg:space-x-12 text-slate-300  duration-500 max-md:space-x-4  object-cover">
       
-      <a href="/"  class="hover:text-gray-400">TEAM</a>
-      <a href="/" class="hover:text-gray-400">O L Y M P I A N</a>
-      <a href="/" class="hover:text-gray-400">CONTACT</a>
+      <a href="/team"  class="hover:text-gray-400"><slot name="team">TEAM</slot></a>
+      <a href="/olympian"  class="hover:text-gray-400 font-bold"><slot name="olympian">O L Y M P I A N</slot></a>
+      <a href="/contact"  class="hover:text-gray-400"><slot name="contact">CONTACT</slot></a>
+      
     </div>  
     
   </div>
@@ -119,5 +120,9 @@ import OutlineButton from "../components/buttons/OutlineButton.astro";
     }
   });
   
+
+
+  
+
 </script>
 

src/components/buttons/Tag.astro

@@ -0,0 +1,7 @@
+---
+
+---
+
+<span class="inline-block bg-gray-300 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
+    <slot>Text goes here</slot>
+</span>

src/components/cards/PersonCard.astro

@@ -0,0 +1,27 @@
+---
+//Variables
+var {name = "First", image = "/src/images/mountain.jpg"} = Astro.props;
+
+
+//Image imports
+
+import mountain from "/src/images/mountain.jpg"
+
+---
+
+
+
+
+<div class="max-w-sm rounded overflow-hidden shadow-lg bg-slate-200">
+
+    <img class="w-full  h-64 " src={image}>
+    <div class="px-6 py-4">
+      <div class="font-bold text-xl mb-2">{name}</div>
+      <p class="text-gray-700 text-base">
+        <slot></slot>
+      </p>
+    </div>
+    <div class="px-6 pt-4 pb-2">
+     <slot name="tags"></slot>
+    </div>
+  </div>

src/layouts/Layout.astro

@@ -1,5 +1,5 @@
 ---
-var {title} = Astro.props;
+var {title}  = Astro.props;
 var backgroundColor = Astro.props;
 ---
 
@@ -9,7 +9,7 @@ var backgroundColor = Astro.props;
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
-		<title>{title}</title>
+		<title>Potentia Robotics  {title}</title>
 	</head>
 
 

src/pages/contact.astro

@@ -0,0 +1,24 @@
+---
+//Layout imports
+import Layout from '../layouts/Layout.astro';
+import Nav from '../components/Nav.astro';
+import Footer from '../components/Footer.astro';
+//Component Imports
+
+//Image imports
+
+
+
+---
+
+<Layout title="| Contact">
+<!-- Navbar -->
+<Nav> <span slot="contact" class="text-blue-300 shadow-2xl shadow-orange-600 ">CONTACT</span></Nav>
+
+
+
+
+
+    <!-- Footer -->
+    <Footer></Footer>
+</Layout>

src/pages/index.astro

@@ -2,9 +2,9 @@
 // Layout
 import Layout from '../layouts/Layout.astro';
 
-// Components
 import Nav from '../components/Nav.astro';
 import Footer from '../components/Footer.astro';
+// Components
 import Card from '../components/cards/Card.astro';
 import TimelineCard from '../components/cards/TimelineCard.astro';
 import Timeline from '../components/Timeline.astro';
@@ -74,13 +74,11 @@ import OutlineButton from '../components/buttons/OutlineButton.astro';
     <div class="justify-center flex ">
       <Timeline></Timeline>
     </div>
-
-
- 
 	
 </div>
 
   
+<!-- Footer -->
 <Footer></Footer>
 </Layout>
 

src/pages/olympian.astro

@@ -0,0 +1,24 @@
+---
+//Layout imports
+import Layout from '../layouts/Layout.astro';
+import Nav from '../components/Nav.astro';
+import Footer from '../components/Footer.astro';
+//Component Imports
+
+//Image imports
+
+
+
+---
+
+<Layout title="| Olympian">
+<!-- Navbar -->
+<Nav> <span slot="olympian" class="text-blue-300">O L Y M P I A N</span></Nav>
+
+
+
+
+
+    <!-- Footer -->
+    <Footer></Footer>
+</Layout>

src/pages/team.astro

@@ -0,0 +1,55 @@
+---
+//Layout imports
+import Layout from '../layouts/Layout.astro';
+import Nav from '../components/Nav.astro';
+import Footer from '../components/Footer.astro';
+//Component Imports
+import PersonCard from '../components/cards/PersonCard.astro';
+import Tag from '/src/components/buttons/Tag.astro';
+//Image imports
+import Ram from '/src/images/people/ram.png';
+import Anish from '/src/images/people/anish.jpg';
+
+
+
+---
+
+<Layout title="| Team">
+<!-- Navbar -->
+<Nav> <span slot="team" class="text-blue-300">TEAM</span></Nav>
+
+<!-- Header -->
+<h1 class="text-blue-300 text-center my-10 font-bold text-3xl font-mono">Meet our team</h1>
+
+
+<!-- Grid of people -->
+<div class=" flex flex-col">
+    <!-- Row 1 -->
+    <div class="mx-20 flex flex-row space-x-20">
+        <PersonCard title="Ram Vempati" image={Ram}>
+            Hello my name is ram and I am from tech support.
+            <div slot="tags">
+                <Tag>Potentia Lead</Tag>
+                <Tag>Engineering</Tag>
+                <Tag>Gait Generation</Tag>
+            </div>
+        </PersonCard>
+        <PersonCard title="Anish Suvurna" image={Anish}>
+            Hello my name is anish and I trap kids in my basmeent.
+            <div slot="tags">
+                <Tag>Engineering</Tag>
+                <Tag>Computer Vision</Tag>
+                <Tag>Creepy</Tag>
+            </div>
+        </PersonCard>
+
+    </div>
+
+
+</div>
+
+
+
+    <!-- Footer -->
+    <Footer></Footer>
+</Layout>