Design UI

How to update the landing page UI

Docuna separates content and UI from the layout. You do not need to edit Astro components to update the navbar, footer, or landing page. Everything is controlled through JSON files in src/data/.

There are two files you will work with most often:

src/data/config/config.json — navbar menus and footer content
src/data/home/home.json — landing page sections

Both files follow the same idea: each key maps to a section of the page, and you only edit the values.

Open src/data/config/config.json to edit the navbar menus and the footer area.

The file contains four navigation groups, labeled nav1 through nav4. Each group has a title and a list of items with a nav label and a link.

{
  "title": "Your website title",
  "description": "Your website description",
  "image": "/path/to/footer-image.svg",
  "nav1_title": "Menu",
  "nav1": [
    { "nav": "Home", "link": "/" },
    { "nav": "About", "link": "/about" },
    { "nav": "Documentation", "link": "/getting-started/" },
    { "nav": "Contact", "link": "/contact" }
  ],
  "nav2_title": "Documentation",
  "nav2": [
    { "nav": "Get Started", "link": "/getting-started/" },
    { "nav": "Installation", "link": "/getting-started/installation/" }
  ],
  "nav3_title": "Themes",
  "nav3": [
    { "nav": "Docuna", "link": "/project/docuna" },
    { "nav": "Blacks", "link": "/project/blacks" }
  ],
  "nav4_title": "Contact",
  "nav4": [
    { "nav": "WhatsApp", "link": "https://wa.me/62895339403223" },
    { "nav": "Email", "link": "mailto:axcora@gmail.com" }
  ]
}

title and description are used site-wide.
image is the footer image path.
Each navX_title is the column heading in the footer.
Each navX is a list of links in that column.

You can add or remove items freely. The footer renders them in order.

Landing page

Open src/data/home/home.json to edit the landing page sections.

The file is divided into several sections, each with its own key:

intro — the hero section at the top
why — the “why choose” section with a list of reasons
features — the feature grid
pricing — the pricing section with plans
section — the closing call-to-action

Each section uses the same pattern: a title, some text, and often an image or list of items.

Example: editing the intro section

"intro": {
  "title": "Your hero title",
  "text": "A short description under the title.",
  "image": "/img/your-image.svg"
}

Example: editing the why list

"why_list": [
  {
    "title": "Built for speed",
    "text": "A short explanation of this benefit.",
    "icon": "rocket",
    "link": "/getting-started/structure/"
  }
]

The icon field accepts any icon name from the Starlight icon set. You can browse the full list in the Starlight documentation:

https://starlight.astro.build/guides/components/#icon

Example: editing a pricing plan

"plan": [
  {
    "title": "Docuna",
    "icon": "laptop",
    "price": "$35",
    "link": "https://your-store-link",
    "features": [
      { "text": "Astro JS" },
      { "text": "Starlight documentation" },
      { "text": "Landing page" }
    ]
  }
]

Each plan has a title, icon, price, purchase link, and a list of features. You can add as many plans as you need.

Full example: home.json

Below is a minimal but complete example you can adapt.

{
  "intro": {
    "title": "Your hero title",
    "text": "A short description of your project.",
    "image": "/img/your-image.svg"
  },
  "why": {
    "title": "Why choose your project",
    "image": "/img/report.svg"
  },
  "why_list": [
    {
      "title": "Fast",
      "text": "Short reason one.",
      "icon": "rocket",
      "link": "/getting-started/"
    },
    {
      "title": "Easy to configure",
      "text": "Short reason two.",
      "icon": "setting",
      "link": "/getting-started/configuration/"
    }
  ],
  "features": "What you get",
  "feature_list": [
    {
      "title": "Feature one",
      "text": "Short description.",
      "icon": "star",
      "link": "/getting-started/"
    }
  ],
  "pricing": {
    "title": "Pricing",
    "cover": "/img/ssg.svg",
    "text": "Short description of your plans."
  },
  "plan": [
    {
      "title": "Docuna",
      "icon": "laptop",
      "price": "$35",
      "link": "https://your-store-link",
      "features": [
        { "text": "Astro JS" },
        { "text": "Starlight documentation" }
      ]
    }
  ],
  "section": {
    "title": "Need help?",
    "text": "A short closing message.",
    "link": "https://your-contact-link"
  }
}

Tips

Edit one section at a time. Save, then check the result in your browser.
Keep titles short. They are headings, not sentences.
Reuse the same icon names across sections for consistency.
JSON does not allow comments. If you copy an example, remove any // lines before saving.

If you want to change something that is not covered by these JSON files, you can edit the components directly in src/widget/. But for most updates, JSON is enough.