Problems to make the link component work in next.js

I have been doing a blog with next.js and I am creating the header, but the links are not working, I read the next.js documentation and made the links step by step, but every time I reload my website and click the links, my console says :" GET https://gdjly5-3000.csb.app/About 404 (Not Found)". I doble-check the spelling-mistakes and the folder and seems ok. I am confused. Can somebody help me? Thanks a lot Here is the Intro.tsx

import Link from "next/link";
import Image from "next/image";
import logo from "./image/emily-logo.jpg";

export default function Intro() {
  return (
    <section>
      <nav>
        <a href="/">HOME </a>

        <Link href="/intro-pages/about">ABOUT</Link>

        <Link href="/intro-pages/blog">BLOG</Link>

        <Link href="/intro-pages/Press">PRESS</Link>

        <Link href="/intro-pages/Services">PERSONAL STYLED SERVICES</Link>
      </nav>
      <Image alt="emily-logo" className="logo-header" src={logo} />
    </section>
  );
}

Here is the Page.tsx

import Container from "@/app/_components/container";
import { HeroPost } from "@/app/_components/hero-post";
// import { Intro } from "@/app/_components/intro";
import Intro from '@/app/_components/intro'
import {SocialMedia} from '@/app/_components/SocialMedia'
import {HomePage} from '@/app/_components/HomePage'
import {Testimonial} from '@/app/_components/Testimonial'
import { MoreStories } from "@/app/_components/more-stories";
import { getAllPosts } from "../lib/api";

export default function Index() {
  const allPosts = getAllPosts();

  const heroPost = allPosts[0];

  const morePosts = allPosts.slice(1);

  return (
    <main>
      <Container>
        <Intro />
        <HomePage/>
        <SocialMedia/>
        <Testimonial/>
        <HeroPost
          title={heroPost.title}
          coverImage={heroPost.coverImage}
          date={heroPost.date}
          author={heroPost.author}
          slug={heroPost.slug}
          excerpt={heroPost.excerpt}
        />
        {morePosts.length > 0 && <MoreStories posts={morePosts} />}
      </Container>
    </main>
  );
}

Here is the about.txs

export function About() {
  return (
    <section>
      <h1>This is the About Page</h1>
    </section>
  );
}

Above I show you where every component is located

It looks like the 404 error you're encountering is because your intro-pages are located in the _components folder, not directly inside the app folder. To fix this, you'll need to create a new folder named about and within it, a page.tsx file.

I suggest checking the official Next.js website for guidance on structuring your project: https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#pages

According to the documentation:

To create additional pages, you should create a new folder and add a page.js file inside it (app/pagesYouCreated). For instance, to create a page for the /dashboard route, you should create a folder called dashboard and add the page.js file inside it.

Therefore, your folder structure should resemble the following:

./src
├── app
│   ├── _components // I recommend placing this folder outside the app folder, but within src as components and pages are treated differently in Next.js
│   ├── intro-pages
│   │   └── about
│   │       └── page.tsx

This setup ensures that your pages are correctly located for Next.js to route them properly. Moving the _components folder outside of the app but still within src will also help keep your project organized and maintain a clear separation between your components and pages.

To wrap up, make sure your pages are located in the correct directories as per Next.js conventions to avoid routing issues. Adjusting your project structure as recommended should resolve the 404 error. Happy coding!