@stevederico/skateboard-ui 1.3.0 → 1.3.2

package/App.jsx

@@ -7,6 +7,7 @@ import {
   useLocation,
 } from 'react-router-dom';
 import { useEffect } from 'react';
+import { ThemeProvider } from 'next-themes';
 import Layout from './Layout.jsx';
 import LandingView from './LandingView.jsx';
 import TextView from './TextView.jsx';
@@ -20,6 +21,7 @@ import ProtectedRoute from './ProtectedRoute.jsx';
 import ErrorBoundary from './ErrorBoundary.jsx';
 import { useAppSetup, initializeUtilities, validateConstants } from './Utilities.js';
 import { ContextProvider } from './Context.jsx';
+import Toast from './Toast.jsx';
 
 function App({ constants, appRoutes, defaultRoute }) {
   const location = useLocation();
@@ -68,19 +70,22 @@ export function createSkateboardApp({ constants, appRoutes, defaultRoute = appRo
 
   root.render(
     <ErrorBoundary>
-      <ContextProvider constants={constants}>
-        {Wrapper ? (
-          <Wrapper>
+      <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        <Toast />
+        <ContextProvider constants={constants}>
+          {Wrapper ? (
+            <Wrapper>
+              <Router>
+                <App constants={constants} appRoutes={appRoutes} defaultRoute={defaultRoute} />
+              </Router>
+            </Wrapper>
+          ) : (
             <Router>
               <App constants={constants} appRoutes={appRoutes} defaultRoute={defaultRoute} />
             </Router>
-          </Wrapper>
-        ) : (
-          <Router>
-            <App constants={constants} appRoutes={appRoutes} defaultRoute={defaultRoute} />
-          </Router>
-        )}
-      </ContextProvider>
+          )}
+        </ContextProvider>
+      </ThemeProvider>
     </ErrorBoundary>
   );
 }

package/AppSidebar.jsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { useNavigate, useLocation } from "react-router-dom";
-import constants from "@/constants.json";
 import DynamicIcon from "./DynamicIcon.jsx";
+import { getState } from "./Context.jsx";
+import { Avatar, AvatarFallback } from "./shadcn/ui/avatar.jsx";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./shadcn/ui/tooltip.jsx";
 import {
   Sidebar,
   SidebarContent,
@@ -21,6 +23,8 @@ export default function AppSidebar() {
   const navigate = useNavigate();
   const location = useLocation();
   const currentPage = (location.pathname.split("/")[2] || "").toLowerCase();
+  const { state } = getState();
+  const constants = state.constants;
 
   const handleNavigation = (url) => {
     navigate(url);
@@ -57,24 +61,39 @@ export default function AppSidebar() {
         >
           {constants.pages.map((item) => {
             const isActive = currentPage === item.url.toLowerCase();
+            const buttonElement = (
+              <button
+                type="button"
+                className={`cursor-pointer items-center flex w-full px-4 py-3 rounded-lg ${open ? "h-14" : "h-12 w-12"} ${isActive ? "bg-accent/80 text-accent-foreground" : "hover:bg-accent/50 hover:text-accent-foreground"}`}
+                onClick={() => handleNavigation(`/app/${item.url.toLowerCase()}`)}
+                aria-label={item.title}
+                aria-current={isActive ? 'page' : undefined}
+              >
+                <span className="flex w-full items-center">
+                  <DynamicIconComponent
+                    name={item.icon}
+                    size={20}
+                    strokeWidth={1.5}
+                  />
+                  {open && <span className="ml-3">{item.title}</span>}
+                </span>
+              </button>
+            );
+
             return (
               <li key={item.title}>
-                <button
-                  type="button"
-                  className={`cursor-pointer items-center flex w-full px-4 py-3 rounded-lg ${open ? "h-14" : "h-12 w-12"} ${isActive ? "bg-accent/80 text-accent-foreground" : "hover:bg-accent/50 hover:text-accent-foreground"}`}
-                  onClick={() => handleNavigation(`/app/${item.url.toLowerCase()}`)}
-                  aria-label={item.title}
-                  aria-current={isActive ? 'page' : undefined}
-                >
-                  <span className="flex w-full items-center">
-                    <DynamicIconComponent
-                      name={item.icon}
-                      size={20}
-                      strokeWidth={1.5}
-                    />
-                    {open && <span className="ml-3">{item.title}</span>}
-                  </span>
-                </button>
+                {!open ? (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      {buttonElement}
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      {item.title}
+                    </TooltipContent>
+                  </Tooltip>
+                ) : (
+                  buttonElement
+                )}
               </li>
             );
           })}
@@ -82,24 +101,68 @@ export default function AppSidebar() {
       </SidebarContent>
       <SidebarFooter>
         <ul className={`flex flex-col gap-1 ${open ? "" : "items-center"}`}>
+          {state.user && (constants.noLogin === false || typeof constants.noLogin === 'undefined') && (
+            <li className={`px-2 pb-2 ${!open ? "flex justify-center" : ""}`}>
+              <div className={`flex items-center gap-3 ${open ? "w-full" : ""}`}>
+                <Avatar size="default">
+                  <AvatarFallback className="bg-app dark:text-black text-white uppercase text-xs font-medium">
+                    {state.user?.name?.split(' ').map(word => word[0]).join('') || "NA"}
+                  </AvatarFallback>
+                </Avatar>
+                {open && (
+                  <div className="flex-1 min-w-0">
+                    <div className="text-sm font-medium truncate capitalize">{state.user?.name || "User"}</div>
+                    <div className="text-xs text-muted-foreground truncate">{state.user?.email}</div>
+                  </div>
+                )}
+              </div>
+            </li>
+          )}
           <li>
-            <button
-              type="button"
-              className={`cursor-pointer items-center rounded-lg flex w-full px-4 py-3 ${open ? "h-14" : "h-12 w-12"}
-              ${location.pathname.toLowerCase().includes("settings") ? "bg-accent/80 text-accent-foreground" : "hover:bg-accent/50 hover:text-accent-foreground"}`}
-              onClick={() => handleNavigation("/app/settings")}
-              aria-label="Settings"
-              aria-current={location.pathname.toLowerCase().includes("settings") ? 'page' : undefined}
-            >
-              <span className="flex w-full items-center">
-                <DynamicIconComponent
-                  name="settings"
-                  size={20}
-                  strokeWidth={1.5}
-                />
-                {open && <span className="ml-3">Settings</span>}
-              </span>
-            </button>
+            {!open ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    className={`cursor-pointer items-center rounded-lg flex w-full px-4 py-3 ${open ? "h-14" : "h-12 w-12"}
+                    ${location.pathname.toLowerCase().includes("settings") ? "bg-accent/80 text-accent-foreground" : "hover:bg-accent/50 hover:text-accent-foreground"}`}
+                    onClick={() => handleNavigation("/app/settings")}
+                    aria-label="Settings"
+                    aria-current={location.pathname.toLowerCase().includes("settings") ? 'page' : undefined}
+                  >
+                    <span className="flex w-full items-center">
+                      <DynamicIconComponent
+                        name="settings"
+                        size={20}
+                        strokeWidth={1.5}
+                      />
+                      {open && <span className="ml-3">Settings</span>}
+                    </span>
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="right">
+                  Settings
+                </TooltipContent>
+              </Tooltip>
+            ) : (
+              <button
+                type="button"
+                className={`cursor-pointer items-center rounded-lg flex w-full px-4 py-3 ${open ? "h-14" : "h-12 w-12"}
+                ${location.pathname.toLowerCase().includes("settings") ? "bg-accent/80 text-accent-foreground" : "hover:bg-accent/50 hover:text-accent-foreground"}`}
+                onClick={() => handleNavigation("/app/settings")}
+                aria-label="Settings"
+                aria-current={location.pathname.toLowerCase().includes("settings") ? 'page' : undefined}
+              >
+                <span className="flex w-full items-center">
+                  <DynamicIconComponent
+                    name="settings"
+                    size={20}
+                    strokeWidth={1.5}
+                  />
+                  {open && <span className="ml-3">Settings</span>}
+                </span>
+              </button>
+            )}
           </li>
         </ul>
       </SidebarFooter>

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # CHANGELOG
 
+1.3.2
+
+  Remove Geist font imports
+  Replace path aliases with relative
+  Add constants to Context state
+
+1.3.1
+
+  Add Geist font
+  Add Toast notifications
+  Add SkeletonLoader component
+  Add Avatar components
+  Add Badge components
+  Add Tooltip components
+  Add Checkbox components
+  Add AlertDialog components
+  Add user profile
+  Add USAGE.md documentation
+  Update README documentation
+  Export new components
+
 1.3.0
 
   Migrate to Base UI

package/Context.jsx

@@ -115,7 +115,8 @@ export function ContextProvider({ children, constants }) {
     ui: {
       sidebarVisible: true,
       tabBarVisible: true
-    }
+    },
+    constants
   };
 
   function reducer(state, action) {
@@ -173,6 +174,7 @@ export function ContextProvider({ children, constants }) {
  * Returns { state, dispatch } where state contains:
  * - user: Current user object or null
  * - ui: { sidebarVisible, tabBarVisible }
+ * - constants: App configuration constants
  *
  * @returns {{ state: Object, dispatch: Function }}
  *

package/LandingView.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import constants from "@/constants.json";
+import { useTheme } from 'next-themes';
+import { getState } from "./Context.jsx";
 import * as LucideIcons from "lucide-react";
 import ThemeToggle from './ThemeToggle.jsx';
 
@@ -13,20 +14,11 @@ const DynamicIcon = ({ name, size = 24, color = 'currentColor', strokeWidth = 2,
 };
 
 export default function LandingView() {
+  const { state } = getState();
+  const constants = state.constants;
   const navigate = useNavigate();
-  const [isDarkMode, setIsDarkMode] = useState(false);
-
-  // Initialize dark mode from localStorage or system preference
-  useEffect(() => {
-    const savedTheme = localStorage.getItem('theme');
-    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    
-    if (savedTheme) {
-      setIsDarkMode(savedTheme === 'dark');
-    } else {
-      setIsDarkMode(systemPrefersDark);
-    }
-  }, []);
+  const { theme } = useTheme();
+  const isDarkMode = theme === 'dark';
 
   const renderHeroContent = () => {
     return (

package/Layout.jsx

@@ -3,12 +3,12 @@ import TabBar from './TabBar.jsx'
 import { SidebarProvider, SidebarTrigger } from "./shadcn/ui/sidebar"
 import AppSidebar from "./AppSidebar"
 import { useEffect } from 'react';
-import constants from "@/constants.json";
 import { getState } from './Context.jsx';
 
 export default function Layout({ children }) {
   const { state } = getState();
   const { sidebarVisible, tabBarVisible } = state.ui;
+  const constants = state.constants;
 
   // Combine constants (static config) with context state (programmatic control)
   const showSidebar = !constants.hideSidebar && sidebarVisible;

package/PaymentView.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useCallback } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { getState } from './Context.jsx';
 import { getCurrentUser } from './Utilities.js'
-import constants from "@/constants.json";
+import { getState } from "./Context.jsx";
 
 // Whitelist of allowed redirect paths to prevent open redirect vulnerabilities
 const ALLOWED_REDIRECT_PREFIXES = ['/app/', '/'];
@@ -15,6 +15,8 @@ function isAllowedRedirect(path) {
 }
 
 export default function PaymentView() {
+  const { state } = getState();
+  const constants = state.constants;
   const navigate = useNavigate();
   const { dispatch } = getState();
   const [searchParams] = useSearchParams();

package/README.md

@@ -29,6 +29,39 @@ createSkateboardApp({ constants, appRoutes });
 
 That's it! You get routing, auth, layout, landing page, settings, and payments.
 
+## Dark Mode Setup
+
+To prevent flash of unstyled content (FOUC) when using dark mode, add this script to your `index.html` **before** your app loads:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <!-- Prevent dark mode FOUC -->
+  <script>
+    try {
+      const theme = localStorage.getItem('theme');
+      const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      if (theme === 'dark' || (!theme && systemDark)) {
+        document.documentElement.classList.add('dark');
+      }
+    } catch (e) {}
+  </script>
+
+  <title>Your App</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>
+```
+
+This ensures the correct theme is applied before React renders, eliminating any flash between light and dark modes.
+
 ## Configuration
 
 skateboard-ui requires a `constants` object that configures your application:
@@ -144,6 +177,17 @@ Quick overview:
 | TextView | `@stevederico/skateboard-ui/TextView` | Legal pages |
 | NotFound | `@stevederico/skateboard-ui/NotFound` | 404 page |
 
+### Enhanced Components (New in v1.3.0)
+
+| Component | Import | Description |
+|-----------|--------|-------------|
+| Toast | `@stevederico/skateboard-ui/Toast` | Toast notifications (Sonner) |
+| SkeletonLoader | `@stevederico/skateboard-ui/SkeletonLoader` | Loading state patterns |
+
+**Font System:** Geist font family loaded automatically for improved typography.
+
+**See [USAGE.md](./USAGE.md) for detailed examples of Toast, Skeleton, Avatar, Badge, Tooltip, AlertDialog, Checkbox, Switch, and more.**
+
 ### shadcn/ui Components
 
 51 components available at `@stevederico/skateboard-ui/shadcn/ui/*`:
@@ -153,6 +197,10 @@ import { Button } from '@stevederico/skateboard-ui/shadcn/ui/button'
 import { Card } from '@stevederico/skateboard-ui/shadcn/ui/card'
 import { Input } from '@stevederico/skateboard-ui/shadcn/ui/input'
 import { Dialog } from '@stevederico/skateboard-ui/shadcn/ui/dialog'
+import { Avatar } from '@stevederico/skateboard-ui/shadcn/ui/avatar'
+import { Badge } from '@stevederico/skateboard-ui/shadcn/ui/badge'
+import { Tooltip } from '@stevederico/skateboard-ui/shadcn/ui/tooltip'
+import { AlertDialog } from '@stevederico/skateboard-ui/shadcn/ui/alert-dialog'
 ```
 
 ## Usage Examples
@@ -357,9 +405,11 @@ Used internally by createSkateboardApp. Redirects to /signin if not authenticate
 ### Core Dependencies
 - @base-ui/react - Accessible UI primitives
 - TailwindCSS 4.0+ - Utility-first CSS framework
+- geist - Vercel's Geist font family (sans & mono)
 - lucide-react - Icon library
 - class-variance-authority - Type-safe variant styling
 - clsx & tailwind-merge - className utilities
+- sonner - Toast notifications
 
 ## Repository
 

package/SettingsView.jsx

@@ -2,11 +2,26 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { getState } from './Context.jsx';
 import ThemeToggle from './ThemeToggle.jsx';
-import constants from "@/constants.json";
+import { Avatar, AvatarFallback } from './shadcn/ui/avatar.jsx';
+import { Badge } from './shadcn/ui/badge.jsx';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from './shadcn/ui/alert-dialog.jsx';
+import { getState } from "./Context.jsx";
 import pkg from '@package';
 import { showCheckout, showManage } from './Utilities';
 
 export default function SettingsView() {
+  const { state } = getState();
+  const constants = state.constants;
   const navigate = useNavigate();
   const { state, dispatch } = getState();
 
@@ -31,19 +46,41 @@ export default function SettingsView() {
           {(constants.noLogin === false || typeof constants.noLogin === 'undefined') && (
             <div className="w-full max-w-lg bg-accent rounded-2xl p-5">
               <div className="flex items-center gap-4">
-                <div className="w-12 h-12 bg-app dark:text-black text-white flex justify-center items-center rounded-full font-medium">
-                  <span className="uppercase">{state.user?.name?.split(' ').map(word => word[0]).join('') || "NA"}</span>
-                </div>
+                <Avatar size="lg">
+                  <AvatarFallback className="bg-app dark:text-black text-white uppercase font-medium">
+                    {state.user?.name?.split(' ').map(word => word[0]).join('') || "NA"}
+                  </AvatarFallback>
+                </Avatar>
                 <div className="flex-1 min-w-0">
-                  <div className="font-medium truncate capitalize">{state.user?.name || "No User"}</div>
+                  <div className="font-medium truncate capitalize flex items-center gap-2">
+                    {state.user?.name || "No User"}
+                    {state.user?.subscription?.status === "active" && (
+                      <Badge variant="default">Pro</Badge>
+                    )}
+                  </div>
                   <div className="text-sm text-muted-foreground">{state.user?.email || "no@user.com"}</div>
                 </div>
-                <button
-                  onClick={signOutClicked}
-                  className="px-4 py-2 rounded-full text-sm bg-sidebar-background border border-foreground/30 hover:border-foreground transition-all cursor-pointer"
-                >
-                  Sign Out
-                </button>
+                <AlertDialog>
+                  <AlertDialogTrigger asChild>
+                    <button className="px-4 py-2 rounded-full text-sm bg-sidebar-background border border-foreground/30 hover:border-foreground transition-all cursor-pointer">
+                      Sign Out
+                    </button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>Sign Out</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        Are you sure you want to sign out? You'll need to sign in again to access your account.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Cancel</AlertDialogCancel>
+                      <AlertDialogAction onClick={signOutClicked}>
+                        Sign Out
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
               </div>
             </div>
           )}
@@ -69,7 +106,16 @@ export default function SettingsView() {
             <div className="w-full max-w-lg bg-accent rounded-2xl p-5">
               <div className="flex items-center justify-between">
                 <div>
-                  <div className="mb-1 font-medium">Billing</div>
+                  <div className="mb-1 font-medium flex items-center gap-2">
+                    Billing
+                    {state.user?.subscription?.status === "active" ? (
+                      <Badge variant="default">Active</Badge>
+                    ) : state.user?.subscription?.status === "canceled" ? (
+                      <Badge variant="destructive">Canceled</Badge>
+                    ) : (
+                      <Badge variant="secondary">Free</Badge>
+                    )}
+                  </div>
                   <div className="text-sm text-muted-foreground">
                     {state.user?.subscription?.status === null || typeof state.user?.subscription?.status === 'undefined'
                       ? "Free plan"

package/Sheet.jsx

@@ -1,10 +1,10 @@
 import { useState, useRef, useImperativeHandle, forwardRef } from 'react';
 import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-} from "./shadcn/ui/sheet"
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+} from "./shadcn/ui/drawer"
 
 const MySheet = forwardRef(function MySheet(props, ref) {
   const { title = "", minHeight = "auto", children } = props;
@@ -19,16 +19,16 @@ const MySheet = forwardRef(function MySheet(props, ref) {
   }));
 
   return (
-    <Sheet open={isOpen} onOpenChange={setIsOpen}>
-      <SheetContent className="bg-background w-full overflow-y-auto [&_button]:cursor-pointer [&_[role=button]]:cursor-pointer" side="bottom" style={{ minHeight }}>
-        <SheetHeader className={"mb-0"}>
-          <SheetTitle>{title}</SheetTitle>
-        </SheetHeader>
-        <span className="mx-4 mb-4">{children}</span>
+    <Drawer open={isOpen} onOpenChange={setIsOpen}>
+      <DrawerContent className="bg-background w-full overflow-y-auto [&_button]:cursor-pointer [&_[role=button]]:cursor-pointer" style={{ minHeight }}>
+        <DrawerHeader className={"mb-0"}>
+          <DrawerTitle>{title}</DrawerTitle>
+        </DrawerHeader>
+        <div className="px-4 pb-4">{children}</div>
 
-        
-      </SheetContent>
-    </Sheet>
+
+      </DrawerContent>
+    </Drawer>
   );
 });
 

package/SignInView.jsx

@@ -14,10 +14,12 @@ import DynamicIcon from './DynamicIcon';
 import { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { getState } from './Context.jsx';
-import constants from "@/constants.json";
+import { getState } from "./Context.jsx";
 import { getBackendURL } from './Utilities'
 
 export default function LoginForm({
+  const { state } = getState();
+  const constants = state.constants;
   className,
   ...props
 }) {

package/SignUpView.jsx

@@ -8,20 +8,24 @@ import {
 } from "./shadcn/ui/card"
 import { Input } from "./shadcn/ui/input"
 import { Label } from "./shadcn/ui/label"
+import { Checkbox } from "./shadcn/ui/checkbox.jsx"
 import DynamicIcon from './DynamicIcon';
 import { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
-import constants from "@/constants.json";
+import { getState } from "./Context.jsx";
 import { getState } from './Context.jsx';
 import { getBackendURL } from './Utilities'
 
 export default function LoginForm({
+  const { state } = getState();
+  const constants = state.constants;
   className,
   ...props
 }) {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [name, setName] = useState('');
+  const [acceptedTerms, setAcceptedTerms] = useState(false);
   const navigate = useNavigate();
   const { state, dispatch } = getState();
   const [errorMessage, setErrorMessage] = useState('')
@@ -45,6 +49,10 @@ export default function LoginForm({
       setErrorMessage('Password must be 72 characters or less');
       return;
     }
+    if (!acceptedTerms) {
+      setErrorMessage('You must accept the Terms of Service to continue');
+      return;
+    }
     try {
       const response = await fetch(`${getBackendURL()}/signup`, {
         method: 'POST',
@@ -138,6 +146,41 @@ export default function LoginForm({
           <p className="text-xs text-gray-500 dark:text-gray-400 ml-1">Minimum 6 characters</p>
         </div>
 
+        <div className="flex items-start gap-2 pt-2">
+          <Checkbox
+            id="terms"
+            checked={acceptedTerms}
+            onCheckedChange={setAcceptedTerms}
+            className="mt-0.5"
+          />
+          <label
+            htmlFor="terms"
+            className="text-sm text-gray-600 dark:text-gray-400 cursor-pointer"
+          >
+            I agree to the{' '}
+            <span
+              onClick={(e) => { e.preventDefault(); navigate('/terms'); }}
+              className="underline underline-offset-4 cursor-pointer text-gray-900 dark:text-white"
+            >
+              Terms of Service
+            </span>
+            {', '}
+            <span
+              onClick={(e) => { e.preventDefault(); navigate('/eula'); }}
+              className="underline underline-offset-4 cursor-pointer text-gray-900 dark:text-white"
+            >
+              EULA
+            </span>
+            {', and '}
+            <span
+              onClick={(e) => { e.preventDefault(); navigate('/privacy'); }}
+              className="underline underline-offset-4 cursor-pointer text-gray-900 dark:text-white"
+            >
+              Privacy Policy
+            </span>
+          </label>
+        </div>
+
         <button
           type="submit"
           className="relative group w-full text-white px-8 py-4 rounded-xl font-semibold text-lg transition-all duration-300 shadow-xl backdrop-blur-sm overflow-hidden cursor-pointer"