From 35f8bd038fdbc47786368081c5eff40488736cf8 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sat, 13 Jul 2024 12:13:29 +0200
Subject: [PATCH] add changelog page

---
 src/lib/components/Footer.svelte         |   5 +-
 src/lib/components/ParticleEffect.svelte | 157 +++++++++++++++
 src/routes/+page.svelte                  |  63 ++++--
 src/routes/changelog/+page.svelte        | 242 +++++++++++++++++++++++
 4 files changed, 445 insertions(+), 22 deletions(-)
 create mode 100644 src/lib/components/ParticleEffect.svelte
 create mode 100644 src/routes/changelog/+page.svelte

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 785b0860..8a406178 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -48,11 +48,14 @@
       </div>
       
       <div class="flex-1 mb-2 sm:mb-0">
-        <p class="uppercase text-slate-100 md:mb-6">Services</p>
+        <p class="uppercase text-slate-100 md:mb-6">Products</p>
         <ul class="list-reset mb-6">
           <li class="mt-2 inline-block mr-2 md:block md:mr-0" >
             <a href="/pricing" class="no-underline hover:underline text-gray-300  hover:text-yellow-400">Pricing</a>
           </li>
+          <li class="mt-2 inline-block mr-2 md:block md:mr-0" >
+            <a href="/changelog" class="no-underline hover:underline text-gray-300  hover:text-yellow-400">Changelog</a>
+          </li>
           <li class="mt-2 inline-block mr-2 md:block md:mr-0" >
             <a href="https://stocknear.lemonsqueezy.com/affiliates" rel="noopener noreferrer" target="_blank" class="no-underline hover:underline text-gray-300  hover:text-yellow-400">Affiliate Program</a>
           </li>
diff --git a/src/lib/components/ParticleEffect.svelte b/src/lib/components/ParticleEffect.svelte
new file mode 100644
index 00000000..fcace35f
--- /dev/null
+++ b/src/lib/components/ParticleEffect.svelte
@@ -0,0 +1,157 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+
+  export let quantity = 30;
+  export let staticity = 50;
+  export let ease = 50;
+
+  let canvas: HTMLCanvasElement;
+  let canvasContainer: HTMLDivElement;
+
+  class ParticleAnimation {
+    canvas: HTMLCanvasElement;
+    context: CanvasRenderingContext2D;
+    dpr: number;
+    settings: { quantity: number; staticity: number; ease: number };
+    circles: any[];
+    canvasSize: { w: number; h: number };
+    initCanvas: () => void;
+    resizeCanvas: () => void;
+    drawCircle: (circle: any, update?: boolean) => void;
+    drawParticles: () => void;
+    animate: () => void;
+
+    constructor(el: HTMLCanvasElement, options = {}) {
+      this.canvas = el;
+      if (!this.canvas) return;
+      this.context = this.canvas.getContext('2d');
+      this.dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+      this.settings = {
+        quantity: options.quantity || 30,
+        staticity: options.staticity || 50,
+        ease: options.ease || 50,
+      };
+      this.circles = [];
+      this.canvasSize = {
+        w: 0,
+        h: 0,
+      };
+      this.initCanvas = this.initCanvas.bind(this);
+      this.resizeCanvas = this.resizeCanvas.bind(this);
+      this.drawCircle = this.drawCircle.bind(this);
+      this.drawParticles = this.drawParticles.bind(this);
+      this.animate = this.animate.bind(this);
+      this.init();
+    }
+
+    init() {
+      this.initCanvas();
+      this.animate();
+      if (typeof window !== 'undefined') {
+        window.addEventListener('resize', this.initCanvas);
+      }
+    }
+
+    initCanvas() {
+      this.resizeCanvas();
+      this.drawParticles();
+    }
+
+    resizeCanvas() {
+      this.circles.length = 0;
+      this.canvasSize.w = this.canvas.parentElement.offsetWidth;
+      this.canvasSize.h = this.canvas.parentElement.offsetHeight;
+      this.canvas.width = this.canvasSize.w * this.dpr;
+      this.canvas.height = this.canvasSize.h * this.dpr;
+      this.canvas.style.width = this.canvasSize.w + 'px';
+      this.canvas.style.height = this.canvasSize.h + 'px';
+      this.context.scale(this.dpr, this.dpr);
+    }
+
+    circleParams() {
+      const x = Math.floor(Math.random() * this.canvasSize.w);
+      const y = Math.floor(Math.random() * this.canvasSize.h);
+      const translateX = 0;
+      const translateY = 0;
+      const size = Math.floor(Math.random() * 2) + 1;
+      const alpha = 0;
+      const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1));
+      const dx = (Math.random() - 0.5) * 0.2;
+      const dy = (Math.random() - 0.5) * 0.2;
+      return { x, y, translateX, translateY, size, alpha, targetAlpha, dx, dy };
+    }
+
+    drawCircle(circle, update = false) {
+      const { x, y, translateX, translateY, size, alpha } = circle;
+      this.context.translate(translateX, translateY);
+      this.context.beginPath();
+      this.context.arc(x, y, size, 0, 2 * Math.PI);
+      this.context.fillStyle = `rgba(255, 255, 255, ${alpha})`;
+      this.context.fill();
+      this.context.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+      if (!update) {
+        this.circles.push(circle);
+      }
+    }
+
+    clearContext() {
+      this.context.clearRect(0, 0, this.canvasSize.w, this.canvasSize.h);
+    }
+
+    drawParticles() {
+      this.clearContext();
+      const particleCount = this.settings.quantity;
+      for (let i = 0; i < particleCount; i++) {
+        const circle = this.circleParams();
+        this.drawCircle(circle);
+      }
+    }
+
+    animate() {
+      this.clearContext();
+      this.circles.forEach((circle) => {
+        const { x, y, dx, dy, alpha, targetAlpha } = circle;
+        circle.x += dx;
+        circle.y += dy;
+
+        // Wrap particles around the canvas edges
+        if (circle.x > this.canvasSize.w) circle.x = 0;
+        if (circle.x < 0) circle.x = this.canvasSize.w;
+        if (circle.y > this.canvasSize.h) circle.y = 0;
+        if (circle.y < 0) circle.y = this.canvasSize.h;
+
+        circle.alpha += alpha < targetAlpha ? 0.01 : -0.01;
+        circle.alpha = Math.min(Math.max(circle.alpha, 0), targetAlpha);
+        this.drawCircle(circle, true);
+      });
+      if (typeof window !== 'undefined') {
+        window.requestAnimationFrame(this.animate);
+      }
+    }
+  }
+
+  let animation: ParticleAnimation;
+
+  onMount(() => {
+    if (canvas) {
+      animation = new ParticleAnimation(canvas, { quantity, staticity, ease });
+    }
+  });
+
+  onDestroy(() => {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('resize', animation.initCanvas);
+    }
+  });
+</script>
+
+<div bind:this={canvasContainer}>
+  <canvas bind:this={canvas} data-particle-animation></canvas>
+</div>
+
+<style>
+  canvas {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8e02db5e..c1a9e7af 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -183,7 +183,15 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
                                       class="h-[1px] animate-border-width rounded-full bg-gradient-to-r from-[rgba(251,206,60,0)] via-white to-[rgba(188,126,254,0)] transition-all duration-1000"
                                     />
                                   </div>
-                                  <div class="overlay m-auto flex justify-center items-center w-fit sm:w-[820px] h-full">
+
+                                  <div class="absolute flex items-center justify-center -top-[-140px] sm:top-[270px] -translate-y-1/2 left-1/2 -translate-x-1/2 pointer-events-none w-96 sm:w-[900px] aspect-square">
+                                    <div class="absolute inset-0 translate-z-0 bg-gradient-to-t from-[#E8BB28] to-purple-600 rounded-full blur-[1600px] opacity-[0.15]"></div>
+                                    <div class="absolute w-64 h-64 translate-z-0 bg-gradient-to-t from-[#E8BB28] to-purple-900 rounded-full blur-[800px] "></div>
+                                  </div>
+                                  
+
+
+                                  <div class="overlay m-auto flex justify-center z-20 items-center w-fit sm:w-[820px] h-full">
                                     <img class="w-full" src={cloudFrontUrl+"/assets/showcase-stock.png"} loading = 'lazy' alt="logo">
                                   </div>
                                 </div>
@@ -321,23 +329,36 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
                                   </div>
                               </section>
 
-            
+                              
+
+
                               
                                 <h2 use:intersect={intersectOptions} class="invisible text-white text-3xl sm:text-4xl text-center m-auto font-bold mt-20 w-11/12 sm:w-1/2 mb-10">
                                   Realtime Options Flow from Hedge Funds & Major Institutions
                                 </h2>
                                     
-                                <div use:intersect={intersectOptions} class="invisible relative">
-                                  <div class="absolute -top-4 flex w-full justify-center">
+
+                                <div use:intersect={intersectOptions} class="invisible relative mb-4">
+                                  <div class="absolute top-0 flex w-full justify-center">
                                     <div
                                       class="h-[1px] animate-border-width rounded-full bg-gradient-to-r from-[rgba(251,206,60,0)] via-white to-[rgba(188,126,254,0)] transition-all duration-1000"
                                     />
                                   </div>
+  
+                                  <div class="absolute flex items-center justify-center -top-[-140px] sm:top-[270px] -translate-y-1/2 left-1/2 -translate-x-1/2 pointer-events-none w-96 sm:w-[900px] aspect-square">
+                                    <div class="absolute inset-0 translate-z-0 bg-gradient-to-t from-[#E8BB28] to-purple-600 rounded-full blur-[1600px] opacity-[0.15]"></div>
+                                    <div class="absolute w-64 h-64 translate-z-0 bg-gradient-to-t from-[#E8BB28] to-purple-900 rounded-full blur-[800px] "></div>
+                                  </div>
+                                  
+                                  
+  
+  
                                   <div class="overlay m-auto flex justify-center items-center w-fit sm:w-[820px] h-full">
                                     <img class="w-full" src={cloudFrontUrl+"/assets/showcase-options-flow.png"} loading = 'lazy' alt="logo">
                                   </div>
                                 </div>
-                            
+                                
+
                               
                                 
                                 <section>
@@ -518,23 +539,23 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
 
 .overlay {
   position: relative;
+}
 
-    }
-    
-    .overlay img {
-      width: 100%;
-      height: auto;
-    }
-    
-    .overlay::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 100%;
-      width: 100%;
-      background-image: linear-gradient(0deg, rgba(0, 0, 0, 1), transparent 90%);
-    }
+.overlay img {
+  width: 100%;
+  height: auto;
+}
+
+.overlay::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 50%);
+  pointer-events: none; /* Ensure the overlay doesn't interfere with interaction */
+}
 
     .bg-radial-gradient {
     top: 0;
diff --git a/src/routes/changelog/+page.svelte b/src/routes/changelog/+page.svelte
new file mode 100644
index 00000000..36a237ba
--- /dev/null
+++ b/src/routes/changelog/+page.svelte
@@ -0,0 +1,242 @@
+<script>
+import { numberOfUnreadNotification } from '$lib/store';
+import ParticleEffect from '$lib/components/ParticleEffect.svelte';
+
+export let data;
+</script>
+
+
+
+<svelte:head>
+  <title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Changelog · stocknear</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+
+  <!-- Other meta tags -->
+  <meta property="og:title" content="Changelog · stocknear"/>
+  <meta property="og:type" content="website"/>
+  <!-- Add more Open Graph meta tags as needed -->
+
+  <!-- Twitter specific meta tags -->
+  <meta name="twitter:card" content="summary_large_image"/>
+  <meta name="twitter:title" content="Changelog · stocknear"/>
+  <!-- Add more Twitter meta tags as needed -->
+</svelte:head>
+	    
+
+
+
+<section class="w-full max-w-5xl overflow-hidden m-auto min-h-screen  pb-40">
+    
+
+    <body class="font-inter antialiased text-slate-100 tracking-tight">
+
+        <!-- Page wrapper -->
+        <div class="flex flex-col min-h-screen overflow-hidden supports-[overflow:clip]:overflow-clip">
+    
+       
+    
+            <!-- Page content -->
+            <main class="grow">
+    
+                <!-- Content -->
+                <section class="relative">
+    
+                    <!-- Radial gradient -->
+                    <div class="absolute flex items-center justify-center top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 pointer-events-none w-[500px] aspect-square" aria-hidden="true">
+                        <div class="absolute inset-0 translate-z-0 bg-gradient-to-r from-[#E8BB28] to-purple-600 rounded-full blur-[120px] opacity-20"></div>
+                        <div class="absolute w-32 h-32 translate-z-0 bg-gradient-to-r from-[#E8BB28] to-purple-700 rounded-full blur-[80px] opacity-40"></div>
+                    </div>
+    
+                    <!-- Particles animation -->
+                    <div class="absolute inset-0 h-96 z-10" aria-hidden="true">
+                        <ParticleEffect quantity={50} staticity={40} ease={60} />
+                    </div>
+     
+                    <div class="max-w-6xl mx-auto px-4 sm:px-6">
+                        <div class="pt-32 pb-12 md:pt-40 md:pb-20">
+    
+                            <!-- Page header -->
+                            <div class="text-center pb-12 md:pb-20">
+                                <h1 class="text-4xl sm:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#E8BB28] to-purple-500 via-slate-200 to-slate-200/60 pb-4">
+                                    What's New
+                                </h1>
+                                <div class="max-w-3xl m-auto flex justify-center items-center">
+                                    <p class="w-5/6 text-center text-xl sm:text-2xl text-white">New updates and improvements to Stocknear.</p>
+                                </div>
+                            </div>
+    
+                            <!-- Content -->
+                            <div class="max-w-3xl mx-auto">
+                                <div class="relative">
+                                    <div class="absolute h-full top-4 left-[2px] w-0.5 bg-slate-800 [mask-image:_linear-gradient(0deg,transparent,theme(colors.white)_150px,theme(colors.white))] -z-10 overflow-hidden after:absolute after:h-4 after:top-0 after:-translate-y-full after:left-0 after:w-0.5 after:bg-[linear-gradient(180deg,_transparent,_theme(colors.purple.500/.65)_25%,_theme(colors.purple.200)_50%,_theme(colors.purple.500/.65)_75%,_transparent)] after:animate-shine" aria-hidden="true"></div>
+                                    <!-- Post -->
+                                    <article class="pt-12 first-of-type:pt-0 group">
+                                        <div class="md:flex">
+                                            <div class="w-48 shrink-0">
+                                                <time class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3">
+                                                    <span class="ml-[1.625rem] md:ml-5">July 8-12, 2024</span>
+                                                </time>
+                                            </div>
+                                            <div class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none">
+                                                <header>
+                                                    <h2 class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3">
+                                                        Weekly Update
+                                                    </h2>
+                                                </header>
+                                                    <ol class="text-white list-disc ml-5 sm:ml-3">
+                                                        <li class="p-1">
+                                                            New Feature: Adding Realtime Darkpool Trades of Hedge Funds & Major Institutional Traders
+                                                        </li>
+                                                        <li class="p-1">
+                                                            New Feature: Adding AI Analyst Insight
+                                                        </li>
+                                                        <li class="p-1">
+                                                            Improving frontend and backend code for faster loading times.
+                                                        </li>
+                                                        <li class="p-1">
+                                                            Enhancing UI/UX for easier navigation.
+                                                        </li>
+                                                    </ol>
+                                            </div>
+                                        </div>
+                                    </article>
+
+                                    <article class="pt-12 first-of-type:pt-0 group">
+                                        <div class="md:flex">
+                                            <div class="w-48 shrink-0">
+                                                <time class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3">
+                                                    <span class="ml-[1.625rem] md:ml-5">July 1-5, 2024</span>
+                                                </time>
+                                            </div>
+                                            <div class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none">
+                                                <header>
+                                                    <h2 class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3">
+                                                        Weekly Update
+                                                    </h2>
+                                                </header>
+                                                    <ol class="text-white list-disc ml-5 sm:ml-3">
+                                                        <li class="p-1">
+                                                            New Feature: Adding Implied Volatility
+                                                        </li>
+                                                        <li class="p-1">
+                                                            New Feature: Adding Options Net Flow
+                                                        </li>
+                                                    </ol>
+                                            </div>
+                                        </div>
+                                    </article>
+
+                                    <article class="pt-12 first-of-type:pt-0 group">
+                                        <div class="md:flex">
+                                            <div class="w-48 shrink-0">
+                                                <time class="text-sm inline-flex items-center text-white md:leading-8 before:w-1.5 before:h-1.5 before:rounded-full before:bg-purple-500 before:ring-4 before:ring-purple-500/30 mb-3">
+                                                    <span class="ml-[1.625rem] md:ml-5">June 28, 2024</span>
+                                                </time>
+                                            </div>
+                                            <div class="grow ml-8 md:ml-0 pb-12 group-last-of-type:pb-0 border-b [border-image:linear-gradient(to_right,theme(colors.slate.700/.3),theme(colors.slate.700),theme(colors.slate.700/.3))1] group-last-of-type:border-none">
+                                                <header>
+                                                    <h2 class="text-xl sm:text-2xl font-semibold text-white leading-8 pb-3">
+                                                        Announcement 🎉
+                                                    </h2>
+                                                </header>
+                                                    <span class="text-white">
+                                                        Starting today, I'll keep you updated on the changes from the past week: new features, improvements, bug fixes, and more.
+                                                    </span>
+                                            </div>
+                                        </div>
+                                    </article>
+
+                                </div>
+                            </div>
+    
+                            <!-- Pagination -->
+                             <!--
+                            <div class="max-w-3xl mx-auto">
+                                <ul class="flex items-center justify-between mt-12 pl-8 md:pl-48">
+                                    <li>
+                                        <span class="btn-sm text-slate-700 transition duration-150 ease-in-out group [background:linear-gradient(theme(colors.slate.900),_theme(colors.slate.900))_padding-box,_conic-gradient(theme(colors.slate.400),_theme(colors.slate.700)_25%,_theme(colors.slate.700)_75%,_theme(colors.slate.400)_100%)_border-box] relative before:absolute before:inset-0 before:bg-slate-800/30 before:rounded-full before:pointer-events-none cursor-not-allowed">
+                                            <span class="relative inline-flex items-center">
+                                                <span class="tracking-normal text-slate-700 mr-1">&lt;-</span> Previous Page
+                                            </span>
+                                        </span>
+                                    </li>
+                                    <li>
+                                        <a class="btn-sm text-slate-300 hover:text-white transition duration-150 ease-in-out group [background:linear-gradient(theme(colors.slate.900),_theme(colors.slate.900))_padding-box,_conic-gradient(theme(colors.slate.400),_theme(colors.slate.700)_25%,_theme(colors.slate.700)_75%,_theme(colors.slate.400)_100%)_border-box] relative before:absolute before:inset-0 before:bg-slate-800/30 before:rounded-full before:pointer-events-none" href="#0">
+                                            <span class="relative inline-flex items-center">
+                                                Next Page <span class="tracking-normal text-purple-500 group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out ml-1">-&gt;</span>
+                                            </span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            -->
+    
+                        </div>
+                    </div>
+    
+                </section>
+    
+                <!-- CTA -->
+                {#if !data?.user}
+                <section class="mt-10">
+                    <div class="max-w-6xl mx-auto px-4 sm:px-6">
+                        <div class="relative px-8 py-12 md:py-20 rounded-[3rem] overflow-hidden">
+                            <!-- Radial gradient -->
+                            <div class="absolute flex items-center justify-center top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 pointer-events-none -z-10 w-1/3 aspect-square" aria-hidden="true">
+                                <div class="absolute inset-0 translate-z-0 bg-purple-500 rounded-full blur-[120px] opacity-70"></div>
+                                <div class="absolute w-1/4 h-1/4 translate-z-0 bg-purple-400 rounded-full blur-[40px]"></div>
+                            </div>
+                            <!-- Blurred shape -->
+                            <div class="absolute bottom-0 translate-y-1/2 left-0 blur-2xl opacity-50 pointer-events-none -z-10" aria-hidden="true">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="434" height="427">
+                                    <defs>
+                                        <linearGradient id="bs5-a" x1="19.609%" x2="50%" y1="14.544%" y2="100%">
+                                            <stop offset="0%" stop-color="#A855F7" />
+                                            <stop offset="100%" stop-color="#6366F1" stop-opacity="0" />
+                                        </linearGradient>
+                                    </defs>
+                                    <path fill="url(#bs5-a)" fill-rule="evenodd" d="m0 0 461 369-284 58z" transform="matrix(1 0 0 -1 0 427)" />
+                                </svg>
+                            </div>
+                            <!-- Content -->
+                            <div class="max-w-3xl mx-auto text-center">
+                                <div>
+                                    <div class="text-2xl sm:text-4xl font-bold inline-flex pb-3">
+                                        Start your free trial today
+                                    </div>
+                                </div>
+                                <h2 class="text-center m-auto text-[1rem] sm:text-lg text-white font-medium pb-4">
+                                    Try Stocknear Platform for 7 days. No credit card required.
+                                </h2>
+                                    <a href='/register'
+                                    class="animate-shine mt-5 w-56 sm:w-80 m-auto group relative grid overflow-hidden rounded-xl px-6 py-3 shadow-[0_1000px_0_0_hsl(0_0%_20%)_inset] transition-colors"
+                                >
+                                    <span>
+                                    <span
+                                        class="spark mask-gradient animate-flip before:animate-kitrotate absolute inset-0 h-[100%] w-[100%] overflow-hidden rounded-xl [mask:linear-gradient(white,_transparent_50%)] before:absolute before:aspect-square before:w-[200%] before:rotate-[-90deg] before:bg-[conic-gradient(from_0deg,transparent_0_340deg,white_360deg)] before:content-[''] before:[inset:0_auto_auto_50%] before:[translate:-50%_-15%]"
+                                    />
+                                    </span>
+                                    <span
+                                    class="backdrop absolute inset-px rounded-[11px] bg-[#FBCE3C] transition-colors duration-200 group-hover:bg-[#be9204"
+                                    />
+                                    <span class="z-10 text-black text-[1rem] sm:text-lg font-semibold">
+                                    <slot>Free trial for 7 days</slot>
+                                    </span>
+                                    
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+                {/if}
+    
+            </main>
+    
+    
+        </div>
+
+    
+    </body>
+    
+</section>
\ No newline at end of file