mirror of
https://github.com/PotentiaRobotics/potentia-website.git
synced 2025-04-09 14:50:16 -04:00
glow up
This commit is contained in:
SanjayramVempati
parent
54bb6535ca
commit
b7782f8424
|
|
@ -1,43 +1,52 @@
|
|||
---
|
||||
// Image imports
|
||||
import logo from "../images/logo.png";
|
||||
// Components
|
||||
import NavLink from "./NavLink.astro";
|
||||
// Components---
|
||||
---
|
||||
|
||||
<header class="h-auto bg-slate-800 ">
|
||||
<div class=" flex flex-row justify-between ">
|
||||
<header class="h-auto bg-slate-800 " id="nav">
|
||||
<div class=" flex flex-row justify-between mx-12 ">
|
||||
|
||||
<!-- Logo -->
|
||||
<a href="/">
|
||||
<img src={logo} alt="Logo" class="mt-4 mb-2 h-10 ml-4 " />
|
||||
</a>
|
||||
<div>
|
||||
<a href="/">
|
||||
<img src={logo} alt="Logo" class="mt-8 mb-2 h-14 " />
|
||||
</a>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<a href="/">
|
||||
<button class="outline outline-purple-400 px-4 rounded-md
|
||||
shadow-lg py-1 mt-1
|
||||
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 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="/">
|
||||
<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">Donate</button>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24 ">
|
||||
<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-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="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 backgroundColor = Astro.props;
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
|
|
@ -10,7 +11,9 @@ var {title} = Astro.props;
|
|||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<body class='bg-slate-800'>
|
||||
<slot></slot>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -8,55 +8,172 @@ import Footer from '../components/Footer.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';
|
||||
|
||||
---
|
||||
|
||||
|
||||
<Layout>
|
||||
<!-- Nav -->
|
||||
<Nav></Nav>
|
||||
|
||||
|
||||
<div class="relative">
|
||||
<img src={olympian_hero} class="brightness-50 contrast-75 object-none w-full h-[44rem]" />
|
||||
<Nav></Nav>
|
||||
|
||||
<div class="absolute top-48 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<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>
|
||||
|
||||
<!-- First 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>
|
||||
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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 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>
|
||||
<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>
|
||||
<!-- 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>
|
||||
<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
|
||||
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>
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Second card -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</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>
|
||||
</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