I’ve created an hero section ,consisting of a container with two different columns placed it .But this hero section isn’t showing on my screen .What could be the problem?

import React from "react";
import { Row , Col , Button , Container} from "react-bootstrap";
import '../Herosection.css';
`function HeroSection(){
  
  return(
      <Container className="hero-section" fluid px={4} py={5}>
        <Row className="align-items-center">
          <Col className="hero-text" md={6}>
            <div className="text-section1">
              <h1>Your Clothes , Our Care .</h1>
              <h2>Expert cleaning for your favourite fabrics!</h2>
              <h1>Suds Wash Got you!</h1>
            </div>
            <div className="text-section2">
              <p>With a touch of experts cleaning,your cloths are left clean and sweet scented,
                Just the way you want it.Have a good time at your picnics,fun,get together's etc and worry not about the laundry work.
              </p>
            </div>

            <Button href="#" variant="primary">Read More</Button>
          </Col>
          <Col className="hero-image" md={6}>
            <img src="../assets/images/hero-image1.png" alt="hero-image" className="img-fluid"/>
          </Col>
            

        </Row>
      </Container>

  );
}

export default HeroSection;

`

So its a component ,and after exporting it in my homepage nothing showed.your text