first commit

templates/portfolio-cloudflare/src/pages/404.astro

@@ -0,0 +1,97 @@
+---
+import Base from "../layouts/Base.astro";
+---
+
+<Base title="Page not found">
+	<div class="not-found">
+		<span class="not-found-code">404</span>
+		<h1>Page not found</h1>
+		<p>The page you're looking for doesn't exist or has been moved.</p>
+		<div class="not-found-links">
+			<a href="/" class="link-primary">Go home</a>
+			<a href="/work" class="link-secondary">View our work</a>
+		</div>
+	</div>
+</Base>
+
+<style>
+	.not-found {
+		text-align: center;
+		padding: var(--spacing-4xl) var(--spacing-lg);
+		max-width: var(--max-width);
+		margin: 0 auto;
+	}
+
+	.not-found-code {
+		display: block;
+		font-family: var(--font-serif);
+		font-size: 8rem;
+		font-weight: 500;
+		line-height: 1;
+		color: var(--color-border);
+		margin-bottom: var(--spacing-lg);
+	}
+
+	.not-found h1 {
+		font-family: var(--font-serif);
+		font-size: var(--font-size-2xl);
+		font-weight: 500;
+		margin-bottom: var(--spacing-sm);
+	}
+
+	.not-found p {
+		color: var(--color-muted);
+		margin-bottom: var(--spacing-2xl);
+	}
+
+	.not-found-links {
+		display: flex;
+		gap: var(--spacing-md);
+		justify-content: center;
+	}
+
+	.link-primary {
+		padding: var(--spacing-sm) var(--spacing-lg);
+		font-size: var(--font-size-sm);
+		color: var(--color-bg);
+		background: var(--color-text);
+		text-decoration: none;
+		border-radius: var(--radius);
+		transition:
+			background var(--transition-fast),
+			transform var(--transition-fast);
+	}
+
+	.link-primary:hover {
+		background: var(--color-accent);
+		color: white;
+		transform: translateY(-1px);
+	}
+
+	.link-secondary {
+		padding: var(--spacing-sm) var(--spacing-lg);
+		font-size: var(--font-size-sm);
+		color: var(--color-text);
+		text-decoration: none;
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius);
+		transition:
+			border-color var(--transition-fast),
+			transform var(--transition-fast);
+	}
+
+	.link-secondary:hover {
+		border-color: var(--color-text);
+		transform: translateY(-1px);
+	}
+
+	@media (max-width: 480px) {
+		.not-found-code {
+			font-size: 5rem;
+		}
+
+		.not-found-links {
+			flex-direction: column;
+		}
+	}
+</style>