From 2b249d04064c3c89f2f23c8258a505cbee46a743 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sat, 9 Nov 2024 11:25:22 +0100
Subject: [PATCH] update layout

---
 src/routes/contact/+page.svelte        |  31 +++--
 src/routes/donation/+page.svelte       |  74 ++--------
 src/routes/imprint/+page.svelte        | 114 +++++----------
 src/routes/privacy-policy/+page.svelte | 157 +++++++--------------
 src/routes/terms-of-use/+page.svelte   | 183 ++++++++++---------------
 5 files changed, 182 insertions(+), 377 deletions(-)

diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index 5df32434..c44aefa1 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -1,7 +1,6 @@
 <script>
   import logo from "$lib/images/feedback_logo.png";
   import { numberOfUnreadNotification } from "$lib/store";
-  import { goto } from "$app/navigation";
 
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
 
@@ -136,54 +135,60 @@
 
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           <div
-            on:click={() => goto("/pricing")}
             class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
-            <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+            <a
+              href="/pricing"
+              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+            >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Pro Subscription 🔥
+                  Pro Subscription
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
               <span class="text-white p-3 ml-3 mr-3">
                 Upgrade now for unlimited access to all data and tools.
               </span>
-            </div>
+            </a>
           </div>
 
           <div
-            on:click={() => goto("/donation")}
             class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
-            <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+            <a
+              href="/donation"
+              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+            >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Donation ❤
+                  Sponsor Us
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
               <span class="text-white p-3 ml-3 mr-3">
                 Learn more about why we're doing this here
               </span>
-            </div>
+            </a>
           </div>
 
           <div
-            on:click={() => goto("/contact")}
             class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
-            <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+            <a
+              href="/contact"
+              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+            >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Contact Us 💬
+                  Contact Us
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
               <span class="text-white p-3 ml-3 mr-3">
                 Let me know if you need something
               </span>
-            </div>
+            </a>
           </div>
         </aside>
       </div>
diff --git a/src/routes/donation/+page.svelte b/src/routes/donation/+page.svelte
index d35e0bd3..696485c5 100644
--- a/src/routes/donation/+page.svelte
+++ b/src/routes/donation/+page.svelte
@@ -37,7 +37,7 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5"
+  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden pb-20 pt-5 px-4 lg:px-3"
 >
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
@@ -52,70 +52,15 @@
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
         <main class="w-full lg:w-3/4 lg:pr-5">
-          <div
-            class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
-          >
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
-              <!-- Start Column -->
-              <div>
-                <div class="flex flex-row justify-center items-center">
-                  <h1
-                    class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
-                  >
-                    Sponsor
-                  </h1>
-                </div>
-
-                <span
-                  class="text-white text-[1rem] font-medium text-center flex justify-center items-center"
-                >
-                  Apes together sponsor strong—because when we unite our
-                  bananas, we can move mountains!
-                </span>
-              </div>
-              <!-- End Column -->
-
-              <!-- Start Column -->
-              <div class="relative m-auto">
-                <svg
-                  class="w-40 -my-5"
-                  viewBox="0 0 200 200"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <defs>
-                    <filter id="glow">
-                      <feGaussianBlur stdDeviation="5" result="glow" />
-                      <feMerge>
-                        <feMergeNode in="glow" />
-                        <feMergeNode in="SourceGraphic" />
-                      </feMerge>
-                    </filter>
-                  </defs>
-                  <path
-                    fill="#1E40AF"
-                    d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
-                    transform="translate(100 100)"
-                    filter="url(#glow)"
-                  />
-                </svg>
-
-                <div class="z-1 absolute top-5">
-                  <img
-                    class="w-32 sm:w-36 ml-3 sm:ml-2"
-                    src={cloudFrontUrl + "/assets/donation_logo.png"}
-                    alt="logo"
-                  />
-                </div>
-              </div>
-              <!-- End Column -->
-            </div>
+          <div class="mb-6 border-b-[2px]">
+            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
+              Sponsor
+            </h1>
           </div>
 
-          <div
-            class="card w-full bg-[#09090B] border-t sm:border rounded-none sm:rounded-lg border-gray-600 m-auto"
-          >
-            <div class="card-body">
-              <h2 class="text-white text-xl font-semibold">Hey,</h2>
+          <div class="w-full bg-[#09090B] m-auto">
+            <div class="">
+              <h2 class="text-white text-xl font-semibold mb-5">Hey 👋,</h2>
               <p class="text-white mb-5 text-[1rem]">
                 Thank you for considering supporting our mission. As the sole
                 person behind Stocknear—handling everything from backend
@@ -125,8 +70,7 @@
                 <br />
                 Our Pro Membership is priced to be less than a cup of coffee, ensuring
                 that high-quality stock data is within reach for retail investors
-                of all backgrounds. This pricing reflects our core mission:
-                <strong class="italic">Apes together strong</strong>.
+                of all backgrounds.
               </p>
               <div class="text-white mb-5 text-[1rem]">
                 While the Pro Membership is designed to sustain our basic
diff --git a/src/routes/imprint/+page.svelte b/src/routes/imprint/+page.svelte
index f939a144..b3dcac5c 100644
--- a/src/routes/imprint/+page.svelte
+++ b/src/routes/imprint/+page.svelte
@@ -1,10 +1,8 @@
 <script>
   import { numberOfUnreadNotification } from "$lib/store";
-  import { goto } from "$app/navigation";
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
 
   const emailAddress = "support@stocknear.com";
-  let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
 </script>
 
 <svelte:head>
@@ -39,7 +37,7 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40"
+  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden pb-20 pt-5 px-4 lg:px-3"
 >
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
@@ -54,74 +52,19 @@
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
         <main class="w-full lg:w-3/4 lg:pr-5">
-          <div
-            class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
-          >
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
-              <!-- Start Column -->
-              <div>
-                <div class="flex flex-row justify-center items-center">
-                  <h1
-                    class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
-                  >
-                    Imprint
-                  </h1>
-                </div>
-
-                <span
-                  class="text-white text-md font-medium text-center flex justify-center items-center"
-                >
-                  because Germany loves bureaucracy
-                </span>
-              </div>
-              <!-- End Column -->
-
-              <!-- Start Column -->
-              <div class="relative m-auto">
-                <svg
-                  class="w-40 -my-5"
-                  viewBox="0 0 200 200"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <defs>
-                    <filter id="glow">
-                      <feGaussianBlur stdDeviation="5" result="glow" />
-                      <feMerge>
-                        <feMergeNode in="glow" />
-                        <feMergeNode in="SourceGraphic" />
-                      </feMerge>
-                    </filter>
-                  </defs>
-                  <path
-                    fill="#1E40AF"
-                    d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
-                    transform="translate(100 100)"
-                    filter="url(#glow)"
-                  />
-                </svg>
-
-                <div class="z-1 absolute top-4 left-4">
-                  <img
-                    class="w-[70px] ml-5"
-                    src={cloudFrontUrl + "/assets/imprint_logo.png"}
-                    alt="logo"
-                    loading="lazy"
-                  />
-                </div>
-              </div>
-              <!-- End Column -->
-            </div>
+          <div class="mb-6 border-b-[2px]">
+            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
+              Imprint
+            </h1>
           </div>
 
-          <div
-            class="card w-full bg-[#09090B] border-t rounded-none sm:rounded-xl sm:border border-slate-700 m-auto"
-          >
-            <div class="card-body">
+          <div class="w-full bg-[#09090B] m-auto">
+            <div class="">
               <p class="text-white italic mb-2">
                 According to § 5 Telemediengesetz (TMG) ‍
               </p>
 
-              <p class="text-white mb-5">
+              <p class="text-white mb-10">
                 Stocknear GmbH
                 <br />
                 Am Lohgraben 30
@@ -146,13 +89,13 @@
                 VAT ID: DE366905061
               </p>
 
-              <p class="text-white mb-5">
+              <p class="text-white mb-10">
                 Responsible for the content according § 55 Abs. 2 RStV
                 <br />
                 Notice according to the Online Dispute Settlement Regulation
               </p>
 
-              <p class="text-white mb-5">
+              <p class="text-white mb-10">
                 Under applicable law, we are required to inform consumers of the
                 existence of the European Online Dispute Resolution platform,
                 which can be used to resolve disputes without having to go to
@@ -169,11 +112,12 @@
                 above e-mail and phone number.
               </p>
 
-              <h1 class="text-white text-2xl text-start mb-5">
+              <h2 class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-3">
                 Notice in accordance with the Consumer Dispute Settlement Act
                 (VSBG)
-              </h1>
-              <p class="text-white mb-5">
+              </h2>
+
+              <p class="text-white mb-10">
                 We are not willing and obliged to participate in dispute
                 resolution proceedings before a consumer arbitration board.
               </p>
@@ -252,54 +196,60 @@
 
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           <div
-            on:click={() => goto("/pricing")}
             class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
-            <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+            <a
+              href="/pricing"
+              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+            >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Pro Subscription 🔥
+                  Pro Subscription
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
               <span class="text-white p-3 ml-3 mr-3">
                 Upgrade now for unlimited access to all data and tools.
               </span>
-            </div>
+            </a>
           </div>
 
           <div
-            on:click={() => goto("/donation")}
             class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
-            <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+            <a
+              href="/donation"
+              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+            >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Donation ❤
+                  Sponsor Us
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
               <span class="text-white p-3 ml-3 mr-3">
                 Learn more about why we're doing this here
               </span>
-            </div>
+            </a>
           </div>
 
           <div
-            on:click={() => goto("/contact")}
             class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
-            <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+            <a
+              href="/contact"
+              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+            >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Contact Us 💬
+                  Contact Us
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
               <span class="text-white p-3 ml-3 mr-3">
                 Let me know if you need something
               </span>
-            </div>
+            </a>
           </div>
         </aside>
       </div>
diff --git a/src/routes/privacy-policy/+page.svelte b/src/routes/privacy-policy/+page.svelte
index c63f7174..911e7f2c 100644
--- a/src/routes/privacy-policy/+page.svelte
+++ b/src/routes/privacy-policy/+page.svelte
@@ -1,7 +1,5 @@
 <script>
-  import logo from "$lib/images/privacy_policy_logo_v2.png";
   import { numberOfUnreadNotification } from "$lib/store";
-  import { goto } from "$app/navigation";
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
   const emailAddress = "support@stocknear.com";
 </script>
@@ -26,7 +24,7 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40"
+  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden pb-20 pt-5 px-4 lg:px-3"
 >
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
@@ -41,76 +39,26 @@
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
         <main class="w-full lg:w-3/4 lg:pr-5">
-          <div
-            class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
-          >
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
-              <!-- Start Column -->
-              <div>
-                <div class="flex flex-row justify-center items-center">
-                  <h1
-                    class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
-                  >
-                    Privacy Policy
-                  </h1>
-                </div>
-
-                <span
-                  class="text-white text-md font-medium text-center flex justify-center items-center"
-                >
-                  We don't sell data; we're not a garage sale like Facebook!
-                </span>
-              </div>
-              <!-- End Column -->
-
-              <!-- Start Column -->
-              <div class="relative m-auto">
-                <svg
-                  class="w-40 -my-5"
-                  viewBox="0 0 200 200"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <defs>
-                    <filter id="glow">
-                      <feGaussianBlur stdDeviation="5" result="glow" />
-                      <feMerge>
-                        <feMergeNode in="glow" />
-                        <feMergeNode in="SourceGraphic" />
-                      </feMerge>
-                    </filter>
-                  </defs>
-                  <path
-                    fill="#1E40AF"
-                    d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
-                    transform="translate(100 100)"
-                    filter="url(#glow)"
-                  />
-                </svg>
-
-                <div class="z-1 absolute top-5">
-                  <img class="w-24 ml-7" src={logo} alt="logo" />
-                </div>
-              </div>
-              <!-- End Column -->
-            </div>
+          <div class="mb-6 border-b-[2px]">
+            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
+              Privacy Policy
+            </h1>
           </div>
 
-          <div
-            class="card w-full bg-[#09090B] border-t sm:border rounded-none sm:rounded-xl border-slate-700 m-auto"
-          >
-            <div class="card-body">
-              <p class="text-gray-400 italic mb-2 text-sm">
+          <div class="w-full bg-[#09090B] m-auto">
+            <div class="">
+              <p class="text-gray-200 italic mb-2 text-sm">
                 Last updated: 22.06.2023
               </p>
 
-              <p class="text-gray-300 mb-5">
+              <p class="text-white mb-10">
                 Stocknear (the "website" or "site") respects your privacy. This
                 privacy statement describes what information and data we collect
                 from you and how we use it. Please read the whole privacy policy
                 as well as our
                 <a
                   href="/terms-of-use"
-                  class="text-blue-400 hover:underline hover:text-white"
+                  class="text-blue-400 sm:hover:underline sm:hover:text-white"
                   >Terms of use</a
                 >
                 The use of our website is generally possible without providing personal
@@ -128,10 +76,11 @@
                 sending of advertising information, such as spam e-mails.
               </p>
 
-              <h1 class="text-white text-2xl font-medium text-start underline">
+              <h2 class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-3">
                 Cookies
-              </h1>
-              <p class="text-gray-300">
+              </h2>
+
+              <p class="text-white mb-10">
                 Cookies are used by us. By visiting stocknear.com, you accepted
                 to use cookies in accordance with the stocknear Privacy Policy.
                 Most interactive websites employ cookies to allow us to retrieve
@@ -140,13 +89,11 @@
                 making it easier for visitors.
               </p>
 
-              <h1
-                class="text-white text-2xl font-medium text-start mt-5 underline"
-              >
+              <h2 class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-3">
                 Links to other Sites
-              </h1>
+              </h2>
 
-              <div class="text-gray-300">
+              <div class="text-white mb-10">
                 Our Service may contain connections to websites that we do not
                 control. When you click on a third-party link, you will be sent
                 to that third-party's website. We strongly recommend that you
@@ -157,13 +104,11 @@
                 website or services' content, privacy policies, or practices.
               </div>
 
-              <h1
-                class="text-white text-2xl font-medium text-start mt-5 underline"
-              >
+              <h2 class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-3">
                 Security of Data
-              </h1>
+              </h2>
 
-              <div class="text-gray-300">
+              <div class="text-white mb-10">
                 We care about the security of your data, but keep in mind that
                 no form of Internet transmission or electronic storage is
                 completely safe. While we endeavor to protect your Personal Data
@@ -171,14 +116,12 @@
                 its ultimate security.
               </div>
 
-              <h1
-                class="text-white text-2xl font-medium text-start mt-5 underline"
-              >
+              <h2 class="text-white text-2xl sm:text-3xl font-bold mb-3">
                 Your Data Protection Rights Under General Data Protection
                 Regulation (GDPR)
-              </h1>
+              </h2>
 
-              <div class="text-gray-300">
+              <div class="text-white mb-10">
                 If you are a resident of the European Union (EU) and European
                 Economic Area (EEA), you have certain data protection rights,
                 covered by GDPR.
@@ -244,14 +187,12 @@
                 Economic Area (EEA).
               </div>
 
-              <h1
-                class="text-white text-2xl font-medium text-start mt-5 underline"
-              >
+              <h2 class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-3">
                 Your Data Protection Rights under the California Privacy
                 Protection Act (CalOPPA)
-              </h1>
+              </h2>
 
-              <div class="text-gray-300">
+              <div class="text-white mb-10">
                 CalOPPA is the nation's first state law requiring commercial
                 websites and online services to disclose a privacy policy. The
                 law's scope extends far beyond California, requiring any person
@@ -294,13 +235,11 @@
                 the Preferences or Settings page of your web browser.
               </div>
 
-              <h1
-                class="text-white text-2xl font-medium text-start mt-5 underline"
-              >
+              <h2 class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-3">
                 Childrens Privacy
-              </h1>
+              </h2>
 
-              <div class="text-gray-300">
+              <div class="text-white mb-10">
                 Children under the age of 18 ("Child" or "Children") are not
                 permitted to use our Services. We do not collect personally
                 identifying information from children under the age of 18.
@@ -310,13 +249,11 @@
                 erase that information from our servers.
               </div>
 
-              <h1
-                class="text-white text-2xl font-medium text-start mt-5 underline"
-              >
+              <h2 class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-3">
                 Changes to this Privacy Policy
-              </h1>
+              </h2>
 
-              <div class="text-gray-300">
+              <div class="text-white mb-10">
                 We reserve the right to change our Privacy Policy at any moment.
                 Any changes will be communicated to you by posting the revised
                 Privacy Policy on this page.
@@ -332,54 +269,60 @@
 
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           <div
-            on:click={() => goto("/pricing")}
             class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
-            <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+            <a
+              href="/pricing"
+              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+            >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Pro Subscription 🔥
+                  Pro Subscription
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
               <span class="text-white p-3 ml-3 mr-3">
                 Upgrade now for unlimited access to all data and tools.
               </span>
-            </div>
+            </a>
           </div>
 
           <div
-            on:click={() => goto("/donation")}
             class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
-            <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+            <a
+              href="/donation"
+              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+            >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Donation ❤
+                  Sponsor Us
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
               <span class="text-white p-3 ml-3 mr-3">
                 Learn more about why we're doing this here
               </span>
-            </div>
+            </a>
           </div>
 
           <div
-            on:click={() => goto("/contact")}
             class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
-            <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+            <a
+              href="/contact"
+              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+            >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Contact Us 💬
+                  Contact Us
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
               <span class="text-white p-3 ml-3 mr-3">
                 Let me know if you need something
               </span>
-            </div>
+            </a>
           </div>
         </aside>
       </div>
diff --git a/src/routes/terms-of-use/+page.svelte b/src/routes/terms-of-use/+page.svelte
index ac2cdd3d..4f1f2b64 100644
--- a/src/routes/terms-of-use/+page.svelte
+++ b/src/routes/terms-of-use/+page.svelte
@@ -1,7 +1,5 @@
 <script>
-  import logo from "$lib/images/terms_of_use_logo_v3.png";
   import { numberOfUnreadNotification } from "$lib/store";
-  import { goto } from "$app/navigation";
 
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
 </script>
@@ -26,7 +24,7 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40"
+  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden pb-20 pt-5 px-4 lg:px-3"
 >
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
@@ -41,69 +39,19 @@
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
         <main class="w-full lg:w-3/4 lg:pr-5">
-          <div
-            class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
-          >
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
-              <!-- Start Column -->
-              <div>
-                <div class="flex flex-row justify-center items-center">
-                  <h1
-                    class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
-                  >
-                    Terms of Use
-                  </h1>
-                </div>
-
-                <span
-                  class="text-white text-md font-medium text-center flex justify-center items-center"
-                >
-                  The best unread bedtime story you agree to in your sleep.
-                </span>
-              </div>
-              <!-- End Column -->
-
-              <!-- Start Column -->
-              <div class="relative m-auto">
-                <svg
-                  class="w-40 -my-5"
-                  viewBox="0 0 200 200"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <defs>
-                    <filter id="glow">
-                      <feGaussianBlur stdDeviation="5" result="glow" />
-                      <feMerge>
-                        <feMergeNode in="glow" />
-                        <feMergeNode in="SourceGraphic" />
-                      </feMerge>
-                    </filter>
-                  </defs>
-                  <path
-                    fill="#1E40AF"
-                    d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
-                    transform="translate(100 100)"
-                    filter="url(#glow)"
-                  />
-                </svg>
-
-                <div class="z-1 absolute top-5">
-                  <img class="w-28 ml-5" src={logo} alt="logo" />
-                </div>
-              </div>
-              <!-- End Column -->
-            </div>
+          <div class="mb-6 border-b-[2px]">
+            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
+              Terms of Use
+            </h1>
           </div>
 
-          <div
-            class="card w-full bg-[#09090B] border-t sm:border rounded-none sm:rounded-xl border-slate-700 m-auto"
-          >
-            <div class="card-body">
-              <p class="text-gray-400 italic mb-2 text-sm">
+          <div class=" w-full bg-[#09090B] m-auto">
+            <div class="">
+              <p class="text-gray-200 italic mb-2 text-sm">
                 Last updated: 24.07.2024
               </p>
 
-              <p class="text-gray-300 mb-5">
+              <p class="text-white mb-10">
                 Please carefully read the terms and conditions before using this
                 website. By using the site, you agree to these terms as well as
                 our
@@ -116,10 +64,11 @@
                 time.
               </p>
 
-              <h1 class="text-white text-2xl font-medium text-start underline">
+              <h2 class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-3">
                 Stocknear does not provide investment advice
-              </h1>
-              <p class="text-gray-300 mb-5">
+              </h2>
+
+              <p class="text-white mb-10">
                 The information provided is solely for educational purposes
                 only. Before making any investments or financial decisions, we
                 recommend that you consult with a knowledgeable financial
@@ -159,10 +108,11 @@
                 BROKERAGE, OR TAX ADVICE.
               </p>
 
-              <h1 class="text-2xl font-medium text-white text-start underline">
+              <h2 class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-3">
                 Stocknear does not guarantee accuracy of data
-              </h1>
-              <p class="text-gray-300 mb-5">
+              </h2>
+
+              <p class="text-white mb-10">
                 Our stock data comes from a variety of sources. Although every
                 attempt is made to assure correctness, it cannot always be
                 guaranteed. Before making an investment choice, stocknear
@@ -170,20 +120,21 @@
                 reviewing a company's SEC filings.
               </p>
 
-              <h1 class="text-2xl font-medium text-white text-start underline">
+              <h2 class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-3">
                 Use of our content
-              </h1>
-              <p class="text-gray-300 mb-5">
+              </h2>
+              <p class="text-white mb-10">
                 It is not permitted to republish our content in its entirety
                 without our express authorization. You can, however, utilize
                 snippets of the content as long as you do not edit it and
                 clearly mention where you received it.
               </p>
 
-              <h1 class="text-2xl font-medium text-white text-start underline">
+              <h2 class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-3">
                 Liability of stocknear and its authors
-              </h1>
-              <p class="text-gray-300 mb-5">
+              </h2>
+
+              <p class="text-white mb-10">
                 Stocknear or its authors will not be liable to any party for any
                 damages resulting from the use of the site's content. The
                 contents of our pages were created with the utmost care.
@@ -201,10 +152,11 @@
                 infringements, we will remove this content immediately.
               </p>
 
-              <h1 class="text-2xl font-medium text-white text-start underline">
+              <h2 class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-3">
                 Copyright
-              </h1>
-              <p class="text-gray-300 mb-5">
+              </h2>
+
+              <p class="text-white mb-10">
                 The content and works created by the site operators on these
                 pages are subject to German copyright law. The reproduction,
                 editing, distribution and any kind of exploitation outside the
@@ -247,10 +199,11 @@
                 >.
               </p>
 
-              <h3 class="text-2xl font-medium text-white text-start underline">
+              <h2 class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-3">
                 Subscriptions
-              </h3>
-              <p class="text-gray-300 mb-5">
+              </h2>
+
+              <p class="text-white mb-10">
                 We may offer you the ability to purchase subscriptions via Lemon
                 Squeezy. Terms specific to a subscription will be disclosed to
                 you at or prior to the time at which you purchase the
@@ -276,10 +229,11 @@
                 to support@stocknear.com.
               </p>
 
-              <h3 class="text-2xl font-medium text-white text-start underline">
+              <h2 class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-3">
                 Changes to the Price and Service Plans.
-              </h3>
-              <p class="text-gray-300 mb-5">
+              </h2>
+
+              <p class="text-white mb-10">
                 We may at our reasonable discretion change the price of our
                 subscription plans from time to time to reflect the effect of
                 changes in the total costs associated with our service. Examples
@@ -291,16 +245,16 @@
                 (e.g., rent, interest and other financing costs, costs of
                 personnel, service providers and services, IT systems, energy),
                 as well as state-imposed fees, contributions, taxes and duties.
-                Any price changes will apply no earlier than 30 days following
+                Any price changes will apply no earlier than 7 days following
                 notice to you. You can cancel your membership at any time during
                 the notice period to avoid future charges.
               </p>
 
-              <h1 class="text-2xl font-medium text-white text-start underline">
+              <h2 class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-3">
                 Lifetime Access
-              </h1>
+              </h2>
 
-              <div class="text-gray-300">
+              <div class="text-white mb-10">
                 Lifetime access refers to the right to use our Services for as
                 long as they are provided by Stocknear.
                 <br />
@@ -317,11 +271,11 @@
                 lifetime access will terminate.
               </div>
 
-              <h1 class="text-2xl font-medium text-white text-start underline">
+              <h2 class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-3">
                 Termination
-              </h1>
+              </h2>
 
-              <div class="text-gray-300">
+              <div class="text-white mb-10">
                 We may cancel or suspend your account and deny access to the
                 Service at any time, without prior notice or responsibility, for
                 any reason whatsoever and without limitation, including but not
@@ -337,11 +291,11 @@
                 sections, warranty disclaimers, indemnification, and liability limitations.
               </div>
 
-              <h1 class="text-2xl font-medium text-white text-start underline">
+              <h2 class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-3">
                 Amendments To Terms
-              </h1>
+              </h2>
 
-              <div class="text-gray-300">
+              <div class="text-white mb-10">
                 We may amend Terms at any time by posting the amended terms on
                 this site. It is your responsibility to review these Terms
                 periodically.
@@ -358,11 +312,11 @@
                 not agree to the new terms, you are no longer authorized to use Service.
               </div>
 
-              <h1 class="text-2xl font-medium text-white text-start underline">
+              <h2 class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-3">
                 Data Disclaimer
-              </h1>
+              </h2>
 
-              <div class="text-gray-300">
+              <div class="text-white mb-10">
                 All data on this website is provided solely for informational
                 reasons and should not be used to make trading or investing
                 decisions.
@@ -374,6 +328,7 @@
                 at support@stocknear.com.
                 <br />
                 <br />
+                <!--
                 Our Financial Data is provided soley by
                 <a
                   href="https://site.financialmodelingprep.com/"
@@ -384,12 +339,14 @@
                   href="https://docs.benzinga.com/home"
                   class="text-blue-400 hover:underline">Benzinga</a
                 >.
+              -->
               </div>
 
-              <h1 class="text-2xl font-medium text-white text-start underline">
+              <h2 class="mb-1 text-white text-2xl sm:text-3xl font-bold mb-3">
                 Complete Agreement
-              </h1>
-              <p class="text-gray-300 mb-5">
+              </h2>
+
+              <p class="text-white mb-10">
                 These terms and conditions of use, together with our
                 <a
                   href="/privacy-policy"
@@ -421,54 +378,60 @@
 
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           <div
-            on:click={() => goto("/pricing")}
             class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
-            <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+            <a
+              href="/pricing"
+              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+            >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Pro Subscription 🔥
+                  Pro Subscription
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
               <span class="text-white p-3 ml-3 mr-3">
                 Upgrade now for unlimited access to all data and tools.
               </span>
-            </div>
+            </a>
           </div>
 
           <div
-            on:click={() => goto("/donation")}
             class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
-            <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+            <a
+              href="/donation"
+              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+            >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Donation ❤
+                  Sponsor Us
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
               <span class="text-white p-3 ml-3 mr-3">
                 Learn more about why we're doing this here
               </span>
-            </div>
+            </a>
           </div>
 
           <div
-            on:click={() => goto("/contact")}
             class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
-            <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+            <a
+              href="/contact"
+              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+            >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Contact Us 💬
+                  Contact Us
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
               <span class="text-white p-3 ml-3 mr-3">
                 Let me know if you need something
               </span>
-            </div>
+            </a>
           </div>
         </aside>
       </div>