From 4eaa962766f03c2cba0e40281f68cf492e7e7995 Mon Sep 17 00:00:00 2001
From: Eric Lay <ericlay@noreply.ericlay.online>
Date: Wed, 11 Mar 2026 08:44:16 -0500
Subject: [PATCH] Add src/components/onboarding/WarningModal.jsx

---
 src/components/onboarding/WarningModal.jsx | 51 ++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 src/components/onboarding/WarningModal.jsx

diff --git a/src/components/onboarding/WarningModal.jsx b/src/components/onboarding/WarningModal.jsx
new file mode 100644
index 0000000..7344651
--- /dev/null
+++ b/src/components/onboarding/WarningModal.jsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { AlertTriangle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export default function WarningModal({ open, onContinue }) {
+  return (
+    <AnimatePresence>
+      {open &&
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
+
+          <motion.div
+          initial={{ opacity: 0, scale: 0.9, y: 20 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          exit={{ opacity: 0, scale: 0.9, y: 20 }}
+          transition={{ type: "spring", damping: 25, stiffness: 300 }}
+          className="bg-white rounded-2xl shadow-2xl max-w-lg w-full overflow-hidden">
+
+            {/* Header */}
+            <div className="bg-gradient-to-r from-amber-50 to-orange-50 px-8 py-6 border-b border-amber-100">
+              <div className="flex items-center gap-3">
+                <div className="w-12 h-12 rounded-xl bg-amber-100 flex items-center justify-center">
+                  <AlertTriangle className="w-6 h-6 text-amber-600" />
+                </div>
+                <div>
+                  <h2 className="text-xl font-bold text-gray-900">Important Before You Continue</h2>
+                  <p className="text-sm text-gray-500 mt-0.5">Please read carefully before proceeding</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Body */}
+            <div className="px-8 py-6 space-y-4">
+              <p className="text-gray-700 leading-relaxed">
+                Welcome to the PackageHub360 onboarding process. Before creating your account, please be aware of the following:
+              </p>
+              <div className="bg-gray-50 rounded-xl p-4 border border-gray-100 space-y-3">
+                <p className="text-sm text-gray-600 leading-relaxed">
+                  <span className="font-semibold text-gray-800">• Account Association:</span> Your account will be permanently linked to the store information provided in your onboarding invitation.
+                </p>
+                <p className="text-sm text-gray-600 leading-relaxed">
+                  <span className="font-semibold text-gray-800">• Stripe Setup Required:</span> You will need to complete Stripe Express onboarding to receive electronic program payouts.
+                </p>
+                <p className="text-sm text-gray-600 leading-relaxed">
+                  <span className="font-semibold text-gray-800">• Data Accuracy:</span> Please ensure all information entered during signup is accurate and matches your business records.
+                </p>
+ 
\ No newline at end of file