Update src/app/page.tsx

Merge version_3 into main

src/app/blog/page.tsx

@@ -36,13 +36,15 @@ export default function BlogPage() {
                         brandName="Paw Haven"
                         navItems={[
                             { name: "Home", id: "/" },
-                            { name: "Adopt", id: "adopt" },
-                            { name: "About", id: "about" },
-                            { name: "Success", id: "testimonials" },
-                            { name: "Support", id: "support" },
-                            { name: "Contact", id: "contact" },
+                            { name: "Adopt", id: "/#adopt" },
+                            { name: "About", id: "/#about" },
+                            { name: "Success", id: "/#testimonials" },
+                            { name: "Support", id: "/#support" },
+                            { name: "Blog", id: "/blog" },
+                            { name: "Shop", id: "/shop" },
+                            { name: "Contact", id: "/#contact" }
                         ]}
-                        button={{ text: "Donate", href: "#contact" }}
+                        button={{ text: "Donate", href: "/#contact" }}
                     />
                 </div>
 
@@ -76,4 +78,4 @@ export default function BlogPage() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/page.tsx

@@ -3,7 +3,7 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroPersonalLinks from '@/components/sections/hero/HeroPersonalLinks';
@@ -29,8 +29,17 @@ export default function SitePage() {
       <div id="nav" data-section="nav">
         <NavbarStyleCentered 
           brandName="Paw Haven"
-          navItems={[{name: 'Adopt', id: 'adopt'}, {name: 'About', id: 'about'}, {name: 'Success', id: 'testimonials'}, {name: 'Support', id: 'support'}, {name: 'Contact', id: 'contact'}]}
-          button={{text: 'Donate', href: '#contact'}}
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Adopt", id: "/#adopt" },
+            { name: "About", id: "/#about" },
+            { name: "Success", id: "/#testimonials" },
+            { name: "Support", id: "/#support" },
+            { name: "Blog", id: "/blog" },
+            { name: "Shop", id: "/shop" },
+            { name: "Contact", id: "/#contact" }
+          ]}
+          button={{text: 'Donate', href: '/#contact'}}
         />
       </div>
 
@@ -110,10 +119,9 @@ export default function SitePage() {
       </div>
 
       <div id="faq" data-section="faq">
-        <FaqSplitMedia 
-          title="Frequently Asked Questions"
-          description="Find answers to common questions about adoption, volunteering, and supporting Paw Haven."
-          tag="Help Center"
+        <FaqSplitText 
+          sideTitle="Frequently Asked Questions"
+          sideDescription="Find answers to common questions about adoption, volunteering, and supporting Paw Haven."
           faqs={[
             {id: '1', title: 'What is the adoption process?', content: 'Our adoption process typically involves an application, a meet-and-greet with the pet, and a home visit to ensure a good match. Our team will guide you through every step.'},
             {id: '2', title: 'How can I volunteer?', content: 'We welcome volunteers! You can fill out a volunteer application on our website, and we\'ll connect you with opportunities like dog walking, cat socialization, or event support.'},
@@ -121,13 +129,10 @@ export default function SitePage() {
             {id: '4', title: 'Can I foster an animal?', content: 'Yes, fostering is a wonderful way to help! We provide all necessary supplies and medical care for foster animals. Contact us to learn more about becoming a foster parent.'},
             {id: '5', title: 'Do you offer pet surrender services?', content: 'We understand that circumstances can change. Please contact us directly to discuss our surrender policy and available resources.'}
           ]}
-          imageSrc="https://img.b2bpic.net/free-photo/two-stylish-girls-sunny-field-with-dogs_1157-34698.jpg"
-          imageAlt="Curious puppy looking up"
-          mediaPosition="left"
-          mediaAnimation="slide-up"
           faqsAnimation="slide-up"
-          textboxLayout="default"
+          textPosition="left"
           useInvertedBackground={false}
+          animationType="smooth"
         />
       </div>
 

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

@@ -85,7 +85,16 @@ export default function ProductPage({ params }: ProductPageProps) {
                     <div id="navbar" data-section="navbar">
                         <NavbarStyleCentered
                             brandName="Paw Haven"
-                            navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                            navItems={[
+                                { name: "Home", id: "/" },
+                                { name: "Adopt", id: "/#adopt" },
+                                { name: "About", id: "/#about" },
+                                { name: "Success", id: "/#testimonials" },
+                                { name: "Support", id: "/#support" },
+                                { name: "Blog", id: "/blog" },
+                                { name: "Shop", id: "/shop" },
+                                { name: "Contact", id: "/#contact" }
+                            ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
                     </div>
@@ -129,7 +138,16 @@ export default function ProductPage({ params }: ProductPageProps) {
                     <div id="navbar" data-section="navbar">
                         <NavbarStyleCentered
                             brandName="Paw Haven"
-                            navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                            navItems={[
+                                { name: "Home", id: "/" },
+                                { name: "Adopt", id: "/#adopt" },
+                                { name: "About", id: "/#about" },
+                                { name: "Success", id: "/#testimonials" },
+                                { name: "Support", id: "/#support" },
+                                { name: "Blog", id: "/blog" },
+                                { name: "Shop", id: "/shop" },
+                                { name: "Contact", id: "/#contact" }
+                            ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
                     </div>
@@ -180,7 +198,16 @@ export default function ProductPage({ params }: ProductPageProps) {
                 <div id="navbar" data-section="navbar">
                     <NavbarStyleCentered
                         brandName="Paw Haven"
-                        navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                        navItems={[
+                            { name: "Home", id: "/" },
+                            { name: "Adopt", id: "/#adopt" },
+                            { name: "About", id: "/#about" },
+                            { name: "Success", id: "/#testimonials" },
+                            { name: "Support", id: "/#support" },
+                            { name: "Blog", id: "/blog" },
+                            { name: "Shop", id: "/shop" },
+                            { name: "Contact", id: "/#contact" }
+                        ]}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />
                 </div>
@@ -235,4 +262,4 @@ export default function ProductPage({ params }: ProductPageProps) {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/shop/page.tsx

@@ -60,7 +60,16 @@ export default function ShopPage() {
                     <div id="navbar" data-section="navbar">
                         <NavbarStyleCentered
                             brandName="Paw Haven"
-                            navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                            navItems={[
+                                { name: "Home", id: "/" },
+                                { name: "Adopt", id: "/#adopt" },
+                                { name: "About", id: "/#about" },
+                                { name: "Success", id: "/#testimonials" },
+                                { name: "Support", id: "/#support" },
+                                { name: "Blog", id: "/blog" },
+                                { name: "Shop", id: "/shop" },
+                                { name: "Contact", id: "/#contact" }
+                            ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
                     </div>
@@ -103,7 +112,16 @@ export default function ShopPage() {
                 <div id="navbar" data-section="navbar">
                     <NavbarStyleCentered
                         brandName="Paw Haven"
-                        navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                        navItems={[
+                            { name: "Home", id: "/" },
+                            { name: "Adopt", id: "/#adopt" },
+                            { name: "About", id: "/#about" },
+                            { name: "Success", id: "/#testimonials" },
+                            { name: "Support", id: "/#support" },
+                            { name: "Blog", id: "/blog" },
+                            { name: "Shop", id: "/shop" },
+                            { name: "Contact", id: "/#contact" }
+                        ]}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />
                 </div>
@@ -148,4 +166,4 @@ export default function ShopPage() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/styles/variables.css

@@ -2,21 +2,21 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #f5f5f5;;
-  --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #1c1c1c;;
-  --secondary-cta: #ffffff;;
-  --accent: #6139e6;;
-  --background-accent: #b3a8e8;; */
+  /* --background: #0a0a0a;;
+  --card: #1a1a1a;;
+  --foreground: #ffffffe6;;
+  --primary-cta: #e6e6e6;;
+  --secondary-cta: #1a1a1a;;
+  --accent: #737373;;
+  --background-accent: #737373;; */
 
-  --background: #f5f5f5;;
-  --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #1c1c1c;;
-  --secondary-cta: #ffffff;;
-  --accent: #6139e6;;
-  --background-accent: #b3a8e8;;
+  --background: #0a0a0a;;
+  --card: #1a1a1a;;
+  --foreground: #ffffffe6;;
+  --primary-cta: #e6e6e6;;
+  --secondary-cta: #1a1a1a;;
+  --accent: #737373;;
+  --background-accent: #737373;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);