Extracted all strings from the main page into en.json

5 files changed, 35 insertions, 30 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}