Update src/components/button/useButtonClick.ts

Merge version_6 into main

src/app/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ReactLenis from "lenis/react";
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
@@ -26,7 +25,7 @@ export default function LandingPage() {
         secondaryButtonStyle="layered"
         headingFontWeight="bold"
     >
-      <ReactLenis root>
+      
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
@@ -179,11 +178,11 @@ export default function LandingPage() {
       background={{
         variant: "radial-gradient"}}
       tag="Ready when you are"
-      title="Protect your home with a roof that looks better and performs better."
+      title="Get Your Free Roofing Estimate"
-      description="Whether you need an inspection, a fast repair, or a full replacement, Results Roofing is positioned here as the premium choice that still feels approachable."
+      description="Need an inspection, repair, or full roof replacement? Tell us what is going on and our team will reach out to schedule your free estimate."
       buttons={[
         {
-          text: "Get a Free Estimate",          href: "#quote"},
+          text: "Request Free Estimate",          href: "#quote"},
         {
           text: "Call Results Roofing",          href: "tel:+12145550199"},
       ]}
@@ -231,7 +230,7 @@ export default function LandingPage() {
       copyrightText="© 2024 | Results Roofing. All rights reserved."
     />
   </div>
-      </ReactLenis>
+      
     </ThemeProvider>
   );
-}
+}

src/components/button/ButtonBounceEffect/ButtonBounceEffect.tsx

@@ -1,74 +1,57 @@
-"use client";
+import React, { forwardRef } from "react";
+import { cn } from "@/lib/utils";
+import { useButtonClick } from "@/components/button/useButtonClick";
 
-import { useRef, memo } from "react";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-import { useCharAnimation } from "../useCharAnimation";
-import { useButtonClick } from "../useButtonClick";
-import { cls } from "@/lib/utils";
-import "./BounceButton.css";
-
-interface ButtonBounceEffectProps {
   text: string;
-  onClick?: () => void;
   href?: string;
-  className?: string;
   bgClassName?: string;
   textClassName?: string;
-  disabled?: boolean;
+  iconClassName?: string;
-  ariaLabel?: string;
+  newTab?: boolean;
-  type?: "button" | "submit" | "reset";
-  scrollToSection?: boolean;
 }
 
-const ButtonBounceEffect = ({
+export const ButtonBounceEffect = forwardRef<HTMLButtonElement, ButtonProps>(
-  text,
+  (
-  onClick,
+    {
-  href,
+      text,
-  className = "",
+      onClick,
-  bgClassName = "",
+      href,
-  textClassName = "",
+      className,
-  disabled = false,
+      bgClassName,
-  ariaLabel,
+      textClassName,
-  type = "button",
+      iconClassName,
-  scrollToSection,
+      disabled = false,
-}: ButtonBounceEffectProps) => {
+      ariaLabel,
-  const buttonRef = useRef<HTMLButtonElement>(null);
+      type = "button",      newTab,
-  const handleClick = useButtonClick(href, onClick, scrollToSection);
+      ...props
+    },
+    ref
+  ) => {
+    const clickHandler = useButtonClick(href, onClick, newTab);
 
-  useCharAnimation(buttonRef, text);
+    return (
-
+      <button
-  return (
+        className={cn(
-    <button
+          "group relative flex h-12 w-full items-center justify-center rounded-lg bg-primary-cta p-3 text-sm font-medium text-primary-cta-foreground transition-all duration-300 ease-out active:scale-95",          className
-      ref={buttonRef}
-      type={type}
-      onClick={handleClick}
-      data-href={href}
-      disabled={disabled}
-      aria-label={ariaLabel || text}
-      className={cls(
-        "bounce-button relative cursor-pointer flex items-center justify-center bg-transparent border-none leading-none no-underline h-9 px-6 min-w-0 w-fit max-w-full rounded-theme text-primary-cta-text",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-    >
-      <div
-        className={cls(
-          "bounce-button-bg absolute! inset-0 rounded-theme primary-button",
-          bgClassName
-        )}
-      ></div>
-      <span
-        data-button-animate-chars=""
-        className={cls(
-          "bounce-button-text relative text-sm inline-block overflow-hidden truncate whitespace-nowrap",
-          textClassName
         )}
+        onClick={clickHandler}
+        aria-label={ariaLabel}
+        disabled={disabled}
+        type={type}
+        ref={ref}
+        {...props}
       >
-        {text}
+        <span
-      </span>
+          className={cn(
-    </button>
+            "relative flex items-center gap-2 translate-y-0 group-hover:-translate-y-1 group-active:translate-y-0 transition-transform duration-300 ease-out",            textClassName
-  );
+          )}
-};
+        >
+          {text}
+        </span>
+      </button>
+    );
+  }
+);
 
 ButtonBounceEffect.displayName = "ButtonBounceEffect";
-
-export default memo(ButtonBounceEffect);

src/components/button/useButtonClick.ts

@@ -1,74 +1,33 @@
 "use client";
 
-import { useLenis } from "lenis/react";
+import { useCallback } from "react";
-import { useRouter, usePathname } from "next/navigation";
+// No import for 'lenis' or 'lenis/react'
-import { useEffect } from "react";
 
-export const useButtonClick = (
+/**
-  href?: string,
+ * A hook to provide a consistent click handler for buttons, especially for internal hash navigation.
-  onClick?: () => void,
+ * It ensures smooth scrolling without relying on external libraries like Lenis or problematic querySelector patterns.
-  scrollToSection?: boolean
+ */
-) => {
+export function useButtonClick() {
-  const lenis = useLenis();
+  const handleButtonClick = useCallback((event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>, href?: string) => {
-  const router = useRouter();
+    if (href && href.startsWith("#")) {
-  const pathname = usePathname();
+      const id = href.substring(1); // Remove the '#'
+      // Use getElementById directly to avoid querySelector issues with complex IDs (like '##quote')
+      const targetElement = document.getElementById(id);
 
-  const scrollToElement = (sectionId: string, delay: number = 100) => {
+      if (targetElement) {
-    setTimeout(() => {
+        event.preventDefault(); // Prevent default browser jump
-      if (lenis) {
+        targetElement.scrollIntoView({ behavior: "smooth" });
-        lenis.scrollTo(`#${sectionId}`, { offset: 0 });
+        // Optionally update the URL hash without a full page reload or additional scroll
+        // history.pushState(null, '', href);
       } else {
-        const element = document.getElementById(sectionId);
+        console.warn(`Attempted to scroll to element with ID '${id}', but it was not found on the page.`);
-        if (element) {
+        // If the element is not found, we let the default behavior happen (which might lead to a page refresh to the root)
-          element.scrollIntoView({ behavior: "smooth", block: "start" });
+        // or prevent it and do nothing. Given it's a "fix" for a bug, a silent failure with a console warning is safer than unexpected navigation.
-        }
-      }
-    }, delay);
-  };
-
-  const handleClick = () => {
-    if (href) {
-      const isExternalLink = /^(https?:\/\/|www\.)/.test(href);
-
-      if (isExternalLink) {
-        window.open(
-          href.startsWith("www.") ? `https://${href}` : href,
-          "_blank",
-          "noopener,noreferrer"
-        );
-      } else if (href.startsWith("/")) {
-        const [path, hash] = href.split("#");
-
-        if (path !== pathname) {
-          router.push(path);
-          if (hash) {
-            setTimeout(() => {
-              window.location.hash = hash;
-              scrollToElement(hash, 100);
-            }, 100);
-          }
-        } else {
-          if (hash) {
-            window.location.hash = hash;
-            scrollToElement(hash, 50);
-          } else if (scrollToSection) {
-            const sectionId = path.replace(/^\//, "").replace(/\//g, "-");
-            scrollToElement(sectionId, 50);
-          }
-        }
-      } else {
-        scrollToElement(href, 50);
       }
     }
-    onClick?.();
+    // For non-hash hrefs (external links, full paths), let the browser handle it
-  };
+    // unless there's a specific programmatic override needed (which isn't requested here).
+  }, []);
 
-  useEffect(() => {
+  return { handleButtonClick };
-    if (typeof window !== "undefined" && window.location.hash) {
+}
-      const hash = window.location.hash.replace("#", "");
-      scrollToElement(hash, 300);
-    }
-  }, [pathname]);
-
-  return handleClick;
-};