Merge pull request #5 from uninus-opensource/feat/modules-herosection_v1

feat: fix hero section_v1

src/apps/home/default.tsx

@@ -0,0 +1,12 @@
+import { Navbar } from "@/components";
+import { Hero } from "./modules";
+import { FC, ReactElement } from "react";
+
+export const LandingPage: FC = (): ReactElement => {
+  return (
+    <>
+      <Navbar />
+      <Hero />
+    </>
+  );
+};

src/apps/home/modules/about.tsx

@@ -0,0 +1,9 @@
+import { FC, ReactElement } from "react";
+
+export const About: FC = (): ReactElement => {
+  return (
+    <section>
+      <div></div>
+    </section>
+  );
+};

src/apps/home/modules/hero.tsx

@@ -0,0 +1,19 @@
+import { FC, ReactElement } from "react";
+
+export const Hero: FC = (): ReactElement => {
+  return (
+    <section className="flex w-full min-h-2 items-center justify-center gap-x-56 px-16 bg-gray-200">
+      <div className="w-1/2">
+        <h2 className="font-bold text-4xl mb-3">GLORY HIMATIF</h2>
+        <p>Welcome to Himpunan Mahasiswa Teknik Informatika</p>
+        <p className="mb-6">Universitas Islam Nusantara</p>
+        <button className="bg-blue-900 py-1 px-3 text-center text-white font-semibold rounded">
+          Masuk
+        </button>
+      </div>
+      <div className="w-1/2 flex justify-end">
+        <img src="/Logo.png" className="w-[400px]" alt="Himatif" />
+      </div>
+    </section>
+  );
+};

src/apps/home/modules/index.ts

@@ -1 +1 @@
-export * from "./homepage";
+export * from "./hero";

src/apps/main.tsx

@@ -1,9 +1,9 @@
 import { createBrowserRouter } from "react-router-dom";
-import { Homepage } from "./home/modules/homepage";
+import { LandingPage } from "./home/default";
 
 export const router = createBrowserRouter([
   {
     path: "/",
-    element: <Homepage />,
+    element: <LandingPage />,
   },
 ]);

src/components/atoms/index.ts

@@ -1 +1 @@
-export * from "./button";
+export {};

src/components/organisms/navbar/navbar.tsx

@@ -6,7 +6,7 @@ export const Navbar: FC = (): ReactElement => {
   const [navMenu, setNavMenu] = useState(false);
 
   return (
-    <header className="flex md:px-6 relative bg-white w-full h-20">
+    <header className="flex md:px-6 relative bg-gray-200 w-full h-20">
       <section className="flex w-full px-2 justify-between items-center">
         <figure className="flex items-center gap-x-2 font-bold text-black text-3xl">
           <figcaption>HIMATIF UNINUS</figcaption>
@@ -26,14 +26,16 @@ export const Navbar: FC = (): ReactElement => {
           </ul>
         </nav>
       </section>
-      {navMenu && (
-        <div className="h-32 py-2 w-full bg-gray-400 mt-20 absolute">
+      {navMenu ? (
+        <div className="h-32 py-2 w-full bg-gray-200 mt-20 absolute">
           <ul className="flex flex-col gap-y-3 items-center justify-center text-white text-xl">
             <Link to={"/"}>Home</Link>
             <Link to={"/"}>News</Link>
             <Link to={"/"}>Articles</Link>
           </ul>
         </div>
+      ) : (
+        <></>
       )}
     </header>
   );