From 812194e1048d0bf93f740f3866ccf6f000ea2d2b Mon Sep 17 00:00:00 2001
From: Amanda Sinha <amanda.m.sinha@gmail.com>
Date: Fri, 26 Apr 2024 11:59:35 -0700
Subject: [PATCH] Base layout finished

---
 frontend/src/routes/Home.svelte | 98 +++++++++++++++++++++++++++++----
 1 file changed, 87 insertions(+), 11 deletions(-)

diff --git a/frontend/src/routes/Home.svelte b/frontend/src/routes/Home.svelte
index c86914e..1d0ad1d 100644
--- a/frontend/src/routes/Home.svelte
+++ b/frontend/src/routes/Home.svelte
@@ -5,28 +5,67 @@
 	import { onMount } from "svelte";
 	import { navigate } from "svelte-routing";
 	import { user } from "../lib/stores/user"
+	import ProteinVis from "../lib/ProteinVis.svelte";
 </script>
 
 <svelte:head>
 	<title>Venome Home</title>
 </svelte:head>
 
-<div id="title_col_1">
+<div id="title">
 	<h1>Welcome to the Unknown Venome</h1>
-	<h3>New? Check out our <a href="/tutorials">tutorials</a>!</h3>
-	<h3>Looking for something specific? Start searching now!</h3>
-	<!--search bar-->
-	<form>
-		<input type="text">
-		<!--I'm feeling lucky-->
-		<button>Roll the dice</button>
-	</form>
+</div>
+<div id="title_page">
+	<div id="side_col" class="col">
+		<h3>Get to know the <a href="https://venombiochemistrylab.weebly.com/">Venome Lab!</a></h3>
+		<p>The Venome Lab is based out of OSU and studies three species of parasitic wasps and their proteins</p>
+		<h3>There are so many wasps in there</h3>
+		<!--search bar-->
+		<img src="https://biochem.oregonstate.edu/sites/biochem.oregonstate.edu/files/styles/600_x_var/public/2023-02/Nate.jpg?itok=eoH8WcNU" alt="A picture of Nate Mortimer in lab gear doing some scientific stuff." id="DeadInTheWater">
+	</div>
+	<div id="middle_col" class="col">
+		<h3>Looking for something specific? Start searching now!</h3>
+		<!--search bar-->
+		<form>
+			<input type="text">
+			<!--I'm feeling lucky-->
+			<button>Roll the dice</button>
+		</form>
+
+		<ProteinVis
+			format="pdb"
+			width={400}
+			height={400}
+		/>
+		<div class="protein_about">
+			<p>lorem ipsum dolor sit something about the proteins</p>
+		</div>
+	</div>
+	<div id="side_col" class="col">
+		<h3>New? Check out our <a href="/tutorials">tutorials</a>!</h3>
+		<p>Whether you're a protein expert looking to analyze some proteins or a new student with a budding interest in biochemistry, this is the place for you.</p>
+		<h3>See <em>all</em> of our proteins, <a href="/search">listed here</a>!</h3>
+		<p>Filter down the Venome lab's catalog of proteins and see all the features within.</p>
+		<!--search bar-->
+		<div id="GettingStarted">
+			<h3>Get started with these helpful tutorials!</h3>
+			<ul>
+				<li>using the site</li>
+				<li>biochem basics</li>
+			</ul>
+		</div>
+	</div>
 </div>
 
 <style>
+	#title {
+		width: 100%;
+	}
+
 	h1 {
 		margin-top: 10px;
 		margin-bottom: 3px;
+		text-align: center;
 		color: rgb(25, 63, 90);
 	}
 
@@ -48,7 +87,44 @@
 		padding: 3px;
 	}
 
-	#title_col_1 {
-		margin-left: 15px;
+	#title_page {
+		margin: 0% 2%;
+		display: flex;
+	}
+
+	.col {
+		margin: 0% 0.5%;
+		padding: 1%;
+		background-color:aliceblue;
+	}
+
+	#side_col {
+		width: 27%
+	}
+
+	#middle_col {
+		width: 42%;
 	}
+
+	ProteinVis {
+		margin: 1%;
+		max-width: 30%;
+		max-height: 30%;
+		display: block;
+	}
+
+	.protein_about {
+		margin-left: 20px;
+		display: block;
+	}
+
+	ul li {
+		margin-left: 3%;
+		list-style-type: circle;
+	}
+
+	input {
+		margin-bottom: 15px;
+	}
+
 </style>
\ No newline at end of file