Skip to content

Commit 0fdb005

Browse files
LoStisWorldLoStisWorld
committed
Add Footer component and refactor layout for improved structure and styling
1 parent b6b6518 commit 0fdb005

File tree

6 files changed

+101
-86
lines changed

6 files changed

+101
-86
lines changed

‎src/app.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</head>
99
<body
1010
data-sveltekit-preload-data="hover"
11-
class="bg-gray-950 text-gray-300 grid grid-rows-[auto_1fr_auto] min-h-full text-sm antialiased md:text-base lg:text-lg"
11+
class="bg-gray-950 text-gray-300 grid grid-rows-[auto_1fr_auto] min-h-full antialiased text-base lg:text-lg"
1212
>
1313
<div class="contents">%sveltekit.body%</div>
1414
</body>

‎src/routes/+page.svelte‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
import Header from './landing/Header.svelte';
77
import Nav from './landing/Nav.svelte';
88
import Sections from './landing/Sections.svelte';
9+
import Footer from './landing/Footer.svelte';
910
1011
let currentCursorState: ActiveDataValue = $state({ activeDataName: '', activeDataElement: null });
1112
@@ -71,21 +72,11 @@
7172

7273
<Header />
7374

74-
<main data-interactive-cursor-area>
75+
<main class="2xl:ml-[40%]" data-interactive-cursor-area>
7576
<Sections />
7677
</main>
7778

78-
<footer class="border-t border-gray-800 py-16">
79-
<div class="container">
80-
<p class="text-center text-gray-500">Svelte Interactive Cursor</p>
81-
<p class="text-center text-gray-500 mt-4">
82-
This package enhances user experience by providing a customizable and interactive cursor. It
83-
is perfect for adding unique cursor effects to your Svelte applications, making them more
84-
engaging and visually appealing. Built with Svelte and TypeScript, it leverages modern web
85-
technologies to ensure smooth performance and easy integration.
86-
</p>
87-
</div>
88-
</footer>
79+
<Footer />
8980

9081
<InteractiveCursor
9182
bind:activeDataValue={currentCursorState}

‎src/routes/landing/Footer.svelte‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script lang="ts">
2+
const packages = [
3+
{ name: 'Tailwind Mask', href: 'https://github.com/LoStis-World/tailwind-mask' },
4+
{ name: 'Astro Magneto', href: 'https://github.com/LoStisWorld/astro-magneto' },
5+
{ name: 'Astro TextCircle', href: 'https://github.com/LoStisWorld/astro-textcircle' }
6+
];
7+
</script>
8+
9+
<footer class="py-16 px-6 lg:px-16 2xl:ml-[40%]">
10+
<p class="text-gray-100 font-semibold">
11+
Thanks for checking out the<br />Svelte Interactive Cursor
12+
</p>
13+
<p class="text-gray-400 mt-4">
14+
If you find this project useful, consider <a
15+
href="https://github.com/LoStis-World/svelte-interactive-cursor"
16+
class="text-gray-300 underline underline-offset-2 hover:text-white"
17+
rel="noreferrer noopener"
18+
title="Star on GitHub">starring it on GitHub</a
19+
>.
20+
</p>
21+
<p class="text-gray-400">
22+
You might also be interested in exploring our other projects on GitHub.
23+
</p>
24+
<ul class="mt-8 flex flex-wrap gap-8">
25+
{#each packages as { name, href }}
26+
<li>
27+
<a
28+
{href}
29+
class="text-gray-300 underline underline-offset-2 hover:text-white"
30+
rel="noreferrer noopener"
31+
title={name}
32+
>
33+
{name}
34+
</a>
35+
</li>
36+
{/each}
37+
</ul>
38+
</footer>

‎src/routes/landing/Header.svelte‎

Lines changed: 57 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
99
const itemsToCopy = [
1010
{
11-
text: '<span class="text-indigo-400">npm</span> <span>i @lostisworld/svelte-interactive-cursor</span>'
11+
text: '<span class="text-amber-600">npm</span> <span>i @lostisworld/svelte-interactive-cursor</span>'
1212
},
1313
{
14-
text: '<span class="text-indigo-400">pnpm</span> <span>add @lostisworld/svelte-interactive-cursor</span>'
14+
text: '<span class="text-amber-600">pnpm</span> <span>add @lostisworld/svelte-interactive-cursor</span>'
1515
}
1616
];
1717
@@ -39,80 +39,66 @@
3939
});
4040
</script>
4141

42-
<header
42+
<aside
4343
class={[
44-
'lg:min-h-screen px-4 py-32 flex flex-col items-center justify-center bg-gray-900 relative',
45-
'before:block before:w-px before:bg-gray-700 before:mx-auto before:mb-8 before:flex-1',
46-
'after:block after:w-px after:h-9 after:bg-gray-700 after:mx-auto after:mt-8 after:flex-1'
44+
'2xl:fixed 2xl:top-0 2xl:left-0 2xl:bottom-0 2xl:w-2/5 bg-indigo-600',
45+
'flex justify-center 2xl:justify-end text-indigo-100 max-w-full'
4746
]}
48-
data-interactive-cursor-area
4947
>
50-
<h1 class="text-3xl font-extrabold sm:text-5xl lg:text-8xl text-center">
51-
Svelte
52-
<strong class="font-extrabold text-indigo-600 sm:block">Interactive Cursor</strong>
53-
</h1>
54-
55-
<p class="mt-8 sm:text-xl text-pretty max-w-xl mx-auto text-center text-gray-400">
56-
The <strong>InteractiveCursor</strong> is a Svelte 5 component that provides a customizable, interactive
57-
cursor effect. It dynamically changes its position and size based on user interactions within specified
58-
trigger areas.
59-
</p>
60-
6148
<div
62-
class="mt-16 flex flex-wrap justify-center gap-4 lg:max-w-lg max-w-md border border-gray-700 rounded-md p-4 lg:p-6"
63-
data-interactive-cursor="copyarea"
49+
class="h-full overflow-y-auto pt-64 min-h-screen pb-32 lg:py-16 flex flex-col justify-center 2xl:items-end items-center px-8 2xl:pr-16"
6450
>
65-
{#each itemsToCopy as { text }, idx (idx)}
66-
<div class="flex w-full rounded-md shadow-sm">
67-
<pre
68-
class="bg-gray-800 p-2 rounded-l-md text-sm flex w-full overflow-auto border-t border-l border-b border-gray-700">
69-
<code>{@html text}</code>
70-
</pre>
71-
<button
72-
type="button"
73-
class="h-full p-2 rounded-r-md shrink-0 {isCopied && toCopiedText === text
74-
? 'bg-indigo-600'
75-
: 'bg-gray-600 hover:bg-indigo-600'}"
76-
aria-label="copy to clipboard"
77-
onclick={() => getClipboardText(text)}
78-
>
79-
<svg
80-
xmlns="http://www.w3.org/2000/svg"
81-
fill="none"
82-
viewBox="0 0 24 24"
83-
stroke-width="2"
84-
stroke="currentColor"
85-
class="h-full"
86-
>
87-
<path
88-
stroke-linecap="round"
89-
stroke-linejoin="round"
90-
d="m4.5 12.75 6 6 9-13.5"
91-
class={isCopied && toCopiedText === text ? 'block' : 'hidden'}
92-
/>
51+
<h1 class="font-extrabold text-7xl lg:text-8xl text-center 2xl:text-right text-white mb-16">
52+
<span class="drop-shadow-lg">Svelte</span>
53+
<strong class="block drop-shadow-lg text-indigo-950">Interactive</strong>
54+
<span class="drop-shadow-lg text-indigo-950">Cursor</span>
55+
</h1>
9356

94-
<path
95-
class={!isCopied || toCopiedText !== text ? 'block' : 'hidden'}
96-
stroke-linecap="round"
97-
stroke-linejoin="round"
98-
d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
99-
/>
100-
</svg>
101-
</button>
102-
</div>
103-
{/each}
104-
</div>
57+
<p class="sm:text-xl text-pretty max-w-xl mx-auto text-center 2xl:text-right">
58+
This package enhances user experience by providing a customizable and interactive cursor. It
59+
is perfect for adding unique cursor effects to your Svelte applications, making them more
60+
engaging and visually appealing.
61+
</p>
62+
63+
<div class="flex flex-wrap justify-center gap-4 lg:max-w-lg max-w-md mt-8">
64+
{#each itemsToCopy as { text }, idx (idx)}
65+
<div class="flex w-full rounded-md shadow-sm">
66+
<pre class="bg-gray-900 p-2 rounded-l-md text-sm flex w-full overflow-auto">
67+
<code>{@html text}</code>
68+
</pre>
69+
<button
70+
type="button"
71+
class="h-full p-2 rounded-r-md shrink-0 {isCopied && toCopiedText === text
72+
? 'bg-amber-600'
73+
: 'bg-gray-600 hover:bg-amber-600'}"
74+
aria-label="copy to clipboard"
75+
onclick={() => getClipboardText(text)}
76+
>
77+
<svg
78+
xmlns="http://www.w3.org/2000/svg"
79+
fill="none"
80+
viewBox="0 0 24 24"
81+
stroke-width="2"
82+
stroke="currentColor"
83+
class="h-full"
84+
>
85+
<path
86+
stroke-linecap="round"
87+
stroke-linejoin="round"
88+
d="m4.5 12.75 6 6 9-13.5"
89+
class={isCopied && toCopiedText === text ? 'block' : 'hidden'}
90+
/>
10591

106-
<div class="absolute bottom-24 left-1/2 -translate-x-1/2 text-gray-700">
107-
<svg
108-
xmlns="http://www.w3.org/2000/svg"
109-
fill="none"
110-
viewBox="0 0 24 24"
111-
stroke-width="1"
112-
stroke="currentColor"
113-
class="size-6 lg:animate-bounce"
114-
>
115-
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
116-
</svg>
92+
<path
93+
class={!isCopied || toCopiedText !== text ? 'block' : 'hidden'}
94+
stroke-linecap="round"
95+
stroke-linejoin="round"
96+
d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
97+
/>
98+
</svg>
99+
</button>
100+
</div>
101+
{/each}
102+
</div>
117103
</div>
118-
</header>
104+
</aside>

‎src/routes/landing/Nav.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
];
1414
</script>
1515

16-
<div class="fixed top-6 left-0 w-full z-50 flex justify-center">
16+
<div class="fixed top-6 left-0 w-full z-50 flex justify-center 2xl:w-2/5 2xl:justify-end 2xl:pr-16">
1717
<nav class="h-full bg-gray-950/90 backdrop-blur-sm px-4 rounded-full border border-gray-800">
1818
<ul class="flex justify-center items-center">
1919
{#each navitems as { name, href, icon }}

‎src/routes/landing/ShowCode.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
$inspect(showCode);
1212
</script>
1313

14-
<div class="flex flex-col items-center">
14+
<div class="flex flex-col items-center 2xl:items-start">
1515
<button
1616
type="button"
1717
class={[

0 commit comments

Comments
 (0)