From 8bba792637dddaf2f3168bb3ff834acf0ce84d11 Mon Sep 17 00:00:00 2001
From: SanjayramVempati <101228879+SanjayramVempati@users.noreply.github.com>
Date: Wed, 5 Apr 2023 20:17:32 -0400
Subject: [PATCH] timeline

---
 src/components/Nav.astro                   |  37 +++---
 src/components/Timeline.astro              |  35 ++++++
 src/components/buttons/AlertButton.astro   |   7 ++
 src/components/buttons/OutlineButton.astro |  17 +++
 src/components/cards/Card.astro            |  19 +++
 src/components/cards/TimelineCard.astro    |  19 +++
 src/pages/index.astro                      | 135 +++++----------------
 7 files changed, 146 insertions(+), 123 deletions(-)
 create mode 100644 src/components/Timeline.astro
 create mode 100644 src/components/buttons/AlertButton.astro
 create mode 100644 src/components/buttons/OutlineButton.astro
 create mode 100644 src/components/cards/Card.astro
 create mode 100644 src/components/cards/TimelineCard.astro

diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index 7b01da0..2694549 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -2,6 +2,7 @@
 // Image imports
 import logo from "../images/logo.png";
 // Components---
+import OutlineButton from "../components/buttons/OutlineButton.astro";
 ---
 
 <header class="h-auto bg-slate-800  " id="nav">
@@ -29,19 +30,11 @@ import logo from "../images/logo.png";
   </div>
   
 <!-- Button -->
-    <div class="link">
-      <a href="/">
-        <button class="outline outline-purple-400  px-4 rounded-md
-        shadow-lg  py-1 mt-6 max-md:hidden 
-        text-white font-mono font-bold text-xl hover:bg-slate-100
-        hover:text-purple-400 hover:shadow-purple-600  transition-all duration-300">Donate</button>
+    <div class="link mt-6">
+      
+        <OutlineButton text="Donate" link="/" />
+        
     </a>
-
-    
-
- 
-  
-  
 </div>
   
   <!-- Hamburger button -->
@@ -52,22 +45,28 @@ import logo from "../images/logo.png";
 
     </svg>
   </button>
-
-  
 </div>
 
 <!-- Mobile pages -->
   <div id="links" class="hidden ml-8 flex flex-col text-white font-semibold px-2 pt-1 pb-4 text-lg  space-y-1">
-    <a href="/" class=" hover:bg-slate-700 rounded">Page 1</a>
-    <a href="/" class=" hover:bg-slate-700 rounded">Page 2</a>
-    <a href="/" class=" hover:bg-slate-700 rounded">Page 2</a>
-  </div>
+    <a href="/" class=" hover:bg-slate-700 rounded">Team</a>
+    <a href="/" class=" hover:bg-slate-700 rounded">Olympian </a>
+    <a href="/" class=" hover:bg-slate-700 rounded">Contact</a>
+    <a href="/" class="">  
+      <button class="outline outline-purple-400  px-2 rounded-md
+      shadow-lg   text-white font-mono font-bold text-xl hover:bg-slate-100 hover:text-purple-400 hover:shadow-purple-600  transition-all duration-300">Donate</button></a>
+    
+     
+
   </div>
 
 
-
+</div>
 </header>
 
+
+
+<!-- Scripts -->
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     // Hamburger menu
diff --git a/src/components/Timeline.astro b/src/components/Timeline.astro
new file mode 100644
index 0000000..4828186
--- /dev/null
+++ b/src/components/Timeline.astro
@@ -0,0 +1,35 @@
+---
+var {time, title, text } = Astro.props
+import TimelineCard from './cards/TimelineCard.astro'
+
+import AlertButton from './buttons/AlertButton.astro'
+---
+
+
+<ol class="relative border-l border-gray-200 dark:border-gray-700">                  
+   
+
+   <TimelineCard title="Website Finished" date="April 28 2023" >
+    <div slot="title">
+        <AlertButton>Hello</AlertButton>
+    </div>
+    The website has finally been finished after living for 1 month in Anish's basement. He finaly released me. FREEDOM!!!
+    </TimelineCard>
+
+   <TimelineCard title="Website Finished" date="April 28 2023" >
+    <div slot="title">
+        <AlertButton>Hello</AlertButton>
+    </div>
+    The website has finally been finished after living for 1 month in Anish's basement. He finaly released me. FREEDOM!!!
+    </TimelineCard>
+
+
+    <TimelineCard title="Website Finished" date="April 28 2023" >
+    <div slot="title">
+        <AlertButton>Hello</AlertButton>
+    </div>
+
+    The website has finally been finished after living for 1 month in Anish's basement. He finaly released me. FREEDOM!!!
+    </TimelineCard>
+ 
+</ol>
diff --git a/src/components/buttons/AlertButton.astro b/src/components/buttons/AlertButton.astro
new file mode 100644
index 0000000..9f489aa
--- /dev/null
+++ b/src/components/buttons/AlertButton.astro
@@ -0,0 +1,7 @@
+---
+
+---
+
+<button class="text-sm font-medium mr-2 px-2.5 py-0.5 rounded bg-blue-900 text-blue-300 ml-3">
+    <slot></slot>
+</span>
diff --git a/src/components/buttons/OutlineButton.astro b/src/components/buttons/OutlineButton.astro
new file mode 100644
index 0000000..412ed2b
--- /dev/null
+++ b/src/components/buttons/OutlineButton.astro
@@ -0,0 +1,17 @@
+---
+var {text, link} = Astro.props;
+---
+
+<a href={link}>
+
+
+
+    <button class="outline outline-purple-400  px-4 rounded-md
+            shadow-lg  py-1 h-10 max-md:hidden 
+            text-white font-mono font-bold text-xl hover:bg-slate-100
+            hover:text-purple-400 hover:shadow-purple-600  transition-all duration-300">
+            {text}
+        </button>
+
+
+</a>
\ No newline at end of file
diff --git a/src/components/cards/Card.astro b/src/components/cards/Card.astro
new file mode 100644
index 0000000..c7789fd
--- /dev/null
+++ b/src/components/cards/Card.astro
@@ -0,0 +1,19 @@
+---
+var {title, button, image} = Astro.props;
+---
+
+
+<div class="bg-zinc-900    hover:border rounded-xl">
+    <img src={image} alt="" class="  h-14 content-none ml-4 mt-2">
+
+    <h1 class=" ml-5 text-blue-400 text-2xl font-bold font-mono">{title} </h1>
+
+   <p class="  text-blue-300 mr-14 ml-5 text-xl font-serif font-light"><slot></slot> </p>
+  
+   <!-- Button -->
+  
+   <a href="/team" class="ml-1"  >
+    <button class="rounded-md  py-2 px-4  text-blue-100 font-serif  text-xl">{button}</button>
+  </a>
+
+  </div>
\ No newline at end of file
diff --git a/src/components/cards/TimelineCard.astro b/src/components/cards/TimelineCard.astro
new file mode 100644
index 0000000..a26305e
--- /dev/null
+++ b/src/components/cards/TimelineCard.astro
@@ -0,0 +1,19 @@
+---
+var {title = "Title", date="Jan 1 2023"} = Astro.props;
+---
+
+<li class="mb-10 ml-10 ">            
+    <span class="absolute flex items-center justify-center w-8 h-8  rounded-full -left-4 ring-8 ring-gray-900 bg-gray-900 text-blue-400 hover:ring-blue-500 hover:bg-blue-500 hover:text-gray-900 duration-300">
+        <svg aria-hidden="true" class="w-5 h-5 " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+    </span>
+
+    <h3 class="flex items-center mb-1 text-lg font-semibold text-white">{title}<slot name="title" ></slot></h3>
+
+    <time class="block mb-2 text-sm font-normal leading-none text-gray-500">{date}</time>
+
+    <p class="mb-4 text-base font-normal  text-gray-400">
+    <slot>
+         
+    </slot>
+    </p>
+</li>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 41341fa..58105a0 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,11 +5,16 @@ import Layout from '../layouts/Layout.astro';
 // Components
 import Nav from '../components/Nav.astro';
 import Footer from '../components/Footer.astro';
+import Card from '../components/cards/Card.astro';
+import TimelineCard from '../components/cards/TimelineCard.astro';
+import Timeline from '../components/Timeline.astro';
+
 //Image import
 import olympian_hero from '../images/olympian_hero.png';
 import team_pic from '../images/team_pic.png';
 import olympian1 from '../images/olympian1.png';
 import atom from '../images/atom_icon.png';
+import OutlineButton from '../components/buttons/OutlineButton.astro';
 
 ---
 
@@ -20,27 +25,22 @@ import atom from '../images/atom_icon.png';
     <Nav></Nav>
 
 
-    <!-- First section -->
+<!--Header Section -->
     <div class="flex flex-row mt-10 justify-between mb-20 space-x-10 max-lg:flex-col space-y-11 max-lg:text-center">
       <!-- Title -->
         
-          <h1 class="ml-36   mt-20 text-6xl w-[14em] text-white font-semibold font-sans max-lg: max-sm:w-3/4">Potentia Is On The <br>  Next  Level Of Tech</h1>
+          <h1 class="mx-auto xl:ml-32 max-md:w-  mt-20 text-6xl w-[14em] text-white font-semibold font-sans max-lg: max-md:w-3/4 max-lg:">Potentia Is On The <br>  Next  Level Of Tech</h1>
       
 
         <!-- Subheading -->
         <div class="mx-auto ">
-          <h3 class="mr-40  mx-auto text-xl w-[22em] text-gray-500 font-medium font-serif ">Potentia Robotics is the first high school team to design and build a fully-functional humanoid robot entirely from scratch.<br> PLEASE let me out the basement anish 😭 </h3>
+          <h3 class="mr-40  mx-auto text-xl w-[22em] text-blue-300 font-medium font-serif ">Potentia Robotics is the first high school team to design and build a fully-functional humanoid robot entirely from scratch.<br> PLEASE let me out the basement anish 😭 </h3>
           <!-- Buttons -->
-          <div class="space-x-4 flex flex-row ">
+          <div class="space-x-4 flex flex-row mt-8 ">
+           <OutlineButton text="Help" link="hellp"></OutlineButton>
             <a href="/">
-                <button class="outline outline-purple-400  px-4 rounded-md
-                shadow-lg  py-1 mt-10 max-md:hidden 
-                text-white font-mono font-bold text-xl hover:bg-slate-100
-                hover:text-purple-400 hover:shadow-purple-600  transition-all duration-300">Fund</button>
-            </a>
-            <a href="/">
-                <button class="  px-4 rounded-md
-                shadow-lg  py-1 mt-10 max-md:hidden 
+               <button class="  px-4 rounded-md
+                shadow-lg  py-1  max-md:hidden 
                 text-yellow-300 font-mono font-bold text-xl
                transition-all duration-300">Learn More ↗️</button>
             </a>
@@ -53,104 +53,31 @@ import atom from '../images/atom_icon.png';
  
 
 
-    <!-- Next section -->
+    <!-- Card Section -->
 
 
-    <div class="flex flex-row mt-14 mb-10 space-x-1 ">
-
-      <!-- 1st Card -->
-
-      <div class="bg-gray-900  w-full   hover:border rounded-xl">
-        <img src={atom} alt="" class="  h-14 content-none ml-6 mt-6">
-        <h1 class="mt-4 ml-6 text-white text-2xl font-bold font-mono">Olympian </h1>
-       <p class="mt-2 mb-6 text-gray-300 mr-14 ml-5 text-xl font-serif font-light">Potentia Robotics is the first high school team to design and build a fully-functional humanoid robot entirely from scratch. </p>
-      
-       <!-- Button -->
-      
-       <a href="/team" class="ml-3"  >
-        <button class="rounded-md  py-2 px-4  text-white font-serif  text-xl">Learn More ↗️ </button>
-      </a>
-      </div>
-
-      <!-- 2nd Card -->
-
-
-    
-      <div class="bg-gray-900  w-full mx-4 ml-20 hover:border rounded-xl">
-        <img src={atom} alt="" class="  h-14 content-none ml-6 mt-6">
-        <h1 class="mt-4 ml-6 text-white text-2xl font-bold font-mono">Olympian </h1>
-       <p class="mt-2 mb-6 text-gray-300 mr-14 ml-5 text-xl font-serif font-light">Potentia Robotics is the first high school team to design and build a fully-functional humanoid robot entirely from scratch. </p>
-      
-       <!-- Button -->
-      
-       <a href="/team" class="ml-3"  >
-        <button class="rounded-md  py-2 px-4  text-white font-serif  text-xl">Learn More ↗️ </button>
-      </a>
-      </div>
-
-      <!-- 3rd Card -->
-      
+    <div class="flex flex-row mt-14 mb-10 space-x-44 mx-12 max-md:flex-col max-md:space-x-0 max-md:space-y-4">
+      <!-- Cards Card -->
      
-      <div class="bg-gray-900  w-full mx-4 ml-20 hover:border rounded-xl">
-        <img src={atom} alt="" class="  h-14 content-none ml-6 mt-6">
-        <h1 class="mt-4 ml-6 text-white text-2xl font-bold font-mono">Olympian </h1>
-       <p class="mt-2 mb-6 text-gray-300 mr-14 ml-5 text-xl font-serif font-light">Potentia Robotics is the first high school team to design and build a fully-functional humanoid robot entirely from scratch. </p>
-      
-       <!-- Button -->
-      
-       <a href="/team" class="ml-3"  >
-        <button class="rounded-md  py-2 px-4  text-white font-serif  text-xl">Learn More ↗️ </button>
-      </a>
-      </div>
-
-
-      <!-- 4th card -->
-
-      <div class="bg-gray-900   w-full mx-4 ml-20 hover:border rounded-xl">
-        <img src={atom} alt="" class="  h-14 content-none ml-6 mt-6">
-        <h1 class="mt-4 ml-6 text-white text-2xl font-bold font-mono">Olympian </h1>
-       <p class="mt-2 mb-6 text-gray-300 mr-14 ml-5 text-xl font-serif font-light">Potentia Robotics is the first high school team to design and build a fully-functional humanoid robot entirely from scratch. </p>
-      
-       <!-- Button -->
-      
-       <a href="/team" class="m-3"  >
-        <button class="rounded-md  py-2 px-4  text-white font-serif  text-xl">Learn More ↗️ </button>
-      </a>
-      </div>
-
-      
-
-      <!-- Second card -->
-
-      
-
-    
-
-
-
-
+      <Card title="Title" image={atom} button="Learn More ↗️" >Potentia Robotics is the first high school team to design and build a fully-functional humanoid robot entirely from scratch </Card>
+      <Card title="Title" image={atom} button="Learn More ↗️" >Potentia Robotics is the first high school team to design and build a fully-functional humanoid robot entirely from scratch </Card>
+      <Card title="Title" image={atom} button="Learn More ↗️" >Potentia Robotics is the first high school team to design and build a fully-functional humanoid robot entirely from scratch </Card>
     </div>
-     
+
+
+
+    <!-- Timeline -->
+    <div class="text-center mb-10 mt-36">
+      <h1 class="mb-10 text-4xl text-white font-semibold">Updates</h1>
+    </div>
+
+    <div class="justify-center flex ">
+      <Timeline></Timeline>
+    </div>
+
 
  
-	<!-- Banner -->
-  <div class="relative mt-8  items-center ">
-    <img src={olympian_hero} class=" rounded-2xl brightness-50 contrast-75 object-none w-screen h-[24rem]" />
-      <!-- Headers -->
-   
-      <!-- Button -->
-        <h1 class="font-bold  text-center text-xl mt-2">
-        <a href="/team"  >
-          <button class="  outline outline-orange-400   rounded-md
-          shadow-lg  py-2 px-4 mt-7
-          text-white bg-cyan-700 font-mono font-bold text-xl hover:bg-white
-          hover:text-cyan-400 hover:shadow-cyan-600  transition-all duration-300">Meet the Team </button>
-        </a> 
-      
-      </h1>
-        <!-- Button -->
-        
-    </div>
+	
 </div>