Footer

package.json

@@ -16,6 +16,7 @@
     "@vitejs/plugin-react": "^2.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1",
     "react-router-dom": "^6.4.3",
     "vite": "^3.2.3"
   },

src/App.jsx

@@ -2,15 +2,14 @@ import { Routes, Route } from "react-router-dom";
 
 import { Home } from "./Pages";
 
-import { Navbar } from "./Components";
+import { Navbar,Button,Footer } from "./Components";
+
 
 const App = () => {
   return (
     <>
-      <Navbar />
-      <Routes>
-        <Route path="/" element={<Home />} />
-      </Routes>
+      <Footer/>
+
     </>
   );
 };

src/Components/Footer/Footer.jsx

@@ -0,0 +1,39 @@
+import styles from "./Footer.module.scss";
+import React from "react";
+import {FiFacebook} from "react-icons/fi"
+import {AiOutlineInstagram} from "react-icons/ai"
+import {FiLinkedin} from "react-icons/fi"
+
+
+const Footer = () =>{
+    return(
+        <>
+
+
+         <div className={`${styles.containerContact}`}>
+            <p className={`${styles.contactHeader}`}>Contact<span className={`${styles.infoGrad}`}> Info</span></p>
+            <div className={`${styles.credInfo}`}>
+                <p className={`${styles.credItems}`}>Address<span className={`${styles.credText}`}>National Institute of Technology Silchar Cachar, Assam</span></p>
+                <p className={`${styles.credItems}`}>Website<span className={`${styles.credText}`}>www.nits.ac.in</span></p>
+                <p className={`${styles.credItems}`}>Email<span className={`${styles.credText}`}>xxxx@xxx.com</span></p>
+                <p className={`${styles.credItems}`}>Phone Number<span className={`${styles.credText}`}>+91-xxxxxxxxxx</span></p>
+            </div>
+
+        </div>
+        <div className={`${styles.containerFooter}`}>
+            <p className= {`${styles.footerDesc}`}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lacus, purus tincidunt tellus eros. Feugiat velit id sed sit id velit, adipiscing pulvinar orci. Et, bibendum nibh pellentesque id sagittis adipiscing lorem. Elit egestas bibendum morbi vitae, nullam nunc sagittis eget.</p>
+           <div className= {`${styles.iconSection}`} >
+            <FiFacebook  className= {`${styles.facebookIcon}`}/>
+            <AiOutlineInstagram className= {`${styles.instaIcon}`} />
+            <FiLinkedin className= {`${styles.linkedinIcon}`} />
+            </div>
+
+        </div> 
+
+
+        </>
+
+    )
+}
+
+export default Footer

src/Components/Footer/Footer.module.scss

@@ -0,0 +1,130 @@
+
+@font-face{
+    font-family: 'Gilroy-Bold';
+    src: url(../fonts/gilroy/Gilroy-Bold.ttf);
+}
+
+
+
+
+
+.containerContact {
+    display: flex;
+    flex-direction: column;
+    padding-top: 134px;
+    text-align: center;
+
+
+
+}
+
+.contactHeader, .infoGrad{
+ font-family: 'Gilroy-Bold';  
+font-size: 48px;
+line-height: 56px;
+font-weight: 700;
+}
+
+.infoGrad{
+    background: linear-gradient(to bottom, rgba(182,33,254,1) 35%, rgba(31,209,249,1) 100%);
+    -webkit-text-fill-color: transparent;
+    -webkit-background-clip: text;
+
+}
+
+
+
+.credInfo {
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-top: 72px;
+    font-size: 24px;
+    line-height: 28px;
+    text-align: center;
+}
+.credItems{
+    width: 264px;
+    margin-right: 33px;
+    margin-left: 33px;
+    font-family: 'Gilroy-Bold';
+}
+.credText{
+    font-weight: 900;
+    display: block;
+    margin-top: 0.5rem;
+}
+
+.containerFooter{
+    margin-top: 104px;
+    background-color: #15131A;
+
+}
+.footerDesc{
+    max-width: 970px;
+    margin: auto;
+   padding-top: 99px;
+    font-size: 24px;
+    font-weight: 900;
+    line-height: 39px;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.64);
+}
+
+.facebookIcon{
+    width: 2.91rem;
+    height: 2.91rem;
+    color: white;
+    margin-right: 66.36px;
+    margin-left: 66.36px;
+
+}
+.instaIcon{
+    width: 2.91rem;
+    height: 2.91rem;
+    color: white;
+    margin-right: 66.36px;
+
+}
+.linkedinIcon
+{
+    width: 2.91rem;
+    height: 2.91rem;
+    color: white;
+    margin-right: 66.36px;
+}
+.iconSection
+{
+    display: flex;
+    justify-content: center;
+    margin-top: 87px;
+    padding-bottom: 148px;
+
+}
+
+@media screen and (max-width: 1200px)
+{
+    .contactHeader, .infoGrad{
+        font-size: 48px;
+        margin-bottom: 3rem;
+
+    }
+    .credInfo{
+        flex-direction: column;
+        max-width: 80vh;
+        margin: auto;
+
+    }
+    .credItems{
+        margin: 0;
+        margin-bottom: 2rem;
+    }
+    .footerDesc{
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+
+
+}
+

src/Components/fonts/gilroy/More Free Fonts on fontshmonts.com.url

@@ -0,0 +1,2 @@
+[InternetShortcut]
+URL=https://www.fontshmonts.com/?utm_source=file_shortcuts&utm_medium=downloaded_files

src/Components/index.jsx

@@ -1,4 +1,5 @@
 import Button from "./Button/Button";
 import Navbar from "./Navbar/Navbar";
+import Footer from "./Footer/Footer";
 
-export { Button, Navbar };
+export { Button, Navbar, Footer };