2025 Landing Page Navbar

[tomasohCHOM]

File Location

Here's the component file location so you can start coding

This is the parent component containing each component in the Landing Page

Landing Page Component

The Navbar itself is this, you can start coding here

NavBar Component

Design

Refer to this Figma

Reference

• All of custom colors, font size is labeled according to tailwind.config.js, feel free to change it since the color was from 2024
• TailwindCSS home page to learn how to use TailwindCSS for styling. For example:

<div className='text-light_blue text-3xl font-bold'>

will give you light blue text color, font size = 3xl = 2rem according to tailwind.config.js and bolded

Icons

• All of the icons can be imported from React-icons (Refer to it to find the icon name). For example:

import {AiOutlineSearch} from 'react-icons/ai';

Then you can use it as a component and customize color + size

<div className=''>
  <AiOutlineSearch size={34} color='#00000'/>
</div>

Contributing

1. git pull for latest change if there's any
2. git checkout -b "landing-page-2025/navbar" to create new branch
3. npm run format to run formatter before commit + push your change
4. Assign reviewer before merging code + attach screenshot to make sure it works