Make a amazing Office Website

Table of contents

Setup Project

1. If you don’t install bun, please install it firstly.

curl -fsSL https://bun.sh/install | bash

2. use bun create nextjs project

mkdir office-website
cd office-website
bun create next-app .

3. install dependencies and start the project

bun i
bun run dev

4. visit http://localhost:3000 to check the project is working or not.

5. remove the unused code from the project and check the tailwindcss is working or not.

• app/page.tsx

<div>
  <h1 className="text-2xl text-red-600">office website</h1>
</div>

• app/globals.css

6. Change the Font to Poppins

• app/layout.tsx

import { Poppins } from "next/font/google";
const poppins = Poppins({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-poppins",
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
});

Make the Navbar component

1. make components/Navbar.tsx file and use it in the app/page.tsx

export const Navbar = () => {
  return (
    <div>
      <h1>Navbar</h1>
    </div>
  );
};

2. add the assets image to public directory

3. add navitems array

4. Adapt to mobile phone display

• install react-icons pacakge

bun add react-icons

• add FaXmark, FaBars icons from react-icons

• useState to controll the isMenuOpen or not
• add nav items for mobile devices

5. add css merge util function cn to lib/utils.ts

• install clsx and tailwind-merge

bun add clsx tailwind-merge

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Make the Hero Component

1. install react-typed package

bun add  react-typed

2. after add image div modify the navbar style

3. add typed component

4. change the font Dancing Script of typed and add a mask to the type area

/* app/global.css */
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap");
.typed {
  font-family: "Dancing Script", cursive;
}

5. add the dancer ball

• install motion package

bun add framer-motion

Make the Services Component

1. install lucide icons package

bun add lucide-react

2. add service items array
3. make ServiceItem component

Make the Work Component

1. add work items array

2. add tags color to app/global.css

Make the Contact Component

1. add form
2. deal with show form input error message and create Alert Component
3. install emailjs package

bun add @emailjs/browser

4. config emailjs variable

Make the Footer Component

export const Footer = () => {
  return (
    <footer className="mt-[44px] w-full bg-[#333]">
      <div className="text-white flex flex-wrap items-center justify-center">
        <div className="my-8">
          <p className="m-1">
            Copyright © 2024 Zerotone ltd. All rights reserved
          </p>
        </div>
      </div>
    </footer>
  );
};

Fix the navbar scroll bugs

const [isSticky, setIsSticky] = useState(false);

useEffect(() => {
  const handleScroll = () => {
    setIsSticky(window.scrollY > 100);
  };
  window.addEventListener("scroll", handleScroll);
  return () => {
    window.removeEventListener("scroll", handleScroll);
  };
}, []);

Deal with the scrollbar and make scroll smooth

1. add scroll content area

change the app/page.tsx

2. add the css in app/global.css

.hidden-scroll-bar {
  overflow: hidden;
}

/* keep content scroll */
.scrollable-content {
  height: 100vh; /* the view hight */
  overflow: auto; /* make the content  scroll */
  -ms-overflow-style: none; /* hidden scrollbar (Internet Explorer and Edge) */
  scrollbar-width: none; /* hidden scrollbar (Firefox) */
  scroll-behavior: smooth;
}

.scrollable-content::-webkit-scrollbar {
  display: none; /* hidden scrollbar (WebKit) */
}

html {
  scroll-behavior: smooth;
}

3. fix the navbar sticky bugs

useEffect(() => {
    const scrollableContent = document.getElementById("scrollable-content")!;

    const handleScroll = () => {
      setIsSticky(window.scrollY > 100 || scrollableContent.scrollTop > 100);
    };

    window.addEventListener("scroll", handleScroll);
    scrollableContent.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
      scrollableContent.removeEventListener("scroll", handleScroll);
    };
  }, []);

Congratulations!!! you have completed a amazing office website.