From 47948458b4363c6e6b6904f665ac78a6e3d0d9a9 Mon Sep 17 00:00:00 2001
From: Maxime Cannoodt <Maxime.Cannoodt@UGent.be>
Date: Wed, 6 Jul 2022 17:08:31 +0200
Subject: [PATCH] updated homepage

---
 webapp/src/lib/components/index/tile.svelte |  4 +-
 webapp/src/routes/index.svelte              | 96 ++++++++++++---------
 2 files changed, 56 insertions(+), 44 deletions(-)

diff --git a/webapp/src/lib/components/index/tile.svelte b/webapp/src/lib/components/index/tile.svelte
index f63f244..871faa8 100644
--- a/webapp/src/lib/components/index/tile.svelte
+++ b/webapp/src/lib/components/index/tile.svelte
@@ -1,8 +1,8 @@
-<div class="">
+<div class="w-1/2 p-4">
 	<div class="text-2xl font-bold mb-4 text-center">
 		<slot name="title" />
 	</div>
-	<div class="prose-lg text-left text-zinc-700 dark:text-zinc-300">
+	<div class="prose-lg text-center text-zinc-700 dark:text-zinc-300">
 		<slot name="text" />
 	</div>
 </div>
diff --git a/webapp/src/routes/index.svelte b/webapp/src/routes/index.svelte
index 1928d61..2df7690 100644
--- a/webapp/src/routes/index.svelte
+++ b/webapp/src/routes/index.svelte
@@ -17,50 +17,62 @@
 	</p>
 </div> -->
 
-<article class="mx-auto max-w-4xl pt-8 text-zinc-900 dark:text-zinc-100 space-y-6">
-	<h1 id="title" class="font-extrabold text-5xl text-center">
-		Securely share your <span class="text-[#705dcf]">Obsidian</span> notes with one click.
-	</h1>
-	<p id="tagline" class="prose-2xl text-center text-zinc-700 dark:text-zinc-300">
-		Zero configuration. End-to-end encrypted.
-	</p>
-	<p id="install-button" class="text-center pt-2">
-		<a href="/install">
-			<button
-				class="py-1.5 px-4 rounded-lg border-2 border-[#705dcf] text-[#705dcf] font-semibold hover:bg-[#705dcf] hover:text-white transition-colors"
-				>Install plugin</button
-			>
-		</a>
-	</p>
+<article class="mx-auto max-w-4xl text-zinc-900 dark:text-zinc-100">
+	<div class="space-y-6 pt-24 pb-32">
+		<h1 id="title" class="font-extrabold text-5xl text-center">
+			Securely share your <span class="text-[#705dcf]">Obsidian</span> notes with one click.
+		</h1>
+		<p id="tagline" class="prose-2xl text-center text-zinc-700 dark:text-zinc-300">
+			Zero configuration. End-to-end encrypted. <br />No account needed.
+		</p>
+		<p id="install-button" class="text-center pt-2">
+			<a href="/install">
+				<button
+					class="py-1.5 px-4 rounded-lg border-2 border-[#705dcf] text-[#705dcf] font-semibold hover:bg-[#705dcf] hover:text-white transition-colors"
+					>Install plugin</button
+				>
+			</a>
+		</p>
+	</div>
 
-	<div class="grid grid-cols-2 gap-8 pt-16 pb-8">
-		<Tile>
-			<h2 slot="title">End-to-end encrypted</h2>
-			<p slot="text">
-				Your notes are encrypted using strong <strong>AES-256-CBC encryption</strong>. The
-				decryption key is never sent to the server. Not even we can read your notes.
-			</p>
-		</Tile>
+	<hr class="border-zinc-200 dark:border-zinc-700 transition-colors" />
 
-		<Tile>
-			<h2 slot="title">Zero configuration</h2>
-			<p slot="text">
-				Other plugins require integration with GitHub Gist or Notion using API keys. Noteshare.space
-				is a <strong>dedicated service</strong> for sharing your Markdown notes.
-			</p>
-		</Tile>
+	<div class="space-y-8 pt-24 pb-16">
+		<div class="flex flex-row gap-4 mx-auto justify-center">
+			<Tile>
+				<h2 slot="title">End-to-end encrypted</h2>
+				<p slot="text">
+					Your notes are stored securely using strong <strong>AES256-CBC encryption</strong>. The
+					decryption key is never sent to the server, so not even the server can open your notes.
+				</p>
+			</Tile>
+			<img src="/encrypted.svg" alt="encrypted-art" class="w-80" />
+		</div>
 
-		<Tile>
-			<h2 slot="title">Open source</h2>
-			<p slot="text">
-				Want to verify the security of the encryption mechanism? Or host your own instance?
-				Noteshare.space is completely <a
-					class="underline"
-					href="https://github.com/mcndt/obsidian-note-sharing">open-source</a
-				> under the MIT license.
-			</p>
-		</Tile>
+		<div class="flex flex-row gap-4 mx-auto justify-center flex-row-reverse">
+			<Tile>
+				<h2 slot="title">Zero configuration</h2>
+				<p slot="text">
+					Other plugins require integration with GitHub Gist or Notion using your API keys.
+					Noteshare.space is a <strong>dedicated service</strong> for sharing your Markdown notes. No
+					account is needed to use our service.
+				</p>
+			</Tile>
+			<img src="/zeroconfig.svg" alt="encrypted-art" class="w-80" />
+		</div>
+
+		<div class="flex flex-row gap-4 mx-auto justify-center">
+			<Tile>
+				<h2 slot="title">Open source</h2>
+				<p slot="text">
+					Want to verify the security of the encryption mechanism? Or host your own instance?
+					Noteshare.space is completely <a
+						class="underline"
+						href="https://github.com/mcndt/obsidian-note-sharing">open-source</a
+					> under the MIT license.
+				</p>
+			</Tile>
+			<img src="/opensource.svg" alt="encrypted-art" class="w-80" />
+		</div>
 	</div>
 </article>
-
-<img src="/encrypted.svg" alt="encrypted-art" class="h-80" />