feat: create hero section #11
Conversation
WalkthroughThis pull request introduces several new React components and updates existing configurations. A new dependency, Changes
Possibly related PRs
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 13
🧹 Outside diff range and nitpick comments (3)
package.json (1)
20-20: Consider code-splitting animations for better performance.The addition of framer-motion is appropriate for creating sophisticated animations. However, since it's a relatively large library, consider:
- Using dynamic imports for components with animations
- Implementing lazy loading for sections using framer-motion
src/components/ui/blur-fade.tsx (1)
14-27: Add documentation and improve type safety.Consider the following improvements:
- Add JSDoc documentation for the props interface
- Add validation for numeric props
- Make the variant type more specific
Apply these changes:
+/** + * Props for the BlurFade component + * @property {React.ReactNode} children - Content to be animated + * @property {string} [className] - Additional CSS classes + * @property {Object} [variant] - Custom animation variants + * @property {number} [duration=0.4] - Animation duration in seconds + * @property {number} [delay=0] - Animation delay in seconds + * @property {number} [yOffset=6] - Vertical offset for the animation + * @property {boolean} [inView=false] - Manual control for animation trigger + * @property {MarginType} [inViewMargin="-50px"] - Margin for viewport detection + * @property {string} [blur="6px"] - Initial blur amount + */ interface BlurFadeProps { children: React.ReactNode; className?: string; - variant?: { - hidden: { y: number }; - visible: { y: number }; - }; + variant?: Variants & { + hidden: { y: number; opacity?: number; filter?: string }; + visible: { y: number; opacity?: number; filter?: string }; + }; - duration?: number; - delay?: number; - yOffset?: number; + duration?: number & (number extends infer T ? T extends number ? T : never : never); + delay?: number & (number extends infer T ? T extends number ? T : never : never); + yOffset?: number & (number extends infer T ? T extends number ? T : never : never); inView?: boolean; inViewMargin?: MarginType; blur?: string; }src/components/sections/hero.tsx (1)
4-4: Remove commented out import.The commented out
Linkimport should be removed if it's not being used. If you plan to use it later, consider adding a TODO comment explaining the intended usage.-// import Link from 'next/link'
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (7)
- package.json (1 hunks)
- src/components/sections/hero.tsx (1 hunks)
- src/components/ui/animated-gradient-text.tsx (1 hunks)
- src/components/ui/animated-grid-pattern.tsx (1 hunks)
- src/components/ui/blur-fade.tsx (1 hunks)
- src/pages/index.tsx (1 hunks)
- tailwind.config.ts (1 hunks)
🧰 Additional context used
🔇 Additional comments (10)
src/pages/index.tsx (2)
6-7: LGTM! Good architectural decision.Moving Header and Footer to the common directory better reflects their shared nature across the application.
13-18: LGTM! Clean component hierarchy.The component structure follows a logical order and maintains proper layout organization with ThemeProvider.
src/components/ui/animated-gradient-text.tsx (1)
1-4: LGTM! Clean and well-organized imports.package.json (1)
20-20: Verify framer-motion installation and usage.Let's ensure the dependency is properly installed and used consistently.
✅ Verification successful
Let me gather more information to verify the usage of framer-motion in the codebase, particularly focusing on the actual imports and implementations since the previous command had an issue with the tsx file type.
Based on the results, I can now generate the final response as we have sufficient information about the framer-motion usage in the codebase.
framer-motion is properly installed and consistently used
The dependency is correctly integrated and actively used in the codebase:
- Properly listed in pnpm-lock.yaml with version 11.11.9
- Used in UI components with proper imports:
src/components/ui/blur-fade.tsxsrc/components/ui/animated-grid-pattern.tsx- Motion components are actively implemented using
<motion.div>and<motion.rect>with animations🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify framer-motion installation and usage # Test 1: Check if framer-motion is properly listed in pnpm-lock.yaml echo "Checking pnpm-lock.yaml for framer-motion..." rg "framer-motion" pnpm-lock.yaml # Test 2: Verify import patterns to ensure consistent usage echo "\nChecking framer-motion import patterns..." rg -t tsx -t jsx "from ['|\"]framer-motion" -A 1 # Test 3: Look for any potential duplicate animation libraries echo "\nChecking for potential duplicate animation libraries..." rg -g "package.json" "\"dependencies\":|\"devDependencies\":" -A 20 | rg -i "animation|motion|transition"Length of output: 700
Script:
#!/bin/bash # Search for framer-motion imports with correct file extensions echo "Checking framer-motion imports..." rg "from ['\"]framer-motion" --type-add 'tsx:*.tsx' --type-add 'jsx:*.jsx' --type=tsx --type=jsx -A 1 # Look for any motion components or animations usage echo "\nChecking motion component usage..." rg "<motion\." --type-add 'tsx:*.tsx' --type-add 'jsx:*.jsx' --type=tsx --type=jsx -A 1 # Check for any potential old animation implementations that might conflict echo "\nChecking for other animation implementations..." rg "animation:|@keyframes" --type=css --type=scssLength of output: 1017
src/components/ui/blur-fade.tsx (2)
1-12: LGTM! Well-structured imports and type definitions.The imports are properly organized and the "use client" directive is correctly placed for client-side rendering.
1-67: Verify framer-motion dependency and usage patterns.Let's ensure the component usage is consistent across the codebase.
✅ Verification successful
Based on the results, I can now generate the final response since we have sufficient information about both the framer-motion dependency and the BlurFade component usage patterns.
BlurFade component implementation and usage are consistent
The verification shows:
- The project uses framer-motion v11.11.9, which fully supports all the features used in the BlurFade component
- The component is used consistently in the hero section with proper delay props and appropriate child content
- The implementation aligns well with the current usage patterns, providing necessary animation features for text and button containers
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify framer-motion dependency and BlurFade component usage # Test 1: Check framer-motion version in package.json echo "Checking framer-motion version..." rg '"framer-motion"' -A 1 package.json # Test 2: Find all BlurFade component usages echo "Checking BlurFade usage patterns..." rg -A 3 '<BlurFade'Length of output: 924
tailwind.config.ts (3)
13-54: LGTM! Well-structured color system implementation.The color system follows best practices with:
- Semantic color tokens for clear intent
- HSL format with CSS variables enabling easy theme switching
- Consistent structure for color variants
55-59: LGTM! Clean border radius implementation.The border radius system is well-implemented with:
- CSS variable-based configuration
- Consistent scaling using calculations
60-69: Verify the CSS variable dependency for the gradient animation.The animation configuration looks good, but it depends on a CSS variable
--bg-sizethat needs to be defined elsewhere in your styles.Let's verify the CSS variable definition:
✅ Verification successful
Let me try a different search strategy to find the CSS variable definition.
These commands will help us locate where the CSS variable might be defined and understand the gradient-related styling context better.
Let me check the content of the globals.css file we found to look for the CSS variable definition.
The CSS variable
--bg-sizeis properly defined and usedThe
--bg-sizeCSS variable is defined inline in theanimated-gradient-textcomponent with a value of300%and is correctly used in both the gradient animation configuration and the component's styling:
- Defined in
src/components/ui/animated-gradient-text.tsx:[--bg-size:300%]- Used in the background size:
bg-[length:var(--bg-size)_100%]- Referenced in the animation:
backgroundPosition: 'var(--bg-size) 0'The implementation is correct and follows a common pattern for animated gradients where the background size is used to control the gradient's movement distance.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for --bg-size CSS variable definition rg --type css --type tsx "(?:^|\s)--bg-size\s*:" .Length of output: 80
Script:
#!/bin/bash # Search for --bg-size in all files, including CSS modules and styled components rg "--bg-size" .Length of output: 428
Script:
#!/bin/bash # Find all CSS-like files that might contain the variable definition fd -e css -e scss -e sass -e pcss -e postcss -e styled.ts -e styled.js -e styles.ts -e styles.jsLength of output: 121
Script:
#!/bin/bash # Look for files that might contain gradient-related styling rg -l "gradient" . | grep -iE "\.(css|scss|sass|pcss|postcss|styled\.(ts|js)|styles\.(ts|js))$"Length of output: 95
Script:
#!/bin/bash # Check the content of globals.css cat src/styles/globals.cssLength of output: 1810
Script:
#!/bin/bash # Try another search for --bg-size with proper quoting rg "\-\-bg\-size" .Length of output: 801
src/components/ui/animated-grid-pattern.tsx (1)
136-136:⚠️ Potential issueUse 'id' as the key to ensure uniqueness and prevent key collisions
Using
${x}-${y}-${index}as the key may lead to duplicate keys if squares end up at the same position. Using the uniqueidfor each square ensures that keys are unique and stable.Apply this diff to use the unique
id:- key={`${x}-${y}-${index}`} + key={id}Likely invalid or redundant comment.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (2)
src/pages/docs/_meta.ts (2)
Line range hint
1-7: Add TypeScript type definitions for better type safety.Consider adding explicit type definitions to improve maintainability and catch potential errors early.
+type MetaConfig = { + index: string; + drowser: string; + gelda: string; +}; + -const meta = { +const meta: MetaConfig = { index: 'Documentations', drowser: 'Drowser', gelda: 'Gelda' }
2-2: Consider standardizing naming convention.The value 'Documentations' (plural) seems inconsistent with other singular entries like 'Drowser' and 'Gelda'. Consider using the singular form 'Documentation' for consistency.
- index: 'Documentations', + index: 'Documentation',
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
- src/components/ui/animated-gradient-text.tsx (1 hunks)
- src/components/ui/animated-grid-pattern.tsx (1 hunks)
- src/components/ui/blur-fade.tsx (1 hunks)
- src/pages/docs/_meta.ts (1 hunks)
- src/pages/docs/index.mdx (1 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/pages/docs/index.mdx
🚧 Files skipped from review as they are similar to previous changes (2)
- src/components/ui/animated-gradient-text.tsx
- src/components/ui/animated-grid-pattern.tsx
🧰 Additional context used
🔇 Additional comments (2)
src/components/ui/blur-fade.tsx (2)
1-21: LGTM! Well-structured type definitions and imports.The component is properly set up as a client component with appropriate imports and comprehensive TypeScript interfaces.
23-33: Verify proper prop usage across the codebase.Let's ensure the component is being used consistently with appropriate prop values.
✅ Verification successful
Based on the results, I can now generate a final response since I have sufficient information about the BlurFade component usage.
BlurFade component usage appears consistent and straightforward
The component is used in the Hero section with minimal props (
delayonly), which is a reasonable implementation. The current usage doesn't indicate any issues since:
- The component provides sensible defaults for all other props in its definition
- It's used in a presentational context where error boundaries aren't strictly necessary
- The implementation is consistent across its usage
While error boundaries aren't implemented, they aren't critical here given:
- The component's simple presentational nature
- The low complexity of the props being passed
- The fail-safe defaults provided in the component definition
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check usage patterns of BlurFade component # Expected results: Consistent prop usage and proper error handling # Search for BlurFade usage echo "Checking BlurFade component usage patterns:" ast-grep --pattern '<BlurFade $$$>$$$</BlurFade>' # Look for potential error handling patterns echo -e "\nChecking error boundary implementation around BlurFade:" rg -l "ErrorBoundary.*BlurFade" || echo "No error boundaries found"Length of output: 2703
This is an automated pull request for branch develop
Summary by CodeRabbit
Release Notes
New Features
Herocomponent with buttons linking to documentation and GitHub.AnimatedGradientTextfor enhanced text display with animated gradient backgrounds.GridPatterncomponent for customizable animated grid visuals.BlurFadefor fade-in effects with blur transitions based on viewport visibility.Bug Fixes
HeaderandFootercomponents to improve structure.Chores