From 06e943d47894a4a186b9b26baa45f004d0ceb99f Mon Sep 17 00:00:00 2001
From: Chandler Swift <chandler@chandlerswift.com>
Date: Sun, 28 Dec 2025 18:22:21 -0600
Subject: [PATCH]

---
 templates/404.html   |   9 -
 templates/index.html | 428 ++++++++++++++++++++++++++++++-------------
 2 files changed, 303 insertions(+), 134 deletions(-)

diff --git a/templates/404.html b/templates/404.html
index 9940f6b..8713955 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -45,14 +45,6 @@
             font-weight:600;
             box-shadow:0 4px 12px rgba(37,99,235,.12);
         }
-        a.secondary{
-            background:transparent;
-            color:var(--muted);
-            border:1px solid rgba(15,23,42,.06);
-            padding:.5rem .9rem;
-            border-radius:8px;
-            text-decoration:none;
-        }
         @media (max-width:420px){ .code{font-size:2.5rem} }
     </style>
 </head>
@@ -63,7 +55,6 @@
         <p>We couldn't find the page you're looking for. It may have been moved or removed.</p>
         <div class="actions">
             <a class="button" href="/">Go to homepage</a>
-            <a class="secondary" href="javascript:history.back()">Go back</a>
         </div>
     </div>
 </body>
diff --git a/templates/index.html b/templates/index.html
index d7cb0a4..3cd214b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -5,59 +5,249 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>SVS {{.Occupation}}</title>
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: #f8f9fa;
+        :root {
+            --ink: #0f172a;
+            --muted: #5c677d;
+            --bg: #f5f7fb;
+            --panel: #ffffff;
+            --accent: #1d4ed8;
+            --accent-2: #9333ea;
+            --radius: 14px;
+            --shadow: 0 15px 50px rgba(15, 23, 42, 0.07);
+            --max-width: 1080px;
         }
 
-        #what-we-do {
-            background: #e6e6e6;
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            margin: 0;
+            font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+            background: var(--bg);
+            color: var(--ink);
+            line-height: 1.6;
+        }
+
+        a {
+            color: var(--accent);
+            text-decoration: none;
+        }
+
+        a:hover {
+            text-decoration: underline;
+        }
+
+        .container {
+            width: 100%;
+            max-width: var(--max-width);
+            margin: 0 auto;
+            padding: 0 20px;
         }
 
         header {
-            background: linear-gradient(135deg, #0d6efd, #6610f2);
-            color: white;
-            padding: 80px 0;
+            background: linear-gradient(135deg, var(--accent), var(--accent-2));
+            color: #fff;
+            padding: 90px 0 80px;
             text-align: center;
         }
 
         header h1 {
-            font-size: 3rem;
-            font-weight: bold;
+            margin: 0 0 10px;
+            font-size: clamp(2.2rem, 3vw, 3.4rem);
+            letter-spacing: 0.5px;
         }
 
-        .about-section img {
-            border-radius: 50%;
-            width: 150px;
-            height: 150px;
-            object-fit: cover;
-            margin-bottom: 15px;
-        }
-
-        .footer {
-            background: #212529;
-            color: white;
-            margin-top: 40px;
-        }
-
-        .btn-fun {
-            background: linear-gradient(135deg, #0d6efd, #6610f2);
-        }
-
-        .sans {
-            font-family: "Comic Neue", cursive;
+        header h2 {
+            margin: 0 0 10px;
             font-weight: 600;
-            font-style: normal;
+        }
+
+        header p {
+            max-width: 680px;
+            margin: 0 auto;
+            color: rgba(255, 255, 255, 0.9);
+        }
+
+        .pill-button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            padding: 14px 20px;
+            margin-top: 24px;
+            background: #fff;
+            color: var(--accent);
+            border-radius: 999px;
+            border: none;
+            font-weight: 600;
+            box-shadow: var(--shadow);
+            cursor: pointer;
+            transition: transform 150ms ease, box-shadow 150ms ease;
+        }
+
+        .pill-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 18px 55px rgba(15, 23, 42, 0.14);
+            text-decoration: none;
+        }
+
+        section {
+            padding: 70px 0;
+        }
+
+        section h2 {
+            text-align: center;
+            margin: 0 0 20px;
+            font-size: 1.9rem;
+        }
+
+        .muted {
+            color: var(--muted);
+        }
+
+        #what-we-do {
+            background: #eef2ff;
+        }
+
+        #what-we-do .content {
+            background: var(--panel);
+            padding: 28px;
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+        }
+
+        .about-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+            gap: 26px;
+            margin-top: 34px;
+        }
+
+        .profile-card {
+            background: var(--panel);
+            border-radius: var(--radius);
+            padding: 24px;
+            text-align: center;
+            box-shadow: var(--shadow);
+            display: flex;
+            flex-direction: column;
+            gap: 14px;
+        }
+
+        .profile-card img {
+            border-radius: 50%;
+            width: 140px;
+            height: 140px;
+            object-fit: cover;
+            margin: 0 auto;
+        }
+
+        .profile-card h4 {
+            margin: 6px 0 0;
+            font-size: 1.1rem;
+        }
+
+        .profile-card .cta {
+            margin-top: auto;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            padding: 12px 16px;
+            background: linear-gradient(135deg, var(--accent), var(--accent-2));
+            color: #fff;
+            border-radius: 10px;
+            font-weight: 600;
+        }
+
+        .profile-card .cta:hover {
+            text-decoration: none;
+            filter: brightness(1.03);
+        }
+
+        #testimonials {
+            background: var(--panel);
+        }
+
+        .testimonial-shell {
+            max-width: 760px;
+            margin: 0 auto;
+            position: relative;
+        }
+
+        .slides {
+            position: relative;
+            overflow: hidden;
+            min-height: 180px;
+        }
+
+        .slide {
+            position: absolute;
+            inset: 0;
+            opacity: 0;
+            transform: translateX(20px);
+            transition: opacity 250ms ease, transform 250ms ease;
+            text-align: center;
+            padding: 10px 16px;
+        }
+
+        .slide.active {
+            opacity: 1;
+            transform: translateX(0);
+            position: relative;
+        }
+
+        .slide p {
+            font-size: 1.05rem;
+            font-style: italic;
+            margin-bottom: 14px;
+        }
+
+        .controls {
+            display: flex;
+            justify-content: center;
+            gap: 12px;
+            margin-top: 20px;
+        }
+
+        .control-btn {
+            width: 42px;
+            height: 42px;
+            border-radius: 50%;
+            border: 1px solid #d5d9e2;
+            background: #fff;
+            color: var(--ink);
+            display: grid;
+            place-items: center;
+            cursor: pointer;
+            box-shadow: var(--shadow);
+        }
+
+        .control-btn:hover {
+            background: #eef2ff;
+        }
+
+        footer {
+            background: #0b1224;
+            color: #f1f5f9;
+            padding: 40px 0;
+        }
+
+        footer .footer-inner {
+            display: flex;
+            flex-direction: column;
+            gap: 18px;
+        }
+
+        @media (min-width: 768px) {
+            footer .footer-inner {
+                flex-direction: row;
+                align-items: flex-end;
+                justify-content: space-between;
+            }
         }
     </style>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link
-        href="https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
-        rel="stylesheet">
 </head>
 
 <body>
@@ -66,124 +256,112 @@
     <header>
         <div class="container">
             <h1>SVS Industries</h1>
-            <h2 class="sans">{{.Occupation}}</h2>
-            <p class="lead">{{.Tagline}}</p>
-            <a href="#about" class="btn btn-light btn-lg mt-3">Meet Our Team</a>
+            <h2>{{.Occupation}}</h2>
+            <p>{{.Tagline}}</p>
+            <a href="#about" class="pill-button">Meet Our Team</a>
         </div>
     </header>
 
-
-    <section id="what-we-do" class="py-5">
+    <section id="what-we-do">
         <div class="container">
-            <h2 class="text-center mb-4">What We Do</h2>
-            <div class="row justify-content-center">
-                <div class="col-lg-10">
-                    {{.WhatWeDo}}
-                </div>
+            <h2>What We Do</h2>
+            <div class="content">
+                {{.WhatWeDo}}
             </div>
         </div>
     </section>
 
-    <!-- About Us -->
-    <section id="about" class="py-5">
+    <section id="about">
         <div class="container">
-            <h2 class="text-center mb-5">About Us</h2>
-            <div class="row g-4">
-
-                <div class="col-md-4 text-center d-flex flex-column align-items-center about-section">
+            <h2>About Us</h2>
+            <p class="muted" style="text-align:center; margin:0 auto; max-width:700px;">Three builders, one vision: ship reliable, human-centered software and services.</p>
+            <div class="about-grid">
+                <div class="profile-card">
                     <img src="headshots/chandlerswift.jpg"
                         alt="Chandler Swift">
-                    <h4 class="mt-3">Chandler <b>Swift</b></h4>
-                    <div class="flex-grow-1 d-flex flex-column justify-content-evenly">
-                        {{.ChandlerBio}}
-                    </div>
-                    <a href="https://chandlerswift.com/" class="btn btn-dark btn-fun btn-lg mt-3">chandlerswift.com</a>
+                    <h4>Chandler <b>Swift</b></h4>
+                    <div class="muted">{{.ChandlerBio}}</div>
+                    <a class="cta" href="https://chandlerswift.com/">chandlerswift.com</a>
                 </div>
-                <hr class="d-xl-none d-xxl-none d-lg-none d-md-none">
-                <div class="col-md-4 text-center d-flex flex-column align-items-center about-section">
+                <div class="profile-card">
                     <img src="headshots/ericvillnow.jpg"
-                        alt="Developer 2">
-                    <h4 class="mt-3">Eric <b>Villnow</b></h4>
-                    <div class="flex-grow-1 d-flex flex-column justify-content-evenly">
-                        {{.EricBio}}
-                    </div>
-                    <a href="https://vill.now/" class="btn btn-dark btn-fun btn-lg mt-3">vill.now</a>
+                        alt="Eric Villnow">
+                    <h4>Eric <b>Villnow</b></h4>
+                    <div class="muted">{{.EricBio}}</div>
+                    <a class="cta" href="https://vill.now/">vill.now</a>
                 </div>
-                <hr class="d-xl-none d-xxl-none d-lg-none d-md-none">
-                <div class="col-md-4 text-center d-flex flex-column align-items-center about-section">
+                <div class="profile-card">
                     <img src="headshots/isaacswift.jpg" alt="Isaac Swift">
-                    <h4 class="mt-3">Isaac <b>Swift</b></h4>
-                    <div class="flex-grow-1 d-flex flex-column justify-content-evenly">
-                        {{.IsaacBio}}
-                    </div>
-                    <a href="https://isaacswift.com/" class="btn btn-dark btn-fun btn-lg mt-3">isaacswift.com</a>
-
+                    <h4>Isaac <b>Swift</b></h4>
+                    <div class="muted">{{.IsaacBio}}</div>
+                    <a class="cta" href="https://isaacswift.com/">isaacswift.com</a>
                 </div>
-
             </div>
         </div>
     </section>
 
-    <section id="testimonials" class="py-5">
-        <div class="container-fluid">
-            <h2 class="text-center mb-5">What Our Clients Say</h2>
-            <div id="testimonialCarousel" class="carousel carousel-dark slide" data-bs-ride="carousel">
-                <div class="carousel-inner">
+    <section id="testimonials">
+        <div class="container">
+            <h2>What Our Clients Say</h2>
+            <div class="testimonial-shell" data-slider>
+                <div class="slides">
                     {{range $index, $testimonial := .Testimonials}}
-                    <div class="carousel-item text-center {{if eq $index 0}}active{{end}}">
-                        <p class="fs-5 fst-italic">"{{$testimonial.Quote}}"</p>
-                        <h5 class="mt-3">— {{$testimonial.Name}}, {{$testimonial.Position}}</h5>
+                    <div class="slide {{if eq $index 0}}active{{end}}">
+                        <p>"{{$testimonial.Quote}}"</p>
+                        <strong>— {{$testimonial.Name}}, {{$testimonial.Position}}</strong>
                     </div>
                     {{end}}
-
                 </div>
-
-                <!-- Carousel controls -->
-                <button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel"
-                    data-bs-slide="prev">
-                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                    <span class="visually-hidden">Previous</span>
-                </button>
-                <button class="carousel-control-next" type="button" data-bs-target="#testimonialCarousel"
-                    data-bs-slide="next">
-                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                    <span class="visually-hidden">Next</span>
-                </button>
-
+                <div class="controls">
+                    <button class="control-btn" data-prev aria-label="Previous testimonial">&#8592;</button>
+                    <button class="control-btn" data-next aria-label="Next testimonial">&#8594;</button>
+                </div>
             </div>
         </div>
     </section>
 
-    <style>
-        #clients {
-            position: relative;
-        }
+    <footer>
+        <div class="container footer-inner">
+            <p>
+                <b>Swift, Villnow &amp; Swift Industries</b><br>
+                {{.Occupation}} Division<br>
+                <a href="tel:2182105180" style="color:#cbd5e1;">(218) 210-5180</a><br>
+                <a href="mailto:sales@svsindustries.org" style="color:#cbd5e1;">sales@svsindustries.org</a>
+            </p>
+            <p>&copy; {{.CurrentYear}} Swift, Villnow &amp; Swift Industries. All rights reserved.</p>
+        </div>
+    </footer>
 
-        .client-logo {
-            max-height: 100px;
-            filter: grayscale(100%);
-            opacity: 0.6;
-            transition: opacity 0.3s ease;
-            margin-left: 50px;
-        }
+    <script>
+        (function () {
+            const slider = document.querySelector('[data-slider]');
+            if (!slider) return;
+            const slides = Array.from(slider.querySelectorAll('.slide'));
+            const prev = slider.querySelector('[data-prev]');
+            const next = slider.querySelector('[data-next]');
+            let index = slides.findIndex(s => s.classList.contains('active'));
 
-        .client-logo:hover {
-            opacity: 1;
-        }
-    </style>
-    <!-- Footer -->
-    <div class="footer d-flex justify-content-between align-items-md-end p-5 flex-column flex-md-row">
-        <p>
-            <b>Swift, Villnow & Swift Industries</b><br>
-            {{.Occupation}} Division<br>
-            <a href="tel:2182105180">(218) 210-5180</a><br>
-            <a href="mailto:sales@svsindustries.org">sales@svsindustries.org</a>
+            function show(i) {
+                slides.forEach((s, idx) => {
+                    s.classList.toggle('active', idx === i);
+                });
+            }
 
-        </p>
-        <p>&copy; {{.CurrentYear}} Swift, Villnow & Swift Industries. All rights reserved.</p>
-    </div>
-    <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+            function go(delta) {
+                index = (index + delta + slides.length) % slides.length;
+                show(index);
+            }
+
+            prev?.addEventListener('click', () => go(-1));
+            next?.addEventListener('click', () => go(1));
+
+            let timer = setInterval(() => go(1), 6500);
+            slider.addEventListener('mouseenter', () => clearInterval(timer));
+            slider.addEventListener('mouseleave', () => {
+                timer = setInterval(() => go(1), 6500);
+            });
+        })();
+    </script>
 </body>
 
 </html>