How to Update Content

The project is built using Tailwind CSS for styling, and all the text content is embedded directly within the codebase. Tailwind's utility-first classes make it easy to style content inline, and any changes will reflect immediately.

Steps to Change Content

1. Locate the component or page you wish to edit within the /app or /components folder.
2. Open the file in your code editor (e.g., Visual Studio Code).
3. Modify the content directly within the JSX. For example: Your New Heading
4. Save the file. Next.js automatically detects changes and updates the UI without requiring a manual refresh.

Fonts

Fonts used in the project are Google Fonts and are configured in the layout.tsx file located at the root of the project. You can update or add new fonts there as follows:

            
  {`import { Roboto } from 'next/font/google';
  
  const roboto = Roboto({ subsets: ['latin'], weight: ['400', '700'] });
  
  export default function RootLayout({ children }) {
    return (
      
        {children}
      
    );
  }`}
            
          

For more information, refer to the Next.js Fonts documentation.

Colors

Custom colors are defined in the tailwind.config.ts file. You can edit or add new colors to the theme as follows:

            
  {`module.exports = {
    theme: {
      extend: {
        colors: {
          customBlue: '#003D4C',
          customGray: '#F3F4F6',
        },
      },
    },
  };`}
            
          

For detailed usage, refer to the Tailwind CSS Colors documentation.

Reusing Components

The project follows a modular approach, with reusable components stored in the /components folder. To make content changes consistent across pages, reuse existing components or create new ones in this folder. For example:

            
  {`import Header from '../components/Header';
  
  export default function HomePage() {
    return (
      

        

        
New content goes here...
      
    );
  }`}
            
          

Styling with Tailwind

Tailwind CSS allows you to apply styles directly within your JSX using utility classes. For detailed usage, refer to the official Tailwind CSS documentation.