fix: resolve typescript errors

Author: ladunjexa

components/atoms/button.tsx

@@ -12,7 +12,7 @@ type Props = {
   white?: boolean;
 };
 
-const Button = ({ className, href, children, onClick, px = "px-7", white = false }: Props) => {
+const Button = ({ className, href = "", children, onClick, px = "px-7", white = false }: Props) => {
   const buttonClasses = cn(
     `button relative inline-flex items-center justify-center h-11`,
     `transition-colors hover:text-color-1`,
@@ -37,7 +37,7 @@ const Button = ({ className, href, children, onClick, px = "px-7", white = false
     </Link>
   );
 
-  return href ? renderLink() : renderButton();
+  return href !== "" ? renderLink() : renderButton();
 };
 
 export default Button;

components/design/hero.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { MouseParallax } from "react-just-parallax";
 
 import PlusSvg from "@/components/svg/plus-svg";
@@ -37,7 +37,11 @@ const Rings = () => {
   );
 };
 
-export const BackgroundCircles = ({ parallaxRef }) => {
+export const BackgroundCircles = ({
+  parallaxRef,
+}: {
+  parallaxRef: React.MutableRefObject<HTMLDivElement | null>;
+}) => {
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {

components/design/roadmap.tsx

@@ -1,10 +1,10 @@
-import { gradient } from "@/public/assets/index";
+import { images } from "@/constants";
 
 export const Gradient = () => {
   return (
     <div className="pointer-events-none absolute -left-[30.375rem] top-[18.25rem] w-[56.625rem] opacity-60 mix-blend-color-dodge">
       <div className="absolute left-1/2 top-1/2 size-[58.85rem] -translate-x-3/4 -translate-y-1/2">
-        <img className="w-full" src={gradient} width={942} height={942} alt="Gradient" />
+        <img className="w-full" src={images.gradient} width={942} height={942} alt="Gradient" />
       </div>
     </div>
   );

components/svg/brackets.tsx

@@ -1,12 +1,6 @@
-const brackets = (position) =>
+const brackets = (position: "left" | "right") =>
   position === "left" ? (
-    <svg
-      width="5"
-      height="14"
-      viewBox="0 0 5 14"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg width="5" height="14" viewBox="0 0 5 14" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M5 0.822266H1V12.8223H5" stroke="url(#brackets-left)" />
       <defs>
         <linearGradient id="brackets-left" x1="50%" x2="50%" y1="0%" y2="100%">
@@ -16,25 +10,10 @@ const brackets = (position) =>
       </defs>
     </svg>
   ) : (
-    <svg
-      width="5"
-      height="14"
-      viewBox="0 0 5 14"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M-2.98023e-08 0.822266H4V12.8223H-2.98023e-08"
-        stroke="url(#brackets-right)"
-      />
+    <svg width="5" height="14" viewBox="0 0 5 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M-2.98023e-08 0.822266H4V12.8223H-2.98023e-08" stroke="url(#brackets-right)" />
       <defs>
-        <linearGradient
-          id="brackets-right"
-          x1="14.635%"
-          x2="14.635%"
-          y1="0%"
-          y2="100%"
-        >
+        <linearGradient id="brackets-right" x1="14.635%" x2="14.635%" y1="0%" y2="100%">
           <stop offset="0%" stopColor="#9099FC" />
           <stop offset="100%" stopColor="#D87CEE" />
         </linearGradient>

constants/index.ts

@@ -1,41 +1,3 @@
-import {
-  homeSmile,
-  file02,
-  searchMd,
-  plusSquare,
-  notification4,
-  notification3,
-  notification2,
-  yourlogo,
-  recording03,
-  recording01,
-  disc02,
-  chromecast,
-  sliders04,
-  roadmap1,
-  roadmap2,
-  roadmap3,
-  roadmap4,
-  figma,
-  notion,
-  discord,
-  slack,
-  photoshop,
-  protopie,
-  framer,
-  raindrop,
-  benefitIcon1,
-  benefitImage2,
-  benefitIcon2,
-  benefitIcon3,
-  benefitIcon4,
-  discordBlack,
-  twitter,
-  instagram,
-  telegram,
-  facebook,
-} from "@/public/assets";
-
 export const images = {
   yourlogo: "/assets/yourlogo.svg",
   brainwave: "/assets/brainwave.svg",
@@ -107,6 +69,44 @@ export const images = {
   twitter: "/assets/socials/twitter.svg",
 };
 
+const {
+  yourlogo,
+  homeSmile,
+  file02,
+  searchMd,
+  plusSquare,
+  recording03,
+  recording01,
+  disc02,
+  chromecast,
+  sliders04,
+  discord,
+  figma,
+  framer,
+  notion,
+  photoshop,
+  protopie,
+  raindrop,
+  slack,
+  roadmap1,
+  roadmap2,
+  roadmap3,
+  roadmap4,
+  notification2,
+  notification3,
+  notification4,
+  benefitIcon1,
+  benefitIcon2,
+  benefitIcon3,
+  benefitIcon4,
+  benefitImage2,
+  discordBlack,
+  facebook,
+  instagram,
+  telegram,
+  twitter,
+} = images;
+
 export const navigation = [
   {
     id: "0",