Update src/app/donate/page.tsx

src/app/donate/page.tsx

@@ -58,7 +58,7 @@ export default function DonatePage() {
       headingFontWeight={"light"}
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered navItems={navItems.map(item => ({...item, id: item.id.startsWith('/') ? item.id : `#${item.id}`}))} button={navButton} brandName="Hope Haven" className="py-4" />
+        <NavbarStyleCentered navItems={navItems} button={navButton} brandName="Hope Haven" className="py-4" />
       </div>
 
       <div id="get-involved" data-section="get-involved">
@@ -66,7 +66,7 @@ export default function DonatePage() {
           text="Your generosity changes lives. Every donation brings us closer to a world where every animal has a home."
           animationType="background-highlight"
           buttons={[{ text: "Donate Now", href: "#" }, { text: "Learn More", href: "/about" }]}
-          background={{ variant: "aurora" }}
+          background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
           ariaLabel="Call to action for donations"
           textClassName="font-light"
@@ -86,7 +86,7 @@ export default function DonatePage() {
           textboxLayout="default"
           useInvertedBackground={false}
           tag="Making a Difference"
-          titleClassName="font-light"
+          textBoxTitleClassName="font-light"
           textBoxDescriptionClassName="font-light"
           metricTitleClassName="font-light"
         />
@@ -107,7 +107,6 @@ export default function DonatePage() {
           avatarsAnimation="slide-up"
           useInvertedBackground={false}
           testimonialClassName="font-light"
-          authorClassName="font-light"
         />
       </div>
 
@@ -115,7 +114,6 @@ export default function DonatePage() {
         columns={footerColumns}
         logoText="Hope Haven"
         copyrightText="© 2024 Hope Haven Animal Shelter. All rights reserved."
-        useInvertedBackground={false}
       />
     </ThemeProvider>
   );