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

const CenterAllignedWithVideoHero = () => {
  return (
    <>
      {/* Hero */}
      <div className="relative overflow-hidden">
        <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 text-primary-content sm:text-4xl md:text-5xl">
              Fast <span className="text-primary">Pocket</span>
            </h1>
            <p className="mt-3 text-lg text-primary-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>
      {/* End Hero */}
    </>
  );
};

export default CenterAllignedWithVideoHero;
