About Section - Copy this React, Tailwind Component to your project

Import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { Download, FileText } from 'lucide react'; function About() { return ( <div className="min h screen bg navy 900 text white flex items center justify center p 4"> <Card className="w full max w 4xl bg navy 800 border none"> <CardContent className="p 6 sm:p 10 flex flex col md:flex row items center gap 8"> <div className="flex 1 space y 4"> <p className="text teal 400 text lg">Hi, I am</p> <h1 className="text 4xl sm:text 5xl font bold">Deepak Sharma</h1> <p className="text 2xl sm:text 3xl"> I'm a <span className="text teal 400">Full Stack Dev</span> </p> <p className="text gray 400 max w md"> I'm a passionate MERN Stack Developer with strong foundation in web development technologies. Currently a final year B.tech student, I am always excited to learn and explore new technologies. </p> <div className="flex gap 4 pt 4"> <Button className="bg teal 500 hover:bg teal 600 text white"> <FileText className="mr 2 h 4 w 4" /> Check Resume </Button> <Button variant="outline" className="text teal 400 border teal 400 hover:bg teal 400/10" > <Download className="mr 2 h 4 w 4" /> Download </Button> </div> </div> <div className="relative w 48 h 48 md:w 64 md:h 64"> <div className="absolute inset 0 rounded full bg purple 500 blur lg opacity 75"></div> <img src="/placeholder.svg?height=256&width=256" alt="Deepak Sharma" className="rounded full object cover z 10 relative w full h full" /> </div> </CardContent> </Card> </div> ); } export default About; give me resopsive mobile,and other