Actualizado y reparado

src/pages/App.tsx

@@ -4,9 +4,22 @@ import { Label } from '../components/ui/label';
 import { Input } from '../components/ui/input';
 import { NavLink } from 'react-router';
 
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+
+
 function App() {
   return (
-    <div className="w-full grow bg-gradient-to-br from-gray-100 to-gray-300/20 shadow-xl shadow-gray-400/10 flex flex-col items-center justify-center p-5 gap-20 rounded-lg backdrop-blur-lg">
+    <div className="w-full grow bg-gradient-to-br from-gray-100/50 to-gray-300/15 shadow-xl shadow-gray-400/10 flex flex-col items-center justify-center p-5 gap-20 rounded-lg backdrop-blur-sm">
       <Card className="w-fit">
         <CardHeader>
           <CardTitle className='font-display'>Crear nuevo proyecto</CardTitle>
@@ -29,18 +42,27 @@ function App() {
               </div>
             </div>
           </form>
-
         </CardContent>
         <CardFooter className="flex justify-between">
-          <NavLink to="/login" end>
 
-            <Button
-              variant="outline"
-              className="px-6 py-3 text-gray-700 border border-gray-300 rounded-lg shadow-md shadow-gray-300/50 bg-white transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:shadow-sm"
-            >
-              Cancelar
-            </Button>
-          </NavLink>
+
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button variant="outline">Cancelar</Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle className="font-display">¿Deseas cancelar el modelo?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Esta acción es irreversible. Se borrará todo el progreso realizado y no habrá respaldo para recuperarlo.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction className="font-display">Confirmar</AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
           <Button className="font-display px-6 py-3 text-lg font-bold text-white bg-gradient-to-b from-blue-500 to-blue-700 rounded-lg shadow-lg shadow-blue-500/50 transform transition-all duration-300 hover:shadow-xl hover:scale-105 active:translate-y-1 active:shadow-md cursor-pointer">
             Presentar
           </Button>