Styled Card - Copy this React, Mui Component to your project

Import React, { useRef, useEffect, useContext } from 'react'; import Typed from 'typed.js'; import { ThemeContext } from '../context/ThemeContext'; // Adjust the path to where you store ThemeContext import { Row, Col, Typography, Image } from 'antd'; const { Title, Paragraph } = Typography; const Home = () => { const el = useRef(null); const { isDarkMode, toggleTheme } = useContext(ThemeContext); useEffect(() => { const typed = new Typed(el.current, { strings: ['Asset Management', 'Efficient Operations', 'Digital Transformation', 'Real time Monitoring'], typeSpeed: 50, }); return () => { typed.destroy(); }; }, []); return ( <main> {/* Hero Section */} <section style={{ padding: '40px 16px', minHeight: '512px', display: 'flex', alignItems: 'center', width: '100%' }}> <Row gutter={[16, 16]} align="middle"> <Col xs={24} lg={12}> <Title level={1} style={{ color: isDarkMode ? '#f0f0f0' : '#333' }}> Welcome to <span style={{ fontWeight: 'bold' }}>Asset Management System</span> <br /> Streamlining your work with <span style={{ fontWeight: 'bold', textDecoration: 'underline', color: '#722ed1' }}><span ref={el} /></span> </Title> <Paragraph style={{ marginTop: '16px', fontSize: '18px', color: isDarkMode ? '#d9d9d9' : '#595959' }}> Manage your assets efficiently with our intuitive platform.<br /> Track, update, and optimize all your resources in one place. </Paragraph> </Col> <Col xs={24} lg={12}> <Image src="/home_asset.svg" alt="Asset Management" preview={false} style={{ maxWidth: '100%', height: 'auto' }} /> </Col> </Row> </section> </main> ); }; export default Home; help me make a better look and add some asset related cards, or anything best which will show In stock, Assigned and the filds which i want to show ca add dynamically and all