mirror of
https://github.com/PotentiaRobotics/potentia-website.git
synced 2025-04-09 14:50:16 -04:00
timeline
This commit is contained in:
SanjayramVempati
parent
85490f1202
commit
8bba792637
|
|
@ -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
|
||||
|
|
|
|||
35
src/components/Timeline.astro
Normal file
35
src/components/Timeline.astro
Normal file
|
|
@ -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>
|
||||
7
src/components/buttons/AlertButton.astro
Normal file
7
src/components/buttons/AlertButton.astro
Normal file
|
|
@ -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>
|
||||
17
src/components/buttons/OutlineButton.astro
Normal file
17
src/components/buttons/OutlineButton.astro
Normal file
|
|
@ -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>
|
||||
19
src/components/cards/Card.astro
Normal file
19
src/components/cards/Card.astro
Normal file
|
|
@ -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>
|
||||
19
src/components/cards/TimelineCard.astro
Normal file
19
src/components/cards/TimelineCard.astro
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user