diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 046c996..d0dac40 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -23,45 +23,51 @@ export default function BlogPage() {
             secondaryButtonStyle="radial-glow"
             headingFontWeight="semibold"
         >
-            <NavbarStyleCentered
-                navItems={[
-                    { name: "Home", id: "/" },
-                    { name: "About", id: "about" },
-                    { name: "Activities", id: "activities" },
-                    { name: "Team", id: "team" },
-                    { name: "Testimonials", id: "testimonials" },
-                    { name: "FAQ", id: "faq" },
-                ]}
-                button={{ text: "Join Club", href: "faq" }}
-                brandName="CodeWave"
-            />
+            <div id="nav" data-section="nav">
+                <NavbarStyleCentered
+                    navItems={[
+                        { name: "Home", id: "/" },
+                        { name: "About", id: "/#about" },
+                        { name: "Activities", id: "/#activities" },
+                        { name: "Team", id: "/#team" },
+                        { name: "Testimonials", id: "/#testimonials" },
+                        { name: "FAQ", id: "/#faq" },
+                    ]}
+                    button={{ text: "Join Club", href: "/#faq" }}
+                    brandName="CodeWave"
+                />
+            </div>
             
             <main>
-                {isLoading ? (
-                    <div className="w-content-width mx-auto py-20 text-center">
-                        <p className="text-foreground">Loading posts...</p>
-                    </div>
-                ) : (
-                    <BlogCardTwo
-                        blogs={posts}
-                        title="Latest Articles"
-                        description="Insights and updates from our team"
-                        animationType="slide-up"
-                        textboxLayout="default"
-                        useInvertedBackground={false}
-                        carouselMode="buttons"
-                    />
-                )}
+                <div id="blog-content" data-section="blog-content">
+                    {isLoading ? (
+                        <div className="w-content-width mx-auto py-20 text-center">
+                            <p className="text-foreground">Loading posts...</p>
+                        </div>
+                    ) : (
+                        <BlogCardTwo
+                            blogs={posts}
+                            title="Latest Articles"
+                            description="Insights and updates from our team"
+                            animationType="slide-up"
+                            textboxLayout="default"
+                            useInvertedBackground={false}
+                            carouselMode="buttons"
+                        />
+                    )}
+                </div>
             </main>
 
-            <FooterLogoEmphasis
-                columns={[
-                    { items: [{ label: "About Us", href: "about" }, { label: "Our Team", href: "team" }, { label: "Activities", href: "activities" }] },
-                    { items: [{ label: "FAQ", href: "faq" }, { label: "Join Now", href: "faq" }] },
-                    { items: [{ label: "Discord", href: "https://discord.gg/yourclub", onClick: () => {} }, { label: "GitHub", href: "https://github.com/yourclub", onClick: () => {} }] },
-                ]}
-                logoText="CodeWave"
-            />
+            <div id="footer" data-section="footer">
+                <FooterLogoEmphasis
+                    columns={[
+                        { items: [{ label: "About Us", href: "/#about" }, { label: "Our Team", href: "/#team" }, { label: "Activities", href: "/#activities" }] },
+                        { items: [{ label: "FAQ", href: "/#faq" }, { label: "Join Now", href: "/#faq" }] },
+                        { items: [{ label: "Discord", href: "https://discord.gg/yourclub", onClick: () => {} }, { label: "GitHub", href: "https://github.com/yourclub", onClick: () => {} }] },
+                    ]}
+                    logoText="CodeWave"
+                />
+            </div>
         </ThemeProvider>
     );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0a3a7df..c680999 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -52,7 +52,7 @@ export default function LandingPage() {
           ]}
           tag="Unleash Your Inner Coder"
           tagIcon={Sparkles}
-          mediaAnimation="reveal-blur"
+          mediaAnimation="blur-reveal"
         />
       </div>
 
@@ -75,7 +75,7 @@ export default function LandingPage() {
           imageAlt="Students collaborating on a programming project"
           textboxLayout="default"
           useInvertedBackground={false}
-          mediaAnimation="reveal-blur"
+          mediaAnimation="blur-reveal"
         />
       </div>
 
@@ -86,13 +86,13 @@ export default function LandingPage() {
           features={[
             {
               id: 1,
-              title: "Interactive Coding Workshops",              description: "Master new programming languages, frameworks, and tools with our expert-led, hands-on sessions. Perfect for all skill levels!",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-dynamic-image-of-a-coding-workshop-in--1771776666086-db46facb.png?_wi=1",              imageAlt: "People coding in a workshop"},
+              title: "Interactive Coding Workshops",              description: "Master new programming languages, frameworks, and tools with our expert-led, hands-on sessions. Perfect for all skill levels!",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-dynamic-image-of-a-coding-workshop-in--1771776666086-db46facb.png",              imageAlt: "People coding in a workshop"},
             {
               id: 2,
               title: "Annual Hackathon Challenges",              description: "Team up, ideate, and build innovative solutions against the clock. Showcase your creativity and problem-solving skills to win exciting prizes.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/an-intense-hackathon-scene-with-young-di-1771776666466-d676a270.png",              imageAlt: "Students participating in a hackathon"},
             {
               id: 3,
-              title: "Tech Talk & Guest Speaker Series",              description: "Gain insights from industry professionals, academics, and successful alumni. Stay updated on the latest trends and career opportunities in tech.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-dynamic-image-of-a-coding-workshop-in--1771776666086-db46facb.png?_wi=2",              imageAlt: "A speaker giving a presentation at a tech event"},
+              title: "Tech Talk & Guest Speaker Series",              description: "Gain insights from industry professionals, academics, and successful alumni. Stay updated on the latest trends and career opportunities in tech.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-dynamic-image-of-a-coding-workshop-in--1771776666086-db46facb.png",              imageAlt: "A speaker giving a presentation at a tech event"},
             {
               id: 4,
               title: "Casual Gaming & Social Nights",              description: "Unwind and connect with fellow club members during our regular gaming sessions. From competitive esports to casual co-op, there's fun for everyone.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/a-lively-computer-club-game-night-studen-1771776667885-8112597c.png",              imageAlt: "People playing video games at a computer club"},
@@ -146,7 +146,7 @@ export default function LandingPage() {
             { id: "3", title: "What kind of activities does the club offer?", content: "We host a variety of activities including coding workshops, hackathons, tech talks from industry experts, collaborative projects, competitive gaming nights, and social events. Check our 'Activities' section for more details!" },
             { id: "4", title: "When and where do you meet?", content: "Our general meetings are held weekly in the Computer Lab (Room 101). Specific workshop and event schedules are announced on our Discord server and website calendar. Make sure to subscribe to our newsletter!" },
           ]}
-          faqsAnimation="reveal-blur"
+          faqsAnimation="blur-reveal"
           textboxLayout="default"
           useInvertedBackground={false}
         />
diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index feeb7b3..635258d 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -81,8 +81,8 @@ function ProductPageContent({ params }: ProductPageProps) {
 
     const footerProps = {
         logoText: "CodeWave",        columns: [
-            { items: [{ label: "About Us", href: "about" }, { label: "Our Team", href: "team" }, { label: "Activities", href: "activities" }] },
-            { items: [{ label: "FAQ", href: "faq" }, { label: "Join Now", href: "faq" }] },
+            { items: [{ label: "About Us", href: "/#about" }, { label: "Our Team", href: "/#team" }, { label: "Activities", href: "/#activities" }] },
+            { items: [{ label: "FAQ", href: "/#faq" }, { label: "Join Now", href: "/#faq" }] },
             { items: [{ label: "Discord", href: "https://discord.gg/yourclub" }, { label: "GitHub", href: "https://github.com/yourclub" }] },
         ],
     };
@@ -102,7 +102,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                 headingFontWeight="semibold"
             >
                 <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">
@@ -133,7 +133,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                 headingFontWeight="semibold"
             >
                 <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">
@@ -171,7 +171,7 @@ function ProductPageContent({ params }: ProductPageProps) {
             headingFontWeight="semibold"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarStyleCentered {...navbarProps} />
                 </div>
                 <div id="productDetailCard" data-section="productDetailCard">
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index 94fc3f9..e61ded0 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -48,8 +48,8 @@ function ShopPageContent() {
 
     const footerProps = {
         logoText: "CodeWave",        columns: [
-            { items: [{ label: "About Us", href: "about" }, { label: "Our Team", href: "team" }, { label: "Activities", href: "activities" }] },
-            { items: [{ label: "FAQ", href: "faq" }, { label: "Join Now", href: "faq" }] },
+            { items: [{ label: "About Us", href: "/#about" }, { label: "Our Team", href: "/#team" }, { label: "Activities", href: "/#activities" }] },
+            { items: [{ label: "FAQ", href: "/#faq" }, { label: "Join Now", href: "/#faq" }] },
             { items: [{ label: "Discord", href: "https://discord.gg/yourclub" }, { label: "GitHub", href: "https://github.com/yourclub" }] },
         ],
     };
@@ -69,7 +69,7 @@ function ShopPageContent() {
                 headingFontWeight="semibold"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarStyleCentered {...navbarProps} />
                     </div>
                     <div id="loading-section" data-section="loading-section">
@@ -99,7 +99,7 @@ function ShopPageContent() {
             headingFontWeight="semibold"
         >
             <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">