feat: homepage rework from @kristopherray #85
Conversation
✅ Deploy Preview for masterpoint ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning Rate limit exceeded@Gowiem has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 20 minutes and 19 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
WalkthroughHomepage content and templates updated; three new home sections and three step metadata files added; CSS extended with many new components and visual styles; services shortcode changed to source Changes
Sequence Diagram(s)sequenceDiagram
participant Browser as Client
participant Index as layouts/index.html
participant Shortcode as layouts/shortcodes/services.html
participant Content as content/*
Note over Index,Shortcode: Homepage rendering with shortcode sourcing "steps"
Browser->>Index: GET /
Index->>Content: load page front-matter (banner fields, sections)
Index->>Shortcode: invoke services shortcode during render
Shortcode->>Content: query content where type == "steps"
Shortcode->>Shortcode: build 3-column tiles (icon, home_title/home_description)
Index->>Browser: emit banner (title → tagline → CTA anchors) and page markup
Shortcode->>Browser: emit step tiles into page
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (5)
static/img/bg_audit_home.pngis excluded by!**/*.pngstatic/img/bg_make_infrastructure.pngis excluded by!**/*.pngstatic/img/noun-cycle-7222105.svgis excluded by!**/*.svgstatic/img/noun-developer-7187679.svgis excluded by!**/*.svgstatic/img/noun-reduction-7894266.svgis excluded by!**/*.svg
📒 Files selected for processing (14)
assets/css/custom.scss(14 hunks)content/_index.md(1 hunks)content/sections/home-efficient-platforms.md(1 hunks)content/sections/home-join-clients.md(1 hunks)content/sections/home-make-infrastructure.md(1 hunks)content/sections/home-our-word.md(1 hunks)content/sections/home-specialized-services.md(1 hunks)content/sections/home-turn-chaos.md(1 hunks)content/sections/home-what-is-masterpoint.md(1 hunks)content/steps/audit.md(1 hunks)content/steps/innovate.md(1 hunks)content/steps/operate.md(1 hunks)layouts/index.html(4 hunks)layouts/shortcodes/services.html(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
content/**/*.md
📄 CodeRabbit inference engine (CLAUDE.md)
content/**/*.md: Place all site content in Markdown files under /content/
Use absolute URLs in content (paths should start with "/", e.g., /blog/ not blog/)
Reference images in content using the /img/ path (which maps to /static/img/)
Use front matter draft: true to hide in-progress content from production
Use provided Hugo shortcodes (button, buttonout, form, testimonials, faqs, team, services, process, supports, client-logos) in content instead of duplicating HTML
Files:
content/sections/home-efficient-platforms.mdcontent/steps/operate.mdcontent/steps/innovate.mdcontent/sections/home-make-infrastructure.mdcontent/sections/home-what-is-masterpoint.mdcontent/sections/home-specialized-services.mdcontent/_index.mdcontent/sections/home-turn-chaos.mdcontent/sections/home-our-word.mdcontent/steps/audit.mdcontent/sections/home-join-clients.md
🧠 Learnings (3)
📚 Learning: 2025-08-11T18:01:10.378Z
Learnt from: westonplatter
PR: masterpointio/masterpoint.io#73
File: content/blog/ai-meets-tf-prompt-strategies-for-test-generation.md:2-3
Timestamp: 2025-08-11T18:01:10.378Z
Learning: For the masterpointio/masterpoint.io repository, blog post visibility is controlled by the publish date rather than the draft flag in the front matter. The draft flag can be set to false even for unpublished posts, as the publish date determines when content becomes visible.
Applied to files:
content/sections/home-what-is-masterpoint.md
📚 Learning: 2025-09-19T19:21:07.260Z
Learnt from: CR
PR: masterpointio/masterpoint.io#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-19T19:21:07.260Z
Learning: Applies to content/**/*.md : Use front matter draft: true to hide in-progress content from production
Applied to files:
content/sections/home-what-is-masterpoint.mdcontent/sections/home-specialized-services.md
📚 Learning: 2025-09-19T19:21:07.260Z
Learnt from: CR
PR: masterpointio/masterpoint.io#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-19T19:21:07.260Z
Learning: Applies to assets/css/style.scss : Place custom styles in assets/css/style.scss (requires Hugo Extended for SCSS compilation)
Applied to files:
assets/css/custom.scss
🪛 GitHub Check: Trunk Check
content/sections/home-efficient-platforms.md
[notice] 21-21: markdownlint(MD045)
[new] Images should have alternate text (alt text)
[notice] 30-30: markdownlint(MD045)
[new] Images should have alternate text (alt text)
[notice] 39-39: markdownlint(MD045)
[new] Images should have alternate text (alt text)
[failure] 1-1: prettier
Incorrect formatting, autoformat by running 'trunk fmt'
content/steps/operate.md
[failure] 1-1: prettier
Incorrect formatting, autoformat by running 'trunk fmt'
content/steps/innovate.md
[failure] 1-1: prettier
Incorrect formatting, autoformat by running 'trunk fmt'
content/sections/home-make-infrastructure.md
[failure] 1-1: prettier
Incorrect formatting, autoformat by running 'trunk fmt'
content/sections/home-turn-chaos.md
[failure] 1-1: prettier
Incorrect formatting, autoformat by running 'trunk fmt'
content/steps/audit.md
[failure] 1-1: prettier
Incorrect formatting, autoformat by running 'trunk fmt'
🪛 LanguageTool
content/steps/operate.md
[grammar] ~1-~1: Hier könnte ein Fehler sein.
Context: --- title: Platform Engineering as a Service title: Operate description: >- Learn proven workflows and skills, empowering your engineers to confidently scale and own your infra going forward. weight: 3 icon: /img/services/icon_engineering.svg ---
(QB_NEW_DE)
content/steps/innovate.md
[grammar] ~1-~1: Hier könnte ein Fehler sein.
Context: --- title: Innovate description: >- Our team tackles the heavy lifting, turning recommendations into real platform improvements. weight: 2 icon: /img/services/icon_masterpoint.svg ---
(QB_NEW_DE)
content/steps/audit.md
[grammar] ~1-~1: Hier könnte ein Fehler sein.
Context: --- title: Audit description: >- Uncover the inefficiencies in your platform and get practical recommendations to fix them. weight: 1 icon: /img/services/icon_assessment.svg ---
(QB_NEW_DE)
🪛 markdownlint-cli2 (0.18.1)
content/sections/home-efficient-platforms.md
21-21: Images should have alternate text (alt text)
(MD045, no-alt-text)
30-30: Images should have alternate text (alt text)
(MD045, no-alt-text)
39-39: Images should have alternate text (alt text)
(MD045, no-alt-text)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - masterpoint
- GitHub Check: Header rules - masterpoint
- GitHub Check: Pages changed - masterpoint
🔇 Additional comments (17)
content/sections/home-specialized-services.md (1)
1-19: Verify draft status is intentional.Line 8 marks this entire "Get support at every level" section as draft, which will hide it from the production homepage. Confirm this is intentional—is this section temporarily disabled during the rework, or permanently removed from the new design?
content/sections/home-what-is-masterpoint.md (1)
1-18: Verify draft status for core "who we are" section.Line 8 marks the "What is Masterpoint?" section as draft, which will hide this foundational company introduction from the production homepage. This appears to be core content—confirm this is intentional and not an accidental suppression during the rework.
content/sections/home-our-word.md (1)
1-14: LGTM.Weight adjustment is consistent with the homepage section reordering strategy. Shortcode usage is appropriate.
content/steps/innovate.md (1)
1-7: Front matter structure is correct.The step definition follows Hugo conventions and image path uses the correct absolute URL format per guidelines. Run
trunk fmtto auto-fix the prettier formatting notice.content/steps/audit.md (1)
1-7: LGTM.Front matter structure follows Hugo conventions correctly, and image path uses the proper absolute URL format per guidelines. Run
trunk fmtto auto-fix the prettier formatting notice.content/sections/home-join-clients.md (1)
1-17: LGTM.The weight adjustment is consistent with the homepage section reordering, and the updated responsive breakpoint (col-xl-6) and content refinements align well with the design rework objectives. The use of the provided
client-logosshortcode is appropriate per guidelines.content/sections/home-make-infrastructure.md (1)
17-17: Verify placeholder link destination.The CTA button links to
/#, which appears to be a placeholder. Confirm this is the intended destination or update to the actual URL. Based on the coding guidelines, all site links should use absolute URLs starting with "/".layouts/index.html (2)
21-25: ✓ Tagline rendering properly conditional.The bannerTagline block is correctly wrapped in a conditional check for
.Params.banner_tagline, which prevents rendering errors if the field is not present in front matter.
29-35: Button markup refactoring verified; CSS styling is complete and responsive.The
.rowLinksCSS definition correctly implements:
- Flex layout with center alignment for desktop
- Responsive stacking (flex-direction: column) at 575px
- Appropriate button margins across all viewports (1.4em desktop, 0.7em at 767px, 10px at 575px)
The simplified anchor structure is well-supported by the CSS, and all concerns regarding flex layout, responsive behavior, and button styling are properly addressed.
content/_index.md (2)
3-3: HTML in front matter properly sanitized in templates.The banner_title contains inline HTML with a span element and CSS class. Verify that the template renders this with
safeHTMLto prevent XSS issues. ✓ Confirmed in layouts/index.html line 16 uses|safeHTML.
8-11: Verify placeholder link destinations.Both
banner_btn_link: /#andbanner_link: /#are placeholder URLs. Confirm these should be actual destination URLs. Per the coding guidelines, all site links should use absolute paths starting with "/".assets/css/custom.scss (6)
115-161: ✓ Numbered list component well-implemented with CSS counters.The
.numbered-listcomponent uses CSS counters and pseudo-elements effectively. Gradient background on numbers uses consistent color values, responsive sizing is appropriate, and media queries handle smaller screens well.
274-282: ✓ Button gradient styling consistent with theme.The
.btn-gradientmodifier applies the same gradient used across the design (ede497→2ad9c2→d891ce) with appropriate text color for contrast. This maintains visual consistency.
1059-1078: ✓ Responsive button layout with .rowLinks.The
.rowLinksflexbox layout properly handles:
- Desktop: buttons in row with right margin
- Tablet (≤767px): centered with reduced margin
- Mobile (≤575px): stacked vertically with consistent margin
This aligns with button rendering changes in layouts/index.html.
1593-1644: ✓ Audit home tile styling supports complex layout.The
.audit-home-tilecomponent properly handles:
- Layered background with opacity control
- Positioned button at bottom center with transform
- Responsive border-radius and padding
- Proper z-index stacking (content at z-index 9, image behind)
Button positioning with negative margin-bottom creates the overlay effect correctly.
1645-1725: ✓ Platform row and tile styling well-designed.The
.platform-rowand.platform-tilecomponents:
- Use consistent gradient system (3 variants)
- Include decorative ::before line element
- Responsive padding/sizing at all breakpoints
- Proper color contrast for text on gradient backgrounds (#0f393b text on light gradients)
Three gradient variants provide good visual variety.
1759-1782: Verify #make-infrastructure gradient overlay works on mobile.The
#make-infrastructuresection uses a complex gradient overlay (lines 1766-1770) that differs on mobile (lines 1778-1779). On mobile, the overlay changes from horizontal gradient to vertical. Verify this provides adequate contrast for readability on all image sizes.Visually test the section on mobile devices to confirm text remains readable over the background image with the new vertical gradient overlay.
| </div> | ||
| </div> | ||
|
|
||
| {{<services>}} |
There was a problem hiding this comment.
🧩 Analysis chain
Verify {{<services>}} shortcode renders steps correctly.
The shortcode invocation relies on the updated layouts/shortcodes/services.html template, which now filters by "steps" type instead of "services". Ensure that step content files exist at content/steps/ with appropriate frontmatter (Type: steps).
🏁 Script executed:
#!/bin/bash
# Verify that step content files exist and have correct Type
fd 'steps' content/ --type f --extension md | xargs grep -l "^Type.*steps" 2>/dev/null || echo "No steps found"Length of output: 14
I'll investigate further to understand the issue completely.
</script>🏁 Script executed:
#!/bin/bash
# Check 1: Does content/steps directory exist?
echo "=== Checking content/steps directory ==="
if [ -d "content/steps" ]; then
echo "Directory exists"
echo "Files in content/steps:"
ls -la content/steps/ || echo "Cannot list"
else
echo "Directory does not exist"
fi
# Check 2: Search for ANY files with Type: steps anywhere in content
echo ""
echo "=== Searching for Type: steps in all content ==="
rg "^Type.*steps" content/ --type md -n || echo "No matches found"
# Check 3: Inspect the services.html shortcode
echo ""
echo "=== Inspecting layouts/shortcodes/services.html ==="
if [ -f "layouts/shortcodes/services.html" ]; then
cat layouts/shortcodes/services.html
else
echo "services.html not found"
fiLength of output: 1191
</script>
🏁 Script executed:
#!/bin/bash
# Inspect frontmatter of each step file
echo "=== Frontmatter in content/steps/audit.md ==="
head -20 content/steps/audit.md
echo ""
echo "=== Frontmatter in content/steps/innovate.md ==="
head -20 content/steps/innovate.md
echo ""
echo "=== Frontmatter in content/steps/operate.md ==="
head -20 content/steps/operate.mdLength of output: 762
Add Type: steps frontmatter field to step content files.
Step content files exist at content/steps/ but are missing the Type: steps frontmatter required by the updated shortcode filter. Add Type: steps to the frontmatter of:
content/steps/audit.mdcontent/steps/innovate.mdcontent/steps/operate.md
Without this field, the shortcode will render empty because Hugo's where filter will not match any pages.
🤖 Prompt for AI Agents
In content/sections/home-turn-chaos.md around line 23, the shortcode
{{<services>}} expects step pages with a frontmatter field "Type: steps" but the
step files under content/steps/ are missing that field; open and update the
frontmatter of content/steps/audit.md, content/steps/innovate.md, and
content/steps/operate.md to include a top-level line "Type: steps" (matching
case) so Hugo's where filter will find them and the shortcode will render
correctly.
There was a problem hiding this comment.
@gberenice, thanks for confirming! This issue will prevent the {{<services>}} shortcode from rendering any content on the homepage until the Type: steps frontmatter is added to those three step files.
Would you like me to create a GitHub issue to track adding the missing Type: steps frontmatter field to the step content files?
content/steps/operate.md
Outdated
| --- | ||
| title: Platform Engineering as a Service | ||
| title: Operate | ||
| description: >- | ||
| Learn proven workflows and skills, empowering your engineers to confidently scale and own your infra going forward. | ||
| weight: 3 | ||
| icon: /img/services/icon_engineering.svg | ||
| --- No newline at end of file |
There was a problem hiding this comment.
Fix duplicate title field in front matter.
Lines 2–3 contain two title fields—the second will override the first, causing data loss. Based on the pattern of other steps (audit.md, innovate.md), the short title "Operate" is likely intended. Remove the longer "Platform Engineering as a Service" title.
Apply this diff to fix the front matter:
---
-title: Platform Engineering as a Service
title: Operate
description: >-
Learn proven workflows and skills, empowering your engineers to confidently scale and own your infra going forward.
weight: 3
icon: /img/services/icon_engineering.svg
---Run trunk fmt to auto-fix the prettier formatting notice afterward.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| --- | |
| title: Platform Engineering as a Service | |
| title: Operate | |
| description: >- | |
| Learn proven workflows and skills, empowering your engineers to confidently scale and own your infra going forward. | |
| weight: 3 | |
| icon: /img/services/icon_engineering.svg | |
| --- | |
| --- | |
| title: Operate | |
| description: >- | |
| Learn proven workflows and skills, empowering your engineers to confidently scale and own your infra going forward. | |
| weight: 3 | |
| icon: /img/services/icon_engineering.svg | |
| --- |
🧰 Tools
🪛 GitHub Check: Trunk Check
[failure] 1-1: prettier
Incorrect formatting, autoformat by running 'trunk fmt'
🪛 LanguageTool
[grammar] ~1-~1: Hier könnte ein Fehler sein.
Context: --- title: Platform Engineering as a Service title: Operate description: >- Learn proven workflows and skills, empowering your engineers to confidently scale and own your infra going forward. weight: 3 icon: /img/services/icon_engineering.svg ---
(QB_NEW_DE)
🤖 Prompt for AI Agents
In content/steps/operate.md around lines 1 to 8 there are two front-matter title
fields; remove the first longer title "Platform Engineering as a Service" so
only title: Operate remains (matching other steps), save the file, then run
`trunk fmt` to fix formatting/prettier notices.
| {{ range where (.Site.RegularPages.ByWeight) "Type" "services" }} | ||
| <div class="col col-12 col-md-6"> | ||
| <div class="services-row row"> | ||
| {{ range where (.Site.RegularPages.ByWeight) "Type" "steps" }} |
There was a problem hiding this comment.
🧩 Analysis chain
Verify step content exists with correct Type.
The filter changed from "services" to "steps", which means this shortcode now requires step content files (e.g., content/steps/audit.md, content/steps/innovate.md, content/steps/operate.md) with Type: steps in their frontmatter.
🏁 Script executed:
#!/bin/bash
# Verify step content exists with Type field
echo "=== Checking for step content files ==="
fd --type f --extension md content/steps 2>/dev/null | head -20 || echo "No steps directory found"
# Check that steps have Type: steps
echo -e "\n=== Checking Type field in steps ==="
fd --type f --extension md content/steps 2>/dev/null | xargs grep -l "^Type:" | head -5 || echo "No Type field found in steps"Length of output: 77
🏁 Script executed:
#!/bin/bash
# Check directory structure
echo "=== Directory listing: content/ ==="
ls -la content/ 2>/dev/null | head -20 || echo "content/ not found"
# Check if steps directory exists specifically
echo -e "\n=== Checking for steps directory ==="
[ -d content/steps ] && echo "content/steps exists" || echo "content/steps does NOT exist"
# Look for services content as reference
echo -e "\n=== Checking for services directory and content ==="
ls -la content/services 2>/dev/null | head -20 || echo "content/services not found"
# Search for any Type: field usage (broader search)
echo -e "\n=== Searching for Type: field in content ==="
rg "^Type:" content/ 2>/dev/null | head -10 || echo "No Type: field found"
# Check for recent changes or PR files
echo -e "\n=== Checking for any markdown files in content/ ==="
find content -name "*.md" -type f 2>/dev/null | head -20 || echo "No markdown files found"Length of output: 3035
🏁 Script executed:
#!/bin/bash
# Check actual files in steps directory
echo "=== Files in content/steps ==="
ls -la content/steps/ 2>/dev/null || echo "Could not list steps directory"
# Show content of step files if they exist
echo -e "\n=== Examining step files (first 50 lines each) ==="
find content/steps -type f 2>/dev/null | while read file; do
echo "--- $file ---"
head -50 "$file"
done
# Also check services frontmatter for comparison
echo -e "\n=== Examining services files for reference structure ==="
find content/services -type f -name "*.md" 2>/dev/null | head -1 | xargs head -50Length of output: 1949
Fix malformed YAML frontmatter in operate.md—duplicate title fields will cause parsing errors.
Step content does exist with the required structure (content/steps/audit.md, innovate.md, operate.md). However, content/steps/operate.md has a critical YAML syntax error: two consecutive title: fields in the frontmatter. YAML will only preserve the second one, but this malformed structure may cause unexpected rendering or validation failures. Remove the duplicate and keep only one title field.
---
title: Operate
description: >-
Learn proven workflows and skills, empowering your engineers to confidently scale and own your infra going forward.
weight: 3
icon: /img/services/icon_engineering.svg
---
🤖 Prompt for AI Agents
content/steps/operate.md frontmatter (approx. lines 1-8): the YAML frontmatter
contains two consecutive "title:" fields which causes parsing errors; open
content/steps/operate.md, remove the duplicate title line so only a single
title: Operate remains, ensure the remaining frontmatter includes description,
weight, and icon exactly as shown, and save the file so the frontmatter is valid
YAML.
| <h3 class="serviceTitle homeServiceTitle"> | ||
| {{if .Params.home_title}} | ||
| {{.Params.home_title}} | ||
| {{else}} | ||
| {{.Title}} | ||
| {{end}} | ||
| </h3> | ||
| <div class="serviceDesc">{{.Description}}</div> | ||
| <div class="serviceDesc">{{.Params.home_description}}</div> |
There was a problem hiding this comment.
🧩 Analysis chain
Verify home_title and home_description parameters exist in all step content.
The template now expects .Params.home_title and .Params.home_description fields. Ensure these are present in all step content files; otherwise, the fallback to .Title and missing .home_description will cause rendering issues.
🏁 Script executed:
#!/bin/bash
# Verify required parameters in step content
echo "=== Checking step content for home_title and home_description ==="
fd --type f --extension md content/steps 2>/dev/null | while read file; do
echo "--- $file ---"
grep -E "^(home_title|home_description|title|Type):" "$file" | head -5
doneLength of output: 65
I need to explore the repository structure to understand where step content is located and how parameters are defined.
---
🏁 Script executed:
```shell
#!/bin/bash
# Explore repository structure
echo "=== Repository structure ==="
find . -type d -name content -o -name steps 2>/dev/null | head -20
echo ""
echo "=== Top-level directories ==="
ls -la | grep -E '^d' | head -20
echo ""
echo "=== Content directory structure ==="
find content -type f -name "*.md" 2>/dev/null | head -20
echo ""
echo "=== Check for services.html file ==="
find . -name "services.html" -type f 2>/dev/null
Length of output: 1909
---
🏁 Script executed:
```shell
#!/bin/bash
# Check what's actually in the steps directories
echo "=== Files in content/steps ==="
ls -la content/steps/ 2>/dev/null || echo "Directory empty or doesn't exist"
echo ""
echo "=== Files in layouts/steps ==="
ls -la layouts/steps/ 2>/dev/null || echo "Directory empty or doesn't exist"
echo ""
echo "=== Content of services.html ==="
cat layouts/shortcodes/services.html
echo ""
echo "=== Check git diff to see what changed ==="
git show HEAD:layouts/shortcodes/services.html 2>/dev/null | head -30
Length of output: 2059
---
🏁 Script executed:
```shell
#!/bin/bash
# Read all step files to check parameters
echo "=== audit.md ==="
cat content/steps/audit.md
echo ""
echo "=== innovate.md ==="
cat content/steps/innovate.md
echo ""
echo "=== operate.md ==="
cat content/steps/operate.md
Length of output: 675
Add home_title and home_description parameters to all step content files.
The template references .Params.home_title and .Params.home_description, but none of the step files (audit.md, innovate.md, operate.md) define these parameters. While home_title falls back to .Title, home_description has no fallback and will render as empty. Add both parameters to all step files:
home_title: <optional; defaults to title if omitted>
home_description: <required; no fallback exists>🤖 Prompt for AI Agents
In layouts/shortcodes/services.html around lines 10-17 the template uses
.Params.home_title and .Params.home_description but the step content files
(audit.md, innovate.md, operate.md) do not define them; add YAML front-matter
entries to each of those files: include home_description with a non-empty string
value, and optionally include home_title (or omit it to let the template fall
back to .Title); ensure the new keys are added at the top-level of each file's
front matter with proper YAML formatting and no empty values.
There was a problem hiding this comment.
Love it, very clean. My two cents on one aspect: "1+ Full time engineer of hours saved". I don't think I like that language, it feels awkward. Not sure what the alternative is or if this was already planned out language and we're past that part of the language review.
I tend to agree. Feel free to suggest some different language if you think of any. Maybe we change this to "160+ engineer hours / month saved" or something along those lines? |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
assets/css/custom.scss (1)
2700-2730: Services row centering is appropriate but formatting is slightly unconventional.The
justify-content: center;on line 2701 centers service columns in the "how it works" section, which is a sensible layout choice. However, the comment placement (same line with trailing space) is unconventional—consider moving to the line above for consistency..services-row { - justify-content: center; + justify-content: center; .col { padding-top: 1.38rem;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
assets/css/custom.scss(14 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-09-19T19:21:07.260Z
Learnt from: CR
Repo: masterpointio/masterpoint.io PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-09-19T19:21:07.260Z
Learning: Applies to assets/css/style.scss : Place custom styles in assets/css/style.scss (requires Hugo Extended for SCSS compilation)
Applied to files:
assets/css/custom.scss
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - masterpoint
- GitHub Check: Header rules - masterpoint
- GitHub Check: Pages changed - masterpoint
🔇 Additional comments (8)
assets/css/custom.scss (8)
115-161: Well-designed numbered list component with CSS counters.The
.numbered-listimplementation correctly uses CSS counters and provides responsive sizing. The gradient marker styling is consistent with the site's design system. No issues identified.
274-282: Verify text contrast on gradient button background.The
.btn-gradientuses a bright multi-color gradient with#033text. Please verify this meets WCAG AA contrast requirements for accessibility. If contrast is insufficient, consider a darker text color or semi-transparent overlay.
1059-1078: Banner link row styling looks solid.The
.rowLinkscomponent provides responsive button grouping with appropriate centering and stacking behavior. Mobile-first approach via flexbox is appropriate. No concerns identified.
1286-1314: Cloud architecture and logo styling adjustments are reasonable.Padding and margin updates appear to fine-tune spacing. The negative margin in the tablet media query (line 1297) may be intentional for visual balance but warrants confirmation that this doesn't cause unexpected side effects on adjacent elements.
Confirm the
margin: 0 -1rem;at line 1297 is intentional and doesn't create unintended layout shifts on wider tablets (768–990px).
1322-1410: Service row decorative lines need viewport overflow verification.The
.serviceIcon:beforepseudo-elements use125vwwidth to create gradient dividers (lines 1333, 1373). While usingz-index: -1hides overflow, this may cause horizontal scrolling on narrow viewports. Consider constraining withoverflow: hiddenon the parent or using100%width with proper positioning.Test that the 125vw decorative lines don't trigger horizontal scrollbars on mobile (< 575px) and tablet (576–767px) viewports.
1593-1644: Audit home tile requires mobile verification and positioning clarity.The
.audit-home-tileuses absolute positioning for the button (lines 1631–1643) with a margin-bottom: -26px to float it beyond the tile. On mobile (max-width: 575px), the text-align: center and width: 280px constraints may conflict with the transform and centering logic. Verify that the button positioning works correctly on all mobile viewports and doesn't overflow the container.Test the
.audit-home-btnpositioning on mobile devices (320px–575px viewports) to ensure it renders correctly and doesn't overflow the tile or create unexpected spacing.
1645-1720: Platform row/tile components need viewport overflow verification.The
.platform-row:beforepseudo-element uses100vwwidth (line 1650) to create a full-viewport decorative line. Like earlier decorative lines (serviceIcon, etc.), this may cause horizontal scrolling on constrained viewports. Additionally, verify that the three gradient variations for.platform-tile,.platform-tile-2, and.platform-tile-3(lines 1671–1693) are intentional and visually distinct.
- Test that the 100vw decorative line doesn't trigger horizontal scrollbars on mobile and tablet.
- Confirm the three gradient tile variations are visually distinct and appropriate for their content.
1759-1782: Make infrastructure section responsive adjustments needed.The
#make-infrastructuresection (lines 1759–1782) uses a.bg-imagewithwidth: 49.6%on desktop. On mobile (line 1775), it switches towidth: 100%; height: 50vw;. Verify that the 50vw height doesn't create unexpected spacing on very short mobile devices or landscape orientations.Confirm that the 50vw height on mobile (
max-width: 767px) doesn't cause layout issues on landscape-oriented phones or very tall narrow screens (e.g., aspect ratios > 1:1).
Gowiem
force-pushed
the
feature/homepage-rework-kris
branch
from
4dc4293 to
1b0cc96
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
content/sections/home-efficient-platforms.md (1)
19-19: Fix relative image paths and addalttext (breaks guidelines + MD045).
Use/img/...(notimg/...) and add descriptivealtattributes on all three images.-<div class="platformIcon"><img src="img/noun-developer-7187679.svg"/></div> +<div class="platformIcon"><img src="/img/noun-developer-7187679.svg" alt="Developer icon"/></div> -<div class="platformIcon"><img src="img/noun-cycle-7222105.svg"/></div> +<div class="platformIcon"><img src="/img/noun-cycle-7222105.svg" alt="Cycle icon"/></div> -<div class="platformIcon"><img src="img/noun-reduction-7894266.svg"/></div> +<div class="platformIcon"><img src="/img/noun-reduction-7894266.svg" alt="Reduction icon"/></div>Also applies to: 27-27, 35-35
🧹 Nitpick comments (1)
content/sections/home-efficient-platforms.md (1)
21-21: Tighten awkward CTA copy (marketing polish).
“Full-time engineer of hours saved” reads broken; suggest something like “160+ engineer hours / month saved” (or whatever metric is accurate).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (5)
static/img/bg_audit_home.pngis excluded by!**/*.pngstatic/img/bg_make_infrastructure.pngis excluded by!**/*.pngstatic/img/noun-cycle-7222105.svgis excluded by!**/*.svgstatic/img/noun-developer-7187679.svgis excluded by!**/*.svgstatic/img/noun-reduction-7894266.svgis excluded by!**/*.svg
📒 Files selected for processing (11)
content/_index.md(1 hunks)content/sections/home-efficient-platforms.md(1 hunks)content/sections/home-join-clients.md(1 hunks)content/sections/home-make-infrastructure.md(1 hunks)content/sections/home-our-word.md(1 hunks)content/sections/home-specialized-services.md(1 hunks)content/sections/home-turn-chaos.md(1 hunks)content/sections/home-what-is-masterpoint.md(1 hunks)content/steps/audit.md(1 hunks)content/steps/innovate.md(1 hunks)content/steps/operate.md(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (7)
- content/sections/home-specialized-services.md
- content/sections/home-make-infrastructure.md
- content/sections/home-what-is-masterpoint.md
- content/sections/home-our-word.md
- content/sections/home-turn-chaos.md
- content/steps/operate.md
- content/steps/audit.md
🧰 Additional context used
📓 Path-based instructions (1)
content/**/*.md
📄 CodeRabbit inference engine (CLAUDE.md)
content/**/*.md: Place all site content in Markdown files under /content/
Use absolute URLs in content (paths should start with "/", e.g., /blog/ not blog/)
Reference images in content using the /img/ path (which maps to /static/img/)
Use front matter draft: true to hide in-progress content from production
Use provided Hugo shortcodes (button, buttonout, form, testimonials, faqs, team, services, process, supports, client-logos) in content instead of duplicating HTML
Files:
content/_index.mdcontent/steps/innovate.mdcontent/sections/home-join-clients.mdcontent/sections/home-efficient-platforms.md
🧠 Learnings (2)
📚 Learning: 2025-09-19T19:21:07.260Z
Learnt from: CR
Repo: masterpointio/masterpoint.io PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-09-19T19:21:07.260Z
Learning: Applies to content/**/*.md : Use absolute URLs in content (paths should start with "/", e.g., /blog/ not blog/)
Applied to files:
content/sections/home-efficient-platforms.md
📚 Learning: 2025-09-19T19:21:07.260Z
Learnt from: CR
Repo: masterpointio/masterpoint.io PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-09-19T19:21:07.260Z
Learning: Applies to content/**/*.md : Reference images in content using the /img/ path (which maps to /static/img/)
Applied to files:
content/sections/home-efficient-platforms.md
🪛 GitHub Check: Trunk Check
content/sections/home-efficient-platforms.md
[notice] 19-19: markdownlint(MD045)
[new] Images should have alternate text (alt text)
[notice] 27-27: markdownlint(MD045)
[new] Images should have alternate text (alt text)
[notice] 35-35: markdownlint(MD045)
[new] Images should have alternate text (alt text)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - masterpoint
- GitHub Check: Header rules - masterpoint
- GitHub Check: Pages changed - masterpoint
🔇 Additional comments (1)
content/steps/innovate.md (1)
1-7: LGTM (clean step definition; icon path is compliant).
| banner_btn_label: Book A Call | ||
| banner_btn_link: /# | ||
| banner_link_label: Audit Your IaC → | ||
| banner_link: /# |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find all uses of /# in content files
echo "=== Uses of /# in content files ==="
rg -n --glob 'content/**/*.md' ':\s*/?#\s*$|:\s*"/?#"\s*$' -A 1 -B 1
echo ""
echo "=== id definitions in content files ==="
rg -n --glob 'content/**/*.md' '^id:\s*' | head -20
echo ""
echo "=== Check what sections exist ==="
fd --glob 'content/sections/*.md' | head -20Repository: masterpointio/masterpoint.io
Length of output: 1539
Wire banner CTAs to actual page sections instead of placeholder /# anchors.
The banner_btn_link and banner_link in lines 9 and 11 both point to /#, which only jumps to the page top. This appears to be a development placeholder—no other files in the codebase use /# as a link target. Several home sections with real anchors exist (e.g., #join-clients, #turn-chaos-operations, #make-infrastructure) that should be linked instead: use /#join-clients for the "Book A Call" button or another relevant home section anchor, or link to a real route like /contact/.
🤖 Prompt for AI Agents
In content/_index.md around lines 8 to 11 the banner_btn_link and banner_link
are set to the placeholder "/#", which only jumps to the top of the page;
replace these placeholder anchors with actual targets — for example change
banner_btn_link to "/#join-clients" (or another appropriate section anchor like
"/#turn-chaos-operations" or "/#make-infrastructure") or point to a real route
such as "/contact/"; update both banner_btn_link and banner_link to the chosen
real anchor/route so the CTAs navigate to the intended section or page.
| --- | ||
| title: Join Clients Like | ||
| weight: 3 | ||
| weight: 1 |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Show Home section weights/ids to confirm ordering intent
rg -n --glob 'content/sections/home-*.md' '^(title:|weight:|id:|section_categories:)' | head -100Repository: masterpointio/masterpoint.io
Length of output: 1887
Fix duplicate weight value to avoid unpredictable section ordering.
weight: 1 is already used by home-specialized-services.md. Setting home-join-clients.md to the same weight creates ambiguous ordering. Choose a unique weight value (e.g., weight: 6 to place it after home-our-word.md at the end).
Also applies to: 10-10, 14-14
🤖 Prompt for AI Agents
In content/sections/home-join-clients.md around line 3, the frontmatter uses a
duplicate weight value (weight: 1) which conflicts with
home-specialized-services.md and causes unpredictable ordering; change this
weight to a unique value (for example weight: 6 to place it after
home-our-word.md) and update any other duplicate occurrences referenced at lines
10 and 14 in this file to unique, non-conflicting weights so section ordering is
deterministic.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
layouts/_default/_markup/render-heading.html (1)
24-27: Make thearia-labelrobust by plainifying heading text.If
$textcan contain markup/entities, it can produce odd or verbose labels. Consider:- <a href="#{{ $anchor }}" class="heading-anchor-link" aria-label="Link to {{ $text }}"> + <a href="#{{ $anchor }}" class="heading-anchor-link" aria-label="Link to {{ $text | plainify }}">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
layouts/_default/_markup/render-heading.html(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - masterpoint
- GitHub Check: Header rules - masterpoint
- GitHub Check: Pages changed - masterpoint
🔇 Additional comments (1)
layouts/_default/_markup/render-heading.html (1)
30-32: Preserving.Attributes.classin the non-anchor path looks good.
| <h{{ $level }} id="{{ $anchor }}" {{- with .Attributes.class }} class="{{ . }} heading-with-anchor" {{- end }}> | ||
| <a href="#{{ $anchor }}" class="heading-anchor-link" aria-label="Link to {{ $text }}"> | ||
| <span class="heading-text">{{ $text | safeHTML }}</span> | ||
| <span class="heading-anchor-symbol">#</span> | ||
| </a> | ||
| </h{{ $level }}> |
There was a problem hiding this comment.
Ensure heading-with-anchor is applied even when no .Attributes.class is provided (currently it disappears).
Right now heading-with-anchor is only emitted inside with .Attributes.class, so headings with anchors but no class won’t get the styling hook.
-<h{{ $level }} id="{{ $anchor }}" {{- with .Attributes.class }} class="{{ . }} heading-with-anchor" {{- end }}>
+<h{{ $level }} id="{{ $anchor }}"
+ class="heading-with-anchor{{ with .Attributes.class }} {{ . }}{{ end }}">
<a href="#{{ $anchor }}" class="heading-anchor-link" aria-label="Link to {{ $text }}">
<span class="heading-text">{{ $text | safeHTML }}</span>
<span class="heading-anchor-symbol">#</span>
</a>
</h{{ $level }}>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <h{{ $level }} id="{{ $anchor }}" {{- with .Attributes.class }} class="{{ . }} heading-with-anchor" {{- end }}> | |
| <a href="#{{ $anchor }}" class="heading-anchor-link" aria-label="Link to {{ $text }}"> | |
| <span class="heading-text">{{ $text | safeHTML }}</span> | |
| <span class="heading-anchor-symbol">#</span> | |
| </a> | |
| </h{{ $level }}> | |
| <h{{ $level }} id="{{ $anchor }}" | |
| class="heading-with-anchor{{ with .Attributes.class }} {{ . }}{{ end }}"> | |
| <a href="#{{ $anchor }}" class="heading-anchor-link" aria-label="Link to {{ $text }}"> | |
| <span class="heading-text">{{ $text | safeHTML }}</span> | |
| <span class="heading-anchor-symbol">#</span> | |
| </a> | |
| </h{{ $level }}> |
🤖 Prompt for AI Agents
In layouts/_default/_markup/render-heading.html around lines 23 to 28, the class
"heading-with-anchor" is only emitted inside the "with .Attributes.class" block
so headings without any .Attributes.class lose that styling hook; change the
markup to always output a class attribute that appends "heading-with-anchor" to
any existing classes (or sets it alone when none exist) — i.e., compute the
class string conditionally and emit a single class="{{ computed }}" attribute so
headings always get the "heading-with-anchor" class while preserving any
provided classes.
what
why
references
Summary by CodeRabbit
New Features
Style
Layout
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.