website/src/pages/projects.astro

---
import Layout from "../layouts/Layout.astro";
import Navbar from "../components/widgets/Navbar.astro";
import Container from "../components/atoms/Container.astro";

const projects = [
    {
        name: "HyX",
        link: "https://www.google.com/",
        desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, quaerat.",
    },
];
---

<Layout>
    <Navbar />
    <h1 class="text-white text-5xl w-full text-center py-32 font-extrabold">
        Projects
    </h1>

    <Container>
        <main class="flex gap-12 flex-wrap justify-center">
            {
                projects.map((project) => (
                    <section class="flex flex-col md:w-96 w-80 min-h-max border-[1px] border-neutral-800 bg-gray p-6 rounded-md">
                        <h2 class="text-3xl font-bold text-white mb-4 break-all">
                            {project.name}
                        </h2>
                        <p class="text-neutral-300 mb-6 break-all">
                            {project.desc}
                        </p>
                        <div>
                            <a
                                href={project.link}
                                class="inline-flex  bottom-0 w-fit py-2 px-6 text-neutral-300 bg-neutral-800 rounded-md hover:bg-neutral-700 transition-colors duration-100 [&_img]:hover:translate-x-[2px] [&_img]:transition-all"
                            >
                                GitHub{" "}
                                <img
                                    src="/icons/arrow-up-right.svg"
                                    class="ml-2 w-5 mt-[1px] "
                                    alt=""
                                />
                            </a>
                            <a
                                href={project.link}
                                class=" translate-y-[6px] inline-flex  bottom-0 w-fit py-2 px-6 text-neutral-300 transition-all duration-100 hover:text-neutral-200 hover:-translate-y-[-4px]"
                            >
                                <img
                                    src="/icons/book-open.svg"
                                    class="w-5 mr-2 "
                                    alt=""
                                />
                                Docs{" "}
                            </a>
                        </div>
                    </section>
                ))
            }
        </main>
    </Container>
</Layout>