Merge pull request #57 from Vero-Ventures/feature/prettier-landing-page

Separates footer component from web page for other use
Vero-Ventures · May 17, 2024 · 56a4762 · 56a4762
2 parents 387ea56 + add5229
commit 56a4762
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 31 deletions.
diff --git a/src/app/page.js b/src/app/page.js
@@ -10,6 +10,7 @@ import React from 'react';
 import { useUser } from '@auth0/nextjs-auth0/client';
 import { redirect } from 'next/navigation';
 import Navbar from '@/components/ui/navbar';
+import Footer from '@/components/ui/footer';
 
 export default function Component() {
   const { user, error } = useUser();
@@ -108,37 +109,7 @@ export default function Component() {
           </div>
         </section>
       </main>
-      <footer className="bg-gray-900 p-6 md:py-12 w-full text-gray-50">
-        <div className="container max-w-7xl grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-8 text-sm">
-          <div className="grid gap-1">
-            <h3 className="font-semibold">Company</h3>
-            <Link href="#">About Us</Link>
-            <Link href="#">Our Team</Link>
-            <Link href="#">Careers</Link>
-            <Link href="#">News</Link>
-          </div>
-          <div className="grid gap-1">
-            <h3 className="font-semibold">Job Sites</h3>
-            <Link href="#">Indigenous</Link>
-            <Link href="#">New Comers</Link>
-            <Link href="#">People with Disabilities</Link>
-            <Link href="#">Vulnerable Youth</Link>
-            <Link href="#">Asylum-Refugees</Link>
-          </div>
-          <div className="grid gap-1">
-            <h3 className="font-semibold">Legal</h3>
-            <Link href="#">Privacy Policy</Link>
-            <Link href="#">Terms of Service</Link>
-            <Link href="#">Cookie Policy</Link>
-          </div>
-          <div className="grid gap-1">
-            <h3 className="font-semibold">Contact</h3>
-            <Link href="#">Support</Link>
-            <Link href="#">Sales</Link>
-            <Link href="#">Partnerships</Link>
-          </div>
-        </div>
-      </footer>
+      <Footer />
     </div>
   );
 }
diff --git a/src/components/ui/footer.jsx b/src/components/ui/footer.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import Link from 'next/link';
+
+function Footer() {
+  return (
+    <footer className="bg-gray-900 p-6 md:py-12 w-full text-gray-50">
+      <div className="container max-w-7xl grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-8 text-sm">
+        <div className="grid gap-1">
+          <h3 className="font-semibold">Company</h3>
+          <Link href="#">About Us</Link>
+          <Link href="#">Our Team</Link>
+          <Link href="#">Careers</Link>
+          <Link href="#">News</Link>
+        </div>
+        <div className="grid gap-1">
+          <h3 className="font-semibold">Job Sites</h3>
+          <Link href="#">Indigenous</Link>
+          <Link href="#">New Comers</Link>
+          <Link href="#">People with Disabilities</Link>
+          <Link href="#">Vulnerable Youth</Link>
+          <Link href="#">Asylum-Refugees</Link>
+        </div>
+        <div className="grid gap-1">
+          <h3 className="font-semibold">Legal</h3>
+          <Link href="#">Privacy Policy</Link>
+          <Link href="#">Terms of Service</Link>
+          <Link href="#">Cookie Policy</Link>
+        </div>
+        <div className="grid gap-1">
+          <h3 className="font-semibold">Contact</h3>
+          <Link href="#">Support</Link>
+          <Link href="#">Sales</Link>
+          <Link href="#">Partnerships</Link>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;