website/client/pages/index.astro

---
import PageLayout from '../layouts/PageLayout.astro'
---

<PageLayout pageName="homepage">
    <section class="principal">
        <div class="circuit-layer">
            <canvas id="circuits-art"></canvas>
            <script src="../scripts/circuits-art.ts"></script>
        </div>
        <div class="logo">
            <img src="/images/logo-circuit-board.svg" alt="phc logo" />
        </div>
        <div class="whats-phc">
            <div class="title">Cos'è il PHC?</div>
            <div class="content">
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam vero deserunt tempore reprehenderit atque, voluptate
                    dolorum excepturi libero pariatur sequi?
                </p>
                <p>
                    Laboriosam soluta ab a illum mollitia quaerat quia, veniam consequatur expedita dolore autem reiciendis quae rem
                    excepturi optio? Maiores, hic?
                </p>
                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem error atque amet. Tempora earum nemo eveniet
                    aspernatur quam quas, doloribus expedita quisquam dignissimos cupiditate inventore a modi optio harum veritatis,
                    adipisci ab ullam distinctio odio quod delectus ipsum, rerum animi.
                </p>
            </div>
        </div>
    </section>
    <section class="news">
        <div class="zig-zag">
            <svg width="100%" height="2rem" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
                <defs>
                    <pattern id="zig-zag-1" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
                        <path fill="#C2A8EB" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
                    </pattern>
                </defs>
                <rect fill="url(#zig-zag-1)" x="0" y="0" width="1000" height="1"></rect>
            </svg>
        </div>

        <div class="title">Ultime Notizie</div>

        <div class="news-list">
            <div class="news">
                <div class="title">Lorem ipsum dolor sit.</div>
                <div class="abstract">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos,
                        architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi
                        voluptatem pariatur eius!
                    </p>
                    <p>
                        Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta
                        nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
                    </p>
                </div>
            </div>
            <div class="news">
                <div class="title">Tempore provident impedit libero?</div>
                <div class="abstract">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos,
                        architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi
                        voluptatem pariatur eius!
                    </p>
                    <p>
                        Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta
                        nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
                    </p>
                    <p>
                        Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta
                        nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
                    </p>
                    <p>
                        Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta
                        nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
                    </p>
                </div>
            </div>
            <div class="news">
                <div class="title">Alias molestias consectetur quam</div>
                <div class="abstract">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos,
                        architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi
                        voluptatem pariatur eius!
                    </p>
                </div>
            </div>
            <div class="news">
                <div class="title">Inventore dignissimos sapiente nulla</div>
                <div class="abstract">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos,
                        architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi
                        voluptatem pariatur eius!
                    </p>
                    <p>
                        Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta
                        nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
                    </p>
                </div>
            </div>
        </div>

        <a class="primary" href="#" role="button">Vai all'Archivio</a>
    </section>
    <section class="projects">
        <div class="zig-zag">
            <svg width="100%" height="2rem" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
                <defs>
                    <pattern id="zig-zag-2" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
                        <path fill="#f5f2cc" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
                    </pattern>
                </defs>
                <rect fill="url(#zig-zag-2)" x="0" y="0" width="1000" height="1"></rect>
            </svg>
        </div>

        <div class="title">Progetti</div>

        <div class="project-list">
            <a href="#">
                <div class="project">
                    <div class="image">
                        <div class="box"></div>
                    </div>
                    <div class="title">Gitea</div>
                    <div class="description">
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure dolor. Excepturi facere, ipsa
                        accusantium labore explicabo quaerat incidunt.
                    </div>
                </div>
            </a>
            <a href="#">
                <div class="project">
                    <div class="image">
                        <div class="box"></div>
                    </div>
                    <div class="title">Zulip</div>
                    <div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus, veritatis.</div>
                </div>
            </a>
            <a href="#">
                <div class="project">
                    <div class="image">
                        <div class="box"></div>
                    </div>
                    <div class="title">Orario</div>
                    <div class="description">
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure dolor. Excepturi facere, ipsa
                        accusantium labore explicabo quaerat incidunt.
                    </div>
                </div>
            </a>
            <a href="#">
                <div class="project">
                    <div class="image">
                        <div class="box"></div>
                    </div>
                    <div class="title">Problemi</div>
                    <div class="description">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, hic libero beatae voluptatem incidunt.
                    </div>
                </div>
            </a>
            <a href="#">
                <div class="project">
                    <div class="image">
                        <div class="box"></div>
                    </div>
                    <div class="title">Cluster "Steffè"</div>
                    <div class="description">
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure dolor. Excepturi facere, ipsa
                        accusantium labore explicabo quaerat incidunt.
                    </div>
                </div>
            </a>
        </div>
    </section>
    <section class="wanna-be-macchinista">
        <div class="zig-zag">
            <svg width="100%" height="2rem" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
                <defs>
                    <pattern id="zig-zag-3" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
                        <path fill="#888" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
                    </pattern>
                </defs>
                <rect fill="url(#zig-zag-3)" x="0" y="0" width="1000" height="1"></rect>
            </svg>
        </div>

        <div class="title">Vuoi diventare macchinsta?</div>
    </section>
</PageLayout>