MermsPanelReactJS/src/component/start/Start.jsx

import React from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import getImage from "../../utils/getImage";

export default function Start() {

    const bgImg = getImage("side-banner.jpg");

    return (
        <>
            <BreadcrumbComBS title='Get Started...' paths={['Dashboard', 'Start']}/>
            <div className="row">
                <div className="col-xl-3 col-md-6">
                    <div className="card card-statistics text-center py-3"
                         style={{minHeight: '550px', borderRadius: '10px', backgroundImage: `url(${bgImg})`}}>
                    </div>
                </div>

                <div className="col-xl-3 col-md-6">
                    <div className="card card-statistics text-center py-3">
                        <div className="card-body pricing-content">
                            <div className="pricing-content-card">
                                <h5>Start with</h5>
                                <h2 className="text-primary pt-3"><a href="/product/A000001">Personal Website</a></h2>
                                <ul className="py-2">
                                    <li>post jobs</li>
                                    <li>advanced instructors search</li>
                                    <li>invite candidates</li>
                                    <li>post events</li>
                                    <li>cancel any time</li>
                                </ul>
                                <div className="pt-2"><a href="/product/A000001"
                                                         className="btn btn-primary btn-round btn-sm">Start</a></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="col-xl-3 col-md-6">
                    <div className="card card-statistics text-center py-3">
                        <div className="card-body pricing-content">
                            <div className="pricing-content-card">
                                <h5>Start with</h5>
                                <h2 className="text-primary pt-3"><a href="/product/A000002">Business Website</a></h2>
                                <ul className="py-2">
                                    <li>post jobs</li>
                                    <li>advanced instructors search</li>
                                    <li>invite candidates</li>
                                    <li>post events</li>
                                    <li>cancel any time</li>
                                </ul>
                                <div className="pt-2"><a href="/product/A000001"
                                                         className="btn btn-primary btn-round btn-sm">Start</a></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="col-xl-3 col-md-6">
                    {/*<div className="card card-statistics text-center py-3">*/}
                    {/*<div className="card-body pricing-content">*/}
                    {/*<div className="pricing-content-card">*/}
                    {/*    <h5>small</h5>*/}
                    {/*    <h2 className="text-primary pt-3">$80</h2>*/}
                    {/*    <p className="text-primary pb-3">/ Monthly</p>*/}
                    {/*    <ul className="py-2">*/}
                    {/*        <li>post jobs</li>*/}
                    {/*        <li>advanced instructors search</li>*/}
                    {/*        <li>invite candidates</li>*/}
                    {/*        <li>post events</li>*/}
                    {/*        <li>cancel any time</li>*/}
                    {/*    </ul>*/}
                    {/*    <div className="pt-2"><a href="javascript:void(0)" className="btn btn-inverse-secondary btn-round btn-sm">go premium</a></div>*/}
                    {/*</div>*/}
                    {/*</div>*/}
                    {/*</div>*/}
                </div>
            </div>

        </>
    )
}