Welcome Slide - Copy this React, Tailwind Component to your project

Improve this design, make it modern and elegant import React from "react"; const WelcomeSlide = ({ nextSlide, isFirstSlide, isComplete, userName, handleSkip, }) => { return ( <div className="h screen w full grid grid cols 1 lg:grid cols 2 overflow hidden"> {/* Left Column Image/Branding */} <div className="bg gradient to br from pink 700 via fuchsia 600 to purple 600 hidden lg:flex flex col justify center items center p 12 relative overflow hidden"> {/* Geometric Background Pattern */} <div className="absolute inset 0 opacity 10"> <div className="absolute h 64 w 64 border [32px] border white rounded full top 32 left 32"></div> <div className="absolute h 96 w 96 border [32px] border white rounded full bottom 48 right 48"></div> <div className="absolute h 32 w 32 border [16px] border white rotate 45 top 1/3 right 1/4"></div> </div> <div className="max w lg text white z 10"> <h1 className="text 7xl font extrabold mb 8 leading none tracking tight"> Power up your marketing <br /> with Thot AI </h1> <p className="text 2xl mb 10 text white/90 font light"> Transform your marketing with AI powered optimization that delivers results. </p> <div className="bg white/5 backdrop blur md rounded 2xl p 8 border border white/10 shadow 2xl"> <div className="flex items center mb 4"> <svg xmlns="http://www.w3.org/2000/svg" className="h 6 w 6 text yellow 300 mr 2" viewBox="0 0 20 20" fill="currentColor" > <path d="M9.049 2.927c.3 .921 1.603 .921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l 2.8 2.034a1 1 0 00 .364 1.118l1.07 3.292c.3.921 .755 1.688 1.54 1.118l 2.8 2.034a1 1 0 00 1.175 0l 2.8 2.034c .784.57 1.838 .197 1.539 1.118l1.07 3.292a1 1 0 00 .364 1.118L2.98 8.72c .783 .57 .38 1.81.588 1.81h3.461a1 1 0 00.951 .69l1.07 3.292z" /> </svg> <p className="text white font semibold">Success Story</p> </div> <p className="text white/90 text lg"> "27% increase in conversion rate and 30%+ reduction in CAC in just two months." </p> <p className="text white/70 mt 3 font medium"> — Marketing Director, Enterprise Client </p> </div> </div> </div> {/* Right Column Content */} <div className="bg white flex flex col justify center p 12 h screen"> <div className="max w xl mx auto w full"> <div className="mb 8"> <h2 className="text 5xl font extrabold text gray 900 mb 3 relative inline block"> {userName ? `Welcome, ${userName}!` : "Welcome to Thot AI"} <div className="absolute bottom 2 left 0 w 1/3 h 1 bg pink 500"></div> </h2> </div> <p className="text xl text gray 600 mb 8"> Let's set up your account for AI powered marketing success. </p> <div className="bg gradient to r from gray 50 to pink 50/30 rounded xl p 6 mb 8"> <h3 className="text lg font semibold text gray 800 mb 6"> Quick 5 minute setup: </h3> <div className="grid grid cols 1 gap 4"> <div className="flex items center space x 4 bg white p 3 rounded lg shadow sm"> <div className="w 10 h 10 rounded xl bg gradient to br from pink 500 to pink 600 text white flex items center justify center font bold"> 1 </div> <p className="text gray 800 font medium">Company profile</p> </div> <div className="flex items center space x 4 bg white p 3 rounded lg shadow sm"> <div className="w 10 h 10 rounded xl bg gradient to br from pink 500 to pink 600 text white flex items center justify center font bold"> 2 </div> <p className="text gray 800 font medium"> Google Ads integration </p> </div> <div className="flex items center space x 4 bg white p 3 rounded lg shadow sm"> <div className="w 10 h 10 rounded xl bg gradient to br from pink 500 to pink 600 text white flex items center justify center font bold"> 3 </div> <p className="text gray 800 font medium">Website tracking</p> </div> <div className="flex items center space x 4 bg white p 3 rounded lg shadow sm"> <div className="w 10 h 10 rounded xl bg gradient to br from pink 500 to pink 600 text white flex items center justify center font bold"> 4 </div> <p className="text gray 800 font medium">ROI targets</p> </div> <div className="flex items center space x 4 bg white p 3 rounded lg shadow sm"> <div className="w 10 h 10 rounded xl bg gradient to br from pink 500 to pink 600 text white flex items center justify center font bold"> 5 </div> <p className="text gray 800 font medium">Tracking scripts</p> </div> </div> </div> <button onClick={nextSlide} className="w full px 8 py 4 bg gradient to r from pink 600 to pink 700 text white text xl font semibold rounded xl hover:from pink 700 hover:to pink 800 transition all shadow lg hover:shadow xl transform hover: translate y 0.5 duration 200" > Let's Get Started <svg xmlns="http://www.w3.org/2000/svg" className="h 6 w 6 inline block ml 2" fill="none" viewBox="0 0 24 24" stroke="currentColor" > <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l 5 5m5 5H6" /> </svg> </button> <p className="text sm text gray 500 text center mt 4"> Already set up? <button onClick={handleSkip} className="text pink 600 hover:text pink 700 ml 1 font medium" > Skip to Dashboard </button> </p> </div> </div> </div> ); }; export default WelcomeSlide;