Skip to content

Commit 9f9a3b7

Browse files
ccross2claude
ccross2
and
claude
committed
Polish: active nav, page transitions, improved footer, 404 page
- Nav: active state highlights current page using location store - Routes: fade transition (150ms in, 100ms out) on every route change - Footer: columnar layout with PRODUCTS / COMPANY / EXTERNAL grouping - 404: NotFound page with "SIGNAL LOST." heading and return CTA - Home: sharper product descriptions matching individual page copy Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 0832db6 commit 9f9a3b7

4 files changed

Lines changed: 164 additions & 33 deletions

File tree

‎src/App.svelte‎

Lines changed: 73 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,86 @@
11
<script>
2-
import Router from 'svelte-spa-router'
2+
import Router, { location } from 'svelte-spa-router'
3+
import { fade } from 'svelte/transition'
34
import Nav from './components/Nav.svelte'
45
import Home from './pages/Home.svelte'
56
import Augmentum from './pages/Augmentum.svelte'
67
import Visage from './pages/Visage.svelte'
78
import MrHaven from './pages/MrHaven.svelte'
89
import Ecosystem from './pages/Ecosystem.svelte'
10+
import NotFound from './pages/NotFound.svelte'
911
1012
const routes = {
1113
'/': Home,
1214
'/augmentum': Augmentum,
1315
'/visage': Visage,
1416
'/mrhaven': MrHaven,
1517
'/ecosystem': Ecosystem,
18+
'*': NotFound,
1619
}
20+
21+
// Key changes on route change to trigger the fade transition
22+
$: routeKey = $location
1723
</script>
1824

1925
<Nav />
20-
<Router {routes} />
26+
27+
{#key routeKey}
28+
<div in:fade={{ duration: 150, delay: 50 }} out:fade={{ duration: 100 }}>
29+
<Router {routes} />
30+
</div>
31+
{/key}
2132

2233
<footer>
2334
<div class="footer-inner">
2435
<div class="footer-top">
2536
<a href="#/" class="footer-wordmark">SOVREN</a>
2637
<nav class="footer-nav">
27-
<a href="#/augmentum">AUGMENTUM</a>
28-
<a href="#/visage">VISAGE</a>
29-
<a href="#/mrhaven">MR. HAVEN</a>
30-
<a href="#/ecosystem">ECOSYSTEM</a>
31-
<a href="https://twitter.com/sovren_software" target="_blank" rel="noreferrer">TWITTER</a>
32-
<a href="https://github.com/sovren-software" target="_blank" rel="noreferrer">GITHUB</a>
33-
<a href="mailto:hello@sovren.software" class="muted">CONTACT</a>
34-
<a href="#" class="muted">PRIVACY</a>
35-
<a href="#" class="muted">LEGAL</a>
38+
<div class="footer-col">
39+
<span class="col-label">PRODUCTS</span>
40+
<a href="#/augmentum">AUGMENTUM</a>
41+
<a href="#/visage">VISAGE</a>
42+
<a href="#/mrhaven">MR. HAVEN</a>
43+
</div>
44+
<div class="footer-col">
45+
<span class="col-label">COMPANY</span>
46+
<a href="#/ecosystem">ECOSYSTEM</a>
47+
<a href="mailto:hello@sovren.software">CONTACT</a>
48+
</div>
49+
<div class="footer-col">
50+
<span class="col-label">EXTERNAL</span>
51+
<a href="https://twitter.com/sovren_software" target="_blank" rel="noreferrer">TWITTER</a>
52+
<a href="https://github.com/sovren-software" target="_blank" rel="noreferrer">GITHUB</a>
53+
<a href="https://mrhaven.io" target="_blank" rel="noreferrer">MRHAVEN.IO</a>
54+
<a href="https://augmentum.computer" target="_blank" rel="noreferrer">AUGMENTUM.COMPUTER</a>
55+
</div>
3656
</nav>
3757
</div>
38-
<div class="footer-copy">© 2026 SOVREN SOFTWARE. BUILT FOR AUTONOMY.</div>
58+
<div class="footer-bottom">
59+
<span class="footer-copy">© 2026 SOVREN SOFTWARE</span>
60+
<span class="footer-copy muted">BUILT FOR AUTONOMY.</span>
61+
</div>
3962
</div>
4063
</footer>
4164

4265
<style>
4366
footer {
4467
background: var(--bg);
4568
border-top: 1px solid var(--border);
46-
padding: 3.5rem 2.5rem;
69+
padding: 4rem 2.5rem 3rem;
4770
}
4871
4972
.footer-inner {
5073
max-width: var(--max-w);
5174
margin: 0 auto;
5275
display: flex;
5376
flex-direction: column;
54-
gap: 2rem;
77+
gap: 3rem;
5578
}
5679
5780
.footer-top {
5881
display: flex;
59-
align-items: flex-start;
6082
justify-content: space-between;
61-
gap: 2rem;
83+
gap: 4rem;
6284
flex-wrap: wrap;
6385
}
6486
@@ -72,28 +94,55 @@
7294
7395
.footer-nav {
7496
display: flex;
97+
gap: 4rem;
7598
flex-wrap: wrap;
76-
gap: 0.75rem 2rem;
77-
font-size: 0.65rem;
78-
letter-spacing: 0.14em;
7999
}
80100
81-
.footer-nav a {
82-
color: var(--text-secondary);
83-
text-decoration: none;
101+
.footer-col {
102+
display: flex;
103+
flex-direction: column;
104+
gap: 0.9rem;
84105
}
85106
86-
.footer-nav a.muted {
107+
.col-label {
108+
font-size: 0.58rem;
109+
letter-spacing: 0.2em;
87110
color: var(--text-muted);
111+
margin-bottom: 0.25rem;
88112
}
89113
90-
.footer-nav a:hover {
114+
.footer-col a {
115+
font-size: 0.68rem;
116+
letter-spacing: 0.12em;
117+
color: var(--text-secondary);
118+
text-decoration: none;
119+
transition: color 0.15s;
120+
}
121+
122+
.footer-col a:hover {
91123
color: var(--text-primary);
92124
}
93125
126+
.footer-bottom {
127+
display: flex;
128+
gap: 1.5rem;
129+
align-items: center;
130+
flex-wrap: wrap;
131+
}
132+
94133
.footer-copy {
95134
font-size: 0.6rem;
96135
letter-spacing: 0.12em;
97136
color: var(--text-muted);
98137
}
138+
139+
.footer-copy.muted {
140+
color: rgba(255, 255, 255, 0.12);
141+
}
142+
143+
@media (max-width: 768px) {
144+
.footer-nav {
145+
gap: 2.5rem;
146+
}
147+
}
99148
</style>

‎src/components/Nav.svelte‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
<script>
2+
import { location } from 'svelte-spa-router'
3+
24
let menuOpen = false
35
function close() { menuOpen = false }
6+
7+
function isActive(path) {
8+
if (path === '/') return $location === '/'
9+
return $location.startsWith(path)
10+
}
411
</script>
512

613
<nav>
@@ -15,10 +22,10 @@
1522
{menuOpen ? '[ CLOSE ]' : '[ MENU ]'}
1623
</button>
1724
<div class="nav-links" class:open={menuOpen}>
18-
<a href="#/augmentum" on:click={close}>AUGMENTUM</a>
19-
<a href="#/visage" on:click={close}>VISAGE</a>
20-
<a href="#/mrhaven" on:click={close}>MR. HAVEN</a>
21-
<a href="#/ecosystem" on:click={close}>ECOSYSTEM</a>
25+
<a href="#/augmentum" on:click={close} class:active={isActive('/augmentum')}>AUGMENTUM</a>
26+
<a href="#/visage" on:click={close} class:active={isActive('/visage')}>VISAGE</a>
27+
<a href="#/mrhaven" on:click={close} class:active={isActive('/mrhaven')}>MR. HAVEN</a>
28+
<a href="#/ecosystem" on:click={close} class:active={isActive('/ecosystem')}>ECOSYSTEM</a>
2229
</div>
2330
</div>
2431
</nav>
@@ -58,13 +65,14 @@
5865
}
5966
6067
.nav-links a {
61-
color: var(--text-secondary);
68+
color: var(--text-muted);
6269
text-decoration: none;
6370
transition: color 0.15s;
6471
white-space: nowrap;
6572
}
6673
67-
.nav-links a:hover {
74+
.nav-links a:hover,
75+
.nav-links a.active {
6876
color: var(--text-primary);
6977
}
7078

‎src/pages/Home.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,21 @@
1818
category: 'OS',
1919
name: 'AUGMENTUM',
2020
href: '#/augmentum',
21-
description: 'A hard-kernel operating system designed for zero-trust environments. Total isolation of critical processes from public networks.',
21+
description: 'Declarative NixOS system. Your entire OS in a single reproducible config — version-controlled, rollback-capable, answerable only to you. No silent updates. No telemetry.',
2222
},
2323
{
2424
number: '02',
2525
category: 'IDENTITY',
2626
name: 'VISAGE',
2727
href: '#/visage',
28-
description: 'A biometric wedge for decentralized authentication. Your face is your key, stored locally and never broadcast to the cloud.',
28+
description: 'Linux face authentication via PAM. ONNX inference runs entirely on-device — no cloud enrollment, no biometric database. Open source, MIT licensed.',
2929
},
3030
{
3131
number: '03',
3232
category: 'FINANCE',
3333
name: 'MR. HAVEN',
3434
href: '#/mrhaven',
35-
description: 'The ultimate financial passport. Encrypted asset management and private transaction relay for the global citizen.',
35+
description: 'Non-custodial USDC time vault on Base L2. Set conditions, name beneficiaries, define schedules. Smart contract executes — no intermediary, no approval required.',
3636
},
3737
]
3838
</script>

‎src/pages/NotFound.svelte‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<script>
2+
import { onMount } from 'svelte'
3+
onMount(() => window.scrollTo(0, 0))
4+
</script>
5+
6+
<main>
7+
<section class="hero">
8+
<div class="hero-inner">
9+
<span class="code">404</span>
10+
<h1>SIGNAL<br />LOST.</h1>
11+
<p class="tagline">This page doesn't exist. Maybe it never did.</p>
12+
<a href="#/" class="btn-home">RETURN TO BASE →</a>
13+
</div>
14+
</section>
15+
</main>
16+
17+
<style>
18+
.hero {
19+
min-height: calc(100vh - 60px);
20+
display: flex;
21+
align-items: center;
22+
justify-content: center;
23+
}
24+
25+
.hero-inner {
26+
display: flex;
27+
flex-direction: column;
28+
align-items: flex-start;
29+
gap: 1.5rem;
30+
padding: 4rem 2.5rem;
31+
max-width: var(--max-w);
32+
width: 100%;
33+
margin: 0 auto;
34+
}
35+
36+
.code {
37+
font-size: 0.65rem;
38+
letter-spacing: 0.2em;
39+
color: var(--text-muted);
40+
}
41+
42+
h1 {
43+
font-size: clamp(4rem, 14vw, 10rem);
44+
font-weight: 700;
45+
letter-spacing: 0.06em;
46+
line-height: 0.95;
47+
}
48+
49+
.tagline {
50+
font-size: clamp(0.9rem, 2vw, 1rem);
51+
color: var(--text-secondary);
52+
letter-spacing: 0.04em;
53+
margin-top: 0.5rem;
54+
}
55+
56+
.btn-home {
57+
display: inline-block;
58+
font-family: var(--font-mono);
59+
font-size: 0.7rem;
60+
letter-spacing: 0.18em;
61+
padding: 0.85rem 1.75rem;
62+
border: 1px solid var(--border);
63+
background: transparent;
64+
color: var(--text-secondary);
65+
text-decoration: none;
66+
transition: border-color 0.15s, color 0.15s;
67+
margin-top: 1rem;
68+
}
69+
70+
.btn-home:hover {
71+
border-color: var(--text-primary);
72+
color: var(--text-primary);
73+
}
74+
</style>

0 commit comments

Comments
 (0)