From 34c6ca2bb3555efebecf614e21f21f64064703e4 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 31 Mar 2025 19:50:53 +0200
Subject: [PATCH] add adsense component

---
 src/lib/components/Adsense/BottomAds.svelte | 57 +++++++++++++++++++++
 src/routes/about/+page.svelte               | 56 --------------------
 src/routes/faq/+page.svelte                 |  6 +++
 3 files changed, 63 insertions(+), 56 deletions(-)
 create mode 100644 src/lib/components/Adsense/BottomAds.svelte

diff --git a/src/lib/components/Adsense/BottomAds.svelte b/src/lib/components/Adsense/BottomAds.svelte
new file mode 100644
index 00000000..b0bfdb8d
--- /dev/null
+++ b/src/lib/components/Adsense/BottomAds.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  onMount(() => {
+    // Load the Google AdSense script if it hasn't been added yet.
+    if (
+      !document.querySelector(
+        'script[src*="googlesyndication.com/pagead/js/adsbygoogle.js"]',
+      )
+    ) {
+      const script = document.createElement("script");
+      script.src =
+        "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7722951169931877";
+      script.async = true;
+      script.crossOrigin = "anonymous";
+      document.head.appendChild(script);
+    }
+
+    // Push to adsbygoogle after the script has loaded
+    // You might need a small delay if the script isn't immediately ready.
+    const loadAds = () => {
+      try {
+        (window.adsbygoogle = window.adsbygoogle || []).push({});
+      } catch (e) {
+        console.error("Ads failed to load", e);
+      }
+    };
+
+    // Check if the ads script is loaded, then load the ads.
+    if (window.adsbygoogle) {
+      loadAds();
+    } else {
+      // If not, add an event listener to load ads once the script loads.
+      window.addEventListener("load", loadAds);
+    }
+  });
+</script>
+
+<!-- Ad markup -->
+<div
+  class="border bg-gray-100 dark:bg-default shadow-sm border-gray-100 dark:border-gray-600 relative w-full min-h-[150px] mt-10 rounded"
+>
+  <h3
+    class="absolute -top-3 left-1/2 transform -translate-x-1/2 -translate-y-1/2 uppercase text-xs"
+  >
+    Advertisement
+  </h3>
+  <ins
+    class="adsbygoogle"
+    style="display:block"
+    data-ad-client="ca-pub-7722951169931877"
+    data-ad-slot="4890164325"
+    data-ad-format="auto"
+    data-full-width-responsive="true"
+  >
+  </ins>
+</div>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 146923c2..151f7197 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -44,62 +44,6 @@
         <dl
           class="space-y-10 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-12 md:space-y-0"
         >
-          <div class="relative">
-            <dt>
-              <div
-                class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-white text-white dark:text-black"
-              >
-                <svg
-                  class="h-6 w-6"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  style="max-width:40px"
-                  aria-hidden="true"
-                  ><path
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2.3"
-                    d="M8.75 6.5L3.25 12l5.5 5.5m6.5-11l5.5 5.5l-5.5 5.5"
-                  /></svg
-                >
-              </div>
-              <p class="ml-16 text-lg font-semibold leading-6">Open Source</p>
-            </dt>
-            <dd class="ml-16 mt-2">
-              Stocknear's codebase is 100% open-source, ensuring complete
-              transparency.
-            </dd>
-          </div>
-          <div class="relative">
-            <dt>
-              <div
-                class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-white text-white dark:text-black"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  ><g fill="none" fill-rule="evenodd"
-                    ><path
-                      d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
-                    /><path
-                      fill="currentColor"
-                      d="M19 4.741V8a3 3 0 1 1 0 6v3c0 1.648-1.881 2.589-3.2 1.6l-2.06-1.546A8.66 8.66 0 0 0 10 15.446v2.844a2.71 2.71 0 0 1-5.316.744l-1.57-5.496a4.7 4.7 0 0 1 3.326-7.73l3.018-.168a9.34 9.34 0 0 0 4.19-1.259l2.344-1.368C17.326 2.236 19 3.197 19 4.741M5.634 15.078l.973 3.407A.71.71 0 0 0 8 18.29v-3.01l-1.56-.087a5 5 0 0 1-.806-.115M17 4.741L14.655 6.11A11.3 11.3 0 0 1 10 7.604v5.819c1.787.246 3.488.943 4.94 2.031L17 17zM8 7.724l-1.45.08a2.7 2.7 0 0 0-.17 5.377l.17.015l1.45.08zM19 10v2a1 1 0 0 0 .117-1.993z"
-                    /></g
-                  ></svg
-                >
-              </div>
-              <p class="ml-16 text-lg font-semibold leading-6">No ads</p>
-            </dt>
-            <dd class="ml-16 mt-2">
-              Without interruptions or distractions, ensuring your experience is
-              smooth and fast.
-            </dd>
-          </div>
           <div class="relative">
             <dt>
               <div
diff --git a/src/routes/faq/+page.svelte b/src/routes/faq/+page.svelte
index 11a6a1c3..6a16c4fd 100644
--- a/src/routes/faq/+page.svelte
+++ b/src/routes/faq/+page.svelte
@@ -1,7 +1,9 @@
 <script>
   import ArrowLogo from "lucide-svelte/icons/move-up-right";
   import SEO from "$lib/components/SEO.svelte";
+  import BottomAds from "$lib/components/Adsense/BottomAds.svelte";
 
+  export let data;
   let discordURL = import.meta.env.VITE_DISCORD_URL;
   const emailAddress = "contact@stocknear.com";
 </script>
@@ -146,6 +148,10 @@
                 an API in the future.
               </p>
             </div>
+
+            {#if !["Pro", "Plus"]?.includes(data?.user?.tier)}
+              <BottomAds />
+            {/if}
           </div>
         </main>