---
// Layout
import Layout from '../layouts/Layout.astro';

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';

//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';

---


<Layout>
  <!-- Nav -->

    <Nav></Nav>


<!--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="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-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 mt-8 ">
           <OutlineButton text="Help" link="/"></OutlineButton>
            <a href="/">
               <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>
          </div>
        </div>
    </div>

  

 


    <!-- Card Section -->


    <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 -->
     
      <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-blue-400  underline underline-offset-4  font-semibold">Timeline</h1>
    </div>

    <div class="justify-center flex  ">
      <Timeline></Timeline>
    </div>
	
</div>

  
<!-- Footer -->
<Footer></Footer>
</Layout>


<!-- Make the navbar shift down  only after 3 seconds -->



 

<!-- Make the Potentia robotics div banner slide in when the website loads -->