From b6688246363a7962bca67878ce574df3c5546d84 Mon Sep 17 00:00:00 2001
From: Sirin Puenggun <sirin_29@hotmail.co.th>
Date: Sun, 2 Jul 2023 21:41:23 +0700
Subject: [PATCH] Add To follow SocialMedia component

---
 src/components/Faq.jsx         |  6 +++++
 src/components/SocialMedia.jsx | 45 ++++++++++++++++++++++++++++++++++
 src/components/index.js        |  2 ++
 src/constants/index.js         | 25 ++++++++++++++++++-
 4 files changed, 77 insertions(+), 1 deletion(-)
 create mode 100644 src/components/SocialMedia.jsx

diff --git a/src/components/Faq.jsx b/src/components/Faq.jsx
index 0c05ba1..8990ead 100644
--- a/src/components/Faq.jsx
+++ b/src/components/Faq.jsx
@@ -4,6 +4,7 @@ import { motion } from "framer-motion";
 import { textVariant } from "../utils/motion";
 import { SectionWrapper } from "../hoc";
 import { faqs } from '../constants';
+import SocialMedia from './Socialmedia';
 
 const Faq = () => {
   const [activeIndex, setActiveIndex] = useState(null);
@@ -163,6 +164,11 @@ const Faq = () => {
           </div>
         ))}
       </div>
+      <hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
+      <div className="mt-8">
+      <h2 className={`${styles.sectionSubTextCenter}`}>SOS12 Social Media</h2>
+        <SocialMedia />
+      </div>
 </div>
   );
 };
diff --git a/src/components/SocialMedia.jsx b/src/components/SocialMedia.jsx
new file mode 100644
index 0000000..e68364b
--- /dev/null
+++ b/src/components/SocialMedia.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import Tilt from 'react-tilt';
+import { socialMediaData } from '../constants';
+
+const SocialMedia = () => {
+  return (
+    <div className="flex justify-center mt-4">
+      <div className="flex flex-wrap gap-4">
+        {socialMediaData.map((item, index) => (
+          <Tilt className="xs:w-[250px] w-full" key={index}>
+            <motion.div
+              variants={{
+                hidden: { opacity: 0, y: 50 },
+                visible: { opacity: 1, y: 0 },
+              }}
+              initial="hidden"
+              animate="visible"
+              transition={{
+                delay: index * 0.2,
+                duration: 0.5,
+                type: 'spring',
+                stiffness: 100,
+              }}
+              className="w-full p-4 rounded-lg shadow-lg"
+              style={{
+                background: item.color,
+                boxShadow: '0px 4px 10px rgba(255, 255, 255, 0.2)',
+              }}
+            >
+              <a href={item.url} className="block">
+                <div className="flex justify-center items-center mb-4">
+                  <img src={item.icon} alt={item.title} className="w-8 h-8" style={{ filter: 'drop-shadow(2px 4px 6px rgba(255, 255, 255, 0.5))' }} />
+                </div>
+                <h3 className="text-white text-2xl font-bold text-center">{item.title}</h3>
+              </a>
+            </motion.div>
+          </Tilt>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default SocialMedia;
diff --git a/src/components/index.js b/src/components/index.js
index a24d237..4274924 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -7,6 +7,7 @@ import CanvasLoader from "./Loader";
 import Faq from './Faq';
 import Problems from './Problems';
 import Preproblems from './Preproblems';
+import SocialMedia from './Socialmedia';
 
 export {
   Navbar,
@@ -18,4 +19,5 @@ export {
   Faq,
   Problems,
   Preproblems,
+  SocialMedia,
 };
diff --git a/src/constants/index.js b/src/constants/index.js
index 834f18d..a3d9f13 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -3,6 +3,9 @@ import {
   contacts_pic,
   faq_pic,
   problems,
+  github, 
+  instagram_icon, 
+  discord_icon,
 } from "../assets";
 
 export const navLinks = [
@@ -63,5 +66,25 @@ const faqs = [
   }
 ];
 
+const socialMediaData = [
+  {
+    title: 'Instagram',
+    icon: instagram_icon,
+    url: 'https://www.instagram.com/sos_camp12/',
+    color: 'linear-gradient(to bottom right, #FF0080, #7928CA)',
+  },
+  {
+    title: 'Discord',
+    icon: discord_icon,
+    url: 'https://discord.gg/wPAFD6qh',
+    color: 'linear-gradient(to bottom right, #7289DA, #5865F2)',
+  },
+  {
+    title: 'Github',
+    icon: github,
+    url: 'https://github.com/Rick-Lang/rickroll-lang',
+    color: 'linear-gradient(to bottom right, #24292E, #444D56)',
+  },
+];
 
-export { menu, faqs };
+export { menu, faqs, socialMediaData };