Enhancement: Rework site to support release of Remote v2 (#4)

* Feature - V2 * Add background images and update styles of homepage * Update homepage copy and styles * Update lnurl & offers copy * Style tweak * First pass at a why clams section * Add UTXO route and more copy * Add parallax boilerplate * Updates * Rework homepage * Rework some copy and update styles * Add alt logo * Add images * Add icons & update copy * Style updates to homepage * Homepage mobile style updates * Update tailwind config * Update styling of FAQ and add bolt font * Desktop style updates * homepage light theme updates * Update hero image to remove padding * Update styling for wallets page to serve as template * Add feature page template component to all feature pages * Darkmode updates * Update icons and elements to have theme support * Fix spacing for nav * Remove toggle from footer * Add personal note to homepage and revised copy for the why sections * Add scrollto to nav and tweak FAQ * Feature page copy updates * Update dark theme on home page * Copy changes * First pass at pricing component * Update pricing component * Update copt for roadmap and create a new structure for component * Improve roadmap copy * Style roadmap and update note to include images * Break large home page component into multiple * Change font sizes * Update images * Update font sizes on feature pages * homepage copy tweaks and add simple 404 component * delete unused images * Remove hero image * Copy clean up * Add deepdiv button to feature page * Fix theme on footer * Fix scrollto bug * Update get started page * copy change * Add headers * Add deep div button to offers page * Copy updates * Copy updates and add ubuntu download option * Re-add clams logo as placeholder * Remove roadmap link * Copy changes * Update nostr links * Update docs link * Copy changes * Add remote route and reword the homepage copy * Reorganize the routes * Move routes around * Add remote icon * Add abacus icon * Image and styling updates * Icon updates * Design tweaks * Update links * Remove temporary deploy script * Hook up the latest release from github api for downloads
clams-tech · Jan 7, 2024 · dfc6513 · dfc6513
1 parent 9b6a511
commit dfc6513
Show file tree

Hide file tree

Showing 72 changed files with 2,026 additions and 85 deletions.
diff --git a/package.json b/package.json
@@ -32,5 +32,10 @@
 		"vite": "^3.0.4"
 	},
 	"type": "module",
-	"dependencies": {}
+	"dependencies": {
+		"@skeletonlabs/skeleton": "^2.0.0",
+		"svelte-parallax": "^0.6.0",
+		"svelte-scrollto": "^0.2.0",
+		"sveltekit-i18n": "^2.2.2"
+	}
 }
diff --git a/src/app.css b/src/app.css
@@ -1,15 +1,20 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 html {
-  font-family: Helvetica;
   box-sizing: border-box;
   height: -webkit-fill-available;
+  font-family: 'Noto Sans', sans-serif;
+  color: #1e1e1e;
 }
 
 body {
   min-height: 100vh;
   /* mobile viewport bug fix */
   min-height: -webkit-fill-available;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+  @apply dark:bg-black dark:text-white;
 }
diff --git a/src/app.html b/src/app.html
@@ -4,6 +4,14 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
 		<meta name="viewport" content="width=device-width" />
+
+		<!-- Check & apply theme here to avoid FOUC -->
+		<script>
+			localStorage.theme === 'dark' ||
+			(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+				? document.documentElement.classList.add('dark')
+				: document.documentElement.classList.remove('dark')
+		</script>
 		%sveltekit.head%
 	</head>
 	<body>

diff --git a/src/lib/components/Contribute.svelte b/src/lib/components/Contribute.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import * as animateScroll from 'svelte-scrollto'
+	import ClamsGradientIcon from '$lib/icons/clams-gradient'
+	import ArrowUpIcon from '$lib/icons/arrow-up'
+</script>
+
+<section
+	class="px-6 py-[72px] md:py-[96px] flex flex-col items-center gap-20 bg-[#F4F6F8] dark:bg-[#1e1e1e]"
+>
+	<div class="flex items-center gap-6 w-full max-w-3xl">
+		<div class="">
+			{@html ClamsGradientIcon}
+		</div>
+		<div class="flex flex-col gap-2">
+			<h2 class="text-2xl text-[20px]">
+				Want to contribute or have ideas on how to improve our apps?
+			</h2>
+			<p>
+				Join us in our <a class="text-light-purple dark:text-bitcoin font-bold underline" href="/"
+					>Discord</a
+				> server
+			</p>
+		</div>
+	</div>
+
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<span
+		class="text-bold flex items-center gap-2 cursor-pointer"
+		on:click={() => animateScroll.scrollToTop()}
+	>
+		Scroll to top {@html ArrowUpIcon}</span
+	>
+</section>
diff --git a/src/lib/components/FeaturePage.svelte b/src/lib/components/FeaturePage.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { DOCS_URL, FEATURE_ICONS, type FEATURE } from '$lib/constants'
+	export let header: {
+		title: FEATURE
+		subtitle: string
+	}
+	export let overview: string[] = []
+	export let features: { title: string; description: string }[] = []
+	export let comingSoon: { title: string }[] | null
+	export let deepDive = ''
+
+	import Button from '$lib/elements/Button.svelte'
+	import CheckIcon from '$lib/icons/check.svelte'
+	import { darkMode } from '$lib/stores'
+
+	let isDarkMode = true
+
+	darkMode.subscribe((value) => {
+		isDarkMode = value
+	})
+
+	let iconColor: string
+	$: isDarkMode ? (iconColor = '#6305F0') : (iconColor = 'white')
+</script>
+
+<section class="flex flex-col items-center px-6 pt-28 pb-20">
+	<div class="w-full max-w-4xl">
+		<!-- Header -->
+		<div class="text-center max-w-[630px] m-auto">
+			<h1 class="text-[64px] font-bold">{header.title}</h1>
+			<h2 class="text-[24px] mt-2">
+				{header.subtitle}
+			</h2>
+		</div>
+		<!-- Overview -->
+		<div class="mt-12 grid gap-3">
+			<h2 class="text-[20px] font-bold text-light-purple dark:text-dark-purple">OVERVIEW</h2>
+			{#each overview as paragraph}
+				<p class="text-[18px]">{paragraph}</p>
+			{/each}
+		</div>
+		<!-- Features -->
+		<div class="mt-12 grid gap-3">
+			<h2 class="text-[20px] font-bold text-light-purple dark:text-dark-purple">FEATURES</h2>
+			<div class="mt-2 grid grid-cols-1 sm:grid-cols-2 gap-6">
+				{#each features as { title, description }}
+					<div class="flex">
+						<div class="w-8 mr-1">
+							<CheckIcon />
+						</div>
+						<div class="flex flex-col gap-1 ">
+							<div class="flex items-center">
+								<h3 class="text-[18px] font-bold">{title}</h3>
+							</div>
+							<p>{description}</p>
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+		<!-- Coming Soon -->
+		{#if comingSoon}
+			<div class="mt-12 grid gap-3">
+				<h2 class="text-2xl font-bold text-light-purple dark:text-dark-purple">COMING SOON!</h2>
+				<div class="mt-2 grid grid-cols-1 sm:grid-cols-2 gap-6">
+					{#each comingSoon as { title }}
+						<div class="flex">
+							<div class="w-8 mr-1">
+								<CheckIcon />
+							</div>
+							<div class="flex flex-col gap-1 md:max-w-[280px]">
+								<div class="flex items-center">
+									<h3 class="text-[18px] font-bold">{title}</h3>
+								</div>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+		{#if deepDive}
+			<div class="mt-[48px] flex justify-center">
+				<a href={`${DOCS_URL}${deepDive}`} target="_blank" rel="noopener noreferrer">
+					<Button primary text={`Dive deeper into ${header.title}`}>
+						<div slot="iconLeft" class="w-10 xs:w-12">
+							{@html `<div style="stroke: ${iconColor}">${FEATURE_ICONS[header.title]}</div>`}
+						</div>
+					</Button>
+				</a>
+			</div>
+		{/if}
+	</div>
+</section>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import ClamsIcon from '$lib/icons/clams'
+	import Socials from './Socials.svelte'
+</script>
+
+<section
+	class="bg-white dark:bg-black flex flex-col items-center dark:text-white px-5 py-10 gap-10"
+>
+	<div class="w-40">
+		{@html ClamsIcon}
+	</div>
+	<Socials showThemeToggle={false} />
+</section>
diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import ClamsIcon from '$lib/icons/clams'
+</script>
+
+<section class="flex flex-col items-center justify-center w-full md:h-screen">
+	<div class="flex flex-col gap-8 items-center w-full text-center max-w-[600px] mt-28 md:mt-0">
+		<div class="w-80">
+			{@html ClamsIcon}
+		</div>
+		<h1 class="text-6xl font-bold">
+			Building for a <span class="text-light-orange">Bitcoin</span> Standard.
+		</h1>
+	</div>
+</section>
diff --git a/src/lib/components/Links.svelte b/src/lib/components/Links.svelte
diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import ClamsAltLogo from '$lib/icons/clams-alt'
+	import Socials from './Socials.svelte'
+
+	let links = [{ href: '/remote', title: 'Remote' }]
+</script>
+
+<div
+	class="absolute left-1/2 transform -translate-x-1/2 flex justify-between py-3 px-5 gap-10 w-full max-w-6xl"
+>
+	<div class="flex items-center gap-10">
+		<a href="/">
+			<div class="w-10">
+				{@html ClamsAltLogo}
+			</div>
+		</a>
+		<div class="flex hidden md:flex gap-10">
+			{#each links as { title, href }}
+				<a class="underline" href={`${href}`}>
+					{title}
+				</a>
+			{/each}
+		</div>
+	</div>
+	<Socials />
+</div>
diff --git a/src/lib/components/Note.svelte b/src/lib/components/Note.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+	import NostrIcon from '$lib/icons/nostr'
+</script>
+
+<section class="px-6 py-[72px] md:py-[96px] flex items-center justify-center w-full">
+	<div class="flex flex-col justify-between w-full gap-5 max-w-3xl">
+		<h1 class="text-[40px] text-center font-bold">
+			A <span class="text-light-orange">Note</span> from Us
+		</h1>
+		<div class="flex flex-wrap md:flex-nowrap gap-10">
+			<div class="flex flex-col gap-5">
+				<h2 class="">Hey!</h2>
+				<h2 class="">
+					We're Aaron and John, a couple of musicians turned software engineers who took the orange
+					pill, and like so many others, we couldn't think of anything else. Thanks to Bitcoin,
+					we're not just excited about the future – we're on a mission to shape it.
+				</h2>
+				<h2 class="">
+					Inspired by the optimism and talent found in this community, we decided to use our skills
+					to build Clams. Why stop at having the best money? We also need the best tools to help
+					Bitcoiners manage their finances in a self-sovereign way.
+				</h2>
+				<h2 class="">
+					We are committed to keeping the app accessible to as many people as possible, which is why
+					our core features will always be free. To ensure the long-term sustainability and
+					continuous improvement of Clams, we're exploring options for paid add-on services. By
+					choosing these premium offerings, you'll not only support the project but also unlock even
+					more powerful tools to bring you closer to life on a Bitcoin Standard. More details on
+					that soon.
+				</h2>
+				<h2 class="">We are our first customers, and we hope you will join us.</h2>
+				<h2 class="">Cheers, Aaron & John</h2>
+			</div>
+			<div class="flex md:flex-col justify-around gap-5 w-full">
+				<div class="flex flex-col items-center gap-3">
+					<div class="md:w-[200px] md:h-[200px] rounded-full overflow-hidden">
+						<img
+							class="w-full h-full object-cover"
+							src={'https://avatars.githubusercontent.com/u/29873495?v=4'}
+							alt="john"
+						/>
+					</div>
+					<a
+						class="font-bold text-[14px] text-light-purple dark:text-dark-purple flex items-center"
+						href="https://njump.me/nprofile1qqstz6qhucarrd9dhf04klcp3ewfesr2a2h05jaz5j7gc9kps2x7m6scpu9hy"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						AARON
+						<div class="w-6 mx-2">
+							{@html NostrIcon}
+						</div>
+					</a>
+				</div>
+				<div class="flex flex-col items-center gap-3">
+					<div class="md:w-[200px] md:h-[200px] rounded-full overflow-hidden">
+						<img
+							class="w-full h-full object-cover"
+							src={'https://avatars.githubusercontent.com/u/30157175?v=4'}
+							alt="john"
+						/>
+					</div>
+					<a
+						class="font-bold text-[14px] text-light-purple dark:text-dark-purple flex items-center"
+						href="https://njump.me/nprofile1qqs9zfzdczszd6amf8d8lnxq92kpqx8hulucfwtmfxmyg7ma4dv422stjxth3"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						JOHN
+						<div class="w-6 mx-2">
+							{@html NostrIcon}
+						</div>
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>