Update src/app/age-gate/page.tsx

src/app/age-gate/page.tsx

@@ -4,7 +4,6 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import React, { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import { Checkbox } from "@/components/ui/checkbox";
 
 export default function AgeGatePage() {
   const [isAdult, setIsAdult] = useState(false);
@@ -27,7 +26,7 @@ export default function AgeGatePage() {
 
   return (
     <ThemeProvider
-      defaultButtonVariant="radial-glow"
+      defaultButtonVariant="text-stagger"
       defaultTextAnimation="reveal-blur"
       borderRadius="soft"
       contentWidth="small"
@@ -45,11 +44,12 @@ export default function AgeGatePage() {
           <p className="text-base md:text-lg mb-8 max-w-md">You must be 21 years of age or older to enter this website. Please confirm your age to proceed.</p>
 
           <div className="flex items-center space-x-2 mb-8">
-            <Checkbox
+            <input
+              type="checkbox"
               id="age-confirmation"
               checked={isAdult}
-              onCheckedChange={(checked) => setIsAdult(checked === true)}
-              className="w-5 h-5 md:w-6 md:h-6 border-2 border-primary-cta data-[state=checked]:bg-primary-cta data-[state=checked]:text-primary-cta-text"
+              onChange={(e) => setIsAdult(e.target.checked)}
+              className="w-5 h-5 md:w-6 md:h-6 border-2 border-primary-cta checked:bg-primary-cta checked:text-primary-cta-text"
             />
             <label htmlFor="age-confirmation" className="text-base md:text-lg font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
               I am 21 years or older