add SocialMedia section

Author: brianshattuck

src/assets/images/launchpad/social_media_bg.png

@@ -0,0 +1,43 @@
+'use client';
+import React from 'react';
+import { Button, Box, Typography } from '@material-ui/core';
+import { TelegramIcon, TwitterIcon } from './SocialIcon';
+import { Link } from 'react-router-dom';
+import SocialMediaBg from 'assets/images/launchpad/social_media_bg.png';
+
+const JoinSocialMedia: React.FC = () => {
+  return (
+    <Box className='section socialMediaSection'>
+      <Box className='cover_title'>
+        <Typography className='title2'>Follow on Social Media</Typography>
+        <Typography className='desc'>
+          Follow QuickLaunch on social media channels for exclusive updates on
+          upcoming crypto launches, industry insights, and real-time
+          discussions. Connect with like-minded individuals and be the first to
+          know about the latest opportunities for IDOs on Polygon.
+        </Typography>
+      </Box>
+      <Box className='cover_social_icons'>
+        <a
+          href='https://t.me/QuickLaunchOfficial'
+          target='_blank'
+          rel='noreferrer'
+        >
+          <TelegramIcon className='social_icon'></TelegramIcon>
+        </a>
+        <a
+          href='https://x.com/quickswapdex?s=21&t=nQjWO49uC8GB7M59QlcWjQ'
+          target='_blank'
+          rel='noreferrer'
+        >
+          <TwitterIcon className='social_icon'></TwitterIcon>
+        </a>
+      </Box>
+      <Box className='social_media_bg'>
+        <img src={SocialMediaBg} alt='social-media-bg' />
+      </Box>
+    </Box>
+  );
+};
+
+export default JoinSocialMedia;

src/pages/LaunchpadPage/JoinSocialMedia.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import HeroSection from 'pages/LaunchpadPage/HeroSection';
 import StepsToJoin from 'pages/LaunchpadPage/StepsToJoin';
+import JoinSocialMedia from 'pages/LaunchpadPage/JoinSocialMedia';
+
 import 'pages/styles/launchpad.scss';
 
 const LaunchpadPage: React.FC = () => {
@@ -17,6 +19,7 @@ const LaunchpadPage: React.FC = () => {
         openModal={openModal}
         setOpenModal={setOpenModal}
       />
+      <JoinSocialMedia />
     </div>
   );
 };

src/pages/LaunchpadPage/LaunchpadPage.tsx

@@ -0,0 +1,32 @@
+/* eslint-disable react/react-in-jsx-scope */
+export const TelegramIcon: React.FC<React.SVGProps<SVGSVGElement>> = (
+  props,
+) => (
+  <svg viewBox='0 0 24 24' fill='currentColor' {...props}>
+    <path d='M20.665 3.717l-17.73 6.837c-1.21.486-1.203 1.161-.222 1.462l4.552 1.42l10.532-6.645c.498-.303.953-.14.579.192l-8.533 7.701l-.321 4.843c.47 0 .677-.216.95-.477l2.283-2.22l4.743 3.503c.87.48 1.496.233 1.714-.814l3.101-14.606c.317-1.269-.486-1.843-1.648-1.466z' />
+  </svg>
+);
+
+export const YoutubeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg viewBox='0 0 24 24' fill='currentColor' {...props}>
+    <path d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z' />
+  </svg>
+);
+
+export const DiscordIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg viewBox='0 0 24 24' fill='currentColor' {...props}>
+    <path d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z' />
+  </svg>
+);
+
+export const GithubIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg viewBox='0 0 24 24' fill='currentColor' {...props}>
+    <path d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12' />
+  </svg>
+);
+
+export const TwitterIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg viewBox='0 0 24 24' fill='currentColor' {...props}>
+    <path d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z' />
+  </svg>
+);