Skip to content

Commit 58a1901

Browse files
GaspardKiriraGaspardKirira
committed
feat(site): expand Vix homepage ecosystem sections
1 parent 2cd8ebd commit 58a1901

23 files changed

Lines changed: 1928 additions & 85 deletions

‎vix-site/public/data/github_stats.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"repo": "vixcpp/vix",
3-
"fetched_at": "2026-06-14T16:49:46.964Z",
3+
"fetched_at": "2026-06-14T17:35:31.939Z",
44
"stars": 464,
55
"forks": 33,
66
"open_issues": 3,

‎vix-site/src/components/home/HomeCneriumReliability.vue‎

Lines changed: 308 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,308 @@
1+
<script setup>
2+
defineProps({
3+
cneriumReliability: {
4+
type: Object,
5+
required: true,
6+
},
7+
});
8+
</script>
9+
10+
<template>
11+
<section class="cnerium-reliability">
12+
<div class="container cnerium-reliability-inner">
13+
<div class="cnerium-reliability-content">
14+
<span class="cnerium-reliability-badge">
15+
{{ cneriumReliability.badge }}
16+
</span>
17+
18+
<h2 class="cnerium-reliability-title">
19+
{{ cneriumReliability.title }}
20+
</h2>
21+
22+
<p class="cnerium-reliability-subtitle">
23+
{{ cneriumReliability.subtitle }}
24+
</p>
25+
26+
<a
27+
v-if="cneriumReliability.cta"
28+
class="cnerium-reliability-btn"
29+
:href="cneriumReliability.cta.to || cneriumReliability.cta.href"
30+
:target="cneriumReliability.cta.external ? '_blank' : null"
31+
:rel="cneriumReliability.cta.external ? 'noreferrer' : null"
32+
>
33+
{{ cneriumReliability.cta.label }}
34+
<span>›</span>
35+
</a>
36+
</div>
37+
38+
<div class="cnerium-reliability-visual">
39+
<div class="code-card cnerium-card cnerium-card-top">
40+
<div class="code-head">
41+
<div class="head-left">
42+
<span class="dot dot-red"></span>
43+
<span class="dot dot-yellow"></span>
44+
<span class="dot dot-green"></span>
45+
<span class="head-title">
46+
{{ cneriumReliability.cards.attach.fileName }}
47+
</span>
48+
</div>
49+
</div>
50+
51+
<div class="code-body cnerium-code-body">
52+
<pre
53+
class="code-pre cnerium-code-pre"
54+
><code v-html="cneriumReliability.cards.attach.code"></code></pre>
55+
</div>
56+
</div>
57+
58+
<div class="code-card cnerium-card cnerium-card-bottom">
59+
<div class="code-head">
60+
<div class="head-left">
61+
<span class="dot dot-red"></span>
62+
<span class="dot dot-yellow"></span>
63+
<span class="dot dot-green"></span>
64+
<span class="head-title">
65+
{{ cneriumReliability.cards.retry.fileName }}
66+
</span>
67+
</div>
68+
</div>
69+
70+
<div class="code-body cnerium-code-body">
71+
<pre
72+
class="code-pre cnerium-code-pre"
73+
><code v-html="cneriumReliability.cards.retry.code"></code></pre>
74+
</div>
75+
</div>
76+
</div>
77+
</div>
78+
</section>
79+
</template>
80+
81+
<style scoped>
82+
.cnerium-reliability {
83+
padding: 72px 0 120px;
84+
overflow: hidden;
85+
background:
86+
radial-gradient(
87+
circle at top left,
88+
rgba(34, 197, 94, 0.1),
89+
transparent 34%
90+
),
91+
rgba(34, 197, 94, 0.02);
92+
}
93+
94+
.cnerium-reliability-inner {
95+
display: grid;
96+
grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
97+
gap: 72px;
98+
align-items: center;
99+
}
100+
101+
.cnerium-reliability-content {
102+
max-width: 460px;
103+
}
104+
105+
.cnerium-reliability-badge {
106+
display: inline-flex;
107+
align-items: center;
108+
justify-content: center;
109+
margin-bottom: 16px;
110+
padding: 5px 12px;
111+
border-radius: 999px;
112+
border: 1px solid rgba(34, 197, 94, 0.22);
113+
background: rgba(34, 197, 94, 0.08);
114+
color: #4ade80;
115+
font-size: 0.78rem;
116+
font-weight: 800;
117+
}
118+
119+
.cnerium-reliability-title {
120+
margin: 0;
121+
color: #ecfdf5;
122+
font-size: clamp(1.8rem, 2.7vw, 2.5rem);
123+
line-height: 1.1;
124+
font-weight: 850;
125+
letter-spacing: -0.035em;
126+
}
127+
128+
.cnerium-reliability-subtitle {
129+
margin: 18px 0 0;
130+
color: rgba(236, 253, 245, 0.76);
131+
font-size: 1.02rem;
132+
line-height: 1.7;
133+
}
134+
135+
.cnerium-reliability-btn {
136+
margin-top: 28px;
137+
display: inline-flex;
138+
align-items: center;
139+
gap: 10px;
140+
padding: 14px 20px;
141+
border-radius: 999px;
142+
background: #67f0a8;
143+
color: #052e16;
144+
text-decoration: none;
145+
font-weight: 800;
146+
box-shadow: 0 10px 24px rgba(16, 185, 129, 0.18);
147+
transition:
148+
transform 0.18s ease,
149+
box-shadow 0.18s ease;
150+
}
151+
152+
.cnerium-reliability-btn:hover {
153+
transform: translateY(-1px);
154+
box-shadow: 0 14px 28px rgba(16, 185, 129, 0.24);
155+
}
156+
157+
.cnerium-reliability-visual {
158+
position: relative;
159+
min-height: 620px;
160+
width: 100%;
161+
}
162+
163+
.cnerium-card {
164+
position: absolute;
165+
width: min(540px, 100%);
166+
max-width: 100%;
167+
overflow: hidden;
168+
}
169+
170+
.cnerium-card-top {
171+
top: 0;
172+
left: 0;
173+
z-index: 1;
174+
}
175+
176+
.cnerium-card-bottom {
177+
top: 310px;
178+
left: 12%;
179+
z-index: 2;
180+
}
181+
182+
.cnerium-code-body {
183+
overflow-x: auto;
184+
overflow-y: hidden;
185+
-webkit-overflow-scrolling: touch;
186+
}
187+
188+
.cnerium-code-pre {
189+
margin: 0;
190+
width: max-content;
191+
min-width: 100%;
192+
max-width: none;
193+
white-space: pre;
194+
word-break: normal;
195+
overflow-wrap: normal;
196+
}
197+
198+
.cnerium-code-pre code {
199+
display: inline-block;
200+
min-width: 100%;
201+
white-space: pre;
202+
}
203+
204+
@media (max-width: 980px) {
205+
.cnerium-reliability {
206+
padding-bottom: 120px;
207+
}
208+
209+
.cnerium-reliability-inner {
210+
grid-template-columns: 1fr;
211+
gap: 44px;
212+
}
213+
214+
.cnerium-reliability-content {
215+
max-width: 100%;
216+
text-align: center;
217+
margin: 0 auto;
218+
}
219+
220+
.cnerium-reliability-visual {
221+
max-width: 620px;
222+
min-height: 640px;
223+
margin: 0 auto;
224+
}
225+
}
226+
227+
@media (max-width: 720px) {
228+
.cnerium-reliability {
229+
padding: 56px 0 72px;
230+
}
231+
232+
.cnerium-reliability-inner {
233+
gap: 36px;
234+
}
235+
236+
.cnerium-reliability-content {
237+
text-align: left;
238+
max-width: 100%;
239+
}
240+
241+
.cnerium-reliability-title {
242+
font-size: clamp(1.75rem, 8vw, 2.35rem);
243+
line-height: 1.08;
244+
}
245+
246+
.cnerium-reliability-subtitle {
247+
font-size: 1rem;
248+
line-height: 1.65;
249+
}
250+
251+
.cnerium-reliability-btn {
252+
width: 100%;
253+
justify-content: center;
254+
}
255+
256+
.cnerium-reliability-visual {
257+
width: 100%;
258+
max-width: 100%;
259+
min-width: 0;
260+
min-height: auto;
261+
display: flex;
262+
flex-direction: column;
263+
gap: 16px;
264+
overflow: hidden;
265+
}
266+
267+
.cnerium-card,
268+
.cnerium-card-top,
269+
.cnerium-card-bottom {
270+
position: relative;
271+
top: auto;
272+
left: auto;
273+
width: 100%;
274+
max-width: 100%;
275+
min-width: 0;
276+
}
277+
278+
.cnerium-code-body {
279+
width: 100%;
280+
max-width: 100%;
281+
min-width: 0;
282+
overflow-x: auto;
283+
overflow-y: hidden;
284+
-webkit-overflow-scrolling: touch;
285+
}
286+
287+
.cnerium-code-pre {
288+
margin: 0;
289+
width: max-content;
290+
min-width: 100%;
291+
max-width: none;
292+
padding: 18px 20px;
293+
font-size: 0.82rem;
294+
line-height: 1.65;
295+
white-space: pre;
296+
word-break: normal;
297+
overflow-wrap: normal;
298+
}
299+
300+
.cnerium-code-pre code {
301+
display: inline-block;
302+
min-width: 100%;
303+
white-space: pre;
304+
word-break: normal;
305+
overflow-wrap: normal;
306+
}
307+
}
308+
</style>

0 commit comments

Comments
 (0)