import "aos/dist/aos.css"
import React from "react"
import { SquaredBackgroundHero } from "@/sections/Hero"
import PageWrapper from "@/components/Utilities/PageWrapper"
import Footer from "@/components/Footer"
import PageHeader from "@/sections/PageHeader"
import ContainerImageIconBlocksFeature from "@/sections/Features/ContainerImageIconBlocksFeature"
import Background from "@/components/Utilities/Background"
import CardTestemonial from "@/sections/Testemonial/CardTestemonial"
import CardsFeature from "@/sections/Features/CardsFeature"
import FAQ from "@/sections/FAQ/RightAlignedBorderBottomFAQ"
import VerticalTabsFeature from "@/sections/Features/VerticalTabsFeature"
import Payment from "@/sections/Payment"

export const metadata = {
  title: "Pocketbase, Stripe, Next.js, Boilerplate | FastPocket",
  description:
    "FastPocket - Is a boilerplate codebase for everyone to build a product quickly.",
  keywords: [
    "pocketbase",
    "stripe",
    "next.js",
    "boilerplate",
    "template",
    "codebase"
  ],
  openGraph: {
    url: "https://fastpocket.dev",
    type: "website",
    title: "Pocketbase, Stripe, Next.js, Boilerplate | FastPocket",
    description:
      "FastPocket - Is a boilerplate codebase for everyone to build a product quickly.",
    images: [
      {
        url: "https://fastpocket.dev/images/home/thumbnail.png",
        width: 1200,
        height: 630,
        alt: "fastpocket.degv"
      }
    ]
  },
  twitter: {
    card: "summary_large_image",
    title: "Pocketbase, Stripe, Next.js, Boilerplate | FastPocket",
    description:
      "fastpocket.dev - Programming blog for everyone to learn Elastic Stack, Next.js, Python, JavaScript, React, Machine Learning, Data Science, and more.",
    creator: "@meinbiz",
    site: "@meinbiz",
    images: [
      {
        url: "https://fastpocket.dev/images/home/thumbnail.png",
        width: 1200,
        height: 630,
        alt: "fastpocket.degv"
      }
    ]
  },
  alternates: {
    canonical: "https://fastpocket.dev"
  }
}

export default function Home() {
  return (
    <>
      <PageWrapper>
        <SquaredBackgroundHero />
        <VerticalTabsFeature />
        <div className="bg-primary/2">
          <ContainerImageIconBlocksFeature />
        </div>
        <PageHeader
          title={"You Will Hate FastPocket If..."}
          className="!pt-16"
          subtitle={<></>}
        />
        <CardsFeature />
        <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/>
        <FAQ />
        <Footer />
      </PageWrapper>
    </>
  )
}