Anchor in Blade Template Not Working laravel - 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>