refactor(frontend): rabbit-review

frontend/src/components/Community/hero.tsx

@@ -38,6 +38,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         src={background.url}
         alt="Hero Image Background"
         fill
+        priority
         className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>

frontend/src/components/Cooperative/MemberSection/LearnMore.tsx

@@ -32,6 +32,7 @@ const LearnMore: React.FC<CooperativeLearnMoreSection> = ({
         src={background.url}
         alt="Learn more Image Background"
         fill
+        priority
         className="rounded-2xl object-cover"
       />
     </div>

frontend/src/components/Cooperative/hero.tsx

@@ -44,6 +44,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         src={background.url}
         alt="Hero Image Background"
         fill
+        priority
         className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>

frontend/src/components/Dropdown/index.tsx

@@ -58,7 +58,7 @@ const Dropdown: React.FC<IDropwdownProps> = ({ items, value, onChange }) => {
       <div
         className={clsx(
           "absolute z-10 mt-2 rounded-2xl border border-stroke bg-background-1",
-          "flex max-h-[300px] w-[200px] flex-col gap-4 p-[10px] md:w-[348px]",
+          "flex max-h-[300px] w-[200px] flex-col gap-4 overflow-auto p-[10px] md:w-[348px]",
           isOpen ? "visible" : "hidden",
         )}
       >

frontend/src/components/Earn/Hero.tsx

@@ -43,6 +43,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         src={background.url}
         alt="Hero Image Background"
         fill
+        priority
         className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>

frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx

@@ -25,6 +25,7 @@ const KlerosScoutSection: React.FC<IKlerosScoutSection> = ({
         <Image
           width={128}
           height={128}
+          priority
           src={productIcon.url}
           alt="Product Icon"
         />

frontend/src/components/ForBuilders/Hero.tsx

@@ -53,6 +53,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         alt="Hero Image Background"
         width="1440"
         height="835"
+        priority
         className="absolute left-0 top-0 z-[-1] h-full object-cover object-left"
       />
     </div>

frontend/src/components/PNKToken/Hero.tsx

@@ -38,6 +38,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         src={background.url}
         alt="Hero Image Background"
         fill
+        priority
         className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>

frontend/src/components/Pagination.tsx

@@ -18,6 +18,8 @@ const Pagination: React.FC<IPagination> = ({
       {Array.from(Array(numPages), (_, index) => (
         <button
           key={index}
+          aria-label={`Go to page ${index + 1}`}
+          aria-current={currentPage === index + 1 ? "page" : undefined}
           className={clsx(
             "h-4 w-4 rounded-full transition-all",
             currentPage === index + 1

frontend/src/components/ResearchDevelopment/Hero.tsx

@@ -51,6 +51,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         src={background.url}
         alt="Hero Image Background"
         fill
+        priority
         className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>

frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Testimonials/index.tsx

@@ -24,7 +24,7 @@ const Testimonials: React.FC<{ testimonials: Testimonial[] }> = ({
         itemsPerPage * (page - 1),
         Math.min(testimonials.length, itemsPerPage * page),
       ),
-    [itemsPerPage, page],
+    [testimonials, itemsPerPage, page],
   );
 
   return (

frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx

@@ -20,7 +20,13 @@ const KlerosBook: React.FC<IKlerosBook> = ({
       )}
     >
       <div className="max-w-457 relative h-[536px] w-full flex-shrink-0 lg:h-[717px] lg:w-[457px]">
-        <Image src={bookCover.url} alt="Book Cover" fill className="!w-fit" />
+        <Image
+          src={bookCover.url}
+          alt="Book Cover"
+          fill
+          priority
+          className="!w-fit"
+        />
       </div>
       <div className="space-y-16">
         <div className="space-y-6">

frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/PublicationCard.tsx

@@ -12,14 +12,12 @@ interface IPublicationCard {
 const PublicationCard: React.FC<IPublicationCard> = ({ publication }) => {
   return (
     <div className="flex flex-col items-start rounded-2xl border border-stroke p-6">
-      {(publication as TeamPublication)?.authors ? (
+      {isTeamPublication(publication) ? (
         <>
           <h2 className="mb-6 text-xl font-medium text-primary-text">
             {publication.topic}
           </h2>
-          <p className="mb-8 text-secondary-text">
-            {(publication as TeamPublication).authors}
-          </p>
+          <p className="mb-8 text-secondary-text">{publication.authors}</p>
         </>
       ) : (
         <p className="mb-8 text-secondary-text">{publication.topic}</p>
@@ -36,3 +34,9 @@ const PublicationCard: React.FC<IPublicationCard> = ({ publication }) => {
   );
 };
 export default PublicationCard;
+
+function isTeamPublication(
+  publication: TeamPublication | ThirdPartyPublication,
+): publication is TeamPublication {
+  return "authors" in publication;
+}

frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/TeamPublications.tsx

@@ -24,7 +24,7 @@ const TeamPublications: React.FC<{ teamPublications: TeamPublication[] }> = ({
         itemsPerPage * (page - 1),
         Math.min(teamPublications.length, itemsPerPage * page),
       ),
-    [itemsPerPage, page],
+    [teamPublications, itemsPerPage, page],
   );
 
   return (

frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/ThirdPartyPublications.tsx

@@ -24,7 +24,7 @@ const ThirdPartyPublications: React.FC<{
         itemsPerPage * (page - 1),
         Math.min(thirdPartyPublications.length, itemsPerPage * page),
       ),
-    [itemsPerPage, page],
+    [thirdPartyPublications, itemsPerPage, page],
   );
 
   return (

frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/ResearchSection/ResearchCard.tsx

@@ -14,7 +14,7 @@ const ResearchCard: React.FC<Research> = ({ field, icon }) => {
       )}
     >
       <Image src={icon.url} alt="document" width={64} height={64} />
-      <label className="text-lg text-primary-text">{field}</label>
+      <p className="text-lg text-primary-text">{field}</p>
     </div>
   );
 };

frontend/src/components/home/Hero.tsx

@@ -63,6 +63,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         alt="Hero Image Background"
         width="1440"
         height="835"
+        priority
         className="absolute left-0 top-0 z-[-1] h-full object-cover object-left"
       />
     </div>

frontend/src/hooks/useScreenSize.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 type ScreenSize = "sm" | "md" | "lg";
 
 export const useScreenSize = () => {
-  const [screenSize, setScreenSize] = useState<ScreenSize>();
+  const [screenSize, setScreenSize] = useState<ScreenSize>("lg");
 
   useEffect(() => {
     const handleResize = () => {

frontend/src/styles/globals.css

@@ -18,6 +18,27 @@ body {
   color: var(--foreground);
   background: var(--background);
   font-family: Urbanist, Helvetica, sans-serif;
+
+  /* scollbar */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: #42498f;
+    border-radius: 16px;
+    transition:
+      opacity 0.15s,
+      background-color 0.15s,
+      border-color 0.15s,
+      width 0.15s;
+  }
+
+  scrollbar-width: thin;
+  scrollbar-color: #42498f transparent;
 }
 
 @layer utilities {