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: Doc.where(solution_id:168846).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 |
|---|---|
| Name | Full name of the user |
| Contact email | |
| Phone | Phone number |
| App Role | User role or permission level |
Posts Collection
Holds your blog posts displayed in the latest posts section.
| Field | Description |
|---|---|
| Title | Headline of the post |
| Fuzen Post Link | Link to the full article |
| Post Content | Main body of the post |
| Meta Title | SEO title displayed in search results |
| Meta Description | Short summary for search engines |
| Searchable | Shows 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-12andpx-6. - Container widths managed with
mx-autofor centered alignment. - Grid layouts like
grid-cols-1 md:grid-cols-2for 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.