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

2026-06-02 01:50:27 +00:00
parent dc91037134
commit c8f3f0c8e2
1 changed files with 75 additions and 0 deletions
--- a/src/app/age-gate/page.tsx
+++ b/src/app/age-gate/page.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+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);
+  const router = useRouter();
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && localStorage.getItem('ageVerified') === 'true') {
+      router.replace('/');
+    }
+  }, [router]);
+
+  const handleEnterSite = () => {
+    if (isAdult) {
+      localStorage.setItem('ageVerified', 'true');
+      router.push('/');
+    } else {
+      alert("You must confirm you are 21 years or older to enter.");
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="radial-glow"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="small"
+      sizing="mediumSizeLargeTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div className="min-h-screen flex items-center justify-center p-4 bg-background text-foreground">
+        <div className="relative z-10 flex flex-col items-center justify-center text-center p-8 md:p-12 lg:p-16 rounded-lg shadow-xl bg-card border border-border-color">
+          <h1 className="text-4xl md:text-5xl font-bold mb-4 text-primary-cta">Welcome to Lava Vaporium</h1>
+          <p className="text-lg md:text-xl text-foreground-lighter mb-8">Age Verification Required</p>
+          <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
+              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"
+            />
+            <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
+            </label>
+          </div>
+
+          <button
+            onClick={handleEnterSite}
+            className={`px-8 py-3 rounded-full text-lg font-semibold transition-all duration-300 
+                       ${isAdult ? 'bg-primary-cta text-primary-cta-text hover:opacity-90' : 'bg-gray-700 text-gray-400 cursor-not-allowed'}`}
+            disabled={!isAdult}
+          >
+            Enter Site
+          </button>
+
+          <p className="text-sm text-foreground-lighter mt-8">
+            By entering, you confirm that you are of legal age and agree to our <Link href="#" className="underline text-accent hover:text-primary-cta">terms and conditions</Link>.
+          </p>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}