Feature

.github/workflows/deployment.yaml

@@ -9,12 +9,15 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
+      # Github Code Checkout Action
       - name: Git Checkout
         uses: actions/checkout@v4
 
+      # Install Dependencies for the application
       - name: Install Dependencies
         run: npm install
 
+      # Setting Up Cache for storing the dependencies
       - name: Setup caching
         uses: actions/cache@v4
         with:
@@ -25,8 +28,16 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
 
-
+      # Building the application
       - name: Build Application
         run: npm run build
 
+      # Login to Docker hub
+      - name: Login to Docker hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_PASSWORD }}
+
+
 

Dockerfile

@@ -0,0 +1,15 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package.json /app/
+
+RUN npm install
+
+COPY . /app/
+
+RUN npm run build
+
+EXPOSE 3000
+
+CMD ["npm", "start"]

app/_common/button/Button.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link"
+
+export enum ButtonType {
+    DEFAULT,
+    BUTTON_OUTLINE
+}
+
+export type ButtonProps = {
+    text: string,
+    type: ButtonType
+}
+
+const Button:React.FC<ButtonProps> = ({ text, type }) => {
+    return (
+        <Link href={"/"} className={`min-w-[42px] h-[42px] px-5 flex items-center justify-between text-white cursor-pointer border-0 bg-black rounded-lg text-base font-normal button ${type === ButtonType.BUTTON_OUTLINE ? 'button__outline !font-thin' : ''}`}>{ text }</Link>
+    )
+}
+
+export default Button

app/_components/header/Header.tsx

@@ -1,14 +1,27 @@
+'use client'
 import Link from "next/link"
 import Navigation from "../navigation/Navigation"
+import SearchBar from "../searchbar/SearchBar"
+import Button, { ButtonType } from "@/app/_common/button/Button"
+import { useState } from "react"
 
 export type HeaderProps = {
 
 }
 
 const Header:React.FC<HeaderProps> = ({}) => {
+
+    // Use state to save the state of the toggle
+    const [active, toggleActive] = useState<boolean>(false);
+
+    // Utility function to toggle active state
+    const handleToggle = () => {
+        toggleActive(!active);
+    }
+
     return (
         <header className="fixed w-full h-full mt-[50px]">
-            <div className="inner h-14 rounded-lg active flex items-center ps-1.5 pe-1.5">
+            <div className={`inner h-[54px] rounded-lg flex items-center ps-1.5 pe-1.5 transition ${active ? 'active' : ''}`}>
                 {/* Logo */}
                 <div className="flex items-center justify-between">
                     <Link href={"/"}>
@@ -18,10 +31,19 @@ const Header:React.FC<HeaderProps> = ({}) => {
                     </Link>
                 </div>
                 {/* Navigation */}
-                <Navigation />
+                <Navigation display={active} handleToggle={handleToggle}/>
                 {/* Search Bar */}
+                <SearchBar handleToggle={handleToggle} state={active}/>
                 {/* Login / Signup */}
+                <div className="flex items-center justify-between h-full gap-4 ml-5">
+                    <Link href={"/"} className="flex items-center justify-between font-bold text-base">Log in</Link>
+                    <Link href={"/"} className="flex items-center justify-between font-bold text-base">Sign Up</Link>
+                </div>
                 {/* Additional Buttons */}
+                <div className="flex items-center justify-between gap-4 ml-5">
+                    <Button text="Be Pro" type={ButtonType.DEFAULT} />
+                    <Button text="Submit Website" type={ButtonType.BUTTON_OUTLINE} />    
+                </div>
             </div>
         </header>
     )

app/_components/navigation/Navigation.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link"
 
+// List of navigations
 const defaultNavigationLinks = [
     {
         routeTo: "/",
@@ -28,18 +29,24 @@ const defaultNavigationLinks = [
     }
 ]
 
-export type NavigationProps = {}
+export type NavigationProps = {
+    display: boolean,
+    handleToggle?: () => void
+}
 
-const Navigation:React.FC<NavigationProps> = ({}) => {
+const Navigation:React.FC<NavigationProps> = ({ display, handleToggle }) => {
     return (
-        <nav className="flex items-center justify-between ms-[60px] gap-5">
+        // Navigation Wrapper
+        <nav className={`flex items-center justify-between ms-[60px] gap-5 transition ${display ? 'hidden' : ''}`}>
             {
                 defaultNavigationLinks.map(({routeTo, name, dropdown}, index) => {
                     return (
-                        <Link key={index} href={routeTo} className="flex items-center justify-between gap-2 text-base font-medium leading-8">
+                        // Navigation Links
+                        <Link key={index} href={routeTo} className="flex items-center justify-between gap-2 text-base font-medium leading-8" onClick={dropdown ? handleToggle : undefined}>
                             {name}
                             {
                                 dropdown && 
+                                // Dropdown icon
                                 <svg width="8" viewBox="0 0 20 20">
                                     <path d="M1.6,4.1c-0.4,0-0.9,0.2-1.2,0.5c-0.7,0.7-0.7,1.7,0,2.4l8.4,8.4c0.7,0.7,1.7,0.7,2.4,0L19.5,7 c0.7-0.7,0.7-1.7,0-2.4c-0.7-0.7-1.7-0.7-2.4,0L10,11.8L2.8,4.6C2.5,4.3,2.1,4.1,1.6,4.1z"></path>
                                 </svg>

app/_components/searchbar/SearchBar.tsx

@@ -0,0 +1,19 @@
+export type SearchProps = {
+    handleToggle: () => void,
+    state: boolean
+}
+
+const SearchBar:React.FC<SearchProps> = ({ handleToggle, state }) => {
+    return (
+        <form action="#" className={`flex flex-1 items-center h-[42px] ml-10 brightness-95 bg-color rounded-lg pl-4 transition ${state ? '!bg-white': ''}`}>
+            <button type="submit">
+                <svg width={14} viewBox="0 0 20 20">
+                    <path d="M19.6,18.9l-5-5c1.3-1.5,2.1-3.4,2.1-5.5c0-4.6-3.7-8.2-8.2-8.2S0.2,3.9,0.2,8.5s3.7,8.2,8.2,8.2 c2.1,0,4-0.8,5.5-2.1l5,5c0.2,0.2,0.5,0.2,0.7,0C19.8,19.4,19.8,19.1,19.6,18.9z M1.2,8.5c0-4,3.2-7.2,7.2-7.2s7.2,3.2,7.2,7.2 c0,2-0.8,3.8-2.1,5.1c0,0,0,0,0,0s0,0,0,0c-1.3,1.3-3.1,2.1-5.1,2.1C4.5,15.7,1.2,12.5,1.2,8.5z"></path>
+                </svg>
+            </button>
+            <input onClick={handleToggle} className="w-full h-full bg-transparent outline-none pl-4 font-thin searchbar" type="search" name="search" id="search" placeholder="Search by Inspiration" />
+        </form>
+    )
+}
+
+export default SearchBar

app/globals.scss

@@ -9,6 +9,8 @@
     --pad-inner: 52px;
     --inline-width: 1816px;
     --background: 226, 231, 211;
+    --black: 34,34,34;
+    --black-v1: 56, 56, 56;
 }
 
 *, *::before, *::after {
@@ -28,15 +30,65 @@ body {
     margin-inline: auto;
 }
 
+/************************************ COLOR **********************************/
+
+
 .bg-color {
     background-color: rgb(var(--background));
 }
 
+.bg-black {
+    background-color: rgb(var(--black));
+    &--v1 {
+        background-color: rgb(var(--black-v1));
+    }
+}
+
+
+/*********************************** TRANISTION ******************************/
+
+.transition {
+    transition: all .3s ease-in;
+}
 
 /************************************ HEADER ********************************/
 
 header {
     & .active {
         background-color: rgb(var(--header-active));
     }
+}
+
+/******************************** SEARCH BAR *********************************/
+
+.searchbar {
+    font-size: 15px;
+    color: rgb(var(--black));
+    &::placeholder {
+        color: black;
+        font-weight: 100 !important;
+        font-size: 15px !important;
+        color: rgb(var(--black));
+    }
+}
+
+/********************************** BUTTON *************************************/
+
+.button {
+    transition: all .3s ease-in;
+
+    &:hover {
+        background-color: rgb(var(--black-v1));
+    }
+
+    &__outline {
+        color: rgb(var(--black));
+        background: transparent;
+        border: .5px solid rgb(var(--black));
+
+        &:hover {
+            background-color: rgb(var(--black-v1));
+            color: white;
+        }
+    }
 }