Footer

wiaio · Jan 31, 2024 · c2840e9 · c2840e9
1 parent fa71ee9
commit c2840e9
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 42 deletions.
diff --git 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
@@ -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
@@ -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
@@ -12,3 +12,4 @@
   z-index: 9999;
   width: 93px;
 }
+
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -115,4 +115,33 @@
 
 .talk-to-us-section {
   background: var(--primary-600);
-}
+}
+
+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
@@ -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"]
 }