"use client";
import Aos from "aos";
import "aos/dist/aos.css";
import { useEffect } from "react";
import React from "react";
import { WaitingListWithImageHero } from "@/sections/Hero";
import PageWrapper from "@/components/Utilities/PageWrapper";
import Footer from "@/components/Footer";
import PageHeader from "@/sections/PageHeader";
import ContainerImageIconBlocksFeature from "@/sections/Feature/ContainerImageIconBlocksFeature";
import Background from "@/components/Utilities/Background";
import CardTestemonial from "@/sections/Testemonial/CardTestemonial";
import Payment from "@/sections/Payment";

export default function Home() {
  useEffect(() => {
    Aos.init({
      delay: 50,
      easing: "ease-out-cubic",
      once: true,
      offset: 50,
    });
  }, []);

  return (
    <>
      <PageWrapper>
        <WaitingListWithImageHero />
        <div className="bg-primary/2">
          <ContainerImageIconBlocksFeature />
        </div>
        <Background>
          <CardTestemonial />
        </Background>
        <PageHeader
          title={"Want to start building your apps faster?"}
          className="!pt-16"
          subtitle={
            <>
              {" "}
              <h2 className="text-base-content text-2xl font-medium content text-center max-w-6xl mx-auto px-6">
                Purchase now to get early access at a discounted price and start
                building with fly.io and docker compose templates immediately!
              </h2>
            </>
          }
        />
        <Payment />
        <Footer />
      </PageWrapper>
    </>
  );
}