TutorialsStatic page
ShipFast comes with many components to help your 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.
The <TagSEO /> & <TagSchema /> components help you rank on Google. Make sure to customize your SEO tags.
A simple landing page can done like this:
landing.js
1
2import TagSEO from "@/components/TagSEO";
3import TagSchema from "@/components/TagSchema";
4
5export default function Landing() {
6 return (
7 <>
8 {/* 👇 Add all your SEO tags for the page (title, keywords, description, open graph etc...) */}
9 <TagSEO title="Food recipes you'll love | FoodAI" canonicalSlug="/" />
10
11 {/* 👇 Tells Google what type is your site. In this example, we could say it's a SoftwareApplication. It's used for Rich Snippets */}
12 <TagSchema />
13
14 <main
15 className="min-h-screen p-12 pb-24 text-center"
16 // 👇 The DaisyUI themes to apply (20+ to choose from)
17 data-theme="retro"
18 >
19 <section className="max-w-xl mx-auto space-y-8">
20 <h1 className="text-3xl md:text-4xl font-extrabold">
21 Food recipes you'll love 🥦
22 </h1>
23
24 <p className="text-lg leading-relaxed text-base-content/80">
25 Our AI will generate recipes based on your preferences. New recipes
26 will be added every week!
27 </p>
28
29 <img
30 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"
31 alt="Vegetables"
32 width={500}
33 height={250}
34 className="rounded-lg mx-auto"
35 />
36 </section>
37 </main>
38 </>
39 );
40}