How to edit, test and safely replace the current Reef View website.

1. Preview the redesign

1. Unzip the folder.
2. Double-click index.html for a quick preview.
3. For the best workflow, open the whole folder in Visual Studio Code.
4. Install the optional Live Server extension, right-click index.html and choose Open with Live Server.

2. Tools required

3. Update business details once

Open assets/js/site-config.js. Check the company name, phone, email, address, opening hours, domain and social link.

window.SITE_CONFIG = {
  businessName: "Reef View Construction",
  phoneDisplay: "0800 121 874",
  email: "info@reefviewconstruction.co.nz"
};

4. Edit page content

Open the required HTML file and change only the visible wording between the tags.

<h1>Auckland homes built and transformed with confidence.</h1>

There are separate pages for About, Process, Projects, Ideas, FAQs, Contact and all ten services.

5. Replace or add AI-generated design visuals

1. Use images Reef View owns or has permission to publish.
2. Prepare hero images around 1600 × 1000 pixels and card images around 1200 × 800 pixels.
3. Export as WebP or compressed JPEG.
4. Place them in assets/images/.
5. Update the relevant HTML src and accurate alt description.

<img src="assets/images/new-project.webp"
     alt="Completed Auckland home extension by Reef View Construction">

6. Verify business claims before launch

The draft uses information currently published on the Reef View website, including:

• More than 15 years of industry experience
• Own employed team of builders
• Written fixed-price offer or contract
• Weekly project updates
• Peace of Mind written guarantee
• Qualifications and compliance statements

Confirm each claim, correct the wording and add specific evidence or provider details where appropriate.

7. Make the enquiry form work

The form is ready for Netlify Forms. Deploy to Netlify and submit a test. On another host, connect Formspree, Basin, HubSpot or a secure server-side form. Never put email passwords or secret API keys in the browser JavaScript.

8. Test safely before replacing the current site

1. Back up the complete existing WordPress files and database.
2. Do not change the live domain while editing.
3. Publish this redesign first to a temporary host address or a staging subdomain such as new.reefviewconstruction.co.nz.
4. Test every page, link, image and form on phone, tablet and desktop.
5. Ask the business owner to approve all wording and images.
6. Only then plan the live changeover.

9. Connect the existing domain

You do not need to purchase a new domain if reefviewconstruction.co.nz remains under the company's control.

1. Deploy the new site to the chosen host.
2. Open the host's domain settings and add reefviewconstruction.co.nz and www.reefviewconstruction.co.nz.
3. The host will provide the exact DNS records or nameservers.
4. Update only the required website records at the domain registrar.
5. Do not delete or change MX records, because they control business email.
6. Choose the preferred primary domain and redirect the other version.
7. Wait for DNS verification and HTTPS activation.

10. Keeping WordPress instead

The current Reef View site appears to use WordPress. This package is a separate static website. To keep the WordPress dashboard, rebuild this visual design as a custom WordPress theme or recreate the pages in a builder such as Gutenberg, Elementor or Bricks. That option requires theme/plugin configuration but allows non-technical content editing.

11. Launch checklist

• Back up the current site and database.
• Confirm domain and hosting account access.
• Confirm all business claims and contact details.
• Add recent completed-project photography.
• Obtain permission for projects and testimonials.
• Review privacy, terms and cookie requirements.
• Test the enquiry form and email delivery.
• Preserve or redirect important old page URLs.
• Set up analytics and search-console access.
• Test mobile navigation, performance and accessibility.
• Keep domain and hosting renewal enabled.