From ac0b8d427395e8b9ba51857a80256ceaf550b0a6 Mon Sep 17 00:00:00 2001
From: Chandler Swift <chandler@chandlerswift.com>
Date: Sun, 28 Dec 2025 20:37:55 -0600
Subject: [PATCH] Make suggested services into links

---
 landing-page.html |  89 ++++++------
 main.html         | 348 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 397 insertions(+), 40 deletions(-)
 create mode 100644 main.html

diff --git a/landing-page.html b/landing-page.html
index 7f33c1c..cfc87a5 100644
--- a/landing-page.html
+++ b/landing-page.html
@@ -170,6 +170,7 @@
 		.suggest:hover .track { animation-play-state: paused; }
 
 		.card {
+			display: block;
 			min-width: 220px;
 			background: var(--glass);
 			border: 1px solid rgba(255, 255, 255, 0.06);
@@ -177,6 +178,8 @@
 			padding: 12px 14px;
 			box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
 			opacity: 0.55;
+			color: inherit;
+			text-decoration: none;
 			transition: opacity 160ms ease, transform 160ms ease, border-color 160ms ease;
 		}
 
@@ -186,6 +189,12 @@
 			border-color: rgba(125, 211, 252, 0.5);
 		}
 
+		.card:focus-visible {
+			outline: 2px solid var(--accent);
+			outline-offset: 4px;
+			opacity: 1;
+		}
+
 		.service {
 			font-weight: 700;
 			letter-spacing: 0.01em;
@@ -230,87 +239,87 @@
 
 		<section class="suggest" aria-label="Suggested services">
 			<div class="track" aria-hidden="true">
-				<div class="card">
+				<a class="card" href="https://pianotuning.svsindustries.org">
 					<div class="service">Piano Tuning</div>
 					<div class="domain">pianotuning.svsindustries.org</div>
-				</div>
-				<div class="card">
+				</a>
+				<a class="card" href="https://webdesign.svsindustries.org">
 					<div class="service">Web Design</div>
 					<div class="domain">webdesign.svsindustries.org</div>
-				</div>
-				<div class="card">
+				</a>
+				<a class="card" href="https://marinesalvage.svsindustries.org">
 					<div class="service">Marine Salvage</div>
 					<div class="domain">marinesalvage.svsindustries.org</div>
-				</div>
-				<div class="card">
+				</a>
+				<a class="card" href="https://cloudsecurity.svsindustries.org">
 					<div class="service">Cloud Security</div>
 					<div class="domain">cloudsecurity.svsindustries.org</div>
-				</div>
-				<div class="card">
+				</a>
+				<a class="card" href="https://aiconsulting.svsindustries.org">
 					<div class="service">AI Consulting</div>
 					<div class="domain">aiconsulting.svsindustries.org</div>
-				</div>
-				<div class="card">
+				</a>
+				<a class="card" href="https://eventlighting.svsindustries.org">
 					<div class="service">Event Lighting</div>
 					<div class="domain">eventlighting.svsindustries.org</div>
-				</div>
-				<div class="card">
+				</a>
+				<a class="card" href="https://verticalfarming.svsindustries.org">
 					<div class="service">Vertical Farming</div>
 					<div class="domain">verticalfarming.svsindustries.org</div>
-				</div>
-				<div class="card">
+				</a>
+				<a class="card" href="https://bioinformatics.svsindustries.org">
 					<div class="service">Bioinformatics</div>
 					<div class="domain">bioinformatics.svsindustries.org</div>
-				</div>
-				<div class="card">
+				</a>
+				<a class="card" href="https://zerotrustaudits.svsindustries.org">
 					<div class="service">Zero-Trust Audits</div>
 					<div class="domain">zerotrustaudits.svsindustries.org</div>
-				</div>
-				<div class="card">
+				</a>
+				<a class="card" href="https://dronechoreography.svsindustries.org">
 					<div class="service">Drone Choreography</div>
 					<div class="domain">dronechoreography.svsindustries.org</div>
-				</div>
+				</a>
 				<!-- duplicate set for seamless loop -->
-				<div class="card">
+				<a class="card" href="https://pianotuning.svsindustries.org">
 					<div class="service">Piano Tuning</div>
 					<div class="domain">pianotuning.svsindustries.org</div>
-				</div>
-				<div class="card">
+				</a>
+				<a class="card" href="https://webdesign.svsindustries.org">
 					<div class="service">Web Design</div>
 					<div class="domain">webdesign.svsindustries.org</div>
-				</div>
-				<div class="card">
+				</a>
+				<a class="card" href="https://marinesalvage.svsindustries.org">
 					<div class="service">Marine Salvage</div>
 					<div class="domain">marinesalvage.svsindustries.org</div>
-				</div>
-				<div class="card">
+				</a>
+				<a class="card" href="https://cloudsecurity.svsindustries.org">
 					<div class="service">Cloud Security</div>
 					<div class="domain">cloudsecurity.svsindustries.org</div>
-				</div>
-				<div class="card">
+				</a>
+				<a class="card" href="https://aiconsulting.svsindustries.org">
 					<div class="service">AI Consulting</div>
 					<div class="domain">aiconsulting.svsindustries.org</div>
-				</div>
-				<div class="card">
+				</a>
+				<a class="card" href="https://eventlighting.svsindustries.org">
 					<div class="service">Event Lighting</div>
 					<div class="domain">eventlighting.svsindustries.org</div>
-				</div>
-				<div class="card">
+				</a>
+				<a class="card" href="https://verticalfarming.svsindustries.org">
 					<div class="service">Vertical Farming</div>
 					<div class="domain">verticalfarming.svsindustries.org</div>
-				</div>
-				<div class="card">
+				</a>
+				<a class="card" href="https://bioinformatics.svsindustries.org">
 					<div class="service">Bioinformatics</div>
 					<div class="domain">bioinformatics.svsindustries.org</div>
-				</div>
-				<div class="card">
+				</a>
+				<a class="card" href="https://zerotrustaudits.svsindustries.org">
 					<div class="service">Zero-Trust Audits</div>
 					<div class="domain">zerotrustaudits.svsindustries.org</div>
-				</div>
-				<div class="card">
+				</a>
+				<a class="card" href="https://dronechoreography.svsindustries.org">
 					<div class="service">Drone Choreography</div>
 					<div class="domain">dronechoreography.svsindustries.org</div>
-				</div>
+				</a>
 			</div>
 		</section>
 	</div>
diff --git a/main.html b/main.html
new file mode 100644
index 0000000..cfc87a5
--- /dev/null
+++ b/main.html
@@ -0,0 +1,348 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>SVS Industries</title>
+	<style>
+		:root {
+			--bg: #0f172a;
+			--bg-accent: #111827;
+			--glass: rgba(255, 255, 255, 0.06);
+			--glass-strong: rgba(255, 255, 255, 0.14);
+			--text: #e5e7eb;
+			--muted: #9ca3af;
+			--accent: #7dd3fc;
+			--accent-2: #a78bfa;
+			--accent-3: #34d399;
+			--shadow: 0 25px 80px rgba(0, 0, 0, 0.35);
+		}
+
+		* { box-sizing: border-box; }
+
+		body {
+			margin: 0;
+			min-height: 100vh;
+			color: var(--text);
+			background: radial-gradient(circle at 20% 20%, rgba(125, 211, 252, 0.08), transparent 30%),
+						radial-gradient(circle at 80% 10%, rgba(167, 139, 250, 0.14), transparent 35%),
+						radial-gradient(circle at 30% 80%, rgba(52, 211, 153, 0.12), transparent 32%),
+						linear-gradient(160deg, var(--bg), var(--bg-accent));
+			font-family: "Baskerville", "Times New Roman", serif;
+			display: grid;
+			place-items: center;
+			padding: 48px 18px 64px;
+		}
+
+		.frame {
+			width: min(1080px, 100%);
+			display: grid;
+			gap: 36px;
+		}
+
+		header {
+			text-align: center;
+		}
+
+		h1 {
+			margin: 0;
+			font-size: clamp(42px, 6vw, 64px);
+			letter-spacing: 0.04em;
+		}
+
+		.search-card {
+			background: var(--glass);
+			border: 1px solid rgba(255, 255, 255, 0.06);
+			border-radius: 18px;
+			padding: 26px;
+			backdrop-filter: blur(8px);
+			box-shadow: var(--shadow);
+		}
+
+		.prompt {
+			margin: 0 0 14px;
+			color: var(--muted);
+			font-size: 15px;
+			letter-spacing: 0.01em;
+		}
+
+		form {
+			display: flex;
+			align-items: stretch;
+			gap: 10px;
+		}
+
+		.domain-shell {
+			flex: 1;
+			display: grid;
+			grid-template-columns: 1fr auto;
+			align-items: center;
+			background: var(--glass-strong);
+			border: 1px solid rgba(255, 255, 255, 0.12);
+			border-radius: 12px;
+			padding: 6px 8px 6px 14px;
+			transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
+		}
+
+		.domain-shell:focus-within {
+			border-color: var(--accent);
+			box-shadow: 0 12px 30px rgba(125, 211, 252, 0.16);
+			transform: translateY(-1px);
+		}
+
+		input[type="text"] {
+			background: transparent;
+			border: none;
+			color: var(--text);
+			font-size: clamp(20px, 3vw, 26px);
+			font-family: inherit;
+			padding: 10px 0;
+			outline: none;
+			width: 100%;
+		}
+
+		.suffix {
+			color: var(--muted);
+			font-size: clamp(16px, 2vw, 19px);
+			padding: 0 12px;
+			border-left: 1px solid rgba(255, 255, 255, 0.08);
+			white-space: nowrap;
+		}
+
+		button {
+			border: none;
+			border-radius: 12px;
+			background: linear-gradient(135deg, var(--accent), var(--accent-2));
+			color: #0b1220;
+			font-weight: 700;
+			font-size: 16px;
+			padding: 0 18px;
+			cursor: pointer;
+			letter-spacing: 0.02em;
+			box-shadow: 0 10px 25px rgba(167, 139, 250, 0.35);
+			transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
+		}
+
+		button:hover {
+			transform: translateY(-1px) scale(1.01);
+			filter: saturate(1.05);
+			box-shadow: 0 12px 28px rgba(125, 211, 252, 0.4);
+		}
+
+		button:active { transform: translateY(0); }
+
+		.suggest {
+			position: relative;
+			overflow: hidden;
+			border-radius: 14px;
+			border: 1px solid rgba(255, 255, 255, 0.08);
+			background: rgba(255, 255, 255, 0.03);
+		}
+
+		.suggest::before,
+		.suggest::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			width: 120px;
+			height: 100%;
+			z-index: 2;
+			pointer-events: none;
+		}
+
+		.suggest::before {
+			left: 0;
+			background: linear-gradient(90deg, var(--bg-accent), transparent);
+		}
+
+		.suggest::after {
+			right: 0;
+			background: linear-gradient(270deg, var(--bg-accent), transparent);
+		}
+
+		.track {
+			display: flex;
+			gap: 12px;
+			padding: 14px 20px;
+			animation: slide 36s linear infinite;
+		}
+
+		.suggest:hover .track { animation-play-state: paused; }
+
+		.card {
+			display: block;
+			min-width: 220px;
+			background: var(--glass);
+			border: 1px solid rgba(255, 255, 255, 0.06);
+			border-radius: 10px;
+			padding: 12px 14px;
+			box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+			opacity: 0.55;
+			color: inherit;
+			text-decoration: none;
+			transition: opacity 160ms ease, transform 160ms ease, border-color 160ms ease;
+		}
+
+		.card:hover {
+			opacity: 1;
+			transform: translateY(-2px) scale(1.01);
+			border-color: rgba(125, 211, 252, 0.5);
+		}
+
+		.card:focus-visible {
+			outline: 2px solid var(--accent);
+			outline-offset: 4px;
+			opacity: 1;
+		}
+
+		.service {
+			font-weight: 700;
+			letter-spacing: 0.01em;
+		}
+
+		.domain {
+			color: var(--muted);
+			margin-top: 4px;
+			font-size: 13px;
+		}
+
+		@keyframes slide {
+			0% { transform: translateX(0); }
+			100% { transform: translateX(-50%); }
+		}
+
+		@media (max-width: 640px) {
+			form { flex-direction: column; }
+			button { width: 100%; padding: 14px 18px; }
+			.domain-shell { grid-template-columns: 1fr; }
+			.suffix { border-left: none; padding-left: 0; padding-top: 6px; }
+			.track { animation-duration: 28s; }
+		}
+	</style>
+</head>
+<body>
+	<div class="frame">
+		<header>
+			<h1>SVS Industries</h1>
+		</header>
+
+		<section class="search-card">
+			<p class="prompt">Type a service to jump straight to its subdomain.</p>
+			<form id="domainForm">
+				<label class="domain-shell" aria-label="Subdomain entry">
+					<input type="text" id="subdomain" name="subdomain" placeholder="pianotuning" autocomplete="off" spellcheck="false" aria-label="Service subdomain" />
+					<span class="suffix">.svsindustries.org</span>
+				</label>
+				<button type="submit" aria-label="Go to service">Launch</button>
+			</form>
+		</section>
+
+		<section class="suggest" aria-label="Suggested services">
+			<div class="track" aria-hidden="true">
+				<a class="card" href="https://pianotuning.svsindustries.org">
+					<div class="service">Piano Tuning</div>
+					<div class="domain">pianotuning.svsindustries.org</div>
+				</a>
+				<a class="card" href="https://webdesign.svsindustries.org">
+					<div class="service">Web Design</div>
+					<div class="domain">webdesign.svsindustries.org</div>
+				</a>
+				<a class="card" href="https://marinesalvage.svsindustries.org">
+					<div class="service">Marine Salvage</div>
+					<div class="domain">marinesalvage.svsindustries.org</div>
+				</a>
+				<a class="card" href="https://cloudsecurity.svsindustries.org">
+					<div class="service">Cloud Security</div>
+					<div class="domain">cloudsecurity.svsindustries.org</div>
+				</a>
+				<a class="card" href="https://aiconsulting.svsindustries.org">
+					<div class="service">AI Consulting</div>
+					<div class="domain">aiconsulting.svsindustries.org</div>
+				</a>
+				<a class="card" href="https://eventlighting.svsindustries.org">
+					<div class="service">Event Lighting</div>
+					<div class="domain">eventlighting.svsindustries.org</div>
+				</a>
+				<a class="card" href="https://verticalfarming.svsindustries.org">
+					<div class="service">Vertical Farming</div>
+					<div class="domain">verticalfarming.svsindustries.org</div>
+				</a>
+				<a class="card" href="https://bioinformatics.svsindustries.org">
+					<div class="service">Bioinformatics</div>
+					<div class="domain">bioinformatics.svsindustries.org</div>
+				</a>
+				<a class="card" href="https://zerotrustaudits.svsindustries.org">
+					<div class="service">Zero-Trust Audits</div>
+					<div class="domain">zerotrustaudits.svsindustries.org</div>
+				</a>
+				<a class="card" href="https://dronechoreography.svsindustries.org">
+					<div class="service">Drone Choreography</div>
+					<div class="domain">dronechoreography.svsindustries.org</div>
+				</a>
+				<!-- duplicate set for seamless loop -->
+				<a class="card" href="https://pianotuning.svsindustries.org">
+					<div class="service">Piano Tuning</div>
+					<div class="domain">pianotuning.svsindustries.org</div>
+				</a>
+				<a class="card" href="https://webdesign.svsindustries.org">
+					<div class="service">Web Design</div>
+					<div class="domain">webdesign.svsindustries.org</div>
+				</a>
+				<a class="card" href="https://marinesalvage.svsindustries.org">
+					<div class="service">Marine Salvage</div>
+					<div class="domain">marinesalvage.svsindustries.org</div>
+				</a>
+				<a class="card" href="https://cloudsecurity.svsindustries.org">
+					<div class="service">Cloud Security</div>
+					<div class="domain">cloudsecurity.svsindustries.org</div>
+				</a>
+				<a class="card" href="https://aiconsulting.svsindustries.org">
+					<div class="service">AI Consulting</div>
+					<div class="domain">aiconsulting.svsindustries.org</div>
+				</a>
+				<a class="card" href="https://eventlighting.svsindustries.org">
+					<div class="service">Event Lighting</div>
+					<div class="domain">eventlighting.svsindustries.org</div>
+				</a>
+				<a class="card" href="https://verticalfarming.svsindustries.org">
+					<div class="service">Vertical Farming</div>
+					<div class="domain">verticalfarming.svsindustries.org</div>
+				</a>
+				<a class="card" href="https://bioinformatics.svsindustries.org">
+					<div class="service">Bioinformatics</div>
+					<div class="domain">bioinformatics.svsindustries.org</div>
+				</a>
+				<a class="card" href="https://zerotrustaudits.svsindustries.org">
+					<div class="service">Zero-Trust Audits</div>
+					<div class="domain">zerotrustaudits.svsindustries.org</div>
+				</a>
+				<a class="card" href="https://dronechoreography.svsindustries.org">
+					<div class="service">Drone Choreography</div>
+					<div class="domain">dronechoreography.svsindustries.org</div>
+				</a>
+			</div>
+		</section>
+	</div>
+
+	<script>
+		const form = document.getElementById('domainForm');
+		const input = document.getElementById('subdomain');
+
+		form.addEventListener('submit', (event) => {
+			event.preventDefault();
+			const raw = (input.value || '').trim();
+			if (!raw) return;
+
+			// Normalize to a clean subdomain: lowercase, alphanumeric + dashes.
+			const normalized = raw
+				.toLowerCase()
+				.replace(/[^a-z0-9-]+/g, '')
+				.replace(/^-+/, '')
+				.replace(/-+$/, '');
+
+			if (!normalized) return;
+			window.location.href = `https://${normalized}.svsindustries.org`;
+		});
+	</script>
+</body>
+</html>