feedback

components/Contact.tsx

@@ -1,20 +1,9 @@
 'use client';
 
-import { useState, useRef, useEffect } from 'react';
+import { useState } from 'react';
 import { motion } from 'framer-motion';
-import { useInView } from 'framer-motion';
 
 export default function Contact() {
-  const ref = useRef(null);
-  const isInView = useInView(ref, { once: true, margin: '-100px' });
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  // Prevent hydration mismatch by using consistent initial state
-  const shouldAnimate = mounted && isInView;
 
   const [formData, setFormData] = useState({
     firstName: '',
@@ -46,11 +35,12 @@ export default function Contact() {
   };
 
   return (
-    <section id="contact" className="py-20 md:py-32 bg-white" ref={ref}>
+    <section id="contact" className="py-20 md:py-32 bg-white">
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
-          animate={shouldAnimate ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-100px' }}
           transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
           className="text-center mb-12"
         >
@@ -67,7 +57,8 @@ export default function Contact() {
 
         <motion.div
           initial={{ opacity: 0, y: 30 }}
-          animate={shouldAnimate ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-100px' }}
           transition={{ duration: 0.8, delay: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
         >
           <form

components/Navigation.tsx

@@ -2,14 +2,23 @@
 
 import { useState } from 'react';
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 
 export default function Navigation() {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const pathname = usePathname();
+  const isHomePage = pathname === '/';
+
+  // Adjust hrefs based on current page
+  const getHref = (hash: string) => {
+    return isHomePage ? hash : `/${hash}`;
+  };
 
   const navItems = [
-    { name: 'Home', href: '#home' },
+    { name: 'Home', href: getHref('#home') },
-    { name: 'Services', href: '#services' },
+    { name: 'Services', href: getHref('#services') },
-    { name: 'About', href: '#about' },
+    { name: 'About', href: getHref('#about') },
+    { name: 'Feedback', href: '/feedback' },
   ];
 
   return (
@@ -17,7 +26,7 @@ export default function Navigation() {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16 md:h-20">
           {/* Logo */}
-          <Link href="#home" style={{ color: '#00171F' }} className="text-2xl md:text-3xl font-bold hover:opacity-80 transition-colors">
+          <Link href={isHomePage ? '#home' : '/'} style={{ color: '#00171F' }} className="text-2xl md:text-3xl font-bold hover:opacity-80 transition-colors">
             Multilingual Family Space
           </Link>
 
@@ -34,7 +43,7 @@ export default function Navigation() {
               </Link>
             ))}
             <Link
-              href="#contact"
+              href={getHref('#contact')}
               style={{ backgroundColor: '#00171F' }}
               className="text-white px-6 py-2 rounded-full hover:opacity-90 transition-colors font-medium"
             >
@@ -82,7 +91,7 @@ export default function Navigation() {
               </Link>
             ))}
             <Link
-              href="#contact"
+              href={getHref('#contact')}
               onClick={() => setIsMenuOpen(false)}
               style={{ backgroundColor: '#00171F' }}
               className="block text-white px-6 py-2 rounded-full hover:opacity-90 transition-colors font-medium text-center mt-4"