images on projects

payload-types.ts

@@ -159,6 +159,7 @@ export interface Project {
    * Show this project on the homepage.
    */
   featured?: boolean | null;
+  banner?: (number | null) | Image;
   links?:
     | {
         link: string;
@@ -173,36 +174,6 @@ export interface Project {
   updatedAt: string;
   createdAt: string;
 }
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "news".
- */
-export interface News {
-  id: number;
-  title: string;
-  /**
-   * The slug is used to identify the news item in the URL.
-   */
-  slug: string;
-  content: {
-    root: {
-      type: string;
-      children: {
-        type: string;
-        version: number;
-        [k: string]: unknown;
-      }[];
-      direction: ('ltr' | 'rtl') | null;
-      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
-      indent: number;
-      version: number;
-    };
-    [k: string]: unknown;
-  };
-  updatedAt: string;
-  createdAt: string;
-  _status?: ('draft' | 'published') | null;
-}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "images".
@@ -249,6 +220,36 @@ export interface Image {
     };
   };
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "news".
+ */
+export interface News {
+  id: number;
+  title: string;
+  /**
+   * The slug is used to identify the news item in the URL.
+   */
+  slug: string;
+  content: {
+    root: {
+      type: string;
+      children: {
+        type: string;
+        version: number;
+        [k: string]: unknown;
+      }[];
+      direction: ('ltr' | 'rtl') | null;
+      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
+      indent: number;
+      version: number;
+    };
+    [k: string]: unknown;
+  };
+  updatedAt: string;
+  createdAt: string;
+  _status?: ('draft' | 'published') | null;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "documents".
@@ -389,6 +390,7 @@ export interface ProjectsSelect<T extends boolean = true> {
   slug?: T;
   content?: T;
   featured?: T;
+  banner?: T;
   links?:
     | T
     | {

src/app/(website)/components/Home/Hero/02-data.tsx

@@ -72,7 +72,7 @@ const Item = ({
   return (
     <div
       ref={containerRef}
-      className="w-full h-screen max-w-6xl p-12 grid grid-rows-2 lg:grid-cols-2 gap-12 z-10 items-center text-white"
+      className="w-full h-screen max-w-6xl p-12 grid grid-rows-2 lg:grid-cols-2 lg:grid-rows-1 gap-12 z-10 items-center text-white"
     >
       <motion.div
         style={{ opacity }}

src/app/(website)/components/Home/Projects/index.tsx

@@ -1,9 +1,13 @@
 "use client";
 
+import useWindow from "@/app/(website)/hooks/useWindow";
 import { HomeProject, Project } from "@payload-types";
 import { RichText } from "@payloadcms/richtext-lexical/react";
 import { motion, useScroll, useTransform } from "motion/react";
-import { useRef } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { useRef, useState } from "react";
+import PayloadImage from "../../PayloadImage";
 
 export default function Projects({
   text,
@@ -22,10 +26,14 @@ export default function Projects({
   const headerOpacity = useTransform(scrollYProgress, [0.8, 1], [0, 1]);
   const textOpacity = useTransform(scrollYProgress, [0.9, 1], [0, 1]);
 
+  const [active, setActive] = useState(1);
+  const { width } = useWindow();
+  const largeScreen = width >= 1024;
+
   return (
     <section
       ref={containerRef}
-      className="bg-black flex flex-col items-center justify-center pb-48"
+      className="bg-black flex flex-col items-center justify-center lg:pb-48"
     >
       <div className="flex flex-col items-center justify-center h-screen relative">
         <div className="max-w-6xl w-full flex flex-col justify-center relative z-10">
@@ -54,20 +62,84 @@ export default function Projects({
           </div>
         </div>
       </div>
-      <div className="w-full max-w-4xl flex flex-col items-center gap-48 relative">
+      <div className="w-full px-12 flex flex-col lg:items-stretch gap-12 relative pb-12 lg:flex-row py-12 lg:h-screen">
         {[...projects, ...projects].map((project, i) => (
-          <div
+          <motion.div
             key={i}
-            className=" bg-accent-700 w-full px-8 py-12 gap-12 flex flex-col"
+            className="w-full lg:w-auto bg-white text-black gap-8 lg:gap-8 flex flex-col lg:cursor-pointer relative"
+            animate={{
+              flex: largeScreen && active === i ? 5 : 1,
+            }}
+            onClick={() => setActive(i)}
           >
-            <h1 className="text-4xl font-display">{project.title}</h1>
+            {project.banner && typeof project.banner !== "number" && (
+              <motion.div
+                className="absolute h-full w-full"
+                animate={
+                  {
+                    // opacity: largeScreen ? (active === i ? 0.5 : 1) : 0.3,
+                  }
+                }
+              >
+                <PayloadImage
+                  img={project.banner}
+                  className="h-full w-full object-cover z-0"
+                />
+              </motion.div>
+            )}
+            {(!largeScreen || active === i) && (
+              <motion.div
+                style={{
+                  opacity: 0,
+                  y: -10,
+                }}
+                animate={{
+                  opacity: 1,
+                  y: 0,
+                }}
+                transition={{
+                  delay: 0.3,
+                  duration: 1,
+                }}
+                className="p-8 lg:p-12 z-10"
+              >
+                <div className="p-2 lg:p-4 flex flex-col gap-6 lg:gap-12 bg-white/50 backdrop-blur-lg shadow-lg rounded">
+                  <h1 className="text-2xl lg:text-4xl font-display">
+                    {project.title}
+                  </h1>
 
-            <div className="line-clamp-6 overflow-ellipsis text-xl">
+                  <motion.div
+                    style={{
+                      opacity: 0,
+                      y: 30,
+                    }}
+                    animate={{
+                      opacity: 1,
+                      y: 0,
+                    }}
+                    transition={{
+                      delay: 0.6,
+                      duration: 0.5,
+                    }}
+                    className="line-clamp-6 overflow-ellipsis text-lg lg:text-2xl"
+                  >
                     <RichText data={project.content} />
+                  </motion.div>
                 </div>
-          </div>
+              </motion.div>
+            )}
+          </motion.div>
         ))}
       </div>
+
+      <div className="w-full flex flex-col items-center justify-center pb-48">
+        <div className=" h-1/2 bg-white text-accent-600 w-full flex flex-col items-center justify-center gap-8 py-24">
+          <h4 className="text-4xl font-display">Have a project idea?</h4>
+          <Link href="">
+            <p className="text-xl font-bold">Get in touch &gt;</p>
+          </Link>
+        </div>
+      </div>
     </section>
   );
 }

src/app/(website)/components/PayloadImage.tsx

@@ -0,0 +1,28 @@
+import type { Image as PImage } from "@payload-types";
+import Image from "next/image";
+
+export default function PayloadImage({
+  img,
+  className,
+}: {
+  img: PImage;
+  className: string;
+}) {
+  const url = img.url;
+  const width = img.width;
+  const height = img.height;
+
+  if (!url || !width || !height) return <></>;
+
+  console.log("URL: ", url);
+
+  return (
+    <Image
+      src={img.url ?? ""}
+      alt={img.alt ?? ""}
+      className={className}
+      width={width}
+      height={height}
+    />
+  );
+}

src/app/(website)/globals.css

@@ -35,3 +35,7 @@
   /* Other vars */
   --header-height: 100px;
 }
+
+.payload-richtext p {
+  @apply mb-2;
+}

src/app/(website)/page.tsx

@@ -7,7 +7,6 @@ import HeroData from "./components/Home/Hero/02-data";
 import bgImage from "./bg.jpg";
 import Image from "next/image";
 import Projects from "./components/Home/Projects";
-import Link from "next/link";
 
 export default async function Home() {
   const payload = await getPayload({ config });
@@ -47,15 +46,6 @@ export default async function Home() {
         />
         <HeroData items={heroGroup.heroItems} />
         <Projects text={projectsText} projects={projects.docs} />
-
-        <div className="flex flex-col items-center justify-center pb-48">
-          <div className="max-w-4xl h-1/2 bg-white text-accent-600 w-full flex flex-col items-center justify-center gap-8 py-24">
-            <h4 className="text-4xl font-display">Have a project idea?</h4>
-            <Link href="">
-              <p className="text-xl font-bold">Get in touch &gt;</p>
-            </Link>
-          </div>
-        </div>
       </div>
     </SmoothScroll>
   );

src/collections/Projects.ts

@@ -2,35 +2,33 @@ import { formatSlug } from "@/lib/slugs";
 import { CollectionConfig } from "payload";
 
 export const Projects: CollectionConfig = {
-    slug: 'projects',
+  slug: "projects",
   fields: [
     {
-            name: 'title',
+      name: "title",
-            label: 'Title',
+      label: "Title",
-            type: 'text',
+      type: "text",
       required: true,
     },
     {
-            name: 'slug',
+      name: "slug",
-            label: 'Slug',
+      label: "Slug",
-            type: 'text',
+      type: "text",
       required: true,
       unique: true,
       admin: {
-                position: 'sidebar',
+        position: "sidebar",
-                description: 'The slug is used to identify the news item in the URL.',
+        description: "The slug is used to identify the news item in the URL.",
         // readOnly: true,
       },
       hooks: {
-                beforeValidate: [
+        beforeValidate: [formatSlug("title")],
-                    formatSlug('title'),
+      },
-                ]
-            }
     },
     {
-            name: 'content',
+      name: "content",
-            label: 'Content',
+      label: "Content",
-            type: 'richText',
+      type: "richText",
       required: true,
     },
     // list of files
@@ -38,47 +36,52 @@ export const Projects: CollectionConfig = {
     // keywords
     // is featured?
     {
-            name: 'featured',
+      name: "featured",
-            label: 'Featured',
+      label: "Featured",
-            type: 'checkbox',
+      type: "checkbox",
       defaultValue: false,
       admin: {
-                position: 'sidebar',
+        position: "sidebar",
-                description: 'Show this project on the homepage.',
+        description: "Show this project on the homepage.",
-            }
+      },
+    },
+    {
+      name: "banner",
+      label: "Banner",
+      type: "upload",
+      relationTo: "images",
     },
     // links
     {
-            name: 'links',
+      name: "links",
-            label: 'Links',
+      label: "Links",
-            type: 'array',
+      type: "array",
       fields: [
         {
-                    name: 'link',
+          name: "link",
-                    label: 'Link',
+          label: "Link",
-                    type: 'text',
+          type: "text",
           required: true,
         },
         {
-                    name: 'description',
+          name: "description",
-                    label: 'Description',
+          label: "Description",
-                    type: 'text',
+          type: "text",
           required: false,
         },
         {
-                    name: 'group',
+          name: "group",
-                    label: 'Group',
+          label: "Group",
-                    type: 'text',
+          type: "text",
           required: false,
           admin: {
-                        description: 'Optional: organise link under this heading',
+            description: "Optional: organise link under this heading",
+          },
         },
-                }
       ],
       admin: {
-                position: 'sidebar',
+        position: "sidebar",
-
-            }
       },
-    ]
+    },
-}
+  ],
+};

src/collections/media/Images.ts

@@ -1,45 +1,49 @@
 import type { CollectionConfig } from "payload";
 
 export const Images: CollectionConfig = {
-    slug: 'images',
+  slug: "images",
+  access: {
+    // TODO: fix this
+    read: () => true,
+  },
   upload: {
-        staticDir: 'media/images',
+    staticDir: "media/images",
     imageSizes: [
       {
-                name: 'thumbnail',
+        name: "thumbnail",
         width: 400,
         height: 300,
-                position: 'centre',
+        position: "centre",
       },
       {
-                name: 'card',
+        name: "card",
         width: 768,
         height: 1024,
-                position: 'centre',
+        position: "centre",
       },
       {
-                name: 'tablet',
+        name: "tablet",
         width: 1024,
         height: undefined,
-                position: 'centre',
+        position: "centre",
-            }
+      },
     ],
-        adminThumbnail: 'thumbnail',
+    adminThumbnail: "thumbnail",
-        mimeTypes: ['image/*'],
+    mimeTypes: ["image/*"],
   },
   fields: [
     {
-            name: 'alt',
+      name: "alt",
-            label: 'Alt Text',
+      label: "Alt Text",
-            type: 'text',
+      type: "text",
     },
     {
-            name: 'description',
+      name: "description",
-            label: 'Description',
+      label: "Description",
-            type: 'textarea',
+      type: "textarea",
-        }
+    },
   ],
   admin: {
-        group: 'Media',
+    group: "Media",
-    }
+  },
-}
+};

src/globals/Home/Projects.ts

@@ -1,22 +1,22 @@
 import { GlobalConfig } from "payload";
 
 export const HomeProjects: GlobalConfig = {
-    slug: 'homeProjects',
+  slug: "homeProjects",
-    label: 'Projects',
+  label: "Projects",
   fields: [
     {
-            name: 'projectsTitle',
+      name: "projectsTitle",
-            label: 'Projects Title',
+      label: "Projects Title",
-            type: 'text',
+      type: "text",
-            defaultValue: 'We do data differently'
+      defaultValue: "We do data differently",
     },
     {
-            name: 'projectsDescription',
+      name: "projectsDescription",
-            label: 'Projects Description',
+      label: "Projects Description",
-            type: 'richText'
+      type: "richText",
-        }
+    },
   ],
   admin: {
-        group: 'Home page'
+    group: "Home page",
-    }
+  },
 };