From f92ef88ea636521c383bf76b2a71f858d9b25b16 Mon Sep 17 00:00:00 2001
From: Jayanth <jayanththalla33@gmail.com>
Date: Sun, 9 Jun 2024 22:14:24 +0530
Subject: [PATCH] footer changed

---
 src/components/Footer.css | 36 ++++++++++++++++++++++++++++++++----
 src/components/Footer.jsx | 11 +++++++++--
 2 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/components/Footer.css b/src/components/Footer.css
index 1a6cc22..1b1d6e7 100644
--- a/src/components/Footer.css
+++ b/src/components/Footer.css
@@ -18,7 +18,7 @@ a:hover {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: space-around;
+    justify-content:space-around;
     max-width: 1200px;
     margin: auto;
     animation: fadeIn 1s ease-in-out;
@@ -26,7 +26,7 @@ a:hover {
 
 .footer-section {
     flex: 1;
-    padding: 20px;
+    padding: 10px;
     text-align: center;
     opacity: 0;
     transform: translateY(20px);
@@ -49,12 +49,17 @@ a:hover {
     position: relative;
     transition: color 0.3s, transform 0.3s;
 }
-
+/* to make the all footer section in one row  */
+.footer-nav {
+    display: flex;
+    justify-content: space-evenly;
+    width: 100%;
+}
 /* Footer.css */
 .footer-section h4 {
     position: relative;
     display: inline-block;
-    padding: 0.5rem 1rem;
+    padding: 15x;
     color: #fff;
     text-decoration: none;
     overflow: hidden;
@@ -149,6 +154,29 @@ a:hover {
     text-decoration: none;
     transition: color 0.3s, transform 0.3s;
 }
+.contact-list {
+    margin: 20px;
+}
+
+.contact-list li, .nav-list li{
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px; /* Adjust as needed */
+}
+
+.contact-list li i, .nav-list li i{
+    margin-right: 10px; /* Adjust the spacing as needed */
+}
+.contact-list li a, .nav-list li a {
+    color: inherit; /* Ensure the text color matches the parent */
+    text-decoration: none;
+    transition: color 0.3s, transform 0.3s;
+}
+
+.contact-list li a:hover, .nav-list li a:hover {
+    color: #90a9bb; /* Adjust the hover color as needed */
+    transform: scale(1.1);
+}
 
 .footer-section ul li a:hover,
 .footer-section p a:hover {
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index cd7ce50..3fcacc2 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import React from 'react';
+// import React from 'react';
 import './Footer.css';
 // import '';
 
@@ -23,12 +23,13 @@ const Footer = () => {
   return (
     <footer className="footer" style={footerStyle}>
       <div className="footer-content">
+      <div className='footer-nav'>
         <div className="footer-section contact-details">
           <h4><strong style={footerStyle}>Contact Us</strong></h4>
           <ul className="contact-list">
             <li style={footerStyle}>
               <i className="fas fa-envelope"></i>&nbsp;&nbsp;
-              <a style={footerStyle} sty href="mailto:akshatchaube22@gmail.com">akshatchaube22@gmail.com</a>
+              <a style={footerStyle}  href="mailto:akshatchaube22@gmail.com">akshatchaube22@gmail.com</a>
             </li>
             <li style={footerStyle}>
               <i className="fas fa-phone"></i>&nbsp;&nbsp;
@@ -95,6 +96,11 @@ const Footer = () => {
                 <i className="fab fa-linkedin-in"></i>&nbsp;&nbsp; LinkedIn
               </a>
             </li>
+            <li style={footerStyle}>
+              <a style={footerStyle} href="https://discord.com/" target="_blank" rel="noopener noreferrer">
+                <i className="fab fa-discord"></i>&nbsp;&nbsp; Discord
+              </a>
+            </li>
           </ul>
         </div>
         <div className="footer-section social-media">
@@ -119,6 +125,7 @@ const Footer = () => {
           </ul>
         </div>
       </div>
+      </div>
       <div className="footer-bottom">
         <p style={footerStyle}>© 2024 TimeWarp. All rights reserved.</p>
       </div>