Static Page — Ship Fast ⚡️

Here's what your code would look like on your static pages (landing page, pricing, etc.)

💡 The TagSEO component will make it much easier to deal with SEO tags & rank on Google .

/pages/landing.js


import { Roboto_Slab } from "next/font/google";
import { signIn } from "next-auth/react";
import TagSEO from "@/components/TagSEO";
import TagSchema from "@/components/TagSchema";

const font = Roboto_Slab({ subsets: ["latin"] });

export default function Landing() {
  return (
    <>
      {/* 👇 Add all your SEO tags for the page. canonicalSlug required, other tags a prefilled with your default */}
      <TagSEO title="Food recipes you'll love | FoodAI" canonicalSlug="/" />

      {/* 👇 Tells Google what type is your site. In this example, we could say it's a SoftwareApplication. Optional */}
      <TagSchema />

      <main
        className="min-h-screen p-12 pb-24 text-center"
        // 👇 The DaisyUI themes to apply (light & dark are enabled by default, you need to add 'retro' in config.taildwind.js)
        data-theme="retro"
        // 👇 Use next/font package to add a custom font
        style={{
          fontFamily: font.style.fontFamily,
        }}
      >
        <section className="max-w-xl mx-auto space-y-8">
          <h1 className="text-3xl md:text-4xl font-extrabold">
            Food recipes you&apos;ll love 🥦
          </h1>

          <p className="text-lg leading-relaxed text-base-content/80">
            Our AI will generate recipes based on your preferences. New recipes
            will be added every week!
          </p>

          <img
            src="https://images.unsplash.com/photo-1518843875459-f738682238a6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3484&q=80"
            alt="Vegetables"
            width={500}
            height={250}
            className="rounded-lg mx-auto"
          />

          {/* 👇 Trigger the signup flow. It creates a User in the database and add cookies in the browser so the user can access private routes */}
          {/* We redirect the user to the /dashboard private page */}
          <button
            className="btn btn-wide"
            onClick={() =>
              signIn(undefined, { callbackUrl: "/tutorial/dashboard" })
            }
          >
            Get cookbook
          </button>
        </section>
      </main>
    </>
  );
}