Customization

Change the product name

Edit productName in assets/js/config.js, then use your editor’s find-and-replace feature to replace visible occurrences of “Nexora” across HTML files. Search for the comments marked CUSTOMIZE: Product name.

Replace the logo

The text logo uses a .brand link with a square “N” mark. Replace the inner markup consistently in the header, footer and authentication pages. Keep the link’s accessible text or add an aria-label. Replace assets/favicons/favicon.svg and update favicon paths only when the filename changes.

Edit colors

Change the core CSS custom properties in assets/css/base.css. The most important are --primary, --primary-2, --accent, --bg, --surface, --text and --line. Homepage-specific overrides are grouped in themes.css. Check both themes after every major color change.

:root {
  --primary: #3157f6;     /* CUSTOMIZE: Primary color */
  --accent: #20c997;
  --bg: #f8fafc;
  --text: #111827;
}

Edit typography

Nexora uses system fonts and does not require a remote font request. Change --font-sans and --font-mono. When adding a font, confirm its redistribution license, include only required weights, use font-display: swap, and preserve the fallback stack.

Edit page content

Every page is readable HTML. Search for its hero <h1>, section headings and cards. Keep one clear page heading, preserve labels associated with inputs, and do not remove explanatory text that identifies fictional data or frontend-only controls.

Edit product-interface mockups

Interface demonstrations are ordinary HTML and SVG. Shared classes live in product-ui.css. Replace names, numbers and rows directly in the relevant page. Keep fictional values visibly labeled where they could be mistaken for live data.

Edit pricing and billing labels

Search for CUSTOMIZE: Pricing and the data-month/data-year spans. Keep both values in each plan. Billing labels can be changed in the HTML buttons and in NEXORA_CONFIG.pricing. Pricing remains visual until connected to a real commerce system.

Add a feature, solution or use case

1. Duplicate the closest card or section.
2. Replace the icon, heading, description and destination link.
3. Update the overview and detail pages together.
4. Test the link from desktop and mobile navigation.

Add an integration

Duplicate an integration card inside the element with data-filter-container. Give it a supported category in data-filter. The local JavaScript search reads visible text; no extra index is needed.

Add a customer story

Duplicate a customer card and adapt customer-story.html. Clearly label all fictional company names, quotations and metrics. Replace every metric before using the story as a real case study.

Add a blog article

Duplicate blog-article.html, create a unique title, meta description, canonical URL, article heading and publication details, then add the card to blog.html. Update the Article structured-data block.

Add a changelog entry

Duplicate a timeline article in changelog.html. Include version, release date, category labels, added items, improvements and fixes. Keep release history factual for your product.

Social links and contact details

Change shared placeholders in config.js, then replace visible email addresses and social anchors in the HTML. Static config values do not automatically rewrite every visible HTML phrase, so complete a project-wide search before release.

Animations, loader and themes

Set enableAnimations, enableLoader or enableDarkMode in config.js. Reduced-motion preferences always take priority. The initial theme follows the operating system and a manual preference is stored locally.

Edit charts and fictional data

Line and area charts use SVG path data; bars and rings use CSS. Change accessible aria-label summaries whenever the visual data changes. Do not present static values as live feeds.

Cookie banner

Set enableCookieBanner in config.js. The interface stores only the visitor’s preference. No analytics or marketing scripts are included. Add scripts only after implementing a consent method appropriate to the project and jurisdiction.

Replace artwork and optimize media

SVG artwork is in assets/artwork, interface assets in assets/product-ui, and social artwork in assets/social-previews. Compress raster files, declare width and height, use modern formats, and lazy-load images below the fold.