Homepage — Editing the Landing Page

Complete guide to editing the Dax Pro homepage: hero, trust, solutions, performance, showcase, pricing, insights, and contact sections. Edit via Decap CMS or directly in content/index.md.

What the Homepage Is

The homepage is the single most important page on your site. It is the first thing visitors see when they arrive from a search engine, a social media link, or a direct visit. It carries the weight of every marketing decision: what you say first, which section appears where, which call-to-action is primary, what number is highlighted in the hero metrics row.

In Dax Pro, the homepage is one file with many sections. Unlike other pages where the frontmatter is short and the body carries most of the content, the homepage inverts that pattern: the frontmatter carries almost everything, and the body is usually empty or contains only a heading.

The file is:

content/index.md

Every text you see on https://yoursite.com/ comes from this single file. Every image, every number, every label, every button — all of it originates from the frontmatter of index.md. If you can edit that one file, you can rebuild the entire homepage.

This chapter walks through the homepage section by section, in the order they appear visually. For each section, it explains what data it holds, how it renders, and how to edit it through both Decap CMS and the direct YAML approach.

How the Homepage Is Structured

The homepage has eight visual sections. They render in this fixed order:

# Section Purpose
1 Hero The main headline, lead paragraph, two CTAs, and three metrics
2 Trust Four cards explaining why the product is reliable
3 Solutions A bento grid of four cards — two with images, two with feature lists
4 Performance A stats comparison chart plus a CMS highlights card
5 Showcase A code snippet in a terminal-style box
6 Pricing Three pricing tiers
7 Insights Three recent blog posts pulled automatically
8 Contact A call-to-action and a lead form

Each section is rendered by its own partial template (home/hero.dax, home/trust.dax, and so on). You do not need to edit those templates to change the homepage. The templates read from the frontmatter of index.md. Change the frontmatter, the homepage changes.

Section order is fixed by the layout, not by the frontmatter. You cannot reorder sections without editing templates/layouts/home.dax, which is developer territory covered in the Developer Guide. For this chapter, assume the order stays as designed.

Method 1 — Editing the Homepage via Decap CMS

Decap CMS is the recommended way to edit the homepage for non-technical users. It presents the entire frontmatter as an organized form with sections, validation, and no YAML syntax to worry about.

Accessing the Homepage Editor

1. Open https://yoursite.com/admin/ in a browser

2. Log in with your editor credentials

3. In the left sidebar, find 🏠 Homepage

4. Click it

5. You will see Home Page in the file list

6. Click Home Page

The editor opens with all homepage sections as form fields, organized top-to-bottom in the same order they appear on the site.

The Editor Layout

The Decap CMS homepage editor is split into two areas:

  • Left sidebar — the field list, grouped by section. Click any section to jump to it.
  • Main panel — the form fields for the currently selected section.

    • At the top, a sticky toolbar has three buttons:

  • Save — saves as draft without publishing (rarely needed for the homepage)
  • Publish — commits the change and triggers a rebuild
  • Editorial Workflow (if enabled) — submits for review

    • Most edits follow the same pattern: click a section, edit a field, click Publish.

    Editing the Hero Section

    The Hero is the top of the homepage. It has two columns: text on the left, image on the right.

    In Decap CMS:

    1. Click Hero in the left sidebar

    2. You will see these fields:

    Field What it does
    Kicker Small uppercase label above the headline. Default: Enterprise .NET Static Site Generator
    Title Prefix First part of the headline, before the highlight. Default: High-Velocity Static Architecture for
    Title Highlight The highlighted phrase in the headline, rendered in gradient color. Default: Microsoft .NET
    Title Suffix The rest of the headline after the highlight. Default: & Decap CMS
    Lead The paragraph under the headline. Two to three sentences.
    CTA Primary The primary button (filled, brand color)
    CTA Primary → Text Button label. Default: Request Enterprise Evaluation
    CTA Primary → URL Button destination. Default: #contact
    CTA Secondary The secondary button (outlined)
    CTA Secondary → Text Button label. Default: Inspect Dax Core Demo
    CTA Secondary → URL Button destination. Default: https://dax.axcora.com
    Metrics List of three metrics shown below the CTAs
    Metrics → Value The large number. Example: 0.04s
    Metrics → Label The small label under the number. Example: Static Build Pipeline
    Image The hero image URL
    Image Alt Alternative text for accessibility and SEO
    Badge → Title Title in the badge overlay. Default: Enterprise Ready .NET SSG
    Badge → Description Description in the badge overlay
    Badge → Status Status text in the badge. Default: STABLE 9.0

    3. Edit any field

    4. To change the headline, edit Title Prefix, Title Highlight, and Title Suffix together — they combine into one

    element with the middle part wrapped in a highlight span

    5. Click Publish when done

    Example — changing the headline:

    If you want the headline to read "Enterprise Static Sites for .NET Teams" with ".NET" highlighted:

  • Title Prefix: Enterprise Static Sites for
  • Title Highlight: .NET
  • Title Suffix: Teams

    • The three fields concatenate with spaces in between. If your desired headline does not have a natural highlight point, put the entire headline in Title Prefix and leave Title Highlight and Title Suffix empty.

    Example — changing the three metrics:

    The three metrics always display three items. Replace them with your own numbers:

  • Metric 1: Value 99%, Label Uptime SLA
  • Metric 2: Value 2s, Label Build Time
  • Metric 3: Value 0, Label Servers to Maintain

    • Do not remove metrics. The layout expects exactly three. If you have only two, add a third with empty values — it renders as blank space but does not break the layout.

    Editing the Trust Section

    Four cards explaining reliability. Each card has an index label (like 01. COMPILED SPEED), a title, and a description.

    In Decap CMS:

    1. Click Trust in the left sidebar

    2. Fields:

    Field What it does
    Kicker Small uppercase label above the section title
    Title Section heading
    Description Section subheading paragraph
    Cards A list of four cards
    Cards → Index Card number badge. Example: 01. COMPILED SPEED
    Cards → Title Card title
    Cards → Description Card body text

    3. To edit a card, expand its row in the Cards list

    4. To add a fifth card, click Add Cards (rarely needed — the grid is designed for four)

    5. Click Publish when done

    The number of cards is flexible but the grid layout assumes four. If you have five, the fifth wraps to a new row. If you have three, the fourth cell is empty. For best visual results, use exactly four.

    Editing the Solutions Section

    A bento grid with four cards. Two cards have images, two cards have feature lists. Each card spans a different number of columns.

    In Decap CMS:

    1. Click Solutions in the left sidebar

    2. Fields:

    Field What it does
    Kicker Small uppercase label
    Kicker Class CSS class for the kicker color. Leave as dax-kicker-azure.
    Title Section heading
    Description Section subheading
    Item 1 First bento card (largest, spans 8 columns)
    Item 1 → Span Number of grid columns. Do not change — the layout depends on this.
    Item 1 → Tag Small label. Example: CORE WORKFLOW AUTOMATION
    Item 1 → Title Card title
    Item 1 → Description Card body
    Item 1 → Image Image URL
    Item 1 → Image Alt Alt text
    Item 1 → Image Width Image display width in pixels. Do not change.
    Item 1 → Image Height Image display height in pixels. Do not change.
    Item 2 Second card (spans 4 columns) — has feature list instead of image
    Item 2 → Feature 1–4 The four bullet points
    Item 3 Third card (spans 6 columns) — image style
    Item 4 Fourth card (spans 6 columns) — feature list style
    Explore Text Text above the "explore" button
    Explore Sub Subtext below Explore Text
    Explore CTA Button label
    Explore URL Button destination

    Key rules:

  • Do not change Span, Image Width, or Image Height. These are layout-dependent. Changing them breaks the bento grid.
  • Item 2 and Item 4 have Feature 1 through Feature 4 fields instead of images. Do not add images to those items — the layout does not accommodate images there.
  • Item 1 and Item 3 have images. Do not remove the images unless you want an empty media area.

    • Click Publish when done.

    Editing the Performance Section

    Two columns: on the left, a stats comparison (three horizontal bar charts); on the right, a CMS highlights card with a dark background.

    In Decap CMS:

    1. Click Performance in the left sidebar

    2. Fields:

    Field What it does
    Kicker Small label
    Title Section heading
    Lead Section subheading
    Stats List of three stat bars
    Stats → Label Left-side text of the bar. Example: Dax Pro (.NET SSG + Edge CDN)
    Stats → Value Right-side value. Example: 18ms TTFB
    Stats → Color Text color for the value. Leave as var(--dotnet-purple)
    Stats → Bar Class CSS class for the bar. dax-stat-bar-dax for filled bars, dax-stat-bar-legacy for gray bars
    Stats → Width Bar width as percentage. Example: 98%
    Stats → Bar Background Optional background override. Leave empty except for the green Lighthouse bar
    CMS → Title Card title
    CMS → Subtitle Card subtitle
    CMS → Body Card body paragraph
    CMS → Highlights Two highlight boxes in the card
    CMS → Highlights → Value Large value. Example: 100%
    CMS → Highlights → Label Small label. Example: Git Version Control

    Editing stats meaningfully: the three stats exist to compare "us" vs "them." Typically:

    1. Your product with a low number and a wide bar

    2. The alternative with a high number and a narrow bar

    3. A third metric like Lighthouse or uptime

    Keep the bar widths proportional to the values — if your number is 18ms and the competitor is 480ms, the bar widths should reflect that ratio (about 4% and 96%, not 98% and 25%). The default values in the file are illustrative; adjust to match your actual claims.

    Editing the Showcase Section

    A code snippet displayed in a terminal-style box with dots (red, yellow, green) at the top. The code is rendered line by line with syntax highlighting hints.

    In Decap CMS:

    1. Click Showcase in the left sidebar

    2. Fields:

    Field What it does
    Kicker Small label
    Title Section heading
    Description Section subheading
    Filename The filename shown in the terminal bar. Example: DaxSiteGenerator.cs — Microsoft .NET 9.0
    Copy Label The "Copy Code" button label
    Code Lines The actual code, one row per line
    Code Lines → Info The text of one line
    Code Lines → Token Syntax highlight class. See below.

    Token values and their colors:

    Token Color Use for
    comment Gray italic Comments (// ...)
    keyword Red/pink Language keywords (using, var, await, new)
    type Blue Class names, types (DaxPro.Core, Console)
    string Green String literals ("content/articles")
    fn Yellow Method calls (.Build(), .Create())
    (empty) Default Whitespace, punctuation, plain text

    To edit the code:

    1. Expand Code Lines

    2. Each row is one line of code

    3. Edit the Info field to change the text

    4. Change the Token field to change the color

    5. To add a line, click Add Code Lines at the bottom

    6. To remove a line, hover over it and click the trash icon

    7. Empty lines use empty strings in both Info and Token — preserve those for spacing

    Important: the code is displayed as plain text inside 

    . HTML characters like < and > are rendered literally. If your code snippet includes HTML, keep in mind that it will display as-is (which is what you want for code display, but be aware that copying the rendered code may include HTML entities).
    


    Editing the Pricing Section
    


    Three pricing tiers displayed side by side. The middle tier (Pro) is visually highlighted with a "Most Popular" badge.
    


    In Decap CMS:
    


    1. Click Pricing in the left sidebar
    

    2. Fields:
    


    

    
Field
What it does

    


    
Kicker
Small label

    

    
Title
Section heading

    

    
Description
Section subheading

    

    
Tier 1
First tier (leftmost)

    

    
Tier 2
Second tier (middle, highlighted)

    

    
Tier 3
Third tier (rightmost)

    

    

    Each tier has these fields:
    


    

    
Field
What it does

    


    
Name
Tier name. Example: Free, Pro, Custom

    

    
Tagline
Short description under the name

    

    
Currency
Currency symbol. Example: $

    

    
Price
Numeric price. Example: 0, 199, Custom

    

    
Period
Payment period. Example: / forever free, / lifetime license

    

    
Featured
Boolean (Tier 2 only). true highlights the card.

    

    
Flag
Badge text (Tier 2 only). Example: MOST POPULAR

    

    
Feature 1 through Feature 4
The four checklist items

    

    
CTA Text
Button label

    

    
CTA URL
Button destination

    

    
CTA Class
Button style. dax-btn-primary for filled, dax-btn-secondary for outlined

    

    

    Tier 2 is always featured. Do not toggle Featured off unless you want all three tiers to look identical. The Flag field only renders when Featured is true.
    


    CTA URLs in the default config:
    


  • Tier 1 (Free): https://dax.axcora.com
    • 

  • Tier 2 (Pro): https://creativitaz.gumroad.com/l/dax-pro
    • 

  • Tier 3 (Custom): https://www.fiverr.com/creativitas/design-your-website-with-progresive-web-application
    • 


    These are Gumroad and Fiverr purchase links. If you sell through a different channel, replace the URLs.
    


    Editing the Insights Section
    


    This section is mostly automatic. It displays the three most recent blog posts from content/posts/. You do not select which posts appear — Dax Pro pulls them based on date.
    


    In Decap CMS:
    


    1. Click Insights in the left sidebar
    

    2. Fields:
    


    

    
Field
What it does

    


    
Kicker
Small label

    

    
Title
Section heading

    

    
Description
Section subheading

    

    
Read More
The "read more" link label shown on each post card

    

    
CTA → Text
The "view all" button label

    

    
CTA → URL
The "view all" button destination. Default: /posts/

    

    

    You cannot control which posts appear here from this section. To change the three displayed posts, edit the date field of individual posts in content/posts/. The three with the newest dates appear on the homepage.
    


    Editing the Contact Section
    


    The bottom of the homepage. Two columns: left side has a headline, guarantees list, and email; right side has a form.
    


    In Decap CMS:
    


    1. Click Contact in the left sidebar
    

    2. Fields:
    


    

    
Field
What it does

    


    
Kicker
Small label above the heading

    

    
Title
Section heading

    

    
Subtext
Paragraph under the heading

    

    
Guarantees
List of three bullet points on the left

    

    
Email Label
Label above the email. Example: Enterprise Desk:

    

    
Email
Email address. Example: [email protected]

    

    
Fields
The form fields (four fields in a list)

    

    
Submit
The form submit button label

    

    

    Each form field has these settings:
    


    

    
Field
What it does

    


    
ID
HTML id attribute. Must be unique.

    

    
Name
HTML name attribute. Used in form submission.

    

    
Label
Visible label above the input

    

    
Type
text, email, select, or textarea

    

    
Placeholder
Placeholder text inside the input

    

    
Required
Boolean — does the field require a value?

    

    
Option 1–3 Value/Label
For select type only. The dropdown options.

    

    

    The contact form on the homepage submits via JavaScript to a Formspree-style endpoint. The form action is set inside the home/contact.dax template, not in index.md. If you want to change the submission destination, you need to edit the template. For most users, the default Formspree endpoint should be replaced with your own — see the Contact Page chapter for how to set up a Formspree endpoint and where to update the template.
    


    Click Publish when done.
    


    Publishing the Homepage
    


    After editing any section:
    


    1. Click Publish in the top-right corner
    

    2. A confirmation toast appears: "Entry saved"
    

    3. Decap CMS commits the change to Git with a descriptive message
    

    4. Your host detects the commit and rebuilds
    

    5. Wait 30–60 seconds
    

    6. Open the homepage in a browser and refresh
    

    7. The change is live
    


    If the change does not appear after a minute, check the host's deploy log. If the build failed, the log shows why — usually a syntax error in the YAML, caught by Decap CMS validation but not always with a clear message.
    


    

    Method 2 — Editing the Homepage Directly
    


    For developers, editing content/index.md directly in VS Code is faster and gives full control. The frontmatter is YAML; the body is Markdown.
    


    Opening the File
    


    code content/index.md

    


    Or in VS Code's sidebar, expand content/ and click index.md.
    


    The file starts with --- (frontmatter start), contains many sections of YAML, and ends with --- (frontmatter end). If there is a body after the closing ---, it is usually empty for the homepage.
    


    Understanding the Frontmatter Structure
    


    The frontmatter is nested. The top-level keys are section names:
    


    ---

    layout: home.dax
    

    title: "Dax Pro — Enterprise .NET Static Site Generator & Decap CMS"
    

    description: "..."
    

    image: "..."
    


    hero:
    

      kicker: "..."
    

      title_prefix: "..."
    

      # ...
    


    trust:
    

      kicker: "..."
    

      # ...
    


    solutions:
    

      kicker: "..."
    

      item1:
    

        # ...
    

      item2:
    

        # ...
    

      # ...
    


    performance:
    

      # ...
    


    showcase:
    

      # ...
    


    pricing:
    

      tier1:
    

        # ...
    

      tier2:
    

        # ...
    

      tier3:
    

        # ...
    


    insights:
    

      # ...
    


    contact:
    

      # ...
    

    

    


    Indentation matters. Two spaces per level. A field under hero is indented two spaces from the left. A field under hero.cta_primary is indented four spaces.
    


    Quotes matter. Every string value should be quoted. Numbers can be unquoted (span: 8), booleans can be unquoted (featured: true), but everything else uses double quotes.
    


    No tabs. If your editor inserts tabs, configure it to insert spaces.
    


    Editing Specific Sections
    


    To change the hero headline:
    


    Find the hero block and edit these three lines:
    


    hero:

      title_prefix: "Enterprise Static Sites for"
    

      title_highlight: ".NET"
    

      title_suffix: "Teams"
    

    


    These three lines concatenate on the rendered page.
    


    To change the hero metrics:
    


    Find the hero.metrics list:
    


      metrics:

        - value: "99%"
    

          label: "Uptime SLA"
    

        - value: "2s"
    

          label: "Build Time"
    

        - value: "0"
    

          label: "Servers to Maintain"
    

    


    Each metric has a value and a label. The list length should be exactly three.
    


    To change the hero image:
    


    hero:

      image: "/images/hero-main.webp"
    

      image_alt: "The main hero image showing our product"
    

    


    The image path must start with /. Place the actual file in public/images/.
    


    To change the trust cards:
    


    Each card has three fields:
    


    trust:

      cards:
    

        - index: "01. COMPILED SPEED"
    

          title: "Compiled C# Performance"
    

          desc: "Built directly upon .NET Ahead-Of-Time..."
    

        - index: "02. DECAP CMS"
    

          title: "Decoupled Git Authoring"
    

          desc: "Editorial teams write inside..."
    

        # ... two more cards
    

    


    Each card is a list item under cards:. Add, remove, or edit freely. Keep exactly four for best layout.
    


    To change a pricing tier:
    


    pricing:

      tier1:
    

        name: "Free"
    

        tagline: "Full open-source DAX SSG."
    

        currency: "$"
    

        price: "0"
    

        period: "/ forever free"
    

        feature1: "Pure C# Slim Static Site Generator"
    

        feature2: "Auto SEO, Collections, Tags, Pagination"
    

        feature3: "Minimal Starter Template"
    

        feature4: "Deploy to Netlify, Vercel, Cloudflare"
    

        cta_text: "Get Free on dax.axcora.com"
    

        cta_url: "https://dax.axcora.com"
    

        cta_class: "dax-btn-secondary"
    

    


    The tier is a single object with these fields. Each feature is a separate string. The cta_class determines button style (dax-btn-primary filled, dax-btn-secondary outlined).
    


    To change the contact form fields:
    


    Each form field is a list item under contact.fields:
    


    contact:

      fields:
    

        - id: "contact-name"
    

          name: "name"
    

          label: "Full Name"
    

          type: "text"
    

          placeholder: "e.g. Sarah Jenkins"
    

          required: true
    

        - id: "contact-email"
    

          name: "email"
    

          label: "Corporate Email"
    

          type: "email"
    

          placeholder: "[email protected]"
    

          required: true
    

    


    Field types supported by the template:
    


    

    
Type
Renders as

    


    
text


    

    
email


    

    
select


    

    
textarea