mirror of
https://github.com/System-End/highway.git
synced 2026-04-19 22:05:13 +00:00
we ball
This commit is contained in:
aqua
commit
380dbaa790
9 changed files with 79 additions and 49 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 2 MiB After Width: | Height: | Size: 1.9 MiB |
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
|
||||
<div class="relative h-screen flex flex-col items-center justify-center">
|
||||
<%= image_tag "landing/landinglogo.png", class: "xl:max-w-6xl md:max-w-lg sm:max-w-sm max-w-xs" %>
|
||||
<%= 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" %>
|
||||
|
||||
|
||||
<div class="flex flex-col justify-center items-center">
|
||||
|
|
@ -26,22 +26,31 @@
|
|||
<div class="relative">
|
||||
<%= image_tag "landing/box.png", class: "w-full" %>
|
||||
<div class="absolute inset-0 flex flex-col justify-center items-center p-8 py-16 max-w-xl text-center">
|
||||
<p class="text-xl font-bold">Design your project</p>
|
||||
<div class="flex items-center justify-center gap-2 mx-auto">
|
||||
<%= image_tag "/1.png", style: "width: 15px" %>
|
||||
<p class="text-xl font-bold ml-4">Design your project</p>
|
||||
</div>
|
||||
<p class="mt-4">Design the circuitry and 3d printed parts to your project, and share your progress!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<%= image_tag "landing/box.png", class: "w-full" %>
|
||||
<div class="absolute inset-0 flex flex-col justify-center items-center p-8 py-16 max-w-xl text-center">
|
||||
<p class="text-xl font-bold">Build your project</p>
|
||||
<div class="flex items-center justify-center gap-2 mx-auto">
|
||||
<%= image_tag "/2.png", style: "width: 20px" %>
|
||||
<p class="text-xl font-bold ml-4">Build your project</p>
|
||||
</div>
|
||||
<p class="mt-4">Get a grant up to 350 USD to build your project. Hack, iterate, and play with it IRL!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<%= image_tag "landing/box.png", class: "w-full" %>
|
||||
<div class="absolute inset-0 flex flex-col justify-center items-center p-8 py-16 max-w-xl text-center">
|
||||
<p class="text-xl font-bold">Get invited to Undercity</p>
|
||||
<p class="mt-4">Undercity is a 4-day hardware hackathon @ Github HQ, July 11-14!</p>
|
||||
<div class="flex items-center justify-center gap-2 mx-auto">
|
||||
<%= image_tag "/3.png", style: "width: 23px" %>
|
||||
<p class="text-xl font-bold ml-4">Get invited to Undercity</p>
|
||||
</div>
|
||||
<p class="mt-4">Undercity is a 4-day hardware hackathon @ Github HQ, July 11-14! Travel stipends included.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -53,30 +62,30 @@
|
|||
|
||||
|
||||
<div class="my-24 flex flex-col justify-center items-center mx-auto p-10">
|
||||
<p class="text-6xl justify-center text-center font-bold">Choose Your Track</p>
|
||||
<p class="text-center text-xl"><i>Make as many projects as you want, as long as you finish designing your previous one!</i></p>
|
||||
<p class="text-4xl md:text-6xl justify-center text-center font-bold mx-5">Choose Your Track</p>
|
||||
<p class="text-center text-lg md:text-xl mx-5"><i>Make as many projects as you want, as long as you finish designing your previous one!</i></p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mt-8">
|
||||
|
||||
<div class="group border-2 border-[#5453FF] bg-[#302C61] rounded max-w-4xl p-8 justify-center text-center hover:shadow-[0_0_20px_5px_rgba(84,83,255,0.7)] transition-transform duration-150 hover:-rotate-1">
|
||||
<p class="text-2xl font-bold opacity-80 group-hover:opacity-100">Starter projects - follow a guide, get a kit!</p>
|
||||
<div class="group border-2 border-[#5453FF] bg-[#302C61] rounded max-w-4xl p-8 justify-center text-center hover:shadow-[0_0_20px_5px_rgba(84,83,255,0.7)] transition-shadow duration-150 hover:-rotate-1">
|
||||
<p class="text-2xl font-bold md:opacity-80 group-hover:opacity-100">Starter projects - follow a guide, get a kit!</p>
|
||||
<p class="font-bold opacity-60 group-hover:opacity-80 group-hover:underline"><i>For beginners or if you're unsure of what to make →</i></p>
|
||||
<%= image_tag "/track1.png", class: "bg-black h-96 mt-4 opacity-80 group-hover:opacity-100 max-w-2xl" %>
|
||||
<%= image_tag "/track1.png", class: "bg-black h-96 mt-4 md:opacity-80 group-hover:opacity-100 max-w-2xl" %>
|
||||
</div>
|
||||
|
||||
<div class="group border-2 border-[#5453FF] bg-[#302C61] rounded max-w-4xl p-8 justify-center text-center hover:shadow-[0_0_20px_5px_rgba(84,83,255,0.7)] transition-transform duration-150 hover:rotate-1">
|
||||
<p class="text-2xl font-bold opacity-80 group-hover:opacity-100">Your own project - get up to 350 USD!</p>
|
||||
<div class="group border-2 border-[#5453FF] bg-[#302C61] rounded max-w-4xl p-8 justify-center text-center hover:shadow-[0_0_20px_5px_rgba(84,83,255,0.7)] transition-shadow duration-150 hover:rotate-1">
|
||||
<p class="text-2xl font-bold md:opacity-80 group-hover:opacity-100">Your own project - get up to 350 USD!</p>
|
||||
<p class="font-bold opacity-60 group-hover:opacity-80 group-hover:underline"><i>For epic, self-guided projects →</i></p>
|
||||
<%= image_tag "/track2.png", class: "bg-black h-96 mt-4 opacity-80 group-hover:opacity-100 max-w-2xl" %>
|
||||
<%= image_tag "/track2.png", class: "bg-black h-96 mt-4 md:opacity-80 group-hover:opacity-100 max-w-2xl" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-center text-center p-10">
|
||||
<div class="justify-center text-center">
|
||||
<p class="text-6xl font-bold">Starter Projects</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>
|
||||
<p class="text-xl">Plus, we'll also give you the tools - like a soldering iron - to build it with!</p>
|
||||
<p class="text-4xl md:text-6xl font-bold">Starter Projects</p>
|
||||
<p class="text-lg md: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>
|
||||
<p class="text-lg md:text-xl">Plus, we'll also give you the tools - like a soldering iron - to build it with!</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row flex-wrap gap-8 my-12 mx-auto">
|
||||
|
|
@ -144,32 +153,22 @@
|
|||
<%= 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!" } %>
|
||||
<%= 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! For technical help, check out [resources] and ask in #highway!" } %>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="relative">
|
||||
<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 left-1/2 -translate-x-1/2 top-3/4 -translate-y-3/4">
|
||||
<div class="justify-center text-center items-center mb-2">
|
||||
<p class="text-3xl font-bold">Enter your email to join!</p>
|
||||
</div>
|
||||
<%= render partial: "emailform"%>
|
||||
<div class="justify-center text-center items-center mb-2">
|
||||
<p class="font-bold"><i>By the way, free stickers when you sign up!</i></p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text-[#110B20] flex flex-col justify-center text-center w-full py-8">
|
||||
<p>Highway to Undercity is built with ♥︎ for teenagers, by teenagers</p>
|
||||
<p>Hack Club // Slack // Clubs // Hackathons</p>
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
<%# Includes all stylesheet files in app/assets/stylesheets %>
|
||||
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
|
||||
<%= javascript_importmap_tags %>
|
||||
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -25,15 +25,15 @@
|
|||
<body>
|
||||
<main class="">
|
||||
<div class = "grid grid-cols-5">
|
||||
<div class = "col-span-full md:col-span-1 inline md:sticky h-screen top-0">
|
||||
<div class = "col-span-full md:col-span-1 inline md:sticky md:h-screen top-0">
|
||||
<%= render partial: "overview/sidebar" %>
|
||||
</div>
|
||||
<div class="max-md:order-first col-span-full md:col-span-4">
|
||||
<div class = "flex flex-col">
|
||||
<%= render "shared/topbar", class: "fixed self-start" %>
|
||||
<div class = "p-8 md:p-12 overflow-y-auto">
|
||||
<%= yield %>
|
||||
</div>
|
||||
<div class="max-md:order-first col-span-full md:col-span-4 ">
|
||||
<div class = "flex flex-col h-[100vh]">
|
||||
<div><%= render "shared/topbar", class: "sticky top-0" %></div>
|
||||
<div class = "p-8 md:p-12 overflow-y-auto">
|
||||
<%= yield %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<div class="border-t-4 md:border-t-0 md:border-r-4 border-[#2E2A54] text-white h-full flex flex-col gap-4 justify-start">
|
||||
<div class="flex flex-col justify-start p-8">
|
||||
<div class="text-center grid grid-cols-1 gap-2 text-xl font-dystopian">
|
||||
<%= link_to "Projects", projects_path, class: "#{current_page?(projects_path) ? 'bg-[#564CAD]' : 'hover:bg-[#564CAD]'} bg-[#2E2A54] p-2 rounded transition duration-100 block" %>
|
||||
<%= link_to "Getting Started", overview_page_path("getting_started"), class: "#{current_page?(projects_path) ? 'bg-[#564CAD]' : 'hover:bg-[#564CAD]'} bg-[#2E2A54] p-2 rounded transition duration-100 block" %>
|
||||
<%# link_to "Projects", projects_path, class: "#{current_page?(projects_path) ? 'bg-[#564CAD]' : 'hover:bg-[#564CAD]'} bg-[#2E2A54] p-2 rounded transition duration-100 block" %>
|
||||
<%= link_to "Getting started", overview_page_path("getting_started"), class: "#{current_page?(projects_path) ? 'bg-[#564CAD]' : 'hover:bg-[#564CAD]'} bg-[#2E2A54] p-2 rounded transition duration-100 block" %>
|
||||
<%= link_to "Project guidelines", overview_page_path("project_guidelines"), class: "#{current_page?(projects_path) ? 'bg-[#564CAD]' : 'hover:bg-[#564CAD]'} bg-[#2E2A54] p-2 rounded transition duration-100 block" %>
|
||||
<%= link_to "How to submit", overview_page_path("submit"), class: "#{current_page?(projects_path) ? 'bg-[#564CAD]' : 'hover:bg-[#564CAD]'} bg-[#2E2A54] p-2 rounded transition duration-100 block" %>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,44 @@
|
|||
<div class="w-full bg-[#302C61] text-white px-8 flex items-center shadow-md sticky top-0 left-0 z-50">
|
||||
<div x-data="{ open: false }" class="w-full bg-[#302C61] text-white px-8 flex items-center shadow-md sticky top-0 left-0 z-50">
|
||||
|
||||
<div class="flex items-center space-x-4">
|
||||
<%= link_to root_path do %>
|
||||
<%= image_tag "logo.png", alt: "Logo", class: "max-h-[80px]" %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-6 ml-12 *:font-dystopian *:uppercase *:hover:underline *:text-2xl">
|
||||
<%# link_to "Announcements", root_path, class: "hover:underline" %>
|
||||
<!-- mobile (closed) -->
|
||||
<button @click="open = !open" class="md:hidden text-white focus:outline-none">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 transform transition-transform duration-300"
|
||||
:class="{ 'rotate-90': open }"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- desktop -->
|
||||
<div class="hidden md:flex space-x-6 ml-12 *:font-dystopian *:uppercase *:hover:underline *:text-2xl">
|
||||
<%= link_to "Getting started", "/overview" %>
|
||||
<%= link_to "Starter projects", launchpad_path %>
|
||||
<%= link_to "Resources", root_path %>
|
||||
</div>
|
||||
</div>
|
||||
<!-- mobile (open) -->
|
||||
<div
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
x-transition:enter-start="opacity-0 transform scale-95"
|
||||
x-transition:enter-end="opacity-100 transform scale-100"
|
||||
x-transition:leave="transition ease-out duration-100"
|
||||
x-transition:leave-start="opacity-100 transform scale-100"
|
||||
x-transition:leave-end="opacity-0 transform scale-95"
|
||||
class="md:hidden mt-4 space-y-4 pb-5 *:font-dystopian *:uppercase *:hover:underline *:text-2xl"
|
||||
>
|
||||
<%= link_to "Getting started", "/overview" %>
|
||||
<%= link_to "Starter projects", launchpad_path %>
|
||||
<%= link_to "Resources", root_path %>
|
||||
<%# link_to "Project gallery", projects_path, class: "hover:underline" %>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
BIN
public/1.png
Normal file
BIN
public/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 866 B |
BIN
public/2.png
Normal file
BIN
public/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
public/3.png
Normal file
BIN
public/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Loading…
Add table
Reference in a new issue