Merge branch 'main' into docker

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

@@ -7,31 +7,31 @@ export const faqs = [
   {
     question: "Is it a Paid Community?",
     answer:
-      "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum eaque, quos soluta ad, amet quidem similique iure",
+      "No, DevsInTech is a free community. To join, simply join our Discord server and start engaging with fellow developers.",
   },
   {
     question: "Does Events Occur often?",
     answer:
-      "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum eaque, quos soluta ad, amet quidem similique iure",
+      "Yes, we have frequent events at DevsInTech. We hold weekly coffee chats, monthly blogging competitions, and are planning to launch expert sessions soon. Keep an eye on our Discord announcements for the latest updates.",
   },
   {
     question: "Who are the founders of DevsInTech Community?",
     answer:
-      "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum eaque, quos soluta ad, amet quidem similique iure",
+      "DevsInTech was founded by Susmita Dey, a CS undergrad student and web developer at Digitea. She is also a technical writer and MLHacks mentor and judge.",
   },
   {
     question: "How to Actively  Contribute into DevsInTech?",
     answer:
-      "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum eaque, quos soluta ad, amet quidem similique iure",
+      "To actively contribute to DevsInTech, join our Discord community and start engaging with fellow members. Apply for volunteer roles such as designer, developer, or content creator and manager. We are always looking for enthusiastic individuals to join our team.",
   },
   {
     question: "Will I receive any perks or advantage in Joining DevsInTech?",
     answer:
-      "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum eaque, quos soluta ad, amet quidem similique iure",
+      "Yes, by participating in our monthly blogging competitions with the tag #devsintech on Hashnode, you have a chance to win exclusive perks and swag.",
   },
   {
     question: "How to be a part of DevsInTech Community?",
     answer:
-      "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum eaque, quos soluta ad, amet quidem similique iure",
+      "To be a part of DevsInTech Community, join our Discord server by following the link on our website and start engaging with our members.",
   },
 ];

public/twitter.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;