From 2f6852d8bc6d0eb4b0b2825c1da278d78479e5b1 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 25 Jan 2024 23:41:30 -0800
Subject: feat(landing): preview images

---
 src/lib/Landing.svelte | 52 +++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

(limited to 'src/lib')

diff --git a/src/lib/Landing.svelte b/src/lib/Landing.svelte
index 5849fbc0..cc4dad7c 100644
--- a/src/lib/Landing.svelte
+++ b/src/lib/Landing.svelte
@@ -16,6 +16,7 @@
 	import root from './Utility/root';
 	import type { Media } from './AniList/media';
 	import { env } from '$env/dynamic/public';
+	import tooltip from './Tooltip/tooltip';
 
 	const randomManga = sampleManga
 		.filter(
@@ -189,7 +190,7 @@
 <p />
 
 <div class="example-item card">
-	<div>
+	<div class="item-content">
 		<span class="big-text">Tools & More!</span>
 
 		<p>
@@ -236,6 +237,30 @@
 				}}>Log in</a
 			> with AniList to get started!
 		</span>
+
+		<p />
+
+		<div class="example-item images">
+			<img src="https://i.imgur.com/dpijzKn.png" alt="Badge Wall" title="Badge Wall" use:tooltip />
+			<img
+				src="https://i.imgur.com/huEi683.png"
+				alt="Schedule (List View)"
+				title="Schedule (List View)"
+				use:tooltip
+			/>
+			<img
+				src="https://i.imgur.com/PkuJZdW.png"
+				alt="Schedule"
+				title="Schedule (Cover Grid View)"
+				use:tooltip
+			/>
+		</div>
+	</div>
+
+	<div class="item-description demo">
+		<a href="https://i.imgur.com/yLSBz2f.mp4" target="_blank">
+			<img src="https://i.imgur.com/yLSBz2f.gif" alt="Demo" title="Demo" use:tooltip />
+		</a>
 	</div>
 </div>
 
@@ -247,8 +272,33 @@
 		flex-wrap: wrap;
 	}
 
+	.images {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+
+	.images img {
+		border-radius: 8px;
+		margin: 0.15rem;
+		width: 32.5%;
+	}
+
+	.demo {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.demo img {
+		border-radius: 8px;
+		margin: 0.15rem;
+		width: 100%;
+	}
+
 	.item-content {
 		flex: 1 1 50%;
+		padding: 0 1rem;
 	}
 
 	.item-description {
-- 
cgit v1.2.3