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 Payment from "@/sections/Payment";
import CardsFeature from "@/sections/Features/CardsFeature";
import FAQ from "@/sections/FAQ/RightAlignedBorderBottomFAQ";
import VerticalTabsFeature from "@/sections/Features/VerticalTabsFeature";

import { Metadata } from "next";
import Head from "next/head";

export const metadata: 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>
    </>
  );
}