feat(component): feature card

dezh-tech · Sep 1, 2024 · 9806d04 · 9806d04
1 parent 29b1506
commit 9806d04
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 120 deletions.
diff --git a/src/lib/components/FeatureCard.svelte b/src/lib/components/FeatureCard.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	export let title: string;
+	export let description: string;
+	export let icon: string;
+</script>
+
+<div class="relative pl-16">
+	<dt class="text-base font-semibold leading-7 text-gray-900">
+		<div
+			class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-jelly-blue"
+		>
+			<svg
+				class="h-6 w-6 text-white"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				aria-hidden="true"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" d={icon} />
+			</svg>
+		</div>
+		{title}
+	</dt>
+	<dd class="mt-2 text-base leading-7 text-gray-600">
+		{description}
+	</dd>
+</div>
diff --git a/src/lib/features.ts b/src/lib/features.ts
@@ -0,0 +1,27 @@
+// TODO: Move SVG icons to assets!
+export let features = [
+	{
+		title: 'Privacy',
+		description: "We won't leak your private messages or send them to unauthorized address.",
+		icon: `M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z`
+	},
+	{
+		title: 'Search on our index (soon)',
+		description: `When you search or query events, we search on our huge event index containing millions
+							of events indexed there.`,
+		icon: `M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99`
+	},
+	{
+		title: 'Backup',
+		description: `We backup all of your events for you and you can export your events at anytime you
+							want.`,
+		icon: `M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z`
+	},
+	{
+		title: 'Updates',
+		description: `That's not all you get. We are actively working and adding new features and services
+							to the JellyFish, as we just started now. All new services will be available on your
+							current plan, no need for more sats or updates.`,
+		icon: `M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99`
+	}
+];
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import Header from '$lib/components/Header.svelte';
 	import Footer from '$lib/components/Footer.svelte';
+	import FeatureCard from '$lib/components/FeatureCard.svelte';
+
+	import { features } from '$lib/features';
 </script>
 
 <main class="relative">
@@ -54,7 +57,7 @@
 					</div>
 				</div>
 			</div>
-			<!-- TODO: Fix background issue -->
+			<!-- TODO: How we can apply this background to all pages without adding this div??? -->
 			<div
 				class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
 				aria-hidden="true"
@@ -67,7 +70,6 @@
 		</div>
 	</div>
 
-	<!-- TODO: make feature card component -->
 	<!--? Features ?-->
 	<div id="features" class="bg-white py-24 sm:py-32">
 		<div class="mx-auto max-w-7xl px-6 lg:px-8">
@@ -85,120 +87,9 @@
 				<dl
 					class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16"
 				>
-					<div class="relative pl-16">
-						<dt class="text-base font-semibold leading-7 text-gray-900">
-							<div
-								class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-jelly-blue"
-							>
-								<svg
-									class="h-6 w-6 text-white"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke-width="1.5"
-									stroke="currentColor"
-									aria-hidden="true"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"
-									/>
-								</svg>
-							</div>
-							Backup
-						</dt>
-						<dd class="mt-2 text-base leading-7 text-gray-600">
-							We backup all of your events for you and you can export your events at anytime you
-							want.
-						</dd>
-					</div>
-					<div class="relative pl-16">
-						<dt class="text-base font-semibold leading-7 text-gray-900">
-							<div
-								class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-jelly-blue"
-							>
-								<svg
-									class="h-6 w-6 text-white"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke-width="1.5"
-									stroke="currentColor"
-									aria-hidden="true"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
-									/>
-								</svg>
-							</div>
-							Privacy
-						</dt>
-						<dd class="mt-2 text-base leading-7 text-gray-600">
-							We won't leak your private messages or send them to unauthorized address.
-						</dd>
-					</div>
-					<div class="relative pl-16">
-						<dt class="text-base font-semibold leading-7 text-gray-900">
-							<div
-								class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-jelly-blue"
-							>
-								<svg
-									version="1.2"
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 50 50"
-									width="30"
-									height="30"
-								>
-									<title>icons8-search-50</title>
-									<defs>
-										<image
-											width="43"
-											height="44"
-											id="img1"
-											href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAsCAMAAADLhrFKAAAAAXNSR0IB2cksfwAAASlQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////seNqHgAAAGN0Uk5TABhioc3s+uvMYRc+s/v/sj0jtvzBcjcWBThzwrQiW/P1hxWI9vJZfqgbHKp9gP4Bb/1UVVh3eCEdPLFjwMNfdJ86yur5Bgf43DuZxFIQiTn3M6ywehpWT1p1paDL4cmWXFN/EtHniQAAAjlJREFUeJyN1N9P01AUB/BzunXOdUI2cNUlWzTVzR/gyEAm4vyNCTHiCzG++o8ZX0w0xPigMSoIREQBQUPYkGwW49DAIAwIRIU11MvGbn+s7fp96M9Pbs+9PS2CEiyF7Iou/APVQXrE7blKZAbXTa0PJWDL4xKH/4pQhwvGNoxrfsR5epn34jKPGSMbXYQgftPcOEOGDaeqbfPPYzIzrS+vBUUt3rPhdQG/VM0EoHVXjExqra9uLfrZgAK0z/H+cY31S8E5QwoxaWF3S205R6BxzNjC6b+Fs59U1ss0/DChAMJK00fFotdVP29qeWnTl6e2c+bcB1MKkJxueU+tgzuwYmGvfI0PU+v0uJct7LWptkFq2YON5uUCeJzn31F7cyLRb2FvjXW8sW/5rP0aLr6m1unhFi1s92hshNqaa3bpFbWM99BvC3t75PJLaj0OlzNvSnlp5+oLaqFePiya2p7hUBoUe3fo+pJFT954rrKkKUPOqo+tlJgw0PUM1DZRyJ+aMLS9b7d7+jQWIksCM2VA72XF7qegtdCUE9htfRmxk6IorOb0lmAIybMaeiE4QLZs1xO9hbaNfEDeUtaZTzCDfKFIcENGbyGRZoB1n2DGO2E0ceTXbBGCzY5+LVZ+ox04o5y0B4ZIR90v4eOTVZY8OBrCvuT3JGK6UO7TyKoaq61BWjMEsHce2bH7mMvZsWpc00I8W8G17T4mL8WGhXjKXcJ2bAXbsuUJHrVn4cFjd+9DmxbiOyn4DzB1qawEBlZ6AAAAAElFTkSuQmCC"
-										/>
-									</defs>
-									<style>
-									</style>
-									<use id="Background" href="#img1" x="4" y="3" />
-								</svg>
-							</div>
-							Search on our index (soon)
-						</dt>
-						<dd class="mt-2 text-base leading-7 text-gray-600">
-							When you search or query events, we search on our huge event index containing millions
-							of events indexed there.
-						</dd>
-					</div>
-					<div class="relative pl-16">
-						<dt class="text-base font-semibold leading-7 text-gray-900">
-							<div
-								class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-jelly-blue"
-							>
-								<svg
-									class="h-6 w-6 text-white"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke-width="1.5"
-									stroke="currentColor"
-									aria-hidden="true"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-									/>
-								</svg>
-							</div>
-							Updates
-						</dt>
-						<dd class="mt-2 text-base leading-7 text-gray-600">
-							That's not all you get. We are actively working and adding new features and services
-							to the JellyFish, as we just started now. All new services will be available on your
-							current plan, no need for more sats or updates.
-						</dd>
-					</div>
+					{#each features as f}
+						<FeatureCard description={f.description} icon={f.icon} title={f.title} />
+					{/each}
 				</dl>
 			</div>
 		</div>

diff --git a/src/routes/backup/+page.svelte b/src/routes/backup/+page.svelte
@@ -66,10 +66,12 @@
 						>
 							<span class="text-jelly-blue">Backup</span> Your Notes
 						</h2>
-						<p class="mt-6 text-lg leading-8 text-gray-600 mb-8">
-							All backups will be downloaded on your device in a json file.
-							<br />
-							Remember your noted deleted using nip-09 won't be in backup result.
+						<p class="mt-6 text-base leading-6 text-gray-600 mb-6">
+							All backups will be downloaded to your device as a JSON file.<br />
+							<span class="block text-gray-500 text-sm mt-2">
+								Please note that notes deleted using nip-09, direct messages (encrypted/plain), and
+								notes that not published to JellyFish Relay won't be included in the backup.
+							</span>
 						</p>
 						<form action="">
 							<input