148 lines
3.6 KiB
Svelte
148 lines
3.6 KiB
Svelte
<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>
|
|
|