From af75a569d466d604f09be685bab22b626b6aa655 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gerg=C5=91=20Bujdos=C3=B3?= <bujgergo@gmail.com>
Date: Tue, 25 Feb 2025 16:21:17 +0100
Subject: [PATCH 1/4] added gallery to team page

---
 package.json                                |  3 +-
 schemaTypes/teamType.ts                     |  6 +++
 src/app/(with-layout)/teams/[slug]/page.tsx |  5 ++-
 src/components/news/NewsCard.tsx            | 12 +-----
 src/components/next-js-image.tsx            | 41 +++++++++++++++++++++
 src/components/teams/Gallery.tsx            | 35 ++++++++++++++++++
 src/lib/sanity.types.ts                     |  1 +
 yarn.lock                                   |  5 +++
 8 files changed, 96 insertions(+), 12 deletions(-)
 create mode 100644 src/components/next-js-image.tsx
 create mode 100644 src/components/teams/Gallery.tsx

diff --git a/package.json b/package.json
index b1107f8..23f69f3 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,8 @@
     "shadcn-ui": "^0.8.0",
     "styled-components": "6",
     "tailwind-merge": "^2.4.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "yet-another-react-lightbox": "^3.21.7"
   },
   "devDependencies": {
     "@types/node": "^20",
diff --git a/schemaTypes/teamType.ts b/schemaTypes/teamType.ts
index 252b084..59ac44f 100644
--- a/schemaTypes/teamType.ts
+++ b/schemaTypes/teamType.ts
@@ -22,6 +22,12 @@ export const teamType = defineType({
       },
       description: "Ez lesz a csapat oldal URL-je.",
     },
+    {
+      name: "images",
+      title: "Képek",
+      type: "array",
+      of: [{ type: "image" }],
+    },
     {
       name: "color",
       title: "Szín",
diff --git a/src/app/(with-layout)/teams/[slug]/page.tsx b/src/app/(with-layout)/teams/[slug]/page.tsx
index dc776f6..2a9b6ae 100644
--- a/src/app/(with-layout)/teams/[slug]/page.tsx
+++ b/src/app/(with-layout)/teams/[slug]/page.tsx
@@ -7,6 +7,8 @@ import Image from "next/image";
 import { urlForImage } from "@/lib/sanity.image";
 import LinkCard from "@/components/teams/LinkCard";
 import RaceCarousel from "@/components/teams/RaceCarousel";
+import { useState } from "react";
+import Gallery from "@/components/teams/Gallery";
 
 export default async function TeamPage({
   params,
@@ -17,7 +19,8 @@ export default async function TeamPage({
   const team = await getTeam(client, params.slug);
   if (!team) return notFound();
   return (
-    <div className="flex flex-col flex-1">
+    <div className="flex flex-col flex-1 items-center relative">
+      <Gallery team={team}></Gallery>
       <div className="p-4 px-40 flex-1">
         <div className="flex flex-row items-center justify-center gap-4">
           <Image
diff --git a/src/components/news/NewsCard.tsx b/src/components/news/NewsCard.tsx
index 1e06af7..809557b 100644
--- a/src/components/news/NewsCard.tsx
+++ b/src/components/news/NewsCard.tsx
@@ -3,22 +3,14 @@ import Link from "next/link";
 import Image from "next/image";
 import { urlForImage } from "@/lib/sanity.image";
 import { Card } from "../ui/card";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
+import { Dialog, DialogTrigger } from "@/components/ui/dialog";
 import { NewsModal } from "./NewsModal";
 
 export default function NewsCard({ news }: { news: News }) {
   return (
     <Dialog>
       <DialogTrigger>
-        <Card className="relative flex flex-row items-center justify-center bg-white max-w-xl h-[200px] overflow-hidden border-2">
+        <Card className="relative flex flex-row items-center justify-center bg-white max-w-xl lg:h-[200px] h-[300px] overflow-hidden border-2">
           <Image
             src={
               news.thumbnail
diff --git a/src/components/next-js-image.tsx b/src/components/next-js-image.tsx
new file mode 100644
index 0000000..f41195c
--- /dev/null
+++ b/src/components/next-js-image.tsx
@@ -0,0 +1,41 @@
+import Image from 'next/image';
+import {
+  isImageFitCover,
+  isImageSlide,
+  RenderSlideProps,
+  SlideImage,
+  useLightboxProps,
+} from 'yet-another-react-lightbox';
+
+function isNextJsImage(slide: SlideImage) {
+  return isImageSlide(slide) && typeof slide.width === 'number' && typeof slide.height === 'number';
+}
+
+export default function NextJsImage({ slide, rect }: RenderSlideProps<SlideImage>) {
+  const { imageFit } = useLightboxProps().carousel;
+  const cover = isImageSlide(slide) && isImageFitCover(slide, imageFit);
+
+  if (!isNextJsImage(slide)) return undefined;
+
+  const width = !cover
+    ? Math.round(Math.min(rect.width, (rect.height / (slide?.height || 1)) * (slide?.width || 1)))
+    : rect.width;
+
+  const height = !cover
+    ? Math.round(Math.min(rect.height, (rect.width / (slide?.width || 1)) * (slide?.height || 1)))
+    : rect.height;
+
+  return (
+    <div style={{ position: 'relative', width, height }}>
+      <Image
+        fill
+        alt=''
+        src={slide.src}
+        loading='eager'
+        draggable={false}
+        style={{ objectFit: cover ? 'cover' : 'contain' }}
+        sizes={`${Math.ceil((width / window.innerWidth) * 100)}vw`}
+      />
+    </div>
+  );
+}
diff --git a/src/components/teams/Gallery.tsx b/src/components/teams/Gallery.tsx
new file mode 100644
index 0000000..2be2918
--- /dev/null
+++ b/src/components/teams/Gallery.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import "yet-another-react-lightbox/styles.css";
+import "yet-another-react-lightbox/plugins/captions.css";
+
+import { urlForImage } from "@/lib/sanity.image";
+import { Team } from "@/lib/sanity.types";
+import Lightbox from "yet-another-react-lightbox";
+import { useState } from "react";
+import { Images } from "lucide-react";
+import NextJsImage from "../next-js-image";
+import { Button } from "../ui/button";
+export default function Gallery({ team }: { team: Team }) {
+  const [openGallery, setOpenGallery] = useState(false);
+  console.log(team);
+  return (
+    <>
+      <button
+        className="flex flex-col cursor-pointer justify-center items-center gap-4 absolute top-4 z-40 right-4 h-36 aspect-square border rounded-md"
+        onClick={() => setOpenGallery(true)}
+      >
+        <h1 className="text-3xl">Galéria</h1>
+        <Images />
+      </button>
+      <Lightbox
+        open={openGallery}
+        close={() => setOpenGallery(false)}
+        slides={team.images.map((i) => ({
+          src: urlForImage(i)?.url() || "",
+        }))}
+        render={{ slide: NextJsImage }}
+      />
+    </>
+  );
+}
diff --git a/src/lib/sanity.types.ts b/src/lib/sanity.types.ts
index d416624..1e03e16 100644
--- a/src/lib/sanity.types.ts
+++ b/src/lib/sanity.types.ts
@@ -14,6 +14,7 @@ export interface Team {
   logo: ImageAsset;
   Links: LinkType[];
   races: RaceResult[];
+  images: ImageAsset[];
   color: SanityColor;
 }
 export interface News {
diff --git a/yarn.lock b/yarn.lock
index 54f6cd0..87598d4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9122,6 +9122,11 @@ yauzl@^2.4.2:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
+yet-another-react-lightbox@^3.21.7:
+  version "3.21.7"
+  resolved "https://registry.yarnpkg.com/yet-another-react-lightbox/-/yet-another-react-lightbox-3.21.7.tgz#02c625c65ecf2d415304b027291bbd5a5b3f4ba9"
+  integrity sha512-dcdokNuCIl92f0Vl+uzeKULnQhztIGpoZFUMvtVNUPmtwsQWpqWufeieDPeg9JtFyVCcbj4vYw3V00DS0QNoWA==
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"

From e531e2f330e86ccf4bf5ae488e77b56eb199b47b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gerg=C5=91=20Bujdos=C3=B3?= <bujgergo@gmail.com>
Date: Tue, 25 Feb 2025 16:22:08 +0100
Subject: [PATCH 2/4] added gallery to team page

---
 src/components/teams/Gallery.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/teams/Gallery.tsx b/src/components/teams/Gallery.tsx
index 2be2918..f09e329 100644
--- a/src/components/teams/Gallery.tsx
+++ b/src/components/teams/Gallery.tsx
@@ -12,7 +12,7 @@ import NextJsImage from "../next-js-image";
 import { Button } from "../ui/button";
 export default function Gallery({ team }: { team: Team }) {
   const [openGallery, setOpenGallery] = useState(false);
-  console.log(team);
+  if (team.images.length === 0 || !team.images) return null;
   return (
     <>
       <button

From 538e1838b28cd6e9c47c07dc8fcc41e730acca32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gerg=C5=91=20Bujdos=C3=B3?= <bujgergo@gmail.com>
Date: Wed, 26 Feb 2025 15:34:09 +0100
Subject: [PATCH 3/4] updated layout

---
 src/app/(with-layout)/teams/[slug]/page.tsx | 51 ++++++++++++++-------
 src/components/teams/Gallery.tsx            | 17 +++++--
 src/components/teams/LinkCard.tsx           |  2 +-
 src/components/teams/RaceCarousel.tsx       |  2 +-
 yarn.lock                                   | 47 +++++++++++++++++++
 5 files changed, 96 insertions(+), 23 deletions(-)

diff --git a/src/app/(with-layout)/teams/[slug]/page.tsx b/src/app/(with-layout)/teams/[slug]/page.tsx
index 515d04c..11818ca 100644
--- a/src/app/(with-layout)/teams/[slug]/page.tsx
+++ b/src/app/(with-layout)/teams/[slug]/page.tsx
@@ -20,31 +20,48 @@ export default async function TeamPage({
   if (!team) return notFound();
   return (
     <main className="flex flex-col flex-1 items-center relative">
-      <Gallery team={team}></Gallery>
-      <div className="p-4 px-10 lg:px-40 flex-1">
-        <div className="flex flex-row items-center justify-center gap-4">
+      <div className="p-4 px-10 flex flex-row w-full  gap-10 h-full">
+        <div className="flex flex-col gap-4 items-center justify-center w-fit p-8 min-h-[50dvh]">
           <Image
             src={(team.logo ? urlForImage(team.logo)?.url() : "") ?? ""}
             alt={""}
             className="object-cover"
-            height={100}
-            width={100}
+            height={150}
+            width={150}
           />
-          <h1 className="text-3xl font-bold">{team.name}</h1>
+          <h1 className="text-5xl italic text-center w-fit">{team.name}</h1>
+          <div className="flex flex-row flex-wrap justify-center gap-4 py-4 w-full">
+            {team.Links &&
+              team.Links.map((link) => (
+                <LinkCard key={link._key} link={link} color={team.color} />
+              ))}
+          </div>
+          <Gallery team={team}></Gallery>
         </div>
-        <div className="flex flex-row flex-wrap justify-center gap-4 p-4">
-          {team.Links &&
-            team.Links.map((link) => (
-              <LinkCard key={link._key} link={link} color={team.color} />
-            ))}
+        <div className="flex flex-col w-2/3 justify-center">
+          <p className="py-4">
+            A BME Solar Boat Team 2014-ben alakult meg azzal a céllal, hogy
+            megtervezze és megépítse Magyarország első kizárólag napenergiával
+            működő, ember által vezetett, teljesen elektromos hajtással
+            rendelkező versenyhajóját.
+          </p>
+          <p className="py-4">
+            Számunkra nagyon fontos, hogy a hallgatók a környezettudatosság
+            valamint a megújuló energiák ismeretében közel kerülhessenek egy
+            valós mérnöki projekthez, ezáltal nem csak szakmai tapasztalatra
+            tesznek szert, de csapatban is megtanulnak dolgozni. Mindemellett
+            nemzetközi kapcsolatokra is szert téve rengeteg tapasztalattal
+            kerülnek ki az iskolapadból az iparba.
+          </p>
+          <p className="py-4">
+            Az évek során 150-nél is több hallgató fordult meg a csapatnál az
+            egyetem különböző karjairól, mint például a gépészmérnöki,
+            közlekedés és járműmérnöki, villamosmérnöki valamint
+            gazdaságtudományi karról.
+          </p>
+          {team.races && <RaceCarousel races={team.races} />}
         </div>
-
-        <PortableText
-          value={team.description}
-          components={teamDescriptionSerializer}
-        />
       </div>
-      {team.races && <RaceCarousel races={team.races} />}
     </main>
   );
 }
diff --git a/src/components/teams/Gallery.tsx b/src/components/teams/Gallery.tsx
index f09e329..a08a748 100644
--- a/src/components/teams/Gallery.tsx
+++ b/src/components/teams/Gallery.tsx
@@ -10,17 +10,26 @@ import { useState } from "react";
 import { Images } from "lucide-react";
 import NextJsImage from "../next-js-image";
 import { Button } from "../ui/button";
+import Image from "next/image";
 export default function Gallery({ team }: { team: Team }) {
   const [openGallery, setOpenGallery] = useState(false);
-  if (team.images.length === 0 || !team.images) return null;
+  if (!team.images || team.images.length === 0) return null;
   return (
     <>
       <button
-        className="flex flex-col cursor-pointer justify-center items-center gap-4 absolute top-4 z-40 right-4 h-36 aspect-square border rounded-md"
+        className="flex flex-col cursor-pointer justify-center items-center gap-4 float-end rounded-md relative mt-auto"
         onClick={() => setOpenGallery(true)}
       >
-        <h1 className="text-3xl">Galéria</h1>
-        <Images />
+        <Image
+          src={urlForImage(team.images[0])?.url() || ""}
+          alt="Gallery"
+          width={500}
+          height={500}
+          className="rounded-md"
+        />
+        <h3 className="absolute top-2 left-2 bold bg-[#263238] p-4 text-white rounded-md">
+          Galéria
+        </h3>
       </button>
       <Lightbox
         open={openGallery}
diff --git a/src/components/teams/LinkCard.tsx b/src/components/teams/LinkCard.tsx
index 8ef2b67..a2f389d 100644
--- a/src/components/teams/LinkCard.tsx
+++ b/src/components/teams/LinkCard.tsx
@@ -23,7 +23,7 @@ export default function LinkCard({
         <TooltipTrigger>
           <Link href={link.url} target="_blank">
             <Card
-              className="cursor-pointer flex items-center justify-center p-4 text-white"
+              className="cursor-pointer flex items-center justify-center p-4 text-white border-none"
               style={{ backgroundColor: color.hex }}
             >
               {getLinkIcon(link.url)}
diff --git a/src/components/teams/RaceCarousel.tsx b/src/components/teams/RaceCarousel.tsx
index f334149..f15fc61 100644
--- a/src/components/teams/RaceCarousel.tsx
+++ b/src/components/teams/RaceCarousel.tsx
@@ -16,7 +16,7 @@ export default function RaceCarousel({ races }: { races: RaceResult[] }) {
     Autoplay({ delay: 4000, stopOnInteraction: false })
   );
   return (
-    <div className="w-full flex justify-center my-8">
+    <div className="w-full flex justify-center my-8 max-h-40">
       <Carousel className="w-full max-w-md" plugins={[plugin.current]}>
         <CarouselContent>
           {races.map((race) => (
diff --git a/yarn.lock b/yarn.lock
index 4ebdde3..c8a5e79 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1880,6 +1880,17 @@
     "@radix-ui/react-use-callback-ref" "1.1.0"
     "@radix-ui/react-use-escape-keydown" "1.1.0"
 
+"@radix-ui/react-dismissable-layer@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.3.tgz#4ee0f0f82d53bf5bd9db21665799bb0d1bad5ed8"
+  integrity sha512-onrWn/72lQoEucDmJnr8uczSNTujT0vJnA/X5+3AkChVPowr8n1yvIKIabhWyMQeMvvmdpsvcyDqx3X1LEXCPg==
+  dependencies:
+    "@radix-ui/primitive" "1.1.1"
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.1"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-escape-keydown" "1.1.0"
+
 "@radix-ui/react-dismissable-layer@1.1.5":
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz#96dde2be078c694a621e55e047406c58cd5fe774"
@@ -1891,6 +1902,20 @@
     "@radix-ui/react-use-callback-ref" "1.1.0"
     "@radix-ui/react-use-escape-keydown" "1.1.0"
 
+"@radix-ui/react-focus-guards@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz#8635edd346304f8b42cae86b05912b61aef27afe"
+  integrity sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==
+
+"@radix-ui/react-focus-scope@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.1.tgz#5c602115d1db1c4fcfa0fae4c3b09bb8919853cb"
+  integrity sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.1"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
 "@radix-ui/react-id@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.0.tgz#de47339656594ad722eb87f94a6b25f9cffae0ed"
@@ -1934,6 +1959,14 @@
     "@radix-ui/react-use-size" "1.1.0"
     "@radix-ui/rect" "1.1.0"
 
+"@radix-ui/react-portal@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.3.tgz#b0ea5141103a1671b715481b13440763d2ac4440"
+  integrity sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.1"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@radix-ui/react-portal@1.1.4":
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.4.tgz#ff5401ff63c8a825c46eea96d3aef66074b8c0c8"
@@ -1965,6 +1998,13 @@
   dependencies:
     "@radix-ui/react-slot" "1.1.0"
 
+"@radix-ui/react-primitive@2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz#6d9efc550f7520135366f333d1e820cf225fad9e"
+  integrity sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==
+  dependencies:
+    "@radix-ui/react-slot" "1.1.1"
+
 "@radix-ui/react-primitive@2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz#ac8b7854d87b0d7af388d058268d9a7eb64ca8ef"
@@ -1979,6 +2019,13 @@
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.0"
 
+"@radix-ui/react-slot@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.1.tgz#ab9a0ffae4027db7dc2af503c223c978706affc3"
+  integrity sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.1"
+
 "@radix-ui/react-slot@1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.2.tgz#daffff7b2bfe99ade63b5168407680b93c00e1c6"

From a5985905d7bbccaf25c66799f733b56fe73e2597 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gerg=C5=91=20Bujdos=C3=B3?= <bujgergo@gmail.com>
Date: Thu, 27 Feb 2025 16:49:13 +0100
Subject: [PATCH 4/4] added team background

---
 schemaTypes/teamType.ts                     |  6 ++
 src/app/(with-layout)/teams/[slug]/page.tsx | 80 ++++++++++-----------
 src/components/teams/RaceCarousel.tsx       | 14 ++--
 src/components/teams/RaceResultCard.tsx     |  4 +-
 src/lib/sanity.types.ts                     |  1 +
 5 files changed, 56 insertions(+), 49 deletions(-)

diff --git a/schemaTypes/teamType.ts b/schemaTypes/teamType.ts
index 59ac44f..c6a4deb 100644
--- a/schemaTypes/teamType.ts
+++ b/schemaTypes/teamType.ts
@@ -53,6 +53,12 @@ export const teamType = defineType({
         "Ez fog megjelenni a főoldalon, a megfelelő megjelenítés érdekében a 9:16-os képarány ajánlott.",
       validation: (rule) => rule.required(),
     },
+    {
+      name: "background",
+      title: "Háttér",
+      type: "image",
+      description: "Ez fog megjelenni a csapat oldalon háttérként, ha van",
+    },
     {
       name: "description",
       title: "Leírás",
diff --git a/src/app/(with-layout)/teams/[slug]/page.tsx b/src/app/(with-layout)/teams/[slug]/page.tsx
index fc9952b..dc0cebd 100644
--- a/src/app/(with-layout)/teams/[slug]/page.tsx
+++ b/src/app/(with-layout)/teams/[slug]/page.tsx
@@ -19,55 +19,51 @@ export default async function TeamPage({
   const team = await getTeam(client, params.slug);
   if (!team) return notFound();
   return (
-    <main className="flex flex-col flex-1 items-center relative">
+    <main
+      className="flex flex-col flex-1 items-center relative bg-cover"
+      style={
+        team.background && {
+          background: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${urlForImage(team.images[0])?.url()})`,
+          backgroundSize: "cover",
+          color: "white",
+        }
+      }
+    >
       <div className="p-4 px-10 flex flex-row w-full  gap-10 h-full">
-        <div className="flex flex-col gap-4 items-center justify-center w-fit p-8 min-h-[50dvh]">
-          <Image
-            src={(team.logo ? urlForImage(team.logo)?.url() : "") ?? ""}
-            alt={""}
-            className="object-cover"
-            height={150}
-            width={150}
-          />
-          <h1 className="text-5xl italic text-center w-fit">{team.name}</h1>
-          <div className="flex flex-row flex-wrap justify-center gap-4 py-4 w-full">
-            {team.Links &&
-              team.Links.map((link) => (
-                <LinkCard key={link._key} link={link} color={team.color} />
-              ))}
+        <div className="flex flex-col w-fit p-8 min-h-[50dvh]">
+          <div className=" flex-1 flex flex-col items-center justify-center  gap-4">
+            <Image
+              src={(team.logo ? urlForImage(team.logo)?.url() : "") ?? ""}
+              alt={""}
+              className="object-cover"
+              height={150}
+              width={150}
+            />
+            <h1 className="text-5xl italic text-center w-fit">{team.name}</h1>
+            <div className="flex flex-row flex-wrap justify-center gap-4 py-4 w-full">
+              {team.Links &&
+                team.Links.map((link) => (
+                  <LinkCard key={link._key} link={link} color={team.color} />
+                ))}
+            </div>
           </div>
           <Gallery team={team}></Gallery>
         </div>
         <div className="flex flex-col w-2/3 justify-center">
-          <p className="py-4">
-            A BME Solar Boat Team 2014-ben alakult meg azzal a céllal, hogy
-            megtervezze és megépítse Magyarország első kizárólag napenergiával
-            működő, ember által vezetett, teljesen elektromos hajtással
-            rendelkező versenyhajóját.
-          </p>
-          <p className="py-4">
-            Számunkra nagyon fontos, hogy a hallgatók a környezettudatosság
-            valamint a megújuló energiák ismeretében közel kerülhessenek egy
-            valós mérnöki projekthez, ezáltal nem csak szakmai tapasztalatra
-            tesznek szert, de csapatban is megtanulnak dolgozni. Mindemellett
-            nemzetközi kapcsolatokra is szert téve rengeteg tapasztalattal
-            kerülnek ki az iskolapadból az iparba.
-          </p>
-          <p className="py-4">
-            Az évek során 150-nél is több hallgató fordult meg a csapatnál az
-            egyetem különböző karjairól, mint például a gépészmérnöki,
-            közlekedés és járműmérnöki, villamosmérnöki valamint
-            gazdaságtudományi karról.
-          </p>
-          {team.races && <RaceCarousel races={team.races} />}
+          <div className="max-h-[40dvh] overflow-y-scroll">
+            <PortableText
+              value={team.description}
+              components={teamDescriptionSerializer}
+            />
+          </div>
         </div>
+        {team.races && (
+          <div className="p-4 text-center">
+            <h2 className="text-2xl font-bold mb-4">Versenyek</h2>
+            <RaceCarousel races={team.races} />
+          </div>
+        )}
       </div>
-      {team.races && (
-        <div className="p-4 text-center">
-          <h2 className="text-2xl font-bold mb-4">Versenyek</h2>
-          <RaceCarousel races={team.races} />
-        </div>
-      )}
     </main>
   );
 }
diff --git a/src/components/teams/RaceCarousel.tsx b/src/components/teams/RaceCarousel.tsx
index 4c1378f..5be21cb 100644
--- a/src/components/teams/RaceCarousel.tsx
+++ b/src/components/teams/RaceCarousel.tsx
@@ -12,17 +12,21 @@ import React from "react";
 
 export default function RaceCarousel({ races }: { races: RaceResult[] }) {
   return (
-    <div className="w-full flex justify-center my-8 max-h-40">
-      <Carousel className="w-full max-w-md">
+    <div className="w-full flex justify-center mt-8">
+      <Carousel orientation="vertical">
         <CarouselContent>
           {races.map((race) => (
-            <CarouselItem className="basis-1/3" key={race._id}>
+            <CarouselItem key={race._id}>
               <RaceResultCard race={race} />
             </CarouselItem>
           ))}
         </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
+        {races.length > 3 && (
+          <>
+            <CarouselPrevious />
+            <CarouselNext />
+          </>
+        )}
       </Carousel>
     </div>
   );
diff --git a/src/components/teams/RaceResultCard.tsx b/src/components/teams/RaceResultCard.tsx
index 241fa12..b290fb7 100644
--- a/src/components/teams/RaceResultCard.tsx
+++ b/src/components/teams/RaceResultCard.tsx
@@ -17,7 +17,7 @@ export default function RaceResultCard({ race }: { race: RaceResult }) {
   return (
     <Dialog>
       <DialogTrigger>
-        <Card className="relative h-[400px] flex flex-col p-6 gap-2 justify-between">
+        <Card className="relative flex flex-col p-6 gap-2 justify-between">
           <InfoIcon className="absolute top-2 right-2 text-gray-600"></InfoIcon>
           <div className="grid grid-cols-3 grid-rows-1 items-end justify-end">
             <div className="col-span-2 text-start">
@@ -49,7 +49,7 @@ export default function RaceResultCard({ race }: { race: RaceResult }) {
                   : ""
               }
               alt={race.title}
-              className="object-cover h-[250px] w-[230px]"
+              className="object-cover  w-[230px] h-auto"
               height={300}
               width={200}
             />
diff --git a/src/lib/sanity.types.ts b/src/lib/sanity.types.ts
index 1e03e16..4850a38 100644
--- a/src/lib/sanity.types.ts
+++ b/src/lib/sanity.types.ts
@@ -11,6 +11,7 @@ export interface Team {
   slug: Slug;
   thumbnail: ImageAsset;
   description: PortableTextBlock[];
+  background: ImageAsset;
   logo: ImageAsset;
   Links: LinkType[];
   races: RaceResult[];