🏡Home Page Customization

This guide helps you update images and text content on the homepage. The structure is divided by sections as per the HTML file.

📂 File Structure

/index.html                <-- Main home page
/assets/
  └── css/
      └── style.css        <-- Main stylesheet
  └── js/
      ├── index.js         <-- Home-specific JS logic
      └── js.js            <-- General JS scripts
  └── image/               <-- All images organized per section
/header.html               <-- Reusable header partial
/footer.html               <-- Reusable footer partial

⚙️Dynamic Includes: Header & Footer

The home page dynamically loads the header and footer via JavaScript:

JavaScript Loader (Located at end of index.html)

function loadHTML(containerId, file) {
    fetch(file)
        .then(response => response.text())
        .then(data => {
            const container = document.getElementById(containerId);
            if (container) {
                container.innerHTML = data;
            } else {
                console.error(`Element with id '${containerId}' not found.`);
            }
        })
        .catch(error => console.error('Error loading file:', error));
}

loadHTML('header', 'header.html');
loadHTML('footer', 'footer.html');

✅ To customize header/footer, edit the content in header.html or footer.html.

---

🧱 Page Sections Overview

🟩 Section 1 – Hero Banner

✏️ Content to Update:

• Main Title: Online Invoice Generator Edit in: <h1 class="section-1-heading">

• Description: Paragraph below the heading Edit in: <p class="section-1-heading-p">

• CTA Button Text/Link:

  • Text: Create Free Invoice Now

  • Edit in: <button class="btn section-1-btn" onclick="...">

• Trusted Text:

  • Edit in: <p class="section-1-true-p-1"> and <p class="section-1-true-p-2">

• Image:

  • Path: assets/image/section 1/invoice-image.png

  • Edit in: <img class="section-1-invoice-1" src="..." alt="">

---

🟦 Section 2 – Trusted Logos

✏️ Content to Update:

Text: "Trusted by forward-thinking companies..."

• Edit in: <p class="section-2-p">

Logos:

• Edit Paths in: <img src="assets/image/section 2/logo-*.svg" alt="logo">

---

🟨 Section 3 – Invoice Branding

✏️ Content to Update:

• Title & Description: Change text inside <h2> and <p>

• Icons: Replace the image files like section-3-icon-1.svg in the folder.

• Right Side Image: Replace section-3-right-image.svg

---

🟧 Section 4 – Invoice Generator CTA

✏️ Content to Update:

• Background Image: Change the file section-4-bg.png or update the path inside style="background-image: url(...);"

• Title and Text: Inside <h2> and <p>

---

🟪 Section 5 All-in-One Section

✏️ Content to Update:

• Just update the text inside the <h2> and <p> tags.

---

🟥 Section 6 – Features

✏️ Content to Update:

• Text: Edit <h2> and <p> in each part.

• Images: Replace part-1.svg, part-2.svg, etc. inside assets/image/section 6/

---

🟫 Section 7 – Benefits

✏️ Content to Update:

• Text: Edit <h2> and <p>

• List Items: Update <p class="sec-7-sys-*"> lines.

• Image: Replace left-side.png in the folder.

---

🎨 How to Replace an Image

1. Prepare your new image (optimize for web: JPG/PNG/SVG).

2. Replace the existing file in the correct folder inside assets/image/section X/

3. Or rename your new image and update the <img src="..."> accordingly in the HTML.

---

💬 How to Change Text Content

Find the relevant section using the class name (e.g., .section-1-heading-p) and update the text between the tags <h1>, <p>, etc.

---

💡 Tips

• Always back up original HTML and images before making changes.

• Use compressed images to keep page load fast.

• Use meaningful alt tags for images (alt="invoice preview").

---