From 94d815636a38155e4d665485505e222daf71a785 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sat, 6 Jul 2024 14:17:27 +0200
Subject: [PATCH] update landing page

---
 src/lib/components/Marquee.svelte    | 148 +++++++++++++++++++++++++++
 src/lib/components/ReviewCard.svelte |  27 +++++
 src/routes/+page.svelte              |  27 ++++-
 tailwind.config.cjs                  |   9 +-
 4 files changed, 206 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/components/Marquee.svelte
 create mode 100644 src/lib/components/ReviewCard.svelte

diff --git a/src/lib/components/Marquee.svelte b/src/lib/components/Marquee.svelte
new file mode 100644
index 00000000..03825721
--- /dev/null
+++ b/src/lib/components/Marquee.svelte
@@ -0,0 +1,148 @@
+<script lang="ts">
+    import { cn } from "$lib/utils";
+    import ReviewCard from '$lib/components/ReviewCard.svelte';
+    export let pauseOnHover: boolean = false;
+    export let vertical: boolean = false;
+    export let repeat: number = 4;
+    export let reverse: boolean = false;
+  
+    const firstReviewBatch = [
+  {
+    name: "Moh",
+    body: "Awesome site 🔥! The real-time data and insights are invaluable for my investments.",
+    img: "https://avatar.vercel.sh/moh",
+  },
+  {
+    name: "Markus",
+    body: "Speechless. The detailed charts and summaries are just what I needed.",
+    img: "https://avatar.vercel.sh/markus",
+  },
+  {
+    name: "Mintha",
+    body: "Really good ❤. The interface and stock overviews are a game-changer.",
+    img: "https://avatar.vercel.sh/mintha",
+  },
+  {
+    name: "Steven",
+    body: "Perfect, keep it up 🚀! The market analysis and forecasts are top-notch.",
+    img: "https://avatar.vercel.sh/steven",
+  },
+  {
+    name: "Lars",
+    body: "Amazing! The site simplifies complex data into clear insights.",
+    img: "https://avatar.vercel.sh/lars",
+  }
+];
+
+const secondReviewBatch = [
+    {
+    name: "Alanis",
+    body: "Love it 🫰🏻! The charts with concise explanations make stock movements clear.",
+    img: "https://avatar.vercel.sh/alanis",
+  },
+  {
+    name: "Parviz",
+    body: "Great, already shared 😎! This site is my go-to for stock information.",
+    img: "https://avatar.vercel.sh/parviz",
+  },
+  {
+    name: "Daniel",
+    body: "Finally, a site that helps me find great stocks 💸. The research is spot-on.",
+    img: "https://avatar.vercel.sh/daniel",
+  },
+  {
+    name: "Hassan",
+    body: "The best platform so far for researching stocks 💎.",
+    img: "https://avatar.vercel.sh/hassan",
+  },
+  {
+    name: "Pete",
+    body: "The platform promised High Quality Wallstreet Data and they delivered it. Love it!",
+    img: "https://avatar.vercel.sh/pete",
+  },
+]
+    
+</script>
+  
+
+  <div
+    class={cn(
+      "slider group flex overflow-hidden p-2 [--duration:12s] [--gap:1rem] [gap:var(--gap)]"
+      )}
+  >
+    {#each firstReviewBatch as item, i (i)}
+      <div
+        class={cn("flex shrink-0 justify-around animate-marquee flex-row [gap:var(--gap)]", {
+          "group-hover:[animation-play-state:paused]": true,
+          "[animation-direction:reverse]": true,
+        })}
+      >
+            <ReviewCard img={item?.img} name={item?.name} body={item?.body}/>
+      </div>
+    {/each}
+
+    
+  </div>
+
+  
+  <div
+  class={cn(
+    "slider group flex overflow-hidden p-2 [--duration:12s] [--gap:1rem] [gap:var(--gap)]"
+    )}
+>
+  {#each secondReviewBatch as item, i (i)}
+    <div
+      class={cn("flex shrink-0 justify-around animate-marquee flex-row [gap:var(--gap)]", {
+        "group-hover:[animation-play-state:paused]": true,
+        "[animation-direction:reverse]": false,
+      })}
+    >
+          <ReviewCard img={item?.img} name={item?.name} body={item?.body}/>
+    </div>
+  {/each}
+
+  
+</div>
+
+
+
+<style lang='scss'>
+
+@mixin white-gradient {
+    background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
+}
+
+$animationSpeed: 60s;
+
+
+// Styling
+.slider {
+    margin: auto;
+    overflow: hidden;
+    position: relative;
+
+    &::before,
+    &::after {
+    @include white-gradient;
+    content: "";
+    height: 100%;
+    position: absolute;
+    width: 2%;
+    z-index: 2;
+    }
+
+    &::after {
+    right: 0;
+    top: 0;
+    transform: rotateZ(180deg);
+    }
+
+    &::before {
+    left: 0;
+    top: 0;
+    }
+
+    
+}
+</style>
+      
\ No newline at end of file
diff --git a/src/lib/components/ReviewCard.svelte b/src/lib/components/ReviewCard.svelte
new file mode 100644
index 00000000..5fdf0427
--- /dev/null
+++ b/src/lib/components/ReviewCard.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { cn } from "$lib/utils";
+  
+    export let img: string;
+    export let name: string;
+    export let body: string;
+</script>
+  
+  <figure
+    class={cn(
+      "relative w-64 cursor-pointer overflow-hidden rounded-xl border p-4 border-gray-50/[.1] bg-gray-50/[.10] hover:bg-gray-50/[.15]",
+      // dark styles
+      "border-gray-50/[.1] bg-gray-50/[.10] hover:bg-gray-50/[.15]"
+    )}
+  >
+    <div class="flex flex-row items-center gap-2">
+      <img class="rounded-full w-8 h-8"  alt="" src={img} />
+      <div class="flex flex-col">
+        <!-- svelte-ignore a11y-structure -->
+        <figcaption class="text-sm font-medium text-white">
+          {name}
+        </figcaption>
+      </div>
+    </div>
+    <blockquote class="mt-2 text-sm text-left text-white">{body}</blockquote>
+  </figure>
+  
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9c84eeaf..64d527fb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,8 @@
 <script lang='ts'>  
   import { userRegion, numberOfUnreadNotification} from '$lib/store';
   import DotPattern from '$lib/components/DotPattern.svelte';
-  
+  import Marquee from '$lib/components/Marquee.svelte';
+
   //import Discount from '$lib/components/Discount.svelte';
 
   const usRegion = ['cle1','iad1','pdx1','sfo1'];
@@ -59,6 +60,7 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
 />
 
 
+
 <div class="w-full max-w-screen overflow-hidden m-auto min-h-screen bg-[#000]">
 
 
@@ -256,7 +258,7 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
   
                                 </div>
                                 
-                                <h2 class="text-white text-3xl sm:text-4xl font-bold mt-10 w-5/6 sm:w-1/2 text-center m-auto">
+                                <h2 class="text-white text-3xl sm:text-4xl font-bold mt-16 w-5/6 sm:w-1/2 text-center m-auto">
                                   AI-Powered Algorithms to assist you in any way
                                 </h2>
 
@@ -306,6 +308,7 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
                                       </div>
                                   </div>
                               </section>
+
             
                               
                                 <h2 class="text-white text-3xl sm:text-4xl text-center m-auto font-bold mt-20 w-11/12 sm:w-1/2 mb-10">
@@ -373,7 +376,25 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
                               </section>
             
 
-                                <h1 class="text-white w-5/6 sm:w-full m-auto text-3xl sm:text-4xl font-bold mt-10 mb-4">
+
+                              <h2 class="text-white text-3xl sm:text-4xl font-bold mt-16 w-11/12 sm:w-1/2 text-center m-auto">
+                                Loved by our Users ❤
+                              </h2>
+
+                              <section class="relative flex items-center justify-center">
+                                <div class="absolute top-0 max-w-4xl m-auto px-4 sm:px-6">
+                                    <div class="pt-8 pb-12 md:pb-20">
+                                
+                                      <Marquee />
+
+                                    </div>
+                                </div>
+                            </section>
+
+
+
+
+                                <h1 class="text-white w-5/6 sm:w-full m-auto text-3xl sm:text-4xl font-bold pt-96 mt-10 mb-4">
                                   Proudly Open Source
                                 </h1>
 
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index ea76075f..d99ec9d6 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -12,8 +12,9 @@ module.exports = {
 				  32: '1/32',
 			  },
 			  animation: {
-				  'fade-in-once': 'fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards',
-				  "flip": "flip 6s infinite steps(2, end)",
+				marquee: "marquee var(--duration) linear infinite",
+				'fade-in-once': 'fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards',
+				'flip': "flip 6s infinite steps(2, end)",
 	            "kitrotate": "kitrotate 3s linear infinite both",
 	            shine: "shine 4s linear infinite",
 	            slide: "slide 40s linear infinite",
@@ -31,6 +32,10 @@ module.exports = {
 				'pulse-slow': 'pulse 6s infinite cubic-bezier(0.4, 0, 0.6, 1)',
 			  },
 			  keyframes: {
+				marquee: {
+					from: { transform: "translateX(0)" },
+					to: { transform: "translateX(calc(-100% - var(--gap)))" },
+				  },
 				  fadeIn: {
 					  '0%': {
 						opacity: '0',