import * as React from 'react';
import { Star } from 'lucide-react';
import './index.scss';

const HeroBanner: React.FC = () => {
    return (
        <section className='hero-banner'>
            <img
                alt='Square Banner'
                className='hero-banner-image'
                src='https://llm.jkec.info:11431/assets/background-BfhVaarR.jpg'
            />
            <div className='hero-banner-overlay'>
                <div className='hero-banner-content'>
                    <div className='hero-banner-text'>
                        <div className='hero-banner-badge'>
                            <Star size={16} />
                            <span>Featured Application</span>
                        </div>
                        <h2 className='hero-banner-title'>广告占位</h2>
                        <p className='hero-banner-description'>
                            <span>
                            描述：****************************************************************
                            </span>
                            <span>
                               描述：****************************************************************
                            </span>
                        </p>
                    </div>
                    <div className='hero-banner-actions'>
                        <button className='hero-banner-btn secondary'>
                            查看详情
                        </button>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default HeroBanner;
