import { useState, useContext, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import {
  FeaturesTop,
  FeaturesBottom,
} from "../../Constants/Copy/featuresCopy.js";
import legalTek from "../../Assets/Images/legalTek.jpg";
import legalTechFlip from "../../Assets/Images/legalTechFlip.jpg";
import "../../styles/features.scss";

const FeaturesPage = () => {
  return (
    <>
      <div className="features-container">
        <div className="features-top-wrapper">
          <div className="features-top-mobile-img">
            <img className="features-image-one" src={legalTechFlip} />
          </div>
          <div className="features-top-left">
            <FeaturesTop />
          </div>
          <div className="features-top-right">
            <img className="features-image-one" src={legalTechFlip} />
          </div>
        </div>
        <div className="features-bottom-wrapper">
          <div className="features-bottom-left">
            <img className="features-image-one" src={legalTek} />
          </div>
          <div className="features-bottom-right">
            <FeaturesBottom />
          </div>
        </div>
      </div>
    </>
  );
};

export default FeaturesPage;