Skip to content

Commit f312c31

Browse files
Mbd06bMbd06b
authored
Merge pull request #89 from ethosengine/staging
Merge pull request #88 from ethosengine/dev Merge pull request #87 from ethosengine/claude/fix-lamad-landing-page-01N8CaP6hF7bxcjK7NR5zAow Claude/fix lamad landing page 01 n8 ca p6h f7bxcj k7 nr5z aow
2 parents 702c42a + 007e4d6 commit f312c31

File tree

11 files changed

+907
-1022
lines changed

11 files changed

+907
-1022
lines changed

‎elohim-app/src/app/lamad/components/lamad-home/lamad-home.component.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -163,11 +163,8 @@ export class LamadHomeComponent implements OnInit, OnDestroy {
163163
*/
164164
goHome(navigate = true): void {
165165
this.selectedNode = null;
166-
// Don't force expand on mobile to avoid jarring layout shifts
167-
if (window.innerWidth >= 768) {
168-
this.isGraphExpanded = true;
169-
}
170-
166+
this.isGraphExpanded = true;
167+
171168
this.viewState = 'root';
172169
this.activeDrillDown = null;
173170

@@ -177,7 +174,7 @@ export class LamadHomeComponent implements OnInit, OnDestroy {
177174
if (navigate) {
178175
this.navigationService.navigateToHome();
179176
}
180-
177+
181178
window.scrollTo(0, 0);
182179
}
183180

‎elohim-app/src/app/lamad/components/lamad-layout/lamad-layout.component.css‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -254,11 +254,6 @@
254254
overflow-x: auto;
255255
}
256256

257-
/* Hide the "Back to Site" link on mobile to save space */
258-
.lamad-nav .back-link {
259-
display: none;
260-
}
261-
262257
/* Hide search on mobile to save space */
263258
.search-container {
264259
display: none;

‎elohim-library/projects/lamad-ui/src/lib/components/governance-diagram/governance-diagram.component.css‎

Lines changed: 177 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,180 @@
1-
.governance-diagram-wrapper {
2-
width: 100%;
3-
max-width: 800px;
4-
margin: 0 auto;
5-
position: relative;
1+
.governance-container {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 2rem;
5+
align-items: center;
6+
padding: 2rem;
7+
background-color: #1c1917; /* stone-900 */
8+
color: #f5f5f4; /* stone-100 */
9+
border-radius: 0.75rem;
10+
border: 1px solid #292524; /* stone-800 */
11+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
12+
width: 100%;
13+
max-width: 64rem;
14+
margin: 2rem auto;
15+
font-family: 'Inter', sans-serif;
616
}
717

8-
canvas {
9-
width: 100%;
10-
height: auto;
11-
display: block;
12-
background: transparent;
18+
@media (min-width: 768px) {
19+
.governance-container {
20+
flex-direction: row;
21+
align-items: stretch;
22+
}
1323
}
24+
25+
/* Left Panel */
26+
.panel-left {
27+
flex: 1;
28+
display: flex;
29+
flex-direction: column;
30+
}
31+
32+
.title {
33+
font-family: 'Playfair Display', serif;
34+
font-size: 1.25rem;
35+
color: #C5A059; /* nobel-gold */
36+
margin-bottom: 0.5rem;
37+
}
38+
39+
.description {
40+
color: #a8a29e; /* stone-400 */
41+
font-size: 0.875rem;
42+
line-height: 1.6;
43+
margin-bottom: 1.5rem;
44+
}
45+
46+
.layer-list {
47+
display: flex;
48+
flex-direction: column;
49+
gap: 0.5rem;
50+
}
51+
52+
.layer-button {
53+
width: 100%;
54+
text-align: left;
55+
padding: 0.75rem;
56+
border-radius: 0.25rem;
57+
border: 1px solid #292524; /* stone-800 */
58+
background-color: transparent;
59+
color: #78716c; /* stone-500 */
60+
cursor: pointer;
61+
transition: all 0.2s;
62+
display: flex;
63+
justify-content: space-between;
64+
align-items: center;
65+
font-family: inherit;
66+
}
67+
68+
.layer-button:hover {
69+
border-color: #57534e; /* stone-600 */
70+
}
71+
72+
.layer-button.active {
73+
background-color: #C5A059;
74+
color: #1c1917; /* stone-900 */
75+
border-color: #C5A059;
76+
font-weight: 500;
77+
transform: scale(1.02);
78+
}
79+
80+
.layer-name {
81+
font-weight: 500;
82+
}
83+
84+
/* Right Panel */
85+
.panel-right {
86+
width: 100%;
87+
min-height: 300px;
88+
background-color: rgba(41, 37, 36, 0.5); /* stone-800/50 */
89+
border-radius: 0.75rem;
90+
border: 1px solid rgba(68, 64, 60, 0.5); /* stone-700/50 */
91+
padding: 1.5rem;
92+
display: flex;
93+
flex-direction: column;
94+
justify-content: center;
95+
align-items: center;
96+
position: relative;
97+
overflow: hidden;
98+
}
99+
100+
@media (min-width: 768px) {
101+
.panel-right {
102+
width: 50%;
103+
}
104+
}
105+
106+
/* Concentric Circles */
107+
.circles-background {
108+
position: absolute;
109+
inset: 0;
110+
display: flex;
111+
align-items: center;
112+
justify-content: center;
113+
pointer-events: none;
114+
opacity: 0.2;
115+
}
116+
117+
.circle {
118+
position: absolute;
119+
border-radius: 9999px;
120+
border: 1px solid #a8a29e; /* stone-400 */
121+
}
122+
123+
/* Layer Content */
124+
.layer-content {
125+
position: relative;
126+
z-index: 10;
127+
text-align: center;
128+
animation: fadeIn 0.3s ease-out;
129+
}
130+
131+
.icon-wrapper {
132+
margin-bottom: 1rem;
133+
display: flex;
134+
justify-content: center;
135+
}
136+
137+
.icon-gold {
138+
color: #C5A059;
139+
}
140+
141+
.layer-title {
142+
font-family: 'Playfair Display', serif;
143+
font-size: 1.5rem;
144+
color: white;
145+
margin-bottom: 0.5rem;
146+
}
147+
148+
.separator {
149+
width: 3rem;
150+
height: 0.25rem;
151+
background-color: #C5A059;
152+
margin: 0 auto 1rem auto;
153+
}
154+
155+
.layer-desc {
156+
color: #d6d3d1; /* stone-300 */
157+
font-size: 1.125rem;
158+
font-weight: 300;
159+
margin-bottom: 1.5rem;
160+
}
161+
162+
.consensus-badge {
163+
display: inline-block;
164+
padding: 0.5rem 1rem;
165+
background-color: #1c1917; /* stone-900 */
166+
border-radius: 9999px;
167+
border: 1px solid #44403c; /* stone-700 */
168+
font-size: 0.75rem;
169+
font-family: monospace;
170+
color: #a8a29e; /* stone-400 */
171+
}
172+
173+
.consensus-val {
174+
color: white;
175+
}
176+
177+
@keyframes fadeIn {
178+
from { opacity: 0; transform: scale(0.9); }
179+
to { opacity: 1; transform: scale(1); }
180+
}

‎elohim-library/projects/lamad-ui/src/lib/components/governance-diagram/governance-diagram.component.html‎

Lines changed: 55 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,55 @@
1-
<div class="governance-diagram-wrapper">
2-
<canvas #canvas></canvas>
3-
</div>
1+
<div class="governance-container">
2+
<div class="panel-left">
3+
<h3 class="title">Graduated Sovereignty</h3>
4+
<p class="description">
5+
Governance operates on a gradient of immutability. Global principles are rigid to prevent existential risk, while individual layers offer maximum flexibility.
6+
</p>
7+
8+
<div class="layer-list">
9+
<button *ngFor="let layer of layers"
10+
class="layer-button"
11+
[class.active]="activeLayer === layer.id"
12+
(click)="setActiveLayer(layer.id)">
13+
<span class="layer-name">{{ layer.name }}</span>
14+
<!-- Lock Icon for active layer -->
15+
<svg *ngIf="activeLayer === layer.id" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
16+
</button>
17+
</div>
18+
</div>
19+
20+
<div class="panel-right">
21+
<!-- Concentric Circles Background -->
22+
<div class="circles-background">
23+
<div *ngFor="let i of [1, 2, 3, 4, 5]"
24+
class="circle"
25+
[style.width.px]="i * 60"
26+
[style.height.px]="i * 60"
27+
[style.opacity]="1 - (i * 0.15)">
28+
</div>
29+
</div>
30+
31+
<!-- Active Layer Content -->
32+
<div class="layer-content">
33+
<div class="icon-wrapper">
34+
<ng-container [ngSwitch]="activeLayer">
35+
<!-- Globe Icon for Global -->
36+
<svg *ngSwitchCase="0" class="icon-gold" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" x2="22" y1="12" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
37+
38+
<!-- Users Icon for Individual -->
39+
<svg *ngSwitchCase="4" class="icon-gold" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
40+
41+
<!-- Shield/Default for others -->
42+
<svg *ngSwitchDefault class="icon-gold" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/><path d="m9 12 2 2 4-4"/></svg>
43+
</ng-container>
44+
</div>
45+
46+
<h4 class="layer-title">{{ layers[activeLayer].name }}</h4>
47+
<div class="separator"></div>
48+
<p class="layer-desc">{{ layers[activeLayer].desc }}</p>
49+
50+
<div class="consensus-badge">
51+
CONSENSUS: <span class="consensus-val">{{ layers[activeLayer].consensus }}</span>
52+
</div>
53+
</div>
54+
</div>
55+
</div>

0 commit comments

Comments
 (0)