Home Page - Copy this React, Tailwind Component to your project

import React from "react"; import { BsFillCameraFill } from "react-icons/bs"; import { FaChartBar, FaUsers, FaCog } from "react-icons/fa"; import Swal from "sweetalert2"; const HomePage = ({ onSelect, isLoggedIn }) => { const features = [ { title: "Reconocimiento Facial", description: "Sistema de seguridad biométrica avanzada para identificación precisa", icon: <BsFillCameraFill className="text-4xl text-[#07143d]" />, value: "reconocimiento", image: "https://images.unsplash.com/photo-1587613865763-4b8b0d19e8ab?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80", }, { title: "Reportes de Asistencia", description: "Sistema integral de seguimiento y reportes de asistencia", icon: <FaChartBar className="text-4xl text-[#07143d]" />, value: "asistencia", image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80", }, { title: "Reportes de RRHH", description: "Análisis detallado de RRHH y herramientas de gestión de empleados", icon: <FaUsers className="text-4xl text-[#07143d]" />, value: "reports", image: "https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80", }, { title: "Administración", description: "Control completo sobre la configuración del sistema y permisos de usuario", icon: <FaCog className="text-4xl text-[#07143d]" />, value: "ver-empleados", image: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80", }, ]; const handleFeatureClick = (value) => { if (value === "admin" && !isLoggedIn) { Swal.fire({ icon: "warning", title: "Acceso Restringido", text: "Debe iniciar sesión para acceder al módulo de administración.", confirmButtonColor: "#07143d", }); return; } onSelect(value); }; return ( <div className="min-h-screen bg-[#f4f4f8]"> <main className="container mx-auto px-4 py-8"> <section className="text-center mb-16"> <h1 className="text-4xl md:text-5xl font-bold mb-4 text-[#07143d]"> SegurIA Access </h1> <p className="text-xl text-[#515A77] mb-8"> Asegure sus instalaciones con reconocimiento facial avanzado y herramientas de gestión integral </p> <button onClick={() => onSelect("reconocimiento")} className="bg-gradient-to-r from-[#07143d] to-[#515A77] text-white px-8 py-3 rounded-lg hover:opacity-90 transition-all" > Comenzar </button> </section> <section className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16"> {features.map((feature, index) => ( <div key={index} onClick={() => handleFeatureClick(feature.value)} className="bg-gradient-to-b from-white to-[#cdd0d8] rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 cursor-pointer" > <div className="h-48 overflow-hidden"> <img src={feature.image} alt={feature.title} className="w-full h-full object-cover" onError={(e) => { e.target.src = "https://images.unsplash.com/photo-1516321318423-f06f85e504b3"; }} /> </div> <div className="p-6"> <div className="flex items-center mb-4"> {feature.icon} <h3 className="text-xl font-semibold ml-2 text-[#07143d]"> {feature.title} </h3> </div> <p className="text-[#515A77]">{feature.description}</p> </div> </div> ))} </section> </main> </div> ); }; export default HomePage; así esta totalmente funcional, me gusta como se y como esta, pero como lo podríamos hacer ver aun mejor, que cosas de diseño le podemos seguir añadiendo