mirror of
https://github.com/System-End/highway.git
synced 2026-04-19 20:55:14 +00:00
244 lines
No EOL
12 KiB
Text
244 lines
No EOL
12 KiB
Text
|
|
|
|
<div class="landing-container">
|
|
<%= image_tag "landing/landingbg.png", class: "w-full" %>
|
|
|
|
<div class="landing-text-container">
|
|
<%= image_tag "landing/landinglogo.png", style: "width: 100%;" %>
|
|
|
|
<% if flash[:notice] %>
|
|
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
|
|
<span class="block sm:inline"><%= flash[:notice] %></span>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% if flash[:alert] %>
|
|
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
|
|
<span class="block sm:inline"><%= flash[:alert] %></span>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="landing-input-container">
|
|
<%= form_with url: rsvp_path, method: :post, local: true do |form| %>
|
|
<div class="border-4 border-[#544FFF] rounded-lg flex items-center max-w-md justify-center items-center">
|
|
<%= form.text_field :email, placeholder: "Enter your email", class: "landing-input bg-white text-black px-4 py-2 flex-grow" %>
|
|
<%= form.submit "→", class: "landing-button bg-[#544FFF] text-white px-4 py-2 font-bold" %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<%= image_tag "landing/tracks1.png", class: "w-full -mt-8" %>
|
|
|
|
</div>
|
|
|
|
<div class="flex flex-col justify-center items-center mx-12">
|
|
<div class="grid md:grid-cols-3 grid-cols-1 gap-8 mx-auto my-24">
|
|
<div class="relative">
|
|
<%= image_tag "landing/box.png", class: "w-full" %>
|
|
<div class="absolute inset-0 flex justify-center items-center">
|
|
<div class="p-8 py-16 max-w-xl text-xl text-center bg-opacity-75 rounded-lg">
|
|
Get up to $250 USD in grants per project you work on. Unlimited spots. All free for you.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative">
|
|
<%= image_tag "landing/box.png", class: "w-full" %>
|
|
<div class="absolute inset-0 flex justify-center items-center">
|
|
<div class="p-8 py-16 max-w-xl text-xl text-center bg-opacity-75 rounded-lg">
|
|
Join a community of 40,000 technical teenagers for help, advice, and motivation.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative">
|
|
<%= image_tag "landing/box.png", class: "w-full" %>
|
|
<div class="absolute inset-0 flex justify-center items-center">
|
|
<div class="p-8 py-16 max-w-xl text-xl text-center bg-opacity-75 rounded-lg">
|
|
Get invited to Undercity: a 4-day hardware hackathon @ Github HQ! Travel stipend included.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<%= image_tag "landing/tracks2.png", class: "w-full -mt-8" %>
|
|
|
|
|
|
<div class="grid md:grid-cols-2 grid-cols-1 gap-8 my-12 md:mx-44">
|
|
<%= image_tag "landing/racetrack.png", style: "width: 50%; margin: 10px auto;" %>
|
|
<div>
|
|
<p class="text-6xl font-bold">How Highway works:</p>
|
|
<div class="mt-8">
|
|
<p class="">1. Design your project! Journal, post updates & share your progress with others on this site!</p>
|
|
<p>2. When you're done making the PCB / CAD for your project, ship it to get it reviewed for a grant!</p>
|
|
<p>3. Buy the parts needed to physically build it!</p>
|
|
<p>4. Ship the finalized project - and repeat!</p>
|
|
|
|
<p class="mt-4">you can make as many projects as you want - as long as you finish building the previous one before getting the grant to the next one.</p>
|
|
<p>each project is worth a certain amount of points, depending on its technical complexity - get 12 points to get an invite to undercity!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="mt-12">
|
|
<p class="text-6xl justify-center text-center font-bold">Choose Your Road</p>
|
|
|
|
<div class="grid md:grid-cols-3 grid-cols-1 gap-8 mx-24 mt-24">
|
|
<div class="bg-[#544FFF] rounded p-8 py-16 max-w-xl text-xl text-center relative">
|
|
<%= image_tag "landing/sign3.png", class: "absolute left-1/2 -translate-x-1/2 -top-1/4", style: "width: 50%" %>
|
|
<p class="text-2xl font-bold">Tier 3 Project</p>
|
|
<div class="mt-4">
|
|
<p>Up to $60 USD in funding</p>
|
|
<p>Complexity: beginner</p>
|
|
<p>4 points each</p>
|
|
<p>examples: x, y, z</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-[#544FFF] rounded p-8 py-16 max-w-xl text-xl text-center">
|
|
<p class="text-2xl font-bold">Tier 2 Project</p>
|
|
<div class="mt-4">
|
|
<p>Up to $150 USD in funding</p>
|
|
<p>Complexity: medium</p>
|
|
<p>6 points each</p>
|
|
<p>examples: x, y, z</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-[#544FFF] rounded p-8 py-16 max-w-xl text-xl text-center">
|
|
<p class="text-2xl font-bold">Tier 1 Project</p>
|
|
<div class="mt-4">
|
|
<p>Up to $350 USD in funding</p>
|
|
<p>Complexity: epic</p>
|
|
<p>12 points each</p>
|
|
<p>examples: x, y, z</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<%= 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 left-1/2 -translate-x-1/2 top-3/4 -translate-y-3/4">
|
|
<div class="justify-center text-center items-center">
|
|
<p class="text-3xl font-bold">By the way, free stickers when you sign up!</p>
|
|
</div>
|
|
<div class="flex justify-center items-center mt-4">
|
|
<div class="landing-input-container">
|
|
<%= form_with url: signin_path, method: :post, local: true do |form| %>
|
|
<%= form.text_field :email, placeholder: "Enter your email", class: "landing-input" %>
|
|
<%= form.submit "Enter", class: "landing-button" %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<%= image_tag "landing/stick1.png", class: "absolute top-1/2 -translate-y-1/2 right-0 r-30", style: "width: 15%" %>
|
|
<%= image_tag "landing/stick2.png", class: "absolute top-1/2 -translate-y-1/2 right-12 r-30", style: "width: 15%" %>
|
|
</div>
|
|
|
|
|
|
|
|
<%= image_tag "landing/landing3.png", style: "width: 100%" %>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="mt-12 flex flex-col justify-center text-center">
|
|
<div class="justify-center text-center">
|
|
<p class="text-6xl font-bold">Beginner? Here's a pitstop!</p>
|
|
<p class="text-xl mt-2">If you're intimidated by the possibilites and unsure what to build - try one of our tutorials + get a kit to build it!</p>
|
|
</div>
|
|
|
|
<div class="grid xl:grid-cols-3 lg:grid-cols-2 grid-cols-1 gap-8 my-12 mx-auto">
|
|
<%= render partial: "kit", locals: {
|
|
badge: "recommended",
|
|
image: "landing/hackpad.png",
|
|
title: "Hackpad",
|
|
description: "Make your own macropad - use for desktop shortcuts!",
|
|
back_description: "A macropad is a device used for keyboard shortcuts! Want to turn your mic on/off using a key, change video streaming settings, or open a specific configuration in an app? A macropad can do it all!",
|
|
learnings: ["How to make a PCB using Kicad", "How to design a case using Fusion"],
|
|
link: "#"
|
|
} %>
|
|
<%= render partial: "kit", locals: {
|
|
badge: "",
|
|
image: "landing/hackpad.png",
|
|
title: "Hackpad",
|
|
description: "Make your own macropad - use for desktop shortcuts!",
|
|
back_description: "A macropad is a device used for keyboard shortcuts! Want to turn your mic on/off using a key, change video streaming settings, or open a specific configuration in an app? A macropad can do it all!",
|
|
learnings: ["Make a PCB using Kicad", "Design a case using Fusion"],
|
|
link: "#"
|
|
} %>
|
|
<%= render partial: "kit", locals: {
|
|
badge: "",
|
|
image: "landing/speaker.png",
|
|
title: "Whisperer",
|
|
description: "Make your own smart speaker - Talk with it!",
|
|
back_description: "A smart speaker is a loudspeaker with a built-in voice assistant! Want to play music by just saying \"Hey Jarvis, play Taylor Swift,\" or turn off your ceiling lights with \"Hey Jarvis, make it dark!\"? A smart speaker can do it all!",
|
|
learnings: ["Design a speaker using Onshape", "Code your own simple Voice Assistant"],
|
|
link: "#"
|
|
} %>
|
|
</div>
|
|
|
|
<p class="flex justify-center items-center text-xl">Following one of these pitstops count as a Tier 3 project (4 points each)!</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="relative mt-12">
|
|
<%= image_tag "landing/landing4.png", style: "width: 100%;" %>
|
|
<div class="absolute inset-0 flex justify-center items-center">
|
|
<div class="bg-[#544FFF] md:p-80 md:py-48 p-4 rounded-lg text-white text-center">
|
|
insert video here
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-[#110B20] py-12">
|
|
<p class="justify-center items-center text-center font-bold text-6xl">Get invited to Undercity</p>
|
|
<div class="justify-center items-center text-center">
|
|
<div class="grid md:grid-cols-3 grid-cols-1 gap-8 mx-24 mb-12 mt-4">
|
|
<div class="relative">
|
|
<div class="absolute inset-0 justify-center items-center text-center">
|
|
<p>fjdsklfds</p>
|
|
</div>
|
|
<%= image_tag "landing/box.png", class: "" %>
|
|
</div>
|
|
<div class="bg-[#544FFF] rounded p-4 max-w-xl text-xl text-center">
|
|
<p class="text-2xl font-bold">question</p>
|
|
</div>
|
|
<div class="bg-[#544FFF] rounded p-4 max-w-xl text-xl text-center">
|
|
<p class="text-2xl font-bold">question</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 flex flex-col justify-center items-center mx-8">
|
|
<p class="justify-center text-center font-bold text-6xl">FAQ</p>
|
|
<div class="grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-4 mx-24 my-8 mx-auto">
|
|
<%= render partial: "card", locals: { title: "Eligibility", content: "Anyone 18 or below in high school is welcome! If you're in middle school or a gap year student, check in with us at [email]. You will need to verify with ID when we send you your grant!" } %>
|
|
<%= 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 make posts, and the grant will be shared between you two." } %>
|
|
<%= render partial: "card", locals: { title: "Who's running this?", content: "A group of ~15 teenagers around the world! We're funded by Hack Club, a [503 non-profit who have had donations from x, y, z]." } %>
|
|
<%= render partial: "card", locals: { title: "I'm new to hardware, can I join?", content: "Highway is for makers of all skill levels! We have a bunch of tutorials to follow if it's your first time - from making your own [macropad], to [x], to [y]. No worries if this is your first time!" } %>
|
|
<%= render partial: "card", locals: { title: "Is this legit?", content: "Yup! Last summer, we ran [Arcade], and last winter, we ran [High Seas], both sponsored by GitHub. As for hackathons, we've run [apocalypse, boreal, outernet, scrapyard, juice etc!]" } %>
|
|
<%= render partial: "card", locals: { title: "I need help!", content: "Read the expanded FAQ of our site [here]. Feel free to also ask in #highway-help in the Hack Club Slack!" } %>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="bg-[#110B20] flex flex-col justify-center text-center w-full py-8 text-[#5A59FF]">
|
|
<p>Highway to Undercity is built with ♥︎ for teenagers, by teenagers</p>
|
|
<p>Hack Club // Slack // Clubs // Hackathons</p>
|
|
</div> |