Widget Notificación Confirmación Correo

import React, { useState } from 'react';

const App = () => {
  const [showNotification, setShowNotification] = useState(true);

  const handleClose = () => {
    setShowNotification(false);
  };

  const handleConfirm = () => {
    window.location.href = '/confirm-email';
  };

  return (
    <div className="relative min-h-screen flex items-center justify-center bg-gray-900">
      {showNotification && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center backdrop-blur-sm">
          <div className="bg-white p-8 rounded-lg shadow-lg max-w-md mx-auto">
            <h2 className="text-xl font-bold mb-4 text-gray-800">Email Confirmation Required</h2>
            <p className="text-gray-600 mb-6">Please confirm your email to enjoy the full content.</p>
            <div className="flex justify-end space-x-4">
              <button
                onClick={handleClose}
                className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400 transition duration-200"
              >
                Close
              </button>
              <button
                onClick={handleConfirm}
                className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-200"
              >
                Confirm Email
              </button>
            </div>
          </div>
        </div>
      )}
      <div className="text-center">
        <h1 className="text-4xl font-bold text-white mb-4">Welcome to Our Platform</h1>
        <p className="text-gray-300">Explore our amazing content and features.</p>
      </div>
    </div>
  );
};

export default App;