Refactored About page

[ComputelessComputer]

Refactored About page to use modular components for improved code organization and maintainability

[netlify]

✅ Deploy Preview for hyprnote ready!

Name	Link
🔨 Latest commit	ff06ac6
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote/deploys/691f00a461a12c00086f711d
😎 Deploy Preview	https://deploy-preview-1753--hyprnote.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

Multiple view routes and components receive UI/UX enhancements. The About view undergoes a significant restructuring from a monolithic layout into modular, component-based sections with a grid/detail split-view pattern. Other route and component files receive minor Tailwind class adjustments and attribute additions for improved styling and behavior.

Changes

Cohort / File(s)	Change Summary
Video component styling apps/web/src/components/video-thumbnail.tsx	Added cursor-pointer class to Play button and removed left-margin (ml-1) from play icon for improved UX and alignment.
About page structural refactor apps/web/src/routes/_view/about.tsx	Refactored monolithic About view into modular components (HeroSection, AboutContentSection, AboutGridView, OurStoryGrid, FoundersGrid, TeamPhotosGrid, AboutDetailView, AboutSidebar, and detail subcomponents). Introduced grid/detail split-view with selection state (SelectedItem union type). Updated founder/team metadata and images. Maintains observable behavior with improved modularity and extensibility.
Docs route layout adjustments apps/web/src/routes/_view/docs/route.tsx	Replaced flex-shrink-0 with shrink-0 on LeftSidebar container and added scrollbar-hide to scroll container for improved layout and scrollbar behavior.
Homepage link and routing apps/web/src/routes/_view/index.tsx, apps/web/src/routes/_view/route.tsx	Added target="_blank" and rel="noopener noreferrer" to heroCTA link in homepage. Removed search={{ section: "us" }} prop from About link in footer.
Press kit navigation apps/web/src/routes/_view/press-kit.tsx	Changed Founders link from /about#founders anchor to /about direct link. Removed separate Founders and Team folders in Press Materials grid, inserting placeholder block to preserve grid structure.

Sequence Diagram

sequenceDiagram
    participant User
    participant GridView as Grid View<br/>(default)
    participant DetailView as Detail View<br/>(on selection)
    participant Panel as Right Panel<br/>(Story/Founder/Photo)

    User->>GridView: Load About page
    GridView->>GridView: Display grid of items<br/>(stories, founders, photos)
    GridView->>User: Show grid with counts
    
    User->>GridView: Click item
    GridView->>DetailView: Select item
    DetailView->>Panel: Render detail component<br/>(StoryDetail/FounderDetail/PhotoDetail)
    Panel->>User: Display split-view layout<br/>with resizable panels
    
    User->>Panel: Click close/download
    Panel->>DetailView: Deselect item
    DetailView->>GridView: Return to grid
    GridView->>User: Show grid view again

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• about.tsx requires careful attention: The large structural refactoring introduces multiple new components (HeroSection, AboutContentSection, AboutGridView, OurStoryGrid, FoundersGrid, TeamPhotosGrid, AboutDetailView, AboutSidebar, AboutDetailPanel, and detail subcomponents). Verify that the new modular structure maintains the intended observable behavior (grid → detail selection flow) and that component composition is correct.
• Metadata and image updates: Ensure founder/profile data migrations are accurate and all image paths are correctly updated.
• Other files are straightforward: video-thumbnail.tsx, docs/route.tsx, index.tsx, press-kit.tsx, and route.tsx contain minor, localized changes that are low-complexity.

Possibly related PRs

• feat(brand): Add comprehensive brand assets and details page #1744: Implements the same grid/detail split-view pattern with SelectedItem union type and resizable detail panels in the Brand view, establishing a parallel architectural pattern.
• landing #1617: Modifies the same apps/web/src/components/video-thumbnail.tsx file, adjusting Play button and icon styling.
• chores #1635: Modifies the same apps/web/src/routes/_view/route.tsx file, making related footer/route changes.

Suggested reviewers

• yujonglee

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch jj-branch-22

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between df75819 and ff06ac6.

📒 Files selected for processing (6)

• apps/web/src/components/video-thumbnail.tsx (1 hunks)
• apps/web/src/routes/_view/about.tsx (3 hunks)
• apps/web/src/routes/_view/docs/route.tsx (1 hunks)
• apps/web/src/routes/_view/index.tsx (1 hunks)
• apps/web/src/routes/_view/press-kit.tsx (1 hunks)
• apps/web/src/routes/_view/route.tsx (0 hunks)

---

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