Wrap up landing page#205
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded@saddlepaddle has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 10 minutes and 19 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the 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. ⛔ Files ignored due to path filters (7)
📒 Files selected for processing (15)
WalkthroughAdds a dark-themed site redesign: new presentational sections (CTA, Footer, Security, TrustedBy, Video), enhanced Hero visuals and content, global font and background updates, theme provider integration, and a new dependency for theme management. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings, 1 inconclusive)
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: 1
🧹 Nitpick comments (5)
apps/website/src/app/components/HeroSection/HeroSection.tsx (2)
18-56: Consider adding meaningful title content for accessibility.The SVG title element contains only the text "grid", which provides minimal context. While decorative backgrounds don't require detailed descriptions, consider whether this title adequately conveys the purpose for screen readers.
68-72: Consider using Tailwind font utility instead of inline style.The inline
style={{ fontFamily: "var(--font-ibm-plex-mono)" }}bypasses Tailwind's utility-first approach. If this font is used elsewhere, consider defining it as a Tailwind font family class for consistency.Apply this approach if the font is used in multiple places:
Update your Tailwind config to include the font:
// tailwind.config.ts fontFamily: { mono: ['var(--font-ibm-plex-mono)', 'monospace'], }Then use the Tailwind class:
-<h1 - className="text-[28px] sm:text-[32px] lg:text-[38px] font-normal tracking-normal leading-[1.3em] text-white" - style={{ fontFamily: "var(--font-ibm-plex-mono)" }} -> +<h1 className="font-mono text-[28px] sm:text-[32px] lg:text-[38px] font-normal tracking-normal leading-[1.3em] text-white">apps/website/src/app/layout.tsx (1)
3-13: Root layout font and theming setup looks correct; consider trimming fontsThe font registrations and use of their
.variablevalues on<html>integrate cleanly with the existing Geist fonts, and wrappingTRPCReactProviderinThemeProviderwithforcedTheme="dark"plussuppressHydrationWarningis a reasonable pattern to avoid hydration mismatches for theme-related classes.Two optional cleanups to consider:
- You’re loading a fairly large set of Google fonts; if some of these families/weights are not actually used anywhere, trimming them will reduce CSS and font payload.
- With
forcedTheme="dark", thedefaultThemeprop is effectively redundant; you can drop it unless you plan to re-enable theme switching later.Also, it’s worth quickly confirming that the requested weight arrays align with the officially supported weights for each font family to avoid build-time surprises.
Please verify the configured font families/weights against the current
next/font/ Google Fonts documentation and confirm that all of these fonts are actually needed in the design.Also applies to: 20-72, 88-90, 98-100
apps/website/src/app/components/TrustedBySection/TrustedBySection.tsx (1)
18-19: Make marquee scroll distance responsive and confirm custom spacing classThe marquee implementation is nice, but there are two details to double-check:
- The animation uses a hardcoded
x: [0, -1000]. On wider screens or if the logo set changes, this fixed distance may not fully cover the marquee width and can produce a visible jump or gap when it loops. Consider basing the scroll distance on the actual content width (or using a CSS keyframes-based marquee pattern) so it scales with layout changes.- The
md:py-18class isn’t part of the default Tailwind spacing scale; it will only have an effect if you’ve explicitly added18to your Tailwind config. If not, you may want to switch to the closest existing spacing token.Please verify that
md:py-18is configured in your Tailwind theme and that the chosen scroll distance works well across common viewport sizes.Also applies to: 31-69
apps/website/src/app/components/CTASection/CTASection.tsx (1)
21-33: Optional: align CTA external link behavior with footer linksThe CTA currently navigates to GitHub releases in the same tab, while your footer external links open in a new tab with
target="_blank"andrel="noopener noreferrer". For consistency and to keep the marketing page open, you may want to use the same pattern here:- <motion.a - href="https://github.com/superset-sh/superset/releases" + <motion.a + href="https://github.com/superset-sh/superset/releases" + target="_blank" + rel="noopener noreferrer"If same-tab navigation is intentional for this CTA, you can ignore this suggestion.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (8)
apps/website/public/hero/change-themes.gifis excluded by!**/*.gifapps/website/public/hero/customize-themes.gifis excluded by!**/*.gifapps/website/public/hero/grid-01.svgis excluded by!**/*.svgapps/website/public/hero/grid-02.svgis excluded by!**/*.svgapps/website/public/hero/open-worktrees.gifis excluded by!**/*.gifapps/website/public/hero/use-agents.gifis excluded by!**/*.gifassets/example.gifis excluded by!**/*.gifbun.lockis excluded by!**/*.lock
📒 Files selected for processing (16)
README.md(1 hunks)apps/website/package.json(1 hunks)apps/website/src/app/components/CTASection/CTASection.tsx(1 hunks)apps/website/src/app/components/CTASection/index.ts(1 hunks)apps/website/src/app/components/Footer/Footer.tsx(1 hunks)apps/website/src/app/components/Footer/index.ts(1 hunks)apps/website/src/app/components/HeroSection/HeroSection.tsx(3 hunks)apps/website/src/app/components/SecuritySection/SecuritySection.tsx(1 hunks)apps/website/src/app/components/SecuritySection/index.ts(1 hunks)apps/website/src/app/components/TrustedBySection/TrustedBySection.tsx(1 hunks)apps/website/src/app/components/TrustedBySection/index.ts(1 hunks)apps/website/src/app/components/VideoSection/VideoSection.tsx(1 hunks)apps/website/src/app/components/VideoSection/index.ts(1 hunks)apps/website/src/app/globals.css(1 hunks)apps/website/src/app/layout.tsx(3 hunks)apps/website/src/app/page.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Avoid usinganytype - use explicit types instead for type safety
Use camelCase for variable and function names following existing codebase patterns
Keep diffs minimal with targeted edits only - avoid unnecessary changes when making modifications
Follow existing patterns and match the codebase style when writing new code
Files:
apps/website/src/app/components/CTASection/index.tsapps/website/src/app/components/SecuritySection/index.tsapps/website/src/app/components/TrustedBySection/TrustedBySection.tsxapps/website/src/app/layout.tsxapps/website/src/app/components/VideoSection/index.tsapps/website/src/app/page.tsxapps/website/src/app/components/VideoSection/VideoSection.tsxapps/website/src/app/components/CTASection/CTASection.tsxapps/website/src/app/components/TrustedBySection/index.tsapps/website/src/app/components/Footer/Footer.tsxapps/website/src/app/components/SecuritySection/SecuritySection.tsxapps/website/src/app/components/Footer/index.tsapps/website/src/app/components/HeroSection/HeroSection.tsx
**/components/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/components/**/*.tsx: Create one folder per component with structure:ComponentName/ComponentName.tsx+index.tsfor barrel export
Co-locate tests next to the component file they test (e.g.,ComponentName.test.tsx)
Co-locate dependencies (utils, hooks, constants, config, stories) next to the file using them
Use nestedcomponents/subdirectory within a parent component only if a sub-component is used 2+ times within that parent; otherwise keep it in the parent'scomponents/folder
One component per file - avoid multi-component files
Files:
apps/website/src/app/components/TrustedBySection/TrustedBySection.tsxapps/website/src/app/components/VideoSection/VideoSection.tsxapps/website/src/app/components/CTASection/CTASection.tsxapps/website/src/app/components/Footer/Footer.tsxapps/website/src/app/components/SecuritySection/SecuritySection.tsxapps/website/src/app/components/HeroSection/HeroSection.tsx
🧠 Learnings (3)
📚 Learning: 2025-11-28T01:03:47.963Z
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T01:03:47.963Z
Learning: Applies to **/components/**/*.tsx : Create one folder per component with structure: `ComponentName/ComponentName.tsx` + `index.ts` for barrel export
Applied to files:
apps/website/src/app/components/CTASection/index.ts
📚 Learning: 2025-11-28T01:03:47.963Z
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T01:03:47.963Z
Learning: Applies to packages/ui/src/**/*.tsx : Use shadcn/ui components and TailwindCSS v4 for all UI component styling in the shared UI package
Applied to files:
apps/website/src/app/layout.tsx
📚 Learning: 2025-11-28T01:03:47.963Z
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T01:03:47.963Z
Learning: Applies to **/*.{ts,tsx} : Keep diffs minimal with targeted edits only - avoid unnecessary changes when making modifications
Applied to files:
apps/website/src/app/components/HeroSection/HeroSection.tsx
🧬 Code graph analysis (3)
apps/website/src/app/components/TrustedBySection/TrustedBySection.tsx (1)
apps/website/src/app/components/TrustedBySection/index.ts (1)
TrustedBySection(1-1)
apps/website/src/app/page.tsx (6)
apps/website/src/app/components/Header/Header.tsx (1)
Header(11-71)apps/website/src/app/components/TrustedBySection/TrustedBySection.tsx (1)
TrustedBySection(16-75)apps/website/src/app/components/VideoSection/VideoSection.tsx (1)
VideoSection(5-53)apps/website/src/app/components/SecuritySection/SecuritySection.tsx (1)
SecuritySection(32-86)apps/website/src/app/components/CTASection/CTASection.tsx (1)
CTASection(6-37)apps/website/src/app/components/Footer/Footer.tsx (1)
Footer(3-46)
apps/website/src/app/components/SecuritySection/SecuritySection.tsx (1)
apps/website/src/app/components/SecuritySection/index.ts (1)
SecuritySection(1-1)
⏰ 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: Build
🔇 Additional comments (17)
apps/website/src/app/components/VideoSection/index.ts (1)
1-1: LGTM!Barrel export follows the coding guidelines for component structure.
apps/website/src/app/components/HeroSection/HeroSection.tsx (4)
100-112: LGTM!The download button implementation is clean and semantic, using an anchor tag for the download link with appropriate styling and iconography.
114-130: LGTM!The selector options, background gradients, and demo GIF mappings are properly synchronized and type-safe. The use of
as constensures literal type inference for the options.
202-230: LGTM!The SelectorPill component is well-implemented with proper button semantics, conditional styling, and smooth animations.
170-183: Verify GIF aspect ratios match the hardcoded value.The hardcoded aspect ratio "1812/1080" should match the actual dimensions of the GIF files to prevent image distortion. This requires manual verification of the GIF dimensions or use of image processing tools to confirm the three GIF files in
apps/website/public/hero/(use-agents.gif, open-worktrees.gif, change-themes.gif) have aspect ratios matching 1812/1080 = 1.6777...apps/website/src/app/components/CTASection/index.ts (1)
1-1: LGTM!Barrel export follows the coding guidelines for component structure.
apps/website/src/app/components/SecuritySection/index.ts (1)
1-1: LGTM!Barrel export follows the coding guidelines for component structure.
README.md (1)
28-28: LGTM!Documentation asset reference updated appropriately.
apps/website/src/app/components/Footer/index.ts (1)
1-1: LGTM!Barrel export follows the coding guidelines for component structure.
apps/website/src/app/globals.css (3)
11-14: LGTM!The dark background color complements the theme system and new dark design introduced in this PR.
8-8: > Likely an incorrect or invalid review comment.
6-6: This concern is unfounded — the Inter font is properly registered.The Inter font is correctly configured in
apps/website/src/app/layout.tsxwithvariable: "--font-inter"at line 72, and theinter.variableis applied to the html element's className at line 88. The CSS variable--font-interused inglobals.cssat line 6 is properly defined and will work as intended.apps/website/package.json (1)
24-24: No issues found with next-themes@^0.4.6.Version 0.4.6 is the latest stable release on npm and contains no known security vulnerabilities. The package is actively maintained and the semver range ^0.4.6 is appropriate.
apps/website/src/app/page.tsx (1)
3-9: Homepage section composition looks consistentNew section imports (CTA, TrustedBy, Video, Security) and the footer integration are composed cleanly, with a straightforward flow from hero → social proof → demo → security → CTA → footer. Dropping the hardcoded minHeight on
<main>in favor of natural content height is also an improvement.Also applies to: 15-22
apps/website/src/app/components/TrustedBySection/index.ts (1)
1-1: Barrel export matches component structure conventionsRe-exporting
TrustedBySectionfrom the folder index keeps imports tidy and follows the one-component-per-folder pattern.apps/website/src/app/components/Footer/Footer.tsx (1)
1-46: Footer structure and external link handling look goodThe footer layout is clear, external links correctly use
target="_blank"withrel="noopener noreferrer", and the dynamic year generation is appropriate in this context. No issues spotted.apps/website/src/app/components/SecuritySection/SecuritySection.tsx (1)
1-86: Well-structured, type-safe SecuritySectionThe typed
SECURITY_FEATURESdata, mapping logic, and staggered animations are clean and consistent with the rest of the page. No correctness or structural issues stand out here.
| <div className="relative w-full aspect-video rounded-2xl overflow-hidden bg-neutral-800"> | ||
| <iframe | ||
| className="absolute inset-0 w-full h-full" | ||
| src="https://www.youtube.com/embed/dkD-U7JXkbI?control=0" | ||
| title="Superset Demo" | ||
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | ||
| allowFullScreen | ||
| /> |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
YouTube embed iframe parameters control vs controls
💡 Result:
Use controls (plural). The official YouTube IFrame player parameter is controls — valid values:
- controls=0 → hide controls.
- controls=1 → show controls (default).
- controls=2 → show controls but delay loading the Flash player / improve performance in some cases. [1]
There is no documented parameter named control (singular); occurrences of "control" in forums are typos or mistaken usage. If you need JS control, use enablejsapi=1 and the IFrame Player API. [1][2]
🌐 Web query:
iframe lazy loading attribute browser support
💡 Result:
Short answer
- The HTML loading="lazy" attribute for iframes is supported in most modern browsers (Chromium-based browsers, recent Firefox and recent Safari), but some older browser versions still lack native support — so add a fallback/polyfill if you need broad coverage. [1][2][3]
Details & guidance
- Spec & behavior: MDN documents loading on <iframe> with values lazy/auto/eager and notes behavior/JS requirement. [1]
- Compatibility overview: Can I Use shows broad support across current Chrome/Edge/Opera, Firefox and Safari versions but indicates older releases and some mobile builds may not support iframe lazy-loading. Check the exact versions you need on the Can I Use page. [2]
- Practical recommendation: Use feature detection (e.g. 'loading' in HTMLIFrameElement.prototype) and fall back to a JS solution (IntersectionObserver or a small polyfill / lazy library that swaps data-src → src) for browsers that don’t support it. Web.dev and other guides show examples and best practices. [3]
Sources
[1] MDN — HTMLIFrameElement.loading / iframe element docs.
[2] Can I Use — loading-lazy-attr (images & iframes).
[3] web.dev / MDN guides on native lazy loading and fallbacks.
🌐 Web query:
YouTube embed API parameters documentation 2024
💡 Result:
Authoritative docs (2024) and quick pointers:
- YouTube Embedded Players and Player Parameters — full list of iframe URL/playerVars parameters (autoplay, controls, loop, start/end, cc_load_policy, origin, playsinline, modestbranding deprecated, etc.). [1]
- YouTube IFrame Player API Reference — how to load the IFrame API and pass parameters via playerVars when creating YT.Player. [2]
If you want, I can extract the common parameters into a compact reference for copy/paste (autoplay, controls, loop, playlist, start, end, enablejsapi, origin, cc_load_policy, playsinline, color, iv_load_policy, disablekb, fs, hl, etc.).
Refine iframe embed for expected controls behavior and performance
The YouTube embed has a couple of small issues worth fixing:
- The query parameter
control=0is not recognized by YouTube (the correct parameter iscontrols=0). Usingcontrols=0will properly hide player controls; without it, the default controls will show. - Adding
loading="lazy"to the<iframe>will defer loading the video player until it's near the viewport, improving initial page performance. This is supported in all modern browsers and aligns well with marketing page optimization.
Example:
- <iframe
+ <iframe
className="absolute inset-0 w-full h-full"
- src="https://www.youtube.com/embed/dkD-U7JXkbI?control=0"
+ src="https://www.youtube.com/embed/dkD-U7JXkbI?controls=0"
title="Superset Demo"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+ loading="lazy"
allowFullScreen
/>📝 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.
| <div className="relative w-full aspect-video rounded-2xl overflow-hidden bg-neutral-800"> | |
| <iframe | |
| className="absolute inset-0 w-full h-full" | |
| src="https://www.youtube.com/embed/dkD-U7JXkbI?control=0" | |
| title="Superset Demo" | |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | |
| allowFullScreen | |
| /> | |
| <div className="relative w-full aspect-video rounded-2xl overflow-hidden bg-neutral-800"> | |
| <iframe | |
| className="absolute inset-0 w-full h-full" | |
| src="https://www.youtube.com/embed/dkD-U7JXkbI?controls=0" | |
| title="Superset Demo" | |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | |
| loading="lazy" | |
| allowFullScreen | |
| /> |
🤖 Prompt for AI Agents
In apps/website/src/app/components/VideoSection/VideoSection.tsx around lines 40
to 47, the iframe embed uses an incorrect YouTube query parameter and lacks lazy
loading; update the src URL to use controls=0 (not control=0) so the player
controls are properly hidden, and add loading="lazy" to the iframe element to
defer loading for better performance; keep the existing title, allow and
allowFullScreen attributes unchanged.
saddlepaddle
force-pushed
the
navy-peak-17
branch
from
964b01a to
26fe06f
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
apps/website/src/app/components/VideoSection/VideoSection.tsx (1)
39-46: Fix YouTube iframe param and add lazy loadingThe iframe embed has a couple of small issues:
- The query string uses
control=0; to actually hide controls it should becontrols=0.- Adding
loading="lazy"will defer video loading until it’s near the viewport, improving landing‑page performance.Suggested change:
- <div className="relative w-full aspect-video rounded-2xl overflow-hidden bg-neutral-800"> - <iframe - className="absolute inset-0 w-full h-full" - src="https://www.youtube.com/embed/dkD-U7JXkbI?control=0" - title="Superset Demo" - allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" - allowFullScreen - /> - </div> + <div className="relative w-full aspect-video rounded-2xl overflow-hidden bg-neutral-800"> + <iframe + className="absolute inset-0 w-full h-full" + src="https://www.youtube.com/embed/dkD-U7JXkbI?controls=0" + title="Superset Demo" + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" + loading="lazy" + allowFullScreen + /> + </div>
🧹 Nitpick comments (2)
apps/website/src/app/layout.tsx (2)
20-30: Font variable setup looks consistent; watch for unused fontsThe font variable definitions and wiring into the
<html>class look consistent with the rest of the layout. If only a subset of these fonts end up being used in actual components, consider trimming the list later to keep font payloads small and typography easier to reason about, but this doesn’t block the PR.Also applies to: 32-72, 88-88
86-90: ReconsidersuppressHydrationWarningand always‑dark theme configurationWith the layout wrapped in a theme provider that’s effectively locked to
"dark"viaforcedTheme="dark", you likely won’t see theme‑based hydration mismatches. KeepingsuppressHydrationWarningon<html>can hide other genuine mismatches, so it may be worth dropping unless you’re actively working around a known issue. Likewise, if you don’t plan to support multiple themes soon, double‑check that you really need a runtime theme provider vs. a static dark theme.Also applies to: 98-100
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (7)
apps/website/public/example.pngis excluded by!**/*.pngapps/website/public/hero/change-themes.gifis excluded by!**/*.gifapps/website/public/hero/customize-themes.gifis excluded by!**/*.gifapps/website/public/hero/open-worktrees.gifis excluded by!**/*.gifapps/website/public/hero/use-agents.gifis excluded by!**/*.gifassets/example.gifis excluded by!**/*.gifbun.lockis excluded by!**/*.lock
📒 Files selected for processing (16)
README.md(1 hunks)apps/website/package.json(1 hunks)apps/website/src/app/components/CTASection/CTASection.tsx(1 hunks)apps/website/src/app/components/CTASection/index.ts(1 hunks)apps/website/src/app/components/Footer/Footer.tsx(1 hunks)apps/website/src/app/components/Footer/index.ts(1 hunks)apps/website/src/app/components/HeroSection/HeroSection.tsx(3 hunks)apps/website/src/app/components/SecuritySection/SecuritySection.tsx(1 hunks)apps/website/src/app/components/SecuritySection/index.ts(1 hunks)apps/website/src/app/components/TrustedBySection/TrustedBySection.tsx(1 hunks)apps/website/src/app/components/TrustedBySection/index.ts(1 hunks)apps/website/src/app/components/VideoSection/VideoSection.tsx(1 hunks)apps/website/src/app/components/VideoSection/index.ts(1 hunks)apps/website/src/app/globals.css(1 hunks)apps/website/src/app/layout.tsx(3 hunks)apps/website/src/app/page.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (10)
- apps/website/src/app/components/TrustedBySection/index.ts
- apps/website/src/app/components/SecuritySection/index.ts
- apps/website/src/app/page.tsx
- apps/website/src/app/components/VideoSection/index.ts
- apps/website/src/app/globals.css
- apps/website/src/app/components/Footer/index.ts
- apps/website/src/app/components/Footer/Footer.tsx
- README.md
- apps/website/src/app/components/HeroSection/HeroSection.tsx
- apps/website/src/app/components/CTASection/index.ts
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Avoid usinganytype - use explicit types instead for type safety
Use camelCase for variable and function names following existing codebase patterns
Keep diffs minimal with targeted edits only - avoid unnecessary changes when making modifications
Follow existing patterns and match the codebase style when writing new code
Files:
apps/website/src/app/components/SecuritySection/SecuritySection.tsxapps/website/src/app/components/CTASection/CTASection.tsxapps/website/src/app/components/VideoSection/VideoSection.tsxapps/website/src/app/layout.tsxapps/website/src/app/components/TrustedBySection/TrustedBySection.tsx
**/components/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/components/**/*.tsx: Create one folder per component with structure:ComponentName/ComponentName.tsx+index.tsfor barrel export
Co-locate tests next to the component file they test (e.g.,ComponentName.test.tsx)
Co-locate dependencies (utils, hooks, constants, config, stories) next to the file using them
Use nestedcomponents/subdirectory within a parent component only if a sub-component is used 2+ times within that parent; otherwise keep it in the parent'scomponents/folder
One component per file - avoid multi-component files
Files:
apps/website/src/app/components/SecuritySection/SecuritySection.tsxapps/website/src/app/components/CTASection/CTASection.tsxapps/website/src/app/components/VideoSection/VideoSection.tsxapps/website/src/app/components/TrustedBySection/TrustedBySection.tsx
🧠 Learnings (1)
📚 Learning: 2025-11-28T01:03:47.963Z
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T01:03:47.963Z
Learning: Applies to packages/ui/src/**/*.tsx : Use shadcn/ui components and TailwindCSS v4 for all UI component styling in the shared UI package
Applied to files:
apps/website/src/app/components/CTASection/CTASection.tsxapps/website/src/app/layout.tsx
🧬 Code graph analysis (1)
apps/website/src/app/components/TrustedBySection/TrustedBySection.tsx (1)
apps/website/src/app/components/TrustedBySection/index.ts (1)
TrustedBySection(1-1)
⏰ 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: Build
🔇 Additional comments (2)
apps/website/package.json (1)
24-24: next-themes dependency aligns with new theming usageAdding
next-themeshere matches the ThemeProvider usage inlayout.tsx; the dependency wiring looks correct. Please just confirm that^0.4.6is the version you want with Next 15 / React 19 and bump if there’s a newer compatible release you prefer.apps/website/src/app/components/SecuritySection/SecuritySection.tsx (1)
11-34: SecuritySection implementation looks clean and type‑safeThe static
SECURITY_FEATURESdata, animation props, and grid rendering are all straightforward and typed appropriately. I don’t see any functional or structural issues here; nice, self‑contained section.Also applies to: 36-90
| export function CTASection() { | ||
| return ( | ||
| <section className="relative py-32 px-8 lg:px-[30px]"> | ||
| <div className="max-w-[1200px] mx-auto flex flex-col items-center text-center"> | ||
| <motion.h2 | ||
| className="text-[32px] lg:text-[40px] font-normal tracking-normal leading-[1.3em] text-white mb-8" | ||
| style={{ fontFamily: "var(--font-ibm-plex-mono)" }} | ||
| initial={{ opacity: 0, y: 20 }} | ||
| whileInView={{ opacity: 1, y: 0 }} | ||
| viewport={{ once: true }} | ||
| transition={{ duration: 0.5 }} | ||
| > | ||
| Give us a try | ||
| </motion.h2> | ||
|
|
||
| <motion.a | ||
| href="https://github.com/superset-sh/superset/releases" | ||
| className="inline-flex items-center bg-[#f9f9f5] hover:bg-[#f0efeb] rounded-[5px] px-8 py-4 transition-colors" | ||
| initial={{ opacity: 0, y: 20 }} | ||
| whileInView={{ opacity: 1, y: 0 }} | ||
| viewport={{ once: true }} | ||
| transition={{ duration: 0.5, delay: 0.1 }} | ||
| > | ||
| <span className="text-lg font-medium text-[#2a2b25]"> | ||
| Download for MacOS | ||
| </span> | ||
| <HiMiniArrowDownTray className="ml-3 size-5 text-[#2a2b25]" /> | ||
| </motion.a> | ||
| </div> | ||
| </section> | ||
| ); |
There was a problem hiding this comment.
Polish CTA copy and consider centralizing font styling
The component structure and animation props look good. Two small tweaks to consider:
- Branding nit: Apple styles it as “macOS”, not “MacOS”.
- To keep styling consistent, you may want to move the
fontFamily: "var(--font-ibm-plex-mono)"inline style into a reusable CSS/Tailwind utility class when convenient.
Example copy tweak:
- <span className="text-lg font-medium text-[#2a2b25]">
- Download for MacOS
- </span>
+ <span className="text-lg font-medium text-[#2a2b25]">
+ Download for macOS
+ </span>🤖 Prompt for AI Agents
In apps/website/src/app/components/CTASection/CTASection.tsx around lines 6 to
36, update the CTA copy to use the correct Apple branding "macOS" instead of
"MacOS", and remove the inline style fontFamily: "var(--font-ibm-plex-mono)";
instead add a reusable Tailwind/CSS utility class (e.g., .font-ibm-plex-mono or
a Tailwind plugin/extend) and apply that class to the element so font styling is
centralized and not inline.
| <section className="py-6 sm:py-12 md:py-18 px-4 sm:px-6 md:px-8 bg-neutral-900 overflow-hidden"> | ||
| <div className="max-w-7xl mx-auto"> |
There was a problem hiding this comment.
Tighten layout classes and cursor semantics on logos
Two small things to double‑check here:
md:py-18isn’t part of Tailwind’s default spacing scale; unless you’ve extended the config, it will be ignored. If you want that exact value, consider using an arbitrary value likemd:py-[4.5rem]or pick the closest existing token.- The logo items use
cursor-pointerbut aren’t clickable. Either wire them up to real links/actions or drop the pointer cursor so the interaction affordance matches the behavior.
Both are minor, but worth adjusting for consistency.
Also applies to: 40-67
🤖 Prompt for AI Agents
In apps/website/src/app/components/TrustedBySection/TrustedBySection.tsx around
lines 20-21 (and also apply changes in lines 40-67), the layout uses a
nonstandard Tailwind class md:py-18 which will be ignored unless your tailwind
config was extended, and logo items show cursor-pointer despite not being
interactive; replace md:py-18 with either a valid token (e.g., md:py-16 or
md:py-20) or an arbitrary value like md:py-[4.5rem] to get the intended spacing,
and for logo elements either wrap them with proper anchor/button elements (with
href/onclick) to make them interactive or remove the cursor-pointer class (and
any focus/hover styles implying interactivity) so affordance matches behavior.
saddlepaddle
force-pushed
the
navy-peak-17
branch
from
bb9390c to
5c98ecb
Compare
1 participant
Description
Related Issues
Type of Change
Testing
Screenshots (if applicable)
Additional Notes
Summary by CodeRabbit
New Features
Style
Other
✏️ Tip: You can customize this high-level summary in your review settings.