ShipFast Docs

Appearance

Static Page Tutorial ​

Fresh

Source: shipfa.st/docs/tutorials/static-page

ShipFast comes with many components to help you build SEO-optimized pages quickly.

Building a Landing Page ​

The /components folder contains all you need: Hero, Pricing, FAQ sections, and more. See the full components list.

The /libs/seo.js file helps you set SEO tags for better Google ranking. Customize SEO tags.

Simple Example ​

javascript
import { getSEOTags } from "@/libs/seo";

export const metadata = getSEOTags({ canonicalUrlRelative: "/" });

export default function Landing() {
  return (
    <>
      <main className="min-h-screen p-12 pb-24 text-center" data-theme="dark">
        <section className="max-w-xl mx-auto space-y-8">
          <h1 className="text-3xl md:text-4xl font-extrabold">
            Food recipes you'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>
          <button className="btn btn-primary btn-wide">Get started</button>
        </section>
      </main>
    </>
  );
}

See Also ​