Project Details Page - Copy this React, Tailwind Component to your project
I recently created a project card for my digital website agency here is the code: .import { FiArrowRight } from "react icons/fi"; import { MdOutlineBusiness } from "react icons/md"; import { IoCalendarOutline } from "react icons/io5"; const ProjectCard = ({title, client, category, date, description, image}) => { return ( <div className="group relative overflow hidden rounded 2xl bg white shadow xl transition all duration 300 hover:shadow 2xl" role="article" aria label={`Project: ${title}`} > <div className="aspect w 16 aspect h 9 relative"> <img src={image} alt={title} className="h 64 w full object cover transition transform duration 300 group hover:scale 105" onError={(e) => { e.target.src = "https://images.unsplash.com/photo 1555421689 491a97ff2040?ixlib=rb 4.0.3"; }} /> </div> <div className="relative p 6"> <div className="mb 4"> <h3 className="text xl font bold text gray 900 group hover:text blue 600 transition colors duration 300"> {title} </h3> <div className="mt 2 flex items center space x 4 text sm text gray 600"> <span className="flex items center"> <MdOutlineBusiness className="mr 1" /> {client} </span> <span className="flex items center"> <IoCalendarOutline className="mr 1" /> {date} </span> </div> </div> <p className="mb 4 text gray 600 line clamp 3">{description}</p> <div className="flex items center justify between"> <span className="inline flex items center rounded full bg blue 100 px 3 py 1 text sm font medium text blue 800"> {category} </span> <button className="group inline flex items center text blue 600 transition all duration 300 hover:text blue 800 focus:outline none focus:ring 2 focus:ring blue 500 focus:ring offset 2" aria label={`View details for ${title}`} > View Project <FiArrowRight className="ml 2 transition transform duration 300 group hover:translate x 1" /> </button> </div> </div> </div> ); }; export default ProjectCard; now I want you to create for me page in which to go where we click on view project. I want the page to look modern, well design, beaucoup and elegant.
