From 6b54b9af2ccf311944067cb53a35e58f1807fc08 Mon Sep 17 00:00:00 2001
From: Hamid Roohi <hamidroohi71@gmail.com>
Date: Fri, 27 Dec 2024 02:56:02 +0330
Subject: [PATCH] fix(footer): update footer style

---
 public/assets/logos/discord.svg  |  3 +++
 public/assets/logos/github.svg   |  3 +++
 public/assets/logos/telegram.svg |  3 +++
 public/assets/logos/twitter.svg  |  3 +++
 src/App.tsx                      |  2 ++
 src/components/Comments.tsx      |  4 ++--
 src/components/Footer.tsx        | 25 +++++++++++++++++++++++++
 src/data/socials.json            | 24 ++++++++++++++++++++++++
 src/index.css                    | 12 ++++++------
 9 files changed, 71 insertions(+), 8 deletions(-)
 create mode 100644 public/assets/logos/discord.svg
 create mode 100644 public/assets/logos/github.svg
 create mode 100644 public/assets/logos/telegram.svg
 create mode 100644 public/assets/logos/twitter.svg
 create mode 100644 src/components/Footer.tsx
 create mode 100644 src/data/socials.json

diff --git a/public/assets/logos/discord.svg b/public/assets/logos/discord.svg
new file mode 100644
index 0000000..47f98e2
--- /dev/null
+++ b/public/assets/logos/discord.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.9996 7.47749C10.2219 7.47749 6.87073 9.64009 6.87073 9.64009C8.70708 7.9102 11.9157 6.91323 11.9157 6.91323L11.6128 6.59375C8.60018 6.65013 5.87261 8.85031 5.87261 8.85031C2.80655 15.6012 3.00252 21.4308 3.00252 21.4308C5.49849 24.8347 9.20636 24.5899 9.20636 24.5899L10.4722 22.8976C8.24387 22.3897 6.83555 20.3027 6.83555 20.3027C6.83555 20.3027 10.1871 22.7096 15 22.7096C19.8129 22.7096 23.1645 20.3027 23.1645 20.3027C23.1645 20.3027 21.7561 22.3902 19.5278 22.8976L20.7936 24.5899C20.7936 24.5899 24.5015 24.8342 26.9975 21.4308C26.9975 21.4308 27.1935 15.6012 24.1274 8.85031C24.1274 8.85031 21.3998 6.65013 18.3872 6.59375L18.0843 6.91323C18.0843 6.91323 21.2934 7.90973 23.1293 9.64009C23.1293 9.64009 19.7768 7.47749 14.9996 7.47749ZM11.3104 14.6047C12.4693 14.6047 13.414 15.6764 13.3961 16.9928C13.3961 18.2905 12.4693 19.3809 11.3104 19.3809C10.1515 19.3809 9.24244 18.2905 9.24244 16.9928C9.24244 15.6952 10.1515 14.6047 11.3104 14.6047ZM18.744 14.6047C19.9029 14.6047 20.8297 15.6764 20.8297 16.9928C20.8297 18.3093 19.9029 19.3809 18.744 19.3809C17.585 19.3809 16.676 18.2905 16.676 16.9928C16.676 15.6952 17.585 14.6047 18.744 14.6047Z" fill="white"/>
+</svg>
diff --git a/public/assets/logos/github.svg b/public/assets/logos/github.svg
new file mode 100644
index 0000000..788b08b
--- /dev/null
+++ b/public/assets/logos/github.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.9956 25.5878C18.9864 25.5111 18.9825 25.4339 18.984 25.3566C18.9714 25.3329 18.9634 25.3066 18.9607 25.2793V21.961C18.9607 20.9158 18.6237 20.0236 17.9498 19.286C19.7518 18.9427 21.0997 18.2102 21.9926 17.0868C22.8855 15.9634 23.3327 14.6038 23.3327 13.0088C23.3327 11.5166 22.894 10.2216 22.0159 9.12454C22.3296 8.02664 22.2744 6.86927 21.8521 5.65157C21.4126 5.61756 20.9351 5.69916 20.418 5.89629C19.9009 6.09342 19.5174 6.27782 19.2658 6.44861C19.0158 6.62027 18.7883 6.78345 18.5849 6.93808C17.6757 6.66362 16.6609 6.52597 15.5413 6.52597C14.4201 6.52597 13.4139 6.66362 12.5202 6.93808C12.3479 6.80045 12.1476 6.65089 11.9209 6.48771C11.6933 6.32456 11.2982 6.12743 10.7337 5.89629C10.17 5.6643 9.6607 5.56572 9.20569 5.60058C8.76702 6.83528 8.72044 8.00964 9.06516 9.12452C8.20335 10.2224 7.77243 11.5166 7.77243 13.0088C7.77243 14.6038 8.21111 15.9592 9.08848 17.0732C9.96582 18.1881 11.3137 18.9257 13.1313 19.286C12.666 19.7748 12.3397 20.4004 12.1918 21.0875C10.8595 21.4469 9.92699 21.1894 9.39437 20.3142C8.40676 18.737 7.52164 18.1711 6.73824 18.6172C6.628 18.737 6.64429 18.8611 6.78483 18.9902C6.92614 19.1186 7.13731 19.2902 7.41993 19.5044C7.70175 19.7194 7.91297 19.9547 8.05426 20.2122C8.0698 20.2462 8.11326 20.3711 8.18394 20.5853C8.25144 20.7921 8.32184 20.9977 8.39513 21.2022C8.46501 21.3993 8.59854 21.6186 8.79497 21.8582C8.99063 22.0987 9.21813 22.3001 9.47668 22.4632C9.73524 22.6255 10.0916 22.7462 10.5458 22.8235C11 22.9 11.5171 22.9043 12.0971 22.8363V25.4212C12.0971 25.4467 12.0932 25.4892 12.0855 25.5504C12.0777 25.6099 18.9956 25.5878 18.9956 25.5878Z" fill="white"/>
+</svg>
diff --git a/public/assets/logos/telegram.svg b/public/assets/logos/telegram.svg
new file mode 100644
index 0000000..77cc90d
--- /dev/null
+++ b/public/assets/logos/telegram.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.38 5.72525L3.12065 13.8711C1.66979 14.4502 1.67818 15.2544 2.85446 15.613L8.31259 17.3048L20.9411 9.38773C21.5383 9.02673 22.0838 9.22093 21.6354 9.61649L11.4038 18.7918H11.4014L11.4038 18.7929L11.0273 24.3832C11.5788 24.3832 11.8223 24.1318 12.1316 23.8351L14.7827 21.2735L20.2972 25.3208C21.314 25.8772 22.0443 25.5913 22.2973 24.3856L25.9172 7.43378C26.2877 5.95759 25.3501 5.28919 24.38 5.72525Z" fill="white"/>
+</svg>
diff --git a/public/assets/logos/twitter.svg b/public/assets/logos/twitter.svg
new file mode 100644
index 0000000..d99f9b2
--- /dev/null
+++ b/public/assets/logos/twitter.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.9047 14.0634L24.3513 5.59375H22.5873L16.1187 12.9463L10.956 5.59375H5L12.8087 16.7132L5 25.5938H6.764L13.5907 17.8276L19.044 25.5938H25M7.40067 6.89533H10.1107L22.586 24.3561H19.8753" fill="white"/>
+</svg>
diff --git a/src/App.tsx b/src/App.tsx
index f7134ef..210bdd7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import CodePart from "./components/CodePart";
 import Comments from "./components/Comments";
+import Footer from "./components/Footer";
 import Header from "./components/Header";
 import Hero from "./components/Hero";
 import IntegratedApps from "./components/IntegratedApps";
@@ -23,6 +24,7 @@ function App() {
       <CodePart />
       <Scenarios />
       <Comments />
+      <Footer />
     </>
   );
 }
diff --git a/src/components/Comments.tsx b/src/components/Comments.tsx
index a7ab72d..3d50cfa 100644
--- a/src/components/Comments.tsx
+++ b/src/components/Comments.tsx
@@ -4,7 +4,7 @@ import data from "../data/comments.json";
 export default function Comments() {
   const [current, setCurrent] = useState<number>(0);
   return (
-    <div className="py-[3.125rem] flex flex-col justify-center overflow-hidden">
+    <section className="py-[3.125rem] flex flex-col justify-center overflow-hidden">
       <div
         className="flex gap-[3.125rem] duration-300"
         style={{
@@ -56,6 +56,6 @@ export default function Comments() {
           />
         ))}
       </div>
-    </div>
+    </section>
   );
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..40d314a
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,25 @@
+import data from "../data/socials.json";
+
+export default function Footer() {
+  return (
+    <section
+      className="flex justify-between items-center py-[2.375rem] px-[6.25rem]"
+      style={{
+        backgroundImage: "linear-gradient(to top,#00D4484D, #00D44800",
+      }}
+    >
+      <p className="text-[1rem] text-white font-[300]">@ 2024 Msgport</p>
+      <div className="flex items-center gap-[1.875rem]">
+        {data.socials.map((item: any) => (
+          <a href={item.href} key={item.id}>
+            <img
+              src={item.icon}
+              alt={item.name}
+              className="w-[1.875rem] h-[1.875rem] object-contain"
+            />
+          </a>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/src/data/socials.json b/src/data/socials.json
new file mode 100644
index 0000000..6d20761
--- /dev/null
+++ b/src/data/socials.json
@@ -0,0 +1,24 @@
+{
+  "socials": [
+    {
+      "id": "social-1",
+      "icon": "/assets/logos/twitter.svg",
+      "href": "/"
+    },
+    {
+      "id": "social-2",
+      "icon": "/assets/logos/telegram.svg",
+      "href": "/"
+    },
+    {
+      "id": "social-3",
+      "icon": "/assets/logos/github.svg",
+      "href": "/"
+    },
+    {
+      "id": "social-4",
+      "icon": "/assets/logos/discord.svg",
+      "href": "/"
+    }
+  ]
+}
diff --git a/src/index.css b/src/index.css
index 29df9fe..a9f7645 100644
--- a/src/index.css
+++ b/src/index.css
@@ -32,18 +32,17 @@ html {
 }
 
 body {
-  background-color: #0d150f;
+  background-color: #161616;
 }
 
-
 .defaultScroll {
   ::-webkit-scrollbar {
-    background-color: transparent; 
+    background-color: transparent;
     height: 0.5rem;
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: #00D448 ; 
+    background-color: #00d448;
     border-radius: 0.5rem;
   }
 }
@@ -54,5 +53,6 @@ body {
 
 .btnHover:hover img {
   transition: all 0.3s ease;
-  filter: brightness(0) saturate(100%) invert(50%) sepia(100%) saturate(500%) hue-rotate(95deg) brightness(110%) contrast(100%);
-}
\ No newline at end of file
+  filter: brightness(0) saturate(100%) invert(50%) sepia(100%) saturate(500%)
+    hue-rotate(95deg) brightness(110%) contrast(100%);
+}