src/app/about/page.tsx

@@ -5,6 +5,7 @@ import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import FooterBase from '@/components/sections/footer/FooterBase';
+import Link from "next/link";
 
 export default function AboutPage() {
   const navItems = [
@@ -57,7 +58,7 @@ export default function AboutPage() {
       headingFontWeight={"light"}
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered navItems={navItems} button={navButton} brandName="Hope Haven" className="py-4" />
+        <NavbarStyleCentered navItems={navItems.map(item => ({...item, id: item.id.startsWith('/') ? item.id : `#${item.id}`}))} button={navButton} brandName="Hope Haven" className="py-4" />
       </div>
 
       <div id="about-us" data-section="about-us">

src/app/adopt/page.tsx

@@ -6,6 +6,7 @@ import FeatureHoverPattern from '@/components/sections/feature/featureHoverPatte
 import { Home, HeartHandshake, Stethoscope, Family } from "lucide-react";
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterBase from '@/components/sections/footer/FooterBase';
+import Link from "next/link";
 
 export default function AdoptPage() {
   const navItems = [
@@ -58,7 +59,7 @@ export default function AdoptPage() {
       headingFontWeight={"light"}
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered navItems={navItems} button={navButton} brandName="Hope Haven" className="py-4" />
+        <NavbarStyleCentered navItems={navItems.map(item => ({...item, id: item.id.startsWith('/') ? item.id : `#${item.id}`}))} button={navButton} brandName="Hope Haven" className="py-4" />
       </div>
 
       <div id="adoptable-pets" data-section="adoptable-pets">

src/app/blog/page.tsx

@@ -6,6 +6,7 @@ import FooterBase from "@/components/sections/footer/FooterBase";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import { useBlogPosts } from "@/hooks/useBlogPosts";
+import Link from "next/link";
 
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
@@ -34,7 +35,7 @@ export default function BlogPage() {
                             { name: "Donate", id: "/donate" },
                             { name: "Shop", id: "/shop" },
                             { name: "Blog", id: "/blog" }
-                        ]}
+                        ].map(item => ({...item, id: item.id.startsWith('/') ? item.id : `#${item.id}`}))}
                         button={{ text: "Donate", href: "/donate" }}
                         brandName="Hope Haven"
                         className="py-4"

src/app/contact/page.tsx

@@ -5,6 +5,7 @@ import ContactText from '@/components/sections/contact/ContactText';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import FooterBase from '@/components/sections/footer/FooterBase';
+import Link from "next/link";
 
 export default function ContactPage() {
   const navItems = [
@@ -57,7 +58,7 @@ export default function ContactPage() {
       headingFontWeight={"light"}
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered navItems={navItems} button={navButton} brandName="Hope Haven" className="py-4" />
+        <NavbarStyleCentered navItems={navItems.map(item => ({...item, id: item.id.startsWith('/') ? item.id : `#${item.id}`}))} button={navButton} brandName="Hope Haven" className="py-4" />
       </div>
 
       <div id="get-involved" data-section="get-involved">
@@ -74,7 +75,7 @@ export default function ContactPage() {
 
       <div id="happy-stories" data-section="happy-stories">
         <TestimonialCardFifteen
-          testimonial="\"The Hope Haven team made volunteering such a rewarding experience. Knowing I'm directly contributing to animals' well-being is incredibly fulfilling.\""
+          testimonial="The Hope Haven team made volunteering such a rewarding experience. Knowing I'm directly contributing to animals' well-being is incredibly fulfilling."
           rating={5}
           author="Michael Chen, Volunteer"
           avatars={[

src/app/donate/page.tsx

@@ -5,6 +5,7 @@ import ContactText from '@/components/sections/contact/ContactText';
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import FooterBase from '@/components/sections/footer/FooterBase';
+import Link from "next/link";
 
 export default function DonatePage() {
   const navItems = [
@@ -57,7 +58,7 @@ export default function DonatePage() {
       headingFontWeight={"light"}
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered navItems={navItems} button={navButton} brandName="Hope Haven" className="py-4" />
+        <NavbarStyleCentered navItems={navItems.map(item => ({...item, id: item.id.startsWith('/') ? item.id : `#${item.id}`}))} button={navButton} brandName="Hope Haven" className="py-4" />
       </div>
 
       <div id="get-involved" data-section="get-involved">
@@ -93,7 +94,7 @@ export default function DonatePage() {
 
       <div id="happy-stories" data-section="happy-stories">
         <TestimonialCardFifteen
-          testimonial="\"My donation to Hope Haven helped cover medical costs for a dog that was hit by a car. Knowing I made a direct impact on saving a life is incredibly rewarding.\""
+          testimonial="My donation to Hope Haven helped cover medical costs for a dog that was hit by a car. Knowing I made a direct impact on saving a life is incredibly rewarding."
           rating={5}
           author="Emily Rodriguez, Donor"
           avatars={[

src/app/page.tsx

@@ -10,6 +10,7 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterBase from '@/components/sections/footer/FooterBase';
+import Link from "next/link";
 
 export default function HomePage() {
   const navItems = [
@@ -62,7 +63,7 @@ export default function HomePage() {
       headingFontWeight={"light"}
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered navItems={navItems} button={navButton} brandName="Hope Haven" className="py-4" />
+        <NavbarStyleCentered navItems={navItems.map(item => ({...item, id: item.id.startsWith('/') ? item.id : `#${item.id}`}))} button={navButton} brandName="Hope Haven" className="py-4" />
       </div>
 
       <div id="hero" data-section="hero">
@@ -150,7 +151,7 @@ export default function HomePage() {
 
       <div id="happy-stories" data-section="happy-stories">
         <TestimonialCardFifteen
-          testimonial="\"Adopting from Hope Haven was the best decision we ever made. Our new dog, Charlie, has brought so much joy into our lives. The staff was incredibly helpful and supportive throughout the whole process.\""
+          testimonial="Adopting from Hope Haven was the best decision we ever made. Our new dog, Charlie, has brought so much joy into our lives. The staff was incredibly helpful and supportive throughout the whole process."
           rating={5}
           author="Sarah Johnson, Proud Pet Parent"
           avatars={[

src/app/shop/[id]/page.tsx

@@ -13,6 +13,7 @@ import { useCheckout } from "@/hooks/useCheckout";
 // New imports for Navbar and Footer
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import FooterBase from '@/components/sections/footer/FooterBase';
+import Link from "next/link";
 
 interface ProductPageProps {
     params: Promise<{ id: string }>;
@@ -91,7 +92,7 @@ export default function ProductPage({ params }: ProductPageProps) {
             { name: "Shop", id: "/shop" },
             { name: "Donate", id: "/donate" },
             { name: "Blog", id: "/blog" }
-        ],
+        ].map(item => ({...item, id: item.id.startsWith('/') ? item.id : `#${item.id}`})),
         brandName: "Hope Haven",        className: "py-4",        button: { text: "Cart", onClick: () => setCartOpen(true) }
     };
 
@@ -109,7 +110,7 @@ export default function ProductPage({ params }: ProductPageProps) {
         return (
             <ThemeProvider {...themeProps}>
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarStyleCentered {...navbarProps} />
                     </div>
                     <div id="loading-state" data-section="loading-state">
@@ -129,7 +130,7 @@ export default function ProductPage({ params }: ProductPageProps) {
         return (
             <ThemeProvider {...themeProps}>
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarStyleCentered {...navbarProps} />
                     </div>
                     <div id="not-found-state" data-section="not-found-state">
@@ -156,7 +157,7 @@ export default function ProductPage({ params }: ProductPageProps) {
     return (
         <ThemeProvider {...themeProps}>
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarStyleCentered {...navbarProps} />
                 </div>
                 <div id="product-detail-card" data-section="product-detail-card">

src/app/shop/page.tsx

@@ -8,6 +8,7 @@ import { useProductCatalog } from "@/hooks/useProductCatalog";
 // New imports for Navbar and Footer
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import FooterBase from '@/components/sections/footer/FooterBase';
+import Link from "next/link";
 
 export default function ShopPage() {
     const {
@@ -41,7 +42,7 @@ export default function ShopPage() {
             { name: "Shop", id: "/shop" },
             { name: "Donate", id: "/donate" },
             { name: "Blog", id: "/blog" }
-        ],
+        ].map(item => ({...item, id: item.id.startsWith('/') ? item.id : `#${item.id}`})),
         brandName: "Hope Haven",        className: "py-4",        button: { text: "Cart", onClick: () => console.log("cart") }
     };
 
@@ -59,7 +60,7 @@ export default function ShopPage() {
         return (
             <ThemeProvider {...themeProps}>
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarStyleCentered {...navbarProps} />
                     </div>
                     <div id="loading-state" data-section="loading-state">
@@ -78,7 +79,7 @@ export default function ShopPage() {
     return (
         <ThemeProvider {...themeProps}>
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarStyleCentered {...navbarProps} />
                 </div>
                 <div id="product-catalog" data-section="product-catalog">