Home Page - Complete Customization Guide

The homepage is your most important page. It is located at src/pages/index.js, but all content is controlled by data/Home.json. You do not need to edit React. Just edit the JSON to change text, images, features, and pricing.

Where to Edit

Open the project in VS Code
Open data/Home.json or src/data/Home.json
Edit and save
Check at http://localhost:3000 - it auto-reloads if npm run start is running

Your Home.json has 6 main sections: SEO, Header, Features, Section, Pricing, and Contact.

1. SEO Home Page

At the top of the file, you set the SEO for the homepage. This controls the Google title, description, and social sharing card.

  "title": "New Docusaurus Themes Template",
  "description": "Docusa is complete set for help you develop modern documentation site - Docusaurus project.",
  "url": "/",
  "image": "img/doc.svg",

What to change:

title: Main SEO title for Google (50-60 chars). Example: Docusar - Docusaurus Template for Docs & SaaS
description: Meta description for Google (150-160 chars). Example: Complete Docusaurus template with docs, blog, and SaaS landing. Edit with JSON and Markdown, deploy anywhere.
url: Leave as / for the homepage. This is the route.
image: Open Graph image for Twitter, Facebook, and Discord. When someone shares your homepage, this image appears. Put the image in static/img/ like img/social-card.jpg or img/doc.svg. Recommended size: 1200x630px for the best social preview.

2. Header Area - Hero Section

This is the first thing visitors see - a big title, description, 2 buttons, and an image.

Structure:

  "header": {
    "title": "Your home page header title here..",
    "description": "Header Description for your home page..",
    "intro_text": "Intro text goes here...",
    "button_1": "Text for button 1 here...",
    "button_1_link": "Routes link goes here...",
    "button_2": "Text for button 2 here...",
    "button_2_link": "Router link for button 2 here...",
    "image": "URL CDN or local image for header here..."
  },

Real Implementation:

  "header": {
    "title": "Docusa",
    "description": "Modern and New Documentation Website Themes for Docusaurus Project.",
    "intro_text": "Easy to use, work with JSON data files to update your design and content, markdown is ready for your documentation and blog post article",
    "button_1": "Get Start",
    "button_1_link": "/docs/welcome",
    "button_2": "Download Now",
    "button_2_link": "/order",
    "image": "img/doc.svg"
  },

How to edit each field:

title: Big H1 heading. Keep it short and benefit-focused. Example: Build Docs That Sell, Not Just Inform
description: Subtitle under the title. 1-2 sentences. Example: Modern Docusaurus template for documentation sites that convert visitors to customers
intro_text: Small text above the buttons, like a badge or trust text. Example: No coding needed - edit with JSON & Markdown
button_1: Primary button text (filled color). Example: Get Started
button_1_link: Where button 1 goes. Use an internal route like /docs/welcome or /product
button_2: Secondary button text (outline). Example: View Demo or Download Now
button_2_link: Where button 2 goes. Example: /order or an external link
image: Hero image on the right. Use img/your-image.svg for a local file from static/img/ or a full CDN URL https://.... SVG is recommended for a sharp illustration.

3. Features Area - 6 Feature Cards Grid

This is the grid of features below the header. You can have 3, 6, or 9 features - as many as you want.

Structure:

  "features": {
    "title": "Your title for features area here...",
    "description": "Description for your features area..."
  },
  "feature_list": [
    {
      "icon": "URL or CDN Image for features 1 here...",
      "title": "Title for your features 1 here...",
      "content": "Write your content features here..."
    }
  ]

How to add a new feature: Copy-paste one object and edit it:

    {
      "icon": "img/json.svg",
      "title": "JSON",
      "content": "Full JSON data support for ease of customizing your project."
    },

Image usage:

Local image: Upload to static/img/ then use img/myimage.png or img/myimage.svg
CDN image: Use a full URL: https://res.cloudinary.com/.../image.png

Complete Implementation with 6 Features:

  "features": {
    "title": "Docusa Features",
    "description": "Cool and complete Docusa themes features for your docusaurus project."
  },
  "feature_list": [
    {
      "icon": "img/react.svg",
      "title": "React",
      "content": "Using React technology, React is a modern and popular website technology."
    },
    {
      "icon": "img/json.svg",
      "title": "JSON",
      "content": "Full JSON data support for ease of customizing your project."
    },
    {
      "icon": "img/markdown.svg",
      "title": "Markdown",
      "content": "MDX support is more flexible for your content, and with markdown - writing becomes faster."
    },
    {
      "icon": "img/design.svg",
      "title": "Design UI",
      "content": "Unique and modern design for an attractive appearance on your site. Supports Dark and Light Mode"
    },
    {
      "icon": "img/widget.svg",
      "title": "Widget",
      "content": "The widget section structure makes it easy for developers to make quick adjustments."
    },
    {
      "icon": "img/config.svg",
      "title": "Config",
      "content": "Docusaurus' default configuration makes it easy for you to set up your site."
    }
  ],

4. Section Area - Checklist Section

This is the middle section with an image on one side and a checklist on the other. Good for showing why your product is better.

  "section": {
    "title": "Why Docusa",
    "description": "Docusa is a multi-purpose docusaurus theme, you can use it for startups, hosting, agencies, apps, developers and more.",
    "image": "img/dev.svg",
    "intro": "It's easy to work with docusa project.",
    "intro_text": "Docusa projects are designed for user convenience, no hardcoding, you only need to work with markdown and JSON files to update or change the design, these are some of the advantages of using Docusa projects.",
    "list": [
      { "text": "Static Page" },
      { "text": "Docs Page" },
      { "text": "Blog Page" },
      { "text": "Auto SEO" },
      { "text": "Dark Mode" }
    ]
  }

How to edit:

title: Section heading. Example: Why Choose Docusar
description: Short intro under the title
image: Illustration on the left or right. Use img/dev.svg or your own from static/img/
intro: Small bold text above the checklist
intro_text: Paragraph explaining the benefits
list: Array of checklist items. Each item is { "text": "Feature Name" }. To add a new checklist item, copy { "text": "New Item" }, and paste it.

5. Pricing and Plan Area

This is the pricing section with 3 cards. You can change the price, title, and features for each plan.

  "plan": {
    "title": "Select Your Plan",
    "description": "Choose Docusa services according to your needs, for theme creation, docusa projects or custom projects."
  },
  "basic_plan": {
    "title": "Themes",
    "icon": "img/basic.svg",
    "currency": "$",
    "price": "75",
    "link": "/",
    "features": [
      { "text": "Docusa theme to help build modern documentation sites" },
      { "text": "Includes Documentation to help you work with Docusa" }
    ]
  },

Structure for each plan:

title: Plan name (e.g., Themes, CMS, Custom or Basic, Pro, Enterprise)
icon: Icon image for the plan card. Use img/basic.svg, img/standard.svg, img/pro.svg or your own
currency: Currency symbol: $, €, £, Rp
price: Number only, without currency. Example: 75, 99, 199
link: Where the Buy button goes. Example: /order or a Gumroad link https://yourname.gumroad.com/l/product
features: List of bullet points for what is included in the plan. Add new ones by copy-pasting { "text": "New feature" },

You have 3 plans: basic_plan, standard_plan, pro_plan. You can rename the titles but keep the keys.

6. Contact Area - Bottom CTA

The last section of the homepage - a Call to Action to the contact page.

  "contact": {
    "title": "Contact Docusa Dev",
    "description": "If you Need Help or Information, you can contact our team developer.",
    "button": "Contact Us",
    "link": "/contact"
  }

How to edit:

title: CTA heading. Example: Ready to Build Your Docs? or Need Custom Help?
description: 1-2 sentences under the title
button: Button text. Example: Contact Us or Get in Touch
link: Button link - usually /contact

After editing, save the JSON and validate it at https://jsonlint.com if the page shows blank. A missing comma is the most common error.

Where to Edit​

1. SEO Home Page​

2. Header Area - Hero Section​

3. Features Area - 6 Feature Cards Grid​

4. Section Area - Checklist Section​

5. Pricing and Plan Area​

6. Contact Area - Bottom CTA​