update: UI/UX of footer

add: companyDataConstants
28softwares · Oct 5, 2024 · 1292135 · 1292135
1 parent da03f17
commit 1292135
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 39 deletions.
diff --git a/src/UI/pages/Contact.tsx b/src/UI/pages/Contact.tsx
@@ -1,5 +1,5 @@
-import { Link } from "@tanstack/react-router";
-import { RectButton } from "./RectButton";
+import { companyDataConstants } from '@/constants/companyData.constant'
+import { RectButton } from './RectButton'
 
 export const Contact = () => {
   return (
@@ -13,21 +13,14 @@ export const Contact = () => {
           type="text"
           value="[email protected]"
         ></input>
-        <RectButton
-          tailwind_class="btn-primary rounded-l-none  h-full  absolute top-0  right-0 border-black dark:border-white active:scale-100"
-          label="Send Email"
-        />
-      </div>
-      <div className="mx-auto">
-        <Link to={"/faq"}>
+        <a href={`mailto:${companyDataConstants.email}`}>
           <RectButton
-            tailwind_class="btn-secondary border bg-yellow-tertiary border-black dark:border-white"
-            label="Need help?"
+            tailwind_class="btn-primary rounded-l-none  h-full  absolute top-0  right-0 border-black dark:border-white active:scale-100"
+            label="Send Email"
           />
-        </Link>
+        </a>
       </div>
-      <div></div>
     </div>
     // </div>
-  );
-};
+  )
+}
diff --git a/src/UI/pages/Footer.tsx b/src/UI/pages/Footer.tsx
@@ -1,36 +1,39 @@
 import { Button } from '@/UI/shadcn/ui/button'
-import { Link } from '@tanstack/react-router'
+import { companyDataConstants } from '@/constants/companyData.constant'
 import { Linkedin, MapPin } from 'lucide-react'
 
 export const Footer = () => {
   return (
-    <footer className="max-w-4xl mx-auto w-full grid sm:grid-cols-2 gap-8 pt-8">
-      <div className="space-y-4">
-        <h2 className="text-2xl font-semibold tracking-tight">CONTACT US</h2>
-        <p>Lokanthali, Bhaktapur</p>
-        <p className="flex items-center gap-2">
-          <MapPin className="h-5 w-5" />
-          Bhaktapur, Nepal
-        </p>
-      </div>
-      <div className="space-y-4">
-        <h2 className="text-2xl font-semibold tracking-tight">FOLLOW US</h2>
-        <div className="flex gap-4">
-          <Link
-            to="https://linkedin.com/company/28softwares"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <Button variant="ghost" size="icon" className="hover:bg-gray-800">
-              <Linkedin className="h-6 w-6" />
-              <span className="sr-only">LinkedIn</span>
-            </Button>
-          </Link>
+    <footer className="p-10">
+      <div className="flex gap-10">
+        <div className="space-y-4">
+          <h2 className="text-2xl font-semibold tracking-tight">CONTACT US</h2>
+          <p>{companyDataConstants.address}</p>
+          <p className="flex items-center gap-2">
+            <MapPin className="h-5 w-5" />
+            Bhaktapur, Nepal
+          </p>
+        </div>
+        <div className="space-y-4">
+          <h2 className="text-2xl font-semibold tracking-tight">FOLLOW US</h2>
+          <div className="flex gap-4">
+            <a
+              href={companyDataConstants.socials.linkedin}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <Button variant="ghost" size="icon" className="hover:bg-gray-800">
+                <Linkedin className="h-6 w-6" />
+                <span className="sr-only">LinkedIn</span>
+              </Button>
+            </a>
+          </div>
         </div>
       </div>
 
       <div className="flex  justify-center font-ubuntu pb-10 text-center">
-        Copyright © 2024 | 28Softwares
+        Copyright © {companyDataConstants.foundedYear} -{' '}
+        {new Date().getFullYear()} | 28Softwares Pvt. Ltd.
       </div>
     </footer>
   )

diff --git a/src/constants/companyData.constant.ts b/src/constants/companyData.constant.ts
@@ -0,0 +1,11 @@
+export const companyDataConstants = {
+  name: '28Softwares',
+  address: 'Lokanthali, Bhaktapur',
+  location: 'Bhaktapur, Nepal',
+  foundedYear: 2024,
+  email: '[email protected]',
+
+  socials: {
+    linkedin: 'https://linkedin.com/company/28softwares/',
+  },
+}