import React from "react";
import "./Philosophy_grounded_in_nature.css";
import Green_round_btn from "../../common-components/common_btn/green_round_btn/Green_round_btn";
import { useNavigate } from "react-router-dom";
import Green_Outline_Btn from "../../common-components/common_btn/green_outline_btn/Green_Outline_Btn";

function Philosophy_grounded_in_nature() {
  const navigate = useNavigate();
  return (
    <>
      <section className="Philosophy_grounded_in_nature">
        <div className="heading_holder">
          <h4 className="heading_text">A PHILOSOPHY GROUNDED IN NATURE</h4>
          <p>
            A Timeless Farming Tradition built on Harmony between Land, Animals,
            and People.
          </p>
        </div>
        <div className="img_content_holder">
          <div className="img_holder">
            <img
              className="Philosophy_grounded_in_nature_img"
              src={
                process.env.PUBLIC_URL +
                "/assets/images/home/philosophy_grounded_in_nature/Philosophy_grounded_in_nature_img.png"
              }
              alt={"Philosophy_grounded_in_nature_img"}
            />
          </div>
          <div className="btn_holder">
            <Green_Outline_Btn btnText={"Read More"} onClick={() => navigate("/about-us")} />
          </div>
        </div>
      </section>
    </>
  );
}

export default Philosophy_grounded_in_nature;
