import { Container, Row, Col } from "react-bootstrap";

export default function AboutUsSection() {
    return (<>
        <Container id="about-us" className="mb-5" style={{
            maxWidth: "100%",
            backgroundImage: "linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('/about-us.jpg')", // Thay đường dẫn ảnh nền
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            backgroundAttachment: 'fixed',
            width: '100%',
            padding: '50px 0',
        }}>
            <div className="d-flex justify-content-center align-items-center" style={{
                maxWidth: "90%",
                minHeight: "50vh"
            }} >

                <Row className="align-items-center">
                    {/* <Col md={6}>
                        <img className="img-fluid" src="/cats-logo.png" alt="" style={{ width: "100%", height: "auto" }}></img>
                    </Col> */}
                    <Col md={3}></Col>
                    <Col md={6} className="align-items-center">
                        <h1 style={{
                            fontWeight: 'bold',
                            // fontFamily: 'Arial, sans-serif', /* Chọn font chữ */
                            'fontSize': '72px', /* Kích thước chữ cho h1 */
                        }}
                            className='mb-3'>CATS Shop
                        </h1>
                        <br />
                        <p style={{
                            // fontFamily: 'Arial, sans-serif', /* Chọn font chữ */
                            'fontSize': '36px', /* Kích thước chữ cho h1 */
                        }}>
                            Chào mừng mọi người đến với Cats Shop, phương châm của chúng tôi là code at the sink and sleep at the sea.
                        </p>
                    </Col>
                    <Col md={3}></Col>
                </Row>
            </div>

        </Container>
    </>)
}