Rewrite homepage hero copy + add CTA

[dewierwan]

Summary

• Updated H1, added a subtitle, and rewrote the body paragraph in the homepage hero (HomeHeroContent.tsx)
• Added a primary CTA button "Learn where AI is headed" linking to /courses/future-of-ai
• Refreshed the corresponding snapshot

Copy

The most consequential technology in human history is being built right now.
And not enough people work on making it go well.

BlueDot accelerates smart, mission-driven people into impactful work. We run courses, provide career advising, make grants, organise events all over the world, and support entrepreneurs to found new companies.

[Learn where AI is headed →]

Screenshots

	Before	After
📱 Mobile
🖥️ Desktop

Test plan

• npm test in apps/website (102 files, 622 tests pass)
• Playwright viewport sweep at 320 / 480 / 720 / 1024 / 1440 / 1920 — no horizontal overflow at any width
• Visual check at 390 (mobile) and 1280 (desktop) — H1, subtitle, body, and CTA all render and stack correctly

Notes

• Deliberately scoped: did not touch the meta tags / OG title / StorySection copy that still reference "trajectory of AI" — those were out of scope for this PR.
• Re-used the existing per-breakpoint H1 size ramp (40 → 56 → 64 → 72 → 72) without adjustment. The new headline is shorter than the old one once you account for the sentence break, so it fits cleanly.

🤖 Generated with Claude Code

[coderabbitai]

Warning

Rate limit exceeded

@dewierwan has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 21 minutes and 6 seconds before requesting another review.

To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 70597afd-e868-4f63-8740-b65c93e6c00d

📥 Commits

Reviewing files that changed from the base of the PR and between 12583af and d4690a6.

⛔ Files ignored due to path filters (1)

• apps/website/src/components/homepage/__snapshots__/HomeHeroContent.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (1)

• apps/website/src/components/homepage/HomeHeroContent.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch dewi/homepage-header

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[greptile-apps]

Greptile Summary

This PR rewrites the homepage hero copy with a new H1, adds a subtitle paragraph, updates the body text, and introduces a primary CTA button linking to /courses/future-of-ai.

• Copy update: H1 changed to "The most consequential technology in human history is being built right now." with a new subtitle "And not enough people work on making it go well." and refreshed body paragraph.
• New CTA: A styled anchor linking to /courses/future-of-ai with "Learn where AI is headed →" using existing brand colours and hover state.
• Snapshot: Correctly refreshed to match the new DOM structure.

Confidence Score: 4/5

Safe to merge — changes are isolated to hero copy and a new CTA button, with no logic, data, or auth paths affected.

The only structural change beyond text is the new CTA anchor. Using a plain <a> instead of Next.js Link for an internal route causes a full-page reload, and the subtitle is missing the slide-up-fade-in animation class that the H1 carries — neither is a blocking defect, but both are worth addressing before merge.

apps/website/src/components/homepage/HomeHeroContent.tsx — the new <a> tag and subtitle animation deserve a second look.

Important Files Changed

Filename	Overview
apps/website/src/components/homepage/HomeHeroContent.tsx	Updated hero copy, added subtitle paragraph and new CTA anchor; the CTA uses a plain <a> tag for an internal Next.js route (full-page reload) and the subtitle lacks the slide-up-fade-in animation present on the H1.
apps/website/src/components/homepage/snapshots/HomeHeroContent.test.tsx.snap	Snapshot correctly updated to reflect all new DOM nodes (subtitle p, body copy change, and CTA anchor).

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[HomeHeroContent] --> B[Nav]
    A --> C[Hero Container]
    C --> D["H1 — slide-up-fade-in animation"]
    C --> E["Subtitle p — no animation class"]
    C --> F[Body p]
    C --> G["CTA anchor /courses/future-of-ai"]
    C --> H[GraduateSection]
    G -->|"full-page reload via plain a tag"| I["Future of AI course page"]

Loading

_{Reviews (1): Last reviewed commit: "[chore] PR #2417: screenshots" | Re-trigger Greptile}

[dewierwan]

@claude review

[greptile-apps]

Missing animation on subtitle paragraph

The H1 carries the slide-up-fade-in class, but the new subtitle <p> ("And not enough people…") has no animation class. On page load the H1 will animate in while the subtitle appears instantly beside it, which may look jarring since the two lines are visually paired as a single thought. If the animation is intentional only on the H1 that's fine, but worth confirming.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

[greptile-apps]

The CTA uses a plain <a> tag for an internal route, which triggers a full-page reload in Next.js instead of a client-side transition. Other files in this codebase that need client-side navigation import Link from next/link. Given that course lander pages can be heavy (images, fonts, data fetching), the full-page reload is noticeably slower than a soft navigation.

Suggested change

	<a
	href="/courses/future-of-ai"
	className="inline-flex items-center gap-2 px-6 py-3.5 rounded-md bg-bluedot-normal text-white text-size-sm bd-md:text-size-md font-medium hover:bg-bluedot-dark transition-colors duration-200 mt-2"
	>
	Learn where AI is headed
	<span aria-hidden="true">→</span>
	</a>
	<Link
	href="/courses/future-of-ai"
	className="inline-flex items-center gap-2 px-6 py-3.5 rounded-md bg-bluedot-normal text-white text-size-sm bd-md:text-size-md font-medium hover:bg-bluedot-dark transition-colors duration-200 mt-2"
	>
	Learn where AI is headed
	<span aria-hidden="true">→</span>
	</Link>

[claude]

Claude finished @dewierwan's task —— View job

---

Reviewing PR: Homepage hero copy rewrite + CTA

Review Tasks:

• Read modified files and understand changes
• Analyze code quality and best practices
• Check against repo guidelines
• Provide comprehensive feedback

---

Code Review Feedback

Overall, this is a clean implementation that successfully updates the homepage hero copy and adds a CTA button. The copy changes are well executed, and the code follows most of the existing patterns. However, there are two technical improvements to consider:

🔍 Issues Found

1. Navigation Pattern Inconsistency (apps/website/src/components/homepage/HomeHeroContent.tsx:50-56)

<a
  href="/courses/future-of-ai"
  className="inline-flex items-center gap-2 px-6 py-3.5 rounded-md bg-bluedot-normal text-white text-size-sm bd-md:text-size-md font-medium hover:bg-bluedot-dark transition-colors duration-200 mt-2"
>

The CTA uses a plain <a> tag instead of Next.js Link for internal navigation. This causes a full-page reload instead of client-side navigation. Other components in the codebase use Link from next/link for internal routes (confirmed in AlumniStoryCarousel.tsx and others).

Recommendation: Import and use Link from next/link for better performance:

import Link from 'next/link';

<Link
  href="/courses/future-of-ai" 
  className="inline-flex items-center gap-2 px-6 py-3.5 rounded-md bg-bluedot-normal text-white text-size-sm bd-md:text-size-md font-medium hover:bg-bluedot-dark transition-colors duration-200 mt-2"
>
  Learn where AI is headed
  <span aria-hidden="true">→</span>
</Link>

2. Animation Inconsistency (apps/website/src/components/homepage/HomeHeroContent.tsx:35-40)

<p
  className="w-full text-[24px] bd-md:max-[1023px]:text-[32px] min-[1024px]:max-[1279px]:text-[36px] min-[1280px]:max-[1439px]:text-[40px] min-[1440px]:text-[40px] leading-[125%] font-normal tracking-[-0.5px] text-white/90"
>
  And not enough people work on making it go well.
</p>

The subtitle paragraph lacks the slide-up-fade-in animation class that the H1 has. Since these two elements form a cohesive headline ("The most consequential technology..." + "And not enough people..."), they should animate together for visual consistency.

Recommendation: Add animation class to subtitle or consider if this is intentional for design reasons.

✅ Strengths

1. Consistent Styling Patterns: The responsive breakpoint classes follow the existing complex sizing pattern used throughout the hero component
2. Proper Design Token Usage: Uses design tokens like text-size-sm, bg-bluedot-normal, etc. as per CLAUDE.md guidelines
3. Accessibility: Good use of aria-hidden="true" on the arrow icon
4. Typography: Maintains the existing typographic hierarchy with appropriate font weights and tracking
5. Visual Testing: Excellent screenshot documentation and thorough viewport testing mentioned in the PR

🎯 Minor Considerations

• The use of raw pixel values in the subtitle is consistent with the existing H1 pattern (both have eslint-disable comments explaining why)
• Color choices (text-white/90 for subtitle) create good visual hierarchy
• Spacing and layout follow the existing container patterns

Final Assessment

This is a solid implementation with well-crafted copy that improves the homepage messaging. The technical issues are minor but worth addressing for consistency with Next.js best practices and the existing codebase patterns. The animation consistency question could be intentional from a design perspective.

Recommendation: Approve with the navigation fix implemented. The animation issue can be addressed based on design intent.

---

[dewierwan]

Addressed Greptile's two P2 findings in d4690a6:

• Switched the CTA from <a> to next/link <Link> so course-page navigation is client-side.
• Added slide-up-fade-in to the subtitle so it animates in alongside the H1.

CodeRabbit was rate-limited; will let it re-run on its own clock.

[Will-Howard]

One blocker: on my regular MacBook screen width, the section ends up with no padding at the top and bottom (it looks better on smaller screen widths):

One nit: Could you use CTALinkOrButton instead of a plain link? It's our default button-like component, and comes with the consistent styles we want:

<CTALinkOrButton
  variant="primary"
  size="large"
  withChevron
  url="/courses/future-of-ai"
  className="mt-2 bd-md:text-size-md"
>
  Learn where AI is headed
</CTALinkOrButton>

[dewierwan]

@Will-Howard thanks for noting this! Still working on this, I agree the design doesn't quite work yet. Consider this to still be in "draft" mode.

[Will-Howard]

Would you mind converting it to a proper draft? If you do, you can trigger the AI reviews with (dots removed) @.coderabbitai review / @.greptileai review as needed