Merge branch 'main' into faq_branch

Author: Susmita-Dey

public/discord.svg

@@ -0,0 +1,25 @@
+import IconButton from "./iconbutton";
+
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+const HeaderSocialMedia = (props) => {
+  return (
+    <>
+    <div>
+    <IconButton src="discord.svg" alt="discord" width={props.width} height={props.height} url="https://discord.com/invite/g7FmxB9uZp" className="hover:scale-110 duration-300"/>
+    </div>
+    <div>
+    <IconButton src="github.svg" alt="discord"width={props.width} height={props.height} url="https://github.com/devs-in-tech/DevsInTech" className="hover:scale-110 duration-300"/>
+    </div>
+    <div>
+    <IconButton src="twitter.svg" alt="discord" width={props.width} height={props.height} url="https://twitter.com/devs_in_tech" className="hover:scale-110 duration-300"/>
+    </div>
+    <div>
+    <IconButton src="linkedin.svg" alt="linkedin" width={props.width} height={props.height} url="https://www.linkedin.com/company/devsintech-community/" className="hover:scale-110 duration-300"/>
+    </div>
+    </>
+  );
+};
+export default HeaderSocialMedia;

public/github.svg

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { useState } from "react";
 import Logo from "../../public/logo2.png";
 import Button from "./button";
+import  HeaderSocialMedia from "./HeaderSocialMedia";
 
 const Navbar = () => {
   let Links = [
@@ -45,16 +46,13 @@ const Navbar = () => {
               </Link>
             </li>
           ))}
-          <span className="md:hidden block">
-            <Button
-              name="Join Us"
-              url="https://discord.com/invite/g7FmxB9uZp"
-            />
-          </span>
+          <div className="md:hidden flex gap-4">
+          <HeaderSocialMedia width={35} height={30}/>
+          </div>
         </ul>
-        <span className="md:ml-auto md:block hidden">
-          <Button name="Join Us" url="https://discord.com/invite/g7FmxB9uZp " />
-        </span>
+        <div className="lg:flex lg:gap-5 hidden md:flex md:gap-3">
+       <HeaderSocialMedia width={47} height={47}/>
+        </div>
       </div>
       <div
         onClick={() => setOpen(!open)}

public/linkedin.svg

@@ -0,0 +1,14 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+const IconButton = (props) => {
+  return (
+    <Link href={props.url} legacyBehavior>
+      <a target="_blank" rel="noopener noreferrer">
+        <Image src={props.src} width={props.width} height={props.height} alt={props.alt} className={props.className}/>
+      </a>
+    </Link>
+  );
+};
+
+export default IconButton;