Hello all
I have a problem with my NavBar. I tried integrating it into my novel contact page, but I was unable to get the same effect as on my home page to completely correlate the NavBar.
Can you support me?
house site with the proper navbar
call site navbar position problem
my email. nasdaq record
"use client";import Navbar from "@/components/navbar";import React, { useRef } from "react";import emailjs from "@emailjs/browser";import styled from "styled-components";// import Footer from "@/components/footer";// npm i @emailjs/browserconst Contact = () => { const form = useRef(null); const [showConfirmation, setShowConfirmation] = React.useState(false); const [formErrors, setFormErrors] = React.useState({ name: false, email: false, message: false, terms: false, }); const sendEmail = (e: React.FormEvent) => { e.preventDefault(); if (!form.current) return; // Check form validation const formData = new FormData(form.current); const errors = { name: !formData.get('user_name'), email: !formData.get('user_email'), message: !formData.get('message'), terms: !formData.get('terms'), }; setFormErrors(errors); // If any errors exist, don't submit if (Object.values(errors).some(error => error)) { return; } emailjs .sendForm( "service_3nkc35c", "template_nh1kma8", form.current, "o3sNWIRA-SH7s2nsx" ) .then( (result) => { console.log(result.text); setShowConfirmation(true); form.current?.reset(); // Hide confirmation message after 5 seconds setTimeout(() => setShowConfirmation(false), 5000); }, (error) => { console.log(error.text); } ); }; return ( Contactez notre équipe commerciale Parlons de la façon dont ShopiX peut aider votre équipe à mieux travailler. Une agence flexible pour l'ensemble de votre entreprise pour partager des connaissances, expédier des projets et collaborer. Fonctionnalités d'entreprise pour gérer en toute sécurité l'accès et la sécurité des utilisateurs. Un support dédié pour travailler avec vous sur votre configuration et vous aider à élaborer le meilleur plan pour votre entreprise. {formErrors.name && Ce champ est obligatoire} {formErrors.email && Ce champ est obligatoire} {formErrors.message && Ce champ est obligatoire} {formErrors.terms && Vous devez accepter les conditions} {showConfirmation && ( Votre message a été envoyé avec succès! )} > );};const StyledContactForm = styled.div` width: 400px; form { display: flex; align-items: flex-start; flex-direction: column; width: 100%; font-size: 16px; color: black; input { width: 100%; height: 35px; padding: 7px; outline: none; border-radius: 5px; border: 1px solid rgb(220, 220, 220); color: withe; &:focus { border: 2px solid rgba(0, 206, 158, 1); } } textarea { max-width: 100%; min-width: 100%; width: 100%; max-height: 100px; min-height: 100px; padding: 7px; outline: none; border-radius: 5px; border: 1px solid rgb(220, 220, 220); color: black; &:focus { border: 2px solid rgba(0, 206, 158, 1); } } label { margin-top: 1rem; } input[type="submit"] { margin-top: 2rem; cursor: pointer; border: none; } }`;export default Contact;</code>
my pieces navbar. cfl
"use client";import React from "react";import { PlusGrid, PlusGridItem, PlusGridRow } from "./plus-grid";import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/react";import { Bars2Icon, XMarkIcon } from "@heroicons/react/24/solid";import { motion } from "motion/react";import Logo from "./logo";import { signOut, useSession } from "next-auth/react";import Image from "next/image";import Link from "next/link";export const navLinks = [ { href: "/", label: "Home" }, { href: "/shopix", label: "Boutique" }, { href: "/contact", label: "Contact" },];export const DesktopNav = () => { const { data: session } = useSession(); return ( );};const MobileNavButton = ({ open }: { open: boolean }) => { return ( {open ? ( ) : ( )} );};export const MobileNav = () => { const { data: session } = useSession(); return ( {navLinks?.map((item, index) => ( {item?.label} ))} {session?.user ? ( ) : ( Login )} );};export default function Navbar() { return ( {({ open }) => ( > )} </Disclosure> );}