update landing page
This commit is contained in:
MuslemRahimi
parent
1b56a9a8ea
commit
94d815636a
148
src/lib/components/Marquee.svelte
Normal file
148
src/lib/components/Marquee.svelte
Normal file
@ -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>
|
||||||
|
|
||||||
27
src/lib/components/ReviewCard.svelte
Normal file
27
src/lib/components/ReviewCard.svelte
Normal file
@ -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>
|
||||||
|
|
||||||
@ -1,6 +1,7 @@
|
|||||||
<script lang='ts'>
|
<script lang='ts'>
|
||||||
import { userRegion, numberOfUnreadNotification} from '$lib/store';
|
import { userRegion, numberOfUnreadNotification} from '$lib/store';
|
||||||
import DotPattern from '$lib/components/DotPattern.svelte';
|
import DotPattern from '$lib/components/DotPattern.svelte';
|
||||||
|
import Marquee from '$lib/components/Marquee.svelte';
|
||||||
|
|
||||||
//import Discount from '$lib/components/Discount.svelte';
|
//import Discount from '$lib/components/Discount.svelte';
|
||||||
|
|
||||||
@ -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]">
|
<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>
|
</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
|
AI-Powered Algorithms to assist you in any way
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
@ -308,6 +310,7 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
|
|||||||
</section>
|
</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">
|
<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">
|
||||||
Realtime Options Flow from Hedge Funds & Major Institutions
|
Realtime Options Flow from Hedge Funds & Major Institutions
|
||||||
</h2>
|
</h2>
|
||||||
@ -373,7 +376,25 @@ class="hidden sm:block [mask-image:linear-gradient(to_bottom_right,white,transpa
|
|||||||
</section>
|
</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
|
Proudly Open Source
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
|
|||||||
@ -12,8 +12,9 @@ module.exports = {
|
|||||||
32: '1/32',
|
32: '1/32',
|
||||||
},
|
},
|
||||||
animation: {
|
animation: {
|
||||||
|
marquee: "marquee var(--duration) linear infinite",
|
||||||
'fade-in-once': 'fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards',
|
'fade-in-once': 'fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards',
|
||||||
"flip": "flip 6s infinite steps(2, end)",
|
'flip': "flip 6s infinite steps(2, end)",
|
||||||
"kitrotate": "kitrotate 3s linear infinite both",
|
"kitrotate": "kitrotate 3s linear infinite both",
|
||||||
shine: "shine 4s linear infinite",
|
shine: "shine 4s linear infinite",
|
||||||
slide: "slide 40s 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)',
|
'pulse-slow': 'pulse 6s infinite cubic-bezier(0.4, 0, 0.6, 1)',
|
||||||
},
|
},
|
||||||
keyframes: {
|
keyframes: {
|
||||||
|
marquee: {
|
||||||
|
from: { transform: "translateX(0)" },
|
||||||
|
to: { transform: "translateX(calc(-100% - var(--gap)))" },
|
||||||
|
},
|
||||||
fadeIn: {
|
fadeIn: {
|
||||||
'0%': {
|
'0%': {
|
||||||
opacity: '0',
|
opacity: '0',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user