Merge pull request #1 from Rajneesh2223/ui/feature

enhanced the ui

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^7.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-icons": "^4.11.0",
     "react-scripts": "^5.0.1",
     "react-toastify": "^9.0.8"
   },

src/Footer.js

@@ -1,19 +1,25 @@
-import React from "react"
-import "./index.css"
+import React from 'react';
+import { BsGithub } from 'react-icons/bs';
 
-function Footer(){
-    return(
-        <footer>
-            <div className="container">
-                <center>
-                    <p className="p-footer">Made with the ❤️ by <a href="https://github.com/surajondev">Suraj Vishwakarma</a></p>
-                    <p className="p-footer">Made with <span role="img" aria-labelledby="love">❤️</span> by <a href="https://github.com/surajondev">Suraj Vishwakarma</a></p>
-                    <p className="p-footer">Source <a href="https://openweathermap.org/">OpenWeather</a></p>
-                </center>
-            </div>
-        </footer>
-    )
-}
+const Footer = () => {
+  // Get the current year
+  const currentYear = new Date().getFullYear();
 
-export default Footer
+  return (
+    <footer>
+      <div className="container">
+        <center>
+          <p className="p-footer">
+            © {currentYear} Made with <span role="img" aria-labelledby="love">❤️</span> by <a href="https://github.com/surajondev">Suraj Vishwakarma</a> 
+          </p>
+          <div className="github-info">
+            <p className="p-footer">  Source <a href="https://openweathermap.org/">OpenWeather</a></p>
+            <a href="https://github.com/surajondev" className='github'> <BsGithub /></a>
+          </div>
+        </center>
+      </div>
+    </footer>
+  );
+}
 
+export default Footer;

src/index.css

@@ -1,18 +1,19 @@
 html {
   font-size: 16px;
 }
+
 body {
   margin: 0 auto;
-  font-family: Arial, sans-serif;
-  background-color: #161d28;
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  background-color: #202c3f;
 }
 
 img:not(.large-icon) {
   min-width: 100px;
   margin-top: 2rem;
 }
 
-header,
+
 footer {
   color: white;
   background-color: #192733;
@@ -21,6 +22,9 @@ footer {
 
 header {
   margin-bottom: 2rem;
+ text-align: center;
+ color: white;
+font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }
 
 footer {
@@ -44,8 +48,8 @@ a:hover {
 
 /* TYPOGRAPHY */
 .title {
-  font-size: 2.5rem;
-  font-weight: 20px;
+  font-size: 4rem;
+  font-weight: 50px;
   padding-left: 0.6rem;
 }
 
@@ -122,39 +126,53 @@ p {
   width: 100%;
   cursor: pointer;
 }
-
+/* Container styles */
+.container-small,
 .container-medium {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   margin: 0 1rem 0 1rem;
-  padding: 1rem;
-  background: #7c77fe;
+  padding: 2%;
   border-radius: 10px;
-  width: 65%;
-  box-shadow: 10px 10px #6c7077;
-  justify-content: space-between;
   transition: transform 0.5s ease;
-}
-.container-medium:hover {
-  transform: scale(1.025);
+  cursor: pointer;
 }
 
+/* Small container styles */
 .container-small {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin: 0 1rem 0 1rem;
-  padding: 1rem;
   width: 30%;
-  background: #7c77fe;
-  border-radius: 10px;
-  box-shadow: 10px 10px #6c7077;
-  transition: transform 0.5s ease;
+  background: linear-gradient(135deg, #7c77fe, #835ef5); /* Gradient background */
+  box-shadow: 5px 5px 10px rgba(108, 112, 119, 0.4);
+}
+
+.container-small:hover {
+  background: linear-gradient(135deg, #835ef5, #7c77fe); /* Gradient background on hover */
+  transform: scale(1.05); /* Scale up on hover */
+}
+
+/* Medium container styles */
+.container-medium {
+  flex-direction: row;
+  justify-content: space-between;
+  width: 65%;
+  background: linear-gradient(135deg, #7c77fe, #835ef5); /* Gradient background */
+  box-shadow: 5px 5px 10px rgba(108, 112, 119, 0.4);
+}
+
+.container-medium:hover {
+  background: linear-gradient(135deg, #835ef5, #7c77fe); /* Gradient background on hover */
+  transform: scale(1.05); /* Scale up on hover */
 }
 
+
+.container-medium:hover {
+  transform: scale(1.025);
+}
+
+
+
 .container-small:hover {
   transform: scale(1.025);
 }
@@ -180,6 +198,12 @@ p {
   right: 0;
   margin: 0px auto;
 }
+.github{
+  font-size: 30px;
+}
+.github  :hover{
+  color:rgb(56, 44, 214);
+}
 
 .toast {
   padding: 0.3rem 0.75rem;