added footer component and resolve merge conflicts

src/components/Footer.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import ItemsContainer from "./ItemsContainer";
+
+ const Footer = () => {
+  return (
+    <footer className="bg-gray-900 text-white">
+      <div className="md:flex md:justify-between md:items-center sm:px-12 px-4 bg-gray-900 py-7">
+        <div>
+
+        </div>
+      </div>
+      <ItemsContainer />
+      <div
+        className="flex justify-center and items-center 
+      text-center pt-2 text-teal-400 text-sm pb-8"
+      >
+        <span>© 2022 SpaceyaTech|All rights reserved.</span>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer
+
+

src/components/Item.jsx

@@ -0,0 +1,21 @@
+
+const Item = ({ Links, title }) => {
+  return (
+    <ul>
+      <h1 className="mb-1 font-semibold">{title}</h1>
+      {Links.map((link) => (
+        <li key={link.name}>
+          <a
+            className="text-gray-400 hover:text-teal-400 duration-300
+          text-sm cursor-pointer leading-6"
+            href={link.link}
+          >
+            {link.name}
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default Item;

src/components/ItemsContainer.tsx

@@ -0,0 +1,46 @@
+import Item from "./Item";
+import SocialIcons from "./SocialIcons";
+import { Icons } from "./Menus";
+import { Company, Resources, QuickLinks} from "./Menus";
+const ItemsContainer = () => {
+  return (
+    <div className=" grid justify-evenly text-teal-400 grid-cols-10 sm:grid-cols-3 lg:grid-cols-5 gap-6 sm:px-8 px-5 py-8">
+
+      <div>
+        <img src="icon.png" alt="" />
+        <div className="mt-4"  >
+          <SocialIcons  Icons={Icons} />
+          </div>
+      </div>
+      <Item Links={Company} title="Company" />
+      <Item Links={Resources} title="Resources" />
+      <Item Links={QuickLinks} title="Quick Links" />
+      <div >
+        <h2>News Letter</h2>
+        <p className="text-gray-400">Subscribe to our newsletter to get your weekly dose of news, updates, tips , and even special offers !</p>
+        <div className=""  >
+          <div>
+        <input
+            type="text "
+            placeholder="Write your Email here"
+            className="text-gray-800 w-5
+           sm:w-72  sm:mr-5 mr-1 lg:mb-0 mb-4 py-2.5 rounded px-2 focus:outline-none"
+          />
+          </div>
+          <div>
+          <button
+            className="bg-teal-400 hover:bg-teal-500 border-solid border-2 border-green-500 duration-300 px-5 py-2.5 m-4 font-[Poppins]
+           rounded-md text-white md:w-auto w-full"
+          >
+           Subscribe!
+        </button>
+        </div>
+          </div>
+      </div>
+    </div>
+  );
+};
+
+
+// 
+export default ItemsContainer;

src/components/Menus.tsx

@@ -0,0 +1,32 @@
+
+export const Company = [
+  { name: "About Us", link: "#" },
+  { name: "FAQ", link: "#" },
+  { name: "Sign Up", link: "#" },
+  { name: "Login", link: "#" }
+];
+export const Resources = [
+  { name: "Contact Us", link: "#" },
+  { name: "Community", link: "#" },
+  { name: "Privacy Policy", link: "#" },
+  { name: "Terms of Use", link: "#" },
+  { name: "Mentorship", link: "#" },
+];
+export const QuickLinks = [
+  { name: "Home", link: "#" },
+  { name: "Jobs", link: "#" },
+  { name: "Mentorship", link: "#" },
+  { name: "Events", link: "#" },
+];
+
+export const Icons = [
+  { name: "logo-facebook", link: "#" },
+  { name: "logo-twitter", link: "#" },
+  { name: "logo-github", link: "#" },
+  { name: "logo-linkedin", link: "#" },
+  { name: "logo-instagram", link: "#" },
+];
+// export const NewsLetter = [
+//   { name: "Subscribe to our newsletter to get your weekly dose of news, updates, tips , and even special offers !" },
+// ];
+

src/components/SocialIcons.jsx

@@ -0,0 +1,19 @@
+
+const SocialIcons = ({ Icons }) => {
+  return (
+    <div className="text-teal-500">
+      {Icons.map((icon) => (
+        <span
+          key={icon.name}
+          className=" p-1 cursor-pointer inline-flex items-center
+        rounded-full bg-gray-700 mx-1.5 text-xl hover:text-gray-100 hover:bg-teal-500
+        duration-300 "
+        >
+          <ion-icon name={icon.name}></ion-icon>
+        </span>
+      ))}
+    </div>
+  );
+};
+
+export default SocialIcons;