payload-types.ts

@@ -159,7 +159,6 @@ export interface Project {
    * Show this project on the homepage.
    */
   featured?: boolean | null;
-  banner?: (number | null) | Image;
   links?:
     | {
         link: string;
@@ -174,6 +173,36 @@ 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".
@@ -220,36 +249,6 @@ 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".
@@ -390,7 +389,6 @@ export interface ProjectsSelect<T extends boolean = true> {
   slug?: T;
   content?: T;
   featured?: T;
-  banner?: T;
   links?:
     | T
     | {

src/app/(website)/brand/page.tsx

@@ -27,14 +27,9 @@ export default function Page() {
           </div>
           <div className="p-4 space-y-2">
             {BUTTON_VARIANTS.map((variant) => (
-              <div className="grid grid-cols-5 gap-4" key={variant}>
+              <div className="grid grid-cols-5 gap-4">
                 {BUTTON_TYPES.map((type) => (
-                  <Button
-                    key={type}
-                    type={type}
-                    variant={variant}
-                    className="capitalize"
-                  >
+                  <Button type={type} variant={variant} className="capitalize">
                     {type} button
                   </Button>
                 ))}

src/app/(website)/components/Button/index.tsx

@@ -13,7 +13,7 @@ export default function Button({
   className?: string;
   // [x: string]:
 }) {
-  // const btnVariant = variant ?? "filled";
+  const btnVariant = variant ?? "filled";
   return (
     <button
       className={cn(

src/app/(website)/components/Header/index.tsx

@@ -1,12 +1,12 @@
 import { getPayload } from "payload";
 import config from "@payload-config";
 import Link from "next/link";
-// import Image from "next/image";
-// import { Image as PImage } from "@payload-types";
+import Image from "next/image";
+import { Image as PImage } from "@payload-types";
 
-// const isValidLogo = (image: number | PImage): image is PImage => {
-//   return typeof image !== "number";
-// };
+const isValidLogo = (image: number | PImage): image is PImage => {
+  return typeof image !== "number";
+};
 
 export default async function Header() {
   const payload = await getPayload({ config });

src/app/(website)/components/Home/Hero/01-intro.tsx

@@ -4,14 +4,13 @@ import { RichText } from "@payloadcms/richtext-lexical/react";
 import { motion, useScroll, useTransform } from "motion/react";
 import { useRef, useEffect, useState, useCallback } from "react";
 import * as d3 from "d3";
-import { HomeHero } from "@payload-types";
 
 export default function HeroIntro({
   title,
   desc,
 }: {
   title: string;
-  desc: HomeHero["heroGroup"]["heroDescription"];
+  desc: any;
 }) {
   const containerRef = useRef(null);
   const { scrollYProgress } = useScroll({
@@ -24,7 +23,7 @@ export default function HeroIntro({
 
   const [windowSize, setWindowSize] = useState<[number, number]>();
   useEffect(() => {
-    window.addEventListener("resize", () => {
+    window.addEventListener("resize", (e) => {
       setWindowSize([window.innerWidth, window.innerHeight]);
     });
     setWindowSize([window.innerWidth, window.innerHeight]);
@@ -49,7 +48,7 @@ export default function HeroIntro({
     const drawArea = d3
       .area()
       .x((p) => xScale(p[0]))
-      .y0(() => 0)
+      .y0((p) => 0)
       .y1((p) => yScale(p[1]));
     return drawArea(beam);
   }, [windowSize, beamSize]);

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

@@ -23,7 +23,7 @@ export default function HeroData({
 }: {
   items: HomeHero["heroGroup"]["heroItems"];
 }) {
-  const itemKeys = Object.keys(items) as (keyof typeof items)[];
+  const itemKeys: (keyof typeof items)[] = Object.keys(items) as any;
   const itemArray = itemKeys.map((k) => ({ key: k, ...items[k] }));
 
   return (
@@ -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 lg:grid-rows-1 gap-12 z-10 items-center text-white"
+      className="w-full h-screen max-w-6xl p-12 grid grid-cols-2 gap-12 z-10 items-center text-white"
     >
       <motion.div
         style={{ opacity }}

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

@@ -1,13 +1,9 @@
 "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 Image from "next/image";
-import Link from "next/link";
-import { useRef, useState } from "react";
-import PayloadImage from "../../PayloadImage";
+import { useRef } from "react";
 
 export default function Projects({
   text,
@@ -26,14 +22,10 @@ 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 lg:pb-48"
+      className="bg-black flex flex-col items-center justify-center 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">
@@ -62,84 +54,20 @@ export default function Projects({
           </div>
         </div>
       </div>
-      <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">
+      <div className="w-full max-w-4xl flex flex-col items-center gap-48 relative">
         {[...projects, ...projects].map((project, i) => (
-          <motion.div
+          <div
             key={i}
-            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)}
+            className=" bg-accent-700 w-full px-8 py-12 gap-12 flex flex-col"
           >
-            {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>
+            <h1 className="text-4xl font-display">{project.title}</h1>
 
-                  <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>
-              </motion.div>
-            )}
-          </motion.div>
+            <div className="line-clamp-6 overflow-ellipsis text-xl">
+              <RichText data={project.content} />
+            </div>
+          </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

@@ -1,28 +0,0 @@
-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)/components/SmoothScroll.tsx

@@ -2,14 +2,14 @@
 
 import { ReactNode, useEffect } from "react";
 import Lenis from "lenis";
-// import Snap from "lenis/snap";
+import Snap from "lenis/snap";
 
-export default function SmoothScroll({
+export default function ({
   children,
-  // snapAt,
+  snapAt,
 }: {
   children: ReactNode;
-  // snapAt?: string[];
+  snapAt?: string[];
 }) {
   useEffect(() => {
     const lenis = new Lenis();

src/app/(website)/globals.css

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

src/app/(website)/page.tsx

@@ -7,6 +7,7 @@ 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 });
@@ -26,16 +27,13 @@ export default async function Home() {
   });
 
   return (
-    <SmoothScroll>
+    <SmoothScroll snapAt={["section"]}>
       <div className="text-white">
-        <div className="absolute h-full mt-[var(--header-height)] w-full opacity-50 ">
-          <Image
-            src={bgImage}
-            alt="Bg image"
-            className="h-full w-full object-cover"
-          />
+        <div className="absolute h-full mt-[var(--header-height)] w-full opacity-50">
+          <Image src={bgImage} alt="Bg image" objectFit="cover" />
         </div>
         <div className="h-screen pt-[var(--header-height)] flex flex-col items-center justify-end text-white pb-[10vh] relative">
+          {/* <ScrollingNumbers numbers={randomNumbers} /> */}
           <h1 className="text-4xl p-8 lg:text-7xl leading-tight max-w-6xl z-10 font-display">
             {titleGroup.title}
           </h1>
@@ -46,6 +44,15 @@ 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,86 +2,83 @@ import { formatSlug } from "@/lib/slugs";
 import { CollectionConfig } from "payload";
 
 export const Projects: CollectionConfig = {
-  slug: "projects",
-  fields: [
-    {
-      name: "title",
-      label: "Title",
-      type: "text",
-      required: true,
-    },
-    {
-      name: "slug",
-      label: "Slug",
-      type: "text",
-      required: true,
-      unique: true,
-      admin: {
-        position: "sidebar",
-        description: "The slug is used to identify the news item in the URL.",
-        // readOnly: true,
-      },
-      hooks: {
-        beforeValidate: [formatSlug("title")],
-      },
-    },
-    {
-      name: "content",
-      label: "Content",
-      type: "richText",
-      required: true,
-    },
-    // list of files
-    // gallery
-    // keywords
-    // is featured?
-    {
-      name: "featured",
-      label: "Featured",
-      type: "checkbox",
-      defaultValue: false,
-      admin: {
-        position: "sidebar",
-        description: "Show this project on the homepage.",
-      },
-    },
-    {
-      name: "banner",
-      label: "Banner",
-      type: "upload",
-      relationTo: "images",
-    },
-    // links
-    {
-      name: "links",
-      label: "Links",
-      type: "array",
-      fields: [
+    slug: 'projects',
+    fields: [
         {
-          name: "link",
-          label: "Link",
-          type: "text",
-          required: true,
+            name: 'title',
+            label: 'Title',
+            type: 'text',
+            required: true,
         },
         {
-          name: "description",
-          label: "Description",
-          type: "text",
-          required: false,
+            name: 'slug',
+            label: 'Slug',
+            type: 'text',
+            required: true,
+            unique: true,
+            admin: {
+                position: 'sidebar',
+                description: 'The slug is used to identify the news item in the URL.',
+                // readOnly: true,
+            },
+            hooks: {
+                beforeValidate: [
+                    formatSlug('title'),
+                ]
+            }
         },
         {
-          name: "group",
-          label: "Group",
-          type: "text",
-          required: false,
-          admin: {
-            description: "Optional: organise link under this heading",
-          },
+            name: 'content',
+            label: 'Content',
+            type: 'richText',
+            required: true,
         },
-      ],
-      admin: {
-        position: "sidebar",
-      },
-    },
-  ],
-};
+        // list of files
+        // gallery
+        // keywords
+        // is featured?
+        {
+            name: 'featured',
+            label: 'Featured',
+            type: 'checkbox',
+            defaultValue: false,
+            admin: {
+                position: 'sidebar',
+                description: 'Show this project on the homepage.',
+            }
+        },
+        // links
+        {
+            name: 'links',
+            label: 'Links',
+            type: 'array',
+            fields: [
+                {
+                    name: 'link',
+                    label: 'Link',
+                    type: 'text',
+                    required: true,
+                },
+                {
+                    name: 'description',
+                    label: 'Description',
+                    type: 'text',
+                    required: false,
+                },
+                {
+                    name: 'group',
+                    label: 'Group',
+                    type: 'text',
+                    required: false,
+                    admin: {
+                        description: 'Optional: organise link under this heading',
+                    },
+                }
+            ],
+            admin: {
+                position: 'sidebar',
+
+            }
+        },
+    ]
+}

src/collections/media/Images.ts

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

src/globals/Home/Projects.ts

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