aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/FaqCard.svelte12
-rw-r--r--src/components/Footer.svelte19
-rw-r--r--src/components/HowItWorksCard.svelte8
-rw-r--r--src/components/LandingHeader.svelte14
-rw-r--r--src/components/LandingHero.svelte12
-rw-r--r--src/locales/en.json63
-rw-r--r--src/locales/fr.json12
-rw-r--r--src/routes/+page.svelte68
8 files changed, 123 insertions, 85 deletions
diff --git a/src/components/FaqCard.svelte b/src/components/FaqCard.svelte
index 3ebd7f45..3e855e42 100644
--- a/src/components/FaqCard.svelte
+++ b/src/components/FaqCard.svelte
@@ -1,11 +1,15 @@
<script>
- export let question;
- export let answer;
+ import { _ } from 'svelte-i18n';
+
+ // this ID will be used to get the strings from the locale
+ // question is at faq.[questionID].question
+ // answer is at faq.[questionID].answer
+ export let questionID;
</script>
<div class="mx-auto w-full md:w-2/3 lg:w-[700px] space-y-5">
- <p class="text-2xl font-medium">{question}</p>
+ <p class="text-2xl font-medium">{$_('faq.' + questionID + '.question')}</p>
<p class="text-secondary text-xl font-medium">
- {answer}
+ {$_('faq.' + questionID + '.answer')}
</p>
</div>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index f1de0173..8d846f04 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -1,15 +1,16 @@
<script>
import { Icon } from '$comp';
+ import { _ } from 'svelte-i18n';
const followLinks = [
- { url: 'https://twitter.com/coinoswallet', title: 'Twitter' },
- { url: 'https://github.com/coinos', title: 'GitHub' },
- { url: 'https://t.me/coinos', title: 'Telegram' }
+ { url: 'https://twitter.com/coinoswallet', titleID: 'twitter' },
+ { url: 'https://github.com/coinos', titleID: 'github' },
+ { url: 'https://t.me/coinos', titleID: 'telegram' }
];
const companyLinks = [
- { url: 'mailto:[email protected]', title: 'Support' },
- { url: '/jobs', title: 'Jobs' }
+ { url: 'mailto:[email protected]', titleID: 'support' },
+ { url: '/jobs', titleID: 'jobs' }
];
</script>
@@ -17,19 +18,19 @@
<Icon icon="logo" style="w-48 mx-auto md:mx-0" />
<div class="text-center md:text-left">
- <p class="font-semibold">Follow Us</p>
+ <p class="font-semibold">{$_('footer.followUs')}</p>
<ul class="mt-5 text-secondary space-y-3 font-medium">
{#each followLinks as link}
- <li><a href={link.url} target="_blank" rel="noreferrer">{link.title}</a></li>
+ <li><a href={link.url} target="_blank" rel="noreferrer">{$_('footer.' + link.titleID)}</a></li>
{/each}
</ul>
</div>
<div class="text-center md:text-left">
- <p class="font-semibold">Company</p>
+ <p class="font-semibold">{$_('footer.company')}</p>
<ul class="mt-5 text-secondary space-y-3">
{#each companyLinks as link}
- <li><a href={link.url}>{link.title}</a></li>
+ <li><a href={link.url}>{$_('footer.' + link.titleID)}</a></li>
{/each}
</ul>
</div>
diff --git a/src/components/HowItWorksCard.svelte b/src/components/HowItWorksCard.svelte
index 519cdcdc..b0ef2aad 100644
--- a/src/components/HowItWorksCard.svelte
+++ b/src/components/HowItWorksCard.svelte
@@ -1,14 +1,14 @@
<script>
import Icon from './Icon.svelte';
+ import { _ } from 'svelte-i18n';
export let image;
- export let step;
- export let description;
+ export let stepID;
</script>
<div class="space-y-5">
<Icon icon={image} style="mx-auto w-32 h-32" />
- <p class="text-2xl font-medium">{step}</p>
+ <p class="text-2xl font-medium">{$_('howItWorks.' + stepID + '.header')}</p>
<p class="text-secondary text-xl font-medium w-full md:w-2/3 mx-auto">
- {description}
+ {$_('howItWorks.' + stepID + '.description')}
</p>
</div>
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index cc743b79..3e53a613 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -28,9 +28,9 @@
<!-- desktop nav -->
<div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold">
- <button on:click={() => scroll(howItWorks)}>{$_('nav.howItWorks')}</button>
- <button on:click={() => scroll(faq)}>{$_('nav.faq')}</button>
- <button on:click={() => scroll(about)}>{$_('nav.about')}</button>
+ <button on:click={() => scroll(howItWorks)}>{$_('howItWorks.header')}</button>
+ <button on:click={() => scroll(faq)}>{$_('faq.header')}</button>
+ <button on:click={() => scroll(about)}>{$_('about.header')}</button>
{#if !$user}
<button class="border rounded-full px-6 py-2 font-bold" on:click={() => goto('/register')}
>{$_('nav.startInSeconds')}
@@ -45,13 +45,13 @@
<button
class="border rounded-full px-6 py-2 font-bold"
on:click={() => goto(`/${$user.username}/dashboard`)}
- >Account
+ >{$_('nav.account')}
</button>
<button
class="bg-black text-white border rounded-full px-6 py-2 font-bold"
on:click={() => goto('/logout')}
>
- Sign out
+ {$_('nav.signOut')}
</button>
{/if}
</div>
@@ -92,13 +92,13 @@
<button
class="border rounded-full px-6 py-2 font-bold block"
on:click={() => goto(`/${$user.username}/dashboard`)}
- >Account
+ >{$_('nav.account')}
</button>
<button
class="bg-black text-white border rounded-full px-6 py-2 font-bold block"
on:click={() => goto('/logout')}
>
- Sign out
+ {$_('nav.signOut')}
</button>
{/if}
<LocaleSelector style="py-1" />
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 750f5626..7c044a4d 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -2,6 +2,7 @@
import { goto } from '$app/navigation';
import { Icon, Image } from '$comp';
import { user } from '$lib/store';
+ import { _ } from 'svelte-i18n';
</script>
<div class="mt-[96.88px] md:mt-0">
@@ -9,16 +10,15 @@
<h1
class="text-5xl md:text-6xl lg:text-7xl 2xl:text-8xl font-medium text-center w-full md:w-3/4 lg:w-1/2 max-w-7xl mx-auto leading-tight"
>
- The <span class="relative">
- easiest
+ {$_('landing.header_before_icon')} <span class="relative">
+ {$_('landing.header_with_icon')}
<Icon icon="rays" style="absolute -top-16 left-5 md:left-8 lg:left-14 2xl:left-24" />
- </span> way to accept bitcoin in your store.
+ </span> {$_('landing.header_after_icon')}
</h1>
<h2
class="text-center text-secondary w-full md:w-3/5 lg:w-2/5 max-w-3xl mx-auto text-xl leading-normal font-medium"
>
- Grow your customer base and revenue by accepting bitcoin with an easy-to-use and managed Point
- of Sale. No software or hardware required.
+ {$_('landing.subheader')}
</h2>
{#if !$user}
<div class="flex justify-center">
@@ -26,7 +26,7 @@
class="bg-black text-white border rounded-full px-6 py-2 font-bold"
on:click={() => goto('/register')}
>
- Start in Seconds
+ {$_('nav.startInSeconds')}
</button>
</div>
{/if}
diff --git a/src/locales/en.json b/src/locales/en.json
index 2e4de596..c8d90970 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -22,11 +22,68 @@
"familialRelationships": "Husband, father, brother, son"
}
},
+ "faq": {
+ "header": "FAQ",
+ "cost": {
+ "question": "What does it cost?",
+ "answer": "CoinOS is free to use. You only pay a 1% fee if/when you withdraw your funds. Compare this to 3% typically charged by a credit card processor."
+ },
+ "compatibility": {
+ "question": "Do I need any special device or software?",
+ "answer": "No. CoinOS is web-based, so as long as you have an internet connection, you can use it on any device or hardware. Most merchants might use it on a phone or a tablet."
+ },
+ "safety": {
+ "question": "Are my funds safe?",
+ "answer": "Your funds are stored on our secure server, however we recommend that you withdraw them to your own cold storage for long-term savings."
+ }
+ },
+ "footer": {
+ "followUs": "Follow Us",
+ "twitter": "Twitter",
+ "github": "GitHub",
+ "company": "Company",
+ "telegram": "Telegram",
+ "support": "Support",
+ "jobs": "Jobs"
+ },
+ "howItWorks": {
+ "header": "How It Works",
+ "step1": {
+ "header": "1. Create your account",
+ "description": "A username & password is all you need to get started."
+ },
+ "step2": {
+ "header": "2. Ask for payments",
+ "description": "The same as you normally would, but with bitcoin."
+ },
+ "step3": {
+ "header": "3. That's all!",
+ "description": "You can convert to local currency at any point."
+ }
+ },
+ "landing": {
+ "header_before_icon": "The",
+ "header_with_icon": "easiest",
+ "header_after_icon": "way to accept bitcoin in your store.",
+ "subheader": "Grow your customer base and revenue by accepting bitcoin with an easy-to-use and managed Point of Sale. No software or hardware required.",
+ "info1": {
+ "title": "Instant payments via Lightning",
+ "description": "The moment your customer sends a payment, it’s there. No waiting for bank settlements or worrying about chargebacks. Instant settlement, in seconds. Say goodbye to 3% credit card processing fees."
+ },
+ "info2": {
+ "title": "Simple to use, custodial by default",
+ "description1": "Just enter an amount, share QR code and you’re done.",
+ "description2": "CoinOS is custodial by default, which eliminates the need to understand how bitcoin/lightning works. We do all the heavy lifting so you can focus on your business.",
+ "description3": "You always have the option of <span class=\"underline underline-offset-4\">taking custody</span> of your own keys."
+ },
+ "info3": {
+ "title": "Brand it your way!",
+ "description": "Customize your point of sale look and feel, or keep it on default - totally up to you."
+ }
+ },
"nav": {
- "howItWorks": "How It Works",
- "faq": "FAQ",
- "about": "About",
"startInSeconds": "Start in Seconds",
+ "account": "Account",
"signIn": "Sign In",
"signOut": "Sign Out",
"dashboard": "Dashboard",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 9adc9488..44320607 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -1,9 +1,15 @@
{
"langname": "Français",
+ "about": {
+ "header": "À Propos"
+ },
+ "faq": {
+ "header": "FAQ"
+ },
+ "howItWorks": {
+ "header": "Comment Elle Fonctionne"
+ },
"nav": {
- "howItWorks": "Comment Ça Fonctionne",
- "faq": "FAQ",
- "about": "À Propos",
"startInSeconds": "Commence en Secondes",
"signIn": "Connexion"
}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f50db726..6bdd9699 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -10,45 +10,19 @@
Footer
} from '$comp';
+ import { _ } from 'svelte-i18n';
+
let howItWorks;
let faq;
let about;
const howItWorksSteps = [
- {
- image: 'hand',
- step: '1. Create your account',
- description: 'A username & password is all you need to get started.'
- },
- {
- image: 'bolt',
- step: '2. Ask for payments',
- description: 'The same as you normally would, but with bitcoin.'
- },
- {
- image: 'smile',
- step: "3. That's all!",
- description: 'You can convert to local currency at any point.'
- }
+ { image: 'hand', stepID: 'step1' },
+ { image: 'bolt', stepID: 'step2' },
+ { image: 'smile', stepID: 'step3' }
];
- const faqQuestions = [
- {
- question: 'What does it cost?',
- answer:
- 'CoinOS is free to use. You only pay a 1% fee if/when you withdraw your funds. Compare this to 3% typically charged by a credit card processor.'
- },
- {
- question: 'Do I need any special device or software?',
- answer:
- 'No. CoinOS is web-based, so as long as you have an internet connection, you can use it on any device or hardware. Most merchants might use it on a phone or a tablet.'
- },
- {
- question: 'Are my funds safe?',
- answer:
- 'Your funds are stored on our secure server, however we recommend that you withdraw them to your own cold storage for long-term savings.'
- }
- ];
+ const faqIDs = ["cost", "compatibility", "safety"];
</script>
<LandingHeader {howItWorks} {faq} {about} />
@@ -60,45 +34,41 @@
<!-- landing info 1 -->
<LandingInfoCard
image="lightning-qr"
- title="Instant payments via Lightning."
- description="The moment your customer sends a payment, it’s there. No waiting for bank settlements or
- worrying about chargebacks. Instant settlement, in seconds. Say goodbye to 3% credit card
- processing fees."
+ title={$_('landing.info1.title')}
+ description={$_('landing.info1.description')}
/>
<!-- landing info 2 -->
<LandingInfoCard
image="phone-checkout"
- title="Simple to use, custodial by default."
+ title={$_('landing.info2.title')}
order="reverse"
>
- Just enter an amount, share QR code and you’re done.
+ {$_('landing.info2.description1')}
<br /><br />
- CoinOS is custodial by default, which eliminates the need to understand how bitcoin/lightning works.
- We do all the heavy lifting so you can focus on your business.
+ {$_('landing.info2.description2')}
<br /><br />
- You always have the option of
- <span class="underline underline-offset-4">taking custody</span> of your own keys.
+ {@html $_('landing.info2.description3')}
</LandingInfoCard>
<!-- landing info 3 -->
<div>
<LandingInfoCard
image="customize"
- title="Brand it your way!"
- description="Customize your point of sale look and feel, or keep it on default - totally up to you."
+ title={$_('landing.info3.title')}
+ description={$_('landing.info3.description')}
/>
<div bind:this={howItWorks} />
</div>
<!-- how it works -->
<div>
- <h3 class="text-5xl font-medium mb-10 text-center">How it works</h3>
+ <h3 class="text-5xl font-medium mb-10 text-center">{$_('howItWorks.header')}</h3>
<div
class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 lg:space-x-10 text-center"
>
{#each howItWorksSteps as step}
- <HowItWorksCard image={step.image} step={step.step} description={step.description} />
+ <HowItWorksCard image={step.image} stepID={step.stepID} />
{/each}
</div>
<div bind:this={faq} />
@@ -107,9 +77,9 @@
<!-- faq -->
<div>
<div class="space-y-10">
- <h3 class="text-5xl font-medium text-center">FAQ</h3>
- {#each faqQuestions as question}
- <FaqCard question={question.question} answer={question.answer} />
+ <h3 class="text-5xl font-medium text-center">{$_('faq.header')}</h3>
+ {#each faqIDs as faqID}
+ <FaqCard questionID={faqID} />
{/each}
</div>
<div bind:this={about} />
generated by cgit v1.2.3 (git 2.51.0) at 2026-10-15 04:47:43 +0000