Skip to main content

About Page - Complete Customization Guide

The About page is located at src/pages/about.js, but all its design and content is controlled by data/About.json. You do not need to edit React code. Just edit the JSON file to change everything on the About page.

Where to Edit​

  1. Open your project in VS Code
  2. Go to the folder data/ or src/data/ (depends on your setup)
  3. Open About.json
  4. Edit it with your code editor and save
  5. Run npm run start and open http://localhost:3000/about to see the changes

This JSON file is divided into 5 main sections: SEO, Header, Intro, Section 1, Section 2, and Section 3.

1. SEO Config​

At the top of About.json, you will find the SEO settings. This controls how your About page appears on Google and social media.

  "title": "About Docusa - New Docusaurus Themes",
  "description": "Docusa is a new documentation website for your docusaurus project - Modern and New Documentation Website Themes for Docusaurus Project.",
  "url": "/about",
  "image": "img/docs.svg",

What to change:

  • title: Browser tab title and SEO title. Keep it under 60 characters. Example: About Docusar - Modern Docs Template
  • description: Meta description for Google. Keep it 150-160 characters. This shows under your link in Google search. Example: Learn more about Docusar - a modern Docusaurus template for docs, blog, and SaaS landing pages
  • url: The route of this page. Leave it as /about. Do not change it unless you change the filename in pages/about.js
  • image: Social card image for Twitter, Facebook, and Discord sharing. When someone shares your About page, this image appears. Put the image in the static/img/ folder and set the path as img/your-image.svg or img/about-cover.png

2. Header Area​

This is the top hero section of the About page with the title, description, and image on the left or right.

  "header": {
    "title": "About Docusa",
    "description": "Modern and New Documentation Website Themes for Docusaurus Project.",
    "image": "img/docs.svg"
  },

How to edit:

  • title: Main H1 heading. Example: About Our Product
  • description: Paragraph under the title. Explain who you are in 2-3 sentences. Keep it clear.
  • image: Image on the right side. Use SVG for the best quality. Put the file in static/img/ and reference it as img/your-image.svg. Recommended size: 500x400px.

3. Intro Area​

This is the centered title section that appears after the header. Good for a short mission statement.

  "intro": {
    "title": "Make it easy with Docusa",
    "description": "Docusa is a project developed to make it easier for users to work, with the various features available making you more comfortable using docuna in developing documentation sites with modern designs.."
  }

How to edit:

  • title: Centered heading. Keep it short: 4-6 words. Example: Why We Built Docusar
  • description: A longer description centered under the intro. You can write 2-3 sentences about your mission or values.

4. Section 1 Area - JSON Feature​

The first feature section with an image and text side by side.

  "section_1": {
    "title": "JSON data makes everything easy",
    "description": "There's no need to hardcode to update designs or write static page content, this is because Docusa uses JSON to make it easy for you to make changes quickly, and is easy to develop for integration with Headless CMS as your backend.",
    "image": "img/colabs.svg"
  }

How to edit:

  • title: Feature title. Example: No Hardcoding Needed
  • description: Explain the benefit. 2-3 sentences max.
  • image: Illustration for this section. Use an image that matches the feature. Put it in static/img/

This section layout is image left, text right (or vice versa depending on CSS). You can change the layout in src/components/About/Section1/styles.module.css.

5. Section 2 Area - Markdown Feature​

The second feature section. Usually the layout is reversed (text left, image right) for visual variety.

  "section_2": {
    "title": "Write fast with Markdown or MDX",
    "description": "Using markdown makes writing easier and faster, for updating blog and documentation pages, MDX support makes it easier for you to customize according to your needs. Docusaurus also makes it easy for you to grouping based on your documentation categories, to make it easier for readers or web visitor to get clearer and more complete information on your documentation site.",
    "image": "img/clouddoc.svg"
  }

How to edit: Same as Section 1. Change the title, description, and image to explain your second main feature.

6. Section 3 Area - Technology Feature​

The last section with an extra text field for a CTA.

  "section_3": {
    "title": "The React Technology",
    "description": "By default, the Docusa theme is developed in docusaurus, and runs on modern website technology with React. React is a popular frontend that is widely used in the world, this is because React has complete features and good SEO capabilities.",
    "text": "So what are you waiting for?? Get started now with the Docusa theme, to help you develop and build modern website documentation.",
    "image": "img/documentationweb.svg"
  }

How to edit:

  • title: Third feature title
  • description: Main explanation
  • text: Extra paragraph - usually used for a closing CTA or bold statement. In the component, this renders with a slightly bolder style.
  • image: Last illustration

After Editing​

  1. Save About.json
  2. If the dev server is running, the page auto-reloads. If not, run:
npm run start
  1. Go to http://localhost:3000/about and check all sections.

Tips:

  • Keep all images in static/img/ and use SVG for illustrations (smaller and sharp)
  • Do not use too-long descriptions - 2-3 sentences per section is ideal for a landing page
  • Test in both light and dark mode (toggle in the navbar)
  • If the page shows blank, check the JSON syntax: make sure commas are correct and no quotes are missing