import { AutoplayVideo } from "../AutoplayVideo";
import { ExtraLargeTitle } from "../Primitives/ExtraLargeTitle";
import { SmallSubtitle } from "../Primitives/SmallSubtitle";
import { HomeSection } from "./HomeSection";

export function HomeCollaborateSection() {
  return (
    <HomeSection containerClassName="py-10 px-6 bg-black md:py-36 lg:py-20">
      <div className="w-full md:pr-10 md:w-1/2">
        <ExtraLargeTitle className="text-white mb-4">
          Collaborate with the whole world (and yourself)
        </ExtraLargeTitle>
        <SmallSubtitle className="mb:6 md:mb-10">
          Easily share your JSON documents with any distant relative with a CS
          degree. Link right to the part of the document you're on. Or save the
          link for some casual browsing later in the evening while enjoying a
          glass of red.
        </SmallSubtitle>
      </div>
      <div className="w-full md:w-1/2">
        <AutoplayVideo src="/home/JsonHeroShare.mp4" />
      </div>
    </HomeSection>
  );
}