feat: add About page for Maple AI marketing site#161
Conversation
- Create /about route with sections for inspiration, founders, company, and programs - Include placeholders for founder photos, names, titles, and descriptions - Add OpenSecret company section with link to https://opensecret.cloud - Include developer programs section for Nvidia Inception and Google Cloud - Follow existing design patterns from /proof page - Generate updated route tree for TanStack Router 🤖 Generated with [Claude Code](https://claude.ai/code) Co-authored-by: Marks <marksftw@users.noreply.github.com>
WalkthroughA new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Router
participant AboutComponent
User->>Router: Navigates to "/about"
Router->>AboutComponent: Renders About page
AboutComponent-->>User: Displays marketing, founders, company, programs, and footer
Estimated code review effort🎯 2 (Simple) | ⏱️ ~20 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes detected. All code changes align with the objectives defined in the linked issue #160. Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Summary
This PR adds a new /about page to the Maple AI marketing site. The changes consist of:
- Adding route configuration in
routeTree.gen.tsfor the new/aboutpage using TanStack Router - Creating a new
about.tsxcomponent with sections for:- Maple tree inspiration story
- Founder profiles (with placeholders)
- OpenSecret company information
- Developer program affiliations (NVIDIA Inception, Google Cloud)
- Austin location footer
The implementation follows existing design patterns from the /proof page, utilizing shared components like TopNav, FullPageMain, and MarketingHeader for consistency. The changes integrate well with the existing marketing components structure shown in Marketing.tsx.
PR Description Notes:
- The PR description could benefit from mentioning which images/assets still need to be added for the placeholder sections
Confidence score: 4/5
- This PR is safe to merge as it only adds new marketing content with no critical functionality changes
- Score of 4 given because while the code structure is solid, there are placeholder sections that need content review before going live
- The about.tsx file needs product/marketing review to ensure placeholder content is replaced with final copy
2 files reviewed, no comments
Edit PR Review Bot Settings | Greptile
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/src/routes/about.tsx (1)
31-37: Several lines exceed the 100-character limit.Lines 31-37 (and a few other long utility-class rows) run well over the stated 100-char guideline for JS/TS files. Consider breaking the
classNamestring onto multiple lines or using a helper (e.g.,clsx) to keep line length in check.No functional issue, just formatting debt.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
frontend/src/routeTree.gen.ts(13 hunks)frontend/src/routes/about.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- CLAUDE.md
**/*.{ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- CLAUDE.md
🧠 Learnings (2)
frontend/src/routes/about.tsx (2)
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.905Z
Learning: Applies to src/components/**/*.{tsx} : Use React functional components with hooks
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.905Z
Learning: Applies to src/**/*.{tsx} : Use React context for global state management when needed
frontend/src/routeTree.gen.ts (1)
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.905Z
Learning: Applies to src/**/*.{ts,tsx,js,jsx} : Use path aliases (e.g., `@/*` maps to `./src/*`) for imports
🔇 Additional comments (1)
frontend/src/routeTree.gen.ts (1)
1-10: Generated file – no manual edits needed.Looks good; commit is expected since a new route was introduced. Ensure your lint/format ignore list still excludes this file so the build won’t flag it.
|
|
Claude finished @marksftw's task —— View job ✅ Code Review Fixes CompleteAll requested code review issues have been addressed: Todo List
Summary of Changes1. Fixed TypeScript Issues:
2. Fixed Line Length Issues:
3. Improved Maple Tree Inspiration Text:
4. Quality Assurance:
All code review feedback has been addressed and the About page now meets the project's coding standards. |
- Add explicit JSX.Element return type to About function - Fix long lines exceeding 100-character limit by formatting className strings - Improve Maple tree inspiration text with better narrative and clarity 🤖 Generated with [Claude Code](https://claude.ai/code) Co-authored-by: Marks <marksftw@users.noreply.github.com>
There was a problem hiding this comment.
Greptile Summary
Recent changes to this PR focus on improving the content and formatting of the new About page:
- The inspiration text has been expanded to be more engaging while maintaining the core metaphor about maple trees and secure communication
- TypeScript return type annotations have been added for better type safety
- Complex className strings have been reformatted and split for improved readability and maintainability
- External links have been properly configured with security attributes (target="_blank", rel="noopener noreferrer")
Confidence score: 4/5
- The changes are focused on content and code quality improvements with no functional risks
- Score maintained at 4 as the core implementation remains solid with improved type safety and formatting
- The about.tsx file still needs final content review for the placeholder sections
1 file reviewed, no comments
Edit PR Review Bot Settings | Greptile
Deploying maple with
|
| Latest commit: |
e7aae38
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://bde76d90.maple-ca8.pages.dev |
| Branch Preview URL: | https://claude-issue-160-20250720-19.maple-ca8.pages.dev |
There was a problem hiding this comment.
Greptile Summary
The latest changes to this PR significantly upgrade the About page content from placeholder to production-ready state:
- Real founder information: Placeholder founder profiles have been replaced with actual names, photos, and detailed descriptions for the founding team
- Enhanced maple tree section: The inspiration story has been refined with more engaging copy while maintaining the core metaphor
- Production-ready content: All sections now contain real information rather than placeholders, including actual founder photos and comprehensive descriptions
- Maintained design consistency: The page continues to follow the established design patterns from the
/proofpage and integrates well with the existing marketing site structure
The About page now serves as a complete marketing asset that builds credibility through real founder introductions, explains the product's philosophical foundation, showcases company partnerships, and provides transparency about the team behind Maple AI.
Confidence score: 4/5
- This PR is safe to merge as it transforms placeholder content into production-ready marketing material without introducing functional risks
- Score of 4 maintained because while the content is now complete and professional, the page still lacks navigation integration in TopNav for user discoverability
- The about.tsx file is production-ready but would benefit from adding a navigation link in the main site header
1 file reviewed, 2 comments
| <h4 className="text-xl font-medium mb-1">Mark Suman</h4> | ||
| <p className="text-[hsl(var(--marketing-text-muted))] mb-3">CEO</p> | ||
| <p className="text-sm leading-relaxed max-w-xs"> | ||
| Early employee in Product and Engineering at multiple startups. 6 years in software engineering at Apple with a focus on AI and Privacy. |
There was a problem hiding this comment.
syntax: Missing leading whitespace for consistent indentation
| <h4 className="text-xl font-medium mb-1">Anthony Ronning</h4> | ||
| <p className="text-[hsl(var(--marketing-text-muted))] mb-3">CTO</p> | ||
| <p className="text-sm leading-relaxed max-w-xs"> | ||
| Infrastructure engineer in many startups over the last 9 years. Previous experience in defense, security, networking, and bitcoin companies. |
There was a problem hiding this comment.
syntax: Missing leading whitespace for consistent indentation
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/routes/about.tsx (1)
49-91: Consider adding fallback handling for founder images.The founders section is well-structured with good accessibility practices. However, consider adding error handling for the images in case
/mark.jpgor/anthony.jpgfail to load.Add a fallback approach:
<img src="/mark.jpg" alt="Mark, Co-founder of Maple AI" className="w-32 h-32 rounded-full object-cover border-4 border-[hsl(var(--purple))]" + onError={(e) => { + e.currentTarget.src = '/placeholder-avatar.jpg'; + }} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
frontend/public/anthony.jpgis excluded by!**/*.jpgfrontend/public/mark.jpgis excluded by!**/*.jpgfrontend/public/opensecret-logo.pngis excluded by!**/*.png
📒 Files selected for processing (1)
frontend/src/routes/about.tsx(1 hunks)
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx}: Use 2-space indentation, double quotes, and a 100-character line limit for formatting
Use camelCase for variable and function names
Use try/catch with specific error types for error handling
Files:
frontend/src/routes/about.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Use strict TypeScript typing and avoid
anywhen possible
Files:
frontend/src/routes/about.tsx
🧠 Learnings (1)
frontend/src/routes/about.tsx (5)
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to src/components/**/*.{tsx} : Use React functional components with hooks
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to src/**/*.{tsx} : Use React context for global state management when needed
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to **/*.{ts,tsx} : Use strict TypeScript typing and avoid any when possible
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to src/components/**/*.{tsx} : Use PascalCase for component names
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use camelCase for variable and function names
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx}: Use 2-space indentation, double quotes, and a 100-character line limit for formatting
Use camelCase for variable and function names
Use try/catch with specific error types for error handling
Files:
frontend/src/routes/about.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Use strict TypeScript typing and avoid
anywhen possible
Files:
frontend/src/routes/about.tsx
🧠 Learnings (1)
frontend/src/routes/about.tsx (5)
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to src/components/**/*.{tsx} : Use React functional components with hooks
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to src/**/*.{tsx} : Use React context for global state management when needed
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to **/*.{ts,tsx} : Use strict TypeScript typing and avoid any when possible
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to src/components/**/*.{tsx} : Use PascalCase for component names
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use camelCase for variable and function names
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: build-macos (universal-apple-darwin)
- GitHub Check: build-linux
- GitHub Check: browseruse-tests
- GitHub Check: build-ios
- GitHub Check: Cloudflare Pages
🔇 Additional comments (7)
frontend/src/routes/about.tsx (7)
1-8: LGTM! Clean imports and route setup.The imports follow project conventions with proper absolute imports and the route configuration is correctly structured for TanStack Router.
10-13: LGTM! Component signature follows TypeScript best practices.The function signature correctly includes the JSX.Element return type annotation, addressing the previous code review feedback for strict TypeScript compliance.
14-27: LGTM! Marketing header implementation is well-structured.The header uses proper heading hierarchy, consistent theming with CSS custom properties, and the subtitle content aligns with the Maple AI brand messaging about privacy and confidentiality.
29-47: Excellent improvement to the Maple tree inspiration content.The revised text is significantly more polished and professional compared to the original version mentioned in the PR objectives. The metaphor now flows naturally from maple trees' underground networks to Maple AI's vision of secure, decentralized intelligence, creating a stronger brand connection.
93-124: Well-implemented OpenSecret section with proper link security.The external link correctly includes
target="_blank"andrel="noopener noreferrer"for security. The content clearly explains the relationship between Maple AI and OpenSecret.Note: The same image fallback consideration from the founders section applies to the OpenSecret logo at
/opensecret-logo.png.
126-156: LGTM! Developer programs section is visually appealing and well-structured.The gradient backgrounds provide good brand recognition for NVIDIA and Google Cloud programs, and the responsive flex layout handles different screen sizes appropriately.
158-163: LGTM! Footer provides nice branding touch.The Austin location reference with "Secure Enclaves" reinforces the privacy and security messaging while adding a personal touch to the company story.
There was a problem hiding this comment.
Greptile Summary
The most recent changes to this PR focus on transitioning from placeholder to real NVIDIA branding assets:
- NVIDIA logo implementation: The placeholder gradient for NVIDIA Inception has been replaced with an actual NVIDIA logo image file (
nvidia-logo.png), indicating a move toward production-ready branding - Asset integration: The image is properly implemented with appropriate styling (
h-8 w-auto) and maintains the existing card layout structure - Visual consistency: The change preserves the overall design while upgrading from a temporary gradient to professional branding that matches the program affiliation
This change completes the visual polish of the About page by replacing development placeholders with actual partner logos, making the page more credible and professional for users.
Confidence score: 4/5
- This change is safe to merge as it only upgrades visual assets without functional modifications
- Score maintained at 4 because the logo implementation is properly done and follows existing patterns, though the page still needs navigation integration
- The about.tsx file continues to be production-ready with improved visual branding
1 file reviewed, no comments
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
frontend/src/routes/about.tsx (2)
69-71: Indentation appears correct despite past review comment.The indentation on line 70 follows the 2-space guideline correctly. The past review comment about missing leading whitespace may be outdated.
85-87: Indentation appears correct despite past review comment.The indentation on line 86 follows the 2-space guideline correctly. The past review comment about missing leading whitespace may be outdated.
🧹 Nitpick comments (1)
frontend/src/routes/about.tsx (1)
39-46: Improve the Maple tree inspiration narrative for stronger impact.The current text makes a good connection between maple trees and AI privacy, but it could be more compelling and specific about how this natural model translates to the technical approach.
Consider this more impactful version:
- Maple trees form vast underground networks, sharing resources and - communicating through their interconnected root systems to thrive in challenging - environments. Maple AI draws inspiration from this natural model of secure, - decentralized intelligence. We believe AI should preserve the fundamental human right to - freedom of thought by upholding the highest standards of privacy and - confidentiality. + In nature's most resilient forests, maple trees share resources and communicate + through encrypted underground networks, surviving harsh conditions while maintaining + their individual identity. This inspired our vision: AI that operates like these + natural networks—intelligent, collaborative, yet fundamentally private. Just as maple + trees never compromise their core identity while sharing resources, Maple AI ensures + your thoughts remain yours while delivering powerful intelligence. Freedom of thought + isn't just a right—it's the foundation of human creativity and progress.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
frontend/public/nvidia-inception.pngis excluded by!**/*.png
📒 Files selected for processing (1)
frontend/src/routes/about.tsx(1 hunks)
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx}: Use 2-space indentation, double quotes, and a 100-character line limit for formatting
Use camelCase for variable and function names
Use try/catch with specific error types for error handling
Files:
frontend/src/routes/about.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Use strict TypeScript typing and avoid
anywhen possible
Files:
frontend/src/routes/about.tsx
🧠 Learnings (1)
frontend/src/routes/about.tsx (5)
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to src/components/**/*.{tsx} : Use React functional components with hooks
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to **/*.{ts,tsx} : Use strict TypeScript typing and avoid any when possible
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to src/components/**/*.{tsx} : Use PascalCase for component names
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use camelCase for variable and function names
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use 2-space indentation, double quotes, and a 100-character line limit for formatting
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx}: Use 2-space indentation, double quotes, and a 100-character line limit for formatting
Use camelCase for variable and function names
Use try/catch with specific error types for error handling
Files:
frontend/src/routes/about.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Use strict TypeScript typing and avoid
anywhen possible
Files:
frontend/src/routes/about.tsx
🧠 Learnings (1)
frontend/src/routes/about.tsx (5)
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to src/components/**/*.{tsx} : Use React functional components with hooks
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to **/*.{ts,tsx} : Use strict TypeScript typing and avoid any when possible
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to src/components/**/*.{tsx} : Use PascalCase for component names
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use camelCase for variable and function names
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use 2-space indentation, double quotes, and a 100-character line limit for formatting
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (4)
frontend/src/routes/about.tsx (4)
1-8: Clean route setup and imports.The imports and route configuration follow standard patterns and are correctly structured.
10-28: Well-structured component with proper typing.The component follows React functional component patterns with explicit return type annotation, addressing the strict TypeScript typing requirements.
93-165: Well-implemented company information and affiliate sections.The OpenSecret section properly handles external links with security attributes, developer programs are clearly presented, and the Austin footer adds nice local character. Styling is consistent throughout.
1-171: Excellent adherence to coding guidelines and React best practices.The implementation follows all specified guidelines: 2-space indentation, functional components with hooks, proper TypeScript typing, camelCase naming, and security best practices for external links.
There was a problem hiding this comment.
Greptile Summary
The latest changes to this PR further refine the About page's developer programs section by upgrading the Google Cloud for Startups branding:
- Google Cloud logo upgrade: The placeholder text "Google Cloud for Startups" has been replaced with an actual Google Cloud logo image (
google-cloud-logo.png), completing the visual branding transformation that began with the NVIDIA logo in the previous iteration - Consistent logo treatment: The Google Cloud logo follows the same styling pattern as the NVIDIA logo (
h-8 w-auto) and maintains the established card layout structure for visual consistency - Professional partner showcase: Both developer program affiliations now display with authentic partner logos rather than text placeholders, creating a more credible and polished presentation
This change represents the final step in transforming the About page from a development prototype with placeholder content to a production-ready marketing asset with professional branding throughout all sections.
Confidence score: 4/5
- This change is safe to merge as it only replaces placeholder text with a professional logo image without any functional modifications
- Score maintained at 4 because the logo implementation follows established patterns and completes the visual polish, though navigation integration remains needed
- The about.tsx file is now fully production-ready with complete branding assets for all partner programs
1 file reviewed, no comments
|
@claude Add a link to |
|
Claude finished @marksftw's task —— View job ✅ About Link Added to FooterSuccessfully added the "About" link to the footer's Resources section as requested. Todo List
Summary of ChangesAdded About Link to Footer:
Quality Assurance:
The About link is now available in the footer under Resources and will navigate users to the newly created About page at |
Add /about link as the final item in the footer's Resources section to improve navigation and discoverability of the About page. Co-authored-by: Marks <marksftw@users.noreply.github.com>
There was a problem hiding this comment.
Greptile Summary
The most recent changes to this PR complete the About page implementation by adding navigation integration:
- Footer navigation addition: The Footer component has been updated to include an "About" link in the Resources section, positioned alongside existing informational links like Blog, OpenSecret, and Community
- Consistent navigation pattern: The new link follows the established footer styling with proper hover effects (
hover:text-foreground transition-colors) and semantic structure using the TanStack RouterLinkcomponent - User discoverability: This change addresses the navigation gap identified in previous reviews by providing users a clear path to discover and access the new About page from any page that includes the footer
- Strategic placement: The About link is appropriately placed in the Resources section rather than the main navigation, which is suitable for informational content about the company and product
The About page itself has also received minor text formatting improvements, with long paragraphs broken into shorter, more readable segments and a quote style change from single to double quotes. The content remains complete with real founder information (Mark Suman as CEO, Anthony Ronning as CTO) and all required sections including maple tree inspiration, company information, developer programs, and Austin footer.
Confidence score: 5/5
- This PR is completely safe to merge as it only adds navigation links and improves text formatting without any functional risks
- Score upgraded to 5 because the About page is now fully complete with navigation integration, real content, and professional branding
- No files need additional attention as both the navigation and content implementation follow established patterns
2 files reviewed, no comments
There was a problem hiding this comment.
Greptile Summary
This PR adds a new /about page to the Maple AI marketing site, implementing all requested sections from issue #160. The new page follows the established design patterns from the existing /proof page, using consistent styling and component structure.
The About page includes:
- Maple tree inspiration section: Explains the product name's connection to maple trees and their symbolism of growth and resilience
- Founders section: Placeholder profiles for Mark and Anthony with headshots and brief descriptions
- OpenSecret company information: Details about the parent company including their mission and focus on privacy-first solutions
- Developer programs: Showcases credibility through participation in Nvidia Inception and Google Cloud for Startups programs
- Austin footer: Adds location-based branding with "Made with ❤️ in Austin, Texas"
The implementation reuses existing components like MarketingHeader and FullPageMain, maintaining visual consistency across the marketing site. The page structure uses the same card-based layout with consistent CSS classes (bg-card, border, rounded-lg, etc.) as other marketing pages.
Navigation has been enhanced to include the About page, making it accessible from the main site navigation. This adds essential company information that users typically expect to find on a marketing site's About page.
Confidence score: 3/5
- This PR is moderately safe to merge but has some issues that should be addressed before deployment
- The score reflects concerns about hardcoded image references that may result in broken images, and minor formatting inconsistencies that were noted in previous reviews
- Files needing attention:
frontend/src/routes/about.tsx- verify all image assets exist in the public directory and consider adding alt text for accessibility
1 file reviewed, no comments
There was a problem hiding this comment.
Greptile Summary
This PR adds a new /about page to the Maple AI marketing site that provides comprehensive information about the company, its founders, and background. The implementation follows the established design patterns from the existing /proof page, using the MarketingHeader component and consistent CSS styling with CSS variables for theming.
The About page includes five main sections: a maple tree inspiration section explaining the product name's origin, a founders section with detailed profiles for CEO Mark Suman and CTO Anthony Ronning (including photos and backgrounds), an OpenSecret company section with logo and external link, a developer programs section showcasing partnerships with Nvidia Inception and Google Cloud for Startups, and an Austin footer highlighting the company's Texas location.
The page integrates seamlessly with the existing navigation structure by adding an "About" link to the Footer component's Resources section. The implementation uses responsive grid layouts, proper semantic HTML structure, and follows the same CSS variable system (--color-*) used throughout the application for consistent theming. The component is properly typed as a React functional component returning JSX.Element and uses standard React patterns without any state management or side effects.
This addition enhances the marketing site by providing visitors with credibility-building information about the company, its leadership, and technical partnerships, which is essential for a security-focused AI chat application where trust is paramount.
Confidence score: 4/5
- This PR is safe to merge with minimal risk of production issues
- The implementation follows established patterns, uses semantic HTML, and includes proper responsive design
- The only minor concern is the hardcoded image URLs which could become broken links if the images are moved or deleted
1 file reviewed, no comments
There was a problem hiding this comment.
Greptile Summary
This PR adds a new /about page to the Maple AI marketing site to provide company and product background information. The implementation creates a comprehensive About page (frontend/src/routes/about.tsx) that follows the existing design patterns established by the /proof page.
The About page includes several key sections:
- Product inspiration: Explains how Maple AI draws inspiration from maple trees and their symbolism of privacy and security
- Founders section: Features profiles for Mark Suman and Anthony Ronning with their roles, backgrounds, and social media links (X/Twitter and LinkedIn)
- Company information: Details about OpenSecret, the company behind Maple AI, with external links
- Developer programs: Showcases partnerships with Nvidia Inception and Google Cloud programs to establish credibility
- Location footer: Indicates the Austin-based location
The implementation uses consistent styling with Tailwind CSS classes, follows responsive design patterns already established in the codebase, and maintains the same card-based section layout used throughout the marketing site. The page integrates seamlessly with the existing routing structure and uses proper accessibility attributes.
Confidence score: 4/5
- This PR appears safe to merge with minimal risk of breaking existing functionality
- The score reflects that this is a straightforward addition of a static marketing page that follows established patterns, though the placeholder images and external links should be verified
- The
frontend/src/routes/about.tsxfile needs attention to ensure placeholder content is finalized and external links are valid
1 file reviewed, no comments
There was a problem hiding this comment.
Greptile Summary
This PR introduces a comprehensive /about page for the Maple AI marketing site that addresses issue #160. The new page includes several key sections: a maple tree inspiration story explaining the product's naming origin, founder profiles for CEO Mark Suman and CTO Anthony Ronning with their professional backgrounds and social media links, OpenSecret company information with external linking, developer program affiliations (Nvidia Inception, Google Cloud), and an Austin-based location footer.
The implementation follows established design patterns from the existing /proof page, using the same MarketingHeader component structure and consistent CSS classes for styling. The page maintains visual consistency with the rest of the marketing site through the use of existing card styling classes and responsive grid layouts. The founder section goes beyond basic placeholder content by including real professional information, profile images, and integrated social media icons (X/Twitter and LinkedIn) implemented as custom SVG components that respect the site's theming system.
The page integrates well with the existing codebase architecture, using the same routing patterns and component structure as other marketing pages. All external links properly implement security best practices with target="_blank" and rel="noopener noreferrer" attributes. The developer program section showcases the company's credibility through logos and affiliations, while the location footer adds a personal touch by highlighting the Austin-based team.
Confidence score: 4/5
• This PR is safe to merge with minimal risk of production issues
• The code follows established patterns, uses proper security practices, and maintains consistency with existing components
• No critical files need additional attention - the implementation is well-structured and follows React best practices
1 file reviewed, no comments
There was a problem hiding this comment.
Greptile Summary
This PR adds a new /about page to the Maple AI marketing site, implementing all sections requested in issue #160. The page follows the established design patterns from the existing /proof page, maintaining consistency with the marketing site's visual hierarchy and component structure.
The new about page includes five key sections: a Maple tree inspiration section that explains the product's naming through the metaphor of maple trees' underground communication networks representing secure AI communication; a founders section with real profile information and social media links; an OpenSecret company section with external linking; a developer programs section showcasing partnerships with Nvidia Inception and Google Cloud (with logo placeholders); and an Austin footer reinforcing the company's geographic identity.
The implementation integrates seamlessly with the existing codebase by reusing the MarketingHeader component for consistent page titles, following the same card-based layout system used throughout the marketing site, and utilizing the established Tailwind CSS classes for responsive design. The About link has been properly added to the footer navigation under the Resources section, ensuring discoverability within the site's information architecture.
The page serves multiple strategic purposes: building brand narrative through the maple tree metaphor, establishing credibility through founder profiles and company backing, demonstrating legitimacy via developer program partnerships, and reinforcing the Austin-based company identity.
Confidence score: 5/5
- This PR is extremely safe to merge with no visible code quality or functionality issues.
- The implementation follows established patterns perfectly, uses consistent styling, and addresses all previous review feedback including TypeScript return type annotation.
- No files need additional attention as the code is well-structured and follows project conventions.
1 file reviewed, no comments
There was a problem hiding this comment.
Greptile Summary
This PR adds a comprehensive About page to the Maple AI marketing site, addressing issue #160. The implementation includes three new files: a new /about route component and two social media icon components (X.tsx and LinkedIn.tsx).
The About page follows the established design patterns from the existing /proof page and integrates seamlessly with the current routing structure. It contains several key sections:
- Maple tree inspiration section: Explains the product naming and philosophy
- Founders section: Profiles for Mark Suman and Anthony Ronning with social media links
- OpenSecret company information: Background about the parent company
- Developer programs: Highlights affiliations with Nvidia Inception and Google Cloud
- Austin location footer: Adds geographic context
The social media icon components (X.tsx and LinkedIn.tsx) are implemented as reusable React components following the same pattern as other icons in the codebase. They use proper TypeScript typing with React.SVGProps<SVGSVGElement>, include accessibility attributes (aria-hidden="true"), and maintain consistent 24x24 viewBox dimensions. These components replace what would have been inline SVG code in the About page, improving maintainability and reusability.
The About page component uses the same layout structure and Tailwind CSS styling patterns as the existing marketing pages, ensuring visual consistency across the site. The implementation properly handles navigation integration and follows React best practices.
Confidence score: 5/5
- This PR is very safe to merge with minimal risk of production issues
- The implementation follows established patterns, uses proper TypeScript typing, and includes comprehensive content without any apparent technical issues
- No files require additional attention - all components are well-structured and follow project conventions
3 files reviewed, no comments
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
frontend/src/components/icons/X.tsx (1)
16-17: Consider adding verification comment for SVG scaling.The comment mentions scaling from "1200x1227 to fit 24x24" but doesn't indicate how the scaling factor was calculated or verified. Consider adding a brief note about the scaling method for future maintainers.
- {/* The path is scaled down from the original 1200x1227 to fit 24x24 */} + {/* The path is scaled down from the original 1200x1227 to fit 24x24 (scale factor ~0.02) */}frontend/src/components/icons/LinkedIn.tsx (1)
4-4: Fix inconsistent comment about fill color.The comment mentions "white fill" but the component actually uses
currentColorwhich inherits the current text color, not necessarily white.- // Official LinkedIn [in] logo SVG, white fill, scalable + // Official LinkedIn [in] logo SVG, inherits current text color, scalable
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
frontend/src/components/icons/LinkedIn.tsx(1 hunks)frontend/src/components/icons/X.tsx(1 hunks)frontend/src/routes/about.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/routes/about.tsx
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx}: Use 2-space indentation, double quotes, and a 100-character line limit for formatting
Use camelCase for variable and function names
Use try/catch with specific error types for error handling
Files:
frontend/src/components/icons/X.tsxfrontend/src/components/icons/LinkedIn.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Use strict TypeScript typing and avoid
anywhen possible
Files:
frontend/src/components/icons/X.tsxfrontend/src/components/icons/LinkedIn.tsx
🧠 Learnings (2)
📚 Learning: applies to src/components/**/*.{tsx} : use react functional components with hooks...
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to src/components/**/*.{tsx} : Use React functional components with hooks
Applied to files:
frontend/src/components/icons/X.tsxfrontend/src/components/icons/LinkedIn.tsx
📚 Learning: applies to src/**/*.{tsx} : use react context for global state management when needed...
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to src/**/*.{tsx} : Use React context for global state management when needed
Applied to files:
frontend/src/components/icons/X.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: build-linux
- GitHub Check: build-macos (universal-apple-darwin)
- GitHub Check: build-ios
- GitHub Check: browseruse-tests
🔇 Additional comments (2)
frontend/src/components/icons/X.tsx (1)
1-20: Well-implemented icon component with proper accessibility.The component follows React best practices and coding guidelines correctly. The TypeScript typing, accessibility features (aria-hidden, title), and currentColor usage are all appropriate.
frontend/src/components/icons/LinkedIn.tsx (1)
1-19: Consistent icon component implementation with good practices.The component maintains consistency with the X icon component and follows all coding guidelines correctly. The TypeScript typing, accessibility features, and SVG implementation are all appropriate.
2 participants
Closes #160
Adds a new
/aboutpage for the Maple AI marketing site with all requested sections:Follows existing design patterns from
/proofpage and uses consistent styling.🤖 Generated with Claude Code
Summary by CodeRabbit