Anchor in Blade Template Not Working laravel

Question

I'm trying to figure out what the problem is. So, I use laravel blade templating for navbar section and I want to add route to my anchor (A href tag). After I put the route to the anchor and try to click on it, it doesn't redirect me to the page I mean. Console says:

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'http://127.0.0.1:8000/about' is not a valid selector.
at HTMLAnchorElement.<anonymous> (http://127.0.0.1:8000/:1813:26)

(anonymous) @ (index):1813

Why does this happen?

To help you answer this question, I add some code here.

navbar.blade.php (search for 'the problem is here')

<div class=" ud-header bg-transparent absolute top-0 left-0 z-40 w-full flex items-center">
  <div class="container">
    <div class="flex -mx-4 items-center justify-between relative">
      <div class="px-4 w-60 max-w-full">
        <a href="index.html" class="navbar-logo w-full block py-5">
          <img src="{{ asset('images/logo/logo-white.svg') }}" alt="logo" class="w-full header-logo"/>
        </a>
      </div>
      <div class="flex px-4 justify-between items-center w-full">
        <div>
          <button id="navbarToggler" class=" block absolute right-4 top-1/2 -translate-y-1/2 lg:hidden focus:ring-2 ring-primary px-3 py-[6px] rounded-lg">
            <span class="relative w-[30px] h-[2px] my-[6px] block bg-white"></span>
            <span class="relative w-[30px] h-[2px] my-[6px] block bg-white"></span>
            <span class="relative w-[30px] h-[2px] my-[6px] block bg-white"></span>
          </button>
          <div id="navbarCollapse" class=" absolute py-5 lg:py-0 lg:px-4 xl:px-6 bg-white lg:bg-transparent shadow-lg rounded-lg max-w-[250px] w-full lg:max-w-full lg:w-full right-4 top-full hidden lg:block lg:static lg:shadow-none " >
            <ul class="blcok lg:flex">
              <li class="relative group">
                <a href="#" class=" ud-menu-scroll text-base text-dark lg:text-white lg:group-hover:opacity-70 lg:group-hover:text-white group-hover:text-primary py-2 lg:py-6 lg:inline-flex lg:px-0 flex mx-8 lg:mr-0 " > Beranda </a>
              </li>
              <li class="relative group">
                  {{-- the problem is here --}}
                <a href="{{ route('about') }}" class=" ud-menu-scroll text-base text-dark lg:text-white lg:group-hover:opacity-70 lg:group-hover:text-white group-hover:text-primary py-2 lg:py-6 lg:inline-flex lg:px-0 flex mx-8 lg:mr-0 lg:ml-7 xl:ml-12 " > Tentang </a>
              </li>
              <li class="relative group submenu-item">
                <a href="javascript:void(0)" class=" text-base text-dark lg:text-white lg:group-hover:opacity-70 lg:group-hover:text-white group-hover:text-primary py-2 lg:py-6 lg:inline-flex lg:pl-0 lg:pr-4 flex mx-8 lg:mr-0 lg:ml-8 xl:ml-12 relative after:absolute after:w-2 after:h-2 after:border-b-2 after:border-r-2 after:border-current after:rotate-45 lg:after:right-0 after:right-1 after:top-1/2 after:-translate-y-1/2 after:mt-[-2px] " > Layanan Kami </a>
                <div class=" submenu hidden relative lg:absolute w-[250px] top-full lg:top-[110%] left-0 rounded-sm lg:shadow-lg p-4 lg:block lg:opacity-0 lg:invisible group-hover:opacity-100 lg:group-hover:visible lg:group-hover:top-full bg-white transition-[top] duration-300 " >
                  <a href="about.html" class=" block text-sm text-body-color rounded hover:text-primary py-[10px] px-4 " > Transfer Antar Bank </a>
                  <a href="about.html" class=" block text-sm text-body-color rounded hover:text-primary py-[10px] px-4 " > Bayar Virtual Account </a>
                  <a href="pricing.html" class=" block text-sm text-body-color rounded hover:text-primary py-[10px] px-4 " > Isi Pulsa & Kuota </a>
                  <a href="blog-grids.html" class=" block text-sm text-body-color rounded hover:text-primary py-[10px] px-4 " > Lisensi Digital </a>
                  <a href="blog-details.html" class=" block text-sm text-body-color rounded hover:text-primary py-[10px] px-4 " > Langganan Berbayar </a>
                  <a href="signup.html" class=" block text-sm text-body-color rounded hover:text-primary py-[10px] px-4 " > Jasa Sosial Media </a>
                  </a>
                </div>
              </li>
              <li class="relative group">
                <a href="#contact" class=" ud-menu-scroll text-base text-dark lg:text-white lg:group-hover:opacity-70 lg:group-hover:text-white group-hover:text-primary py-2 lg:py-6 lg:inline-flex lg:px-0 flex mx-8 lg:mr-0 lg:ml-7 xl:ml-12 " > Kontak Kami </a>
              </li>
            </ul>
        </div>
        </div>
        <div class="sm:flex justify-end hidden pr-16 lg:pr-0">
          <a href="signin.html" class=" text-base font-medium text-white hover:opacity-70 py-3 px-7 loginBtn " > Masuk </a>
          <a href="signup.html" class=" text-base font-medium text-white bg-white bg-opacity-20 rounded-lg py-3 px-6 hover:bg-opacity-100 hover:text-dark signUpBtn duration-300 ease-in-out " > Daftar </a>
        </div>
      </div>
    </div>
  </div>

IndexController.php

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;

class indexController extends Controller
{
    public function about()
    {
        return view('about');
    }
}

web.php

<?PHP
use App\Http\Controllers\indexController;
use Illuminate\Support\Facades\Route;
use Illuminate\Support\Facades\View;

Route::get('/', function () {
    return view('index');
});
Route::get('/about',[IndexController::class,'about'])->name('about');

main.blade.php

<html lang="id" class="scroll-smooth">
<title>@yield('title','PayTime - Merge All Payments')</title>
{{-- header place --}}
@include('layouts.head')
<body>
    {{-- navbar place --}}
    @include('layouts.navbar')

    @yield('content')
    

    {{-- faq place --}}
    @include('layouts.faq')
    {{-- footer place --}}
    @include('layouts.footer')
    {{-- scripting place --}}
    <script src="{{ asset('js/main.js') }}"></script>
    <script>
        // ==== for menu scroll
        const pageLink = document.querySelectorAll(".ud-menu-scroll");

        pageLink.forEach((elem) => {
            elem.addEventListener("click", (e) => {
            e.preventDefault();
            document.querySelector(elem.getAttribute("href")).scrollIntoView({
                behavior: "smooth",
                offsetTop: 1 - 60,
            });
            });
        });

        // section menu active
        function onScroll(event) {
            const sections = document.querySelectorAll(".ud-menu-scroll");
            const scrollPos =
            window.pageYOffset ||
            document.documentElement.scrollTop ||
            document.body.scrollTop;

            for (let i = 0; i < sections.length; i++) {
            const currLink = sections[i];
            const val = currLink.getAttribute("href");
            const refElement = document.querySelector(val);
            const scrollTopMinus = scrollPos + 73;
            if (
                refElement.offsetTop <= scrollTopMinus &&
                refElement.offsetTop + refElement.offsetHeight > scrollTopMinus
            ) {
                document
                .querySelector(".ud-menu-scroll")
                .classList.remove("active");
                currLink.classList.add("active");
            } else {
                currLink.classList.remove("active");
            }
            }
        }

        window.document.addEventListener("scroll", onScroll);
    </script>
</body>