adlerka.space/cansat/pages/about/index.tsx

import { Card, CardBody, CardFooter, CardHeader } from "@heroui/card";
import { Image } from "@heroui/image";
import { Divider } from "@heroui/divider";
import { Tooltip } from "@heroui/tooltip";
import { Accordion, AccordionItem } from "@heroui/accordion";

import DefaultLayout from "@/layouts/default";
import { title } from "@/components/primitives";

const list = [
  {
    title: "Šimon",
    img: "/headshot/simon.webp",
    description: "Web Dev",
  },
  {
    title: "Tibor",
    img: "/headshot/tibor.webp",
    description: "Structural Engineer, Return Systems ",
  },
  {
    title: "Samuel",
    img: "/headshot/samo.webp",
    description: "Team Leader, Electronics",
  },
  {
    title: "Adam",
    img: "/headshot/adam.webp",
    description: "Radio Communications",
  },
  {
    title: "Sebastián",
    img: "/headshot/sebastian.webp",
    description: "PR Management",
  },
  {
    title: "Bruno",
    img: "/headshot/bruno.webp",
    description: "Programming Engineer",
  },
];

export default function DocsPage() {
  const defaultContent =
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";

  return (
    <DefaultLayout>
      <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
        <div className="inline-block max-w-lg text-center justify-center">
          <h1 className={title()}>Meet our </h1>
          <span className={title({ color: "blue" })}>Team</span>
        </div>

        <div className="gap-5 grid grid-cols-2 sm:grid-cols-3">
          {list.map((item, index) => (
            /* eslint-disable no-console */
            <Card
              key={index}
              isPressable
              shadow="sm"
              onPress={() => console.log("item pressed")}
            >
              <CardBody className="overflow-visible p-0">
                <Tooltip
                  color="primary"
                  content={item.description}
                  offset={40}
                  placement="bottom"
                >
                  <Image
                    alt={item.title}
                    className="w-full object-cover h-[13em]"
                    radius="lg"
                    shadow="md"
                    src={item.img}
                    width="100%"
                  />
                </Tooltip>
              </CardBody>
              <CardFooter className="text-small justify-center">
                <b>{item.title}</b>
              </CardFooter>
            </Card>
          ))}
        </div>
        <Divider />
        <div className="p-10">
          <span className={title()}>About </span>
          <span className={title({ color: "blue" })}>US</span>
        </div>
        <div className="w-full md:w-3/4 mx-auto">
          <Card>
            <CardHeader className="text-xl">Who are we?</CardHeader>
            <Divider />
            <CardBody>
              <p className="pb-2">
                We are a team of high school electrical engineering students,
                aged 17 to 19, proudly representing Slovakia in the 2025 edition
                of the CanSat project. With a genuine passion for science and
                technology, we are excited to embark on our second project in
                the field of space exploration.
                <br />
                <br />
                Our first project focused on designing a simple and easily
                deployable way to monitor forest fires. During the construction
                of our first ever satellite, we gained a lot of hands on
                experience with sensors, thermal cameras, 3d printing and
                structural engineering.
                <br />
                <br />
                With our first ever satellite we managed to{" "}
                <strong>
                  win the National CanSat competition in Slovakia placing 1st.
                </strong>
              </p>
            </CardBody>
          </Card>
        </div>
        <div className="pt-10 gap-5 grid grid-cols-1 sm:grid-cols-3 md:w-3/4">
          <Tooltip
            color="danger"
            content="Detected Fire on a Map"
            offset={5}
            placement="bottom"
          >
            <Image
              alt="Detected Fire on a Map"
              src="/aboutphoto/map_fire.png"
            />
          </Tooltip>

          <Tooltip
            color="secondary"
            content="Early CanSat Concept"
            offset={5}
            placement="bottom"
          >
            <Image
              alt="Early CanSat Concept"
              src="/aboutphoto/thermal_map_concept.png"
            />
          </Tooltip>

          <Tooltip
            color="danger"
            content="Semi-Final Design"
            offset={5}
            placement="bottom"
          >
            <Image
              alt="Early CanSat Concept"
              src="/aboutphoto/design_concept.png"
            />
          </Tooltip>
        </div>
        <Divider />
        <div className="p-10">
          <span className={title({ color: "blue" })}>FAQ</span>
        </div>
        <div className="w-full md:w-3/4 mx-auto">
          <Accordion className="max-w-15" variant="shadow">
            <AccordionItem
              key="1"
              aria-label="FAQ Page 1"
              title="What is CanSat?"
            >
              {defaultContent}
            </AccordionItem>
            <AccordionItem
              key="2"
              aria-label="FAQ Page 2"
              title="How will your CanSat identify fires?"
            >
              {defaultContent}
            </AccordionItem>
            <AccordionItem
              key="3"
              aria-label="FAQ Page 3"
              title="What other capabilities does your CanSat have?"
            >
              {defaultContent}
            </AccordionItem>
            <AccordionItem
              key="4"
              aria-label="FAQ Page 4"
              title="What is the significance of your mission?"
            >
              {defaultContent}
            </AccordionItem>
            <AccordionItem
              key="5"
              aria-label="FAQ Page 5"
              title="What challenges do you anticipate?"
            >
              {defaultContent}
            </AccordionItem>
            <AccordionItem
              key="6"
              aria-label="FAQ Page 6"
              title="How can I stay updated on your progress?"
            >
              {defaultContent}
            </AccordionItem>
            <AccordionItem
              key="7"
              aria-label="FAQ Page 7"
              title="Can we support your team in any way?"
            >
              {defaultContent}
            </AccordionItem>
          </Accordion>
        </div>
      </section>
    </DefaultLayout>
  );
}