updated: dark theme and layout pages

10 files changed, 168 insertions, 165 deletions

diff --git a/src/components/Code.svelte b/src/components/Code.svelte
index c8c1058a..9d54cc7b 100644
--- a/src/components/Code.svelte
+++ b/src/components/Code.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div
-  class="bg-black text-white rounded-lg p-4 flex gap-4 whitespace-pre-wrap font-mono"
+  class="bg-stone-900 dark:bg-stone-800 text-white rounded-lg p-4 px-5 flex gap-4 whitespace-pre-wrap font-mono shadow-inner shadow-stone-950 dark:shadow-stone-900"
 >
   <div class="overflow-x-scroll max-w-full scrollbar-hide">
     <div class="break-all min-w-[800px]">{samples[sample]}</div>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 92fb23c6..f77e6b41 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -14,62 +14,47 @@
     { url: "/support", titleID: "support" },
   ];
 </script>
+<footer class="pt-16 bg-black">
+	<div class="max-w-[1296px] mx-auto px-8">
+		<!-- footer_top -->
+		<div class="footer_top pb-4">
+			<div class="flex-col md:flex-row flex md:items-center justify-between">
+				<div class="flex-1 mb-12 sm:mb-5">
+					<a href="#" class="footer_logo"><img src="images/footer-logo.png" alt="" /></a>
+					<p class="text-gray-200 mt-10">Copyright © 2023. Swapee.me</p>
+					<p class="text-gray-200 mt-3">All rights reserved.</p>
+					<a href="#" class="btn_language inline-block mt-6 font-bold !text-white hover:!text-black">English</a>
+				</div>
+				<div
+					class="flex-1 footer_top_right flex items-center justify-start md:justify-center "
+				>
+					<div class="flex max-sm:flex-col md:justify-end gap-x-6">
+						<div class="flex-1 xl:mb-0 mb-4 md:pr-0 sm:pr-5">
+							<h6 class="!text-white/80 mb-0">Business enquiries</h6>
+							<a href="mailto:[email protected]">[email protected]</a>
+						</div>
+						<div class="flex-1 xs:pr-5 mb-4 md:pr-0 sm:pr-5">
+							<h6 class="!text-white/80 mb-0">Support enquiries</h6>
+							<a href="mailto:[email protected]">[email protected]</a>
+						</div>
+					</div>
+				</div>
+			</div>
 
-<footer
-  class="space-y-10 md:space-y-0 text-xl block md:flex justify-around mb-20"
->
-  <div class="space-y-5">
-    <div class="text-center w-full">
-      <a href="/"><Icon icon="logo" style="w-48 mx-auto md:mx-0" /></a>
-    </div>
-    <div class="flex gap-2 justify-center sm:hidden">
-      <div>
-        <a href="/register">
-          <button
-            class="bg-black text-white border rounded-full px-4 py-2 font-bold hover:opacity-80 text-lg"
-          >
-            {$t("nav.startInSeconds")}
-          </button>
-        </a>
-      </div>
-    </div>
-    <div class="w-full flex">
-      <div class="mx-auto">
-        <LocaleSelector
-          style="p-2 text-center hover:opacity-80 cursor-pointer border rounded-full"
-        />
-      </div>
-    </div>
-  </div>
-
-  <div class="text-center md:text-left">
-    <p class="font-semibold">{$t("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"
-            class="hover:opacity-80">{$t("footer." + link.titleID)}</a
-          >
-        </li>
-      {/each}
-    </ul>
-  </div>
-
-  <div class="text-center md:text-left">
-    <p class="font-semibold">{$t("footer.company")}</p>
-    <ul class="mt-5 text-secondary space-y-3">
-      {#each companyLinks as link}
-        <li>
-          <a href={link.url} class="hover:opacity-80"
-            >{$t("footer." + link.titleID)}</a
-          >
-        </li>
-      {/each}
-    </ul>
-  </div>
-
-  <Icon icon="shield" style="mx-auto md:mx-0" />
+			<!-- footer_bottom -->
+			<div class="footer_bottom pt-4 pb-2">
+				<ul class="list-unstyled mb-0 ps-0">
+					<li class="pb-3 ">
+						<a href="/docs" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold">Documentation</a>
+					</li>
+					<li class="pb-3">
+						<a href="/privacy" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold">Privacy Policy</a>
+					</li>
+          <li class="pb-3">
+						<a href="/support" class="!text-white/80 opacity-100 hover:!text-swapee-purple/100 font-semibold">Support</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
 </footer>
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index 009ab063..e0a2aad0 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -19,13 +19,14 @@
 </script>
 
 <header
-  class="w-full lg:w-5/6 py-5 mx-auto fixed md:sticky z-10 top-0 bg-white/90"
+  class="w-full container px-10 lg:px-40 md:pb-5 pt-5 mx-auto fixed md:sticky z-10 top-0 bg-white/80 dark:bg-black/80 backdrop-blur-sm"
   bind:this={header}
 >
-	<nav class="block xl:flex flex-wrap justify-between items-center">
+	<nav class="reltive flex flex-wrap justify-between items-center max-md:pb-4">
 		<div class="flex justify-start md:justify-center items-center md:space-x-10">
-			<a href="/" on:click={() => scroll(header)}>
-				<img src="images/logo.png" class="max-w-[140px]" />
+			<a href="/" on:click={() => scroll(header)} class="">
+				<img src="images/logo.png" class="max-w-[140px] dark:hidden" alt="swapee logo" />
+        <img src="images/logo-white.png" class="max-w-[140px] hidden dark:inline-block" alt="swapee logo" />
 			</a>
 		</div>
 
@@ -46,24 +47,24 @@
       {/if}
       {#if user}
         <button
-          class="border rounded-full px-6 py-2 font-bold"
+          class="dark:!bg-black dark:!text-white border-black dark:!border-white !border-2 !font-bold px-6 py-2 rounded-full" 
           on:click={() => goto(`/${user.username}`)}
-          >Home
+         >Home
         </button>
         <button
-          class="bg-black text-white border rounded-full px-6 py-2 font-bold"
+          class="bg-black dark:!bg-white dark:!text-black !text-white border-2 border-black rounded-full px-6 py-2 font-bold"
           on:click={() => goto("/logout")}
         >
           {$t("nav.signOut")}
         </button>
       {:else}
         <button
-          class="border rounded-full px-6 py-2 font-bold hover:opacity-80"
+          class="dark:!bg-black dark:!text-white border-black dark:!border-white !border-2 !font-bold px-6 py-2 rounded-full hover:opacity-80"
           on:click={() => goto("/register")}
           >{$t("nav.startInSeconds")}
         </button>
         <button
-          class="bg-black text-white border rounded-full px-6 py-2 font-bold hover:opacity-80"
+          class="bg-black dark:!bg-white dark:!text-black !text-white border-2 border-black rounded-full px-6 py-2 font-bold hover:opacity-80"
           on:click={() => goto("/login")}
         >
           {$t("nav.signIn")}
@@ -73,46 +74,46 @@
 
     <!-- mobile nav -->
     <button
-      class="block md:hidden absolute top-[34.5px] right-10 z"
+      class="scale-125 z-50 md:hidden"
       on:click={() => (showMobileMenu = !showMobileMenu)}
-      ><Icon icon={!showMobileMenu ? "menu" : "close"} />
+      ><Icon icon={!showMobileMenu ? "menu" : "close"} style="dark:invert" />
     </button>
 
     <div
       class="container w-full px-10 md:hidden absolute top-0 {showMobileMenu
         ? 'right-0'
-        : 'right-[-100%]'} transition-all ease-in-out duration-300 h-[100vh] w-full bg-white"
+        : 'right-[-100%]'} transition-all ease-in-out duration-300 h-[100vh] w-full bg-white dark:bg-black"
     >
       <div class="space-y-8 mt-24 font-bold text-xl">
-        <button on:click={() => mobileMenuButtonClick(howItWorks)} class="block"
+        <button on:click={() => mobileMenuButtonClick(howItWorks)} class="block dark:!text-gray-200"
           >{$t("howItWorks.header")}</button
         >
-        <button on:click={() => mobileMenuButtonClick(faq)} class="block"
+        <button on:click={() => mobileMenuButtonClick(faq)} class="block dark:!text-gray-200"
           >{$t("faq.header")}</button
         >
-        <button on:click={() => mobileMenuButtonClick(about)} class="block"
+        <button on:click={() => mobileMenuButtonClick(about)} class="block dark:!text-gray-200"
           >{$t("about.header")}</button
         >
         {#if !user}
           <button
-            class="border rounded-full px-6 py-2 font-bold block w-full"
+            class="dark:!bg-black dark:!text-white border-black dark:!border-white !border-2 !font-bold px-6 py-2 rounded-full w-full"
             on:click={() => goto("/register")}
             >{$t("nav.startInSeconds")}
           </button>
           <button
-            class="bg-black text-white border rounded-full px-6 py-2 font-bold block w-full"
+            class="bg-black dark:!bg-white dark:!text-black !text-white border-2 border-black rounded-full px-6 py-2 font-bold w-full"
             on:click={() => goto("/login")}
           >
             {$t("nav.signIn")}
           </button>
         {:else}
           <button
-            class="border rounded-full px-6 py-2 font-bold block"
+            class="dark:!bg-black dark:!text-white border-black dark:!border-white !border-2 !font-bold px-6 py-2 rounded-full"
             on:click={() => goto(`/${user.username}`)}
             >{$t("nav.account")}
           </button>
           <button
-            class="bg-black text-white border rounded-full px-6 py-2 font-bold block"
+            class="bg-black dark:!bg-white dark:!text-black !text-white border-2 border-black rounded-full px-6 py-2 font-bold w-full"
             on:click={() => goto("/logout")}
           >
             {$t("nav.signOut")}
@@ -124,6 +125,7 @@
 </header>
 
 <style>
+  @import '../../static/style.css';
 	.z {
 		z-index: 100;
 	}
diff --git a/src/components/buttons/ThemeToggle.svelte b/src/components/buttons/ThemeToggle.svelte
index d62744c0..7b9a06e4 100644
--- a/src/components/buttons/ThemeToggle.svelte
+++ b/src/components/buttons/ThemeToggle.svelte
@@ -1,6 +1,6 @@
 <!-- <button {...$$restProps}>toggle</button> -->
 <button
-    class="text-gray-300 dark:!text-gray-600 hover:bg-gray-100 dark:!hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 border-2 border-gray-600 bg-black dark:!bg-white dark:!border-gray-300 dark:!focus:ring-gray-700 rounded-full text-sm p-2.5 transition-all"
+    class="text-white dark:!text-black hover:bg-gray-100 dark:!hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 border-2 border-gray-600 bg-black dark:!bg-white dark:!border-gray-300 dark:!focus:ring-gray-700 rounded-full text-sm p-2.5 transition-all"
     {...$$restProps}
 >
     <svg
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index 400096f9..d7b069b5 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -32,7 +32,7 @@
 <svelte:window bind:innerWidth={w} />
 
 <AppHeader {data} />
-<div class="container px-4 max-w-lg mx-auto space-y-5 mt-20">
+<div class="container px-4 max-w-xl mx-auto space-y-5 mt-20">
   <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">
     {$t("payments.send")}
   </h1>
@@ -58,7 +58,7 @@
       />
     </div>
 
-    <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
       <a
         href={`/qr/${encodeURIComponent(text)}`}
         class:invisible={!text?.length}
@@ -84,7 +84,7 @@
 
       <button
         type="button"
-        class="flex border dark:border-white rounded-full px-6 py-2 font-bold hover:opacity-80 mr-1"
+        class="flex border dark:border-white rounded-full px-6 py-2 font-bold hover:opacity-80 "
         on:click={paste}
       >
         <Icon icon="paste" style="mr-2 w-6 my-auto dark:invert" />
diff --git a/src/routes/(app)/support/+page.svelte b/src/routes/(app)/support/+page.svelte
index f637867b..fd4c2e9e 100644
--- a/src/routes/(app)/support/+page.svelte
+++ b/src/routes/(app)/support/+page.svelte
@@ -77,7 +77,7 @@
       {$t("user.support.header")}
     </h1>
 
-		<p class="text-secondary dark:text-gray-300 text-lg">
+		<p class="text-secondary dark:text-gray-200 text-lg">
 			Fill out this form or email us directly at <a
 				class="underline"
 				href="mailto:[email protected]">[email protected]</a
@@ -90,7 +90,7 @@
           >{$t("user.support.accountName")}</label
         >
         <input
-          class="bg-primary dark:bg-stone-800 border-0 mt-3"
+          class="input-swapee mt-3"
           type="text"
           name="account"
           required
@@ -103,7 +103,7 @@
           >{$t("user.support.email")}</label
         >
         <input
-          class="bg-primary dark:bg-stone-800 border-0 mt-3"
+          class="input-swapee mt-3"
           type="email"
           name="email"
           bind:value={email}
@@ -117,7 +117,7 @@
         >
         <textarea
           rows={5}
-          class="bg-primary dark:bg-stone-800 border-0 mt-3"
+          class="input-swapee mt-3"
           type="text"
           name="message"
           bind:value={message}
@@ -130,7 +130,7 @@
         disabled={!email || !message}
         class="g-recaptcha {!email || !message
           ? 'opacity-50'
-          : 'opacity-100'} bg-black dark:bg-white text-white dark:text-black font-bold rounded-xl py-3 w-full mx-auto {email &&
+          : 'opacity-100'} bg-black dark:bg-swapee-purple text-white font-bold rounded-xl py-3 w-full mx-auto {email &&
         message
           ? 'hover:opacity-80'
           : ''}">{$t("user.support.send")}</button
diff --git a/src/routes/(static)/+layout.svelte b/src/routes/(static)/+layout.svelte
index 13073d5a..cfee0dd1 100644
--- a/src/routes/(static)/+layout.svelte
+++ b/src/routes/(static)/+layout.svelte
@@ -9,7 +9,11 @@
 
 <SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
 <LandingHeader {user} />
-<main class="container flex px-10 md:px-40 mx-auto min-h-[600px] pb-20">
+<main class="container flex px-10 lg:px-40 mx-auto min-h-[600px] pb-20">
   <slot />
 </main>
 <Footer />
+
+<style>
+  
+</style>
\ No newline at end of file
diff --git a/src/routes/(static)/docs/+page.svelte b/src/routes/(static)/docs/+page.svelte
index 451b57f3..0f5e20cf 100644
--- a/src/routes/(static)/docs/+page.svelte
+++ b/src/routes/(static)/docs/+page.svelte
@@ -15,23 +15,23 @@
 </script>
 
 <div class="space-y-8 lg:text-xl mt-20 pt-20 md:pt-0 w-full max-w-full">
-  <h1 class="text-4xl">Documentation</h1>
+  <h1 class="text-5xl f_bebas_neue tracking-[0.2rem] font-bold">Documentation</h1>
 
-	<p class="text-secondary">
+	<p class="text-secondary dark:text-gray-200">
 		Swapee has a simple REST API that can be used to register accounts and make payments and
 		queries.
 	</p>
 
-  <h2 class="text-2xl">API Base URL</h2>
-  <div class="bg-black text-white rounded-lg p-4 flex gap-4">
+  <h2 class="text-3xl font-semibold f_bebas_neue tracking-[0.2rem]">API Base URL</h2>
+  <div class="bg-stone-900 dark:bg-stone-800 text-white rounded-lg p-4 px-5 flex gap-4">
     <div>{api}</div>
     <button class="ml-auto my-auto invert opacity-90" on:click={() => copy(api)}
       ><Icon icon="copy" style="w-10 max-w-none" /></button
     >
   </div>
 
-  <h2 class="text-2xl">Auth Token</h2>
-  <p class="text-secondary">
+  <h2 class="text-3xl font-semibold f_bebas_neue tracking-[0.2rem]">Auth Token</h2>
+  <p class="text-secondary dark:text-gray-200">
     {#if user && token}
       This token authorizes you to use the API as <b>{user.username}</b>.
     {:else}
@@ -42,7 +42,7 @@
     Save it in a variable called <b>$token</b> to run the examples.
   </p>
 
-  <div class="bg-black text-white rounded-lg p-4 flex gap-4">
+  <div class="bg-stone-900 dark:bg-stone-800 text-white rounded-lg p-4 px-5 flex gap-4">
     <div class="w-full break-all">{tokenSample}</div>
     <button
       class="ml-auto my-auto invert opacity-90"
@@ -51,20 +51,20 @@
     >
   </div>
 
-  <h2 class="text-2xl">POST /register</h2>
-  <p class="text-secondary">
+  <h2 class="text-3xl font-semibold f_bebas_neue tracking-[0.2rem]">POST /register</h2>
+  <p class="text-secondary dark:text-gray-200">
     Register a new user account with a username and password
   </p>
   <Code sample="register" />
 
-  <h2 class="text-2xl">POST /login</h2>
-  <p class="text-secondary">Login to an account to get its auth token</p>
+  <h2 class="text-3xl font-semibold f_bebas_neue tracking-[0.2rem]">POST /login</h2>
+  <p class="text-secondary dark:text-gray-200">Login to an account to get its auth token</p>
   <Code sample="login" />
 
-  <h2 class="text-2xl">POST /invoice</h2>
-  <p class="text-secondary">Create an invoice.</p>
+  <h2 class="text-3xl font-semibold f_bebas_neue tracking-[0.2rem]">POST /invoice</h2>
+  <p class="text-secondary dark:text-gray-200">Create an invoice.</p>
 
-  <div class="text-secondary">
+  <div class="text-secondary dark:text-gray-200">
     <div>Request params</div>
     <div class="grid grid-cols-3 ml-2">
       <div class="font-bold">type</div>
@@ -93,28 +93,28 @@
   <p>Specify a webhook to be called when an invoice is paid</p>
   <Code sample="webhook" />
 
-  <h2 class="text-2xl">GET /invoice/:hash</h2>
-  <p class="text-secondary">
+  <h2 class="text-3xl font-semibold f_bebas_neue tracking-[0.2rem]">GET /invoice/:hash</h2>
+  <p class="text-secondary dark:text-gray-200">
     Fetch an invoice by passing a bitcoin address or lightning payment hash
   </p>
   <Code sample="fetchInvoice" />
 
-  <h2 class="text-2xl">POST /payments</h2>
-  <p class="text-secondary">Send a lightning payment</p>
+  <h2 class="text-3xl font-semibold f_bebas_neue tracking-[0.2rem]">POST /payments</h2>
+  <p class="text-secondary dark:text-gray-200">Send a lightning payment</p>
   <Code sample="lightning" />
 
-  <p class="text-secondary">Send a bitcoin payment</p>
+  <p class="text-secondary dark:text-gray-200">Send a bitcoin payment</p>
   <Code sample="bitcoin" />
 
-  <p class="text-secondary">Send an internal payment to another user</p>
+  <p class="text-secondary dark:text-gray-200">Send an internal payment to another user</p>
   <Code sample="internal" />
 
-  <h2 class="text-2xl">GET /payments</h2>
-  <p class="text-secondary">
+  <h2 class="text-3xl font-semibold f_bebas_neue tracking-[0.2rem]">GET /payments</h2>
+  <p class="text-secondary dark:text-gray-200">
     Get all payments sent or received by the current user
   </p>
 
-  <div class="text-secondary">
+  <div class="text-secondary dark:text-gray-200">
     <div>Query params</div>
     <div class="grid grid-cols-3 ml-2">
       <div class="font-bold">start</div>
@@ -129,3 +129,27 @@
   </div>
   <Code sample="payments" />
 </div>
+
+<style>
+  h2 + p {
+    margin-top: 0.75rem !important;
+  }
+
+  h2 {
+    display: inline-block;
+    position: relative;
+  }
+
+  h2::after{
+    content: '';
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    left: 50%;
+    height: 3px;
+    border-radius: 2px;
+    background: #7105f3;
+    transform: translateX(-50%);
+}
+</style>
\ No newline at end of file
diff --git a/src/routes/(static)/privacy/+page.svelte b/src/routes/(static)/privacy/+page.svelte
index 4e1e30fa..ffd99f38 100644
--- a/src/routes/(static)/privacy/+page.svelte
+++ b/src/routes/(static)/privacy/+page.svelte
@@ -1,5 +1,5 @@
-<div class="block space-y-5">
-	<h1 class="text-2xl">Privacy Policy</h1>
+<div class="block space-y-5 mt-28 md:mt-8">
+	<h1 class="text-5xl f_bebas_neue tracking-[0.2rem] font-bold">Privacy Policy</h1>
 	<p>
 		At Swapee.me, creators of the mystical Lightning Wallet, we hold your privacy and personal
 		information in the highest regard. This unique privacy policy outlines our commitment to
@@ -65,3 +65,30 @@
 		these mystifying worlds, for we bear no responsibility for their mystical ways.
 	</p>
 </div>
+
+<style>
+	h2 + p {
+	  margin-top: 0.4rem !important;
+	  margin-bottom: 1rem !important;
+	}
+  
+	h2 {
+	  display: inline-block;
+	  position: relative;
+	  font-weight: 700;
+	  text-transform: uppercase;
+	}
+  
+	/* h2::after{
+	  content: '';
+	  position: absolute;
+	  bottom: 0;
+	  right: 0;
+	  width: 100%;
+	  left: 50%;
+	  height: 3px;
+	  border-radius: 2px;
+	  background: #7105f3;
+	  transform: translateX(-50%);
+  } */
+  </style>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1b1d8901..1e8b6293 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,8 +3,10 @@
 	import * as Accordion from "$lib/shadcn/components/ui/accordion";
 	import { Separator } from "$lib/shadcn/components/ui/separator";
 	import { page } from '$app/stores';
+	import { t } from "$lib/translations";
 	import { scroll } from '$lib/utils';
     import ThemeToggle from "../components/buttons/ThemeToggle.svelte";
+    import Footer from "../components/Footer.svelte";
 	
 	export let data;
 	let about, faq;
@@ -134,7 +136,7 @@
 			The easiest way to get <br />
 			started with bitcoin.
 		</h1>
-		<p class="text-center txt_slate_blue mb-4">
+		<p class="text-center txt_slate_blue dark:!text-gray-200 mb-4">
 			A simple but powerful web wallet for everyone. *No software or hardware required.*
 		</p>
 		<a href="/register" class="btn_purple"><span class="px-5">Start in Seconds</span></a>
@@ -153,8 +155,8 @@
 			<div class="col-lg-4 col-md-6 mb-lg-0 mb-4">
 				<div class="swapee_3_grids h-100 text-center col-md-10 mx-auto">
 					<img src="images/swapee-grid-1-3.png" class="mx-auto hover:scale-[1.025] transition-all duration-500 ease-in-out" alt="" />
-					<h5 class="f_bebas_neue fw-bold letter_space_1">Create your account</h5>
-					<p class="txt_slate_blue lh-base">
+					<h5 class="f_bebas_neue fw-bold letter_space_1 dark:text-white">Create your account</h5>
+					<p class="txt_slate_blue dark:!text-gray-200 lh-base">
 						A username and password is all you need to get started. <a
 							href="#"
 							class="swapee_grid_link">Don’t forget it!</a
@@ -165,8 +167,8 @@
 			<div class="col-lg-4 col-md-6 mb-lg-0 mb-4">
 				<div class="swapee_3_grids h-100 text-center col-md-10 mx-auto">
 					<img src="images/swapee-grid-2-3.png" class="mx-auto hover:scale-[1.025] transition-all duration-500 ease-in-out" alt="" />
-					<h5 class="f_bebas_neue fw-bold letter_space_1">Ask for payments</h5>
-					<p class="txt_slate_blue lh-base">
+					<h5 class="f_bebas_neue fw-bold letter_space_1 dark:text-white">Ask for payments</h5>
+					<p class="txt_slate_blue dark:!text-gray-200 lh-base">
 						It’s the same as you normally would traditionally, but with bitcoin.
 					</p>
 				</div>
@@ -174,8 +176,8 @@
 			<div class="col-lg-4 col-md-6">
 				<div class="swapee_3_grids h-100 text-center col-md-10 mx-auto">
 					<img src="images/swapee-grid-3-3.png" class="mx-auto hover:scale-[1.025] transition-all duration-500 ease-in-out" alt="" />
-					<h5 class="f_bebas_neue fw-bold letter_space_1">That's all!</h5>
-					<p class="txt_slate_blue lh-base">
+					<h5 class="f_bebas_neue fw-bold letter_space_1 dark:text-white">That's all!</h5>
+					<p class="txt_slate_blue dark:!text-gray-200 lh-base">
 						Spend your coins immediately or save it and watch it grow, the choice is yours.
 					</p>
 				</div>
@@ -195,7 +197,7 @@
 						Lightning Network <br />
 						Brings Instant Payments
 					</h2>
-					<p class="txt_slate_blue">
+					<p class="txt_slate_blue dark:!text-gray-200">
 						Say goodbye to the headaches of waiting for bank settlements and dealing with
 						chargebacks with our payment solution. With instant settlement and no 3% credit card
 						processing fees, merchants can enjoy hassle-free retail payments.
@@ -232,7 +234,7 @@
 					<h2 class="h1 f_bebas_neue fw-bold dark:text-white br_md_none mb-3 letter_space_2 lh-1">
 						Simple to uses
 					</h2>
-					<p class="txt_slate_blue mb-4">
+					<p class="txt_slate_blue dark:!text-gray-200 mb-4">
 						Just enter an amount in your local currency, share the QR code and you’re done. We do
 						all the heavy lifting so you can focus on your business. You always have the option of
 						taking custody of your funds by withdrawing instantly at any time.
@@ -263,7 +265,7 @@
 					<h2 class="h1 letter_space_2 f_bebas_neue fw-bold dark:text-white br_md_none mb-3 lh-1">
 						Brand it your way!
 					</h2>
-					<p class="txt_slate_blue">
+					<p class="txt_slate_blue dark:!text-gray-200">
 						You have complete control over your profile page's aesthetic. Customize it with your
 						preferred color scheme, avatar, and banner to reflect your brand, personality and
 						interests.
@@ -301,7 +303,7 @@
 						<Accordion.Trigger class="py-0">
 							<h2 class="text-base pt-3 pb-3 font-bold border-b-black dark:!border-b-swapee-purple {askedQuestionsAccordionValue == `item-${askedQuestionAccordion.id}` ? 'border-b-2' : ''}">{askedQuestionAccordion.title}</h2>
 						</Accordion.Trigger>
-						<Accordion.Content class="text-base text-slate-500 mt-0">
+						<Accordion.Content class="text-base text-slate-500 dark:text-gray-200 mt-0">
 							<Separator orientation="horizontal" class="mt-0 mb-3 bg-purple-950" />
 							<p class="mb-0">{askedQuestionAccordion.description}</p>
 						</Accordion.Content>	
@@ -330,45 +332,4 @@
 	</div>
 </div>
 
-<!-- footer -->
-<footer class="site_footer">
-	<div class="container-lg px-4">
-		<!-- footer_top -->
-		<div class="footer_top pb-4">
-			<div class="row align-items-center justify-content-between">
-				<div class="col-md-5 mb-md-0 mb-5">
-					<a href="#" class="footer_logo"><img src="images/footer-logo.png" alt="" /></a>
-					<p class="text-white-50 mt-10">Copyright © 2023. Swapee.me</p>
-					<p class="text-white-50 mt-3">All rights reserved.</p>
-					<a href="#" class="btn_language d-inline-block mt-3">English</a>
-				</div>
-				<div
-					class="ps-md-4 footer_top_right col-md-6 d-flex align-items-center justify-content-end justify-content-sm-center justify-content-between"
-				>
-					<div class="row justify-content-md-end">
-						<div class="col-sm-6 mb-xl-0 mb-4 pe-md-0 pe-sm-5">
-							<h6 class="text-white opacity-75 mb-0">Business enquiries</h6>
-							<a href="mailto:[email protected]">[email protected]</a>
-						</div>
-						<div class="col-sm-6 pe-xl-5 mb-4 pe-md-0 pe-sm-5">
-							<h6 class="text-white opacity-75 mb-0">Support enquiries</h6>
-							<a href="mailto:[email protected]">[email protected]</a>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<!-- footer_bottom -->
-			<div class="footer_bottom pt-4 pb-2">
-				<ul class="list-unstyled mb-0 ps-0">
-					<li class="pb-3">
-						<a href="/docs">Documentation</a>
-					</li>
-					<li class="pb-3">
-						<a href="/privacy">Privacy Policy</a>
-					</li>
-				</ul>
-			</div>
-		</div>
-	</div>
-</footer>
+<Footer />
\ No newline at end of file