adlerka.space/cansat/pages/index.tsx

import { Link } from "@heroui/link";
import { Snippet } from "@heroui/snippet";
import { Code } from "@heroui/code";
import { button as buttonStyles } from "@heroui/theme";

import { siteConfig } from "@/config/site";
import { title, subtitle } from "@/components/primitives";
import { GithubIcon } from "@/components/icons";
import DefaultLayout from "@/layouts/default";
import {Card, CardHeader, CardBody, CardFooter} from "@heroui/card";
import {Divider} from "@heroui/divider";
import {Image} from "@heroui/image";


export default function IndexPage() {
  return (
    <DefaultLayout>
      <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
        <div className="inline-block max-w-xl text-center justify-center ">
          <span className={title()}>
            Adlerka Space Program
          </span>
        </div>

        <div className="flex flex-col md:flex-row gap-4 pt-4">
        <Card className="">
          <CardHeader className="flex gap-3">
            <Image
                alt="heroui logo"
                height={80}
                radius="sm"
                src='/coloradl.svg'
                width={80}
            />
            <div className="flex flex-col">
              <p className="text-xl">Who are we?</p>
              <p className="text-small text-default-500">adlerka.sk</p>
            </div>
          </CardHeader>
          <Divider />
          <CardBody className="text-xl">
            <p>We are a team of talented and ambitious high school students from Adlerka electrical engineering school, representing Slovakia in the European Space Agency’s CanSat project.</p>
          </CardBody>
          <Divider />
          <CardFooter>
            <Link isExternal showAnchorIcon href="/about" target="_self">
              Learn more About Us.
            </Link>
          </CardFooter>
        </Card>

        <Card className="">
          <CardHeader className="flex gap-3">
            <Image
                alt="heroui logo"
                height={80}
                radius="sm"
                src="/canasthehe.svg"
                width={80}
            />
            <div className="flex flex-col">
              <p className="text-xl">About CanSat</p>
              <p className="text-small text-default-500">spaceoffice.sk/cansat</p>
            </div>
          </CardHeader>
          <Divider />
          <CardBody className="text-xl">
            <p>The CanSat project is an educational endeavor that combines the fields of aerospace engineering and technology. It involves designing and building a small satellite, no larger than a soda can, which is then launched into the atmosphere to collect data and perform various tasks.</p>
          </CardBody>
          <Divider />
          <CardFooter>
            <Link isExternal showAnchorIcon href="https://cansat.esa.int/about-cansat/cansat-project/" target="_self">
              Learn more about CanSat.
            </Link>
          </CardFooter>
        </Card>
        </div>

        <div className="flex flex-col md:flex-row gap-4">
          <Card className="">
            <CardHeader className="flex gap-3">
              <Image
                  alt="heroui logo"
                  height={80}
                  radius="sm"
                  src="/trophy.png"
                  width={80}
              />
              <div className="flex flex-col">
                <p className="text-xl">Our Achievements</p>
                <p className="text-small text-default-500">1st place in Cansat Slovakia 2024</p>
              </div>
            </CardHeader>
            <Divider />
            <CardBody className="text-xl">
              <p>Cupiditate eius eius et rerum velit. Sequi ipsam et ut explicabo cumque molestiae minima. Veritatis aperiam fuga cum sint perspiciatis eveniet blanditiis eum.

                Fugit non provident non. Eum soluta dolores ut. Ipsa dolorum eos dolorem a. Qui repellendus vitae rerum omnis totam facilis ducimus assumenda.</p>
            </CardBody>
            <Divider />
            <CardFooter>
              <Link showAnchorIcon href="/sponsor" target="_self">
                  Sponsor our next Achievement
              </Link>
            </CardFooter>
          </Card>

          <Card className="">
            <CardHeader className="absolute z-10 top-1 flex-col !items-start">
              <p className="text-tiny text-white/60 uppercase font-bold">What We Do</p>
            </CardHeader>
            <Image
                removeWrapper
                alt="Card background"
                className="z-0 w-full h-full object-cover"
                src="/whatwedo.png"
            />
          </Card>
        </div>
      </section>
    </DefaultLayout>
  );
}