From c2840e928d1a4f561710ce60c83ca739aa1ef95a Mon Sep 17 00:00:00 2001
From: naticampiglia <99177631+naticampiglia@users.noreply.github.com>
Date: Wed, 31 Jan 2024 16:12:45 +0800
Subject: [PATCH] Footer

---
 src/components/footer.tsx     | 78 ++++++++++++++++++-----------------
 src/components/talk-to-us.tsx |  6 +--
 src/custom.d.ts               | 10 +++++
 src/styles/button.scss        |  1 +
 src/styles/styles.scss        | 31 +++++++++++++-
 tsconfig.json                 |  2 +-
 6 files changed, 86 insertions(+), 42 deletions(-)
 create mode 100644 src/custom.d.ts

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 27dc1c1..afb9012 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,47 +1,51 @@
-import React from "react";
+import React from 'react';
 
 const Footer = () => {
   const social = [
-    { name: "Instagram", href: "#" },
-    { name: "Dribbble", href: "#" },
-    { name: "Behance", href: "#" },
-    { name: "Twitter", href: "#" },
-    { name: "Facebook", href: "#" },
-    { name: "YouTube", href: "#" },
+    { name: 'Instagram', href: '#' },
+    { name: 'Dribbble', href: '#' },
+    { name: 'Behance', href: '#' },
+    { name: 'Twitter', href: '#' },
+    { name: 'Facebook', href: '#' },
+    { name: 'YouTube', href: '#' },
   ];
   return (
-    <footer className="bg-black text-white">
-      <div className="container mx-auto">
-        <div className="flex flex-col md:py-30 pt-12 pb-20 md:gap-24 gap-16">
-          {/* <div>
-            <h3 className="md:text-display-xl text-display-md font-semibold pb-4">
-              Have an idea?
-            </h3>
-            <a
-              href="/"
-              className="md:text-display-xl text-display-md font-normal hover:text-primary-100 hover:underline">
-              Let’s talk ↗
-            </a>
-          </div>
-          <div className="flex md:flex-row flex-col md:gap-8 gap-12 justify-between">
-            <div>
-              <a
-                href="mailto:hello@landify.design"
-                className="md:text-display-xs text-body-xl font-medium text-neutral-200 hover:text-primary-100 hover:underline">
-                hello@landify.design
-              </a>
+    <footer className='bg-black text-white'>
+      <div className='container mx-auto'>
+        <div className='flex flex-col md:py-20 pt-12 pb-16 md:gap-24 gap-16 relative'>
+          <div className='grid lg:grid-cols-12 md:grid-cols-12 sm:grid-cols-12 xl:gap-8 gap-4 items-center relative'>
+            <div className='lg:col-span-3 sm:col-span-4  h-full flex flex-col sm:items-start items-center mb-5'>
+              <p className='text-body-lg font-medium'>Company</p>
+              <p className='text-body-sm text-neutral-300'>About</p>
+              <p className='text-body-sm text-neutral-300'>Jobs</p>
+              <p className='text-body-sm text-neutral-300'>Contact</p>
+            </div>
+
+            <div className='lg:col-span-3 sm:col-span-4 h-full flex flex-col sm:items-start items-center mb-5'>
+              <p className='text-body-lg font-medium'>Legal</p>
+              <p className='text-body-sm text-neutral-300'>Cookies Policy</p>
+              <p className='text-body-sm text-neutral-300'>
+                Terms & Conditions
+              </p>
+              <p className='text-body-sm text-neutral-300'>Contact</p>
             </div>
-            <div className="grid md:grid-cols-3 grid-cols-2 md:gap-12 gap-3 md:pl-32">
-              {social.map((item) => (
-                <a
-                  key={item.name}
-                  href={item.href}
-                  className="md:text-body-xl text-body-md font-normal text-neutral-200 hover:text-primary-100">
-                  {item.name}
-                </a>
-              ))}
+            <div className='lg:col-span-3 sm:col-span-4 h-full flex flex-col sm:items-start items-center mb-5'>
+              <p className='text-body-lg font-medium'>Follow us</p>
+              <p className='text-body-sm text-neutral-300'>LinkedIn</p>
+              <p className='text-body-sm text-neutral-300'>Twitter</p>
             </div>
-          </div> */}
+          </div>
+
+          <div className='footer-logo'>
+            <div className='line'></div>
+            <img
+              src='https://cdn.wia.io/website/images/svg/wia-logo-light.svg'
+              alt=''
+            />
+          </div>
+          <p className='all-rigths text-body-sm text-neutral-300'>
+            © 2024 Wia Technologies Limited. All rights reserved.
+          </p>
         </div>
       </div>
     </footer>
diff --git a/src/components/talk-to-us.tsx b/src/components/talk-to-us.tsx
index 86450c0..696a2a9 100644
--- a/src/components/talk-to-us.tsx
+++ b/src/components/talk-to-us.tsx
@@ -21,19 +21,19 @@ const TalkToUs = () => {
             />
           </div>
           <div className='grid lg:grid-cols-12 grid-cols-1 xl:gap-8 gap-4 items-center relative'>
-            <div className='lg:col-span-4 md:col-span-4 flex flex-row items-center mb-5'>
+            <div className='lg:col-span-4 md:col-span-4 flex flex-row items-center justify-center mb-2'>
               <img src={CHECK} alt='UI' className='mr-2' />
               <p className='text-body-md font-normal text-white'>
                 Deploy at any location
               </p>
             </div>
-            <div className='lg:col-span-4 md:col-span-4 flex flex-row items-center mb-5'>
+            <div className='lg:col-span-4 md:col-span-4 flex flex-row items-center justify-center mb-2'>
               <img src={CHECK} alt='UI' className='mr-2' />
               <p className='text-body-md font-normal text-white'>
                 One stop shop with end-to-end solutions
               </p>
             </div>
-            <div className='lg:col-span-4 md:col-span-4 flex flex-row items-center mb-5'>
+            <div className='lg:col-span-4 md:col-span-4 flex flex-row items-center justify-center mb-2'>
               <img src={CHECK} alt='UI' className='mr-2' />
               <p className='text-body-md font-normal text-white'>
                 Future proofed with AI enabled analytics
diff --git a/src/custom.d.ts b/src/custom.d.ts
new file mode 100644
index 0000000..7ee2392
--- /dev/null
+++ b/src/custom.d.ts
@@ -0,0 +1,10 @@
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+
+  const src: string;
+  export default src;
+}
diff --git a/src/styles/button.scss b/src/styles/button.scss
index 47dd3aa..c2749ff 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -12,3 +12,4 @@
   z-index: 9999;
   width: 93px;
 }
+
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index a2ac329..024c0a1 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -115,4 +115,33 @@
 
 .talk-to-us-section {
   background: var(--primary-600);
-}
\ No newline at end of file
+}
+
+footer {
+  .footer-logo {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    .line {
+      width: 100%;
+      height: 1px;
+      background: #ffffff;
+      position: absolute;
+      top: 50%;
+      opacity: 0.2;
+    }
+    img {
+      height: 42px;
+      width: auto;
+      z-index: 99;
+      background: rgb(0 0 0 / var(--tw-bg-opacity));
+      padding: 0 24px;
+    }
+  }
+  .all-rigths {
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    bottom: 32px;
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index 25419bb..c76ac29 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -98,5 +98,5 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
   },
-  "include": ["./src/**/*", "./gatsby-node.ts", "./gatsby-config.ts", "./plugins/**/*"]
+  "include": ["./src/**/*", "./gatsby-node.ts", "./gatsby-config.ts", "./plugins/**/*", "src/custom.d.ts"]
 }