update footer view

apps/web/src/app/assets/css/Footer.css

@@ -0,0 +1,87 @@
+
+
+footer {
+    background-color: #F5CC00;
+    color: #003566;
+    padding: 1rem 0;
+    position: relative;
+    bottom: 0;
+    width: 100%;
+    margin-top: auto;
+  }
+
+  .f-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0 auto;
+    width: 100%;
+    height: auto;
+    justify-content: center;
+    align-content: center;
+    gap: 10rem;
+  }
+
+  .leftColumn {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    align-items: center;
+  }
+
+  .text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    font-size: 1rem;
+  }
+
+  .socialContainer {
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+  }
+
+  .icon {
+    text-decoration: none;
+    font-size: 36px;
+  }
+  .icon:hover{
+    color: whitesmoke;
+  }
+
+  .buttonImage {
+    display: flex;
+    width: 160px;
+    height: auto;
+  } 
+
+@media only screen and (max-width: 1024px) {
+  .f-content {
+    gap: 32px;
+  }
+}
+
+@media only screen and (max-width: 900px) {
+  .f-content {
+    gap: 20px;
+  }
+  .buttonImage{
+    width: 120px;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .f-content{
+    flex-direction: column;
+    padding-bottom: 50px;
+  }
+  .text{
+    font-size: 1rem;
+  }
+  .buttonImage{
+    flex-direction: column;
+  }
+
+}

apps/web/src/app/layout.tsx

@@ -8,6 +8,10 @@ import "./assets/css/Store.css";
 import "./assets/css/NFT.css";
 import "./assets/css/Challenges.css";
 import "./assets/css/Leaderboard.css";
+<<<<<<< HEAD
+=======
+import "./assets/css/Footer.css";
+>>>>>>> 49c0225 (update footer view)
 
 const inter = Inter({ subsets: ["latin"] });
 

apps/web/src/app/pages/footer.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+<<<<<<< HEAD
 
 const Footers: React.FC = () => {
   return (
@@ -7,11 +8,70 @@ const Footers: React.FC = () => {
         <p style={textStyle}>
           © {new Date().getFullYear()} Xottle. All rights reserved.
         </p>
+=======
+import { FaInstagram, FaYoutube, FaSquareXTwitter } from "react-icons/fa6";
+import googlePlayImage from "../../../public/images/google-play.png";
+import appStoreImage from "../../../public/images/AppStore.png"; 
+import Image from "next/image";
+
+const Footers: React.FC = () => {
+  return (
+    <footer>
+      <div className="f-content">
+        <div className="leftColumn">
+          <a 
+            href="#"
+            target="_blank" 
+            rel="noopener noreferrer" 
+            className="icon"
+          >
+            <Image src={googlePlayImage} alt="Google Play Store" className="buttonImage"/>
+          </a>
+          <a 
+            href="#"
+            target="_blank" 
+            rel="noopener noreferrer" 
+            className="icon"
+          >
+            <Image src={appStoreImage} alt="App Store" className="buttonImage" />
+          </a>
+        </div>
+        <p className="text">
+          © {new Date().getFullYear()} Xottle. All rights reserved.
+        </p>
+        <div className="socialContainer">
+          <a 
+            href="https://www.instagram.com/xottle_official" 
+            target="_blank" 
+            rel="noopener noreferrer" 
+            className="icon"
+          >
+            <FaInstagram />
+          </a>
+          <a 
+            href="https://x.com/xottle_official" 
+            target="_blank" 
+            rel="noopener noreferrer" 
+            className="icon"
+            >
+            <FaSquareXTwitter />
+          </a>
+          <a 
+            href="https://www.youtube.com/@Xottle_Official" 
+            target="_blank" 
+            rel="noopener noreferrer" 
+            className="icon"
+          >
+            <FaYoutube />
+          </a>
+        </div>
+>>>>>>> 49c0225 (update footer view)
       </div>
     </footer>
   );
 };
 
+<<<<<<< HEAD
 const footerStyle: React.CSSProperties = {
   backgroundColor: "#F5CC00",
   color: "#003566",
@@ -33,4 +93,6 @@ const textStyle: React.CSSProperties = {
   fontSize: "1rem",
 };
 
+=======
+>>>>>>> 49c0225 (update footer view)
 export default Footers;

apps/web/tsconfig.json

@@ -12,7 +12,7 @@
     "esModuleInterop": true,
     "module": "ESNext",
     "target": "ES6",
-    "moduleResolution": "Node",
+    "moduleResolution": "Bundler",
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
     "isolatedModules": true,