Added scroll up button to 3 components

src/app/page.tsx

@@ -15,6 +15,7 @@ import style from "./page.module.css";
 import { Russo_One } from "next/font/google";
 import { useEffect, useState } from "react";
 import axios from "axios";
+import Image from "next/image";
 
 const antonFont = Russo_One({ subsets: ["latin"], weight: "400" });
 
@@ -93,6 +94,18 @@ export default function Home() {
           </div>
         </div>
       </div>
+      <div className=" h-[0px] bg-[#3366ff] flex justify-end">
+      <a href="#">
+      <Image
+              className="md:w-[70px] w-[40px] h-[40px] md:h-[70px] fixed right-[30px] bottom-[30px] md:bottom-[50px] md:right-[90px]"
+              src="/up-arrow.png"
+              alt="image here"
+              width={100}
+              height={100}
+            />
+      </a>
+      </div>
+
       <div id="section2">
         <Second />
       </div>

src/components/Fifth/fifth.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import Image from 'next/image'
 export const Fifth = () => {
   return (
+    <>
     <div className='bg-[#3366ff] w-[100vw] h-[800px] flex items-center'>
         <div className='w-[90%] h-[80%] bg-[#ffffff] m-auto border-2 border-black rounded-3xl flex item-center  ' style={{boxShadow:"20px 20px 0px black"}}>
             <div className=' flex-col w-[80%] h-[90%]  m-auto sm:w-[60%]'>
@@ -12,7 +13,7 @@ export const Fifth = () => {
                     <Image className=' hidden xl:block relative right-[160px] bottom-[160px]' src="/arrow.png" alt="image" height={150} width={150}/>
                 </div>
                 <div className='justify-around flex item-center w-[100%] h-[25%] py-[10px] sm:pt-[20px]'>
-                    <div className='w-[20%] h-[40%] bg-[#D8FF40] border-black border-2 rounded-3xl text-xs text-center pt-[13px] cursor-pointer sm:font-medium sm:pt-[13px]'>General</div>
+                    <div className='w-[20%] h-[40%] bg-[#D8FF40] border-black border-2 rounded-3xl text-xs text-center pt-[13px] cursor-pointer sm:font-medium sm:pt-[13px]'><a href="#">General</a></div>
                     <div className='w-[20%] h-[40%] bg-[#F7FFD9] border-black border-2 rounded-3xl text-xs text-center pt-[13px] cursor-pointer sm:font-medium sm:pt-[13px]'>Services</div>
                     <div className='w-[20%] h-[40%] bg-[#F7FFD9] border-black border-2 rounded-3xl text-xs text-center pt-[13px] cursor-pointer sm:font-medium sm:pt-[13px]'>Business</div>
                     <div className='w-[20%] h-[40%] bg-[#F7FFD9] border-black border-2 rounded-3xl text-xs text-center pt-[13px] cursor-pointer sm:font-medium sm:pt-[13px]'>Account</div>
@@ -39,9 +40,12 @@ export const Fifth = () => {
             </div>
 
         </div>
+
 
 
     </div>
+
+    </>
   )
 }
 

src/components/Second/second.tsx

@@ -70,6 +70,8 @@ export const Second = () => {
           </div>
         </div>
       </div>
+
+
     </div>
   );
 };

src/components/Third/third.tsx

@@ -100,6 +100,7 @@ export const Third = () => {
           </div>
         </div>
       </div>
+
     </div>
   );
 };