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,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>
|
||||
|
||||
|
||||
@ -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',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user