Create components/AgeGate.tsx

components/AgeGate.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { ShieldCheck, Ban } from 'lucide-react';
+
+interface AgeGateProps {
+  onVerify: (verified: boolean) => void;
+}
+
+const AgeGate: React.FC<AgeGateProps> = ({ onVerify }) => {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/95 backdrop-blur-md">
+      <div className="bg-gray-800 border border-emerald-700/50 rounded-2xl shadow-2xl max-w-md w-full p-8 text-center relative overflow-hidden">
+        {/* Decorative background glow */}
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-32 bg-emerald-500/20 rounded-full blur-3xl -z-10"></div>
+
+        <div className="mx-auto w-16 h-16 bg-emerald-900/50 rounded-full flex items-center justify-center mb-6 border border-emerald-500/30">
+          <ShieldCheck className="w-8 h-8 text-emerald-400" />
+        </div>
+
+        <h2 className="text-3xl font-bold text-white mb-2">Age Verification</h2>
+        <p className="text-gray-400 mb-8">
+          You must be 21 years or older to access this cannabis educational assistant.
+        </p>
+
+        <div className="flex flex-col gap-3">
+          <button
+            onClick={() => onVerify(true)}
+            className="w-full py-3.5 px-6 bg-emerald-600 hover:bg-emerald-500 text-white font-semibold rounded-xl transition-all duration-200 transform hover:scale-[1.02] shadow-lg shadow-emerald-900/50"
+          >
+            Yes, I am 21+
+          </button>
+          
+          <button
+            onClick={() => onVerify(false)}
+            className="w-full py-3.5 px-6 bg-gray-700 hover:bg-gray-600 text-gray-300 font-semibold rounded-xl transition-colors flex items-center justify-center gap-2"
+          >
+            <Ban className="w-4 h-4" />
+            No, I am not
+          </button>
+        </div>
+        
+        <p className="mt-6 text-xs text-gray-500">
+          By entering, you agree to view educational content regarding cannabis strains and products.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default AgeGate;