"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 SolidBackgrondIconFeature from "@/sections/Feature/SolidBackgrondIconFeature";
import PageHeader from "@/sections/PageHeader";

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">
          <PageHeader
            title="What You Get"
            subtitle={
              <>
                {" "}
                <h2 className="text-base-content text-2xl font-medium content text-center max-w-6xl mx-auto px-6">
                  Fastpocket gives you boilerplate to help you build.
                </h2>
              </>
            }
          />
          <SolidBackgrondIconFeature />
        </div>
        <Footer />
      </PageWrapper>
    </>
  );
}