mirror of
https://github.com/PotentiaRobotics/potentia-website.git
synced 2025-04-21 12:00:19 -04:00
glow up
This commit is contained in:
SanjayramVempati
parent
54bb6535ca
commit
b7782f8424
|
|
@ -1,43 +1,52 @@
|
||||||
---
|
---
|
||||||
// Image imports
|
// Image imports
|
||||||
import logo from "../images/logo.png";
|
import logo from "../images/logo.png";
|
||||||
// Components
|
// Components---
|
||||||
import NavLink from "./NavLink.astro";
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<header class="h-auto bg-slate-800 ">
|
<header class="h-auto bg-slate-800 " id="nav">
|
||||||
<div class=" flex flex-row justify-between ">
|
<div class=" flex flex-row justify-between mx-12 ">
|
||||||
|
|
||||||
<!-- Logo -->
|
<!-- Logo -->
|
||||||
|
<div>
|
||||||
<a href="/">
|
<a href="/">
|
||||||
<img src={logo} alt="Logo" class="mt-4 mb-2 h-10 ml-4 " />
|
<img src={logo} alt="Logo" class="mt-8 mb-2 h-14 " />
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Desktop Pages -->
|
|
||||||
<div class="flex flex-row visible max-sm:hidden my-auto mr-4 text-sm space-x-6 ">
|
|
||||||
<div class="mt-2 space-x-5 max-lg:space-x-10 max-md:space-x-4">
|
|
||||||
<NavLink href="/" text="About Us" />
|
|
||||||
<NavLink href="/" text="Timeline" />
|
|
||||||
<NavLink href="/" text="Olympian" />
|
|
||||||
<NavLink href="/" text="Sponsors" />
|
|
||||||
<NavLink href="/" text="Contact" />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Desktop Pages -->
|
||||||
|
<div class="flex flex-row max-md:hidden my-auto mr-4 mt-12 text-sm space-x-6 ">
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Button -->
|
||||||
|
<div class="link">
|
||||||
<a href="/">
|
<a href="/">
|
||||||
<button class="outline outline-purple-400 px-4 rounded-md
|
<button class="outline outline-purple-400 px-4 rounded-md
|
||||||
shadow-lg py-1 mt-1
|
shadow-lg py-1 mt-10 max-md:hidden
|
||||||
text-white font-mono font-bold text-xl hover:bg-slate-100
|
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>
|
hover:text-purple-400 hover:shadow-purple-600 transition-all duration-300">Donate</button>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Hamburger button -->
|
<!-- Hamburger button -->
|
||||||
<button type="button" id='burg' class="mt-2 block text-gray-500 hover:text-white focus:text-white focus:outline-none mr-10 visible sm:hidden">
|
<button type="button" id='burg' class="mt-5 block text-gray-500 hover:text-white focus:text-white focus:outline-none visible md:hidden">
|
||||||
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24 ">
|
<svg class="h-8 w-8 fill-current" viewBox="0 0 24 24 ">
|
||||||
<path id="ham" class="visible" fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
|
<path id="ham" class="visible" fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
|
||||||
<path id="x" class="hidden" fill-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"/>
|
<path id="x" class="hidden" fill-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"/>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
---
|
|
||||||
const {href, text} = Astro.props;
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<a href={href} class=" text-xl font-mono object-cover text-slate-300 hover:text-gray-400 duration-500 nav ">
|
|
||||||
{text}
|
|
||||||
</a>
|
|
||||||
BIN
src/images/atom_icon.png
Normal file
BIN
src/images/atom_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 628 KiB |
BIN
src/images/bot2.png
Normal file
BIN
src/images/bot2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 507 KiB |
BIN
src/images/olympian1.png
Normal file
BIN
src/images/olympian1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
|
|
@ -1,5 +1,6 @@
|
||||||
---
|
---
|
||||||
var {title} = Astro.props;
|
var {title} = Astro.props;
|
||||||
|
var backgroundColor = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
@ -10,7 +11,9 @@ var {title} = Astro.props;
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
|
|
||||||
|
<body class='bg-slate-800'>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -8,55 +8,172 @@ import Footer from '../components/Footer.astro';
|
||||||
//Image import
|
//Image import
|
||||||
import olympian_hero from '../images/olympian_hero.png';
|
import olympian_hero from '../images/olympian_hero.png';
|
||||||
import team_pic from '../images/team_pic.png';
|
import team_pic from '../images/team_pic.png';
|
||||||
|
import olympian1 from '../images/olympian1.png';
|
||||||
|
import atom from '../images/atom_icon.png';
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
<!-- Nav -->
|
<!-- Nav -->
|
||||||
|
|
||||||
<Nav></Nav>
|
<Nav></Nav>
|
||||||
|
|
||||||
|
|
||||||
<div class="relative">
|
<!-- First section -->
|
||||||
<img src={olympian_hero} class="brightness-50 contrast-75 object-none w-full h-[44rem]" />
|
<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 -->
|
||||||
|
|
||||||
<div class="absolute top-48 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
<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="font-bold text-7xl font-sans text-center text-white ">Potentia Robotics</h1>
|
|
||||||
<h2 class="font-bold text-center text-xl mt-10 font-sans text-red-600 italic">The first high school team to design and build a walking humanoid robot. </h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class=" flex flex-row pb-20" >
|
|
||||||
<div class="ml-20 mt-20">
|
|
||||||
<h1 class="text-3xl text-cyan-800 font-bold ">Who We Are</h1>
|
|
||||||
<div class="mt-6 mr-20">
|
|
||||||
|
|
||||||
<p class=" text-lg ">Potentia Robotics is the <span class="font-bold">first high school team</span> to design and build a <span class="font-bold">fully-functional humanoid robot</span> entirely from scratch. It's run by students from the Thomas Jefferson High School for Science and Technology (TJHSST).</p>
|
<!-- Subheading -->
|
||||||
<p class="mt-6 text-lg ">At Potentia Robotics, we want to push the boundaries of what high-school students can achieve. Our ultimate goal is to <span class="font-bold">further STEM knowledge</span> in the K-12 community while leading by example and showing other students that age isn't a limiting factor for any project, no matter how large-scale.</p>
|
<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>
|
||||||
|
<!-- Buttons -->
|
||||||
|
<div class="space-x-4 flex flex-row ">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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
|
||||||
|
text-yellow-300 font-mono font-bold text-xl
|
||||||
|
transition-all duration-300">Learn More ↗️</button>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mr-60 mt-20">
|
|
||||||
<img src={team_pic} alt="" class="w-[120em] ">
|
|
||||||
<a href="/team" >
|
|
||||||
<button class=" outline outline-orange-400 rounded-md
|
</div>
|
||||||
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>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Next 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="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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Second card -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
|
|
||||||
<Footer></Footer>
|
<Footer></Footer>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Make the navbar shift down only after 3 seconds -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Make the Potentia robotics div banner slide in when the website loads -->
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user