Add app examples to landing page

src/landing/Footer.jsx

@@ -29,7 +29,8 @@ const navigation = [
 			{ name: 'Blog', href: '/blog' },
 			{ name: 'Documentation', href: '/docs/intro' },
 			{ name: 'Changelog', href: '/changelog' },
-			{ name: 'Roadmap', href: '/roadmap' }
+{ name: 'Roadmap', href: '/roadmap' },
+			{ name: 'Examples', href: '/examples' }
 		],
 		title: 'Resources'
 	},

src/landing/LandingHeader.jsx

@@ -342,7 +342,7 @@ export default function LandingHeader() {
 									</a>
 
 									<a
-										href="/case-studies"
+href="/case-studies"
 										className="text-base font-medium text-gray-900 dark:text-white hover:text-gray-700"
 									>
 										Case studies

src/landing/PublicAppCard.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import { ArrowRight } from 'lucide-react';
+
+interface PublicAppCardProps {
+	title: string;
+	description: string;
+	href: string;
+	thumbnail?: string;
+}
+
+export default function PublicAppCard({
+	title,
+	description,
+	href,
+	thumbnail
+}: PublicAppCardProps) {
+	return (
+		<Link
+			to={href}
+			className="group flex flex-col h-full rounded-2xl bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-700 overflow-hidden hover:border-blue-500 dark:hover:border-blue-600 transition-all duration-300 shadow-lg hover:shadow-xl !no-underline"
+		>
+			{/* Top section with thumbnail */}
+			<div className="relative bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-950 min-h-[200px] flex flex-col overflow-hidden">
+				{thumbnail && (
+					<img
+						src={thumbnail}
+						alt={title}
+						className="w-full h-full object-cover"
+					/>
+				)}
+			</div>
+
+			{/* Content section */}
+			<div className="flex-1 px-6 pt-6 pb-6 flex flex-col">
+				<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+					{title}
+				</h3>
+				<p className="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed flex-1">
+					{description}
+				</p>
+				{/* Bottom section with link */}
+				<div className="flex items-center justify-end mt-auto pt-4 border-t border-gray-200 dark:border-gray-700">
+					<span className="text-sm font-medium text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 flex items-center gap-1 transition-colors">
+						View app
+						<ArrowRight className="w-4 h-4" />
+					</span>
+				</div>
+			</div>
+		</Link>
+	);
+}