build fixes

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

@@ -27,9 +27,14 @@ export default function Page() {
           </div>
           <div className="p-4 space-y-2">
             {BUTTON_VARIANTS.map((variant) => (
-              <div className="grid grid-cols-5 gap-4">
+              <div className="grid grid-cols-5 gap-4" key={variant}>
                 {BUTTON_TYPES.map((type) => (
-                  <Button type={type} variant={variant} className="capitalize">
+                  <Button
+                    key={type}
+                    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,13 +4,14 @@ 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: any;
+  desc: HomeHero["heroGroup"]["heroDescription"];
 }) {
   const containerRef = useRef(null);
   const { scrollYProgress } = useScroll({
@@ -23,7 +24,7 @@ export default function HeroIntro({
 
   const [windowSize, setWindowSize] = useState<[number, number]>();
   useEffect(() => {
-    window.addEventListener("resize", (e) => {
+    window.addEventListener("resize", () => {
       setWindowSize([window.innerWidth, window.innerHeight]);
     });
     setWindowSize([window.innerWidth, window.innerHeight]);
@@ -48,7 +49,7 @@ export default function HeroIntro({
     const drawArea = d3
       .area()
       .x((p) => xScale(p[0]))
-      .y0((p) => 0)
+      .y0(() => 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: (keyof typeof items)[] = Object.keys(items) as any;
+  const itemKeys = Object.keys(items) as (keyof typeof items)[];
   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-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 gap-12 z-10 items-center text-white"
     >
       <motion.div
         style={{ opacity }}

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 ({
+export default function SmoothScroll({
   children,
-  snapAt,
+  // snapAt,
 }: {
   children: ReactNode;
-  snapAt?: string[];
+  // snapAt?: string[];
 }) {
   useEffect(() => {
     const lenis = new Lenis();

src/app/(website)/page.tsx

@@ -27,13 +27,16 @@ export default async function Home() {
   });
 
   return (
-    <SmoothScroll snapAt={["section"]}>
+    <SmoothScroll>
       <div className="text-white">
-        <div className="absolute h-full mt-[var(--header-height)] w-full opacity-50">
-          <Image src={bgImage} alt="Bg image" objectFit="cover" />
+        <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>
         <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>