TutorialsStatic page

ShipFast comes with many components to help you build SEO-optimized pages (like a landing page) in no time.

The /components folder contains all you need (hero, pricing, FAQ sections). Here's the list of all the components & themes.

The /libs/seo.js file helps you set SEO tags to better rank on Google. Make sure to customize SEO tags.

A simple landing page can done like this:

landing.js

1import { getSEOTags } from "@/libs/seo";
2
3export const metadata = getSEOTags({ canonicalUrlRelative: "/" });
4
5export default function Landing() {
6  return (
7    <>
8      <main
9        className="min-h-screen p-12 pb-24 text-center"
10        data-theme="dark"
11      >
12        <section className="max-w-xl mx-auto space-y-8">
13          <h1 className="text-3xl md:text-4xl font-extrabold">
14            Food recipes you&apos;ll love 🥦
15          </h1>
16
17          <p className="text-lg leading-relaxed text-base-content/80">
18            Our AI will generate recipes based on your preferences. New recipes
19            will be added every week!
20          </p>
21
22          <img
23            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"
24            alt="Vegetables"
25            width={500}
26            height={250}
27            className="rounded-lg mx-auto"
28          />
29
30          <button className="btn btn-primary btn-wide">Get started</button>
31        </section>
32      </main>
33    </>
34  );
35}