<%= image_tag "/bg3.png", class: "absolute w-full h-screen h-full object-cover z-[-1] fixed opacity-0 xl:opacity-20" %>

<a href="https://hackclub.com/"><img style="position: absolute; top: 100px; left: 0; border: 0; width: 256px; z-index: 10;" src="https://assets.hackclub.com/banners/2025.svg" alt="Hack Club"/></a>


<div class="relative h-screen" style="background: url('landingbg4.png'); background-size: cover; background-position-x: center">
    

    <div class="relative h-screen flex flex-col items-center justify-center">
        <%= image_tag "landing/landinglogo.png", class: "2xl:max-w-5xl xl:max-w-4xl md:max-w-3xl sm:max-w-xl max-w-sm mt-24" %>
        <div class="flex flex-col justify-center items-center">
            <%= render partial: "emailform" %>
            <%= link_to "https://forms.hackclub.com/highway-stickers", target: "_blank", rel: "noopener noreferrer" do %>
                <%= image_tag "/getstickers.gif", style: "width: 200px;", class: "mt-4 transition-transform duration-100 hover:scale-110" %>
            <% end %>

            <p class="md:hidden text-center mt-4 font-bold">Design any hardware project.</p>
            <p class="md:hidden text-center font-bold">Get a grant to make it real.</p>
            <p class="md:hidden text-center font-bold">For high schoolers 18 and under. Ends July 31.</p>
            
            
            <%= link_to "#about", class: "cursor-pointer" do %>
                <%= image_tag "/arrows.png", style: "width:50px;", class: "mt-12 animate-bobble" %>
            <% end %>

        </div>
    </div>

    <%= image_tag "/tracks1.svg", class: "w-full -mt-8 md:-mt-24" %>


</div>

 <%= image_tag "/tracks1.svg", class: "w-full -mt-8 md:-mt-24" %>

<div id="about" class="flex flex-col justify-center items-center lg:mx-12 mx-4">
    <div class="grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-4 lg:gap-8 mx-auto my-24 [&_p]:text-sm [&_p]:sm:text-base  justify-center">

        <div class="border-4 border-[#544FFF] rounded">
            <div class="flex flex-col justify-center items-center p-8 max-w-xl text-center">
                <div class="flex items-center justify-center gap-2 mx-auto">
                    <%= image_tag "/1.png", style: "width: 15px" %>
                    <h3 class="text-2xl font-bold ml-4 font-dystopian text-center">Design your project</h3>
                </div>
                <p class="mt-4">Custom routed PCBs? Check.</p>
                <p class="">Fully-featured 3D models? Check.</p>
                <p class="">Scratch-written firmware? Check.</p>
                <%= image_tag "/desc1.png", class: "w-full mt-4" %>
                <p class="mt-2 opacity-70"><i>Learn. Design. Make. Repeat. Repeat. Repeat.</i></p>
            </div>
        </div>

        <div class="border-4 border-[#544FFF] rounded">
            <div class="flex flex-col justify-center items-center p-8 max-w-xl text-center">
                <div class="flex items-center justify-center gap-2 mx-auto">
                    <%= image_tag "/2.png", style: "width: 20px" %>
                    <h3 class="text-2xl font-bold ml-4 font-dystopian text-center">Build it IRL</h3>
                </div>
                <p class="mt-4">Get all the parts sent to your doorstep.</p>
                <p class="mt-2">Build. Break. Iterate. Repeat.</p>
                <%= image_tag "/desc2.png", class: "w-full mt-8" %>
                <p class="mt-2 opacity-70"><i>3D printer work-in-progress by a 17-year-old Hack Clubber!</i></p>
            </div>
        </div>

        <div class="border-4 border-[#544FFF] rounded">
            <div class="flex flex-col justify-center items-center p-8 max-w-xl text-center">
                <div class="flex items-center justify-center gap-2 mx-auto">
                    <%= image_tag "/3.png", style: "width: 23px" %>
                    <h3 class="text-2xl font-bold ml-4 font-dystopian text-center">Get invited to Undercity</h3>
                </div>
                <p class="mt-4">Undercity is a 4-day hardware hackathon @ Github HQ San Francisco, July 11-14. There'll be 3D printers, a PCB mill, and hundreds of microcontrollers. Travel stipends included.</p>
                <%= image_tag "/desc3.png", class: "w-full mt-4" %>
                <p class="mt-2 opacity-70"><i>Teenagers demo'ing @ Hack Club's Scrapyard Hackathon!</i></p>
            </div>
        </div>
        
    </div>
</div>

<%= image_tag "/tracks3.svg", class: "w-full -mt-8" %>


<div class="my-20 mb-12 flex flex-col justify-center items-center mx-auto p-10">
    <p class="text-4xl md:text-6xl justify-center text-center font-bold mx-5 font-dystopian">Choose Your Track</p>
    <p class="text-center text-lg md:text-xl mx-5"><i>Design. Share. Build. Repeat. Make as many projects as you can!</i></p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mt-8">

            <%= link_to "/getting-started/overview", class: "block" do %>
                <div class="flex flex-col group border-2 border-[#5453FF] bg-[#302C61] hover:bg-[#403A88] rounded max-w-4xl justify-center text-center hover:shadow-[0_0_20px_5px_rgba(84,83,255,0.7)] transition-shadow duration-150 transition-colors hover:-rotate-1">
                    <div class="p-8 pb-0 space-y-4">
                        <p class="text-2xl font-semibold md:opacity-80 group-hover:opacity-100">Starter projects - follow a guide, get your parts!</p>
                        <p class="font-semibold opacity-60 group-hover:opacity-80"><i>For beginners, or if you're unsure of what to make.</i></p>
                        <%= image_tag "/track1.png", class: "bg-black h-96 mt-auto md:opacity-90 group-hover:opacity-100 max-w-2xl" %>
                    </div>
                    <p class="bg-[#5453FF] font-semibold py-2 mt-8">START NOW →</p>
                </div>
            <% end %>

            <%= link_to "/getting-started/overview", class: "block" do %>
                <div class="flex flex-col group border-2 border-[#5453FF] bg-[#302C61] hover:bg-[#403A88] rounded max-w-4xl justify-center text-center hover:shadow-[0_0_20px_5px_rgba(84,83,255,0.7)] transition-shadow  duration-150 transition-colors hover:rotate-1">
                    <div class="p-8 pb-0 space-y-4">
                        <p class="text-2xl font-semibold md:opacity-80 group-hover:opacity-100">Custom projects - get up to 350 USD*!</p>
                        <p class="font-semibold opacity-60 group-hover:opacity-80"><i>For epic, self-guided projects.</i></p>
                        <%= image_tag "/track2.png", class: "bg-black h-96 mt-auto md:opacity-90 group-hover:opacity-100 max-w-2xl" %>
                    </div>
                    <p class="bg-[#5453FF] font-semibold py-2 mt-8">START NOW →</p>
                </div>
            <% end %>
    </div>
</div>


<div class="flex justify-center items-center mb-24 md:mb-56 mx-5">
    <div class="bg-gradient-to-r from-[#fbc933] to-[#f0bd23] p-4 rounded-xl text-center max-w-3xl transition-transform duration-200 hover:scale-101">
        <div class="border-black border-6 p-8 rounded-lg text-black">
            <p class="font-dystopian text-4xl">What is this?</p>


            <p class="mt-4 font-medium"><b>Highway</b> is a grant program where you can design <i>any</i> project, and we'll send you the parts & funding you need to build it! </p> 
            <p class="mt-2 font-medium"> Repeat to get invited to <b>Undercity</b>, a 4-day hardware hackathon at GitHub HQ in July.</p>
            <p class="mt-4 font-medium"> There's both beginner & advanced tracks, so <i>everyone</i> is included. There'll be new content, freebies, and other awesome stuff from now until July 31st.<p>
            <p class="mt-4 font-medium"> We're a team of 15 teenagers from Hack Club, and this is our take on making the best hardware event yet :)<p>

        </div>
    </div>
</div>




<div class="relative h-[140vh] flex flex-col justify-center items-center my-32 mb-44" style="background: url('portal.png'); background-size: cover; background-position-x: center;">
    

    <%= image_tag "/stickerbomb2.png", class: "absolute -top-12 sm:-top-24 left-0 w-full z-10 object-cover object-top" %>

    <div class="flex flex-col justify-center items-center text-center h-[140vh] w-full p-5" style="background: radial-gradient(circle, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0) 95%)">
        <%= image_tag "/hackclubgh.png", class: "max-w-[150px]"%>
        <%= image_tag "/undercity3.svg", class: "max-w-xl"%>
        <p class="text-3xl font-bold">4-day hardware hackathon</p>
        <p class="text-3xl font-bold">July 11-14 @ Github HQ</p>

        
        <p class="mt-8">Collect points for every hardware project you make through Highway.</p>
        <p class="">Guaranteed invite to Undercity at 12 points.</p>

        <%= image_tag "/cerblights.png", class: "max-w-[200px] mt-4"%>

        <p class="mt-4 opacity-60"><i>The Cerberus guards the portal from Highway to Undercity.</i></p>
        <p class="opacity-60"><i>Can you make it in?</i></p>
        <div class="mt-8 transition-transform duration-100 hover:scale-110">
            <%= link_to "/getting-started/undercity", class: "rounded-3xl bg-[#5453FF] py-3 px-16 font-bold text-white hover:bg-[#3a3aFF] transition-colors duration-100" do %>
                LEARN MORE
            <% end %>    
        </div>
    </div>    

    <%= image_tag "/stickerbomb2.png", class: "absolute -bottom-12 sm:-bottom-24 left-0 w-full z-10 object-cover object-top" %>

</div>
<%# <%= render partial: "video" %>


<div class="mt-8 flex flex-col justify-center items-center mx-8">
    <p class="justify-center text-center font-bold text-6xl font-dystopian">FAQ</p>
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3  gap-4 mx-24 mt-8 mx-auto">
        <%= render partial: "card", locals: { title: "Eligibility", content: "Anyone 18 or below in high school is welcome! You will need to verify with ID when we send you your grant, as well as when you check in at Undercity." } %>
        <%= render partial: "card", locals: { title: "Are teams allowed for Highway projects?", content: "You are free to make the hardware project with a friend! However, you both need to journal, and the grant and points will be split between you two." } %>
        <%= render partial: "card", locals: { title: "Who's running this?", content: "A group of ~15 teenagers around the world! We're a part of Hack Club, a 503(c)(3) nonprofit supported by Github and many others." } %>
        
        <div class="bg-[#544FFF] rounded p-8 max-w-xl text-md text-center transition-transform duration-200 hover:scale-102">
            <p class="text-xl font-bold">I'm new to hardware, can I join?</p>
            <div class="mt-4 text-md">
                <p>Highway is for makers of all skill levels! We have a bunch of tutorials to follow if it's your first time - see the 
                    <a href="/getting-started/starter-projects" class="underline text-pink-300 hover:decoration-wavy" target="_blank" rel="noopenner noreferrer">Starter Projects</a>
                     section! No worries if you've never done it before.
                    </p>
            </div>
        </div>
        
        <div class="bg-[#544FFF] rounded p-8 max-w-xl text-md text-center transition-transform duration-200 hover:scale-102">
            <p class="text-xl font-bold">Is this legit?</p>
            <div class="mt-4 text-md">
                <p>Yup! Last winter, we ran <a href="https://highseas.hackclub.com/" class="underline text-pink-300 hover:decoration-wavy" target="_blank" rel="noopenner noreferrer">High Seas</a>, sponsored by Github!
                    Some of Hack Club's previous hackathons include 
                    <a href="https://www.youtube.com/watch?v=QvCoISXfcE8" class="underline text-pink-300 hover:decoration-wavy" target="_blank" rel="noopenner noreferrer">Apocalypse</a>, 
                    <a href="https://www.youtube.com/watch?v=8iM1W8kXrQA&t=1s" class="underline text-pink-300 hover:decoration-wavy" target="_blank" rel="noopenner noreferrer">Scrapyard</a>, 
                    <a href="https://www.youtube.com/watch?v=hiG3fYq3xUU" class="underline text-pink-300 hover:decoration-wavy" target="_blank" rel="noopenner noreferrer">Boreal</a>, and 
                    <a href="https://www.youtube.com/watch?v=fuTlToZ1SX8" class="underline text-pink-300 hover:decoration-wavy" target="_blank" rel="noopenner noreferrer">Juice</a>!    
                </p>
            </div>
        </div>

        <div class="bg-[#544FFF] rounded p-8 max-w-xl text-md text-center transition-transform duration-200 hover:scale-102">
            <p class="text-xl font-bold">I need help!</p>
            <div class="mt-4 text-md">
                <p>
                    Read the
                    <a href="/getting-started/faq" class="underline text-pink-300 hover:decoration-wavy" target="_blank" rel="noopenner noreferrer">Expanded FAQ</a> of our site.
                    Feel free to ask in #highway in the Hack Club Slack!
                    
                </p>
            </div>
        </div>

    </div>
</div>


<div class="relative overflow-hidden">
    <%= image_tag "landing/racecar.png", class: "absolute left-1/2 -translate-x-1/2 top-1/4 -translate-y-1/4", style: "width: 50%" %>
    <%= image_tag "landing/shards.png", class: "absolute top-1/2 -translate-y-1/2", style: "width: 50%" %>


    <div class="absolute bottom-0 md:bottom-12 w-full text-center mx-5">
        <div class="text-white md:text-lg flex flex-col justify-center text-center py-8">
            <p class="hidden md:block">Highway to Undercity is built with <span class="hover:text-red-300">♥︎</span> for teenagers, by teenagers</p>
            <p class="block md:hidden">Highway to Undercity is built with ♥︎ <br> for teenagers, by teenagers</p>
            <p><a href="https://hackclub.com/" class="underline text-blue-300 hover:decoration-wavy" target="_blank" rel="noopenner noreferrer">Hack Club</a> ・ <a href="https://hackclub.com/clubs/" class="underline text-blue-300 hover:decoration-wavy" target="_blank" rel="noopenner noreferrer">Clubs</a> ・ <a href="https://hackathons.hackclub.com/" class="underline text-blue-300 hover:decoration-wavy" target="_blank" rel="noopenner noreferrer">Hackathons</a></p>
        </div>
    </div>

    <%= image_tag "landing/landing3.png", style: "width: 100%" %>

</div>
