1<style>
2  :root {
3    --shadow-color: rgb(from var(--body-color) r g b / calc(alpha * 0.2));
4    --shadow-style: 0 12px 6px -6px var(--shadow-color);
5  }
6
7  h1 {
8    display: none;
9  }
10
11  .admonition.welcome {
12      background: transparent;
13      border-left: 2px solid var(--navbar-scrollbar-active-color);
14      padding: 0 0 0 1rem;
15      overflow: visible;
16
17      .admonition-title {
18        color: var(--body-color);
19        background: transparent !important;
20        padding: 0;
21        margin: 0 0 0.25rem 0;
22        font-weight: 700;
23        font-size: 18px;
24        opacity: 1;
25
26        &::before {
27          display: none;
28        }
29      }
30
31      p {
32        color: var(--body-color);
33        font-size: 0.9rem;
34        line-height: 1.2em;
35      }
36  }
37
38  .landing-container {
39    max-width: 1200px;
40    margin: 0 auto;
41    padding-top: 0.5rem;
42  }
43  .landing-grid {
44    display: grid;
45    grid-template-columns: 1fr;
46    gap: 1rem;
47    margin-bottom: 2.5rem;
48    @media (min-width: 768px) {
49      grid-template-columns: repeat(2, 1fr);
50    }
51    &.three-col {
52      @media (min-width: 1024px) {
53        grid-template-columns: repeat(3, 1fr);
54      }
55    }
56  }
57
58  /* === SHARED CARD STYLES === */
59  .card-title {
60    font-size: 1.125rem;
61    font-weight: bold;
62    color: var(--body-color);
63    margin-bottom: 0.25rem !important;
64  }
65  .card-description {
66    color: var(--body-color);
67    font-weight: 300;
68    font-size: 0.9rem !important;
69    margin: 0 !important;
70    opacity: 0.85;
71  }
72  .icon-wrapper i {
73    color: inherit;
74  }
75
76  /* === LANDING CARDS === */
77  .landing-card {
78    background-color: var(--landing-card-background-color);
79    border-radius: 0.75rem;
80    padding: 1.5rem 2rem;
81    display: flex;
82    align-items: center;
83    gap: 1.25rem;
84    text-decoration: none;
85    position: relative;
86    overflow: hidden;
87    transition: all 0.15s ease 0.15s ease;
88    &:hover {
89      transform: translateY(-3px);
90      box-shadow: var(--shadow-style);
91      text-decoration: none;
92      .landing-watermark {
93        transform: translateY(-50%) rotate(-8deg) scale(1.1);
94        opacity: 0.25;
95      }
96    }
97    .card-content {
98      flex: 1;
99      position: relative;
100      z-index: 2;
101    }
102    .card-description {
103      padding-right: 5rem;
104    }
105  }
106  .landing-watermark {
107    position: absolute;
108    right: 1.5rem;
109    top: 50%;
110    transform: translateY(-50%);
111    transform-origin: center center;
112    opacity: 0.12;
113    pointer-events: none;
114    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
115    color: var(--link-color);
116    i {
117      font-size: 5rem !important;
118      line-height: 1;
119    }
120  }
121
122  /* === PERSONA CARDS === */
123  .persona-card {
124    background-color: var(--landing-card-background-color);
125    border-radius: 0.75rem;
126    padding: 1.5rem 2rem;
127    position: relative;
128    overflow: hidden;
129    z-index: 1;
130    border: 1px solid transparent;
131    display: flex;
132    flex-direction: column;
133    height: 100%;
134    transition: all 0.2s ease;
135    &:hover {
136      transform: translateY(-4px);
137      box-shadow: var(--shadow-style);
138      border-color: rgba(255, 255, 255, 0.05);
139      .watermark {
140        transform: rotate(-10deg) scale(1.1);
141        opacity: 0.15;
142      }
143    }
144    .persona-link:hover {
145      font-weight: 500;
146    }
147    .card-content {
148      position: relative;
149      z-index: 2;
150      flex: 1;
151    }
152    @media (max-width: 768px) {
153      .watermark {
154        bottom:1rem;
155        right: 1rem;
156
157        i {
158          font-size: 7rem !important;
159        }
160      }
161    }
162  }
163  .persona-header {
164    margin-bottom: 1.5rem;
165    h3 {
166      min-height: 3rem;
167      font-size: 1.25rem;
168      margin-top: 0;
169      margin-bottom: 0.5rem;
170    }
171    @media (max-width: 768px) {
172      z-index: 10;
173    }
174  }
175
176  /* Watermark */
177  .watermark {
178    position: absolute;
179    bottom: -1rem;
180    right: -1.5rem;
181    z-index: 0;
182    opacity: 0.05;
183    transform: rotate(0deg);
184    pointer-events: none;
185    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
186    i {
187      font-size: 9rem !important;
188      line-height: 1;
189    }
190    @media (max-width: 768px) {
191      bottom: -0.5rem;
192      right: -0.5rem;
193      opacity: 0.15;
194      i {
195        font-size: 6rem !important;
196      }
197    }
198  }
199
200  /* Persona Type Colors */
201  .type-app {
202    .watermark i {
203      color: #0ea5e9;
204    }
205    .persona-link {
206      i {
207        color: #0ea5e9;
208      }
209      &:hover {
210        color: #38bdf8 !important;
211      }
212    }
213  }
214  .type-hw {
215    .watermark i {
216      color: #8b5cf6;
217    }
218    .persona-link {
219      i {
220        color: #8b5cf6;
221      }
222      &:hover {
223        color: #a78bfa !important;
224      }
225    }
226  }
227  .type-maker {
228    .watermark i {
229      color: #10b981;
230    }
231    .persona-link {
232      i {
233        color: #10b981;
234      }
235      &:hover {
236        color: #34d399 !important;
237      }
238    }
239  }
240
241  /* Persona Links */
242  .persona-list {
243    margin: 0 !important;
244    list-style: none;
245    padding: 0;
246    position: relative;
247    z-index: 2;
248    li {
249      list-style: none !important;
250      margin-left: 0 !important;
251      * {
252        margin-bottom: 0.1rem !important;
253      }
254    }
255  }
256  .persona-link {
257    display: flex;
258    align-items: center;
259    color: var(--body-color) !important;
260    font-size: 0.9rem;
261    text-decoration: none;
262    transition: color 0.2s;
263    i {
264      font-size: 0.75rem;
265      margin-right: 0.6rem;
266    }
267    &:hover {
268      text-decoration: none;
269    }
270  }
271
272  /* === CONTRIBUTE CARD === */
273  .contribute-card {
274    background-color: var(--landing-card-background-color);
275    border-radius: 0.5rem;
276    padding: 2rem;
277    display: flex;
278    align-items: center;
279    gap: 2rem;
280    text-decoration: none;
281    border: 1px solid transparent;
282    transition: all 0.1s ease;
283    &:hover {
284      transform: translateY(-2px);
285      box-shadow: var(--shadow-style);
286      text-decoration: none;
287      .cta-text {
288        color: var(--body-color);
289      }
290    }
291    @media (max-width: 768px) {
292      flex-direction: column;
293      text-align: center;
294      gap: 1rem;
295    }
296  }
297  .accent-contribute {
298    background-color: rgba(219, 39, 119, 0.15);
299    color: #f472b6;
300    width: 5rem;
301    height: 5rem;
302    border-radius: 0.75rem;
303    display: flex;
304    align-items: center;
305    justify-content: center;
306    flex-shrink: 0;
307  }
308  .cta-text {
309    color: var(--body-color);
310    font-weight: bold;
311    display: flex;
312    align-items: center;
313    gap: 0.5rem;
314    margin-left: auto;
315    padding-left: 1rem;
316    white-space: nowrap;
317    @media (max-width: 768px) {
318      margin-left: 0;
319      padding-left: 0;
320    }
321  }
322
323  /* === REFERENCE CARDS === */
324  .reference-card {
325    background-color: var(--landing-card-background-color);
326    border-radius: 0.5rem;
327    padding: 1rem;
328    display: flex;
329    align-items: center;
330    gap: 1rem;
331    text-decoration: none;
332    transition: transform 0.1s ease;
333    &:hover {
334      transform: translateY(-2px);
335      box-shadow: var(--shadow-style);
336      text-decoration: none;
337      .reference-arrow {
338        opacity: 1;
339        transform: translateX(4px);
340      }
341    }
342    .icon-wrapper {
343      width: 2.5rem;
344      height: 2.5rem;
345      flex-shrink: 0;
346      border-radius: 0.4rem;
347      display: flex;
348      align-items: center;
349      justify-content: center;
350    }
351    .card-title {
352      font-size: 1rem;
353      margin: 0;
354    }
355    .card-description {
356      font-weight: 100;
357    }
358  }
359  .reference-content {
360    flex: 1;
361  }
362  .reference-arrow {
363    flex-shrink: 0;
364    opacity: 0.5;
365    transition: all 0.2s ease;
366  }
367
368  /* === SECTION HEADERS === */
369  .section-header {
370    text-align: center;
371    margin-bottom: 2rem;
372  }
373  .section-title {
374    font-size: 1.75rem;
375    font-weight: bold;
376    margin-bottom: 0.5rem !important;
377  }
378  .section-subtitle {
379    opacity: 0.75;
380    margin-top: 0.5rem;
381    font-size: 0.95rem;
382  }
383
384  /* === COLOR ACCENTS === */
385  .ref-api {
386    background-color: rgba(59, 130, 246, 0.2);
387    color: #60a5fa;
388  }
389  .ref-kconfig {
390    background-color: rgba(34, 197, 94, 0.2);
391    color: #4ade80;
392  }
393  .ref-dts {
394    background-color: rgba(168, 85, 247, 0.2);
395    color: #c084fc;
396  }
397  .ref-west {
398    background-color: rgba(239, 68, 68, 0.2);
399    color: #f87171;
400  }
401  .ref-glossary {
402    background-color: rgba(249, 115, 22, 0.2);
403    color: #fb923c;
404  }
405</style>
406
407<main class="landing-container">
408  <section>
409    <div class="landing-grid">
410      <a href="introduction/index.html" class="landing-card">
411        <div class="landing-watermark">
412          <i class="fa fa-info-circle" aria-hidden="true"></i>
413        </div>
414        <div class="card-content">
415          <h3 class="card-title">What is Zephyr?</h3>
416          <p class="card-description">Discover the core concepts, features, and architecture.</p>
417        </div>
418      </a>
419
420      <a href="develop/getting_started/index.html" class="landing-card">
421        <div class="landing-watermark">
422          <i class="fa fa-lightbulb-o" aria-hidden="true" style="font-size: 5.5rem !important;"></i>
423        </div>
424        <div class="card-content">
425          <h3 class="card-title">Getting Started</h3>
426          <p class="card-description">
427            A step-by-step guide to set up your environment & blink your first LED.
428          </p>
429        </div>
430      </a>
431
432      <a href="boards/index.html" class="landing-card">
433        <div class="landing-watermark">
434          <i class="fa fa-microchip" aria-hidden="true"></i>
435        </div>
436        <div class="card-content">
437          <h3 class="card-title">Supported Boards</h3>
438          <p class="card-description">Browse 1,000+ supported boards and shields.</p>
439        </div>
440      </a>
441
442      <a href="samples/index.html" class="landing-card">
443        <div class="landing-watermark">
444          <i class="fa fa-cogs" aria-hidden="true"></i>
445        </div>
446        <div class="card-content">
447          <h3 class="card-title">Code Samples</h3>
448          <p class="card-description">Explore hundreds of ready-to-run examples.</p>
449        </div>
450      </a>
451    </div>
452  </section>
453
454  <section style="margin-top: 3rem">
455    <div class="section-header">
456      <h2 class="section-title">Choose Your Starting Point</h2>
457      <p class="section-subtitle">
458        Find documentation tailored to what you're trying to accomplish.
459      </p>
460    </div>
461
462    <div class="landing-grid three-col">
463      <div class="persona-card type-app">
464        <div class="watermark">
465          <i class="fa fa-laptop" aria-hidden="true"></i>
466        </div>
467        <div class="card-content">
468          <div class="persona-header">
469            <h3 class="card-title">Building an Application</h3>
470            <p class="card-description">Use Zephyr APIs and services in your firmware.</p>
471          </div>
472          <ul class="persona-list">
473            <li>
474              <a href="kernel/services/" class="persona-link"><i class="fa fa-chevron-right"
475                  aria-hidden="true"></i><span>RTOS Kernel</span></a>
476            </li>
477            <li>
478              <a href="services/" class="persona-link"><i class="fa fa-chevron-right"
479                  aria-hidden="true"></i><span>Services</span></a>
480            </li>
481            <li>
482              <a href="develop/application/" class="persona-link"><i class="fa fa-chevron-right"
483                  aria-hidden="true"></i><span>Application development</span></a>
484            </li>
485            <li>
486              <a href="samples/" class="persona-link"><i class="fa fa-chevron-right"
487                  aria-hidden="true"></i><span>Code samples</span></a>
488            </li>
489          </ul>
490        </div>
491      </div>
492
493      <div class="persona-card type-hw">
494        <div class="watermark">
495          <i class="fa fa-microchip" aria-hidden="true"></i>
496        </div>
497        <div class="card-content">
498          <div class="persona-header">
499            <h3 class="card-title">Bringing Up New Hardware</h3>
500            <p class="card-description">Port and run Zephyr on hardware.</p>
501          </div>
502          <ul class="persona-list">
503            <li>
504              <a href="kernel/drivers/index.html" class="persona-link"><i class="fa fa-chevron-right"
505                aria-hidden="true"></i><span>Device Driver Model</span></a>
506            </li>
507            <li>
508                <a href="build/dts/index.html" class="persona-link"><i class="fa fa-chevron-right"
509                  aria-hidden="true"></i><span>Devicetree</span></a>
510            </li>
511            <li>
512              <a href="hardware/porting/board_porting.html" class="persona-link"><i
513                 class="fa fa-chevron-right" aria-hidden="true"></i>
514                <span>Board Porting Guide</span>
515              </a>
516            </li>
517            <li>
518              <a href="hardware/porting/soc_porting.html" class="persona-link"><i class="fa fa-chevron-right"
519                 aria-hidden="true"></i>
520                <span>SoC Porting Guide</span>
521              </a>
522            </li>
523          </ul>
524        </div>
525      </div>
526
527      <div class="persona-card type-maker">
528        <div class="watermark">
529          <i class="fa fa-cube" aria-hidden="true"></i>
530        </div>
531        <div class="card-content">
532          <div class="persona-header">
533            <h3 class="card-title">Going to Production</h3>
534            <p class="card-description">Considerations for using Zephyr in your product.</p>
535          </div>
536          <ul class="persona-list">
537            <li>
538              <a href="security/" class="persona-link">
539                <i class="fa fa-chevron-right" aria-hidden="true"></i><span>Security</span></a>
540            </li>
541            <li>
542              <a href="safety/" class="persona-link">
543                <i class="fa fa-chevron-right" aria-hidden="true"></i><span>Safety</span></a>
544            </li>
545            <li>
546              <a href="project/release_process.html#long-term-support-lts" class="persona-link">
547                <i class="fa fa-chevron-right" aria-hidden="true"></i>
548                <span>Long-term Support</span>
549              </a>
550            </li>
551            <li>
552              <a href="https://www.zephyrproject.org/products-running-zephyr/" class="persona-link"
553                 target="_blank">
554                <i class="fa fa-chevron-right" aria-hidden="true"></i>
555                <span>Product Showcase</span>
556              </a>
557            </li>
558          </ul>
559        </div>
560      </div>
561    </div>
562  </section>
563
564  <section style="margin-top: 1rem; margin-bottom: 3rem">
565    <a href="contribute/index.html" class="contribute-card">
566      <div class="accent-contribute">
567        <i class="fa fa-github" style="font-size: 3rem" aria-hidden="true"></i>
568      </div>
569      <div class="card-content">
570        <h2 class="card-title" style="font-size: 1.5rem; margin-bottom: 0.5rem">
571          Contribute to Zephyr
572        </h2>
573        <p class="card-description" style="font-size: 1rem; margin: 0">
574          The Zephyr Project is open source and community-driven.<br>
575          Learn how to report bugs, request new features, and submit pull requests.
576        </p>
577      </div>
578      <div class="cta-text">
579        <span>Read the Guidelines</span>
580        <i class="fa fa-arrow-right" aria-hidden="true"></i>
581      </div>
582    </a>
583  </section>
584
585  <section>
586    <div class="section-header">
587      <h2 class="section-title">Core References</h2>
588      <p class="section-subtitle">Essential resources for in-depth information</p>
589    </div>
590
591    <div class="landing-grid three-col">
592      <a href="doxygen/html/" class="reference-card">
593        <div class="icon-wrapper ref-api">
594          <i class="fa fa-book" aria-hidden="true" style="font-size: 1.25rem"></i>
595        </div>
596        <div class="reference-content">
597          <h3 class="card-title">API Reference</h3>
598          <p class="card-description">Complete C API docs</p>
599        </div>
600        <i class="fa fa-arrow-right reference-arrow" style="color: #60a5fa"></i>
601      </a>
602
603      <a href="kconfig.html" class="reference-card">
604        <div class="icon-wrapper ref-kconfig">
605          <i class="fa fa-sliders" aria-hidden="true" style="font-size: 1.25rem"></i>
606        </div>
607        <div class="reference-content">
608          <h3 class="card-title">Kconfig</h3>
609          <p class="card-description">Configuration system</p>
610        </div>
611        <i class="fa fa-arrow-right reference-arrow" style="color: #4ade80"></i>
612      </a>
613
614      <a href="build/dts/api/bindings.html" class="reference-card">
615        <div class="icon-wrapper ref-dts">
616          <i class="fa fa-sitemap" aria-hidden="true" style="font-size: 1.25rem"></i>
617        </div>
618        <div class="reference-content">
619          <h3 class="card-title">Devicetree</h3>
620          <p class="card-description">Hardware bindings</p>
621        </div>
622        <i class="fa fa-arrow-right reference-arrow" style="color: #c084fc"></i>
623      </a>
624
625      <a href="develop/manifest/" class="reference-card">
626        <div class="icon-wrapper ref-west">
627          <i class="fa fa-code-fork" aria-hidden="true" style="font-size: 1.25rem"></i>
628        </div>
629        <div class="reference-content">
630          <h3 class="card-title">West Projects</h3>
631          <p class="card-description">Available projects</p>
632        </div>
633        <i class="fa fa-arrow-right reference-arrow" style="color: #f87171"></i>
634      </a>
635
636      <a href="glossary.html" class="reference-card">
637        <div class="icon-wrapper ref-glossary">
638          <i class="fa fa-font" aria-hidden="true" style="font-size: 1.25rem"></i>
639        </div>
640        <div class="reference-content">
641          <h3 class="card-title">Glossary</h3>
642          <p class="card-description">Key term definitions</p>
643        </div>
644        <i class="fa fa-arrow-right reference-arrow" style="color: #fb923c"></i>
645      </a>
646    </div>
647  </section>
648</main>
649