import React from "react";
import Video from "../Video";

const CenterAllignedWithVideoHero = () => {
  return (
    <>
      {/* Hero */}
      <div className="h-screen w-screen flex flex-col">
        <div className="relative overflow-hidden my-auto">
          <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-10">
            <div className="max-w-2xl text-center mx-auto">
              <h1 className="block text-3xl font-bold bg-base-content sm:text-4xl md:text-5xl">
                Fast <span className="text-primary">Pocket</span>
              </h1>
              <p className="mt-3 text-lg bg-base-content">
                Build your startup here. Launch it anywhere.
              </p>
            </div>
            <div className="mt-10 relative max-w-5xl mx-auto">
              <Video />
              <div className="absolute bottom-12 -start-20 -z-[1] size-48 bg-gradient-to-b from-primary to-base-100 p-px rounded-lg">
                <div className="bg-base-100 size-48 rounded-lg" />
              </div>
              <div className="absolute -top-12 -end-20 -z-[1] size-48 bg-gradient-to-t from-secondary to-accent p-px rounded-full">
                <div className="bg-base-100 size-48 rounded-full" />
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* End Hero */}
    </>
  );
};

export default CenterAllignedWithVideoHero;