projects

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

@@ -28,14 +28,27 @@ export default function HeroData({
 
   return (
     <section className="bg-black flex flex-col items-center relative">
-      {itemArray.map((item) => (
-        <Item key={item.key} title={heroMap[item.key]} item={item} />
+      {itemArray.map((item, i) => (
+        <Item
+          key={item.key}
+          title={heroMap[item.key]}
+          item={item}
+          last={i === 5}
+        />
       ))}
     </section>
   );
 }
 
-const Item = ({ title, item }: { title: string; item: HeroItem }) => {
+const Item = ({
+  title,
+  item,
+  last,
+}: {
+  title: string;
+  item: HeroItem;
+  last: boolean;
+}) => {
   const { height } = useWindow();
 
   const containerRef = useRef(null);
@@ -47,13 +60,13 @@ const Item = ({ title, item }: { title: string; item: HeroItem }) => {
   const yp = 0.7;
   const yoffset = useTransform(
     scrollYProgress,
-    [0.2, 0.8],
-    [-height * yp, height * yp]
+    [0.2, last ? 0.5 : 0.8],
+    [-height * yp, last ? 0 : height * yp]
   );
   const opacity = useTransform(
     scrollYProgress,
     [0.3, 0.4, 0.6, 0.7],
-    [0, 1, 1, 0]
+    [0, 1, 1, last ? 1 : 0]
   );
 
   return (

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

@@ -0,0 +1,73 @@
+"use client";
+
+import { HomeProject, Project } from "@payload-types";
+import { RichText } from "@payloadcms/richtext-lexical/react";
+import { motion, useScroll, useTransform } from "motion/react";
+import { useRef } from "react";
+
+export default function Projects({
+  text,
+  projects,
+}: {
+  text: HomeProject;
+  projects: Project[];
+}) {
+  const containerRef = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start end", "start start"],
+  });
+
+  const bannerHeight = useTransform(scrollYProgress, [0.6, 1], [0, 1]);
+  const headerOpacity = useTransform(scrollYProgress, [0.8, 1], [0, 1]);
+  const textOpacity = useTransform(scrollYProgress, [0.9, 1], [0, 1]);
+
+  return (
+    <section
+      ref={containerRef}
+      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">
+          <motion.div
+            style={{
+              scaleY: bannerHeight,
+              skewY: -6,
+            }}
+            className="absolute h-full w-screen left-1/2 -translate-x-1/2  bg-accent-800 z-0 top-1/2 -translate-y-1/2"
+          ></motion.div>
+          <div className="flex flex-col items-center gap-8 z-10 py-24 px-12 ">
+            <motion.h2
+              style={{ opacity: headerOpacity }}
+              className="text-4xl font-display"
+            >
+              {text.projectsTitle}
+            </motion.h2>
+            <motion.div
+              style={{ opacity: textOpacity }}
+              className="max-w-xl text-xl"
+            >
+              {text.projectsDescription && (
+                <RichText data={text.projectsDescription} className="-mb-6" />
+              )}
+            </motion.div>
+          </div>
+        </div>
+      </div>
+      <div className="w-full max-w-4xl flex flex-col items-center gap-48 relative">
+        {[...projects, ...projects].map((project, i) => (
+          <div
+            key={i}
+            className=" bg-accent-700 w-full px-8 py-12 gap-12 flex flex-col"
+          >
+            <h1 className="text-4xl font-display">{project.title}</h1>
+
+            <div className="line-clamp-6 overflow-ellipsis text-xl">
+              <RichText data={project.content} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

src/app/(website)/page.tsx

@@ -1,25 +1,30 @@
 import { getPayload } from "payload";
 import config from "@payload-config";
-import ScrollingNumbers from "./components/Home/ScrollingNumbers";
-import { letters } from "./components/Home/letters";
 import HeroIntro from "./components/Home/Hero/01-intro";
 import SmoothScroll from "./components/SmoothScroll";
 import HeroData from "./components/Home/Hero/02-data";
 
 import bgImage from "./bg.jpg";
 import Image from "next/image";
-
-const randomNumbers = Array.from({ length: 10 }).map((i) =>
-  Array.from({ length: 20 }).map(
-    (j) => letters[Math.floor(Math.random() * letters.length)]
-  )
-);
+import Projects from "./components/Home/Projects";
+import Link from "next/link";
 
 export default async function Home() {
   const payload = await getPayload({ config });
   const { titleGroup, heroGroup } = await payload.findGlobal({
     slug: "homeHero",
   });
+  const projectsText = await payload.findGlobal({
+    slug: "homeProjects",
+  });
+  const projects = await payload.find({
+    collection: "projects",
+    where: {
+      featured: {
+        equals: true,
+      },
+    },
+  });
 
   return (
     <SmoothScroll snapAt={["section"]}>
@@ -38,6 +43,16 @@ export default async function Home() {
           desc={heroGroup.heroDescription}
         />
         <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>
   );