Editing the Homepage design

This page teaches you how to edit the homepage of Finance App. You do not need to know how to code. You only need to edit one file: src/data/home.json.

By the end of this page, you will know:

• Where the homepage file is located
• What each section of the homepage does
• How to change text, images, and buttons
• How to add or remove items in lists

Where the File Is

Open your project folder. Then open this path:

src/data/home.json

That single file controls everything you see on the homepage.

What the Homepage Sections Are

The homepage has several sections. Each one is controlled by a part of home.json:

Section	What It Shows	Controlled By
Hero	Big title and description at the top	title, description, info_title, info_description
Cover image	Large image under the hero	image
Chart	Four small stat boxes	chart
Marquee	Scrolling text strip	marquee
Intro	Image and text block	intro
Product	Product showcase heading and button	product
List	Grid of six feature boxes	list
Section 1	Image and text block	section1
Section 2	Image and text block	section2

The Full File

Here is the complete src/data/home.json file that comes with the theme:

{
  "title": "Astro JS Multipurpose Theme for Startups, Fintech, and AI Products",
  "description": "Finance App is an Astro JS multipurpose theme for startups, fintech, SaaS, and AI products. Landing page, product showcase, blog, and contact form in one project.",
  "info_title": "Build modern sites with Astro JS",
  "info_description": "Finance App is a multipurpose Astro JS theme designed for startups, fintech, SaaS, and AI products. It combines a landing page, product showcase, blog, and contact form in a single, fast, SEO-friendly project.",
  "image": "/img/coverfinanceapp.avif",
  "chart": [
    { "icon": "/img/icon/banked.svg", "title": "Astro JS", "number": "Static Output" },
    { "icon": "/img/icon/unb.svg", "title": "Bootstrap", "number": "Responsive Grid" },
    { "icon": "/img/icon/mobile.svg", "title": "Performance", "number": "Fast Load" },
    { "icon": "/img/icon/dns.svg", "title": "Deploy", "number": "Netlify · Vercel · Cloudflare" }
  ],
  "marquee": [
    { "text": "Astro JS multipurpose theme for startups and AI products" },
    { "text": "Landing page, product showcase, blog, and contact form in one project" },
    { "text": "SEO-friendly, responsive, and easy to configure with JSON and Markdown" }
  ],
  "intro": {
    "title": "BUILT FOR MODERN PRODUCTS",
    "description": "Powered by Astro JS",
    "text": "Finance App is built on Astro JS and Bootstrap, with a design system that works for startups, fintech, SaaS, and AI products.",
    "image": "https://images.unsplash.com/photo-1437623889155-075d40e2e59f"
  },
  "product": {
    "title": "Pages and sections included",
    "description": "EVERYTHING A PRODUCT SITE NEEDS",
    "text": "Finance App includes a landing page, product pages with detail and pagination, a blog with categories and tags, and a working contact form.",
    "button": "Explore All Products",
    "link": "/product"
  },
  "list": [
    { "title": "ASTRO JS", "text": "Built on Astro with static output", "image": "/img/icon/safe.svg" },
    { "title": "BOOTSTRAP", "text": "Responsive grid and components", "image": "/img/icon/covered.svg" },
    { "title": "PRECACT READY", "text": "Interactive islands when needed", "image": "/img/icon/hpf.svg" },
    { "title": "JSON CONFIG", "text": "Update content without code", "image": "/img/icon/cloud.svg" },
    { "title": "MARKDOWN BLOG", "text": "Write articles in Markdown", "image": "/img/icon/surveillance.svg" },
    { "title": "SEO READY", "text": "Meta tags, sitemap, and RSS", "image": "/img/icon/touch.svg" }
  ],
  "section1": {
    "title": "Use cases for startups and AI products",
    "image": "https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3",
    "description": "FROM LANDING PAGE TO PRODUCT LAUNCH",
    "text": "Finance App works well for startup landing pages, fintech product sites, SaaS marketing pages, and AI product launches.",
    "button": "See Use Cases",
    "link": "/about"
  },
  "section2": {
    "title": "Built with performance and SEO in mind",
    "image": "https://images.unsplash.com/photo-1586880244543-0528a802be97",
    "description": "FAST, STATIC, AND SEARCH-FRIENDLY",
    "text": "Astro generates static HTML with minimal JavaScript, so your site loads fast and ranks well.",
    "button": "Read Documentation",
    "link": "/contact"
  }
}

How to Edit — Step by Step

Change the Hero Title

The hero is the big text at the top of the homepage.

1. Open src/data/home.json
2. Find the line starting with "title"
3. Replace the text inside the quotes with your own
4. Save the file

Example:

"title": "Your Own Title Here"

Important: Keep the double quotes " on both sides. Do not remove the comma at the end of the line.

Change the Hero Description

1. Find "description" at the top of the file
2. Replace the text inside the quotes
3. Save

Change the Info Block

The info block appears below the hero.

1. Find "info_title" and "info_description"
2. Replace the text inside the quotes
3. Save

Change the Cover Image

The cover image is the large image under the hero.

1. Put your image in public/img/
2. Find "image" near the top of the file
3. Replace the value with your image path

Example:

"image": "/img/your-image.avif"

Change the Chart

The chart has four small stat boxes.

1. Find the "chart" array
2. Each item has three fields: icon, title, number
3. Edit the values, or copy an item to add a new one
4. To remove an item, delete the whole block including the comma

Example of one chart item:

{ "icon": "/img/icon/banked.svg", "title": "Astro JS", "number": "Static Output" }

Change the Marquee

The marquee is the scrolling text strip.

1. Find the "marquee" array
2. Each item has one field: text
3. Edit or add items

Example:

{ "text": "Your own scrolling text" }

Change the Intro Section

1. Find the "intro" block
2. Edit title, description, text, or image
3. Save

Change the Product Section

1. Find the "product" block
2. Edit title, description, text, button, or link

Change the List

The list is the grid of six feature boxes.

1. Find the "list" array
2. Each item has three fields: title, text, image
3. Edit, add, or remove items

Example of one list item:

{ "title": "ASTRO JS", "text": "Built on Astro with static output", "image": "/img/icon/safe.svg" }

Change Section 1 and Section 2

Both sections use the same fields:

1. Find "section1" or "section2"
2. Edit title, description, text, button, link, or image
3. Save

Rules for Editing JSON

JSON is picky. Follow these rules to avoid errors:

• Always use double quotes " for text. Not single quotes '.
• Always put a comma between items in a list, but not after the last one.
• Never add comments like // or /* */. JSON does not allow them.
• Keep the curly braces { and } and square brackets [ and ] balanced.
• Do not delete the commas at the end of lines, unless it is the last item in a block.

If the JSON is broken, the site will show an error. Use a JSON validator if you are unsure.

Where Images Go

• For local images: put them in public/img/ and reference them as /img/filename.ext
• For external images: paste the full URL starting with https://

Save and Preview

1. Save the file
2. If the dev server is running, the browser will reload automatically
3. If not, run:

npm run dev

4. Open http://localhost:4321 to see your changes

Common Mistakes

Mistake	What Happens	Fix
Missing comma	JSON error, site breaks	Add the comma
Extra comma	JSON error, site breaks	Remove the last comma in the block
Single quotes	JSON error, site breaks	Use double quotes
Wrong image path	Broken image	Check the file exists in public/img/
Missing closing bracket	JSON error, site breaks	Count your { and }