refactor (website): updated some styles/layout and fixed responsive bugs#326
refactor (website): updated some styles/layout and fixed responsive bugs#326
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded@AviPeltz has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 13 minutes and 58 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 (3)
WalkthroughUpdates across website UI: button label and styles, multiple component typography and color token adjustments, Hero and Footer structural/markup changes, and two new static pages for Privacy Policy and Terms of Service. No runtime logic or public API signature changes except added page exports. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
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 |
🧹 Preview Cleanup CompleteThe following preview resources have been cleaned up:
Thank you for your contribution! 🎉 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (6)
apps/website/src/app/components/TrustedBySection/TrustedBySection.tsx (1)
28-30: Header typography update looks good; consider consistency + semanticsThe
h2shift tofont-mono+text-stone-100is aligned with the stated design direction and should be safe. Two small follow-ups:
- If the goal is to move away from pure white/black, consider whether the logo rows should also move off
text-white(Line 64) for consistency.- The logo items use
cursor-pointer(Line 64) but aren’t interactive elements; either wire them to links/buttons (with focus styles) or drop the pointer to avoid misleading affordance.apps/website/src/app/components/VideoSection/VideoSection.tsx (1)
36-43: Harden and fix the YouTube embed params.
control=0looks like a typo forcontrols=0. Also considerloading="lazy"and a restrictivereferrerPolicy/sandboxfor better performance + safety.<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" allowFullScreen + loading="lazy" + referrerPolicy="strict-origin-when-cross-origin" + sandbox="allow-scripts allow-same-origin allow-presentation" />apps/website/src/app/components/DownloadButton/DownloadButton.tsx (1)
94-94: More specific button label improves UX.The updated text "Download for macOS" is clearer and more informative than the previous "Download".
Optional: Consider standardizing terminology. The button uses "macOS" while the dropdown menu item at line 62 uses "Mac". While both are acceptable, using consistent terminology throughout ("Download for macOS" in both places) would slightly improve polish.
apps/website/src/app/components/SecuritySection/SecuritySection.tsx (1)
49-54: Typography updates align with design system migration.The heading style changes successfully implement the monospace/stone color design language described in the PR summary. The responsive sizing and letter-spacing adjustments look appropriate.
Optional semantic HTML refinement: The second
h2element (line 52) serves as a descriptive subtitle rather than a peer-level heading. Consider using a<p>tag instead to better reflect the content hierarchy.Color palette consistency: The headings now use
stone-100andneutral-400, while the features grid below (lines 66-86) continues using thewhite/opacitypattern (text-white/90,text-white/50, etc.). Verify whether this contrast is intentional or if the features section should also adopt the new stone/neutral palette.Apply this diff if you'd like to use a
<p>tag for the subtitle:- <h2 className="text-lg sm:text-xl font-light tracking-[-0.03em] text-neutral-400 max-w-[700px]"> + <p className="text-lg sm:text-xl font-light tracking-[-0.03em] text-neutral-400 max-w-[700px]"> Your code never leaves your machine. - </h2> + </p>apps/website/src/app/components/HeroSection/HeroSection.tsx (2)
15-15: Consider removing the redundant wrapper div.The outer
<div>wrapper at lines 15 and 120 provides no styling, semantic meaning, or structural purpose. Unless this is intended for future functionality, it can be removed to keep the component structure clean.Apply this diff to remove the redundant wrapper:
export function HeroSection() { const [isWaitlistOpen, setIsWaitlistOpen] = useState(false); return ( - <div> - <div className="flex mt-14 min-h-[calc(100vh-64px)] items-center overflow-hidden"> + <div className="flex mt-14 min-h-[calc(100vh-64px)] items-center overflow-hidden"> {/* Grid background */} <motion.div ... </div> - </div> <WaitlistModal isOpen={isWaitlistOpen} onClose={() => setIsWaitlistOpen(false)} /> - </div> + </div> ); }Also applies to: 120-120
82-82: Prefer semantic color tokens over hardcoded values.The change from
text-muted-foregroundtotext-neutral-400replaces a semantic token with a hardcoded color value. Semantic tokens provide better theme flexibility and maintainability across the application.Consider reverting to the semantic token or verifying this change aligns with your design system strategy:
-<p className="text-md sm:text-lg font-light text-neutral-400 max-w-[400px]"> +<p className="text-md sm:text-lg font-light text-muted-foreground max-w-[400px]">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/website/src/app/components/DownloadButton/DownloadButton.tsx(1 hunks)apps/website/src/app/components/HeroSection/HeroSection.tsx(6 hunks)apps/website/src/app/components/SecuritySection/SecuritySection.tsx(1 hunks)apps/website/src/app/components/TrustedBySection/TrustedBySection.tsx(1 hunks)apps/website/src/app/components/VideoSection/VideoSection.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Maintain type safety and avoid using
anyunless absolutely necessary in TypeScript code
Files:
apps/website/src/app/components/VideoSection/VideoSection.tsxapps/website/src/app/components/SecuritySection/SecuritySection.tsxapps/website/src/app/components/DownloadButton/DownloadButton.tsxapps/website/src/app/components/TrustedBySection/TrustedBySection.tsxapps/website/src/app/components/HeroSection/HeroSection.tsx
**/components/**/[A-Z]*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Use one folder per component with structure ComponentName/ComponentName.tsx + index.ts barrel export
Files:
apps/website/src/app/components/VideoSection/VideoSection.tsxapps/website/src/app/components/SecuritySection/SecuritySection.tsxapps/website/src/app/components/DownloadButton/DownloadButton.tsxapps/website/src/app/components/TrustedBySection/TrustedBySection.tsxapps/website/src/app/components/HeroSection/HeroSection.tsx
🧠 Learnings (1)
📚 Learning: 2025-12-08T23:32:32.232Z
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-08T23:32:32.232Z
Learning: Applies to src/components/{ui,ai-elements,react-flow}/**/*.tsx : Use kebab-case single files for shadcn/ui components in src/components/ui/, src/components/ai-elements, and src/components/react-flow/
Applied to files:
apps/website/src/app/components/SecuritySection/SecuritySection.tsxapps/website/src/app/components/TrustedBySection/TrustedBySection.tsxapps/website/src/app/components/HeroSection/HeroSection.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/TrustedBySection/TrustedBySection.tsx (1)
20-20: Verify Tailwind spacing tokenmd:py-18exists
md:py-18is non-standard in default Tailwind spacing scales; please confirm it’s defined in this repo’s Tailwind config (or adjust to a supported token) to avoid a silent no-op in production.apps/website/src/app/components/DownloadButton/DownloadButton.tsx (1)
92-92: LGTM! Styling updates align with design system.The color palette shift to neutral tones (
neutral-50/neutral-950) and font-weight adjustment tonormalimprove the design consistency. The changes maintain proper hover states and transitions.apps/website/src/app/components/HeroSection/HeroSection.tsx (7)
16-16: LGTM!The container styling updates improve responsive behavior with proper viewport height calculation, centered alignment, and overflow handling.
19-19: LGTM!Good accessibility improvement by adding
aria-hidden="true"to the decorative grid background, and explicit z-index layering withz-0ensures proper stacking context.Also applies to: 23-23
75-75: LGTM!The responsive spacing adjustments (
space-y-2 sm:space-y-6andgap-2 sm:gap-4) appropriately reduce gaps on mobile devices while maintaining generous spacing on larger screens.Also applies to: 88-88
94-94: LGTM!The GitHub button styling update to the neutral theme (
bg-neutral-900,border-neutral-800,text-neutral-100) aligns with the broader design system updates while maintaining proper hover states and functionality.
227-227: LGTM!The selector pill styling updates (removing rounded corners and adjusting inactive state opacity from
bg-white/5tobg-white/3) align with the broader design system changes across the component.Also applies to: 231-231
147-156: LGTM!The lazy loading implementation efficiently loads GIFs only when needed, uses a Set for O(1) lookups, and correctly prioritizes the first image. The
unoptimizedprop is appropriate for animated GIFs since Next.js image optimization doesn't support animation.Also applies to: 193-194
18-23: LGTM!The Framer Motion animations are well-implemented with appropriate durations, easing functions, and staggered delays. The use of
initial={false}for controlled opacity transitions and declarativeanimateprops creates smooth user experiences.Also applies to: 68-72, 105-109, 165-171, 176-182, 234-238
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/website/src/app/privacy-policy/page.tsx (1)
11-312: Consider extracting a shared layout component.Both the Privacy Policy and Terms of Service pages share identical layout structure (Header, main container, article wrapper, and Footer with the same styling patterns). Consider creating a shared
LegalPageLayoutcomponent to reduce duplication and improve maintainability.Example implementation:
// apps/website/src/app/components/LegalPageLayout/LegalPageLayout.tsx import { Header } from "../Header"; import { Footer } from "../Footer"; interface LegalPageLayoutProps { title: string; lastUpdated: string; children: React.ReactNode; } export function LegalPageLayout({ title, lastUpdated, children }: LegalPageLayoutProps) { return ( <> <Header /> <main className="bg-neutral-900 pt-24 pb-16 min-h-screen"> <article className="max-w-3xl mx-auto px-6 sm:px-8"> <header className="border-b border-neutral-800 pb-8 mb-10"> <h1 className="text-3xl sm:text-4xl font-medium text-neutral-100"> {title} </h1> <p className="mt-4 text-sm text-neutral-500"> Last updated: {lastUpdated} </p> </header> <div className="space-y-10 text-neutral-300 leading-relaxed"> {children} </div> </article> </main> <Footer /> </> ); }Then both pages would simplify to:
export default function PrivacyPolicyPage() { return ( <LegalPageLayout title="Privacy Policy" lastUpdated="December 11, 2025"> {/* sections here */} </LegalPageLayout> ); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/website/src/app/components/Footer/Footer.tsx(1 hunks)apps/website/src/app/privacy-policy/page.tsx(1 hunks)apps/website/src/app/terms-of-service/page.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Maintain type safety and avoid using
anyunless absolutely necessary in TypeScript code
Files:
apps/website/src/app/terms-of-service/page.tsxapps/website/src/app/privacy-policy/page.tsxapps/website/src/app/components/Footer/Footer.tsx
**/components/**/[A-Z]*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Use one folder per component with structure ComponentName/ComponentName.tsx + index.ts barrel export
Files:
apps/website/src/app/components/Footer/Footer.tsx
🧬 Code graph analysis (3)
apps/website/src/app/terms-of-service/page.tsx (2)
apps/website/src/app/privacy-policy/page.tsx (1)
metadata(5-9)apps/website/src/app/components/Footer/Footer.tsx (1)
Footer(26-75)
apps/website/src/app/privacy-policy/page.tsx (2)
apps/website/src/app/terms-of-service/page.tsx (1)
metadata(5-9)apps/website/src/app/components/Footer/Footer.tsx (1)
Footer(26-75)
apps/website/src/app/components/Footer/Footer.tsx (1)
apps/website/src/app/components/SocialLinks/SocialLinks.tsx (1)
SocialLinks(7-48)
⏰ 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 (5)
apps/website/src/app/privacy-policy/page.tsx (2)
5-9: Metadata properly configured.The page metadata follows Next.js conventions with appropriate title and description for SEO.
11-312: Privacy Policy page implementation is well-structured with proper TypeScript typing.The page is well-organized with:
- Semantic HTML structure (article, header, sections)
- Consistent heading hierarchy and typography
- Comprehensive privacy policy content across 12 sections
- Proper use of neutral color tokens
- Responsive design with mobile-first approach
- Correct TypeScript type annotations (Metadata properly imported and typed)
- No
anytype usage detectedManual verification needed:
Hardcoded date on line 22: Confirm that "Last updated: December 11, 2025" is the correct/current date.
Email address on line 299: Verify that
privacy@supersetlabs.comis a valid, active email address that is monitored.apps/website/src/app/terms-of-service/page.tsx (2)
5-9: Metadata properly configured.The page metadata follows Next.js conventions with appropriate title and description for SEO.
11-373: Terms of Service page implementation is well-structured.The page is well-organized with:
- Semantic HTML structure (article, header, sections)
- Consistent heading hierarchy and typography
- Comprehensive terms of service content across 19 sections
- Proper legal disclaimers in uppercase (sections 10-11)
- Proper use of neutral color tokens
- Responsive design with mobile-first approach
- Consistent styling with the Privacy Policy page
The hardcoded date "December 11, 2025" on line 22 is accurate and matches the file's last commit timestamp. The email address
legal@supersetlabs.comon line 360 should be verified as active and monitored by your team, as email validation cannot be confirmed in this environment.apps/website/src/app/components/Footer/Footer.tsx (1)
26-75: LGTM! Footer restructure is well-implemented.The Footer component has been successfully restructured with:
- Motion-wrapped container for smooth fade-in animation
- Well-organized multi-section layout (logo/legal links, social links, copyright)
- Proper responsive design with mobile-first approach
- Consistent use of neutral color tokens
- Good accessibility with semantic HTML and proper link text
- Correct component structure with barrel export at
apps/website/src/app/components/Footer/index.ts
1 participant
Description
Related Issues
Type of Change
Testing
Screenshots (if applicable)
Additional Notes
Summary by CodeRabbit
Style
New Features
✏️ Tip: You can customize this high-level summary in your review settings.