Refactor layout and styling for improved responsiveness and readability across multiple components

Author: LoStisWorld

src/routes/landing/Codeblock.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { HighlightSvelte } from 'svelte-highlight';
 	import 'svelte-highlight/styles/github-dark.css';
-	import { formatCode, copyToClipboard } from '../../helpers.js';
+	import { formatCode } from '../../helpers.js';
 	import CopyToClipboard from './CopyToClipboard.svelte';
 
 	interface Props {
@@ -14,7 +14,7 @@
 </script>
 
 <div
-	class="rounded-md border border-gray-800 overflow-clip bg-neutral-950 max-w-full lg:max-w-4xl {classes}"
+	class="rounded-md border border-gray-800 overflow-clip bg-neutral-950 w-full lg:max-w-4xl {classes}"
 	data-interactive-cursor="hidden"
 >
 	<div class="flex justify-between items-center px-3 py-2">
@@ -28,5 +28,5 @@
 		/>
 	</div>
 
-	<HighlightSvelte code={formatCode(code)} class="font-mono text-sm" />
+	<HighlightSvelte code={formatCode(code)} class="flex font-mono text-sm max-w-full" />
 </div>

src/routes/landing/Footer.svelte

@@ -11,12 +11,8 @@
 		Thanks for checking out the<br />Svelte Interactive Cursor
 	</p>
 	<p class="text-gray-400 mt-4">
-		If you find this project useful, consider <a
-			href="https://github.com/LoStis-World/svelte-interactive-cursor"
-			class="text-gray-300 underline underline-offset-2 hover:text-white"
-			rel="noreferrer noopener"
-			title="Star on GitHub">starring it on GitHub</a
-		>.
+		<span>Feel free to contribute by opening an issue or submitting a pull request.</span>
+		<span>Visit the project on GitHub to learn more.</span>
 	</p>
 	<p class="text-gray-400">
 		You might also be interested in exploring our other projects on GitHub.

src/routes/landing/Header.svelte

@@ -46,7 +46,7 @@
 	]}
 >
 	<div
-		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"
+		class="h-full 2xl:overflow-y-auto lg:pt-64 min-h-screen pb-32 lg:pb-16 flex flex-col justify-center 2xl:items-end items-center px-6 2xl:pr-16"
 	>
 		<h1 class="font-extrabold text-5xl lg:text-8xl text-center 2xl:text-right text-white mb-16">
 			<span class="drop-shadow-lg">Svelte</span>
@@ -60,10 +60,10 @@
 			engaging and visually appealing.
 		</p>
 
-		<div class="flex flex-wrap justify-center gap-4 lg:max-w-lg max-w-md mt-8">
+		<div class="flex flex-col items-center justify-center gap-4 mt-8 overflow-clip max-w-full">
 			{#each itemsToCopy as { text }, idx (idx)}
-				<div class="flex w-full rounded-md shadow-sm">
-					<pre class="bg-gray-900 p-2 rounded-l-md text-xs md:text-sm flex w-full overflow-auto">
+				<div class="flex rounded-md shadow-sm w-full max-w-full overflow-auto">
+					<pre class="flex bg-gray-900 p-2 rounded-l-md text-xs flex-1 w-full">
 						<code>{@html text}</code>
 					</pre>
 					<button
@@ -80,7 +80,7 @@
 							viewBox="0 0 24 24"
 							stroke-width="2"
 							stroke="currentColor"
-							class="h-full"
+							class="size-5"
 						>
 							<path
 								stroke-linecap="round"

src/routes/landing/Sections.svelte

@@ -34,7 +34,7 @@
 	]}
 	data-interactive-cursor="cardarea"
 >
-	<header class="mb-16">
+	<header class="mb-16 max-w-full">
 		<ShowCode
 			code={`<script>
 					import InteractiveCursor from '@lostisworld/svelte-interactive-cursor';
@@ -142,7 +142,7 @@
 		sectionDefaultOptions
 	]}
 >
-	<header>
+	<header class="max-w-full">
 		<ShowCode
 			code={`
 				<script>
@@ -209,7 +209,12 @@
 	</ul>
 </section>
 
-<section class={[ 'flex justify-center flex-col items-center 2xl:items-start px-6 lg:px-16', sectionDefaultOptions]}>
+<section
+	class={[
+		'flex justify-center flex-col items-center 2xl:items-start px-6 lg:px-16 max-w-full',
+		sectionDefaultOptions
+	]}
+>
 	<ShowCode
 		code={`
 			<script>
@@ -236,7 +241,8 @@
 			/>
 		`}
 	/>
-	<h2 class="text-2xl text-center 2xl:text-left text-white font-extrabold lg:text-6xl lg:leading-tight text-pretty"
+	<h2
+		class="text-2xl text-center 2xl:text-left text-white font-extrabold lg:text-6xl lg:leading-tight text-pretty"
 		data-interactive-cursor="mixblend"
 	>
 		This package enhances user experience by providing a customizable and interactive cursor.<br
@@ -246,7 +252,7 @@
 	</h2>
 </section>
 
-<section class="bg-gray-900 py-32 px-6 2xl:items-start lg:px-16">
+<section class="bg-gray-900 py-32 px-6 2xl:items-start lg:px-16 max-w-full">
 	<ShowCode
 		code={`
 			<script>
@@ -311,7 +317,9 @@
 			</InteractiveCursor>
 		`}
 	/>
-	<h2 class="text-2xl md:text-4xl text-center 2xl:text-left text-white font-bold leading-relaxed mb-16">
+	<h2
+		class="text-2xl md:text-4xl text-center 2xl:text-left text-white font-bold leading-relaxed mb-16"
+	>
 		Creating a new way to interact with your elements!<br /> With Svelte Interactive Cursor
 	</h2>
 	<Slider images={cards} />

src/routes/landing/ShowCode.svelte

@@ -10,7 +10,7 @@
 	let showCode = $state(false);
 </script>
 
-<div class="flex flex-col items-center 2xl:items-start">
+<div class="flex flex-col items-center 2xl:items-start max-w-full">
 	<button
 		type="button"
 		class={[
@@ -48,7 +48,7 @@
 	</button>
 
 	{#if showCode}
-		<div transition:slide class="mb-16">
+		<div transition:slide class="mb-16 max-w-full overflow-clip">
 			<Codeblock {code} />
 		</div>
 	{/if}