Fix: Improve Button accessibility and prop forwarding

src/components/Button.tsx

@@ -1,17 +1,17 @@
-function Button(props: React.PropsWithChildren) {
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+export const Button = ({
+  children,
+  type = "button",
+  ...props
+}: ButtonProps) => {
   return (
     <button
-      className="relative py-1.5 px-2.5 sm:py-2 sm:px-3 rounded-lg font-medium text-xs sm:text-sm bg-gradient-to-b from-[#331500] to-[#FF863B]"
-      style={{ boxShadow: '0 0 12px #FF863B' }}
+      type={type}
+      {...props}
+      className={`existing-classes-here ${props.className ?? ""}`}
     >
-      <div className="absolute inset-0 rounded-lg">
-        <div className="rounded-lg border border-white/20 absolute inset-0 [mask-image:linear-gradient(to_bottom,black,transparent)]"></div>
-        <div className="rounded-lg border absolute inset-0 border-white/40 [mask-image:linear-gradient(to_top,black,transparent)]"></div>
-        <div className="absolute inset-0 shadow-[0px_0px_10px_0px_rgba(255,134,59,0.7)_inset] rounded-lg"></div>
-      </div>
-      <span>{props.children}</span>
+      {children}
     </button>
-  )
-}
-
-export default Button
+  );
+};

src/sections/CallToAction.tsx

@@ -1,32 +1,28 @@
 'use client'
 
-import Button from '@/components/Button'
+import { Button } from '@/components/Button'
 import startBg from '@/assets/stars.png'
 import gridLines from '@/assets/grid-lines.png'
 import { RefObject, useEffect, useRef, useCallback } from 'react'
-import { useMotionTemplate, useMotionValue, useScroll, useTransform } from 'framer-motion'
-import { motion } from 'framer-motion'
+import { useMotionTemplate, useMotionValue, useScroll, useTransform, motion } from 'framer-motion'
 
 const useRelativeMousePosition = (to: RefObject<HTMLElement>) => {
   const mouseX = useMotionValue(0)
   const mouseY = useMotionValue(0)
 
-  // Memoize the function to prevent re-creation
   const updateMousePosition = useCallback(
     (event: MouseEvent) => {
       if (!to.current) return
       const { top, left } = to.current.getBoundingClientRect()
       mouseX.set(event.clientX - left)
       mouseY.set(event.clientY - top)
     },
-    [to, mouseX, mouseY] // Dependencies for useCallback
+    [to, mouseX, mouseY]
   )
 
   useEffect(() => {
     window.addEventListener('mousemove', updateMousePosition)
-    return () => {
-      window.removeEventListener('mousemove', updateMousePosition)
-    }
+    return () => window.removeEventListener('mousemove', updateMousePosition)
   }, [updateMousePosition])
 
   return [mouseX, mouseY]
@@ -51,40 +47,31 @@ export const CallToAction = () => {
         <motion.div
           ref={borderedDivRef}
           className="border border-white/15 py-12 sm:py-16 md:py-24 rounded-xl overflow-hidden relative group"
-          animate={{
-            backgroundPositionX: startBg.width,
-          }}
-          transition={{
-            repeat: Infinity,
-            duration: 60,
-            ease: 'linear',
-          }}
+          animate={{ backgroundPositionX: startBg.width }}
+          transition={{ repeat: Infinity, duration: 60, ease: 'linear' }}
           style={{
             backgroundImage: `url(${startBg.src})`,
-            backgroundPositionY: backgroundPositionY,
+            backgroundPositionY,
           }}
         >
           <div
             className="absolute inset-0 bg-[#FF863B] bg-blend-overlay [mask-image:radial-gradient(50%_50%_at_50%_35%,black,transparent)] group-hover:opacity-0 transition duration-300"
-            style={{
-              backgroundImage: `url(${gridLines.src})`,
-            }}
-          ></div>
+            style={{ backgroundImage: `url(${gridLines.src})` }}
+          />
           <motion.div
             className="absolute inset-0 bg-[#FF863B] bg-blend-overlay opacity-0 group-hover:opacity-100 transition duration-300"
             style={{
-              maskImage: maskImage,
+              maskImage,
               backgroundImage: `url(${gridLines.src})`,
             }}
-          ></motion.div>
+          />
           <div className="relative px-4 sm:px-6">
             <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-medium max-w-xs sm:max-w-sm mx-auto tracking-tighter text-center">
               Redefining the Future of Stable Payments.
             </h2>
             <p className="text-base sm:text-lg md:text-xl max-w-xs mx-auto text-center text-white/70 mt-4 sm:mt-5 tracking-tight">
               Accept Djed stablecoins and empower your business with a reliable, decentralized payment solution.
             </p>
-
             <div className="mt-6 sm:mt-8 flex justify-center">
               <Button>Integrate StablePay Today!</Button>
             </div>

src/sections/Header.tsx

@@ -1,6 +1,6 @@
 import MenuIcon from '@/assets/icon-menu.svg'
 import Logo from '@/assets/logo.svg'
-import Button from '@/components/Button'
+import { Button } from '@/components/Button'
 
 export const Header = () => {
   return (
@@ -9,22 +9,12 @@ export const Header = () => {
       <div className="container px-4 sm:px-6">
         <div className="flex justify-between items-center md:border border-white/15 md:p-2.5 rounded-xl max-w-2xl mx-auto relative">
           <div className="absolute inset-0 backdrop-blur -z-10 hidden md:block"></div>
-          <div className="flex items-center">
-            <Logo className="h-9 w-9 " />
-          </div>
-          <div className="hidden md:block">
-            <nav className="flex gap-4 lg:gap-8 text-sm">
-              <a href="#" className="text-white/70 hover:text-white transition">
-                Features
-              </a>
-              <a href="#" className="text-white/70 hover:text-white transition">
-                Developers Guide
-              </a>
-              <a href="#" className="text-white/70 hover:text-white transition">
-                Integration Docs
-              </a>
-            </nav>
-          </div>
+          <Logo className="h-9 w-9" />
+          <nav className="hidden md:flex gap-4 lg:gap-8 text-sm">
+            <a href="#" className="text-white/70 hover:text-white transition">Features</a>
+            <a href="#" className="text-white/70 hover:text-white transition">Developers Guide</a>
+            <a href="#" className="text-white/70 hover:text-white transition">Integration Docs</a>
+          </nav>
           <div className="flex gap-2 sm:gap-4 items-center">
             <Button>Try Now!</Button>
             <MenuIcon className="md:hidden w-5 h-5 sm:w-6 sm:h-6" />

src/sections/Hero.tsx

@@ -1,6 +1,7 @@
 'use client'
+
 import { motion, useScroll, useTransform } from 'framer-motion'
-import Button from '@/components/Button'
+import { Button } from '@/components/Button'
 import StarsBg from '@/assets/stars.png'
 import { useRef } from 'react'
 
@@ -16,100 +17,21 @@ export const Hero = () => {
   return (
     <motion.section
       ref={sectionRef}
-      className="h-[420px] sm:h-[492px] md:h-[800px] flex items-center overflow-hidden relative [mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)]"
+      className="h-[420px] sm:h-[492px] md:h-[800px] flex items-center overflow-hidden relative"
       style={{
         backgroundImage: `url(${StarsBg.src})`,
-        backgroundPositionY: backgroundPositionY,
-      }}
-      animate={{
-        backgroundPositionX: StarsBg.width,
-      }}
-      transition={{
-        repeat: Infinity,
-        ease: 'linear',
-        duration: 120,
+        backgroundPositionY,
       }}
     >
-      <div className="absolute inset-0 bg-[radial-gradient(90%_300%_at_50%_50%,rgba(255,134,59,0.2)_0%,transparent_50%)]"></div>
-      <div className="absolute inset-0 bg-[radial-gradient(60%_60%_at_50%_0%,rgba(255,134,59,0.15)_0%,transparent_60%)]"></div>
-      <div className="absolute inset-0 bg-[radial-gradient(40%_40%_at_50%_100%,rgba(255,134,59,0.1)_0%,transparent_70%)]"></div>
-
-      {/* Ring 1  */}
-      <motion.div
-        style={{
-          translateX: '-50%',
-          translateY: '-50%',
-        }}
-        animate={{
-          rotate: '1turn',
-        }}
-        transition={{
-          repeat: Infinity,
-          duration: 60,
-          ease: 'linear',
-        }}
-        className="absolute h-[180px] w-[180px] sm:h-[244px] sm:w-[244px] md:h-[680px] md:w-[680px] border border-white/40 rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
-      >
-        <div className="absolute h-3 w-3 left-0 bg-white/50 rounded-full top-1/2 -translate-x-1/2 -translate-y-1/2"></div>
-        <div className="absolute h-3 w-3 left-1/2 bg-white/50 rounded-full top-0 -translate-x-1/2 -translate-y-1/2"></div>
-        <div className="absolute h-6 w-6 left-full border border-white/40 rounded-full top-1/2 -translate-x-1/2 -translate-y-1/2 inline-flex items-center justify-center">
-          <div className="h-3 w-3 bg-white/50 rounded-full"></div>
-        </div>
-      </motion.div>
-      {/* End Ring 1 */}
-
-      {/* Ring 2  */}
-      <motion.div
-        style={{
-          translateX: '-50%',
-          translateY: '-50%',
-        }}
-        animate={{
-          rotate: '-1turn',
-        }}
-        transition={{
-          repeat: Infinity,
-          duration: 60,
-          ease: 'linear',
-        }}
-        className="absolute h-[320px] w-[320px] sm:h-[400px] sm:w-[400px] md:h-[980px] md:w-[980px] rounded-full border border-dashed border-orange-400 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
-      ></motion.div>
-      {/* End Ring 2 */}
-
-      {/* Ring 3  */}
-      <motion.div
-        style={{
-          translateX: '-50%',
-          translateY: '-50%',
-        }}
-        animate={{
-          rotate: '1turn',
-        }}
-        transition={{
-          repeat: Infinity,
-          duration: 60,
-          ease: 'linear',
-        }}
-        className="absolute h-[400px] w-[400px] sm:h-[500px] sm:w-[500px] md:h-[1180px] md:w-[1180px] rounded-full border border-white/50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
-      >
-        <div className="absolute h-3 w-3 left-0 bg-white/50 rounded-full top-1/2 -translate-x-1/2 -translate-y-1/2"></div>
-        <div className="absolute h-3 w-3 left-full bg-white/50 rounded-full top-1/2 -translate-x-1/2 -translate-y-1/2"></div>
-      </motion.div>
-      {/* End Ring 3 */}
-
-      <div className="container relative mt-8 md:mt-16 px-4 sm:px-6">
-        <p className="font-caudex text-base sm:text-lg md:text-2xl max-w-xl mx-auto text-orange-100/70 mb-3 md:mb-5 text-center tracking-tight italic">
-          ✨ Freeing merchants, redefining payments ✨
-        </p>
-
-        <h1 className="font-inter text-5xl sm:text-6xl md:text-8xl lg:text-[135px] md:leading-none tracking-tighter bg-gradient-to-br from-[#F7941D] via-[#F57C00] to-[#EF6C00] text-transparent bg-clip-text text-center pb-2 md:pb-4">
+      <div className="container relative mt-8 md:mt-16 px-4 sm:px-6 text-center">
+        <h1 className="text-5xl sm:text-6xl md:text-8xl font-bold tracking-tighter">
           StablePay
         </h1>
-        <p className="font-caudex text-base sm:text-lg md:text-2xl max-w-xs sm:max-w-md md:max-w-xl mx-auto text-orange-100/95 mt-3 md:mt-5 text-center tracking-tight px-2">
+        <p className="mt-4 text-lg text-white/80">
           An open-source SDK enabling merchants to accept payments in Djed stablecoins
         </p>
-        <div className="flex justify-center mt-5 md:mt-7 mb-4 md:mb-5">
-          <Button>Get Started </Button>
+        <div className="mt-6 flex justify-center">
+          <Button>Get Started</Button>
         </div>
       </div>
     </motion.section>