feat: backup page

dezh-tech · Aug 31, 2024 · 401bb0e · 401bb0e
1 parent 5f93698
commit 401bb0e
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 1 deletion.
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -13,6 +13,7 @@
 		<div class="flex lg:hidden"></div>
 		<div class="hidden lg:flex lg:gap-x-12">
 			<a href="/" class="text-sm font-semibold leading-6 text-gray-900">Home</a>
+			<a href="/backup" class="text-sm font-semibold leading-6 text-gray-900">Backup</a>
 			<a href="/terms-of-service" class="text-sm font-semibold leading-6 text-gray-900"
 				>Terms of Service</a
 			>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -43,7 +43,7 @@
 					<div class="mt-10 flex items-center justify-center gap-x-6">
 						<input
 							type="text"
-							placeholder={`Enter your npub or nip-05 address`}
+							placeholder="Enter your npub or nip-05 address"
 							class="w-[600px] pl-3 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-jelly-blue shadow-sm rounded-lg max-sm:w-[300px]"
 						/>
 						<button

diff --git a/src/routes/backup/+page.svelte b/src/routes/backup/+page.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import Header from '$lib/components/Header.svelte';
+	import Footer from '$lib/components/Footer.svelte';
+</script>
+
+<Header />
+<main class="relative">
+	<div class="relative isolate px-6 pb-2 lg:px-8">
+		<div
+			class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+			aria-hidden="true"
+		>
+			<div
+				class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-jelly-blue to-blue-800 opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+				style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"
+			></div>
+		</div>
+		<div class="mx-auto py-32 sm:py-48 lg:py-56">
+			<div class="hidden sm:mb-8 sm:flex sm:justify-center"></div>
+			<div class="text-center">
+				<div>
+					<h2
+						class="mt-10 font-palanquin text-4xl max-sm:text-[60px] max-sm:leading-[60px] font-bold text-center pb-16"
+					>
+						Backup all of your events on JellyFish realy
+					</h2>
+					<form action="">
+						<input
+							type="text"
+							placeholder="Enter your npub or nip-05 address"
+							class="w-[600px] pl-3 pr-3 py-2 text-gray-500
+                             bg-transparent outline-none border focus:border-jelly-blue
+                             shadow-sm rounded-lg max-sm:w-[300px] max-sm:mb-8"
+						/>
+						<button class="join-button">Backup</button>
+					</form>
+				</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"
+				>
+					<div
+						class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-jelly-blue to-blue-800 opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
+						style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"
+					></div>
+				</div>
+			</div>
+		</div>
+	</div>
+</main>
+<Footer />