Fix chingu-voyages#82: Fix the styling of the landing page

christianmacasinagrodriguez · christianmacasinagrodriguez · commit 38061c0dc679 · 2023-11-03T01:13:12.000+08:00
diff --git a/next.config.js b/next.config.js
@@ -2,3 +2,8 @@
 const nextConfig = {};
 
 module.exports = nextConfig;
+module.exports = {
+  images: {
+    domains: ['drive.google.com'],
+  },
+};
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
@@ -1,13 +1,18 @@
-import React from "react";
+import React from 'react';
 
-import LoginForm from "@/components/LoginForm/LoginForm";
+import LoginForm from '@/components/LoginForm/LoginForm';
+import Navbar from '@/components/Navbar/Navbar';
+import Footer from '@/components/Footer/Footer';
 
 const LoginPage = () => {
   return (
-    <main className="w-full h-fit min-h-screen flex items-center justify-start overflow-y-auto flex-col py-32 bg-[#FAFAFA]">
-      <LoginForm />
- 
-    </main>
+    <>
+      <Navbar />
+      <main className="w-full h-fit min-h-screen flex items-center justify-start overflow-y-auto flex-col py-10 bg-[#FAFAFA]">
+        <LoginForm />
+      </main>
+      <Footer />
+    </>
   );
 };
 
diff --git a/src/app/(auth)/register/page.tsx b/src/app/(auth)/register/page.tsx
@@ -1,15 +1,19 @@
-import RegistrationForm from "@/components/RegistrationForm/RegistrationForm";
+import Footer from '@/components/Footer/Footer';
+import Navbar from '@/components/Navbar/Navbar';
+import RegistrationForm from '@/components/RegistrationForm/RegistrationForm';
 
-import React from "react";
+import React from 'react';
 
 const RegistrationPage = () => {
   return (
-    <main className="w-full h-fit min-h-screen flex items-center justify-start overflow-y-auto flex-col py-32 bg-[#FAFAFA]">
-      <RegistrationForm />
-  
-    </main>
+    <>
+      <Navbar />
+      <main className="w-full h-fit min-h-screen flex items-center justify-start overflow-y-auto flex-col py-10 bg-[#FAFAFA]">
+        <RegistrationForm />
+      </main>
+      <Footer />
+    </>
   );
 };
 
 export default RegistrationPage;
-
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -62,8 +62,8 @@
   margin-left: 1910px;
 }
 
-.home-img {
+/* .home-img {
   /* TODO: Fix error*/
-  background-image: url('/assets/images/background.jpg');
+/* background-image: url('/assets/images/background.jpg');
   background-size: cover;
-}
+} */
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -3,16 +3,16 @@
 import { signIn, signOut, useSession } from 'next-auth/react';
 import LandingPage from '@/components/LandingPage/LandingPage';
 import Navbar from '@/components/Navbar/Navbar';
-import Footer from "@/components/Footer/Footer";
+import Footer from '@/components/Footer/Footer';
 
 export default function Home() {
   const { data: session } = useSession();
 
   return (
     <div>
-      <Navbar /> 
-      <main className="home-img">
-        {session ? (
+      <Navbar />
+      <main className="home-img overflow-x-hidden">
+        {/* {session ? (
           <div>
             <span>
               <h2>Welcome! {session?.user?.name ?? session?.user?.email ?? 'friend'}</h2>
@@ -24,7 +24,8 @@ export default function Home() {
         )}
         <div>
           <LandingPage />
-        </div>
+        </div> */}
+        <LandingPage />
       </main>
       <Footer />
     </div>
diff --git a/src/components/LandingPage/LandingPage.tsx b/src/components/LandingPage/LandingPage.tsx
@@ -1,17 +1,35 @@
-import Feed from "@/components/Feed/Feed";
+import Feed from '@/components/Feed/Feed';
+import Image from 'next/image';
+import Link from 'next/link';
 
 const LandingPage = () => {
   return (
-    <div className="flex flex-col min-h-screen"> 
-      <section className="flex-grow pb-4">
-        <div>
-          <h1 className="text-center font-extrabold text-2xl text-white">Discover the easiest way to save and organize your favorite URLs with our intuitive bookmarking app</h1>
-          <p className="text-center font-semibold text-lg text-white">Capture, Categorize, and Share with Ease</p>
-          <Feed />
-        </div>
-      </section>
-    </div>
+    <section className="relative h-screen w-screen flex flex-col justify-center items-center">
+      <Image
+        className="h-screen w-full absolute inset-0 object-cover object-center"
+        width={3000}
+        height={2000}
+        src="https://drive.google.com/uc?id=1ELKF9ujWbkq8kZOP9BBUGS-qvPbIBpf1"
+        alt="Landing page bakground image"
+      />
+      <div className="h-screen w-screen absolute inset-0 bg-gradient-to-r from-[#2d2d2d] to-[#0000001A]" />
+      <div className="z-[1] h-fit max-w-5xl flex flex-col gap-5 px-[5%]">
+        <h1 className="text-center font-extrabold text-3xl md:text-6xl text-white tracking-wider leading-tight">
+          Discover the easiest way to save and organize your <span className="text-[#633CFF]">favorite</span> URLs with
+          our intuitive bookmarking app
+        </h1>
+        <p className="text-center font-semibold text-xs md:text-lg text-white mb-10">
+          Capture, Categorize, and Share with Ease
+        </p>
+        <Link
+          className="h-fit w-fit py-5 px-10 text-white font-bold text-md bg-[#633CFF] rounded-md self-center hover:bg-slate-50 hover:text-[#633CFF] transition-all duration-500"
+          href="/register"
+        >
+          Get Started
+        </Link>
+      </div>
+    </section>
   );
-}
+};
 
 export default LandingPage;
diff --git a/src/components/LoginForm/LoginForm.tsx b/src/components/LoginForm/LoginForm.tsx
@@ -28,7 +28,7 @@ const LoginForm = () => {
   const [password, setPassword] = useState('');
 
   return (
-    <form onSubmit={validateLogin} className="h-fit w-fit bg-transparent">
+    <form onSubmit={validateLogin} className="h-fit w-fit bg-transparent dark:bg-black">
       <div className="w-full h-fit flex flex-col justify-center items-center pb-10">
         <svg xmlns="http://www.w3.org/2000/svg" width="64" height="62" fill="none">
           <path
@@ -84,10 +84,10 @@ const LoginForm = () => {
             type="submit"
             value="Login"
           />
-          <fieldset className="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-4">
-            <div className="h-[1px] w-full bg-black flex self-center"></div>
-            <h5 className="text-black w-full text-center col-span-2">OR CONTINUE WITH</h5>
-            <div className="h-[1px] w-full bg-black flex self-center"></div>
+          <fieldset className="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-4 place-items-center">
+            <div className="h-[1px] w-2/5 md:w-full lg:w-full xl:w-full bg-[#D9D9D9] flex self-center"></div>
+            <h5 className="text-[#737373] w-full text-center col-span-2">OR CONTINUE WITH</h5>
+            <div className="h-[1px] w-1/5 md:w-full lg:w-full xl:w-full bg-[#D9D9D9] flex self-center"></div>
           </fieldset>
           <OAuthButtons />
           <p className="text-[#737373] text-center">
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -1,7 +1,8 @@
-"use client";
-import { useState } from "react";
-import { signOut } from "next-auth/react";
-import { BsFillMoonStarsFill } from "react-icons/bs";
+'use client';
+import { useState } from 'react';
+import { signOut } from 'next-auth/react';
+import { BsFillMoonStarsFill } from 'react-icons/bs';
+import Link from 'next/link';
 
 function Navbar() {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -16,60 +17,88 @@ function Navbar() {
   };
 
   return (
-    <div className={darkMode ? "dark" : ""}>
-    <nav className="border-gray-200 bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
-      <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
-        <a href="#" className="flex items-center">
-          <img src="/assets/images/pagepocket-logo.jpg" className="h-8 mr-3" alt="Page Pocket Logo" />
-          <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Page Pocket</span>
-        </a>
-        <div className="flex items-center"> {/* Container for icons */}
-          <button
-            data-collapse-toggle="navbar-hamburger"
-            type="button"
-            className="inline-flex items-center justify-center p-2 w-10 h-10 ml-3 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover-bg-gray-700 dark:focus:ring-gray-600"
-            aria-controls="navbar-hamburger"
-            aria-expanded={isDropdownOpen}
-            onClick={toggleDropdown}
-          >
-            <span className="sr-only">Open main menu</span>
-            <svg
-              className="w-5 h-5"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 17 14"
+    <div className={darkMode ? 'dark' : ''}>
+      <nav className="border-gray-200 bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
+        <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+          <a href="/" className="flex items-center">
+            <img src="/assets/images/pagepocket-logo.jpg" className="h-8 mr-3" alt="Page Pocket Logo" />
+            <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Page Pocket</span>
+          </a>
+          <div className="flex items-center gap-5">
+            {' '}
+            {/* Container for icons */}
+            <button
+              data-collapse-toggle="navbar-hamburger"
+              type="button"
+              className="inline-flex items-center justify-center p-2 w-10 h-10 ml-3 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover-bg-gray-700 dark:focus:ring-gray-600"
+              aria-controls="navbar-hamburger"
+              aria-expanded={isDropdownOpen}
+              onClick={toggleDropdown}
             >
-              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
-            </svg>
-          </button>
-          <BsFillMoonStarsFill
-            onClick={() => setDarkMode(!darkMode)}
-            className="cursor-pointer text-2xl ml-3" // Add margin for spacing
-          />
-        </div>
+              <span className="sr-only">Open main menu</span>
+              <svg
+                className="w-5 h-5"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 17 14"
+              >
+                <path
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M1 1h15M1 7h15M1 13h15"
+                />
+              </svg>
+            </button>
+            <BsFillMoonStarsFill
+              onClick={() => setDarkMode(!darkMode)}
+              className="cursor-pointer text-2xl ml-3" // Add margin for spacing
+            />
+            <Link className=" font-bold dark:text-white dark:hover:text-[#633CFF] hover:text-[#633CFF]" href="/login">
+              Login
+            </Link>
+          </div>
           <div className={`w-full ${isDropdownOpen ? 'block' : 'hidden'}`} id="navbar-hamburger">
             <ul className="flex flex-col font-medium mt-4 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
               <li>
-                <a href="/profile" className="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded dark:bg-blue-600" aria-current="page" onClick={closeDropdown}>
+                <a
+                  href="/profile"
+                  className="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded dark:bg-blue-600"
+                  aria-current="page"
+                  onClick={closeDropdown}
+                >
                   Profile
                 </a>
               </li>
               <li>
-                <a href="/register" className="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 dark:text-gray-400 dark:hover-bg-gray-700 dark:hover:text-white" onClick={closeDropdown}>
+                <a
+                  href="/register"
+                  className="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 dark:text-gray-400 dark:hover-bg-gray-700 dark:hover:text-white"
+                  onClick={closeDropdown}
+                >
                   Sign Up
                 </a>
               </li>
               <li>
-                <a href="/login" className="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 dark:text-gray-400 md:dark:hover-text-white dark:hover-bg-gray-700 dark:hover:text-white" onClick={closeDropdown}>
+                <a
+                  href="/login"
+                  className="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 dark:text-gray-400 md:dark:hover-text-white dark:hover-bg-gray-700 dark:hover:text-white"
+                  onClick={closeDropdown}
+                >
                   Login
                 </a>
               </li>
               <li>
-                <a href="#" className="block py-2 pl-3 pr-4 text-gray-900 rounded hover-bg-gray-100 dark:text-gray-400 dark:hover-bg-gray-700 dark:hover:text-white" onClick={() => {
-                  closeDropdown();
-                  signOut();
-                }}>
+                <a
+                  href="#"
+                  className="block py-2 pl-3 pr-4 text-gray-900 rounded hover-bg-gray-100 dark:text-gray-400 dark:hover-bg-gray-700 dark:hover:text-white"
+                  onClick={() => {
+                    closeDropdown();
+                    signOut();
+                  }}
+                >
                   Sign Out
                 </a>
               </li>
