fix(footer): update footer style

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 />
     </>
   );
 }

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>
   );
 }

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>
+  );
+}

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": "/"
+    }
+  ]
+}

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%);
-}
+  filter: brightness(0) saturate(100%) invert(50%) sepia(100%) saturate(500%)
+    hue-rotate(95deg) brightness(110%) contrast(100%);
+}