Feat/add team section

.nvmrc

@@ -1 +1 @@
-v16.15.0
+v18

@types/generated/contentful.d.ts

@@ -59,6 +59,9 @@ export interface IBlogPreviewFields {
 
   /** Title and header */
   titleAndHeader: Document;
+
+  /** Label for button */
+  buttonText?: string | undefined;
 }
 
 /** Block to display a blog preview */
@@ -310,6 +313,9 @@ export interface IContributorFields {
   /** Nachname */
   lastname?: string | undefined;
 
+  /** Position */
+  position?: string | undefined;
+
   /** Webseite */
   url?: string | undefined;
 
@@ -627,6 +633,7 @@ export interface IPageFields {
     | ITwoImages
     | ITrackingGa
     | IBlogPreview
+    | ITeamSection
   )[];
 
   /** seo */
@@ -739,6 +746,36 @@ export interface ITag extends Entry<ITagFields> {
   };
 }
 
+export interface ITeamSectionFields {
+  /** Title */
+  title: string;
+
+  /** Team members */
+  teamMembers: IContributor[];
+
+  /** Description */
+  description: string;
+}
+
+/** Team section – shows parts or all of the team members. You need to add everyone if you want to show the whole team here. */
+
+export interface ITeamSection extends Entry<ITeamSectionFields> {
+  sys: {
+    id: string;
+    type: string;
+    createdAt: string;
+    updatedAt: string;
+    locale: string;
+    contentType: {
+      sys: {
+        id: "teamSection";
+        linkType: "ContentType";
+        type: "Link";
+      };
+    };
+  };
+}
+
 export interface ITrackingGaFields {
   /** Title */
   title: string;
@@ -861,6 +898,7 @@ export type CONTENT_TYPE =
   | "seo"
   | "supporter"
   | "tag"
+  | "teamSection"
   | "trackingGa"
   | "twoImages"
   | "videoPlayer";
@@ -888,6 +926,7 @@ export type IEntry =
   | ISeo
   | ISupporter
   | ITag
+  | ITeamSection
   | ITrackingGa
   | ITwoImages
   | IVideoPlayer;

app/components/BasicErrorBoundary.tsx

@@ -1,6 +1,7 @@
 import { isRouteErrorResponse, useRouteError } from "@remix-run/react";
 
 export default function BasicErrorBoundary() {
+  // @ts-expect-error
   let error: { status: number; statusText: string } = useRouteError();
   let status = isRouteErrorResponse(error) ? error.status : 500;
   let statusText = isRouteErrorResponse(error)

app/components/CleverLink.tsx

@@ -1,8 +1,8 @@
 import { Link } from "@remix-run/react";
-import type { RemixLinkProps } from "@remix-run/react/components";
+import { type LinkProps } from "@remix-run/react";
 import type { ReactNode } from "react";
 
-interface CleverLinkProps extends RemixLinkProps {
+interface CleverLinkProps extends LinkProps {
   to: string;
   children: ReactNode;
   className?: string;
@@ -31,7 +31,11 @@ export default function CleverLink({
   if (isInternalLink) {
     const usedLink = to.replace("https://www.virtualsupporttalks.de", "");
     return (
-      <Link className={className} to={usedLink} prefetch={prefetch}>
+      <Link
+        className={`text-vsp-500 hover:text-vsp-700 underline ${className}`}
+        to={usedLink}
+        prefetch={prefetch}
+      >
         {children}
       </Link>
     );
@@ -40,7 +44,7 @@ export default function CleverLink({
     <a
       href={to}
       target="_blank"
-      className={className}
+      className={`text-vsp-500 hover:text-vsp-700 underline ${className}`}
       rel="noopener noreferrer"
     >
       {children}

app/components/ContentBlocks.tsx

@@ -7,6 +7,7 @@ import type {
   IHeaderBlockFields,
   IImageCollectionFields,
   IPageFields,
+  ITeamSectionFields,
   ITrackingGaFields,
   ITwoImagesFields,
   IVideoPlayerFields,
@@ -19,6 +20,7 @@ import ContentBlockFullSizeImageBg from "./ContentBlocks/FullSizeImageBg";
 import GenericContent from "./ContentBlocks/GenericContent";
 import ContentBlockHeader from "./ContentBlocks/Header";
 import ContentBlockImageBg from "./ContentBlocks/ImageBg";
+import ContentBlockTeamSection from "./ContentBlocks/TeamSection";
 import TrackingGa from "./ContentBlocks/TrackingGA";
 import ContentBlockTwoImages from "./ContentBlocks/TwoImages";
 import VideoPlayer from "./ContentBlocks/VideoPlayer";
@@ -167,12 +169,27 @@ export default function ContentBlocks({ content, locale }: ContentBlockProps) {
           return <TrackingGa key={item.sys.id} title={title} />;
         }
 
+        if (id === "teamSection") {
+          const { title, teamMembers, description } =
+            item.fields as ITeamSectionFields;
+          return (
+            <ContentBlockTeamSection
+              key={item.sys.id}
+              title={title}
+              description={description}
+              teamMembers={teamMembers}
+            />
+          );
+        }
+
         if (id === "coachList") {
           return null;
         } else {
           const { content } = item.fields as IGenericContentFields;
 
-          return <GenericContent key={item.sys.id} content={content} />;
+          return content ? (
+            <GenericContent key={item.sys.id} content={content} />
+          ) : null;
         }
       })}
     </div>

app/components/ContentBlocks/TeamSection.tsx

@@ -0,0 +1,52 @@
+import { type ITeamSectionFields } from "../../../@types/generated/contentful";
+import CleverLink from "../CleverLink";
+import ContentfulRichText from "../ContentfulRichText";
+
+export default function ContentBlockTeamSection({
+  title,
+  description,
+  teamMembers,
+}: ITeamSectionFields) {
+  const sanitizedTeamMembers = teamMembers.filter((member) => !!member.fields);
+  return (
+    <div className="bg-white py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl sm:text-center">
+          <h2 className="text-3xl font-bold text-slate-900 sm:text-4xl">
+            {title}
+          </h2>
+          <p className="mt-6 text-lg leading-8 text-slate-600">{description}</p>
+        </div>
+        <ul className="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-20 sm:grid-cols-2 lg:max-w-4xl lg:gap-x-8 xl:max-w-none">
+          {sanitizedTeamMembers.map((person) => (
+            <li key={person.sys.id} className="flex flex-col gap-6 xl:flex-row">
+              <img
+                className="aspect-square w-full lg:aspect-[4/5] lg:w-52 flex-none rounded-2xl object-cover"
+                src={person.fields.image.fields.file.url}
+                alt=""
+              />
+              <div className="flex-auto">
+                <div className="mb-2">
+                  <h3 className="text-2xl font-semibold text-slate-900">
+                    {person.fields.firstname} {person.fields.lastname}
+                  </h3>
+                  {person.fields.position && (
+                    <p className="text-base leading-7 text-slate-600">
+                      {person.fields.position}
+                    </p>
+                  )}
+                </div>
+                <ContentfulRichText content={person.fields.content} />
+                {person.fields.url && (
+                  <p>
+                    <CleverLink to={person.fields.url}>Website</CleverLink>
+                  </p>
+                )}
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

app/utils/contentful.ts

@@ -50,9 +50,7 @@ export const getPageById = async (id: string, locale: LOCALE_CODE) => {
   return entry as IPage;
 };
 
-export const getMainNav = async (
-  locale: LOCALE_CODE,
-): Promise<INavigation | null> => {
+export const getMainNav = async (locale: LOCALE_CODE) => {
   const client = createContentfulClient();
   const entry: Entry<INavigation> = await client.getEntry(
     "67EXX84GGCZfZayO0JxrFg",