Website App Template – User Guide

This guide helps you understand what the website template includes, what each section does, and how you can use it to build your site quickly.

🏠 Home Page (/a/home/)

The Home Page is the main landing page. It combines all essential sections of a modern website into one responsive layout.

Header Section

  • Shows your logo and horizontal navigation links.
  • Helps visitors quickly move to other parts of the site.
  • Appears at the top of every page for easy access.

Hero Section

  • Displays an attention-grabbing headline and short description.
  • Includes a clear call-to-action button to encourage next steps.
  • Use this space to highlight your brand or main offer.

About Section

  • Two-column layout: text on one side, image on the other.
  • Explains more about you, your company, or your services.
  • Stacks vertically on small screens for better mobile readability.

Latest Blog Posts Section

  • Shows three recent posts from the Posts collection.
  • Each card includes the post title, short excerpt, and link to the full post page.
  • Updates automatically when new posts are added.

Example data source: @backend_data.where(docname: 'Posts').limit(3)

Call-to-Action Section

  • Encourages visitors to explore more pages or features.
  • Includes one vivid button that leads to another part of the site, such as /p/posts.
  • Usually placed near the bottom to wrap up the page’s message.

Footer Section

  • Appears at the bottom of the page with navigation links and copyright info.
  • Uses subdued grayscale tones to maintain focus on the main content.
  • Stays consistent across all pages.

📦 App Collections

Your app uses two collections to store information. These keep content easy to update and display on pages.

App Users Collection

Stores details of website users.

Field Description
NameFull name of the user
EmailContact email
PhonePhone number
App RoleUser role or permission level

Posts Collection

Holds your blog posts displayed in the latest posts section.

Field Description
TitleHeadline of the post
Fuzen Post LinkLink to the full article
Post ContentMain body of the post
Meta TitleSEO title displayed in search results
Meta DescriptionShort summary for search engines
SearchableShows if the post appears in search

🚀 Using the Template

  • Start on the Home Page for all main site sections.
  • Keep your Posts updated to show fresh content.
  • Customize text and images under each section to fit your brand.
  • Use clear calls to action to guide visitors around your site.

🎨 Styling Notes

The design uses Tailwind CSS for a clean and responsive layout.

  • Use ample padding with classes like py-12 and px-6.
  • Container widths managed with mx-auto for centered alignment.
  • Grid layouts like grid-cols-1 md:grid-cols-2 for adaptive layouts.
  • Rounded corners and soft shadows to give a modern look.

🦮 Navigation Summary

Page Route Purpose
Home/a/home/Main landing page showing all sections

Next Steps

  • Update your post content via the Posts collection.
  • Add your logo and customize navigation links in the Header.
  • Fine-tune typography and colors to match your brand.
  • Publish and share your website once sections look complete.