|
1 | | -<script lang="ts"> |
2 | | - import Card from '../components/Card.svelte'; |
3 | | - import Marquee from '$lib/Marquee.svelte'; |
4 | | - import GithubIcon from "../components/icons/GithubIcon.svelte" |
5 | | - import { CodeBlock } from 'svhighlight'; |
6 | | - import 'highlight.js/styles/base16/dracula.css'; |
7 | | - |
8 | | - interface TestimonialProps { |
9 | | - name: string; |
10 | | - title: string; |
11 | | - avatar: string; |
12 | | - content: string; |
13 | | - } |
14 | | - const testimonials: TestimonialProps[] = [ |
15 | | - { |
16 | | - name: 'Selemondev', |
17 | | - title: 'Senior Frontend Developer', |
18 | | - avatar: 'https://github.com/selemondev.png', |
19 | | - content: |
20 | | - "Marquee Library has been a game-changer for our TypeScript projects. Its seamless integration and robust features have significantly improved our UI's dynamic capabilities.", |
21 | | - }, |
22 | | - { |
23 | | - name: 'Raj Patel', |
24 | | - title: 'Tech Lead', |
25 | | - avatar: 'https://i.pravatar.cc/150?img=18', |
26 | | - content: |
27 | | - "I'm thoroughly impressed with Marquee's performance and ease of use. It made implementing complex scrolling texts a breeze, and the support for TypeScript is top-notch.", |
28 | | - }, |
29 | | - { |
30 | | - name: 'Sofia Garcia', |
31 | | - title: 'UI/UX Designer', |
32 | | - avatar: 'https://i.pravatar.cc/150?img=45', |
33 | | - content: |
34 | | - 'As a designer, I appreciate how Marquee enhances the visual appeal of our applications. The flexibility it offers in styling and animation is fantastic.', |
35 | | - }, |
36 | | - { |
37 | | - name: 'John Mack', |
38 | | - title: 'Full Stack Developer', |
39 | | - avatar: 'https://i.pravatar.cc/150?img=60', |
40 | | - content: |
41 | | - 'Integrating Marquee into our full-stack TypeScript projects has been incredibly efficient. Its compatibility and ease of customization are ideal for our diverse project needs.', |
42 | | - }, |
43 | | - { |
44 | | - name: 'Isabella Smith', |
45 | | - title: 'Project Manager', |
46 | | - avatar: 'https://i.pravatar.cc/150?img=32', |
47 | | - content: |
48 | | - "Marquee Library has consistently delivered beyond our expectations. It's not just a tool; it's an asset that enhances productivity and creativity in our TypeScript applications.", |
49 | | - }, |
50 | | - ]; |
51 | | - let installCmd = `npm install @selemondev/svelte-marquee`; |
52 | | - |
53 | | - const localImportSnippet = `import { Marquee } from "@selemondev/svelte-marquee; |
54 | | -import "@selemondev/svelte-marquee/dist/style.css"`; |
55 | | - |
56 | | - const fadeCodeSnippet = `<Marquee fade={true}> |
57 | | - <div>Content 1</div> |
58 | | - <div>Content 2</div> |
59 | | - <div>Content 3</div> |
60 | | -</Marquee>`; |
61 | | - |
62 | | - const reverseCodeSnippet = `<Marquee reverse={true} fade={true}> |
63 | | - <div>Content 1</div> |
64 | | - <div>Content 2</div> |
65 | | - <div>Content 3</div> |
66 | | -</Marquee>`; |
67 | | - |
68 | | - const pauseOnHoverSnippet = `<Marquee pauseOnHover={true} fade={true}> |
69 | | - <div>Content 1</div> |
70 | | - <div>Content 2</div> |
71 | | - <div>Content 3</div> |
72 | | -</Marquee>`; |
73 | | - const verticalCodeSnippet = `<Marquee direction="up" fade={true}> |
74 | | - <div>Content 1</div> |
75 | | - <div>Content 2</div> |
76 | | - <div>Content 3</div> |
77 | | -</Marquee>`; |
78 | | - const customGapAndSpeedSnippet = `<Marquee innerClassName="gap-[3rem] [--duration:5s] [--gap:3rem]" fade={true}> |
79 | | - <div>Content 1</div> |
80 | | - <div>Content 2</div> |
81 | | - <div>Content 3</div> |
82 | | -</Marquee>`; |
83 | | - const reducedMotionSnippet = `<Marquee class="py-4 motion-reduce:overflow-auto" innerClassName="motion-reduce:animate-none motion-reduce:first:hidden"> |
84 | | - <div>Content 1</div> |
85 | | - <div>Content 2</div> |
86 | | - <div>Content 3</div> |
87 | | -</Marquee>`; |
88 | | -</script> |
89 | | - |
90 | | - |
91 | 1 | <div align="center"> |
92 | 2 |
|
93 | 3 | # Marquee <br> 🌬️ |
|
0 commit comments