Merge pull request #26 from NepTechTribe/new

Social Media Link added

Author: shree404

src/Components/landingpage/footer.jsx

@@ -1,7 +1,22 @@
 import { Container, Row, Col } from "react-bootstrap";
 import fullogo from "../../assets/LandingPage/logo.png";
+import {
+    Facebook,
+    Twitter,
+    Linkedin,
+    TelephoneFill,
+    GeoAltFill,
+    EnvelopeFill,
+    Envelope,
+    Youtube,
+  } from "react-bootstrap-icons";
+
+
 
 function Footer() {
+
+
+
   return (
     <div className="Footer">
       <Container>
@@ -12,14 +27,28 @@ function Footer() {
               alt="NepTech Tribe Logo"
               className="Navbar-logo"
             />
-            <p className="Footer-introduction">
+            <p className="Footer-col1__introduction">
               {" "}
               NepTech Tribe is a non-profit organization that unites tech
               enthusiasts of all ages to share knowledge and foster innovation.
               We offer events and activities to enhance skills and encourage
               collaboration, aiming to drive technological progress and create a
               supportive community.
             </p>
+            <div className="Footer-col1__buttons">
+                <button onClick={() => window.open('https://www.facebook.com/neptechtribe/', '_blank')}>
+                  <Facebook className="icon" />
+                </button>
+                <button>
+                  <Youtube onClick={() => window.open(' https://www.youtube.com/@NepTechTribe', '_blank')} className="icon" />
+                </button>
+                <button>
+                  < EnvelopeFill onClick={() => window.open('mailto:[email protected]', '_blank')}  className="icon" />
+                </button>
+                <button>
+                  <Linkedin onClick={() => window.open('https://www.linkedin.com/company/neptechtribe/posts/?feedView=all', '_blank')} className="icon" />
+                </button>
+              </div>
           </Col>
           <Col md={3}>
             <dl>

src/Styles/App.css

@@ -464,8 +464,28 @@
   margin-top: 4rem;
   padding: 4rem 0rem;
 }
-.Footer-introduction {
+.Footer-col1__introduction {
   font-family: "Poppins", sans-serif;
   font-size: 0.8rem;
   margin-top: 2rem;
+}
+.Footer-col1__buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+.Footer-col1__buttons button {
+  background-color: transparent;
+  border: none;
+  height: 3rem;
+  width: 3rem;
+}
+.Footer-col1__buttons button:hover .icon {
+  opacity: 1;
+}
+.Footer-col1__buttons button .icon {
+  color: black;
+  opacity: 0.7;
+  height: 1.5rem;
+  width: 1.55rem;
 }/*# sourceMappingURL=App.css.map */

src/Styles/App.css.map

@@ -2,10 +2,34 @@
     background-color:  #e0e0f2;
     margin-top: 4rem;
     padding: 4rem 0rem;
-    &-introduction{
+    &-col1{
+    &__introduction{
         font-family: $font;
         font-size: 0.8rem;
         margin-top: 2rem;
 
     }
+    &__buttons {
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+        & button {
+          background-color: transparent;
+          border: none;
+          height: 3rem;
+          width: 3rem;
+          &:hover {
+           .icon{
+            opacity: 1;
+           }
+          }
+          .icon {
+            color: black;
+            opacity: 0.7;
+            height: 1.5rem;
+            width: 1.55rem;
+          }
+        }
+    }
+}
 }