Marketing pages UI updates - #136
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThe PR replaces the default project documentation, adds frontend workflow guidance, and refreshes the marketing landing page. It introduces new marketing sections, donation controls, testimonial navigation, route-aware mobile navigation, and updated shared styling. ChangesMarketing platform refresh
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (7)
src/features/marketing/components/invest-in-hope-section.tsx (1)
6-9: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winReplace arbitrary presentation values with design tokens.
Line 6 uses
bg-[#ECE8FF]. Line 9 usessm:text-[3.5rem]. Use semantic color and typography tokens instead.As per coding guidelines, do not use arbitrary hex colors or spacing; use design tokens.
🤖 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/features/marketing/components/invest-in-hope-section.tsx` around lines 6 - 9, In the InvestInHope section markup, replace the arbitrary bg-[`#ECE8FF`] class and sm:text-[3.5rem] class with the project’s semantic background-color and typography tokens, preserving the existing responsive styling and visual intent.Source: Coding guidelines
src/features/marketing/components/empowerment-section.tsx (2)
10-10: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winReuse the shared marketing container.
These sites duplicate the layout contract already provided by
src/shared/ui/marketing-container.tsx.
src/features/marketing/components/empowerment-section.tsx#L10-L10: Replace the raw container withMarketingContainerand retain section padding throughclassName.src/features/marketing/components/invest-in-hope-section.tsx#L7-L7: Replace the raw container withMarketingContainerand retain grid classes throughclassName.src/features/marketing/components/navbar.tsx#L26-L26: Replace the raw container withMarketingContainerand retain header-specific classes throughclassName.As per coding guidelines, reuse shared UI components instead of creating equivalent components.
🤖 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/features/marketing/components/empowerment-section.tsx` at line 10, Replace the raw containers with MarketingContainer in src/features/marketing/components/empowerment-section.tsx#L10-L10, src/features/marketing/components/invest-in-hope-section.tsx#L7-L7, and src/features/marketing/components/navbar.tsx#L26-L26; preserve each site’s existing section padding, grid classes, or header-specific classes through className.Source: Coding guidelines
27-27: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winReplace arbitrary color and spacing values with design tokens.
Lines 27, 82, 108, 137, and 173 use arbitrary hex colors. Lines 36, 63, 139, 151, and 177 use arbitrary bracketed spacing values. Define or reuse semantic design tokens for these values.
As per coding guidelines, do not use arbitrary hex colors or spacing; use design tokens.
Also applies to: 36-36, 63-63, 82-82, 108-108, 137-137, 139-139, 151-151, 173-177
🤖 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/features/marketing/components/empowerment-section.tsx` at line 27, Replace the arbitrary Tailwind color values on the empowerment section container and the referenced elements with existing or newly defined semantic color tokens. Replace the bracketed spacing values in the same component with the appropriate spacing/design tokens, preserving the current layout and styling while eliminating all arbitrary hex colors and spacing utilities.Source: Coding guidelines
src/features/marketing/components/donation-form.tsx (1)
130-130: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse design tokens for button dimensions.
Line 130 uses arbitrary height and radius values. Use the shared Button size and radius tokens instead.
As per coding guidelines, do not use arbitrary hex colors or spacing; use design tokens.
🤖 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/features/marketing/components/donation-form.tsx` at line 130, Update the Button in the donation form to replace the arbitrary h-[51px] height and rounded-[60px] radius with the shared Button size and radius design tokens, while preserving its existing color and hover styling.Source: Coding guidelines
src/features/marketing/components/practical-pathways-section.tsx (1)
5-5: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse a semantic background token.
Line 5 uses the arbitrary
#111827value. Reuse an existing semantic dark-surface token or add one to the design-token definition.As per coding guidelines, “Do not use arbitrary hex colors or spacing; use design tokens.”
🤖 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/features/marketing/components/practical-pathways-section.tsx` at line 5, Replace the arbitrary `#111827` background in the section element with the existing semantic dark-surface design token; if no suitable token exists, add one through the established design-token definition and use it here.Source: Coding guidelines
src/features/marketing/components/footer.tsx (1)
16-16: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winReplace the arbitrary column gap with a token.
Line 16 adds
xl:gap-[154px]. Define a named layout-spacing token or use an existing spacing token so this value remains consistent across marketing layouts.As per coding guidelines, “Do not use arbitrary hex colors or spacing; use design tokens.”
🤖 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/features/marketing/components/footer.tsx` at line 16, Replace the arbitrary xl:gap-[154px] value in the footer grid class with an existing spacing token, or define and use a named layout-spacing token if no suitable token exists. Keep the responsive grid behavior unchanged and avoid introducing another arbitrary spacing value.Source: Coding guidelines
src/features/marketing/components/hero-section.tsx (1)
13-13: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winReplace deprecated
prioritywithpreload.
next/imagedeprecatedpriorityin Next.js 16 in favor ofpreload; switch this hero image topreload.Proposed fix
- priority + preload🤖 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/features/marketing/components/hero-section.tsx` at line 13, Replace the deprecated priority prop on the hero image component with preload, preserving the image’s existing eager-loading behavior.Source: Coding guidelines
🤖 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 `@AGENTS.md`:
- Around line 22-28: Align the verification instructions in AGENTS.md lines
22-28 and README.md lines 115-123: use pnpm typecheck, pnpm build, and pnpm lint
consistently, and require lint to introduce no new errors while allowing
documented pre-existing issues. Update both files’ command and pass/fail
guidance without changing the stated exception handling.
In `@README.md`:
- Around line 88-100: Update the README directory tree to include the shared
directories documented in AGENTS.md, specifically src/shared/ui and
src/shared/lib, so the structure reflects the repository’s actual organization
and guides contributors toward those shared locations.
- Around line 105-111: Update the README contribution workflow to match
AGENTS.md: replace the direct main-based feature-branch instructions with
stacked phase branches and explicit pull-request base management, and change
commit examples from feat: to the required refactor: P<N> <short name> format.
Ensure all referenced workflow steps use this single canonical convention.
- Line 87: Update the project-tree fenced code block in README.md to include a
language tag, preferably text, immediately after the opening fence so it
satisfies Markdownlint MD040.
In `@src/features/marketing/components/donation-form.tsx`:
- Around line 39-49: Wire the donation controls in DonationForm to controlled
state: update selectedPrice for preset amounts, store the custom amount, and
update selectedDonationType from the donation-type controls. Derive the fee and
total from these state values, then add submission handling to Donate Now that
validates the selection and starts checkout, using apiFetch for any server
request.
In `@src/features/marketing/components/navbar.tsx`:
- Line 22: Update the desktop navigation links near the desktop link group to
derive their active state from pathname, matching the mobile links: apply the
active class to the link whose destination matches pathname and set
aria-current="page" only for that link. Preserve the inactive presentation for
other links and apply the same behavior to the additional desktop link group.
---
Nitpick comments:
In `@src/features/marketing/components/donation-form.tsx`:
- Line 130: Update the Button in the donation form to replace the arbitrary
h-[51px] height and rounded-[60px] radius with the shared Button size and radius
design tokens, while preserving its existing color and hover styling.
In `@src/features/marketing/components/empowerment-section.tsx`:
- Line 10: Replace the raw containers with MarketingContainer in
src/features/marketing/components/empowerment-section.tsx#L10-L10,
src/features/marketing/components/invest-in-hope-section.tsx#L7-L7, and
src/features/marketing/components/navbar.tsx#L26-L26; preserve each site’s
existing section padding, grid classes, or header-specific classes through
className.
- Line 27: Replace the arbitrary Tailwind color values on the empowerment
section container and the referenced elements with existing or newly defined
semantic color tokens. Replace the bracketed spacing values in the same
component with the appropriate spacing/design tokens, preserving the current
layout and styling while eliminating all arbitrary hex colors and spacing
utilities.
In `@src/features/marketing/components/footer.tsx`:
- Line 16: Replace the arbitrary xl:gap-[154px] value in the footer grid class
with an existing spacing token, or define and use a named layout-spacing token
if no suitable token exists. Keep the responsive grid behavior unchanged and
avoid introducing another arbitrary spacing value.
In `@src/features/marketing/components/hero-section.tsx`:
- Line 13: Replace the deprecated priority prop on the hero image component with
preload, preserving the image’s existing eager-loading behavior.
In `@src/features/marketing/components/invest-in-hope-section.tsx`:
- Around line 6-9: In the InvestInHope section markup, replace the arbitrary
bg-[`#ECE8FF`] class and sm:text-[3.5rem] class with the project’s semantic
background-color and typography tokens, preserving the existing responsive
styling and visual intent.
In `@src/features/marketing/components/practical-pathways-section.tsx`:
- Line 5: Replace the arbitrary `#111827` background in the section element with
the existing semantic dark-surface design token; if no suitable token exists,
add one through the established design-token definition and use it here.
🪄 Autofix
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: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 788f9ce8-3f26-4c35-909b-f159e7c91baa
⛔ Files ignored due to path filters (8)
public/figma-home/community-story-1.pngis excluded by!**/*.pngpublic/figma-home/community-story-2.pngis excluded by!**/*.pngpublic/figma-home/community-story-3.pngis excluded by!**/*.pngpublic/figma-home/community-story-4.pngis excluded by!**/*.pngpublic/figma-home/community-story-5.pngis excluded by!**/*.pngpublic/figma-home/community.pngis excluded by!**/*.pngpublic/figma-home/hero-life-direction.pngis excluded by!**/*.pngpublic/figma-home/restoring-hope.pngis excluded by!**/*.png
📒 Files selected for processing (20)
AGENTS.mdREADME.mdsrc/app/(marketing)/page.tsxsrc/app/globals.csssrc/app/layout.tsxsrc/features/marketing/components/community-section.tsxsrc/features/marketing/components/cta-section.tsxsrc/features/marketing/components/donation-form.tsxsrc/features/marketing/components/empowerment-section.tsxsrc/features/marketing/components/faq.tsxsrc/features/marketing/components/footer.tsxsrc/features/marketing/components/hero-section.tsxsrc/features/marketing/components/invest-in-hope-section.tsxsrc/features/marketing/components/navbar.tsxsrc/features/marketing/components/practical-pathways-section.tsxsrc/features/marketing/components/stories-from-our-community-section.tsxsrc/shared/lib/api-handler.tssrc/shared/ui/button.tsxsrc/shared/ui/marketing-container.tsxsrc/shared/ui/select.tsx
| 1. `npx tsc --noEmit` must be clean. If it reports generated-type errors (e.g. TS1128 in `.next`), delete stale generated output first: `Remove-Item -Recurse -Force .next\dev`, then re-run. | ||
| 2. `npm run build` is the real gate. It can take 300-600s, so give it a generous timeout (600000 ms). Build-log warnings such as `BetterAuthError: default secret` are pre-existing. | ||
| 3. `npm run lint` — compare against the known pre-existing issues; do not introduce new ones: | ||
| - `use-users.ts:6` unused `User` import | ||
| - `user-service.ts:4` unused `eq` import | ||
| - `use-pending-uploads` `set-state-in-effect` (line ~87) and unused `err` (line ~132) | ||
| 4. When tsc/lint/build fails, confirm whether the issue is introduced by your change or pre-existing — check with `git stash` before "fixing" things. |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Use one verification contract across both documentation files.
The two files disagree on command invocation and on whether existing lint errors block the workflow.
AGENTS.md#L22-L28: use the canonicalpnpm typecheck,pnpm build, andpnpm lintcommands; require that lint introduces no new errors.README.md#L115-L123: use the same commands and replace “All three must pass” with the documented pre-existing-lint exception.
📍 Affects 2 files
AGENTS.md#L22-L28(this comment)README.md#L115-L123
🤖 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 `@AGENTS.md` around lines 22 - 28, Align the verification instructions in
AGENTS.md lines 22-28 and README.md lines 115-123: use pnpm typecheck, pnpm
build, and pnpm lint consistently, and require lint to introduce no new errors
while allowing documented pre-existing issues. Update both files’ command and
pass/fail guidance without changing the stated exception handling.
| import { Button } from "@/components/ui/button"; | ||
| ## Project structure | ||
|
|
||
| ``` |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Add a language tag to the project-tree fence.
Markdownlint reports MD040 for this fence. Use text or another suitable language tag.
Proposed fix
-```
+```text📝 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.
| ``` |
🧰 Tools
🪛 markdownlint-cli2 (0.23.2)
[warning] 87-87: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 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 `@README.md` at line 87, Update the project-tree fenced code block in README.md
to include a language tag, preferably text, immediately after the opening fence
so it satisfies Markdownlint MD040.
Source: Linters/SAST tools
| src/ | ||
| ├── app/ # Next.js App Router routes | ||
| │ ├── (admin)/ # Admin panel | ||
| │ ├── (auth)/ # Auth pages | ||
| │ ├── (course-player)/ # Course player | ||
| │ ├── (marketing)/ # Public marketing pages | ||
| │ ├── (user)/ # User dashboard, checkout, learning | ||
| │ └── api/ # API routes | ||
| ├── components/ # Shared UI components | ||
| ├── features/ # Feature modules (admin, auth, courses, | ||
| │ # marketing, orders, platform, videos) | ||
| ├── infrastructure/ # Database config and scripts | ||
| └── lib/ # Shared libraries and utilities |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Document the shared directory structure.
The tree omits the documented src/shared/ui and src/shared/lib directories. Contributors may add duplicate components or utilities under src/components or src/lib. Update the tree to match the repository paths used by AGENTS.md.
🤖 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 `@README.md` around lines 88 - 100, Update the README directory tree to include
the shared directories documented in AGENTS.md, specifically src/shared/ui and
src/shared/lib, so the structure reflects the repository’s actual organization
and guides contributors toward those shared locations.
| 1. **Branch per task.** Create a feature branch off `main`: | ||
|
|
||
| ```bash | ||
| git checkout -b feat/my-change | ||
| ``` | ||
|
|
||
| 2. **Follow the repo conventions.** Read `AGENTS.md` first — it documents the frontend refactor practices, shared infrastructure to reuse, and anti-patterns to avoid. |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Align the contribution workflow with AGENTS.md.
The README says to create a branch directly from main, but AGENTS.md requires stacked phase branches and explicit PR-base management. The README also gives feat: commit examples, while AGENTS.md requires refactor: P<N> <short name>. Use one canonical workflow.
Also applies to: 125-125
🤖 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 `@README.md` around lines 105 - 111, Update the README contribution workflow to
match AGENTS.md: replace the direct main-based feature-branch instructions with
stacked phase branches and explicit pull-request base management, and change
commit examples from feat: to the required refactor: P<N> <short name> format.
Ensure all referenced workflow steps use this single canonical convention.
| type DonationType = { label: string; value: string } | ||
| const donationTypes = [ | ||
| { label: "One time Donation", value: "one time" }, | ||
| { label: "Monthly Donation", value: "monthly_donation" }, | ||
| { label: "Fixed Donation", value: "fixed_donation" }, | ||
| ] | ||
|
|
||
| const DonationForm = () => { | ||
| const [selectedPrice, setSelectedPrice] = useState<null | number>(null) | ||
| const [selectedDonationType, setSelectedDonationType] = | ||
| useState<DonationType["value"]>("one_time") |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
Connect donation controls to the donation calculation and checkout.
Lines 64-74 do not call setSelectedPrice. Lines 77-84 do not store the custom amount. Lines 89-106 do not update selectedDonationType. The fee and total at lines 121-128 therefore remain incorrect for every user selection.
Line 130 has no form action or click handler. The Donate Now control cannot start a checkout flow. Derive the fee and total from controlled donation state. Submit the validated selection to the checkout flow. If checkout requires a server request, use apiFetch.
As per coding guidelines, use apiFetch for all server calls.
Also applies to: 63-84, 89-106, 121-132
🤖 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/features/marketing/components/donation-form.tsx` around lines 39 - 49,
Wire the donation controls in DonationForm to controlled state: update
selectedPrice for preset amounts, store the custom amount, and update
selectedDonationType from the donation-type controls. Derive the fee and total
from these state values, then add submission handling to Donate Now that
validates the selection and starts checkout, using apiFetch for any server
request.
Source: Coding guidelines
|
|
||
| const Navbar = () => { | ||
| const [mobileOpen, setMobileOpen] = useState(false) | ||
| const pathname = usePathname() |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Apply the active state to desktop navigation.
pathname only affects the mobile links. At desktop widths, every link at lines 42-49 has the same presentation. Apply the same active class and aria-current="page" value to the desktop link.
Also applies to: 98-104
🤖 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/features/marketing/components/navbar.tsx` at line 22, Update the desktop
navigation links near the desktop link group to derive their active state from
pathname, matching the mobile links: apply the active class to the link whose
destination matches pathname and set aria-current="page" only for that link.
Preserve the inactive presentation for other links and apply the same behavior
to the additional desktop link group.
1 participant
Redesign and polish of the public marketing pages.
Changes
Summary by CodeRabbit
New Features
Improvements
Documentation