WIP Landing Page Redesign - Commit so Avi can see#202
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 23 minutes and 32 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 selected for processing (1)
WalkthroughThe PR removes Nextra integration from the website project and refactors the landing page UI. Multiple components (ClientLogosSection, FeaturesSection, Footer, TestimonialsSection, VideoSection, and HeroCanvas with 3D rendering) are deleted entirely. Blog and documentation sections are removed. The HeroSection is redesigned with demo GIFs and selector pills replacing the 3D WebGL background. A brand guidelines document is added. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related PRs
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 |
saddlepaddle
changed the title
- Replace code editor mock with lazy-loaded GIF demos for each feature - Add 4 selector options: Build features, Fix bugs, Debug prod, Customize - Implement smooth background gradient transitions between options - Update header with Warp-style gradient fade effect - Link Download button to GitHub releases page - Remove unused onJoinWaitlist prop from HeroSection 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (5)
apps/website/src/app/components/JoinWaitlistButton/JoinWaitlistButton.tsx (1)
19-19: Styling update aligns with redesign; consider using standard Tailwind radius values.The className update from the white/black scheme to stone/neutral palette looks intentional for the landing page redesign. However,
rounded-[5px]uses a custom value; consider whether a standard Tailwind radius value likerounded-smwould be more maintainable and consistent with the design system.apps/website/src/app/BRAND_GUIDELINES.md (2)
195-208: Add responsive design and breakpoint guidance.The layout section only specifies desktop dimensions (max-width: 1600px, 30px padding). Missing: mobile/tablet breakpoints, responsive column ratios, stacking behavior, and touch-friendly spacing. This is essential for modern web implementation.
Consider adding a "Responsive Breakpoints" subsection with examples like:
### Responsive Breakpoints - **Desktop** (1920px+): 1600px container, two-column 42/58 split - **Tablet** (768px-1279px): 100% width - 24px padding, stacked layout - **Mobile** (< 768px): 100% width - 16px padding, single column
146-146: Document the rationale for asymmetric button padding.Line 146 notes the Download button has "asymmetric - more left padding" (
4px 4px 4px 16px). Why? This unusual padding choice deserves a brief explanation (e.g., icon alignment, visual balance) so developers understand the intent and don't "fix" it later.apps/website/src/app/components/HeroSection/HeroSection.tsx (2)
52-84: Multiple components in one file and potential naming collision.Per coding guidelines, each component should have its own folder with barrel export. This file contains
HeroSection,DownloadButton,ProductDemo, andSelectorPill— four components total.Additionally,
DownloadButtonalready exists in../DownloadButton(imported in Header.tsx). This internal version with the same name could cause confusion. Consider either:
- Extracting these to separate component folders
- Renaming this to
HeroDownloadButtonif intentionally different
114-119: Consider removingloadedGifsfrom the dependency array.The effect only needs to run when
activeOptionchanges. IncludingloadedGifsin deps is redundant since the Set membership check inside handles the logic. Using the functional update form already ensures you have the latest state.useEffect(() => { - if (!loadedGifs.has(activeOption)) { - setLoadedGifs((prev) => new Set([...prev, activeOption])); - } - }, [activeOption, loadedGifs]); + setLoadedGifs((prev) => { + if (prev.has(activeOption)) return prev; + return new Set([...prev, activeOption]); + }); + }, [activeOption]);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
apps/website/public/hero/customize-themes.gifis excluded by!**/*.gifbun.lockis excluded by!**/*.lock
📒 Files selected for processing (40)
apps/website/mdx-components.tsx(0 hunks)apps/website/next.config.ts(1 hunks)apps/website/package.json(0 hunks)apps/website/src/app/BRAND_GUIDELINES.md(1 hunks)apps/website/src/app/blog/building-with-nextra.mdx(0 hunks)apps/website/src/app/blog/hello-world.mdx(0 hunks)apps/website/src/app/blog/layout.tsx(0 hunks)apps/website/src/app/blog/page.mdx(0 hunks)apps/website/src/app/components/ClientLogosSection/ClientLogosSection.tsx(0 hunks)apps/website/src/app/components/ClientLogosSection/constants.ts(0 hunks)apps/website/src/app/components/ClientLogosSection/index.ts(0 hunks)apps/website/src/app/components/FeaturesSection/FeaturesSection.tsx(0 hunks)apps/website/src/app/components/FeaturesSection/index.ts(0 hunks)apps/website/src/app/components/Footer/Footer.tsx(0 hunks)apps/website/src/app/components/Footer/index.ts(0 hunks)apps/website/src/app/components/Header/Header.tsx(1 hunks)apps/website/src/app/components/HeroSection/HeroSection.tsx(1 hunks)apps/website/src/app/components/HeroSection/components/FadeUp/FadeUp.tsx(0 hunks)apps/website/src/app/components/HeroSection/components/FadeUp/index.ts(0 hunks)apps/website/src/app/components/HeroSection/components/HeroCanvas/HeroCanvas.tsx(0 hunks)apps/website/src/app/components/HeroSection/components/HeroCanvas/components/LitBackground/LitBackground.tsx(0 hunks)apps/website/src/app/components/HeroSection/components/HeroCanvas/components/LitBackground/index.ts(0 hunks)apps/website/src/app/components/HeroSection/components/HeroCanvas/config.ts(0 hunks)apps/website/src/app/components/HeroSection/components/HeroCanvas/helpers.ts(0 hunks)apps/website/src/app/components/HeroSection/components/HeroCanvas/index.ts(0 hunks)apps/website/src/app/components/HeroSection/components/HeroCanvas/shaders/fragment.ts(0 hunks)apps/website/src/app/components/HeroSection/components/HeroCanvas/shaders/vertex.ts(0 hunks)apps/website/src/app/components/HeroSection/components/HeroParallax/HeroParallax.tsx(0 hunks)apps/website/src/app/components/HeroSection/components/HeroParallax/index.ts(0 hunks)apps/website/src/app/components/JoinWaitlistButton/JoinWaitlistButton.tsx(1 hunks)apps/website/src/app/components/SocialLinks/SocialLinks.tsx(2 hunks)apps/website/src/app/components/TestimonialsSection/TestimonialsSection.tsx(0 hunks)apps/website/src/app/components/TestimonialsSection/index.ts(0 hunks)apps/website/src/app/components/VideoSection/VideoSection.tsx(0 hunks)apps/website/src/app/components/VideoSection/index.ts(0 hunks)apps/website/src/app/docs/getting-started/page.mdx(0 hunks)apps/website/src/app/docs/layout.tsx(0 hunks)apps/website/src/app/docs/page.mdx(0 hunks)apps/website/src/app/page.tsx(1 hunks)apps/website/src/env.ts(1 hunks)
💤 Files with no reviewable changes (32)
- apps/website/src/app/components/HeroSection/components/HeroParallax/index.ts
- apps/website/src/app/components/HeroSection/components/HeroCanvas/components/LitBackground/index.ts
- apps/website/src/app/components/Footer/Footer.tsx
- apps/website/src/app/components/FeaturesSection/index.ts
- apps/website/src/app/components/HeroSection/components/FadeUp/index.ts
- apps/website/src/app/components/VideoSection/VideoSection.tsx
- apps/website/src/app/components/ClientLogosSection/ClientLogosSection.tsx
- apps/website/src/app/components/HeroSection/components/HeroCanvas/helpers.ts
- apps/website/src/app/components/ClientLogosSection/index.ts
- apps/website/src/app/components/HeroSection/components/FadeUp/FadeUp.tsx
- apps/website/src/app/components/HeroSection/components/HeroCanvas/components/LitBackground/LitBackground.tsx
- apps/website/src/app/components/HeroSection/components/HeroCanvas/index.ts
- apps/website/src/app/components/HeroSection/components/HeroParallax/HeroParallax.tsx
- apps/website/src/app/blog/hello-world.mdx
- apps/website/src/app/docs/layout.tsx
- apps/website/src/app/components/VideoSection/index.ts
- apps/website/src/app/components/ClientLogosSection/constants.ts
- apps/website/src/app/components/HeroSection/components/HeroCanvas/shaders/vertex.ts
- apps/website/src/app/docs/page.mdx
- apps/website/src/app/blog/layout.tsx
- apps/website/src/app/blog/building-with-nextra.mdx
- apps/website/src/app/components/TestimonialsSection/TestimonialsSection.tsx
- apps/website/package.json
- apps/website/src/app/components/HeroSection/components/HeroCanvas/HeroCanvas.tsx
- apps/website/src/app/components/TestimonialsSection/index.ts
- apps/website/src/app/docs/getting-started/page.mdx
- apps/website/src/app/components/Footer/index.ts
- apps/website/mdx-components.tsx
- apps/website/src/app/components/HeroSection/components/HeroCanvas/shaders/fragment.ts
- apps/website/src/app/blog/page.mdx
- apps/website/src/app/components/FeaturesSection/FeaturesSection.tsx
- apps/website/src/app/components/HeroSection/components/HeroCanvas/config.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/SocialLinks/SocialLinks.tsxapps/website/src/app/components/JoinWaitlistButton/JoinWaitlistButton.tsxapps/website/next.config.tsapps/website/src/app/components/Header/Header.tsxapps/website/src/env.tsapps/website/src/app/page.tsxapps/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/SocialLinks/SocialLinks.tsxapps/website/src/app/components/JoinWaitlistButton/JoinWaitlistButton.tsxapps/website/src/app/components/Header/Header.tsxapps/website/src/app/components/HeroSection/HeroSection.tsx
🧠 Learnings (2)
📚 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/SocialLinks/SocialLinks.tsxapps/website/src/app/components/JoinWaitlistButton/JoinWaitlistButton.tsxapps/website/src/app/components/Header/Header.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/SocialLinks/SocialLinks.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). (1)
- GitHub Check: Build
🔇 Additional comments (9)
apps/website/src/app/components/JoinWaitlistButton/JoinWaitlistButton.tsx (1)
1-24: The component is actively used in theHeadercomponent, so no action is needed. The styling changes look appropriate for the redesign.apps/website/src/app/BRAND_GUIDELINES.md (2)
24-50: Verify Tailwind color approximations are acceptable tolerances.The color table maps specific hex/rgb values to Tailwind approximations (e.g.,
#afaeac→stone-400,#f9f9f5→stone-50). These approximations may drift visually from the design intent. Confirm whether these are "good enough" or if custom Tailwind config values are needed for pixel-perfect alignment.
217-230: Component examples align well with CSS specs.The TSX selector pill examples correctly map to the CSS specifications (active:
bg-white/80 border-white, inactive:bg-white/[0.01] border-white/20). Good consistency.apps/website/next.config.ts (1)
8-8: LGTM! Code change is clean and correct.The removal of the Nextra wrapper from the website's next.config.ts is correct. The configuration now properly exports the standard Next.js config object with appropriate typing and settings (reactStrictMode and transpilePackages for @superset/ui).
Verification confirms no Nextra imports or withNextra references remain in the TypeScript codebase for the website application.
apps/website/src/app/components/SocialLinks/SocialLinks.tsx (1)
14-14: Color palette update is applied consistently within this component.The change from
text-zinc-400totext-stone-400is correctly applied to both social links on lines 14 and 32. However, note that other components in the website still usetext-zinc-400(WaitlistModal.tsx, DownloadButton.tsx), indicating this update may be selective or part of a staged redesign rollout.apps/website/src/env.ts (1)
13-13: No action needed.z.url()is a valid standalone schema constructor in Zod v4.1.12 (used in this project). Zod v4 promoted format helpers likez.url(),z.email(), andz.uuid()to top-level functions for better tree-shaking and minification. The change fromz.string().url()toz.url()is correct and will not cause runtime errors.Likely an incorrect or invalid review comment.
apps/website/src/app/components/Header/Header.tsx (1)
16-25: LGTM!The fixed header with gradient fade-out provides a clean visual effect. The inline style for the complex gradient is acceptable given Tailwind's limitations for multi-stop gradients with specific opacity values.
apps/website/src/app/components/HeroSection/HeroSection.tsx (2)
7-50: LGTM on the layout structure.The responsive two-column grid with Framer Motion animations provides a clean hero layout.
185-206: LGTM!The SelectorPill component is well-structured with proper TypeScript typing and accessible button implementation.
| | Sans | `"Matter Regular", "Matter Regular Placeholder", sans-serif` | Body text, headings | | ||
| | Sans Medium | `"Matter Medium", "Matter Medium Placeholder", sans-serif` | Buttons, emphasis | | ||
| | Mono | `"Matter Mono Regular", "Matter Mono Regular Placeholder", monospace` | Code, commands | | ||
| | Mono Alt | `"Geist Mono", monospace` | Terminal UI | |
There was a problem hiding this comment.
Clarify "Placeholder" font family names.
Lines like "Matter Regular Placeholder" and "Matter Mono Regular Placeholder" are ambiguous. Are these system fallbacks, web font names, or development placeholders? This needs clear explanation so developers know what to actually load or install.
🤖 Prompt for AI Agents
In apps/website/src/app/BRAND_GUIDELINES.md around lines 10 to 13, the font
entries include ambiguous "Placeholder" names (e.g., "Matter Regular
Placeholder") that don't indicate whether they are actual web-font family names,
local/system fallbacks, or temporary placeholders; update the doc to replace
ambiguous names with concrete guidance: list the exact font family names to load
from the provider (or local names), mark any real fallback families (e.g.,
sans-serif, monospace), and if a name is a development placeholder, explicitly
label it as "placeholder — replace with [actual font name]" or remove it;
include a short example instruction on how to load/install the web fonts
(provider or @font-face) or how to use the local fallback so developers know
what to install or import.
| <main | ||
| className="flex flex-col bg-neutral-900" | ||
| style={{ minHeight: "8000px" }} | ||
| > |
There was a problem hiding this comment.
Remove the hardcoded minHeight: "8000px" placeholder.
This appears to be a debug/WIP value. A fixed 8000px height is unusual for production and will create excessive empty space. Consider removing it or replacing with content-driven sizing once additional sections are added.
<main
- className="flex flex-col bg-neutral-900"
- style={{ minHeight: "8000px" }}
+ className="flex min-h-screen flex-col bg-neutral-900"
>📝 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.
| <main | |
| className="flex flex-col bg-neutral-900" | |
| style={{ minHeight: "8000px" }} | |
| > | |
| <main | |
| className="flex min-h-screen flex-col bg-neutral-900" | |
| > |
🤖 Prompt for AI Agents
In apps/website/src/app/page.tsx around lines 10 to 13, the main element uses a
hardcoded inline style minHeight: "8000px" which is a debug/WIP value; remove
this inline style and rely on content-driven sizing or replace it with a
sensible utility (e.g., a CSS class like min-h-screen or responsive CSS) so the
page no longer has an excessive fixed height and grows naturally with content.
1 participant
Description
Related Issues
Type of Change
Testing
Screenshots (if applicable)
Additional Notes
Summary by CodeRabbit
New Features
Removed Features
Updates
✏️ Tip: You can customize this high-level summary in your review settings.