added new enhancement #68
Conversation
|
@shashankkanade25 is attempting to deploy a commit to the omsherikar's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThis PR applies a comprehensive dark theme redesign across multiple website components, introducing blue and cyan accents, updated background gradients, and decorative effects. Global stylesheet changes establish the dark theme foundation with animated overlays. No functional logic or component APIs are modified. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (6)
src/components/EarlyAccessForm.tsx (3)
96-106: Remove or redact email from console logs in production.Logging user email addresses to the console is a privacy/compliance concern (GDPR/CCPA). These logs may persist in browser dev tools and could expose PII.
Suggested fix - use conditional logging
- console.log('Welcome email sent successfully:', welcomeResult); - console.log('Notification email sent successfully:', notificationResult); - - // Log to console for development - console.log('New early access signup:', { - email, - timestamp: new Date().toISOString(), - userAgent: navigator.userAgent, - welcomeEmailSent: welcomeResult.status === 200, - notificationEmailSent: notificationResult.status === 200, - }); + if (process.env.NODE_ENV === 'development') { + console.log('Welcome email sent successfully:', welcomeResult); + console.log('Notification email sent successfully:', notificationResult); + console.log('New early access signup:', { + email: '[REDACTED]', + timestamp: new Date().toISOString(), + welcomeEmailSent: welcomeResult.status === 200, + notificationEmailSent: notificationResult.status === 200, + }); + }
265-296: Success state uses light theme colors inconsistent with dark redesign.The "What happens next?" section uses
primary-50,primary-100,gray-900, andgray-600which are light theme colors. This will appear jarring against the dark form container.Suggested fix
- <div className="bg-gradient-to-r from-primary-50 to-blue-50 rounded-xl p-4 sm:p-6 border border-primary-100"> - <h4 className="text-base sm:text-lg font-semibold text-gray-900 mb-3"> + <div className="bg-gray-900/60 rounded-xl p-4 sm:p-6 border border-blue-500/30"> + <h4 className="text-base sm:text-lg font-semibold text-white mb-3"> What happens next? </h4> - <div className="space-y-2 sm:space-y-3 text-xs sm:text-sm text-gray-600"> + <div className="space-y-2 sm:space-y-3 text-xs sm:text-sm text-gray-300"> <div className="flex items-center gap-2 sm:gap-3"> - <div className="w-5 h-5 sm:w-6 sm:h-6 bg-primary-100 rounded-full flex items-center justify-center flex-shrink-0"> - <span className="text-primary-600 font-semibold text-xs"> + <div className="w-5 h-5 sm:w-6 sm:h-6 bg-blue-500/30 rounded-full flex items-center justify-center flex-shrink-0 border border-blue-400/40"> + <span className="text-blue-400 font-semibold text-xs"> 1 </span> </div>
331-357: Benefits items 1 & 2 still use light theme styling.Items 1 and 2 use
bg-primary-100andtext-primary-600(light theme), while item 3 was updated to the blue gradient. This creates visual inconsistency.Suggested fix for items 1 & 2
<div className="text-center"> - <div className="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 bg-primary-100 rounded-xl flex items-center justify-center mx-auto mb-4 sm:mb-6"> - <span className="text-lg sm:text-xl md:text-2xl font-bold text-primary-600"> + <div className="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 bg-gradient-to-br from-blue-500/30 to-cyan-500/30 rounded-xl flex items-center justify-center mx-auto mb-4 sm:mb-6 border border-blue-400/40"> + <span className="text-lg sm:text-xl md:text-2xl font-bold text-blue-400"> 1 </span> </div>Apply the same pattern to item 2.
src/components/RecognitionBadges.tsx (1)
105-116: Metadata section uses light theme colors.The metadata border and text colors (
border-gray-200,text-gray-600,text-gray-400) don't match the dark card styling. The green verified indicator works, but surrounding elements need updating.Suggested fix
- <div className="flex flex-wrap items-center justify-center lg:justify-start gap-4 pt-4 border-t border-gray-200"> - <div className="flex items-center gap-2 text-sm text-gray-600"> + <div className="flex flex-wrap items-center justify-center lg:justify-start gap-4 pt-4 border-t border-blue-500/20"> + <div className="flex items-center gap-2 text-sm text-gray-300"> <div className="w-2 h-2 bg-green-500 rounded-full"></div> <span className="font-medium">Verified</span> </div> - <span className="text-gray-400">•</span> - <span className="text-sm text-gray-600">November 2025</span> - <span className="text-gray-400">•</span> - <span className="text-sm text-gray-600"> + <span className="text-gray-500">•</span> + <span className="text-sm text-gray-400">November 2025</span> + <span className="text-gray-500">•</span> + <span className="text-sm text-gray-400"> Software Intelligence Category </span> </div>src/components/Footer.tsx (2)
101-103: Heading text invisible on dark background.
text-gray-900is nearly black text on a dark gradient background, making it unreadable. This heading and others (lines 135, 161) need updating.Suggested fix
- <h4 className="text-base sm:text-lg font-semibold text-gray-900 mb-4 sm:mb-6"> + <h4 className="text-base sm:text-lg font-semibold text-white mb-4 sm:mb-6"> Connect With Us </h4>Apply the same fix to "Quick Links" (line 135) and "Our Location" (line 161).
166-181: Location section text colors need updating for dark theme.
text-gray-600andtext-gray-500are too dark to be readable on the dark background.Suggested fix
<div className="text-center sm:text-left"> - <p className="text-gray-600 font-medium text-sm sm:text-base"> + <p className="text-gray-300 font-medium text-sm sm:text-base"> Bengaluru, India </p> - <p className="text-xs sm:text-sm text-gray-500"> + <p className="text-xs sm:text-sm text-gray-400"> Asia Pacific </p> </div> - <p className="text-gray-600 text-xs sm:text-sm"> + <p className="text-gray-400 text-xs sm:text-sm"> Global team, local impact </p> - <p className="text-xs text-gray-500"> + <p className="text-xs text-gray-400"> Serving developers worldwide </p>
🧹 Nitpick comments (1)
src/index.css (1)
89-92: Focus outline color inconsistent with new blue theme.The focus outline still uses
#20b2aa(teal), which doesn't align with the new blue/cyan palette (#3b82f6,#06b6d4). Consider updating for visual consistency.Suggested fix
*:focus-visible { - outline: 3px solid #20b2aa; + outline: 3px solid #3b82f6; outline-offset: 2px; }
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/components/EarlyAccessForm.tsxsrc/components/Footer.tsxsrc/components/HeroSection.tsxsrc/components/NavigationBar.tsxsrc/components/RecognitionBadges.tsxsrc/components/WhatWeDoSection.tsxsrc/index.css
🔇 Additional comments (9)
src/index.css (2)
14-48: LGTM! Dark theme base and animated overlay implemented correctly.The animated overlay respects
prefers-reduced-motionvia the global rule at lines 123-132, which is good for accessibility. Thepointer-events: noneensures interactivity isn't blocked.
136-157:.glass-effectuses a white background that creates poor contrast with the dark theme.
.glass-effectis actively used across multiple components (NotFoundPage, ErrorBoundary, AboutPage) and usesbackground: rgba(255, 255, 255, 0.8), creating visual inconsistency on the dark-themed site. Meanwhile,.gradient-bgand.glow-borderare not used anywhere in the codebase, so they do not impact theme consistency.Likely an incorrect or invalid review comment.
src/components/WhatWeDoSection.tsx (2)
63-79: LGTM! Cohesive dark theme styling applied.The blue-themed gradients, translucent backdrops, and typography updates are consistent with the overall design system. Text contrast ratios appear adequate for readability (white/blue-200 on dark backgrounds).
Also applies to: 100-109, 125-138
83-88: Theanimate-floatanimation is properly defined in your Tailwind config (tailwind.config.js) with a 6-second ease-in-out infinite duration and a 20px vertical translation keyframe. No changes needed.src/components/EarlyAccessForm.tsx (1)
149-160: LGTM! Form section dark theme styling is well-implemented.The gradient backgrounds, blue glow effects, and form input styling provide a cohesive dark theme experience with proper focus states.
Also applies to: 171-178, 189-224
src/components/RecognitionBadges.tsx (1)
15-26: LGTM! Recognition section dark theme implementation is cohesive.The blue glow effects, translucent card backdrops, and gradient accents create a consistent visual hierarchy that aligns with the overall design system.
Also applies to: 37-43, 54-101, 139-156
src/components/HeroSection.tsx (1)
21-55: LGTM! Hero section dark theme implementation is excellent.The gradient background, animated glow effects, bold typography with gradient accents, and vibrant CTAs create an impactful hero section. The hover states and transitions are smooth (300ms duration).
Also applies to: 79-102
src/components/Footer.tsx (1)
54-63: LGTM! Footer gradient and accent styling is well-executed.The dark gradient background, blue-tinted borders, gradient brand text, and social icon styling align with the overall theme.
Also applies to: 77-81, 115-120, 192-227
src/components/NavigationBar.tsx (1)
66-70: LGTM! Navigation bar dark theme is polished.The scrolled/non-scrolled states, glassmorphism effects, gradient CTAs, and mobile menu styling are all cohesive. The z-50 stacking context and backdrop blur create a professional appearance.
Also applies to: 85-117, 128-131, 150-196
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
1 participant
Description
Type of Change
Related Issue
Closes #
Changes Made
Screenshots (if applicable)
Checklist
Testing
Additional Notes
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.