Footer complete for all screen sizes

frontend/src/components/Categories/Categories.css

@@ -0,0 +1,44 @@
+.col{
+    flex:1;
+    display: flex; 
+    flex-direction: column;
+    gap: 10px;
+    overflow: hidden;
+}
+
+.col-l{
+    flex:2;
+}
+.row{
+    flex:1;
+    display:flex;
+    gap: 10px;
+    position: relative;
+    overflow: hidden;
+}
+.category-button{
+    position: absolute;
+    /* min-width: 100px; */
+    width: fit-content;
+    height:50px;
+    padding: 10px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    cursor: pointer;
+    border: none;
+    background-color: white;
+    text-transform: uppercase;
+    font-weight: 500;
+    color: black; 
+    border-radius: 0px;
+}
+
+.category-image{
+    width: 100%;
+    height: 100%;
+    object-fit: cover; 
+
+}

frontend/src/components/Categories/Categories.scss

@@ -1,15 +0,0 @@
-.col{
-    flex:1;
-    display: flex; 
-    flex-direction: column;
-    gap: 10px;
-}
-
-.col-l{
-    flex:2;
-}
-.row{
-    flex:1;
-    display:flex;
-    gap: 10px;
-}

frontend/src/components/Categories/Categories.tsx

@@ -1,11 +1,19 @@
 import React from "react";
-import "./Categories.scss"
+import "./Categories.css";
+import Image from "next/image";
+import Link from "next/link";
+import { Button } from '@/components/ui/button';
 
 const Categories = () => {
   return (
     <div className="flex h-[80svh] gap-[10px] mx-[10px] w-full">
       <div className="col">
-        <div className="row">r1</div>
+        <div className="row">
+          <Image className="category-image" src="/batch1/Mockup 126.png" width={400} height={400} alt="category-one"/>
+          <Button className="category-button" >
+            <Link href={"/products/1"}>Kids</Link>
+          </Button>
+        </div>
         <div className="row">r2</div>
       </div>
       <div className="col">

frontend/src/components/Contact/Contact.css

@@ -0,0 +1,11 @@
+.sub-input{
+    padding: 10px;
+    border-radius: 5px 0 0 5px;
+    border: none;
+}
+
+.sub-button{
+    padding: 10px;
+    border-radius: 0 5px 5px 0;
+    border: none;
+}

frontend/src/components/Contact/Contact.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Button } from "@react-email/components";
+import { FaFacebookF } from "react-icons/fa";
+import { FaInstagram } from "react-icons/fa";
+import { FaTiktok } from "react-icons/fa";
+import "./Contact.css";
+
+const Contact = () => {
+  return (
+    <div className="contact w-full flex pb-[5px] pt-[50px] justify-center flex-col gap-8">
+      <div className="icons flex gap-4 text-xl text-white sm:justify-start justify-center items-center w-full">
+        <FaFacebookF />
+        <FaInstagram />
+        <FaTiktok />
+      </div>
+      <div className="wrapper flex tablet:items-center justify-between w-full sm:flex-row flex-col">
+        <span>SUBSCRIBE TO OUR NEWSLETTER:</span>
+        <div className="mail w-full max-w-md flex">
+          <input
+            type="text"
+            placeholder="Enter your email address"
+            className="sub-input p-[5px] border-none rounded-[5px 0 0 5px] w-1/2"
+          />
+          <button className="sub-button py-[5px] px-[10px] text-white bg-orange-600 rounded-[0 5px 5px 0] border-none">
+            JOIN US
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Contact;

frontend/src/components/Footer/Footer.tsx

@@ -3,11 +3,12 @@ import { FaFacebookF } from "react-icons/fa";
 import { FaInstagram } from "react-icons/fa";
 import { FaTiktok } from "react-icons/fa";
 import Image from "next/image";
+import Contact from "@/components/Contact/Contact";
 
 const Footer = () => {
   return (
-    <div className="footer text-white pb-[20px] pt-[80px] px-[200px] bg-slate-800 w-full">
+    <div className="footer text-white pb-[20px] pt-[35px] sm:px-[200px] px-[50px] bg-slate-800 w-full">
-      <div className="top flex w-full">
+      <div className="flex w-full sm:justify-between justify-center">
         <div className="item flex-1 flex flex-col gap-[10px] text-justify text-sm text-gray-400">
           <h1 className="text-xl font-bold text-gray-200">Categories</h1>
           <span>Men</span>
@@ -25,31 +26,36 @@ const Footer = () => {
           <span>Cookies</span>
         </div>
       </div>
-      <div className="Socials flex gap-4 text-xl mt-[30px] text-gray-300">
+      <div className="w-full flex justify-center items-center">
-        <FaFacebookF />
+        <Contact />
-        <FaInstagram />
-        <FaTiktok />
       </div>
 
       {/* copyright */}
-      <div className="bottom text-xs flex gap-4 items-center justify-between mt-[30px]">
+      <div className="bottom text-xs flex tablet:flex-row flex-col gap-4 sm:items-start items-center justify-between mt-[30px] sm:text-start text-center">
         <div className="flex flex-col gap-4">
           <span className="flex max-w-[320px]">
             All items are sold under the belief that they are original works and
             not copyrighted under another company.
           </span>
-          <span>© 2024 - Kevos Attire LLC. All rights reserved. </span>
         </div>
-        <div className="relative flex w-1/2 h-[50px]">
+        <div className="relative flex md:w-1/2 w-full h-[50px]">
           <Image
             src="/payment.png"
             fill
             style={{ objectFit: "cover", objectPosition: "center" }}
-            className="hidden md:block bg-slate-300"
+            className="hidden lg:block bg-slate-300"
             alt="payment systems"
-          />
+            />
+          <Image
+            src="/payment.png"
+            fill
+            style={{ objectFit: "contain", objectPosition: "center" }}
+            className="block lg:hidden bg-slate-300"
+            alt="payment systems small"
+            />
         </div>
       </div>
+      <span className="text-xs lg:text-start flex text-center sm:justify-start justify-center items-center w-full mt-[10px]">© 2024 - Kevos Attire LLC. All rights reserved. </span>
     </div>
   );
 };