alizul01 · alizul01 · Jan 5, 2023 · Jan 5, 2023 · Jan 5, 2023 · Jan 5, 2023
diff --git a/app/head.tsx b/app/head.tsx
@@ -1,7 +1,47 @@
+// import next script
+import Script from "next/script";
 export default function Head() {
   return (
     <>
-      <title>Home | Politribe</title>
+      <meta charSet="UTF-8" />
+      <link rel="shortcut icon" href="/favicon.png" type="image/x-icon" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <meta name="description" content="Description of my website" />
+      <meta name="robots" content="index,follow" />
+      <link rel="canonical" href="URL for this page" />
+      <meta property="og:title" content="My Website" />
+      <meta property="og:locale" content="en_GB (or other locality code)" />
+      <meta property="og:description" content="Description of my website" />
+      <meta property="og:image" content="Image URL representing my website" />
+      <meta property="og:image:width" content="Image Width" />
+      <meta property="og:image:height" content="Image Height" />
+      <meta
+        property="og:image:alt"
+        content="Image alternative text, if the image is missing"
+      />
+      <meta
+        property="og:image:type"
+        content="image/png (or other i.e. image/jpeg, image/gif)"
+      />
+      <meta property="og:url" content="URL for this page" />
+      <meta property="og:site_name" content="My Website" />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:site" content="/" />
+      <meta name="twitter:title" content="SEO HTML Meta Tag Reference List" />
+      <meta name="twitter:creator" content="" />
+      <meta
+        name="twitter:description"
+        content="A list of all the useful meta tags, and a quick start HTML template"
+      />
+      <meta
+        name="twitter:image"
+        content="/"
+      />
+      <meta name="viewport" content="initial-scale=1, maximum-scale=1" />
+      <Script
+        async
+        src="https://www.googletagmanager.com/gtag/js?id=G-[[ID HERE]]"
+      />
     </>
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { PropsWithChildren } from "react";
+import Footer from "~/components/Footer";
 import { Navbar } from "~/components/Navbar";
 import "~/styles/globals.css";
 
@@ -7,17 +8,14 @@ export default function RootLayout(props: PropsWithChildren<{}>) {
     <>
       <html lang="en">
         <head>
-          <meta charSet="UTF-8" />
-          <link rel="shortcut icon" href="/favicon.png" type="image/x-icon" />
-          <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1.0"
-          />
           <title>Politribe</title>
         </head>
-        <body>
-          <Navbar />
-          <main className="m-8">{props.children}</main>
+        <body className="flex justify-between flex-col">
+          <div>
+            <Navbar />
+            <main className="m-8">{props.children}</main>
+          </div>
+          <Footer />
         </body>
       </html>
     </>

diff --git a/app/#/page.tsx b/app/#/page.tsx
@@ -1,13 +1,11 @@
+/* eslint-disable react/display-name */
 import React from "react";
 import Link from "next/link";
 
 const LoginPage: React.FC = React.memo(() => {
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-  }
   return (
     <section className={"w-full flex justify-center items-center"}>
-      <form className={"space-y-6 bg-slate-800 border border-slate-700 rounded-lg p-6 md:p-8 md:w-[30%]"}>
+      <form className={"space-y-6 bg-slate-800 border border-slate-700 rounded-lg p-8 w-[70%] lg:w-[30%]"}>
         <h5 className={"text-xl font-medium text-slate-100 "}>
           Login to Politribe
         </h5>

diff --git a/app/page.tsx b/app/page.tsx
@@ -8,7 +8,7 @@ const contributors = [
     name: 'Ali Zulfikar',
     avatarUrl: 'https://avatars.githubusercontent.com/u/62384197?v=4',
     githubUrl: 'https://github.com/alizul01',
-    jobDesc: 'Initiator & Front-end'
+    jobDesc: 'Owner & Front-end'
   },
   {
     name: 'Elianiva',

diff --git a/app/register/page.tsx b/app/register/page.tsx
@@ -1,13 +1,11 @@
+/* eslint-disable react/display-name */
 import React from "react";
 import Link from "next/link";
 
 const RegisterPage: React.FC = React.memo(() => {
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-  }
   return (
     <section className={"w-full flex justify-center items-center my-5"}>
-      <form className={"space-y-6 bg-slate-800 border border-slate-700 rounded-lg p-6 md:p-8 md:w-[30%]"}>
+       <form className={"space-y-6 bg-slate-800 border border-slate-700 rounded-lg p-8 w-[70%] lg:w-[30%]"}>
         <h5 className={"text-xl font-medium text-slate-100 "}>
           Register to Politribe
         </h5>

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+const Footer: React.FC = () => {
+  return (
+    <footer className="p-4 bg-slate-800 justify-center flex flex-col md:flex-row items-center md:justify-between md:p-6">
+      <span className="text-sm text-gray-300 sm:text-center">
+        © 2023{" "}
+        <a href="https://polinema-innovation-tribe.vercel.app" className="hover:underline">
+          Politribe™
+        </a>
+        . All Rights Reserved.
+      </span>
+      <ul className="flex flex-wrap items-center mt-3 text-sm text-gray-300 sm:mt-0">
+        <li>
+          <a href="/about" className="mr-4 hover:underline md:mr-6 ">
+            About
+          </a>
+        </li>
+        <li>
+          <a href="/privacy" className="mr-4 hover:underline md:mr-6">
+            Privacy Policy
+          </a>
+        </li>
+        <li>
+          <a href="/contributing" className="mr-4 hover:underline md:mr-6">
+            Contributing
+          </a>
+        </li>
+        <li>
+          <a href="/contact" className="hover:underline">
+            Contact
+          </a>
+        </li>
+      </ul>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/parts/HomePage/Hero.tsx b/parts/HomePage/Hero.tsx
@@ -13,25 +13,29 @@ const Hero: React.FC = () => {
         <h4 className="text-center text-sm md:text-lg text-purple-400 font-semibold capitalize pb-2">
           Leading the way with innovative thinking
         </h4>
-        <h1 className="text-4xl md:text-7xl text-white font-bold text-center">
+        <h1 className="text-5xl md:text-7xl text-white font-bold text-center">
           <span>Unleash Your</span> Creativity With Politribe
         </h1>
       </div>
-      <div className="pt-12">
-        <h4 className="text-center text-lg md:text-xl font-semibold text-slate-400">
-          Discover your full potential with Polinema&apos;s innovative team
+      <div className="pt-12 max-w-4xl">
+        <h4 className="text-center text-lg md:text-xl font-normal text-slate-400">
+          <span>Join us and let your creativity and innovation shine as we work together to bring new ideas to life. With Politribe, the possibilities are endless.</span>
         </h4>
       </div>
-      <div className="pt-12 md:pt-12 flex flex-row gap-3 text-xs md:text-lg">
+      <div className="pt-12 md:pt-12 flex justify-center items-center flex-row space-x-8 md:space-x-12 text-xs md:text-lg">
         <button className="rounded-lg bg-gradient-to-r from-purple-500 to-blue-500 text-white px-4 py-2.5 font-semibold flex gap-2 justify-center items-center hover:shadow-slate-50 hover:shadow-sm transition ease-in-out duration-600">
           Get Started <ArrowRightCircleIcon color={"white"} fontSize={"18"} />
         </button>
-        <button className="rounded-lg bg-slate-700 px-4 py-2.5 font-semibold flex gap-2 justify-center items-center hover:shadow-slate-50 hover:shadow-sm transition ease-in-out duration-600">
-          <span className="text-transparent bg-clip-text bg-gradient-to-r from-slate-100 to-slate-50 ">
+
+        <div className={"relative"}>
+          <div className={"absolute inset-0.5 bg-gradient-to-r from-purple-500 to-blue-500 rounded-lg blur opacity-75"} />
+          <button className="relative bg-slate-800 rounded-lg px-4 py-2.5 font-semibold flex gap-2 justify-center items-center">
+          <span className="text-slate-50 ">
             How it Works?
           </span>
-          <QuestionMarkCircleIcon color={"white"} fontSize={"18"} />
-        </button>
+            <QuestionMarkCircleIcon color={"white"} fontSize={"18"} />
+          </button>
+        </div>
       </div>
     </section>
   );

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -8,7 +8,11 @@ module.exports = {
     "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        elblack: "#131A22",
+      }
+    },
   },
   plugins: [require("flowbite/plugin")],
 };