import React from 'react'

const Features = () => {
    return (
        <div className="pv-features-area">
            <div className="container">
                <div className="section-title section-center splash-title">
                    <span className="pre-title" data-sal="slide-up" data-sal-duration="1000">TEMPLATE FEATURES</span>
                    <h2 className="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">Get Access to Exclusive <br /> Features</h2>
                </div>
                <div className="row row--20 row-cols-1 row-cols-xl-5 row-cols-lg-4 row-cols-md-3 row-cols-sm-2">
                    <div className="col">
                        <div className="demo-feature">
                            <div className="inner">
                                <div className="icon">
                                    <img src="/assets/images/preview/icon-14.png" alt="Preview Images" />
                                </div>
                                <h6 className="title">Bootstrap 5 <br /> Framework</h6>
                            </div>
                        </div>
                    </div>
                    <div className="col">
                        <div className="demo-feature">
                            <div className="inner">
                                <div className="icon">
                                    <img src="/assets/images/preview/icon-15.png" alt="Preview Images" />
                                </div>
                                <h6 className="title">W3C <br /> Validation</h6>
                            </div>
                        </div>
                    </div>
                    <div className="col">
                        <div className="demo-feature">
                            <div className="inner">
                                <div className="icon">
                                    <img src="/assets/images/preview/icon-16.png" alt="Preview Images" />
                                </div>
                                <h6 className="title">Swiper <br /> Touch Slider</h6>
                            </div>
                        </div>
                    </div>
                    <div className="col">
                        <div className="demo-feature">
                            <div className="inner">
                                <div className="icon">
                                    <img src="/assets/images/preview/icon-20.png" alt="Preview Images" />
                                </div>
                                <h6 className="title">Speed <br /> Performance</h6>
                            </div>
                        </div>
                    </div>
                    <div className="col">
                        <div className="demo-feature">
                            <div className="inner">
                                <div className="icon">
                                    <img src="/assets/images/preview/icon-17.png" alt="Preview Images" />
                                </div>
                                <h6 className="title">Mouse-Move <br /> Effect</h6>
                            </div>
                        </div>
                    </div>
                    <div className="col">
                        <div className="demo-feature">
                            <div className="inner">
                                <div className="icon">
                                    <img src="/assets/images/preview/icon-18.png" alt="Preview Images" />
                                </div>
                                <h6 className="title">Google Web <br /> Fonts</h6>
                            </div>
                        </div>
                    </div>
                    <div className="col">
                        <div className="demo-feature">
                            <div className="inner">
                                <div className="icon">
                                    <img src="/assets/images/preview/icon-19.png" alt="Preview Images" />
                                </div>
                                <h6 className="title">Fully Responsive <br /> Layouts</h6>
                            </div>
                        </div>
                    </div>
                    <div className="col">
                        <div className="demo-feature">
                            <div className="inner">
                                <div className="icon">
                                    <img src="/assets/images/preview/icon-21.png" alt="Preview Images" />
                                </div>
                                <h6 className="title">Well <br /> Documented</h6>
                            </div>
                        </div>
                    </div>
                    <div className="col">
                        <div className="demo-feature">
                            <div className="inner">
                                <div className="icon">
                                    <img src="/assets/images/preview/icon-22.png" alt="Preview Images" />
                                </div>
                                <h6 className="title">Magnific <br /> Popup</h6>
                            </div>
                        </div>
                    </div>
                    <div className="col">
                        <div className="demo-feature">
                            <div className="inner">
                                <div className="icon">
                                    <img src="/assets/images/preview/icon-23.png" alt="Preview Images" />
                                </div>
                                <h6 className="title">Translation <br /> Ready</h6>
                            </div>
                        </div>
                    </div>
                    <div className="col">
                        <div className="demo-feature">
                            <div className="inner">
                                <div className="icon">
                                    <img src="/assets/images/preview/icon-24.png" alt="Preview Images" />
                                </div>
                                <h6 className="title">Fast 5 Star <br /> Support</h6>
                            </div>
                        </div>
                    </div>
                    <div className="col">
                        <div className="demo-feature">
                            <div className="inner">
                                <div className="icon">
                                    <img src="/assets/images/preview/icon-26.png" alt="Preview Images" />
                                </div>
                                <h6 className="title">Lifetime <br /> Update</h6>
                            </div>
                        </div>
                    </div>
                    <div className="col">
                        <div className="demo-feature">
                            <div className="inner">
                                <div className="icon">
                                    <img src="/assets/images/preview/icon-27.png" alt="Preview Images" />
                                </div>
                                <h6 className="title">Browser <br /> Compatibility</h6>
                            </div>
                        </div>
                    </div>
                    <div className="col">
                        <div className="demo-feature">
                            <div className="inner">
                                <div className="icon">
                                    <img src="/assets/images/preview/icon-28.png" alt="Preview Images" />
                                </div>
                                <h6 className="title">Parallax <br /> Effect</h6>
                            </div>
                        </div>
                    </div>
                    <div className="col">
                        <div className="demo-feature">
                            <div className="inner">
                                <div className="icon">
                                    <img src="/assets/images/preview/icon-29.png" alt="Preview Images" />
                                </div>
                                <h6 className="title">Developer <br /> Friendly</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Features;