Hello
I managed to integrate a footer to my page the problem I don’t know how to do so that the links of my NavBar work?
example here I would like to make the link of the page but how?
<Link href="/category/new-arrivals">
<span className="cursor-pointer hover:underline">Website Design</span>
</Link>
Can you help me?
Footer.tsx
// Footer.tsx
import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
const Footer = () => {
return (
<footer className="bg-black text-white p-10">
<div className="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div>
<Image src="/logo/logo_footer.png" alt="Logo" width={50} height={50} className="mb-4" />
<p>ShopiX - Optimisez votre activité.</p>
</div>
<div>
<h3 className="font-bold mb-3">Conception</h3>
<ul>
<li>
<Link href="/category/new-arrivals">
<span className="cursor-pointer hover:underline">Website Design</span>
</Link>
</li>
<li>
<Link href="/category/sale">
<span className="cursor-pointer hover:underline">Graphic Design</span>
</Link>
</li>
<li>
<Link href="/category/top-rated">
<span className="cursor-pointer hover:underline">Conception Web UX</span>
</Link>
</li>
<li>
<Link href="/category/top-rated">
<span className="cursor-pointer hover:underline">Responsive</span>
</Link>
</li>
</ul>
</div>
<div>
<h3 className="font-bold mb-3">Développement</h3>
<ul>
<li>
<Link href="/about">
<span className="cursor-pointer hover:underline">Développement web sur mesure</span>
</Link>
</li>
<li>
<Link href="/contact">
<span className="cursor-pointer hover:underline">E-commerce Store</span>
</Link>
</li>
<li>
<Link href="/policy">
<span className="cursor-pointer hover:underline">Test de logiciel</span>
</Link>
</li>
<li>
<Link href="/policy">
<span className="cursor-pointer hover:underline">Refonte web sur mesure</span>
</Link>
</li>
</ul>
</div>
<div>
<h3 className="font-bold mb-3">Accés Rapide</h3>
<ul>
<li>
<Link href="/account/orders">
<span className="cursor-pointer hover:underline">Conditions générales</span>
</Link>
</li>
<li>
<Link href="/account/settings">
<span className="cursor-pointer hover:underline">Politique de confidentialité</span>
</Link>
</li>
<li>
<Link href="/book">
<span className="cursor-pointer hover:underline">Réserver un appel</span>
</Link>
</li>
<li>
<Link href="/contact">
<span className="cursor-pointer hover:underline">Nous contacter</span>
</Link>
</li>
</ul>
</div>
</div>
<div className="text-center pt-8 border-t border-gray-700 mt-8">
<p>© {new Date().getFullYear()} ShopiX All rights reserved.</p>
</div>
</footer>
);
};
export default Footer;
navbar.tsx
"use client";
import { useState } from "react";
// import { motion } from "framer-motion";
import { AlignJustify, X } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import DropDownMenu from "./drop-down-menu";
interface NavbarProps {
scrollToWebsiteDesign: () => void;
scrollToGraphicDesign: () => void;
scrollToShopifyStores: () => void;
scrollToBrands: () => void;
scrollToServices: () => void; // Define scrollToServices function
}
const Navbar = ({
scrollToWebsiteDesign,
scrollToGraphicDesign,
scrollToShopifyStores,
scrollToBrands,
scrollToServices, // Add scrollToServices to props
}: NavbarProps) => {
const [isDropDownVisible, setIsDropDownVisible] = useState(false);
const toggleDropDown = () => {
setIsDropDownVisible(!isDropDownVisible);
};
const closeDropDown = () => {
setIsDropDownVisible(false);
};
return (
<div>
<div className="p-6 md:p-10 flex items-center justify-between z-50">
<div>
<Link className="cursor-pointer" href="/">
<Image
priority
src="/logo/logo.svg"
alt="Logo"
width={100}
height={100}
className="w-10 h-10 md:w-14 md:h-14"
/>
</Link>
<div className="text-2xl bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to bg-neutral-400 bg-opacity-50">
ShopiX
</div>
</div>
<div
className="cursor-pointer hidden
md:flex space-x-10 items-center
text-slate-300 text-center
bg-clip-text text-transparent
bg-gradient-to-b from-neutral-50
to bg-neutral-400 bg-opacity-50"
>
<div onClick={scrollToWebsiteDesign} className="hover:text-gray-50">
Website Design
</div>
<div onClick={scrollToGraphicDesign} className="hover:text-gray-50">
Graphic Design
</div>
<div onClick={scrollToShopifyStores} className="hover:text-gray-50">
ShopiX Stores
</div>
<div onClick={scrollToBrands} className="hover:text-gray-50">
Branding
</div>
<div onClick={scrollToServices} className="hover:text-gray-50">
Services
</div>
<Link href="/pricing" className="hover:text-gray-50">
Tarifs
</Link>
</div>
<div className="flex md:hidden">
{isDropDownVisible ? (
// display an x icon when the drop is visible
<div
onClick={toggleDropDown}
className="w-8 h-8 text-slate-300 cursor-pointer"
>
<X />
<DropDownMenu
onClose={closeDropDown}
scrollToServices={scrollToServices} // Pass scrollToServices
/>
</div>
) : (
<AlignJustify
onClick={toggleDropDown}
className="w-8 h-8 text-slate-300 cursor-pointer"
/>
)}
</div>
<div className="hidden md:flex">
<Link
href="/contact"
className="
inline-flex h-12 animate-shimmer items-center justify-center
rounded-md border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)]
bg-[length:200%_100%] px-6 font-medium text-slate-400 transition-colors
focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2
focus:ring-offset-slate-50
"
>
Contact
</Link>
</div>
</div>
</div>
);
};
export default Navbar;
