Skip to content

Commit d5497d0

Browse files
ccross2claude
ccross2
and
claude
committed
design: split hero layout, Magicite glyph, Esver content rewrite
- Hero layout: side-by-side split (text left, glyph right) on all product pages, homepage, and codex — eliminates dead vertical space - Esver glyph: replace terminal schematic with Magicite crystal — faceted diamond with inner glow, rotating energy rings, pulsing core - Esver content: rewrite for brevity and experience-first tone — pillars are 2 lines each, overview is 2 paragraphs, specs are single values. Implies depth without overexplaining. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent f522870 commit d5497d0

File tree

5 files changed

+206
-238
lines changed

5 files changed

+206
-238
lines changed

‎src/lib/HeroGlyph.svelte‎

Lines changed: 76 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -61,52 +61,88 @@
6161
</svg>
6262

6363
{:else if id === 'esver'}
64-
<svg viewBox="0 0 500 420" fill="none" class="glyph glyph--drift">
64+
<!-- Magicite crystal — Esper essence, Ethereum-esque diamond -->
65+
<svg viewBox="0 0 400 520" fill="none" class="glyph glyph--drift">
6566
<defs>
6667
<filter id="glow-e" x="-50%" y="-50%" width="200%" height="200%">
67-
<feGaussianBlur stdDeviation="3" result="blur" />
68+
<feGaussianBlur stdDeviation="6" result="blur" />
69+
<feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
70+
</filter>
71+
<filter id="glow-e-soft" x="-50%" y="-50%" width="200%" height="200%">
72+
<feGaussianBlur stdDeviation="12" result="blur" />
6873
<feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
6974
</filter>
75+
<linearGradient id="crystal-fill" x1="0" y1="0" x2="0" y2="1">
76+
<stop offset="0%" stop-color="var(--accent)" stop-opacity="0.06" />
77+
<stop offset="50%" stop-color="var(--accent)" stop-opacity="0.12" />
78+
<stop offset="100%" stop-color="var(--accent)" stop-opacity="0.03" />
79+
</linearGradient>
7080
</defs>
7181

72-
<!-- Monitor frame -->
73-
<rect x="80" y="40" width="340" height="260" rx="0" stroke="var(--text-primary)" stroke-width="2" opacity="0.35" />
74-
<rect x="92" y="52" width="316" height="236" rx="0" stroke="var(--text-primary)" stroke-width="0.75" opacity="0.2" />
75-
76-
<!-- Command lines -->
77-
<line x1="112" y1="82" x2="148" y2="82" stroke="var(--accent)" stroke-width="1.5" opacity="0.6" filter="url(#glow-e)" />
78-
<line x1="155" y1="82" x2="290" y2="82" stroke="var(--text-primary)" stroke-width="1" opacity="0.2" />
79-
<line x1="112" y1="105" x2="148" y2="105" stroke="var(--accent)" stroke-width="1.5" opacity="0.5" filter="url(#glow-e)" />
80-
<line x1="155" y1="105" x2="320" y2="105" stroke="var(--text-primary)" stroke-width="1" opacity="0.2" />
81-
<line x1="112" y1="128" x2="148" y2="128" stroke="var(--accent)" stroke-width="1.5" opacity="0.45" />
82-
<line x1="155" y1="128" x2="270" y2="128" stroke="var(--text-primary)" stroke-width="1" opacity="0.15" />
83-
<line x1="112" y1="151" x2="148" y2="151" stroke="var(--accent)" stroke-width="1.5" opacity="0.35" />
84-
<line x1="155" y1="151" x2="245" y2="151" stroke="var(--text-primary)" stroke-width="1" opacity="0.12" />
85-
<line x1="112" y1="174" x2="148" y2="174" stroke="var(--accent)" stroke-width="1.5" opacity="0.3" />
86-
<line x1="155" y1="174" x2="220" y2="174" stroke="var(--text-primary)" stroke-width="1" opacity="0.1" />
87-
88-
<!-- Cursor -->
89-
<rect x="112" y="198" width="10" height="16" fill="var(--accent)" opacity="0.5" class="blink" />
90-
91-
<!-- Status bar -->
92-
<line x1="92" y1="260" x2="408" y2="260" stroke="var(--text-primary)" stroke-width="0.75" opacity="0.2" />
93-
<circle cx="108" cy="275" r="4" fill="var(--accent)" opacity="0.6" class="pulse" filter="url(#glow-e)" />
94-
<line x1="120" y1="275" x2="210" y2="275" stroke="var(--text-primary)" stroke-width="0.75" opacity="0.15" />
95-
96-
<!-- Stand -->
97-
<line x1="250" y1="300" x2="250" y2="345" stroke="var(--text-primary)" stroke-width="1.5" opacity="0.3" />
98-
<line x1="195" y1="345" x2="305" y2="345" stroke="var(--text-primary)" stroke-width="2" opacity="0.35" />
99-
100-
<!-- Voice waves -->
101-
<path d="M345,365 Q380,342 345,320" stroke="var(--accent)" stroke-width="1" opacity="0.3" fill="none" class="pulse" />
102-
<path d="M355,375 Q400,342 355,310" stroke="var(--accent)" stroke-width="1" opacity="0.2" fill="none" class="pulse-delay" />
103-
<path d="M365,385 Q420,342 365,300" stroke="var(--accent)" stroke-width="1" opacity="0.12" fill="none" />
104-
105-
<!-- Shield -->
106-
<path d="M155,355 L155,385 Q155,402 175,410 Q195,402 195,385 L195,355 Z" stroke="var(--text-primary)" stroke-width="1" opacity="0.3" fill="none" />
107-
<line x1="175" y1="370" x2="175" y2="390" stroke="var(--accent)" stroke-width="0.75" opacity="0.3" />
108-
109-
<text x="250" y="405" text-anchor="middle" class="glyph-label">ESPER_LINK: BOUND</text>
82+
<!-- Ambient glow behind crystal -->
83+
<ellipse cx="200" cy="220" rx="80" ry="120" fill="var(--accent)" opacity="0.04" filter="url(#glow-e-soft)" />
84+
85+
<!-- Outer energy ring — slow rotate -->
86+
<g class="spin-slow" style="transform-origin:200px 220px">
87+
<circle cx="200" cy="220" r="180" stroke="var(--accent)" stroke-width="0.5" opacity="0.12" stroke-dasharray="3 8" />
88+
</g>
89+
<g class="spin-slow-reverse" style="transform-origin:200px 220px">
90+
<circle cx="200" cy="220" r="155" stroke="var(--accent)" stroke-width="0.5" opacity="0.08" stroke-dasharray="2 12" />
91+
</g>
92+
93+
<!-- Crystal body — upper half (Ethereum-esque) -->
94+
<polygon points="200,30 310,200 200,260 90,200" fill="url(#crystal-fill)" stroke="var(--accent)" stroke-width="1.5" opacity="0.5" />
95+
<!-- Crystal body — lower half -->
96+
<polygon points="200,260 310,200 200,430 90,200" fill="url(#crystal-fill)" stroke="var(--accent)" stroke-width="1.5" opacity="0.45" />
97+
98+
<!-- Inner facet — upper -->
99+
<polygon points="200,65 280,195 200,240 120,195" stroke="var(--accent)" stroke-width="0.75" opacity="0.3" fill="none" />
100+
<!-- Inner facet — lower -->
101+
<polygon points="200,240 280,195 200,395 120,195" stroke="var(--accent)" stroke-width="0.75" opacity="0.25" fill="none" />
102+
103+
<!-- Center horizontal line (the "waist") -->
104+
<line x1="90" y1="200" x2="310" y2="200" stroke="var(--accent)" stroke-width="1.5" opacity="0.4" />
105+
106+
<!-- Vertical axis -->
107+
<line x1="200" y1="30" x2="200" y2="430" stroke="var(--accent)" stroke-width="0.5" opacity="0.15" />
108+
109+
<!-- Upper facet lines (left) -->
110+
<line x1="200" y1="30" x2="90" y2="200" stroke="var(--accent)" stroke-width="0.5" opacity="0.2" />
111+
<line x1="200" y1="65" x2="120" y2="195" stroke="var(--accent)" stroke-width="0.5" opacity="0.15" />
112+
<!-- Upper facet lines (right) -->
113+
<line x1="200" y1="30" x2="310" y2="200" stroke="var(--accent)" stroke-width="0.5" opacity="0.2" />
114+
<line x1="200" y1="65" x2="280" y2="195" stroke="var(--accent)" stroke-width="0.5" opacity="0.15" />
115+
116+
<!-- Cross facet lines -->
117+
<line x1="145" y1="115" x2="255" y2="115" stroke="var(--accent)" stroke-width="0.5" opacity="0.1" />
118+
<line x1="120" y1="155" x2="280" y2="155" stroke="var(--accent)" stroke-width="0.5" opacity="0.08" />
119+
<line x1="120" y1="280" x2="280" y2="280" stroke="var(--accent)" stroke-width="0.5" opacity="0.06" />
120+
<line x1="150" y1="340" x2="250" y2="340" stroke="var(--accent)" stroke-width="0.5" opacity="0.05" />
121+
122+
<!-- Core glow — pulsing -->
123+
<circle cx="200" cy="200" r="18" fill="var(--accent)" opacity="0.15" filter="url(#glow-e)" class="pulse" />
124+
<circle cx="200" cy="200" r="8" fill="var(--accent)" opacity="0.4" filter="url(#glow-e)" class="pulse" />
125+
<circle cx="200" cy="200" r="3" fill="var(--accent)" opacity="0.8" />
126+
127+
<!-- Energy radiating lines -->
128+
<line x1="60" y1="200" x2="85" y2="200" stroke="var(--accent)" stroke-width="1" opacity="0.25" class="pulse" />
129+
<line x1="315" y1="200" x2="340" y2="200" stroke="var(--accent)" stroke-width="1" opacity="0.25" class="pulse" />
130+
<line x1="200" y1="0" x2="200" y2="22" stroke="var(--accent)" stroke-width="1" opacity="0.2" class="pulse-delay" />
131+
<line x1="200" y1="438" x2="200" y2="460" stroke="var(--accent)" stroke-width="1" opacity="0.15" class="pulse-delay" />
132+
133+
<!-- Diagonal energy rays -->
134+
<line x1="75" y1="100" x2="108" y2="125" stroke="var(--accent)" stroke-width="0.75" opacity="0.1" stroke-dasharray="2 4" />
135+
<line x1="325" y1="100" x2="292" y2="125" stroke="var(--accent)" stroke-width="0.75" opacity="0.1" stroke-dasharray="2 4" />
136+
<line x1="75" y1="320" x2="108" y2="295" stroke="var(--accent)" stroke-width="0.75" opacity="0.08" stroke-dasharray="2 4" />
137+
<line x1="325" y1="320" x2="292" y2="295" stroke="var(--accent)" stroke-width="0.75" opacity="0.08" stroke-dasharray="2 4" />
138+
139+
<!-- Small orbiting data points -->
140+
<circle cx="145" cy="115" r="2" fill="var(--accent)" opacity="0.4" class="pulse" />
141+
<circle cx="255" cy="115" r="2" fill="var(--accent)" opacity="0.4" class="pulse-delay" />
142+
<circle cx="145" cy="305" r="2" fill="var(--accent)" opacity="0.3" class="pulse-delay" />
143+
<circle cx="255" cy="305" r="2" fill="var(--accent)" opacity="0.3" class="pulse" />
144+
145+
<text x="200" y="490" text-anchor="middle" class="glyph-label">MAGICITE_CORE: ACTIVE</text>
110146
</svg>
111147

112148
{:else if id === 'visage'}

‎src/lib/ProductHero.svelte‎

Lines changed: 47 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -15,24 +15,26 @@
1515
import HeroGlyph from '$lib/HeroGlyph.svelte';
1616
</script>
1717

18-
<section class="hero" class:large={size === 'large'}>
19-
{#if glyphId}
20-
<div class="hero-glyph">
21-
<HeroGlyph id={glyphId} />
18+
<section class="hero" class:large={size === 'large'} class:has-glyph={glyphId}>
19+
<div class="hero-split">
20+
<div class="hero-text panel--strong">
21+
{#if category}
22+
<span class="category">{category}</span>
23+
<div class="category-rule"></div>
24+
{/if}
25+
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
26+
<h1 class="hero-title size-{size}">{@html title}</h1>
27+
{#if status}
28+
<span class="tag tag--accent">{status}</span>
29+
{/if}
30+
{#if tagline}
31+
<p class="tagline">{tagline}</p>
32+
{/if}
2233
</div>
23-
{/if}
24-
<div class="hero-inner panel--strong">
25-
{#if category}
26-
<span class="category">{category}</span>
27-
<div class="category-rule"></div>
28-
{/if}
29-
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
30-
<h1 class="hero-title size-{size}">{@html title}</h1>
31-
{#if status}
32-
<span class="tag tag--accent">{status}</span>
33-
{/if}
34-
{#if tagline}
35-
<p class="tagline">{tagline}</p>
34+
{#if glyphId}
35+
<div class="hero-glyph">
36+
<HeroGlyph id={glyphId} />
37+
</div>
3638
{/if}
3739
</div>
3840
</section>
@@ -41,32 +43,38 @@
4143
.hero {
4244
min-height: calc(100vh - var(--nav-h));
4345
display: flex;
44-
flex-direction: column;
45-
justify-content: flex-end;
46-
padding: var(--pad-hero);
46+
align-items: center;
47+
padding: var(--space-5xl) var(--space-3xl);
4748
background: var(--bg);
4849
border-bottom: var(--panel-border-strong);
49-
position: relative;
50-
overflow: hidden;
5150
}
5251
53-
.hero-glyph {
54-
flex: 1;
55-
display: flex;
56-
align-items: center;
57-
justify-content: center;
58-
padding: var(--space-3xl) var(--space-2xl) 0;
59-
}
60-
61-
.hero-inner {
52+
.hero-split {
6253
max-width: var(--max-w);
6354
margin: 0 auto;
6455
width: 100%;
56+
display: grid;
57+
grid-template-columns: 1fr 1fr;
58+
gap: var(--space-4xl);
59+
align-items: center;
60+
}
61+
62+
.hero:not(.has-glyph) .hero-split {
63+
grid-template-columns: 1fr;
64+
}
65+
66+
.hero-text {
6567
padding: var(--panel-pad);
6668
border: var(--panel-border-strong);
69+
background: var(--bg);
6770
position: relative;
6871
z-index: 1;
69-
background: var(--bg);
72+
}
73+
74+
.hero-glyph {
75+
display: flex;
76+
align-items: center;
77+
justify-content: center;
7078
}
7179
7280
.category {
@@ -108,15 +116,19 @@
108116
109117
@media (max-width: 768px) {
110118
.hero {
111-
padding: var(--space-4xl) var(--space-xl) var(--space-5xl);
119+
padding: var(--space-4xl) var(--space-xl);
120+
}
121+
122+
.hero-split {
123+
grid-template-columns: 1fr;
112124
}
113125
114-
.hero-inner {
126+
.hero-text {
115127
padding: var(--space-xl);
116128
}
117129
118130
.hero-glyph {
119-
padding: var(--space-xl) var(--space-xl) 0;
131+
order: -1;
120132
}
121133
122134
h1 {

0 commit comments

Comments
 (0)