add hardware

src/routes/+page.svelte

@@ -14,6 +14,7 @@
 	import Team from './landing/Team.svelte';
 	import Schedule from './landing/Schedule.svelte';
 	import Workshops from './landing/Workshops.svelte';
+	import Hardware from './landing/Hardware.svelte';
 	export const prerender = true;
 </script>
 
@@ -23,6 +24,7 @@
 	<Timeline />
 	<Schedule />
 	<Workshops />
+	<Hardware />
 	<Supporters />
 	<Team />
 	<Behind />

src/routes/components/Nav.svelte

@@ -49,6 +49,9 @@
 				<li class="mt-2 hover:text-hackaburg-900">
 					<a href="/#workshops" class="nav-element-base">Workshops</a>
 				</li>
+				<li class="mt-2 hover:text-hackaburg-900">
+					<a href="/#hardware" class="nav-element-base">Hardware</a>
+				</li>
 				<li class="mt-2 hover:text-hackaburg-900">
 					<a href="/#supporters" class="nav-element-base">Supporters</a>
 				</li>

src/routes/landing/Hardware.svelte

@@ -0,0 +1,37 @@
+<script>
+	import BaseComponent from '../components/BaseComponent.svelte';
+	import Button from '../components/Button.svelte';
+	import cutter from '$lib/images/cutter.png';
+	import printer from '$lib/images/printer.png';
+</script>
+
+<BaseComponent headline={'Hardware'} subHeadline={'You Need It We Have It!'} id={'hardware'}>
+	<div class="text-center text-white">
+		<p>
+			We have a lot of hardware from us and our supporters. This year we also provide a lasercutter
+			and two 3D printers. We also have a lot of different smaller hardware components, have a look
+			at the list below.
+		</p>
+		<div class="grid grid-cols-1 md:grid-cols-3 gap-x-4 gap-y-6 md:mt-8 mt-4 sm:p-8">
+			<div>
+				<img src={printer} alt="printer" class="m-auto" />
+				<h1 class="text-xl m-auto mt-4">Pursa Mini</h1>
+			</div>
+			<div>
+				<img src={printer} alt="printer" class="m-auto" />
+				<h1 class="text-xl m-auto mt-4">Pursa Mini</h1>
+			</div>
+			<div>
+				<img src={cutter} alt="cutter" class="m-auto" />
+				<h1 class="text-xl m-auto mt-4">Mr Beam Lasercutter</h1>
+			</div>
+		</div>
+		<a
+			href="https://docs.google.com/spreadsheets/d/1gRr8oxADCrWdkZiIQk2lfpEkRAI-z8vDCcRmEEfjRms/edit?usp=sharing"
+			target="_blank"
+			rel="noreferrer"
+		>
+			<Button label="Download Hardware List" />
+		</a>
+	</div>
+</BaseComponent>

src/routes/landing/Workshops.svelte

@@ -1,6 +1,5 @@
 <script>
 	import BaseComponent from '../components/BaseComponent.svelte';
-	import sponsors from '$lib/images/sponsors.png';
 </script>
 
 <BaseComponent headline={'Workshops'} subHeadline={''} id={'workshops'}>