feat : Footer changes

index.html

@@ -49,6 +49,7 @@
       href="https://fonts.googleapis.com/css2?family=Orbitron&family=Poppins&display=swap"
       rel="stylesheet"
     />
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD00ws_IqKiBskZB7I_HnohOW_Umy7cNhE&callback=myMap"></script>
     <link rel="icon" type="image/x-icon" href="/logo.png" />
     <!-- <script src="https://accounts.google.com/gsi/client" async></script> -->
     <title>Vijñāna'2.0</title>

package.json

@@ -12,9 +12,6 @@
   "dependencies": {
     "@types/jsonwebtoken": "^9.0.5",
     "axios": "^1.6.2",
-    "bootstrap-icons": "^1.11.1",
-    "boxicons": "^2.1.4",
-    "jsonwebtoken": "^9.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.18.0",

src/components/footer/Footer.module.css

@@ -10,17 +10,19 @@
     display: grid;
     grid-template-columns: auto;
     gap: 50px;
+    width: 100%;
     & div {
       width: 100%;
       display: flex;
-      align-items: center;
+      align-items: start;
       justify-content: center;
       flex-direction: column;
       & h2 {
         transform: translateX(-20px);
         margin-bottom: 30px;
-        text-align: center;
-        width: 70%;
+        text-align: start;
+        font-size: 15px;
+        width: 20%;
       }
       & ul {
         & li {
@@ -29,13 +31,26 @@
       }
     }
     .logo {
+      position: relative;
+      width: calc(100% + 100px);
+      height: calc(100% + 100px);
+      left: -50px;
       align-items: center;
       justify-content: center;
-      & img {
-        width: 70%;
+      margin: 0;
+      padding: 0;
+      & object {
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
       }
     }
   }
+  & a {
+    /* text-decoration: none; */
+    color: var(--color-black);
+  }
 }
 .footer::after {
   content: "";
@@ -52,12 +67,17 @@
 @media screen and (min-width: 768px) {
   /* Your CSS styles for tablet devices go here */
   .footer {
+    width: calc(100% - 300px);
+    padding: 50px 150px;
     .grid {
       grid-template-columns: 30% 30% 30%;
 
       .logo {
-        & img {
-          width: 50%;
+        height: calc(100% + 50px);
+        top: -25px;
+        & object {
+          width: 100%;
+          height: 100%;
         }
       }
     }

src/components/footer/Footer.tsx

@@ -1,44 +1,64 @@
-import logo from "../../assets/Logo KBM.png";
+// import logo from "../../assets/Logo KBM.png";
 import style from "./Footer.module.css";
+// import GoogleMapReact from "google-map-react";
+
 interface FooterProps {}
 
 const Footer: React.FC<FooterProps> = ({}) => {
   return (
     <div className={style.footer}>
       <div className={style.grid}>
         <div className={style.contact}>
-          <h2 className="underline">Contact</h2>
+          <h2 className="underline start">Contact</h2>
           <ul>
             <li>
-              Phone : <a href="tel:9999999999">9999999999</a>
+              <i className="bi bi-telephone-fill"></i> &nbsp;{" "}
+              <a href="tel: +91 977 816 4335"> +91 977 816 4335</a>
             </li>
             <li>
-              Email : <a href="tel:9999999999">[email protected]</a>
+              <i className="bi bi-envelope"></i> &nbsp;
+              <a href="mailto:[email protected]">[email protected]</a>
             </li>
             <li>
-              <i className="bi bi-geo"></i>
+              <i className="bi bi-geo"></i> &nbsp; Olavilam, Chokli, Kannur{" "}
               <br />
-              <div style={{ display: "block" }}>
-                &nbsp; KBM Government College
-                <br />
-                Olavilam, Chokli, Kannur <br />
-                Pin Code : 670662
-              </div>
+              Pin Code : 670662
             </li>
           </ul>
         </div>
         <div className={style.Links}>
-          <h2 className="underline">Links</h2>
+          <h2 className="underline start">Links</h2>
           <ul>
-            <li>Bla bla bla</li>
-            <li>Bla bla bladfdsf</li>
-            <li>Bla b</li>
-            <li>Bla bla </li>
-            <li>Bla bla blvca</li>
+            <li>
+              <a href="http://govtcollegetly.ac.in/">College Website</a>
+            </li>
+            <li>
+              <a href="https://kannuruniversity.ac.in/">Kannur University</a>
+            </li>
+            <li>
+              <a href="https://nationalseminarkbmgctly.web.app/">
+                National Seminar KBMGCT
+              </a>
+            </li>
+            <li>
+              <a href="https://instagram.com/vijnana23">Instagram</a>
+            </li>
+            <li>
+              <a href="https://facebook.com/vijnana">Facebook</a>
+            </li>
           </ul>
         </div>
         <div className={style.logo}>
-          <img src={logo} />
+          <object
+            // style="border:0; height: 450px; width: 100%;"
+            data="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9291.641740467927!2d75.55760033930248!3d11.718892280617597!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba42828416ed211%3A0x4c95cfa71eed1053!2sKodiyeri%20Balakrishnan%20Memorial%20Govt%20College%2C%20Chokli!5e0!3m2!1sen!2sin!4v1701154594725!5m2!1sen!2sin"
+          ></object>
+          {/* <GoogleMapReact
+            bootstrapURLKeys={{ key: "" }}
+            defaultCenter={defaultProps.center}
+            defaultZoom={defaultProps.zoom}
+          ></GoogleMapReact> */}
+          {/* <img src={logo} /> */}
         </div>
       </div>
     </div>

src/components/sidebar/Sidebar.module.css

@@ -8,6 +8,9 @@
   left: -70%;
   z-index: 11;
   transition: all 0.5s ease;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   .header {
     width: 100%;
     height: auto;
@@ -53,8 +56,8 @@
     }
   }
   .footer {
-    position: fixed;
-    bottom: 10px;
+    position: relative;
+    bottom: 50px;
     width: calc(70vw - 40px);
     left: 0;
     display: flex;