iterate on index cards and add the 4th getting started card

docs/getting-started/index.mdx

@@ -0,0 +1,45 @@
+---
+title: Getting Started
+---
+
+import CustomDocCardList from '@site/src/components/CustomDocCardList';
+
+# Getting Started
+
+If you're new to Harper, this section will guide you through the essential resources you need to get started.
+
+Follow the steps in this documentation to discover how Harper can simplify your backend stack, eliminate many inter-process communication delays, and achieve a more predictable and performant application experience.
+
+For more advanced concepts in Harper, see our [blog](https://www.harpersystems.dev/blog).
+
+## Harper Basics
+
+<CustomDocCardList
+	columns={2}
+	items={[
+		{
+			type: 'link',
+			href: 'getting-started/install-harper',
+			label: 'Install Harper',
+			description: 'Pick the installation method that best suits your environment',
+		},
+		{
+			type: 'link',
+			href: 'getting-started/what-is-harper',
+			label: 'What is Harper',
+			description: 'Learn about Harper, how it works, and some of its usecases',
+		},
+		{
+			type: 'link',
+			href: 'getting-started/harper-concepts',
+			label: 'Harper Concepts',
+			description: "Learn about Harper's fundamental concepts and how they interact",
+		},
+		{
+			type: 'link',
+			href: 'getting-started/first-harper-app',
+			label: 'Create Your First Application',
+			description: 'Build a simple Harper application with data storage and API endpoints',
+		},
+	]}
+/>

docs/index.mdx

@@ -0,0 +1,79 @@
+---
+title: Harper Docs
+---
+
+import CustomDocCardList from '@site/src/components/CustomDocCardList';
+
+# Harper Docs
+
+:::info
+[Connect with our team!](https://www.harpersystems.dev/contact)
+:::
+
+Welcome to the Harper Documentation! Here, you'll find all things Harper, and everything you need to get started, troubleshoot issues, and make the most of our platform.
+
+## Getting Started
+
+<CustomDocCardList
+	columns={3}
+	items={[
+		{
+			type: 'link',
+			href: 'docs/getting-started/install-harper',
+			label: 'Install Harper',
+			description: 'Pick the installation method that best suits your environment',
+		},
+		{
+			type: 'link',
+			href: 'docs/getting-started/what-is-harper',
+			label: 'What is Harper',
+			description: 'Learn about Harper, how it works, and some of its usecases',
+		},
+		{
+			type: 'link',
+			href: 'docs/getting-started/harper-concepts',
+			label: 'Harper Concepts',
+			description: "Learn about Harper's fundamental concepts and how they interact",
+		},
+	]}
+/>
+
+## Building with Harper
+
+<CustomDocCardList
+	columns={3}
+	items={[
+		{
+			type: 'link',
+			href: 'docs/developers/applications/',
+			label: 'Harper Applications',
+			description: 'Build your a fully featured Harper Component with custom functionality',
+		},
+		{
+			type: 'link',
+			href: 'docs/developers/rest',
+			label: 'REST Queries',
+			description: 'The recommended HTTP interface for data access, querying, and manipulation',
+		},
+		{
+			type: 'link',
+			href: 'docs/developers/operations-api/',
+			label: 'Operations API',
+			description: 'Configure, deploy, administer, and control your Harper instance',
+		},
+		{
+			type: 'link',
+			href: 'docs/developers/replication/',
+			label: 'Clustering & Replication',
+			description:
+				'The process of connecting multiple Harper databases together to create a database mesh network that enables users to define data replication patterns.',
+		},
+		{
+			type: 'link',
+			href: 'docs/administration/harper-studio/',
+			label: 'Explore the Harper Studio',
+			description:
+				'The web-based GUI for Harper. Studio enables you to administer, navigate, and monitor all of your Harper instances in a simple, user friendly interface.',
+		},
+	]}
+/>

src/components/CustomDocCardList.module.css

@@ -0,0 +1,48 @@
+.cardGrid {
+	display: grid;
+	grid-template-columns: repeat(var(--columns, 2), 1fr);
+	gap: var(--ifm-spacing-horizontal);
+	margin-bottom: 2rem;
+}
+
+.customCard {
+	--ifm-link-color: var(--ifm-color-emphasis-800);
+	--ifm-link-hover-color: var(--ifm-color-emphasis-700);
+	--ifm-link-hover-decoration: none;
+	box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
+	border: 1px solid var(--ifm-color-emphasis-200);
+	transition: all var(--ifm-transition-fast) ease;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.customCard:hover {
+	border-color: var(--ifm-color-primary);
+	box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
+	text-decoration: none;
+}
+
+.cardTitle {
+	font-size: 1.2rem;
+	margin-bottom: 0.5rem;
+}
+
+.cardDescription {
+	font-size: 0.9rem;
+	color: var(--ifm-color-content-secondary);
+	margin-bottom: 0;
+}
+
+/* Responsive breakpoints */
+@media (max-width: 996px) {
+	.cardGrid {
+		grid-template-columns: repeat(min(2, var(--columns, 2)), 1fr);
+	}
+}
+
+@media (max-width: 650px) {
+	.cardGrid {
+		grid-template-columns: 1fr;
+	}
+}

src/components/CustomDocCardList.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import { filterDocCardListItems } from '@docusaurus/plugin-content-docs/client';
+import Heading from '@theme/Heading';
+import styles from './CustomDocCardList.module.css';
+
+interface CustomDocCardListProps {
+	items: any[];
+	columns?: number;
+	className?: string;
+}
+
+function CustomDocCard({ item }: { item: any }) {
+	return (
+		<Link href={item.href} className={clsx('card padding--lg', styles.customCard)}>
+			<Heading as="h2" className={styles.cardTitle}>
+				{item.label}
+			</Heading>
+			{item.description && <p className={styles.cardDescription}>{item.description}</p>}
+		</Link>
+	);
+}
+
+export default function CustomDocCardList({ items, columns = 2, className }: CustomDocCardListProps) {
+	const filteredItems = filterDocCardListItems(items);
+
+	return (
+		<div className={clsx(styles.cardGrid, className)} style={{ '--columns': columns } as React.CSSProperties}>
+			{filteredItems.map((item, index) => (
+				<div key={index}>
+					<CustomDocCard item={item} />
+				</div>
+			))}
+		</div>
+	);
+}