refactor(templates): redesign page templates with neon brutalist theme

Overhauls marketing and documentation page templates with a new neon brutalist design system. Updates typography to Syne/Space Mono, adds grid backgrounds, glitch effects, scroll reveal animations, and neon glow styling. Affects bold-marketing, minimalist-docs, open-source-hero, saas-conversion, and repo sidebar templates.

templates/repo/home_sidebar_bottom.tmpl

@@ -63,20 +63,23 @@
 				<div class="flex-item-title">
 					{{ctx.Locale.Tr "repo.cross_promoted"}}
 				</div>
-				<div class="flex-item-body">
+				<div class="flex-item-body cross-promote-tiles">
 					{{range .CrossPromotedRepos}}
-					<a class="tw-flex tw-items-center tw-gap-2 tw-py-1 muted" href="{{.TargetRepo.Link}}">
-						{{if .TargetRepo.Avatar}}
-						<img class="tw-rounded" style="width:24px;height:24px;object-fit:contain;" src="{{.TargetRepo.RelAvatarLink ctx}}" alt="">
-						{{else}}
-						{{svg "octicon-repo" 20}}
-						{{end}}
-						<div class="tw-flex-1 tw-min-w-0">
-							<div class="tw-font-semibold gt-ellipsis">{{if .TargetRepo.DisplayTitle}}{{.TargetRepo.DisplayTitle}}{{else}}{{.TargetRepo.FullName}}{{end}}</div>
-							{{if .TargetRepo.Description}}
-							<div class="tw-text-xs tw-text-grey gt-ellipsis">{{.TargetRepo.Description}}</div>
+					<a class="cross-promote-tile" href="{{.TargetRepo.Link}}">
+						<div class="cross-promote-tile-icon">
+							{{if .TargetRepo.Avatar}}
+							<img src="{{.TargetRepo.RelAvatarLink ctx}}" alt="">
+							{{else}}
+							{{svg "octicon-repo" 18}}
 							{{end}}
 						</div>
+						<div class="cross-promote-tile-content">
+							<div class="cross-promote-tile-name">{{if .TargetRepo.DisplayTitle}}{{.TargetRepo.DisplayTitle}}{{else}}{{.TargetRepo.FullName}}{{end}}</div>
+							{{if .TargetRepo.Description}}
+							<div class="cross-promote-tile-desc">{{.TargetRepo.Description}}</div>
+							{{end}}
+						</div>
+						<div class="cross-promote-tile-arrow">{{svg "octicon-chevron-right" 14}}</div>
 					</a>
 					{{end}}
 				</div>
@@ -85,3 +88,82 @@
 		{{end}}
 	</div>
 </div>
+
+<style>
+.cross-promote-tiles {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+.cross-promote-tile {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 10px 12px;
+	border-radius: 8px;
+	border: 1px solid var(--color-secondary-alpha-40, rgba(0, 0, 0, 0.08));
+	background: var(--color-box-body);
+	color: var(--color-text);
+	text-decoration: none;
+	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
+}
+.cross-promote-tile:hover {
+	border-color: var(--color-primary-alpha-60, rgba(var(--color-primary-rgb), 0.4));
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+	transform: translateY(-1px);
+	text-decoration: none;
+	color: var(--color-text);
+}
+.cross-promote-tile-icon {
+	flex-shrink: 0;
+	width: 32px;
+	height: 32px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 6px;
+	background: var(--color-secondary-alpha-20, rgba(0, 0, 0, 0.04));
+	color: var(--color-text-light);
+}
+.cross-promote-tile-icon img {
+	width: 32px;
+	height: 32px;
+	border-radius: 6px;
+	object-fit: contain;
+}
+.cross-promote-tile-icon .svg {
+	color: var(--color-text-light);
+}
+.cross-promote-tile-content {
+	flex: 1;
+	min-width: 0;
+}
+.cross-promote-tile-name {
+	font-weight: 600;
+	font-size: 13px;
+	line-height: 1.3;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.cross-promote-tile-desc {
+	font-size: 11px;
+	line-height: 1.3;
+	color: var(--color-text-light);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	margin-top: 1px;
+}
+.cross-promote-tile-arrow {
+	flex-shrink: 0;
+	color: var(--color-text-light-3, var(--color-text-light));
+	opacity: 0;
+	transform: translateX(-4px);
+	transition: opacity 0.15s, transform 0.15s;
+}
+.cross-promote-tile:hover .cross-promote-tile-arrow {
+	opacity: 0.6;
+	transform: translateX(0);
+}
+</style>