redirect to contact form

src/components/ScrollToTop.jsx

@@ -2,9 +2,16 @@ import { useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 
 export default function ScrollToTop() {
-  const { pathname } = useLocation()
+  const { pathname, hash } = useLocation()
   useEffect(() => {
+    if (hash) {
+      const el = document.querySelector(hash)
+      if (el) {
+        el.scrollIntoView({ behavior: 'smooth' })
+        return
+      }
+    }
     window.scrollTo(0, 0)
-  }, [pathname])
+  }, [pathname, hash])
   return null
 }

src/components/layout/Footer.jsx

@@ -72,7 +72,7 @@ const Footer = () => {
               </div>
             </div>
             <Link
-              to="/contact"
+              to="/contact#contact-form"
               className="inline-flex items-center gap-2 rounded-md text-sm font-semibold px-5 py-2.5 bg-primary-cyan text-primary-navy hover:bg-white transition-colors duration-200"
               aria-label="Request a free consultation"
             >

src/components/layout/Header.jsx

@@ -138,7 +138,7 @@ const Header = () => {
 
           {/* CTA Button */}
           <div className="hidden md:block">
-            <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-3 bg-primary-cyan text-primary-navy hover:bg-cyan-600 transition-colors" aria-label="Request a consultation">
+            <Link to="/contact#contact-form" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-3 bg-primary-cyan text-primary-navy hover:bg-cyan-600 transition-colors" aria-label="Request a consultation">
               Request Consultation
             </Link>
           </div>
@@ -242,7 +242,7 @@ const Header = () => {
                 {/* CTA */}
                 <div className="pt-4 border-t border-white/10">
                   <Link
-                    to="/contact"
+                    to="/contact#contact-form"
                     onClick={closeMobileMenu}
                     className="inline-flex items-center justify-center gap-2 w-full rounded-md text-sm font-semibold h-11 px-4 bg-primary-cyan text-primary-navy hover:bg-white transition-colors duration-200"
                     aria-label="Get a free quote"

src/components/layout/MobileNav.jsx

@@ -129,7 +129,7 @@ const MobileNav = () => {
 
             <div className="mt-auto pt-6">
               <Link
-                to="/contact"
+                to="/contact#contact-form"
                 onClick={closeMobileMenu}
                 className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 w-full bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors"
                 aria-label="Request a consultation"

src/pages/About.jsx

@@ -120,7 +120,7 @@ const About = () => {
                 Queue North helps organizations choose, implement, and support the phone, contact center, network, and IT systems that keep daily operations moving.
               </p>
               <div className="mt-8 flex flex-col sm:flex-row gap-3">
-                <Link to="/contact" className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors">
+                <Link to="/contact#contact-form" className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors">
                   Start a Conversation
                   <ArrowRight className="h-4 w-4" aria-hidden="true" />
                 </Link>
@@ -264,7 +264,7 @@ const About = () => {
             </div>
             <div className="mt-7 flex flex-col gap-3 sm:flex-row lg:mt-0 lg:flex-shrink-0">
               <Link
-                to="/contact"
+                to="/contact#contact-form"
                 className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
               >
                 Request Consultation

src/pages/Home.jsx

@@ -153,7 +153,7 @@ const Home = () => {
               Business phone, contact center, network, and IT support built around one accountable implementation partner.
             </p>
             <div className="mt-8 flex flex-col sm:flex-row gap-3">
-              <Link to="/contact" className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors" aria-label="Schedule a consultation">
+              <Link to="/contact#contact-form" className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors" aria-label="Schedule a consultation">
                 Schedule Consultation
                 <ArrowRight className="h-4 w-4" aria-hidden="true" />
               </Link>
@@ -259,7 +259,7 @@ const Home = () => {
               Four concrete differentiators that set us apart
             </p>
             <div>
-              <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors" aria-label="Request a consultation">
+              <Link to="/contact#contact-form" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors" aria-label="Request a consultation">
                 Request Consultation
               </Link>
             </div>
@@ -390,7 +390,7 @@ const Home = () => {
           <p className="text-lg text-soft-text mb-8 max-w-2xl mx-auto">
             Share a few details and we'll provide clear direction.
           </p>
-          <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-6 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors" aria-label="Request a consultation">
+          <Link to="/contact#contact-form" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-6 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors" aria-label="Request a consultation">
             Request Consultation
           </Link>
         </div>

src/pages/Industries.jsx

@@ -50,7 +50,7 @@ const Industries = () => {
               Communications and infrastructure solutions shaped by the compliance, workflow, and connectivity demands of your specific environment.
             </p>
             <Link
-              to="/contact"
+              to="/contact#contact-form"
               className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
             >
               Talk to a Specialist
@@ -120,7 +120,7 @@ const Industries = () => {
             </div>
             <div className="mt-7 flex flex-col gap-3 sm:flex-row lg:mt-0 lg:flex-shrink-0">
               <Link
-                to="/contact"
+                to="/contact#contact-form"
                 className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
               >
                 Talk to a Specialist

src/pages/IndustryDetail.jsx

@@ -119,7 +119,7 @@ const IndustryDetail = () => {
                     <p className="text-soft-text">{industry.name}</p>
                   </div>
                   <div className="pt-4 border-t border-border">
-                    <Link to="/contact" className="flex w-full items-center justify-center gap-2 bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors">
+                    <Link to="/contact#contact-form" className="flex w-full items-center justify-center gap-2 bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors">
                       Request Consultation
                       <ArrowRight className="h-4 w-4" aria-hidden="true" />
                     </Link>

src/pages/NotFound.jsx

@@ -33,7 +33,7 @@ export default function NotFound() {
               Back to Home
               <ArrowRight className="h-4 w-4" aria-hidden="true" />
             </Link>
-            <Link to="/contact" className="inline-flex h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors">
+            <Link to="/contact#contact-form" className="inline-flex h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors">
               Contact Us
             </Link>
           </div>

src/pages/ServiceDetail.jsx

@@ -84,7 +84,7 @@ const ServiceDetail = () => {
               <h1 className="text-4xl md:text-5xl font-bold mb-6">{service.name}</h1>
               <p className="text-xl text-white/75 max-w-3xl leading-relaxed">{service.shortDesc}</p>
               <div className="mt-8">
-                <Link to="/contact" className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors">
+                <Link to="/contact#contact-form" className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors">
                   Request This Service
                   <ArrowRight className="h-4 w-4" aria-hidden="true" />
                 </Link>
@@ -149,7 +149,7 @@ const ServiceDetail = () => {
                     <p className="text-soft-text">{service.name}</p>
                   </div>
                   <div className="pt-4 border-t border-border">
-                    <Link to="/contact" className="block w-full bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors">
+                    <Link to="/contact#contact-form" className="block w-full bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors">
                       Request This Service
                     </Link>
                   </div>

src/pages/Services.jsx

@@ -96,7 +96,7 @@ const Services = () => {
             </p>
             <div className="flex flex-col sm:flex-row gap-3">
               <Link
-                to="/contact"
+                to="/contact#contact-form"
                 className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
               >
                 Get a Free Quote
@@ -135,7 +135,7 @@ const Services = () => {
               </p>
             </div>
             <Link
-              to="/contact"
+              to="/contact#contact-form"
               className="inline-flex h-10 items-center justify-center gap-2 rounded-md border border-primary-navy/20 px-4 text-sm font-semibold text-primary-navy hover:border-primary-blue hover:text-primary-blue transition-colors"
             >
               Talk through options
@@ -188,7 +188,7 @@ const Services = () => {
             </div>
             <div className="mt-7 flex flex-col gap-3 sm:flex-row lg:mt-0 lg:flex-shrink-0">
               <Link
-                to="/contact"
+                to="/contact#contact-form"
                 className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
               >
                 Schedule a Consultation