import Card from "./components/Card";

function App() {
  return (
    <div className="min-h-screen h-screen m-0 bg-stone-100">
      <div className="flex h-1/5 justify-center items-center mx-auto">
        <h1 className="text-5xl">Welcome to BMI Calculator</h1>
      </div>
      <div className="flex h-3/5 justify-center items-center mx-auto">
        {/* user input card */}
        <Card className="flex flex-col">
          {/* toggle container */}
          {/* main user input section */}
            {/* height section */}
              {/* unit section */}
            {/* weight section */}
              {/* unit section */}
              {/* some other code here */}
        </Card>
        {/* bmi number and circle progress bar card */}
        <Card className="mx-10 flex flex-col">
          {/* progress bar here */}
          {/* status here */}
        </Card>
        {/* explanation card */}
        <Card className="flex flex-col">
        </Card>
      </div>
    </div>
  );
}

export default App;