Merge pull request #179 from panntod/development

Landing page and News revision progress
mokletdev · May 29, 2024 · b64af70 · b64af70
2 parents 95bf5b5 + 35c384e
commit b64af70
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -54,4 +54,4 @@
     "tailwindcss": "^3.4.3",
     "typescript": "^5"
   }
-}
+}
diff --git a/src/app/_components/global/Button.tsx b/src/app/_components/global/Button.tsx
@@ -22,7 +22,7 @@ export function PrimaryButton({
       disabled={isDisabled}
       className={
         className +
-        " inline-block w-fit rounded-full bg-primary-400 px-6 py-3 transition-all duration-500 hover:bg-primary-500 disabled:bg-neutral-300"
+        " inline-block w-fit rounded-full bg-primary-400 px-6 py-3 h-[54px] transition-all duration-500 hover:bg-primary-500 disabled:bg-neutral-300"
       }
     >
       <span

diff --git a/src/app/_components/global/Input.tsx b/src/app/_components/global/Input.tsx
@@ -115,7 +115,7 @@ export function TextArea({
         required={required}
         defaultValue={value}
         id={name}
-        className="h-[144px] rounded-xl border border-neutral-500 px-[18px] active:border-black hover:border-black py-[14px] text-black placeholder-neutral-500 focus:outline-none transition-all duration-500"
+        className="h-[144px] rounded-2xl border border-neutral-400 px-[18px] focus:border-black hover:border-black py-[14px] text-black placeholder-neutral-400 focus:outline-none transition-all duration-500"
       />
     </div>
   );
@@ -145,7 +145,7 @@ export function SelectField({
       <select
         name={name}
         defaultValue={value}
-        className="rounded-xl border border-neutral-400 px-[18px] active:border-black hover:border-black py-[14px] text-black placeholder-neutral-500 focus:outline-none transition-all duration-500"
+        className="rounded-xl border border-neutral-400 px-[18px] active:border-black hover:border-black py-[14px] text-black placeholder-neutral-400 focus:outline-none transition-all duration-500"
         id={name}
         required={required}
         onChange={handleChange}

diff --git a/src/app/_components/global/Navbar.tsx b/src/app/_components/global/Navbar.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import Image from "next/image";
 import HamburgerIcon from "../icons/HamburgerIcon";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 interface NavOption {
   title: string;
@@ -21,7 +21,18 @@ const navOptions: NavOption[] = [
 export default function Navbar() {
   const pathname = usePathname();
   const [isExpanded, setIsExpanded] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
 
+  useEffect(() => {
+    function handleScroll() {
+      setScrolled(window.scrollY > 80);
+    }
+
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  console.log(scrollY);
   return (
     <nav className="xl:relative fixed z-[999] mx-auto w-full flex flex-col">
       <div className="w-full flex xl:max-w-[1192px] z-[999] py-4 xl:py-0 px-5 bg-white xl:bg-transparent justify-between">
@@ -34,7 +45,18 @@ export default function Navbar() {
             className="pointer-events-none h-[50px] w-[130px]"
           />
         </Link>
-        <div className="fixed hidden left-1/2 top-[24.5px] xl:flex w-full max-w-[602px] -translate-x-1/2 justify-between rounded-full border border-neutral-300 bg-white px-[50px] py-3">
+        <div
+          className={`fixed hidden left-1/2 top-[24.5px] xl:flex w-full ${scrolled ? "max-w-[826px]" : "max-w-[602px]"} -translate-x-1/2 justify-between rounded-full border border-neutral-300 bg-white px-[50px] py-3 shadow-md`}
+        >
+          {scrolled && (
+            <Image
+              src={"/horizontal.svg"}
+              alt="Logo moklet.org"
+              width={120}
+              height={40}
+              className="pointer-events-none h-[40px] w-[120px]"
+            />
+          )}
           {navOptions.map((navOption) => (
             <Link
               key={navOption.title}

diff --git a/src/app/_components/parts/Opinions/index.tsx b/src/app/_components/parts/Opinions/index.tsx
@@ -58,7 +58,7 @@ export default function Opinions() {
               />
             </div>
           </div>
-          <div className="flex w-full md:w-[25%] items-center justify-center rounded-2xl border border-neutral-400 px-[28px] py-[32px]">
+          <div className="flex w-full md:w-[25%] justify-center rounded-2xl border border-neutral-400 px-[28px] py-[32px]">
             <Saying
               personData={{
                 name: "Budi Prasetyo",
-Original file line number
+Diff line change
@@ Expand Up / @@ -54,4 +54,4 @@ @@
         "tailwindcss": "^3.4.3",
         "typescript": "^5"
       }
-    }
+    }