Hello everyone
I have a problem with my NavBar. I tried to integrate it into my new contact page and I don’t get the same result as on my home page to correctly align the NavBar.
Can you help me ?
home page with the correct navbar
contact page navbar alignment problem
my contact.tsx file
"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/browser
const Contact = () => {
const form = useRef<HTMLFormElement>(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<HTMLFormElement>) => {
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 (
<>
<div className="flex justify-center">
<Navbar />
</div>
<div className="md:flex items-start justify-center md:py-20 px-6">
<div className="">
<div className="text-5xl font-medium w-full md:w-2/3 pb-5 md:text-7xl bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-400 bg-opacity-50">
Contactez notre équipe commerciale
</div>
<div
className="
py-4
text-gray-300
"
>
Parlons de la façon dont ShopiX peut aider votre équipe à mieux travailler.
</div>
<div className="bg-[#f6f5f4] md:w-4/5 space-y-6 p-4 rounded-2xl my-4 hidden md:flex md:flex-col">
<div className="flex gap-4 border-b ">
<div className=" font-normal pb-4 ">
Une agence flexible pour l'ensemble de votre entreprise pour partager des connaissances, expédier des projets et collaborer.
</div>
</div>
<div className="flex gap-4 border-b ">
<div className=" font-normal pb-4 ">
Fonctionnalités d'entreprise pour gérer en toute sécurité l'accès et la sécurité des utilisateurs.
</div>
</div>
<div className="flex gap-4 ">
<div className=" font-normal pb-4 ">
Un support dédié pour travailler avec vous sur votre configuration et vous aider à élaborer le meilleur plan pour votre entreprise.
</div>
</div>
</div>
</div>
<StyledContactForm>
<form ref={form} onSubmit={sendEmail}>
<label>Votre nom*</label>
<input type="text" name="user_name" />
{formErrors.name && <span className="text-red-500 text-sm">Ce champ est obligatoire</span>}
<label>Email*</label>
<input type="email" name="user_email" />
{formErrors.email && <span className="text-red-500 text-sm">Ce champ est obligatoire</span>}
<label>Message*</label>
<textarea name="message" />
{formErrors.message && <span className="text-red-500 text-sm">Ce champ est obligatoire</span>}
<div className="flex items-center gap-2 mt-4">
<input
type="checkbox"
name="terms"
className="w-4 h-4"
/>
<label className="text-sm">J'accepte les conditions générales*</label>
</div>
{formErrors.terms && <span className="text-red-500 text-sm">Vous devez accepter les conditions</span>}
<input type="submit" className="w-full py-2 text-white rounded-md transition-all duration-300 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 hover:from-blue-700 hover:to-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" value="Soumettre" />
{showConfirmation && (
<div className="text-green-500 mt-4">
Votre message a été envoyé avec succès!
</div>
)}
</form>
</StyledContactForm>
</div>
</>
);
};
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;
my components navbar.tsx
"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 (
<nav className="relative hidden lg:flex">
{navLinks?.map((item) => (
<PlusGridItem key={item?.href} className="flex">
<Link
href={item?.href}
className="px-4 py-3 text-base font-medium text-gray-950 bg-blend-multiply hover:bg-red-600/[9.5%]"
>
{item?.label}
</Link>
</PlusGridItem>
))}
<PlusGridItem className="flex">
{session?.user ? (
<button
onClick={() => signOut()}
className="flex items-center gap-2 px-4 py-3 text-base font-medium text-gray-950 bg-blend-multiply hover:bg-red-600/[9.5%]"
>
<Image
src={session?.user?.image as string}
width={50}
height={50}
className="w-8 h-8 rounded-full object-cover"
alt="userImage"
/>
<p>{session?.user?.name}</p>
</button>
) : (
<Link
href={"/login"}
className="px-4 py-3 text-base font-medium text-gray-950 bg-blend-multiply hover:bg-red-600/[9.5%]"
>
Login
</Link>
)}
</PlusGridItem>
</nav>
);
};
const MobileNavButton = ({ open }: { open: boolean }) => {
return (
<DisclosureButton className="flex size-12 items-center justify-center self-center rounded-lg data-[hover]:bg-black/5 lg:hidden duration-300">
{open ? (
<XMarkIcon className="size-6 text-gray-950" />
) : (
<Bars2Icon className="size-6 text-gray-950" />
)}
</DisclosureButton>
);
};
export const MobileNav = () => {
const { data: session } = useSession();
return (
<DisclosurePanel className="lg:hidden">
<div className="flex flex-col gap-6 py-4">
{navLinks?.map((item, index) => (
<motion.div
initial={{ opacity: 0, rotateX: -90 }}
animate={{ opacity: 1, rotateX: 0 }}
transition={{
duration: 0.15,
ease: "easeInOut",
rotateX: { duration: 0.3, delay: index * 0.1 },
}}
key={item?.href}
>
<Link
href={item?.href}
className="text-base font-medium text-gray-700 hover:text-gray-950 hover:underline underline-offset-2 decoration-[1px]"
>
{item?.label}
</Link>
</motion.div>
))}
<motion.div
initial={{ opacity: 0, rotateX: -90 }}
animate={{ opacity: 1, rotateX: 0 }}
transition={{
duration: 0.15,
ease: "easeInOut",
rotateX: { duration: 0.3, delay: 0.4 },
}}
>
{session?.user ? (
<button
onClick={() => signOut()}
className="flex items-center gap-2 group"
>
<Image
src={session?.user?.image as string}
width={50}
height={50}
className="w-8 h-8 rounded-full object-cover"
alt="userImage"
/>
<p className="text-base font-medium text-gray-700 group-hover:text-gray-950 group-hover:underline underline-offset-2 decoration-[1px]">
{session?.user?.name}
</p>
</button>
) : (
<Link
href={"/login"}
className="text-base font-medium text-gray-700 hover:text-gray-950 hover:underline underline-offset-2 decoration-[1px]"
>
Login
</Link>
)}
</motion.div>
</div>
</DisclosurePanel>
);
};
export default function Navbar() {
return (
<Disclosure as="header" className="pt-5">
{({ open }) => (
<>
<PlusGrid>
<PlusGridRow className="relative flex justify-between">
<div>
<PlusGridItem className="py-3 hover:bg-red-600/[9.5%] group duration-300">
<Logo />
</PlusGridItem>
</div>
<DesktopNav />
<MobileNavButton open={open} />
</PlusGridRow>
</PlusGrid>
<MobileNav />
</>
)}
</Disclosure>
);
}