Add feature: Scoll down button

CONTRIBUTING.md

@@ -73,7 +73,8 @@ Thank you for your interest in contributing to BioBranch! This guide will help y
      npm install
      npm start
      ```
-   - For frontend changes:
+   - For frontend changes:cd server
+
      ```bash
      cd site
      npm install

site/package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.5",
     "eslint": "8.37.0",
     "eslint-config-next": "13.2.4",
     "framer-motion": "^11.5.4",

site/pages/index.js

@@ -4,8 +4,19 @@ import Creators from '@/components/Creators'
 import DetailsCard from '@/components/DetailsCard'
 import Faq from '@/components/Faq'
 import Process from '@/components/Process'
+import { useRef } from 'react';
+import { ChevronDoubleDownIcon } from '@heroicons/react/24/solid';
 
 export default function Home() {
+
+  // Scroll to the next section
+  const scrollToNextSection = () => {
+    window.scrollBy({
+      top: window.innerHeight,
+      behavior: 'smooth',
+    });
+  };
+
   return (
     <>
       <MyHead
@@ -16,6 +27,15 @@ export default function Home() {
       />
 
       <main className="w-full min-h-screen flex flex-col justify-center items-center">
+         {/* Scroll down button */}
+        <button 
+          onClick={scrollToNextSection}
+          className="fixed top-20 right-4 bg-blue-500 text-white p-2 rounded-full shadow-lg hover:bg-blue-600 transition-all z-10"
+          title="Scroll down"
+        >
+          {/* Double arrow icon */}
+          <ChevronDoubleDownIcon className="h-6 w-6"/>
+        </button>
         <Creators/>
         <DetailsCard/>
         <Faq/>