auto scroll and gradients

client/src/App.css

@@ -1,4 +1,7 @@
 /* App.css */
+html {
+  scroll-behavior: smooth;
+}
 
 body {
     font-family: 'Inter', sans-serif;

client/src/components/Footer/Footer.css

@@ -31,6 +31,11 @@ body, html {
   background-color: white;
   padding: 20px 0;
   width: 100%;
+  position: fixed; /* Make the footer stick to the bottom */
+  bottom: 0; /* Align it to the bottom */
+  left: 0;
+  right: 0;
+  z-index: 1000; /* Ensure it appears above other content */
 }
 
 .footer-content {

client/src/components/Recommendation/Recommendation.css

@@ -6,12 +6,18 @@
   border-radius: 8px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   box-sizing: border-box; /* Include padding and border in width */
+  margin-top: 30px;
 }
 
 .reco-container h2 {
+  margin-left: 1rem;
   margin-bottom: 20px;
 }
 
+.repo-ul a {
+  color: #000000;
+}
+
 .repo-ul {
   width: 100%; /* Ensure the ul takes full width */
   padding: 0; /* Remove default padding */
@@ -40,7 +46,7 @@
 }
 
 .repo-card:hover {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 4px 4px 8px rgba(9, 109, 224, 0.1);
 }
 
 .repo-info h3 {

client/src/components/Recommendation/Recommendation.jsx

@@ -1,20 +1,32 @@
 import React from "react";
 import "./Recommendation.css";
 import { formatDistanceToNow } from "date-fns";
+import { useEffect, useRef } from "react";
 
 export const Recommendation = ({ recommendations }) => {
+  const recoRef = useRef(null);
+
+  useEffect(() => {
+    if (recommendations.length > 0 && recoRef.current) {
+      recoRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [recommendations]);
+
+
   const timeAgo = (date) =>
     formatDistanceToNow(new Date(date), { addSuffix: true });
 
   return (
-    <div className="reco-container">
+    <div className="reco-container" ref={recoRef}>
       <h2>Recommendations</h2>
       <ul className="repo-ul">
         {recommendations.map((repo, index) => (
           <li key={index}>
             <div className="repo-card">
               <div className="repo-info">
-                <h3>{repo.full_name}</h3>
+                <a href={repo.repo_url}>
+                  <h3>{repo.full_name}</h3>
+                </a>
                 <p>{repo.description}</p>
                 <div className="topics-container">
                   <span>Topics: </span>

client/src/index.css

@@ -7,6 +7,10 @@
   /* --f-p: 'Roboto', sans-serif; */
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 * {
   margin: 0;
   padding: 0;