seo (#17)

SEO implementation, adds a structured data response and robots.txt, fixes page structure, adds meta tags, add elements to UI for better SEO as well.

Reviewed-on: #17
Co-authored-by: Michael DiLeo <michael_dileo@proton.me>
Co-committed-by: Michael DiLeo <michael_dileo@proton.me>

public/site-styles/style.css

@@ -327,4 +327,113 @@
     .mobile-nav li {
         position: relative;
     }
+}
+
+/* Services Summary Styling */
+.services-summary {
+    background: var(--pico-muted-color);
+    background: rgba(var(--pico-muted-color-rgb, 0, 0, 0), 0.05);
+    border: 1px solid var(--pico-muted-border-color);
+    border-radius: var(--pico-border-radius);
+    padding: var(--pico-spacing);
+    margin: var(--pico-typography-spacing-vertical) 0;
+}
+
+.services-summary h3 {
+    margin-top: 0;
+    margin-bottom: var(--pico-typography-spacing-vertical);
+    color: var(--pico-primary);
+}
+
+.service-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: calc(var(--pico-spacing) * 0.75);
+    margin: 0;
+}
+
+.service-link {
+    display: block;
+    padding: calc(var(--pico-spacing) * 0.75);
+    background: var(--pico-background-color);
+    border: 1px solid var(--pico-muted-border-color);
+    border-radius: var(--pico-border-radius);
+    text-decoration: none;
+    color: var(--pico-color);
+    transition: all 0.2s ease;
+    text-align: center;
+}
+
+.service-link:hover {
+    background: var(--pico-primary);
+    color: var(--pico-primary-inverse);
+    border-color: var(--pico-primary);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.service-link strong {
+    display: block;
+    font-size: 1.1em;
+    margin-bottom: calc(var(--pico-spacing) * 0.25);
+}
+
+/* Screen reader only class */
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+/* Responsive service links */
+@media (max-width: 768px) {
+    .service-links {
+        grid-template-columns: 1fr;
+        gap: calc(var(--pico-spacing) * 0.5);
+    }
+    
+    .service-link {
+        padding: calc(var(--pico-spacing) * 0.5);
+    }
+}
+
+footer ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--pico-spacing) * 0.5);
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    align-items: center;
+}
+
+footer li {
+    margin: 0;
+    display: flex;
+    align-items: center;
+}
+
+footer li:not(:last-child)::after {
+    content: "|";
+    margin: 0 calc(var(--pico-spacing) * 0.5);
+    color: var(--pico-muted-color);
+    font-weight: normal;
+}
+
+@media (max-width: 480px) {
+    footer ul {
+        flex-direction: column;
+        align-items: center;
+        gap: calc(var(--pico-spacing) * 0.5);
+    }
+    
+    footer li:not(:last-child)::after {
+        content: none; /* Remove delimiters on mobile */
+    }
 }