v3 Docs Homepage Redesign (#3138)

skeletonlabs · Jan 23, 2025 · e478698 · e478698
1 parent 0d86e99
commit e478698
Show file tree

Hide file tree

Showing 27 changed files with 1,770 additions and 572 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sites/next.skeleton.dev/package.json b/sites/next.skeleton.dev/package.json
@@ -41,6 +41,7 @@
 		"lucide-react": "^0.465.0",
 		"lucide-svelte": "^0.465.0",
 		"nanostores": "^0.11.3",
+		"octokit": "^4.1.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-hot-toast": "^2.4.1",

diff --git a/sites/next.skeleton.dev/src/components/docs/NavGrid.astro b/sites/next.skeleton.dev/src/components/docs/NavGrid.astro
@@ -26,7 +26,7 @@ const sortByOrder = (a: CollectionEntry<'docs'>, b: CollectionEntry<'docs'>) =>
 			<>
 				<a
 					href={`/${collection}/${item.slug}`}
-					class="card-enhanced border-[1px] border-surface-200-800 hover:preset-tonal space-y-2 p-4 md:p-8"
+					class="card bg-surface-50-950 border-[1px] border-surface-200-800 hover:preset-tonal space-y-2 p-4 md:p-8"
 				>
 					<h3 class="h5">{item.data.title}</h3>
 					<p class="opacity-60">{item.data.description}</p>

diff --git a/sites/next.skeleton.dev/src/components/docs/Preview.tsx b/sites/next.skeleton.dev/src/components/docs/Preview.tsx
@@ -49,7 +49,9 @@ export const Preview: React.FC<PreviewProps> = (props) => {
 				)}
 			</nav>
 			{/* Panel: Preview */}
-			<div className={`card-enhanced flex justify-center items-center p-8 ${props.preview && selected === 'preview' ? 'block' : 'hidden'}`}>
+			<div
+				className={`card bg-noise bg-surface-50-950 border-[1px] border-surface-200-800 flex justify-center items-center p-8 ${props.preview && selected === 'preview' ? 'block' : 'hidden'}`}
+			>
 				{props.preview}
 			</div>
 			{/* Panel: Code (Generic) */}

diff --git a/sites/next.skeleton.dev/src/components/homepage/HomeBottomCta.astro b/sites/next.skeleton.dev/src/components/homepage/HomeBottomCta.astro
@@ -0,0 +1,13 @@
+---
+import { ChevronRight as IconChevron } from 'lucide-react';
+---
+
+<div class="card bg-noise preset-filled-primary-500 px-10 py-8 grid grid-cols-1 md:grid-cols-[1fr_auto] gap-10 shadow-xl">
+	<div class="max-w-[400px]">
+		<h2 class="h2 leading-snug !text-current">Start building with Skeleton today.</h2>
+	</div>
+	<a href="/docs/get-started/installation" class="self-center btn preset-filled">
+		<span>Get Started</span>
+		<IconChevron className="size-4" />
+	</a>
+</div>