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

Import React from 'react'; import { Settings, Clock, CreditCard, HelpCircle, Share2, Layers, Camera, Tool, User, ChevronRight } from 'lucide react'; const AccountPage = () => { return ( <div className="max w md mx auto bg white min h screen"> {/* Header */} <div className="p 4 flex justify between items center"> <h1 className="text 2xl font semibold">Account</h1> <div className="flex items center gap 2"> <span>English</span> <ChevronRight size={20} /> </div> </div> {/* Profile Section */} <div className="p 4 flex items center gap 4"> <div className="w 12 h 12 bg gray 100 rounded full flex items center justify center"> <span className="text gray 400">+</span> </div> <div> <div className="font medium">Enter your Name</div> <div className="text gray 500 text sm">aahana.nath@gmail.com</div> </div> <ChevronRight className="ml auto" size={20} /> </div> {/* Pro Touch Section */} <div className="mx 4 p 4 bg purple 50 rounded lg"> <div className="flex justify between items center"> <div> <div className="flex items center gap 2"> <span className="font medium">Send for Pro Touch</span> <HelpCircle size={16} className="text gray 400" /> </div> <div className="mt 1"> <span className="font medium">0</span> Credits </div> </div> <button className="bg purple 600 text white px 6 py 2 rounded full"> Buy Credits </button> </div> </div> {/* Menu Items */} <div className="mt 4"> {[ { icon: <Settings size={20} />, label: 'Account Settings' }, { icon: <Clock size={20} />, label: 'Project History' }, { icon: <CreditCard size={20} />, label: 'Payment History' }, { icon: <HelpCircle size={20} />, label: 'Need Help' }, { icon: <Share2 size={20} />, label: 'Refer and Earn' }, ].map((item, index) => ( <div key={index} className="flex items center px 4 py 4 hover:bg gray 50"> <span className="text gray 600">{item.icon}</span> <span className="ml 4 flex grow">{item.label}</span> <ChevronRight size={20} className="text gray 400" /> </div> ))} </div> {/* Footer Links */} <div className="px 4 mt 4"> <div className="text gray 600 mb 2">About Us</div> <div className="text gray 600">Privacy Policy</div> </div> {/* Bottom Navigation */} <div className="fixed bottom 0 left 0 right 0 bg white border t flex justify between px 6 py 4"> <div className="flex flex col items center gap 1"> <Layers size={24} /> <span className="text xs">My Projects</span> </div> <div className="flex flex col items center gap 1 relative"> <div className="relative"> <Camera size={24} /> <span className="absolute top 1 right 1 bg pink 500 text white text xs px 1 rounded">New</span> </div> <span className="text xs">Camera</span> </div> <div className="flex flex col items center gap 1"> <Tool size={24} /> <span className="text xs">Tools</span> </div> <div className="flex flex col items center gap 1"> <User size={24} /> <span className="text xs">Account</span> </div> </div> {/* Bottom Safe Area */} <div className="h 20" /> </div> ); }; export default AccountPage;