import Image from "next/image";
import { ContainerScroll } from "../ui/container-scroll-animation";

const AboutSection = () => {
  return (
    <section
      id="about"
      className="flex flex-col overflow-hidden bg-background dark:bg-black"
    >
      <ContainerScroll
        titleComponent={
          <>
            <h1 className="p-2 text-4xl font-semibold bg-clip-text text-transparent text-center bg-gradient-to-b from-neutral-900 to-neutral-700 dark:from-neutral-600 dark:to-white">
              Discover the power of <br />
              <span className="text-4xl md:text-[6rem] font-bold mt-1 leading-none">
                Microgravity
              </span>
            </h1>
          </>
        }
      >
        <Image
          src={`/screenshot.jpg`}
          alt="hero"
          height={720}
          width={1400}
          className="mx-auto rounded-2xl object-cover h-full object-left-top"
          draggable={false}
        />
      </ContainerScroll>
    </section>
  );
};

export default AboutSection;