feat(website): reposition homepage around standardized secret consumption - #295
Conversation
…tion - Update hero: 'Standardize how your apps consume secrets' - Add description: 'Stop reinventing secret loading in every project' - Add BeforeAfter comparison section between ProblemSolution and Features - Add AWS Open Source Credits Program badge to Sponsors section - Update all 3 locales (en, ca, es) with new copy - Add BeforeAfterTranslations type and component
|
Warning Review limit reached
More reviews will be available in 18 minutes and 27 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, 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 include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
WalkthroughAdds a translated BeforeAfter component and types, updates Hero and Sponsors UI, refreshes en/ca/es copy, and renders the new section on all three homepage variants. ChangesHomepage BeforeAfter Feature
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new BeforeAfter comparison component, updates the hero section layout, adds an AWS Open Source Credits badge to the sponsors section, and updates the English, Spanish, and Catalan translations. Feedback on these changes highlights a visual alignment bug in the new BeforeAfter component due to independent columns, and recommends utilizing an unused translation key to improve accessibility on the sponsors link.
There was a problem hiding this comment.
Pull request overview
Repositions the website homepage messaging from a .env-as-incident framing to a "standardize how apps consume secrets" framing, adds a new before/after comparison section, and acknowledges the AWS Open Source Credits Program in the sponsors area. All three locales (en, ca, es) are updated in lockstep with the type contract.
Changes:
- Rewrites homepage meta, hero copy, badges, terminal comments, and adds a
hero-tech-lineto surface providers/integrations. - Introduces a new
BeforeAftercomponent (+BeforeAfterTranslationstype + EN/CA/ES content) and wires it betweenProblemSolutionandFeaturesGridon all three homepage routes. - Extends
SponsorsTranslationswith AWS credits fields and renders a text badge linking to the AWS Open Source Credits Program.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/website/src/pages/index.astro | Imports and renders BeforeAfter in the English homepage flow. |
| src/website/src/pages/es/index.astro | Same BeforeAfter integration for the Spanish homepage. |
| src/website/src/pages/ca/index.astro | Same BeforeAfter integration for the Catalan homepage. |
| src/website/src/i18n/types.ts | Adds BeforeAfterRow/BeforeAfterTranslations and AWS credits fields on SponsorsTranslations. |
| src/website/src/i18n/en.ts | Updates EN meta/hero/sponsors copy and adds beforeAfter strings. |
| src/website/src/i18n/es.ts | Spanish counterpart of the copy update. |
| src/website/src/i18n/ca.ts | Catalan counterpart of the copy update. |
| src/website/src/components/Hero.astro | Splits description from tech line and adds .hero-tech-line styling. |
| src/website/src/components/Sponsors.astro | Adds AWS Open Source Credits badge link and styling. |
| src/website/src/components/BeforeAfter.astro | New two-column comparison section using design-system tokens. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
src/website/src/pages/index.astro (1)
2-10:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winFix import order to comply with Biome rules.
The BeforeAfter import should be placed before DemoVideo to maintain alphabetical order.
📦 Proposed fix
--- +import BeforeAfter from '../components/BeforeAfter.astro'; import DemoVideo from '../components/DemoVideo.astro'; import FeaturesGrid from '../components/FeaturesGrid.astro'; import Footer from '../components/Footer.astro'; import GetStarted from '../components/GetStarted.astro'; import GitHubAction from '../components/GitHubAction.astro'; import Hero from '../components/Hero.astro'; import HowItWorks from '../components/HowItWorks.astro'; import Navbar from '../components/Navbar.astro'; -import BeforeAfter from '../components/BeforeAfter.astro'; import ProblemSolution from '../components/ProblemSolution.astro';Alternatively, run
npx@biomejs/biomecheck --apply .to auto-fix.As per coding guidelines, Biome style rules require alphabetically sorted imports.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/website/src/pages/index.astro` around lines 2 - 10, Imports in index.astro are not alphabetized; move the BeforeAfter import so it appears before DemoVideo to satisfy Biome rules. Locate the import statements for BeforeAfter and DemoVideo in the top of the file (symbols: BeforeAfter, DemoVideo) and reorder them alphabetically (BeforeAfter, then DemoVideo), or run the autofix (npx `@biomejs/biome` check --apply .) to apply the same change.src/website/src/pages/es/index.astro (1)
2-10:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winFix import order to comply with Biome rules.
The BeforeAfter import should be placed before DemoVideo to maintain alphabetical order.
📦 Proposed fix
--- +import BeforeAfter from '../../components/BeforeAfter.astro'; import DemoVideo from '../../components/DemoVideo.astro'; import FeaturesGrid from '../../components/FeaturesGrid.astro'; import Footer from '../../components/Footer.astro'; import GetStarted from '../../components/GetStarted.astro'; import GitHubAction from '../../components/GitHubAction.astro'; import Hero from '../../components/Hero.astro'; import HowItWorks from '../../components/HowItWorks.astro'; import Navbar from '../../components/Navbar.astro'; -import BeforeAfter from '../../components/BeforeAfter.astro'; import ProblemSolution from '../../components/ProblemSolution.astro';Alternatively, run
npx@biomejs/biomecheck --apply .to auto-fix.As per coding guidelines, Biome style rules require alphabetically sorted imports.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/website/src/pages/es/index.astro` around lines 2 - 10, The import list in this module violates Biome's alphabetical ordering: move the BeforeAfter import so it appears before DemoVideo in the import block (i.e., reorder the imports so BeforeAfter is placed above DemoVideo), or run the automatic fixer (npx `@biomejs/biome` check --apply .) to apply the same change; update the import sequence involving BeforeAfter and DemoVideo (and maintain overall alphabetical order for the other imports such as FeaturesGrid, Footer, GetStarted, GitHubAction, Hero, HowItWorks, Navbar) to comply with Biome rules.src/website/src/pages/ca/index.astro (1)
2-10:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winFix import order to comply with Biome rules.
The BeforeAfter import should be placed before DemoVideo to maintain alphabetical order.
📦 Proposed fix
--- +import BeforeAfter from '../../components/BeforeAfter.astro'; import DemoVideo from '../../components/DemoVideo.astro'; import FeaturesGrid from '../../components/FeaturesGrid.astro'; import Footer from '../../components/Footer.astro'; import GetStarted from '../../components/GetStarted.astro'; import GitHubAction from '../../components/GitHubAction.astro'; import Hero from '../../components/Hero.astro'; import HowItWorks from '../../components/HowItWorks.astro'; import Navbar from '../../components/Navbar.astro'; -import BeforeAfter from '../../components/BeforeAfter.astro'; import ProblemSolution from '../../components/ProblemSolution.astro';Alternatively, run
npx@biomejs/biomecheck --apply .to auto-fix.As per coding guidelines, Biome style rules require alphabetically sorted imports.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/website/src/pages/ca/index.astro` around lines 2 - 10, The import list at the top of the module is out of alphabetical order: move the BeforeAfter import so it appears before DemoVideo (i.e., reorder the import statement for the BeforeAfter component to come alphabetically before the DemoVideo import) to satisfy Biome import-order rules; you can also run npx `@biomejs/biome` check --apply . to auto-fix across the file.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/website/src/i18n/ca.ts`:
- Around line 109-138: The beforeAfter.rows entries contain multiline string
literals that violate Biome formatting; update the beforeAfter object
(specifically beforeAfter.rows array and each row's without/with properties) to
use single-line strings (collapse line breaks and trailing spaces) so each value
is a single quoted line, then run or allow npx `@biomejs/biome` format --write .
to ensure Biome rules are satisfied.
In `@src/website/src/i18n/en.ts`:
- Around line 109-138: The beforeAfter object contains multiline string literals
in the rows array (fields without and with) which violate Biome formatting
rules; update each multiline string in beforeAfter.rows to be single-line
strings (collapse line breaks and unnecessary indentation) so fields like
beforeAfter.rows[i].without and beforeAfter.rows[i].with are single-line
literals, then run the project formatter (or npx `@biomejs/biome` format --write
.) to ensure style compliance.
---
Outside diff comments:
In `@src/website/src/pages/ca/index.astro`:
- Around line 2-10: The import list at the top of the module is out of
alphabetical order: move the BeforeAfter import so it appears before DemoVideo
(i.e., reorder the import statement for the BeforeAfter component to come
alphabetically before the DemoVideo import) to satisfy Biome import-order rules;
you can also run npx `@biomejs/biome` check --apply . to auto-fix across the file.
In `@src/website/src/pages/es/index.astro`:
- Around line 2-10: The import list in this module violates Biome's alphabetical
ordering: move the BeforeAfter import so it appears before DemoVideo in the
import block (i.e., reorder the imports so BeforeAfter is placed above
DemoVideo), or run the automatic fixer (npx `@biomejs/biome` check --apply .) to
apply the same change; update the import sequence involving BeforeAfter and
DemoVideo (and maintain overall alphabetical order for the other imports such as
FeaturesGrid, Footer, GetStarted, GitHubAction, Hero, HowItWorks, Navbar) to
comply with Biome rules.
In `@src/website/src/pages/index.astro`:
- Around line 2-10: Imports in index.astro are not alphabetized; move the
BeforeAfter import so it appears before DemoVideo to satisfy Biome rules. Locate
the import statements for BeforeAfter and DemoVideo in the top of the file
(symbols: BeforeAfter, DemoVideo) and reorder them alphabetically (BeforeAfter,
then DemoVideo), or run the autofix (npx `@biomejs/biome` check --apply .) to
apply the same change.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: a63ceace-3657-4fd4-8187-12b26814ddf6
📒 Files selected for processing (10)
src/website/src/components/BeforeAfter.astrosrc/website/src/components/Hero.astrosrc/website/src/components/Sponsors.astrosrc/website/src/i18n/ca.tssrc/website/src/i18n/en.tssrc/website/src/i18n/es.tssrc/website/src/i18n/types.tssrc/website/src/pages/ca/index.astrosrc/website/src/pages/es/index.astrosrc/website/src/pages/index.astro
- Fix --color-muted to --color-text-muted in Hero.astro - Add title/aria-label using awsCreditsAlt on AWS credits link - Restructure BeforeAfter.astro to row-based grid for vertical alignment
Description
Repositions the Envilder homepage messaging from '.env security incident' to 'standardize how apps consume secrets'. This is a strategic positioning change that better communicates Envilder's real value as a secret consumption standard.
Type of Change
Changes Made
Hero (all 3 locales)
New BeforeAfter section
Sponsors section
Files
Checklist
Summary by CodeRabbit
New Features
Improvements