Tutorials Static pages

Static pages form the backbone of your app. That's why Just Launch It comes with many components to help you build SEO-optimised pages (like landing pages) that look great, and convert visitors into customers.

The src/lib/components directory contains all the components you need to build a beautiful and functional page (such as hero, pricing, FAQ and more). Here's a list of all included components.

The src/lib/utils/seo.ts utility helps you set SEO tags on all your pages to better rank on Google and other search engines. Make sure you read how to setup your SEO tags.

Here's an example of a simple, yet effective landing page to get you started:

src/routes/+page.svelte

 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}