@@ -13,15 +13,15 @@ hero:
1313 - theme : brand
1414 text : Get Started
1515 link : /guide/getting-started
16+ - theme : alt
17+ text : Star on GitHub
18+ link : https://github.com/EricLLLLLL/bvm
1619 - theme : alt
1720 text : 中文
1821 link : /zh/
1922 - theme : alt
2023 text : Troubleshooting
2124 link : /guide/troubleshooting
22- - theme : alt
23- text : View on GitHub
24- link : https://github.com/EricLLLLLL/bvm
2525
2626features :
2727 - title : 🚀 Zero Latency
@@ -49,6 +49,18 @@ const copy = (text, type) => {
4949</script >
5050
5151<div class =" spotlight-section " >
52+ <div class =" star-card " >
53+ <div class="star-eyebrow">Open source support</div>
54+ <h2>If BVM helps your Bun workflow, give it a GitHub Star.</h2>
55+ <p>
56+ A Star helps more developers discover BVM, trust the project faster, and try it in real multi-version Bun setups.
57+ </p>
58+ <div class="star-actions">
59+ <a class="star-primary" href="https://github.com/EricLLLLLL/bvm">Star BVM on GitHub</a>
60+ <a class="star-secondary" href="https://github.com/EricLLLLLL/bvm/stargazers">See stargazers</a>
61+ </div>
62+ </div >
63+
5264 <div class =" spotlight-card " >
5365 <div class="spotlight-eyebrow">From the NexSail ecosystem</div>
5466 <h2>Need premium lead generation, paid acquisition, SEO, or GEO growth?</h2>
@@ -153,49 +165,62 @@ const copy = (text, type) => {
153165 margin-top : 1.5rem ;
154166}
155167
168+ .star-card ,
156169.spotlight-card {
157170 padding : 1.4rem ;
158171 border-radius : 18px ;
172+ }
173+
174+ .star-card {
175+ margin-bottom : 1rem ;
159176 background :
160- radial-gradient (circle at top right , rgba (245 , 158 , 11 , 0.16 ), transparent 30 % ),
161- linear-gradient (135deg , rgba (15 , 23 , 42 , 0.96 ), rgba (30 , 41 , 59 , 0.94 ));
162- border : 1px solid rgba (245 , 158 , 11 , 0.28 );
163- box-shadow : 0 18px 42px rgba (15 , 23 , 42 , 0.18 );
164- color : #f8fafc ;
177+ radial-gradient (circle at top left , rgba (59 , 130 , 246 , 0.18 ), transparent 28 % ),
178+ linear-gradient (135deg , rgba (255 , 255 , 255 , 0.98 ), rgba (241 , 245 , 249 , 0.96 ));
179+ border : 1px solid rgba (59 , 130 , 246 , 0.16 );
180+ box-shadow : 0 18px 42px rgba (15 , 23 , 42 , 0.08 );
181+ color : #0f172a ;
165182}
166183
167- .spotlight -eyebrow {
184+ .star -eyebrow {
168185 font-size : 0.8rem ;
169186 font-weight : 700 ;
170187 letter-spacing : 0.08em ;
171188 text-transform : uppercase ;
172- color : #fbbf24 ;
189+ color : #2563eb ;
173190}
174191
192+ .star-card h2 ,
175193.spotlight-card h2 {
176194 margin : 0.45rem 0 0.65rem ;
177195 font-size : 1.7rem ;
196+ }
197+
198+ .star-card h2 {
178199 line-height : 1.15 ;
179- color : #fff ;
200+ color : #0f172a ;
180201}
181202
182- .spotlight -card p {
203+ .star -card p {
183204 margin : 0 ;
184205 max-width : 52rem ;
185- color : rgba ( 248 , 250 , 252 , 0.9 ) ;
206+ color : #334155 ;
186207}
187208
209+ .star-actions ,
188210.spotlight-actions {
189211 margin-top : 1rem ;
190212 display : flex ;
191213 flex-wrap : wrap ;
192214 gap : 0.75rem ;
193215}
194216
217+ .star-actions a ,
195218.spotlight-actions a {
196219 text-decoration : none ;
197220}
198221
222+ .star-primary ,
223+ .star-secondary ,
199224.spotlight-primary ,
200225.spotlight-secondary {
201226 display : inline-flex ;
@@ -207,6 +232,44 @@ const copy = (text, type) => {
207232 font-weight : 700 ;
208233}
209234
235+ .star-primary {
236+ background : #0f172a ;
237+ color : #f8fafc ;
238+ }
239+
240+ .star-secondary {
241+ border : 1px solid rgba (15 , 23 , 42 , 0.14 );
242+ color : #0f172a ;
243+ }
244+
245+ .spotlight-card {
246+ background :
247+ radial-gradient (circle at top right , rgba (245 , 158 , 11 , 0.16 ), transparent 30% ),
248+ linear-gradient (135deg , rgba (15 , 23 , 42 , 0.96 ), rgba (30 , 41 , 59 , 0.94 ));
249+ border : 1px solid rgba (245 , 158 , 11 , 0.28 );
250+ box-shadow : 0 18px 42px rgba (15 , 23 , 42 , 0.18 );
251+ color : #f8fafc ;
252+ }
253+
254+ .spotlight-eyebrow {
255+ font-size : 0.8rem ;
256+ font-weight : 700 ;
257+ letter-spacing : 0.08em ;
258+ text-transform : uppercase ;
259+ color : #fbbf24 ;
260+ }
261+
262+ .spotlight-card h2 {
263+ line-height : 1.15 ;
264+ color : #fff ;
265+ }
266+
267+ .spotlight-card p {
268+ margin : 0 ;
269+ max-width : 52rem ;
270+ color : rgba (248 , 250 , 252 , 0.9 );
271+ }
272+
210273.spotlight-primary {
211274 background : #f59e0b ;
212275 color : #111827 ;
@@ -226,10 +289,13 @@ const copy = (text, type) => {
226289}
227290
228291@media (max-width : 640px ) {
292+ .star-card h2 ,
229293 .spotlight-card h2 {
230294 font-size : 1.4rem ;
231295 }
232296
297+ .star-primary ,
298+ .star-secondary ,
233299 .spotlight-primary ,
234300 .spotlight-secondary {
235301 width : 100% ;
0 commit comments