Skip to content

Commit

Permalink
Full redesign of homepage to highlight new Clams application (#7)
Browse files Browse the repository at this point in the history 
* Add first pass at abacus marketing page

* Copy updates and add js to the mobile nav

* Copy updates

* Add FAQ component

* Copy changes

* Add abacus icon to hero and rework some copy

* Add scroll to functionality to header links

* Add footer updates and plpaceholder legal docs

* Copy edits

* More copy updates

* Update copy for Problem component

* Rewording

* Copy updates

* More copy updates

* Rework copy

* First pass at theme css

* Rework of copy from abacus to accounting

* Rework hero and copy

* Add pricing component with placeholder content

* Add darkmode to pricing component

* Update pricing component

* Copy updates

* Convert faq to a dropdown component

* Rework features copy to include 4 key feature categories

* Add icons to how it works component

* Add new icons

* Fix theme colors for icons

* Hero tweaks

* Copy updates and color tweaks

* Add screenshot and update colors

* revert copy change

* Add images

* Style change

* Move accounting page to home route

* Add open source component and update styles of note

* Add downloads page and tweak hero buttons and styles

* Updates

* Add coming soon icons and update margin on all section headers

* Update features icons and add coming soon label

* tweak homepage spacing for all components

* Fix links

* Fix header for both apps and move theme toggle to footer

* Change bg colors and add faq link to nav

* Add content container component and use on home screen

* Remove nav links from Remote pages and improve home hero messaging

* Move components to shared folder and fix overflow bug on homepage

* Tweaks FAQ and add link to opensats in answer

* Change color of footer on remote routes

* Fix width of features component

* Tweak faq

* Update legal docs

* fix typo

* Update faq

* Add new favicon

* Add dark bg favicon

* Add app screenshot to features

* Update api call to fetch release from new repo

* Add download for silicon and intel mac apps

* Update deploy script

* Update download messaging add github link

* Tweak download copy

* style tweaks per feedback for launch

* Update legal docs

* Add download by OS feature to hero

* Update downloads component

* Add ubuntu button and add beta to the downloads messaging

* remove full screen hero on mobile

* spacing change

* Update button messaging and hero copy sizes and spacing

* Update svg colors

* Remove deploy script
  • Loading branch information
@johngribbin
johngribbin authored May 21, 2024
1 parent 7e290a7 commit 504103c
Show file tree
Hide file tree
Showing 70 changed files with 1,930 additions and 271 deletions.
2 changes: 1 addition & 1 deletion src/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" type="image/png" />
<meta name="viewport" content="width=device-width" />

<!-- Check & apply theme here to avoid FOUC -->
Expand Down
111 changes: 111 additions & 0 deletions src/lib/components/Connections.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<script lang="ts">
import { DISCORD_URL } from '$lib/constants'
import CoreLightningIcon from '$lib/icons/connections/core-lightning'
import LndIcon from '$lib/icons/connections/lnd'
import NwcIcon from '$lib/icons/connections/nwc'
import OnchainIcon from '$lib/icons/connections/onchain'
import PhoenixIcon from '$lib/icons/connections/phoenix'
import RiverIcon from '$lib/icons/connections/river'
import StrikeIcon from '$lib/icons/connections/strike'
import UnchainedIcon from '$lib/icons/connections/unchained'
import WalletOfSatoshiIcon from '$lib/icons/connections/walletofsatoshi'
import ContentContainer from './shared/ContentContainer.svelte'
const connections = [
{
name: 'Core Lightning',
icon: CoreLightningIcon,
link: 'https://corelightning.org/'
},
{
name: 'LND',
icon: LndIcon,
link: 'https://lightning.engineering/'
}
]
const comingSoon = [
{
name: 'Nostr Wallet Connect',
icon: NwcIcon,
link: 'https://nwc.dev/'
},
{
name: 'Phoenix',
icon: PhoenixIcon,
link: 'https://phoenix.acinq.co/'
},
{
name: 'Wallet of Satoshi',
icon: WalletOfSatoshiIcon,
link: 'https://www.walletofsatoshi.com/'
},
{
name: 'Onchain',
icon: OnchainIcon,
link: 'https://bitcoin.org/en/'
},
{
name: 'Unchained',
icon: UnchainedIcon,
link: 'https://unchained.com/'
},
{
name: 'Strike',
icon: StrikeIcon,
link: 'https://strike.me/'
},
{
name: 'River',
icon: RiverIcon,
link: 'https://river.com/'
}
]
</script>

<ContentContainer title="Fully integrated wallets">
<div class="text-center">
<p class="mt-8 md:mt-12 text-lg leading-8 text-gray-600 dark:text-gray-300">
These wallets are fully integrated into our system to streamline the data import.
</p>
<div class="flex gap-8 justify-center mt-8">
{#each connections as { name, icon, link }}
<a class="flex-col justify-between" href={link} target="_blank" rel="noopener noreferrer">
<div
class="flex-shrink-0 h-28 w-28 rounded-full flex items-center justify-center w-32 m-auto p-3"
>
{@html icon}
</div>
<p class="text-center">{name}</p>
</a>
{/each}
</div>
<p class="mt-8 md:mt-12 text-lg leading-8 text-gray-600 dark:text-gray-300">
These wallets are coming soon. Let us know and we'll prioritize your favorite.
</p>
<div class="flex flex-wrap gap-8 justify-center mt-8">
{#each comingSoon as { name, icon, link }}
<a
class="flex-col w-full max-w-[100px] opacity-[50%]"
href={link}
target="_blank"
rel="noopener noreferrer"
>
<div class="w-16 m-auto p-3">
{@html icon}
</div>
<p class="text-center">{name}</p>
</a>
{/each}
</div>
<div class="mt-12 flex wrap items-center gap-x-6">
<a
href={DISCORD_URL}
target="_blank"
rel="noopener noreferrer"
class="block rounded-md py-2 px-3 text-center text-md font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 bg-indigo-600 text-white hover:bg-indigo-500 mx-auto"
>Join our Discord</a
>
</div>
</div>
</ContentContainer>
121 changes: 121 additions & 0 deletions src/lib/components/FAQ.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
<script lang="ts">
import { DISCORD_URL } from '$lib/constants'
import ContentContainer from './shared/ContentContainer.svelte'
const faqs = [
{
q: 'How is Bitcoin taxed?',
a: 'Jurisdictions may differ, but in general - any gain or loss from the sale or exchange of Bitcoin is treated as a capital gain or loss.',
selected: true
},
{
q: 'I got paid in Bitcoin. How do I report this?',
a: 'By calculating the cost basis of the Bitcoin you received at time of payment, then reporting this as income.',
selected: false
},
{
q: "What if I don't know the cost basis of my Bitcoin?",
a: "If you have records of your Bitcoin transactions from when you first purchased, Clams can calculate your cost basis. However, if determining the exact cost basis isn't feasible, you might need to estimate it based on available information. To ensure compliance with tax regulations or if you're uncertain about the process, consulting a tax professional for assistance is advisable."
},
{
q: 'How are transaction fees treated?',
a: 'Technically, those are considered a spend. So cap gains or losses must be calculated and reported.',
selected: false
},
{
q: 'How is Bitcoin that I send between my wallets treated?',
a: 'Transfers are not considered taxable events. It is good practice to label transfers so you remember come tax season.',
selected: false
},
{
q: 'Are some transactions tax free?',
a: 'Yes. Transfers between wallets you control are one example. Gifts, up to a certain limit (16K in USA at time of writing). Some charitable donations can also reduce your tax burden. Consider <a class="underline" target="_blank" rel="noopener noreferrer" href="https://opensats.org/">Opensats</a>.',
selected: false
},
{
q: 'What personal information do I need to provide to use Clams?',
a: "None. No sign up is required. We don't ask for or obtain personally identifiable information.",
selected: false
},
{
q: "Can I still use Clams if I don't see my wallet on the integration list?",
a: 'Yes. All wallet types will be supported via the custom import tool (coming soon). We extend the integration list via user requests.',
selected: false
},
{
q: 'Where is my data stored?',
a: 'Your data never leaves your device unless you want it to. ',
selected: false
}
]
function toggleFaq(index: number) {
faqs[index].selected = !faqs[index].selected
}
</script>

<ContentContainer title="Frequently asked questions" scrollTo="faq">
<div class="mx-auto divide-y divide-gray-900/10 dark:divide-gray-100/10">
<div class="mx-auto text-center">
<p class="text-base leading-7 text-gray-600 dark:text-gray-300">
Can’t find the answer you’re looking for? Reach out to us on <a
href={DISCORD_URL}
target="_blank"
rel="noopener noreferrer"
class="underline font-semibold text-light-purple dark:text-dark-purple hover:text-indigo-500"
>discord</a
>.
</p>
</div>
<dl class="mt-8 md:mt-12 space-y-6 divide-y divide-gray-900/10 dark:divide-gray-100/10">
{#each faqs as { q, a, selected }, i}
<div class="pt-6">
<dt on:click={() => toggleFaq(i)}>
<button
type="button"
class="flex w-full items-start justify-between text-left text-gray-900 dark:text-white"
aria-controls="faq-0"
aria-expanded="false"
>
<span class="text-base font-semibold leading-7">{q}</span>
<span class="ml-6 flex h-7 items-center">
{#if selected}
<!-- Minus icon -->
<svg
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
</svg>
{:else}
<!-- Plus icon -->
<svg
class="h-6 w-6"
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 6v12m6-6H6" />
</svg>
{/if}
</span>
</button>
</dt>
{#if selected}
<dd class="mt-2 pr-12" id="faq-0">
<p class="text-base leading-7 text-gray-600 dark:text-gray-300">
{@html a}
</p>
</dd>
{/if}
</div>
{/each}
</dl>
</div>
</ContentContainer>
97 changes: 97 additions & 0 deletions src/lib/components/Features.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<script lang="ts">
import AppScreenshotImage from '$lib/images/app-screenshot.jpeg'
import SyncIcon from '$lib/icons/features/sync'
import EnhanceIcon from '$lib/icons/features/enhance'
import VisualizeIcon from '$lib/icons/features/visualize'
import ReportsIcon from '$lib/icons/features/reports'
import ContentContainer from './shared/ContentContainer.svelte'
// @TODO update icons to the same ones used in How It Works component
const features = [
{
icon: SyncIcon,
title: 'SYNC',
highlights: [
'Unlimited Wallets and Transactions.',
'Automated Transaction Syncing.',
'Private Local Data Store.',
'Full Lightning and Bitcoin Support.'
]
},
{
icon: EnhanceIcon,
title: 'ENHANCE',
highlights: [
'Streamlined Double Entry Accounting.',
'Smart Transfer Matching.',
'Wallet and Transaction Tagging.',
'Error Detection and Reconciliation.'
]
},
{
icon: VisualizeIcon,
title: 'VISUALIZE',
highlights: [
'Dynamic Sats Flow Dashboard.',
'Comprehensive Balance Tracking.',
'Interactive Charts for Insights.',
'Cost Basis.'
]
},
{
icon: ReportsIcon,
title: 'REPORTS',
highlights: ['Cost Basis Analysis.', 'Capital Gains.', 'Profit and Loss Statements.']
}
]
</script>

<ContentContainer title="Features" scrollTo="features">
<div
class="mx-auto grid grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5"
>
<div class="lg:col-span-4 lg:pr-8">
<div class="">
<h2 class="text-base font-semibold leading-7 text-light-purple dark:text-dark-purple">
Bitcoin only
</h2>
<p class="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
Everything you need to live on a Bitcoin Standard.
</p>
<dl
class="mt-10 text-base leading-7 text-gray-600 dark:text-gray-300 lg:max-w-none grid sm:grid-cols-1 md:grid-cols-2 gap-8"
>
{#each features as { icon, title, highlights }, i}
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900 dark:text-white">
<div class="absolute left-1 top-1 h-5 w-5 text-light-purple dark:text-dark-purple">
{@html icon}
</div>
<div class="flex flex-wrap">
{title}
{#if i === 3}
<p class="text-gray-600 dark:text-gray-300 ml-2">(coming soon)</p>
{/if}
</div>
</dt>
<dd>
<ul class="list-disc list-inside leading-6">
{#each highlights as highlight}
<li>{highlight}</li>
{/each}
</ul>
</dd>
</div>
{/each}
</dl>
</div>
</div>
<img
src={AppScreenshotImage}
alt="Product screenshot"
class="overflow-hidden w-[48rem] max-w-none rounded-xl shadow-xl dark:shadow-indigo-500/50 ring-1 ring-white/10 dark:ring-white/20 sm:w-[57rem]"
width="2432"
height="1442"
/>
</div>
</ContentContainer>
13 changes: 0 additions & 13 deletions src/lib/components/Footer.svelte
View file

This file was deleted.

Loading

0 comments on commit 504103c

Please sign in to comment.