About page UI updates - #137
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 35 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe pull request redesigns the Modern Advocates marketing pages, adds interactive story and donation sections, updates shared marketing styles and navigation, and replaces template documentation with project-specific setup and contribution guidance. ChangesProject guidance
About page mission experience
Home page content and donation flow
Shared marketing styling and navigation
Shared utility consistency
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 2📝 Generate docstrings 💡
⚔️ Resolve merge conflicts 💡
🧪 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: 18
🤖 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 20-30: Update the “Verification before commit” instructions to use
the repository’s pnpm commands consistently instead of npx/npm. Replace the
PowerShell-only stale .next cleanup with a POSIX-compatible command, or clearly
mark it as Windows-only while providing the portable equivalent.
In `@README.md`:
- Around line 96-100: Update the README project tree to document the shared
directories as src/shared/ui and src/shared/lib instead of the current
components and lib paths, while preserving the existing descriptions and other
directory entries.
- Around line 103-127: Update the README “Contributing” workflow to match
AGENTS.md: describe the required refactor/frontend-pN-<slug> branch naming and
stacking on the previous phase, and replace the feat: commit examples with the
required refactor: P<N> <short name> format. Keep the guidance consistent and
avoid presenting conflicting workflows.
- Line 87: Update the project-structure code fence in README.md to specify the
text language by changing its opening fence to ```text, leaving the fenced
content unchanged.
- Around line 45-50: Update the README setup flow and Scripts table to reference
the same database seeding command: either add pnpm db:seed:dev to the table or
change the setup step to the intended existing script, based on the package
scripts configuration.
In `@src/app/`(marketing)/about/page.tsx:
- Line 12: Update AboutSupportMissionSection so its “Support our mission” Button
has the intended navigation target or action handler, ensuring the CTA is
interactive while preserving the existing section layout and styling.
In `@src/app/globals.css`:
- Line 119: Replace the self-referencing --font-playfair declaration in the
`@theme` inline block of globals.css with a distinct alias for the generated font
variable, or remove it if the runtime variable mapping is sufficient. Ensure the
font-playfair utility resolves to the font variable assigned by layout.tsx
without creating a custom-property cycle.
In `@src/features/marketing/components/about-hero-section.tsx`:
- Around line 27-31: Update the image element’s className to remove the
duplicate sm:w width utility, retaining only the intended responsive width while
preserving the other classes.
In `@src/features/marketing/components/about-support-mission-section.tsx`:
- Around line 29-31: Update the “Support our mission” Button in the mission
section to perform the intended support action, preferably by using Button
asChild with the correct support link or by supplying an appropriate action
handler. Preserve the existing styling and label while ensuring the control is
actionable.
In `@src/features/marketing/components/donation-form.tsx`:
- Line 47: Update the donation form around selectedPrice so preset amount
buttons update the controlled amount state and the custom amount input reads
from and writes to that same state. Mark each preset button as type="button" to
prevent unintended form submission.
- Around line 77-84: Add an accessible name for the input identified by name and
id “custom-amount” in the donation form. Prefer adding an associated Label with
htmlFor="custom-amount"; otherwise provide an explicit aria-label, while
preserving the existing input behavior and styling.
- Around line 56-58: Update the donation form’s paragraph copy in the visible
JSX text to use correct capitalization, comma punctuation, and a final period:
“Help us bring hope, support, and real impact in communities.”
- Around line 39-44: Make donation type selection controlled and consistent
across donationTypes and the donation form state: align the first option’s value
with the initial selectedDonationType value, then update the Select component to
use value and onValueChange={setSelectedDonationType} instead of defaultValue.
Ensure displayed selection and selectedDonationType remain synchronized.
- Around line 109-132: Wire the DonationForm component to read the selected
price or custom amount, donation frequency, donor details, and authorization
checkbox; calculate and display the 3% fee and total dynamically. Require
authorization, then have the Donate Now action POST amount, doonorName,
donorEmail, and donationType to /api/donations, and redirect to the returned
Stripe URL instead of remaining a no-op.
In `@src/features/marketing/components/footer.tsx`:
- Around line 96-98: Remove the text-nowrap class from the copyright paragraph
in the footer component so the copyright text can wrap within the available
width on narrow screens, while preserving the existing typography and responsive
classes.
In `@src/features/marketing/components/hero-section.tsx`:
- Around line 7-18: Replace the listed arbitrary Tailwind color, font-size, and
spacing classes with the repository’s existing semantic design tokens. In
src/features/marketing/components/hero-section.tsx lines 7-18 and 23,
src/features/marketing/components/our-vision-section.tsx line 5, and
src/features/marketing/components/practical-pathways-section.tsx lines 5-8, use
background, text-size, and theme size tokens; in our-vision-section.tsx express
the intentional 3.5rem size through a theme token. In
src/features/marketing/components/empowerment-section.tsx lines 27, 52, 82, 108,
137, and 173, replace the listed background, fill, and text literals with
semantic color tokens. In
src/features/marketing/components/stories-from-our-community-section.tsx lines
87 and 117, replace gap-[50px] and gap-[18px] with semantic spacing tokens,
preserving the existing visual values.
In `@src/features/marketing/components/invest-in-hope-section.tsx`:
- Line 6: Replace the arbitrary styling values at
src/features/marketing/components/invest-in-hope-section.tsx:6-6,
src/features/marketing/components/footer.tsx:16-16, and
src/features/marketing/components/footer.tsx:102-102 with existing repository
design tokens, adding named `@theme` tokens where needed. Update the
InvestInHopeSection background to use a color token, Footer’s xl gap to use a
spacing or layout token, and Footer’s calculated translate offsets to use named
positioning tokens or a layout structure that avoids hard-coded offsets.
In `@src/shared/ui/button.tsx`:
- Around line 12-14: Keep the shared Button’s variant="default" styling
unchanged in the default branch, or introduce and apply a separate
marketing-specific variant for CTAs requiring this color; do not alter the
fallback used by non-marketing callers such as the account page.
🪄 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: 532d854d-bfed-42f7-80ed-3f41fec17f93
⛔ Files ignored due to path filters (9)
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/melanie-and-will.pngis excluded by!**/*.pngpublic/figma-home/restoring-hope.pngis excluded by!**/*.png
📒 Files selected for processing (25)
AGENTS.mdREADME.mdsrc/app/(marketing)/about/page.tsxsrc/app/(marketing)/page.tsxsrc/app/globals.csssrc/app/layout.tsxsrc/features/marketing/components/about-hero-section.tsxsrc/features/marketing/components/about-support-mission-section.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/how-can-we-help.tsxsrc/features/marketing/components/invest-in-hope-section.tsxsrc/features/marketing/components/navbar.tsxsrc/features/marketing/components/our-vision-section.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
Comment on lines
+20
to
+30
| ## Verification before commit (required) | ||
|
|
||
| 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. | ||
| 5. Check `git status` before committing; never stage untracked files like `public/figma-home/logo-icon.svg` (intentionally untracked). | ||
| 6. Commit messages match repo style: `refactor: P<N> <short name>`. |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Use one portable verification command set.
README.md uses pnpm, but this section uses npx tsc, npm run build, and npm run lint. The stale-output cleanup also uses PowerShell syntax and fails on Unix-like systems. Use the repository's pnpm scripts and provide a POSIX cleanup equivalent, or mark the cleanup instructions as Windows-only.
🤖 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 20 - 30, Update the “Verification before commit”
instructions to use the repository’s pnpm commands consistently instead of
npx/npm. Replace the PowerShell-only stale .next cleanup with a POSIX-compatible
command, or clearly mark it as Windows-only while providing the portable
equivalent.
Comment on lines
+45
to
+50
| # 3. Generate and run database migrations | ||
| pnpm db:generate | ||
| pnpm db:migrate:dev | ||
|
|
||
| # 4. (Optional) Seed the database | ||
| pnpm db:seed:dev |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== package scripts related to db:seed =="
if [ -f package.json ]; then
node - <<'JS'
const fs = require('fs');
const pkg = JSON.parse(fs.readFileSync('package.json','utf8'));
const scripts = pkg.scripts || {};
const keys = Object.keys(scripts).filter(k => k.includes('db:seed') || k.includes('seed'));
for (const k of keys) console.log(JSON.stringify({key: k, value: scripts[k]}));
JS
else
echo "package.json not found"
fi
echo
echo "== README relevant sections =="
if [ -f README.md ]; then
nl -ba README.md | sed -n '40,90p'
fi
echo
echo "== occurrences of db:seed commands =="
rg -n "db:seed" -S .Repository: Smartlify07/Modern-Advocates
Length of output: 533
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== README relevant sections =="
if [ -f README.md ]; then
awk 'NR>=45 && NR<=90 {printf "%4d\t%s\n", NR, $0}' README.md
fi
echo
echo "== occurrences of db:seed commands =="
rg -n "db:seed" -S .Repository: Smartlify07/Modern-Advocates
Length of output: 2554
Keep the readme setup commands and scripts table consistent.
The setup flow documents pnpm db:seed:dev, while the “Scripts” table only documents pnpm db:seed. Add pnpm db:seed:dev to the table or change the setup command after checking the intended database script.
🤖 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 45 - 50, Update the README setup flow and Scripts
table to reference the same database seeding command: either add pnpm
db:seed:dev to the table or change the setup step to the intended existing
script, based on the package scripts configuration.
| import { Button } from "@/components/ui/button"; | ||
| ## Project structure | ||
|
|
||
| ``` |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Specify the Markdown fence language.
markdownlint-cli2 reports MD040 for the project-structure fence. Add text to the opening fence.
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.
Suggested change
| ``` |
🧰 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-structure code fence in README.md
to specify the text language by changing its opening fence to ```text, leaving
the fenced content unchanged.
Source: Linters/SAST tools
Comment on lines
+96
to
+100
| ├── 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
Correct the documented shared-directory paths.
The tree lists src/components and src/lib, but repository guidance uses src/shared/ui and src/shared/lib. Contributors may search the wrong directories and create duplicate components or libraries.
As per coding guidelines, use shared/ui and shared/lib as the single shared locations.
🤖 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 96 - 100, Update the README project tree to document
the shared directories as src/shared/ui and src/shared/lib instead of the
current components and lib paths, while preserving the existing descriptions and
other directory entries.
Source: Coding guidelines
Comment on lines
+103
to
+127
| ## Contributing | ||
|
|
||
| 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. | ||
|
|
||
| 3. **Write or update code.** Reuse the shared components, hooks, and libraries before adding new ones. | ||
|
|
||
| 4. **Verify before committing:** | ||
|
|
||
| ```bash | ||
| pnpm typecheck | ||
| pnpm lint | ||
| pnpm build | ||
| ``` | ||
|
|
||
| All three must pass before you push. See `AGENTS.md` for the known pre-existing lint issues so you don't chase them. | ||
|
|
||
| 5. **Commit with a clear message** matching the repo style (e.g. `feat: add course search`, `refactor: consolidate shared components`). | ||
|
|
||
| 6. **Open a pull request.** Keep PRs small and focused; describe what changed and why. |
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 feat/my-change from main. AGENTS.md requires refactor/frontend-pN-<slug> branches stacked on the previous phase. The README also shows feat: commit examples, while AGENTS.md requires refactor: P<N> <short name>. Keep one workflow authoritative or document when each workflow applies.
🤖 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 103 - 127, Update the README “Contributing” workflow
to match AGENTS.md: describe the required refactor/frontend-pN-<slug> branch
naming and stacking on the previous phase, and replace the feat: commit examples
with the required refactor: P<N> <short name> format. Keep the guidance
consistent and avoid presenting conflicting workflows.
Comment on lines
+109
to
+132
| <Field orientation="horizontal"> | ||
| <Checkbox | ||
| className="data-checked:border-ma-admin-primary data-checked:bg-ma-admin-primary" | ||
| id="authorize-checkbox" | ||
| name="authorize-checkbox" | ||
| /> | ||
| <Label htmlFor="authorize-checkbox"> | ||
| Authorize payment processing at the checkout page{" "} | ||
| </Label> | ||
| </Field> | ||
| </div> | ||
|
|
||
| <div className="flex items-center justify-between"> | ||
| <span>3% Administration fee</span> | ||
| <span>$0.6</span> | ||
| </div> | ||
| <div className="flex items-center justify-between"> | ||
| <span>Total </span> | ||
| <span>$300</span> | ||
| </div> | ||
|
|
||
| <Button className="h-[51px] rounded-[60px] bg-ma-admin-primary hover:bg-ma-admin-primary-dark"> | ||
| Donate Now <ArrowRight /> | ||
| </Button> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n -C 5 --glob '*.{ts,tsx}' \
'DonationForm|Donate Now|checkout|payment|selectedDonationType|custom-amount' \
srcRepository: Smartlify07/Modern-Advocates
Length of output: 50385
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf 'Files matching donation-form:\n'
fd -a 'donation-form\.tsx$|donation' src || true
printf '\nSpecific DonationForm occurrences:\n'
rg -n --glob '*.{ts,tsx}' 'DonationForm|donation-form|authorize-checkbox|custom-amount|selectedDonationType' src || true
printf '\nStatic source sections:\n'
for f in $(fd -a 'donation-form\.tsx$|route\.ts$' src | sed 's#^\./##' | grep 'src/features/marketing/components/donation-form.tsx\|src/app/api/donations/route.ts\|src/infrastructure/database/schema/donation.ts' | head -20); do
echo "===== $f ====="
wc -l "$f"
sed -n '1,220p' "$f"
doneRepository: Smartlify07/Modern-Advocates
Length of output: 9313
Wire DonationForm to the Stripe donation checkout flow.
DonationForm does not read the selected price, custom amount, donation frequency, or authorization checkbox. The $0.6 fee and $300 total are hard-coded and do not match the listed amounts. This form therefore calls ${origin}/donation and submits no usable data, while Donate Now is a no-op. Calculate totals from the selected/custom amount, require authorization, and POST amount, doonorName, donorEmail, and donationType to /api/donations before redirecting to the returned Stripe URL.
🤖 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 109 - 132,
Wire the DonationForm component to read the selected price or custom amount,
donation frequency, donor details, and authorization checkbox; calculate and
display the 3% fee and total dynamically. Require authorization, then have the
Donate Now action POST amount, doonorName, donorEmail, and donationType to
/api/donations, and redirect to the returned Stripe URL instead of remaining a
no-op.
Comment on lines
+96
to
98
| <p className="mt-8 text-sm leading-normal text-nowrap sm:text-base"> | ||
| © All Rights Reserved. 2026, ModernAdvocates Inc | ||
| </p> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Allow the copyright text to wrap on narrow screens.
text-nowrap forces the full copyright string onto one line. The footer has overflow-hidden, so the text can be clipped on mobile widths. Remove text-nowrap or apply it only where the text fits.
🤖 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` around lines 96 - 98, Remove
the text-nowrap class from the copyright paragraph in the footer component so
the copyright text can wrap within the available width on narrow screens, while
preserving the existing typography and responsive classes.
Comment on lines
+7
to
+18
| <section className="relative isolate overflow-hidden bg-[#fefafd] text-ma-text"> | ||
| <div className="absolute inset-0" aria-hidden="true"> | ||
| <Image | ||
| src="/figma-home/hero-life-direction.png" | ||
| alt="A woman sitting and gazing at the sunset" | ||
| fill | ||
| priority | ||
| sizes="100vw" | ||
| className="object-cover object-center lg:object-[72%_center]" | ||
| quality={100} | ||
| /> | ||
| <div className="absolute inset-0 bg-gradient-to-b from-[#fefafd] via-[#fefafd]/60 to-[#fefafd] lg:bg-gradient-to-r lg:from-[#fefafd] lg:from-[0%] lg:via-[#fefafd]/80 lg:via-[16%] lg:to-transparent lg:to-[38%]" /> |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy lift
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== candidate files =="
for f in \
src/features/marketing/components/hero-section.tsx \
src/features/marketing/components/our-vision-section.tsx \
src/features/marketing/components/empowerment-section.tsx \
src/features/marketing/components/practical-pathways-section.tsx \
src/features/marketing/components/stories-from-our-community-section.tsx
do
echo "--- $f ($(wc -l < "$f") lines) ---"
nl -ba "$f" | sed -n '1,190p'
done
echo "== design token definitions =="
git ls-files | rg '\.(css|scss|ts|tsx|s?css)$' | while read -r f; do
grep -nE 'color-m\(.*var\(|var\(--.*\)|--.*:' "$f" 2>/dev/null | head -n 80 || true
done | head -n 400 || true
echo "== token names mentioned in nearby marketing components =="
rg -n --glob '*.{css,scss,ts,tsx}' 'var\(\s*--|bg-\[\w#]+|text-\[\w#]+|fill-\[\w#]+|gap-\[\d' src/features/marketing/components src/shared | head -n 200Repository: Smartlify07/Modern-Advocates
Length of output: 299
🏁 Script executed:
#!/bin/bash
set -euo pipefail
python3 - <<'PY'
import pathlib, re
files = [
"src/features/marketing/components/hero-section.tsx",
"src/features/marketing/components/our-vision-section.tsx",
"src/features/marketing/components/empowerment-section.tsx",
"src/features/marketing/components/practical-pathways-section.tsx",
"src/features/marketing.components/stories-from-our-community-section.tsx",
]
for path in pathlib.Path("src/features/marketing/components").glob("*.tsx"):
text = path.read_text()
tokens = set(re.findall(r'bg-\[([^\]]+)\]|text-\[([^\]]+)\]|fill-\[([^\]]+)\]|gap-\[([^\]]+)\]', text))
vals = {v for t in tokens for v in t if v}
if vals:
print(path, ", ".join(f"{v[:8]+'..' if len(v)>8 else v}" for v in sorted(vals)[:20]))
PYRepository: Smartlify07/Modern-Advocates
Length of output: 2094
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== candidate relevant lines =="
for f in \
src/features/marketing/components/hero-section.tsx \
src/features/marketing/components/our-vision-section.tsx \
src/features/marketing/components/empowerment-section.tsx \
src/features/marketing/components/practical-pathways-section.tsx \
# Fixed path for the last component:
src/features/marketing/components/stories-from-our-community-section.tsx
do
echo "--- $f ---"
awk '{printf "%5d %s\n", NR, $0}' "$f" | sed -n '1,180p'
done
echo "== deterministic count for target arbitrary color/spacing literals =="
python3 - <<'PY'
import pathlib, re
files = [
"src/features/marketing/components/hero-section.tsx",
"src/features/marketing/components/our-vision-section.tsx",
"src/features/marketing/components/empowerment-section.tsx",
"src/features/marketing/components/practical-pathways-section.tsx",
"src/features/marketing/components/stories-from-our-community-section.tsx",
]
rules = [
(re.compile(r'bg-\[([^\]]+)\]', re.I), "bg hex"),
(re.compile(r'text-\[([^\]]+)\]', re.I), "text hex"),
(re.compile(r'fill-\[([^\]]+)\]', re.I), "fill hex"),
(re.compile(r'gap-\[([^\]]+)\]', re.I), "gap arbitrary"),
]
for path_str in files:
path = pathlib.Path(path_str)
print(f"== {path} ==")
for i, line in enumerate(path.read_text().splitlines(), 1):
hits = []
for rule, label in rules:
for m in rule.finditer(line):
hits.append((label, m.group(1), m.start()))
if hits:
hits.sort(key=lambda t: t[2])
print(f"{i}: {' '.join(f'{label}={val}' for label,val,_ in hits)}")
PYRepository: Smartlify07/Modern-Advocates
Length of output: 322
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== deterministic count for target arbitrary color/spacing literals =="
python3 - <<'PY'
import pathlib, re
files = [
"src/features/marketing/components/hero-section.tsx",
"src/features/marketing/components/our-vision-section.tsx",
"src/features/marketing/components/empowerment-section.tsx",
"src/features/marketing/components/practical-pathways-section.tsx",
"src/features/marketing/components/stories-from-our-community-section.tsx",
]
rules = [
(re.compile(r'bg-\[([^\]]+)\]', re.I), "bg hex"),
(re.compile(r'text-\[([^\]]+)\]', re.I), "text hex"),
(re.compile(r'fill-\[([^\]]+)\]', re.I), "fill hex"),
(re.compile(r'gap-\[([^\]]+)\]', re.I), "gap arbitrary"),
]
for path_str in files:
path = pathlib.Path(path_str)
print(f"== {path} ==")
for i, line in enumerate(path.read_text().splitlines(), 1):
hits = []
for rule, label in rules:
for m in rule.finditer(line):
hits.append((label, m.group(1), m.start()))
if hits:
hits.sort(key=lambda t: t[2])
print(f"{i}: {' '.join(f'{label}={val}' for label,val,_ in hits)}")
PYRepository: Smartlify07/Modern-Advocates
Length of output: 1016
Replace arbitrary Tailwind values with repository design tokens.
These marketing components use arbitrary color literals and arbitrary gap-[] values; use semantic color and spacing tokens instead.
src/features/marketing/components/hero-section.tsx#L7-L18/#L23: replacebg-[#fefafd]and arbitrarytext-[...]font-size literals with existing size/color tokens.src/features/marketing/components/our-vision-section.tsx#L5-L8: replacebg-[#111827]and arbitrary font-size literals with existing background/size tokens. If3.5remis intentional, express it through a theme spacing/size token, not an arbitrary class.src/features/marketing/components/empowerment-section.tsx#L27/#L52: replacebg-[#ECE8FF]with a semantic background token.src/features/marketing/components/empowerment-section.tsx#L82/#L108: replacefill-[#F8BD00]andtext-[#F8BD00]with a semantic color token.src/features/marketing/components/empowerment-section.tsx#L137: replacebg-[#201063]with a semantic background token.src/features/marketing/components/empowerment-section.tsx#L173: replacebg-[#F8FAFC]with a semantic background token.src/features/marketing/components/practical-pathways-section.tsx#L5-L8: replacebg-[#111827]and arbitrary font-size literals with existing background/size tokens.src/features/marketing/components/stories-from-our-community-section.tsx#L87/#L117: replacegap-[50px]andgap-[18px]with a semantic spacing token.
📍 Affects 5 files
src/features/marketing/components/hero-section.tsx#L7-L18(this comment)src/features/marketing/components/our-vision-section.tsx#L5-L5src/features/marketing/components/empowerment-section.tsx#L27-L27src/features/marketing/components/empowerment-section.tsx#L82-L82src/features/marketing/components/empowerment-section.tsx#L108-L108src/features/marketing/components/empowerment-section.tsx#L137-L137src/features/marketing/components/empowerment-section.tsx#L173-L173src/features/marketing/components/practical-pathways-section.tsx#L5-L5src/features/marketing/components/stories-from-our-community-section.tsx#L87-L87src/features/marketing/components/stories-from-our-community-section.tsx#L117-L117
🤖 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` around lines 7 - 18,
Replace the listed arbitrary Tailwind color, font-size, and spacing classes with
the repository’s existing semantic design tokens. In
src/features/marketing/components/hero-section.tsx lines 7-18 and 23,
src/features/marketing/components/our-vision-section.tsx line 5, and
src/features/marketing/components/practical-pathways-section.tsx lines 5-8, use
background, text-size, and theme size tokens; in our-vision-section.tsx express
the intentional 3.5rem size through a theme token. In
src/features/marketing/components/empowerment-section.tsx lines 27, 52, 82, 108,
137, and 173, replace the listed background, fill, and text literals with
semantic color tokens. In
src/features/marketing/components/stories-from-our-community-section.tsx lines
87 and 117, replace gap-[50px] and gap-[18px] with semantic spacing tokens,
preserving the existing visual values.
Source: Coding guidelines
|
|
||
| const InvestInHopeSection = () => { | ||
| return ( | ||
| <section className="bg-[#ECE8FF] py-12.5 text-ma-text sm:py-25"> |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Use named design tokens for the new styling values.
The changed TSX embeds a hex color and calculated spacing values. Tailwind defines @theme as the source for project design tokens. (tailwindcss.com) Replace these values with existing tokens or add named tokens to the theme.
src/features/marketing/components/invest-in-hope-section.tsx#L6-L6: replacebg-[#ECE8FF]with the appropriate repository color token.src/features/marketing/components/footer.tsx#L16-L16: replacexl:gap-[calc(1280px-1140px)]with a spacing token or a named layout token.src/features/marketing/components/footer.tsx#L102-L102: replace the calculated-translate-x-[calc(...)]values with named positioning tokens or a layout structure that avoids hard-coded offsets.
As per coding guidelines, TSX and CSS styling must use repository design tokens instead of arbitrary hex colors or spacing.
📍 Affects 2 files
src/features/marketing/components/invest-in-hope-section.tsx#L6-L6(this comment)src/features/marketing/components/footer.tsx#L16-L16src/features/marketing/components/footer.tsx#L102-L102
🤖 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` at line 6,
Replace the arbitrary styling values at
src/features/marketing/components/invest-in-hope-section.tsx:6-6,
src/features/marketing/components/footer.tsx:16-16, and
src/features/marketing/components/footer.tsx:102-102 with existing repository
design tokens, adding named `@theme` tokens where needed. Update the
InvestInHopeSection background to use a color token, Footer’s xl gap to use a
spacing or layout token, and Footer’s calculated translate offsets to use named
positioning tokens or a layout structure that avoids hard-coded offsets.
Source: Coding guidelines
Comment on lines
+12
to
+14
| default: | ||
| "bg-ma-admin-primary text-white hover:bg-ma-admin-primary-dark", | ||
|
|
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n -C 4 --glob '*.{ts,tsx}' \
'<Button|variant=' \
srcRepository: Smartlify07/Modern-Advocates
Length of output: 50384
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== button.tsx =="
cat -n src/shared/ui/button.tsx
echo
echo "== Button variant/default usage summary =="
python3 - <<'PY'
from pathlib import Path
import re
for path in sorted(Path("src").rglob("*.{ts,tsx}")):
text = path.read_text(errors="ignore")
if "<Button" not in text:
continue
lines = text.splitlines()
for i,line in enumerate(lines,1):
if "<Button" in line or re.search(r'\bvariant="([^"]*)"\b', line):
pass
buttons = []
for m in re.finditer(r'<Button(?P<attrs>.*?)/?>', text, re.S):
attrs=m.group('attrs')
var=re.search(r'''variant=['"]([^'"]+)['"]''', attrs)
has_omit=not var
snippet='\n'.join(text.count('\n',0,attrs.find('>') if '>' in attrs else 0)+1 + j for j in text[attrs.find('<'):text.find('>',attrs.find('<))+1].splitlines()[:1]).strip()
# keep first line only
snippet=split_line[0] if (split_line:=snippet.splitlines()) else snippet
buttons.append((str(path), i, has_omit, var.group(1) if var else None, snippet))
for b in buttons:
print(b)
PYRepository: Smartlify07/Modern-Advocates
Length of output: 4546
🏁 Script executed:
#!/bin/bash
set -euo pipefail
python3 - <<'PY'
from pathlib import Path
import re
for path in sorted(Path("src").rglob("*.tsx")):
text = path.read_text(errors="ignore")
if "<Button" not in text:
continue
for m in re.finditer(r'<Button(?P<attrs>[\s\S]*?)\s*(?:/>|>)', text):
attrs = m.group("attrs")
var = re.search(r'variant=["\']([^"\']+)["\']', attrs)
default_variant_not_set = not var
var_or_default = "default" if default_variant_not_set else var.group(1)
line = text.count("\n", 0, m.start()) + 1
snippet = text[m.start():m.start()+220].replace("\n", " ")
print(f"{path}:{line} variant={var_or_default}: {snippet[:180]}")
PYRepository: Smartlify07/Modern-Advocates
Length of output: 21767
Scope this primary default color change carefully.
variant="default" is the fallback for the shared Button and affects non-marketing callers too, such as src/app/(user)/account/page.tsx:194. Keep the shared default unchanged or add a marketing-specific variant if only marketing CTAs should use this color.
🤖 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/shared/ui/button.tsx` around lines 12 - 14, Keep the shared Button’s
variant="default" styling unchanged in the default branch, or introduce and
apply a separate marketing-specific variant for CTAs requiring this color; do
not alter the fallback used by non-marketing callers such as the account page.
This was referenced Aug 7, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Redesign of the public about page.
Changes
Summary by CodeRabbit