index.astro

---
import Layout from "../layouts/Layout.astro";
import Image from "astro/components/Image.astro";
import CarrerasButtons from "@components/CarrerasButtons.astro";

const carreras = [
  {
    name: "Ingeniería Civil",
    url: "/posts/civil",
    iconName: "triangular-ruler",
  },
  {
    name: "Ingeniería Electromecánica",
    url: "/posts/electro",
    iconName: "high-voltage",
  },
  {
    name: "Ingeniería Informática",
    url: "/posts/infor",
    iconName: "laptop",
  },
  {
    name: "Cursillo Probatorio de Admisión",
    url: "/posts/cpa",
    iconName: "memo",
  },
  {
    name: "Ingeniería Industrial",
    url: "/posts/indu",
    iconName: "factory",
  },
  {
    name: "Curso Básico de Ingeniería",
    url: "/posts/cbi",
    iconName: "bar-chart",
  }
];

const carrerasButtons = carreras.map((carrera) => ({
  ...carrera
}));
---

<Layout title="Bienvenido a Ideal">
  <div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]"></div>
  <main class="container mx-auto px-4 md:px-10 xl:px-32 py-12 flex flex-col gap-y-20">
    <div class="flex flex-col md:flex-row items-center justify-between">
      <div class="md:w-1/2 mb-8 md:mb-0">
        <h1 class="text-5xl md:4xl  xl:4xl font-extrabold mb-4">
          Tu plataforma de aprendizaje ideal
        </h1>
        <p class="text-xl text-gray-600 mb-6">
          Notas de clases, exámenes y recursos gratuitos. Impulsado por la
          comunidad de alumnos de la FIUNI.
        </p>
        <!-- <a href="/acerca-de" class="text-blue-600 hover:underline">
          Aprende más sobre nuestra misión.
        </a> -->
      </div>
      <div class="md:w-1/2">
        <div class="w-full h-96">
          <Image
            class="sm:mt-8"
            src="/ReadingDoodle.svg"
            alt="Estudiante leyendo"
            width="400"
            height="400"
          />
        </div>
      </div>
    </div>

    <section class="">
      <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-4">
        {carrerasButtons.map((carrera) => (
          <CarrerasButtons {...carrera} />
        ))}
      </div>
    </section>
  </main>
</Layout>