/* -------------------------------------------------------------------------- */
/*                                   Imports                                  */
/* -------------------------------------------------------------------------- */
import React from "react";
import { SearchBar } from "../../search/SearchBar";

export default function MainSection() {
  return (
    <section className="bg-main bg-center bg-cover bg-origin-border bg-no-repeat min-h-[100vh] py-32 px-2 sm:px-6 md:px-6 lg:px-0 items-center flex justify-center ">
      <div className="flex-col">
        <div className="m-auto text-center font-bold text-4xl ">
          Scientific Library with Free Access
        </div>
        <div className="flex flex-row items-center justify-center space-x-3 pt-2">
          <div className=" text-2xl text-gray-400">Search</div>
          <div className=" text-3xl text-blue-500">320 455</div>
          <div className=" text-2xl text-gray-400">Items</div>
        </div>
        <div className="max-w-xl m-auto pt-16 ">
          <SearchBar />
          <div className="mt-7 pr-1 text-right font-semibold text-sm">
            Advanced Search
          </div>
        </div>
      </div>
    </section>
  );
}