Static site for Solvero, with a homepage, three core service pages and a blog section. The site uses the supplied Rubix cube identity, with consistent typography, section layouts, hero particles and technology expertise section.
Use Node.js 20.19 or newer and Python 3.
- Run
npm cito install the pinned development tools. - Run
npm run buildafter editing HTML or utility classes to regenerate the committed stylesheet and refresh the content-based Tailwind and brand stylesheet versions in page links. This prevents cached CSS from hiding updated styles. - Run
npm testto check search metadata, structured-data references, links and enquiry handling. All form requests in these tests are mocked. - Run
npm run previewand openhttp://127.0.0.1:8080/to review the site.
npm run images regenerates the optimised images from their original files, including the four approved non-personal homepage photographs. Their PNG masters and generation prompts are retained in images/photography/source/; responsive WebP variants and dimensions are recorded in images/photography/manifest.json. About uses 600/900/1200px variants; expertise cards use 480/768/960/1200px variants. Photographs use WebP quality 84, fit without cropping and load lazily. The previous homepage illustrations and their masters remain preserved in images/illustrations/. The original stock files and their optimised versions remain in place. The separate verified backup is documented in images/illustrations/README.md. The original shared hero background remains in use to preserve its appearance. assets/particles.js is the original particles.js 2.0.0 library; its MIT licence is included alongside it.
images/brand/rubix/solvero-header.svg uses the supplied Rubix cube and original outlined wordmark, without a slogan. Header and footer SVGs retain a 14-unit horizontal gap beside the 60-unit-wide cube, based on images/Solvero Main Logo.png from commit 74ce897 (15 June 2025). The header wordmark is enlarged and vertically centred for a rendered height of 20px beside the 44px cube. The colour and white header assets use a 282.11127484 × 66.2010526 viewBox; footer assets retain their 250.78 × 66.2010526 viewBox and original proportions. solvero-footer-white.svg retains “Technology, Solved.” beneath the wordmark, with a 12-unit vertical gap and the combined lettering block centred beside the cube with a small optical adjustment. The slogan appears only in the footer artwork. All seventeen canonical pages use this identity and the matching supplied Rubix favicon set. The build versions header and footer image URLs by their SVG contents so browsers load artwork changes. It also exports solvero-publisher.svg from the current header artwork at 1024px wide (currently 241px high), and uses that file’s actual dimensions in the shared Organization schema. This keeps the search logo above Google’s minimum dimensions without changing the displayed header or footer. solvero-social.png supplies general page sharing; articles retain their topic illustrations.
styles/brand.css uses the Rubix colours #1985CE, #1DC5FF and #35B0ED, with #136AA1 as the darker supporting shade. Hero panels blend #136AA1 into #1985CE, using the same gradient and translucent-overlay approach as the S-logo version. Desktop heroes and supporting sections show the existing shared background photograph, and the homepage retains its particle lines. Primary buttons use #1985CE, darken to #136AA1 on hover, and inverse white buttons use matching primary-blue text. Palette stylesheet links are content-versioned during the build. The S-symbol assets remain preserved under images/brand/; the older cube PNG/WebP files remain in images/ and images/optimised/.
The site header is 69px high, matching the measured scrolled Bitwarden header (68px navigation plus a 1px border). The cube is 44px high and the wordmark is 20px high, with the wider cube-to-wordmark separation retained. Desktop menu links and the contact action have 12px top and bottom padding. --site-header-height in styles/brand.css also controls the mobile menu position, available menu height and article sidebar clearance. The header keeps its existing hide-on-downward-scroll behaviour; the footer logo size is unchanged.
At desktop widths of 1024px and above, the navigation and homepage hero together occupy at least 85% of the initial viewport. The hero uses min-height: calc(85svh - var(--site-header-height)) with vertically centred content and equal top/bottom padding. It grows when content needs more space. Smaller screens retain their existing content-driven hero height and padding.
Homepage motion is defined in assets/homepage-motion.js, with responsive experience layouts in styles/homepage.css; the build versions both assets by content. Service cards start when their tops reach 70% of the viewport, rise 32px over 700ms and stagger by 200ms on shared rows; stacked cards enter independently. About and experience blocks reveal with scrolling over 25% of the viewport, generally from 80% to 55% of its height, with photographs and text introduced separately. Progress stays revealed when scrolling back. Experience uses three alternating photograph/text rows on desktop with 80px between rows, stacking image before text below 1024px. Technology icons and their labels rise 24px and fade in over 600ms, staggered by 90ms from left to right within each row when it reaches 75% of viewport height. The hero, navigation and contact form remain static. Reduced motion uses brief 120ms opacity-only entrances without scrubbing or staggering. Focus, anchor navigation and preference changes settle relevant content immediately. Content remains readable without JavaScript and in print.
The homepage presents the same sixteen technologies in a responsive grid: eight columns on desktop and four on smaller screens. Monochrome SVGs use trimmed artwork bounds and individually tuned optical sizes, with visible names and a one-time wave entrance as each row comes into view. Source files, pinned download URLs, licences and sizing details are retained in images/technology/README.md and images/technology/manifest.json. The original coloured raster logos remain unchanged. Update each logo's image dimensions and sizing variables together with its manifest entry when adjusting the optical balance.
The committed HTML, CSS, JavaScript, images, robots.txt and sitemap.xml can be served as static files. Node is a development dependency, not a production runtime. The canonical site is https://solvero.co.za/; deployment must serve the three canonical service pages and the legacy redirect pages defined in _content/service-redirects.json.
The offer is business improvement and solution delivery, for English-speaking businesses internationally. The three core offers are Business Process Improvement, New Business Capabilities, and Delivery Team Effectiveness. They address improving existing operations, putting a new capability into use, and helping an existing delivery team coordinate and complete work. Review, analysis, planning, process redesign, integration, automation and software delivery are capabilities applied within the relevant engagement. Team effectiveness covers workflows, communication, information flow, task visibility and delivery practices, as well as requirements and acceptance. Copy connects client benefits to process investigation, practical redesign, implementation, testing and handover. About introduces Solvero’s identity, mission, ethos and origins, with almost two decades of technology and enterprise experience. Financial services experience identifies corporate and institutional credit, credit-risk and economic capital reporting, and insurance policy administration as specific disciplines. The integration section covers disparate applications, synchronisation, Single View of Party and Master Client Record initiatives. Business and systems analysis explains process models, business rules, system requirements and a shared design for business and technical teams. Case-study results, testimonials, prices and turnaround promises require confirmed source material before publication. Article introductions and topic-specific service conclusions connect each guide to this positioning while preserving the technical examples and worksheets.
The blog index is at /blog/, with eleven articles, twenty CSV worksheets and a separate author profile at /authors/jateen-narsai/. Jateen Narsai is the author; Solvero is the publisher. All seventeen canonical pages are indexable and included in the sitemap. Examples and worked figures are explicitly illustrative, rather than claimed client results.
The blog index lists articles by publication date, newest first, with same-day articles retaining their editorial order. Cards place one labelled date above the topic and title: Updated uses a later modification date; otherwise Published uses the original date. Each card uses its article's illustration, with dedicated 480px and 960px WebP thumbnails registered in the article metadata's thumbnail field. Run node tools/optimise-blog-thumbnails.cjs after adding or changing these thumbnails, then run the normal build. The originals used inside articles remain unchanged. The responsive index uses three columns on desktop, two on tablet and one on mobile. Each card is one accessible article link with a blue heading and a Read more footer. On hover or keyboard focus, a blue layer reveals an even 3px border outwards from behind the stationary card, while Read more and its arrow change from charcoal to deep brand blue. The arrow also moves subtly right. The outer layer reverses and fades on exit; reduced-motion settings show the expanded border and colour change immediately without movement. Topic buttons filter exact article sections, announce result counts and selected states, and preserve newest-first order. All restores the complete archive. All cards and links remain present when JavaScript is disabled, with inactive filter controls hidden; no external search service is required.
Articles use a white editorial header with a Solvero Blog return link, topic, title, author and one labelled date. Updated shows a later material revision; otherwise Published shows the original publication date. The date label and month name use normal capitalisation, while both dates remain in structured data. The compact lead illustration sits beside the heading on desktop, capped at 384px wide, and below it on mobile, capped at 320px, without a visible caption. Author biographies appear on the linked author profile. Titles are 40px on desktop and 32px on mobile. Desktop article headers have 40px top padding and 24px bottom padding; the body adds 32px top padding for a 56px gap below the author/date row. The heading aligns to the bottom of the desktop header grid so the gap stays consistent beside taller illustrations. Mobile headers retain 32px vertical padding. tools/editorial-layout.py supplies the shared article structure for public pages and the Bank Zero draft preview; styles/editorial.css controls its presentation. Section headings have unique identifiers from tools/content-renderer.py. An On this page sidebar links to the sections on desktop with 15px links. The sticky panel leaves a 24px gap below the site header and scrolls within the remaining viewport; mobile readers get a native collapsible section list before the body. The versioned assets/article-navigation.js marks the section at the reading position with aria-current="location"; hover and keyboard focus have independent visual highlights. Links remain usable without JavaScript. Article and author-profile headers link to the blog index, while the site logo links home. Their structured data describes the pages without a breadcrumb trail. The blog index keeps its compact, centred header: “Solvero Blog” above “Ideas, insights and updates on business and technology.” Its introduction uses 24px vertical padding, with topic filters directly above the cards.
Article image sources use a Markdown image followed by a single italic caption paragraph. Header captions remain in the source and image records; only section-image captions appear on article pages. Article ImageObject descriptions use the lead image’s alt text, with no caption property for the uncaptioned header illustration. Register each image's root-relative path, width and height in the article metadata's images list. The image and image_alt fields select its absolute social-sharing and structured-data image. Every article has topic-specific hand-drawn explainers: four each for the first ten guides and seven for the AI operating model article (47 in total). The AI article uses a compact overview as its lead and thumbnail, with all six detailed explainers retained in the body. The eleven lead illustrations load eagerly with high priority; section illustrations load lazily. The twenty added illustrations use compressed 600/960/1536px WebP variants, responsive sizing, intrinsic dimensions, descriptive alt text and captions. Selected image details and generation prompts are retained in images/blog/illustration-manifest.json and images/blog/illustration-prompts.json. Full PNG masters remain in the separate reviewed image proposal bundle; unused revisions are excluded from publication.
Homepage service cards use an explanatory cardDescription and exactly three concrete examples in cardPoints per offer, rendered as accessible lists with decorative ticks. Examples name workflows, tools, integrations or delivery assets clients can engage us to deliver. Keep their benefit-led headings and dedicated service links. The icon field points to the supplied local SVG and iconSize sets its optical size. Card layout shares five row tracks to align dividers while letting explanations wrap; each example list ends with a separate “and more” paragraph. The three service-card links and the About CTA are centred. The engagement copy explains how we guide clients through challenges and objectives, including clients working without a team. The homepage separates the service choices, company background, experience examples and engagement steps under “How we work”; contact copy welcomes a goal as well as a known problem. About pairs the introduction and mission with the workspace image, then gives ethos and background separate columns at desktop widths and a stacked reading order below 1024px. Its anchor has a navigation-height scroll offset. Homepage metadata and its WebPage description cover all three offers. The shared Organization description uses the About introduction to describe the consultancy. The tick points illustrate work within each offer and do not introduce additional offers into schema. The homepage hero introduces the outcome of less effort and fewer delays, summarises process and technology delivery, and invites visitors to discuss their project. Service pages name relevant business analysis techniques, systems analysis and solution architecture alongside outcomes and deliverables. Organization links to the existing three-offer catalogue through hasOfferCatalog. Past-project examples remain deferred until their details are confirmed.
Core offer content and metadata live in _content/services.json; _templates/service.html preserves the existing service-page shell. The build generates all three service pages, the three homepage cards and a matching homepage OfferCatalog and Service graph from those records. Benefit-led card headings and link text are defined alongside each service's scope, examples, delivery approach and page-specific closing CTA. Cards, article references and related-service links use the canonical URLs directly:
/services/business-operations-improvement//services/new-business-capabilities//services/delivery-team-effectiveness/
Legacy service paths are retained as immediate, zero-second HTML meta-refresh redirects, with the destination canonical URL and an accessible link. _content/service-redirects.json maps Business Improvement Review, Process & Workflow Improvement and Workflow Automation to Business Process Improvement; Solution Design & Delivery maps to New Business Capabilities. Redirects go directly to an active service and are excluded from the 17-page sitemap. GitHub Pages serves static files, so these are not HTTP 301 responses. The build validates their active targets and regenerates them each time. The four original automation examples remain within the operations page; capability planning is included in the capability-delivery page and delivery practices have their own team-effectiveness page.
Edit article Markdown and metadata in _content/blog/, author details in _content/, and the shared blog/author page shell in _templates/editorial.html. Apply the Authentic Writing guidance through docs/article-writing-guide.md before generating the finished pages; its source and rhythm reference are stored in docs/editorial/authentic-writing/. Preserve the reasoning and examples readers need while editing the voice. Run npm run build to regenerate committed pages, sitemap and styles. The owner assigned the eleven existing articles irregularly spaced editorial publication dates from 1–27 October 2026 in their original manuscript order. Both date fields start at that assigned date, so cards and articles show Published. The approved schedule and its provenance are recorded in docs/proposals/2026-10-27-article-date-correction/editorial-schedule.json; date-only assignments use midnight with the Johannesburg offset (+02:00) as a consistent encoding. After this baseline, update dateModified when publishing a substantive revision of an article's explanations, evidence, examples, recommendations or technical content. Retain the date through layout, illustration, author-profile, service-link and promotional closing changes, unpublished editing passes, reversals and rebuilds. Render calendar dates for readers, keep schema and Open Graph dates aligned, and preserve publication-day ordering in the archive. The build uses Python's standard library and the existing Node dependencies.
GitHub Pages serves the committed static output from main at the repository root, with CNAME pointing to solvero.co.za. Build and test locally before publishing; Pages does not run the local content generator.
After deployment, verify the public pages in Search Console and test a real enquiry with the site owner's approval. The automated checks do not establish email delivery, indexing or ranking improvements.
Tailwind 3 preserves the original site's utility behaviour. The October 2026 npm audit reports seven findings in its development dependency tree (five high, two moderate). No Node packages are served to visitors. Resolving these findings requires a separate build-tool update and visual regression check; the current branch does not claim a clean dependency audit.
Analytics setup is in progress. _content/tracking.json holds the GA4 web-stream measurement ID; null keeps tracking markup absent until the actual stream is ready. The build adds versioned local tracking script and consent styles to all canonical pages once configured. Legacy redirect pages remain untracked.
The tracking script runs only on solvero.co.za and www.solvero.co.za. It loads Google only after analytics consent, disables advertising features, records canonical page URLs without query strings or fragments and referrer origins without paths, and accepts only simple campaign identifiers. The footer lets visitors change their choice; withdrawal disables analytics in open tabs and clears this stream's analytics cookies. Choices are remembered for 180 days; GA cookies expire after 90 days.
page_view, contact_click and service_click cover pages and meaningful actions. generate_lead is emitted only after Web3Forms accepts an enquiry; no form fields are included. Disable automatic enhanced measurement in the GA4 stream before activation to avoid duplicate or unfiltered form/link events. Sign-in, terms acceptance, stream creation, Search Console/Bing verification and the free dashboard are tracked in docs/superpowers/plans/2026-10-24-free-analytics-seo.md. Installed code, emitted requests and receipt in GA4 must each be verified separately.
The homepage enquiry panel introduces the form with “We’ll explore the options with you and help shape a practical way forward.” The dropdown asks “What would you like help with?” to identify the enquiry category; the message field asks “Tell us about your project” for the details. Company name is optional; the enquiry-area dropdown is mandatory and includes specific process and technical delivery topics plus Other / General enquiries. Both fields are included in the Web3Forms enquiry payload and excluded from analytics. New categories are enquiry topics within the three existing offers, not additional service pages.