text: import React, { useState } from "react"
  
  export default function RoadMapCard({ direction, phase, text }){
    
    return(
      <div className="flex flex-col justify-evenly pl-10 w-screen h-96" style={{ backgroundImage: `linear-gradient(to ${direction}, black, transparent), url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJp44MEH5EqacPNYXZC_GPYLzEfgsksRJ3b4vgDFdSFa148VivBs0QzTI&s=10)` }}>
     
      <h1 className={`font-extrabold text-white text-4xl w-8 ${direction === "left" ? "relative left-20 md:left-3/4" : ""}`}>Phase {phase}</h1>
      
      <p id="title" className={`text-white text-semibold font-light w-48 ${direction === "left" ? "relative left-20 md:left-3/4" : ""}`}>{text}</p>
      
      </div>
      )
  }
  