about us headshot fotky a popisky, v home pridany our achievements text

cansat/pages/about/index.tsx

@@ -1,14 +1,77 @@
 import { title } from "@/components/primitives";
 import DefaultLayout from "@/layouts/default";
+import {Card, CardBody, CardFooter} from "@heroui/card";
+import {Image} from "@heroui/image"
+import {Divider} from "@heroui/divider"
+import {Tooltip} from "@heroui/tooltip";
+
+const list = [
+    {
+        title: "Šimon",
+        img: "/headshot/simon.jpg",
+        description: "Team Leader, Web Dev"
+
+    },
+    {
+        title: "Tibor",
+        img: "/headshot/tibor.jpg",
+        description: "Structural Engineer, Return Systems "
+    },
+    {
+        title: "Samuel",
+        img: "/headshot/samo.jpg",
+        description: "Electronics, Consulting"
+    },
+    {
+        title: "Adam",
+        img: "/headshot/adam.jpg",
+        description: "Radio Communications"
+    },
+    {
+        title: "Sebastián",
+        img: "/headshot/sebastian.jpg",
+        description: "PR Management"
+    },
+    {
+        title: "Bruno",
+        img: "/headshot/bruno.jpg",
+        description: "Programming Engineer"
+    },
+];
 
 export default function DocsPage() {
-  return (
+
+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()}>About us</h1>
+          <h1 className={title()}>Meet our </h1>
+            <span className={title({color: "blue"})}>Team</span>
         </div>
 
+          <div className="gap-2 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 content={item.description} offset={40} placement="bottom" color="primary">
+                              <Image
+                                  alt={item.title}
+                                  className="w-full object-cover h-[13em]"
+                                  radius="lg"
+                                  shadow="sm"
+                                  src={item.img}
+                                  width="100%"
+                              />
+                          </Tooltip>
+                      </CardBody>
+                      <CardFooter className="text-small justify-center">
+                          <b>{item.title}</b>
+                      </CardFooter>
+                  </Card>
+              ))}
+          </div>
+          <Divider />
 
       </section>
     </DefaultLayout>