Skip to content

Conversation

@sambhavgsharma
Copy link

@sambhavgsharma sambhavgsharma commented Jun 20, 2025

feat: Redesigned Home Page with Animations, Parallax Effects, and Smooth Scrolling

Resolves #3

Description

What is the purpose of this pull request?

This PR completely revamps the Home Page UI to give it a more modern, clean, and dynamic look.
Key enhancements include:

  • 🌟 A full homepage redesign based on inspiration shared earlier in the issue
  • 🎞️ Animations using Framer Motion for smooth transitions
  • 🌀 Smooth scrolling using Lenis
  • 🌄 Parallax effects for a more engaging scroll experience
  • 🧭 Tweaked header and footer to align with the new design language
  • ⚡ Keeps the site Responsive

These changes aim to enhance the overall user experience and visual appeal of the landing page.

Live Demo and Screenshots

image
image
image
image

2025-06-20.08-59-23.1.mp4

Note for Maintainer

Please note: I understand that the issue mentioned sharing the design first for approval.
The design implemented here is based on the inspiration and direction provided earlier in the issue by the previously assigned contributor.
I took the initiative to implement it in the interest of progress.
I’m fully open to any feedback, design adjustments, or suggestions you may have!

Checkout

  • I have read all the contributor guidelines for the repo.

Summary by CodeRabbit

  • New Features
    • Introduced animated and parallax sections for notes, marketplace, and community on the homepage, enhancing interactivity and visual appeal.
    • Added smooth scrolling for improved navigation experience.
    • Implemented new custom hook for responsive design based on window size.
  • Style
    • Updated header and footer with new color schemes, fonts, and simplified layouts.
    • Enhanced homepage hero section with animated SVG backgrounds and revised content.
  • Chores
    • Added new dependencies for animation and smooth scrolling.
    • Introduced Tailwind CSS configuration with a custom font.

@vercel
Copy link

vercel bot commented Jun 20, 2025

@sambhavgsharma is attempting to deploy a commit to the mrimmortal09's projects Team on Vercel.

A member of the Team first needs to authorize it.

@vercel
Copy link

vercel bot commented Jun 20, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
student-hub ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 21, 2025 6:57am

@MrImmortal09
Copy link
Collaborator

@sambhavgsharma please fix the build errors.
Run, npm run build locally and resolve each n every error.

@coderabbitai
Copy link

coderabbitai bot commented Jun 20, 2025

Walkthrough

The changes implement a comprehensive redesign of the home page. Several new animated and visually enhanced sections are introduced, including marketplace, notes, and community sections, with parallax and scroll-based effects. The header and footer are restyled, the main page structure is reworked, and supporting hooks and configuration files are added for responsive design and animation.

Changes

Files / Groups Change Summary
app/page.jsx Refactored as a client component; replaced CTA section with new animated sections; added smooth scrolling and font loading.
components/footer.tsx, components/header.tsx Footer simplified and restyled; header restyled with new classes and font.
components/homepage/hero-section.tsx Hero section rewritten with animated triangles, new headings, and updated button/link.
components/homepage/notes-section.tsx,
components/homepage/marketplace-section.tsx,
components/homepage/community-section.tsx
Three new animated homepage sections added for notes, marketplace, and community, each with parallax/scroll effects and responsive layouts.
components/homepage/cta-section.tsx CTA section component deleted.
hooks/useDimensions.ts New custom hook for tracking window dimensions.
tailwind.config.js New Tailwind CSS config with custom font and content paths.
package.json Added framer-motion and lenis dependencies for animation and smooth scrolling.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant HomePage (Client)
    participant HeroSection
    participant NotesSection
    participant MarketplaceSection
    participant CommunitySection

    User->>HomePage: Loads page
    HomePage->>HeroSection: Render with animated intro and button
    HomePage->>NotesSection: Render animated notes gallery and CTA
    HomePage->>MarketplaceSection: Render animated marketplace gallery and CTA
    HomePage->>CommunitySection: Render animated community gallery and CTA
    HomePage->>User: Display smooth scrolling and new layout
Loading

Assessment against linked issues

Objective (Issue #) Addressed Explanation
Redesign the home page (#3)

Suggested labels

accepted-50

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

npm error Exit handler never called!
npm error This is an error with npm itself. Please report this error at:
npm error https://github.com/npm/cli/issues
npm error A complete log of this run can be found in: /.npm/_logs/2025-06-20T19_54_21_632Z-debug-0.log

✨ Finishing Touches
  • 📝 Generate Docstrings

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

‼️ IMPORTANT
Auto-reply has been disabled for this repository in the CodeRabbit settings. The CodeRabbit bot will not respond to your replies unless it is explicitly tagged.

  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 7

♻️ Duplicate comments (2)
tailwind.config.js (1)

1-14: Address previous concern about Tailwind configuration duplication.

A past reviewer questioned whether this configuration is necessary since Tailwind is already configured in the project. Please clarify if this replaces existing configuration or if there are conflicts with existing Tailwind setup.

#!/bin/bash
# Check for existing Tailwind configuration files
fd -t f "tailwind.config" . 
fd -t f "tailwind.js" .
# Check if Tailwind is configured elsewhere
rg -i "tailwind" package.json
app/globals.css (1)

79-80: Remove unnecessary blank lines.

As noted in a previous review, these blank lines add no functional value and create unnecessary diff noise.

-
-
🧹 Nitpick comments (9)
package.json (1)

37-37: Minor: Unnecessary reordering of existing dependencies.

The reordering of lucide-react and @types/zxcvbn without version changes adds noise to the diff without functional benefit.

Also applies to: 56-56

components/footer.tsx (1)

4-9: Consider extracting footer links to a configuration file.

While the implementation is clean, hardcoding the footer links directly in the component reduces maintainability. Consider moving these to a separate configuration file for easier updates.

components/homepage/marketplace-section.tsx (1)

36-40: Consider externalizing image data.

The hardcoded image array reduces maintainability. Consider moving this to a configuration file or fetching from an API.

Create a separate data file:

// data/marketplace-images.ts
export const marketplaceImages = [
  "1.jpeg", "2.jpeg", "3.jpeg", "4.jpeg",
  "5.jpeg", "6.jpeg", "7.jpeg", "8.jpeg",
  "9.jpeg", "10.jpeg", "11.jpeg", "12.jpeg",
];
components/homepage/hero-section.tsx (1)

66-75: Consider alternative to inline styles for CSS custom properties.

While the current approach works, consider using CSS modules or a styled component for better maintainability.

Alternative approach using data attributes:

<section
  className="min-h-[100vh] py-8 md:py-20 relative overflow-hidden text-black dark:text-gray-300"
  data-theme-colors
>

Then in your CSS:

[data-theme-colors] {
  --tri: rgba(30,41,59,0.7);
}
@media (prefers-color-scheme: dark) {
  [data-theme-colors] {
    --tri: rgba(191,219,254,0.7);
  }
}
components/homepage/notes-section.tsx (1)

38-51: Consider externalizing image data for consistency.

Similar to the marketplace section, consider moving the hardcoded image array to a configuration file for better maintainability.

components/homepage/community-section.tsx (4)

2-4: Remove redundant imports.

The React import on line 2 is unnecessary in Next.js 13+ with the app directory, and useRef is already available from the React import.

-import React from 'react';
 import { useTransform, useScroll, motion, MotionValue } from 'framer-motion';
-import { useRef } from 'react';
+import { useRef } from 'react';

11-11: Add missing space in arrow function declaration.

-const CommunitySection = () =>{
+const CommunitySection = () => {

13-26: Move images array outside component to prevent unnecessary re-creation.

The images array is being recreated on every render. Moving it outside the component will improve performance.

+const COMMUNITY_IMAGES = [
+  "1.jpeg",
+  "2.jpeg",
+  "3.jpeg",
+  "4.jpeg",
+  "5.jpeg",
+  "6.jpeg",
+  "7.jpeg",
+  "8.jpeg",
+  "9.jpeg",
+  "10.jpeg",
+  "11.jpeg",
+  "12.jpeg",
+];
+
 const CommunitySection = () => {
-    const images = [
-        "1.jpeg",
-        "2.jpeg",
-        "3.jpeg",
-        "4.jpeg",
-        "5.jpeg",
-        "6.jpeg",
-        "7.jpeg",
-        "8.jpeg",
-        "9.jpeg",
-        "10.jpeg",
-        "11.jpeg",
-        "12.jpeg",
-    ];

101-104: Use the moved images constant.

Update the references to use the moved COMMUNITY_IMAGES constant.

-<Column images={[images[0], images[1], images[2]]} y={y} top='-45%' />
-<Column images={[images[3], images[4], images[5]]} y={y1} top='-95%' />
-<Column images={[images[6], images[7], images[8]]} y={y2} top='-45%' />
-<Column images={[images[9], images[10], images[11]]} y={y3} top='-75%' />
+<Column images={[COMMUNITY_IMAGES[0], COMMUNITY_IMAGES[1], COMMUNITY_IMAGES[2]]} y={y} top='-45%' />
+<Column images={[COMMUNITY_IMAGES[3], COMMUNITY_IMAGES[4], COMMUNITY_IMAGES[5]]} y={y1} top='-95%' />
+<Column images={[COMMUNITY_IMAGES[6], COMMUNITY_IMAGES[7], COMMUNITY_IMAGES[8]]} y={y2} top='-45%' />
+<Column images={[COMMUNITY_IMAGES[9], COMMUNITY_IMAGES[10], COMMUNITY_IMAGES[11]]} y={y3} top='-75%' />
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 43378e6 and 1984015.

⛔ Files ignored due to path filters (37)
  • package-lock.json is excluded by !**/package-lock.json
  • public/commsgall/1.jpeg is excluded by !**/*.jpeg
  • public/commsgall/10.jpeg is excluded by !**/*.jpeg
  • public/commsgall/11.jpeg is excluded by !**/*.jpeg
  • public/commsgall/12.jpeg is excluded by !**/*.jpeg
  • public/commsgall/2.jpeg is excluded by !**/*.jpeg
  • public/commsgall/3.jpeg is excluded by !**/*.jpeg
  • public/commsgall/4.jpeg is excluded by !**/*.jpeg
  • public/commsgall/5.jpeg is excluded by !**/*.jpeg
  • public/commsgall/6.jpeg is excluded by !**/*.jpeg
  • public/commsgall/7.jpeg is excluded by !**/*.jpeg
  • public/commsgall/8.jpeg is excluded by !**/*.jpeg
  • public/commsgall/9.jpeg is excluded by !**/*.jpeg
  • public/marketgall/1.jpeg is excluded by !**/*.jpeg
  • public/marketgall/10.jpeg is excluded by !**/*.jpeg
  • public/marketgall/11.jpeg is excluded by !**/*.jpeg
  • public/marketgall/12.jpeg is excluded by !**/*.jpeg
  • public/marketgall/2.jpeg is excluded by !**/*.jpeg
  • public/marketgall/3.jpeg is excluded by !**/*.jpeg
  • public/marketgall/4.jpeg is excluded by !**/*.jpeg
  • public/marketgall/5.jpeg is excluded by !**/*.jpeg
  • public/marketgall/6.jpeg is excluded by !**/*.jpeg
  • public/marketgall/7.jpeg is excluded by !**/*.jpeg
  • public/marketgall/8.jpeg is excluded by !**/*.jpeg
  • public/marketgall/9.jpeg is excluded by !**/*.jpeg
  • public/notesgall/1.jpeg is excluded by !**/*.jpeg
  • public/notesgall/10.jpeg is excluded by !**/*.jpeg
  • public/notesgall/11.jpeg is excluded by !**/*.jpeg
  • public/notesgall/12.jpeg is excluded by !**/*.jpeg
  • public/notesgall/2.jpeg is excluded by !**/*.jpeg
  • public/notesgall/3.jpeg is excluded by !**/*.jpeg
  • public/notesgall/4.jpeg is excluded by !**/*.jpeg
  • public/notesgall/5.jpeg is excluded by !**/*.jpeg
  • public/notesgall/6.jpeg is excluded by !**/*.jpeg
  • public/notesgall/7.jpeg is excluded by !**/*.jpeg
  • public/notesgall/8.jpeg is excluded by !**/*.jpeg
  • public/notesgall/9.jpeg is excluded by !**/*.jpeg
📒 Files selected for processing (12)
  • app/globals.css (1 hunks)
  • app/page.jsx (1 hunks)
  • components/footer.tsx (1 hunks)
  • components/header.tsx (1 hunks)
  • components/homepage/community-section.tsx (1 hunks)
  • components/homepage/cta-section.tsx (0 hunks)
  • components/homepage/hero-section.tsx (1 hunks)
  • components/homepage/marketplace-section.tsx (1 hunks)
  • components/homepage/notes-section.tsx (1 hunks)
  • hooks/useDimensions.ts (1 hunks)
  • package.json (2 hunks)
  • tailwind.config.js (1 hunks)
💤 Files with no reviewable changes (1)
  • components/homepage/cta-section.tsx
🔇 Additional comments (12)
package.json (1)

34-36: New dependencies look good for animation and smooth scrolling features.

The additions of framer-motion and lenis align well with the PR objectives for implementing animations and smooth scrolling effects.

hooks/useDimensions.ts (1)

3-23: Good implementation of window dimensions tracking.

The hook properly handles resize events and cleanup, with appropriate initialization and effect management.

components/header.tsx (2)

11-11: Enhanced header styling looks good.

The updated styling with backdrop blur, semi-transparent background, and custom font creates a modern appearance that aligns with the redesign objectives.


13-13: Minor cleanup removing trailing space.

Good attention to detail removing the unnecessary trailing space.

components/footer.tsx (2)

16-28: Clean implementation with proper accessibility attributes.

Good job on:

  • Using semantic HTML with proper ARIA labels
  • Handling external links correctly with target="_blank" and rel="noopener noreferrer"
  • Implementing responsive design with proper hover states

13-13: ```shell
#!/bin/bash

Search TS/TSX files for any Satoshi font imports or usage (e.g., via next/font or custom @font-face)

fd -e ts -e tsx | xargs grep -n -i "satoshi" || echo "No TS/TSX references to Satoshi font found"


</details>
<details>
<summary>components/homepage/marketplace-section.tsx (1)</summary>

`64-80`: **Well-structured Column component with proper TypeScript.**

Good implementation with:
- Proper TypeScript typing for props
- Default parameter values
- Clean component structure
- Proper use of Next.js Image component

</details>
<details>
<summary>components/homepage/hero-section.tsx (2)</summary>

`10-38`: **Excellent TypeScript implementation for AnimatedTriangle.**

Great job on:
- Proper interface definition with specific Framer Motion types
- Clean component structure
- Flexible props for animation configuration

---

`150-150`: **Smart animation sequencing with onAnimationComplete.**

Excellent use of animation callbacks to sequence the triangle animations after the main content animates in. This creates a polished user experience.

</details>
<details>
<summary>components/homepage/notes-section.tsx (1)</summary>

`68-85`: **Consistent implementation with marketplace section.**

Good job maintaining consistency with the Column component implementation across sections. The code reuse pattern is well executed.

</details>
<details>
<summary>components/homepage/community-section.tsx (2)</summary>

`58-58`: **Verify the image directory path exists.**

Ensure the `/commsgall/` directory exists in the public folder and contains the referenced images.



```shell
#!/bin/bash
# Check if the community gallery images directory exists and contains the expected images
if [ -d "public/commsgall" ]; then
  echo "Directory exists. Files found:"
  ls -la public/commsgall/
else
  echo "Directory public/commsgall does not exist"
fi

28-28: Verify the useDimensions hook implementation.

Ensure the custom useDimensions hook is properly implemented and provides the expected height value.

#!/bin/bash
# Check if the useDimensions hook exists and examine its implementation
if [ -f "hooks/useDimensions.ts" ]; then
  echo "useDimensions hook found:"
  cat hooks/useDimensions.ts
elif [ -f "hooks/useDimensions.js" ]; then
  echo "useDimensions hook found (JS):"
  cat hooks/useDimensions.js
else
  echo "useDimensions hook not found in hooks directory"
  fd -t f -e ts -e js useDimensions
fi

"use client";
import HeroSection from '@/components/homepage/hero-section'
import CtaSection from '@/components/homepage/cta-section'
import Head from 'next/head'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Remove deprecated Head import from next/head.

The Head component from next/head is deprecated in the Next.js App Router. Font loading should be handled in the layout or metadata instead.

🤖 Prompt for AI Agents
In app/page.jsx at line 3, remove the import statement for the deprecated Head
component from 'next/head'. Instead, handle font loading and metadata in the
layout or metadata configuration files as per Next.js App Router guidelines.

Comment on lines +18 to +23
<Head>
<link
href="https://api.fontshare.com/v2/css?f[]=satoshi@400&display=swap"
rel="stylesheet"
/>
</Head>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Move font loading to proper location.

Font loading via Head component should be moved to the layout or configured properly for Next.js App Router.

Would you like me to show you how to properly configure custom fonts in Next.js App Router using next/font or in the layout file?

🤖 Prompt for AI Agents
In app/page.jsx around lines 18 to 23, the font loading is done inside the Head
component of a page, which is not the recommended approach for Next.js App
Router. Move the font loading logic to the root layout file or use the next/font
package to configure custom fonts properly. This ensures fonts are loaded
globally and efficiently across all pages.

<section className="py-8 md:py-20 relative">
<div className='flex flex-col md:flex-row justify-between px-2 md:px-4 w-full gap-8'>
<motion.div
className='w-full md:w-1/2 h-auto md:h-screen flex flex-col justify-center items-start px-2 md:px-8 mb-8 md:mb-0 dark:text:gray-200'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix typo in className.

There's a syntax error in the dark mode text color class.

-className='w-full md:w-1/2 h-auto md:h-screen flex flex-col justify-center items-start px-2 md:px-8 mb-8 md:mb-0 dark:text:gray-200'
+className='w-full md:w-1/2 h-auto md:h-screen flex flex-col justify-center items-start px-2 md:px-8 mb-8 md:mb-0 dark:text-gray-200'
📝 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.

Suggested change
className='w-full md:w-1/2 h-auto md:h-screen flex flex-col justify-center items-start px-2 md:px-8 mb-8 md:mb-0 dark:text:gray-200'
className='w-full md:w-1/2 h-auto md:h-screen flex flex-col justify-center items-start px-2 md:px-8 mb-8 md:mb-0 dark:text-gray-200'
🤖 Prompt for AI Agents
In components/homepage/notes-section.tsx at line 94, fix the typo in the
className string where the dark mode text color class is written as
'dark:text:gray-200'. Replace the colon after 'text' with a dash to correctly
form 'dark:text-gray-200'.

@MrImmortal09
Copy link
Collaborator

Overall a nice PR.
a few changes and we are good to go

image
The images here in the bg aren't filled properly when in mobile view.

@MrImmortal09
Copy link
Collaborator

image
The light mode looks awesome, but
when in dark mode, the text looks dull, could try doing something different.
Like the one div(image below) looks awesome, but not the above one.
image

@MrImmortal09
Copy link
Collaborator

@0PrashantYadav0 Do take a look at this one.

@0PrashantYadav0
Copy link
Member

I will check this soon, currently I don't have bandwidth.

@MrImmortal09
Copy link
Collaborator

do have complete names for the folders you create, long names aren't an issue.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

♻️ Duplicate comments (2)
app/page.jsx (2)

3-3: Remove deprecated Head import from next/head.


20-25: Move font loading to proper location.

🧹 Nitpick comments (5)
app/page.jsx (1)

13-13: Fix syntax: Add space in return function.

-    return()=>{
+    return () => {
components/homepage/hero-section.tsx (1)

66-75: Consider using Tailwind's built-in dark mode instead of CSS custom properties.

While the current approach works, Tailwind's dark mode classes would be more maintainable:

-      style={{
-        '--tri': 'rgba(30,41,59,0.7)',
-        '--tri-dark': 'rgba(191,219,254,0.7)',
-      } as React.CSSProperties}
-    >
-      <style>{`
-        @media (prefers-color-scheme: dark) {
-          section[style] { --tri: var(--tri-dark) !important; }
-        }
-      `}</style>
+      className="[--tri:rgba(30,41,59,0.7)] dark:[--tri:rgba(191,219,254,0.7)]"
+    >
components/homepage/notes-section.tsx (1)

38-51: Consider moving image array to constants file.

The hardcoded image filenames could be moved to a constants file for better maintainability:

// constants/images.ts
export const NOTES_IMAGES = [
  "1.jpeg", "2.jpeg", "3.jpeg", "4.jpeg",
  "5.jpeg", "6.jpeg", "7.jpeg", "8.jpeg", 
  "9.jpeg", "10.jpeg", "11.jpeg", "12.jpeg"
];
components/homepage/community-section.tsx (2)

36-53: Consider extracting responsive logic into a custom hook.

Both this component and NotesSection have similar responsive parallax logic. Consider creating a shared useResponsiveParallax hook:

// hooks/useResponsiveParallax.ts
const useResponsiveParallax = (defaultMultipliers: number[]) => {
  const [parallaxMultipliers, setParallaxMultipliers] = useState(defaultMultipliers);
  
  useEffect(() => {
    const updateParallax = () => {
      // shared responsive logic
    };
    updateParallax();
    window.addEventListener('resize', updateParallax);
    return () => window.removeEventListener('resize', updateParallax);
  }, []);
  
  return parallaxMultipliers;
};

126-126: Consider using CSS custom properties for height values.

The hardcoded height h-[120vw] md:h-[175vh] could benefit from CSS custom properties for easier theming and maintenance.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1984015 and f9f277f.

⛔ Files ignored due to path filters (36)
  • public/community-gallery/1.jpeg is excluded by !**/*.jpeg
  • public/community-gallery/10.jpeg is excluded by !**/*.jpeg
  • public/community-gallery/11.jpeg is excluded by !**/*.jpeg
  • public/community-gallery/12.jpeg is excluded by !**/*.jpeg
  • public/community-gallery/2.jpeg is excluded by !**/*.jpeg
  • public/community-gallery/3.jpeg is excluded by !**/*.jpeg
  • public/community-gallery/4.jpeg is excluded by !**/*.jpeg
  • public/community-gallery/5.jpeg is excluded by !**/*.jpeg
  • public/community-gallery/6.jpeg is excluded by !**/*.jpeg
  • public/community-gallery/7.jpeg is excluded by !**/*.jpeg
  • public/community-gallery/8.jpeg is excluded by !**/*.jpeg
  • public/community-gallery/9.jpeg is excluded by !**/*.jpeg
  • public/marketplace-gallery/1.jpeg is excluded by !**/*.jpeg
  • public/marketplace-gallery/10.jpeg is excluded by !**/*.jpeg
  • public/marketplace-gallery/11.jpeg is excluded by !**/*.jpeg
  • public/marketplace-gallery/12.jpeg is excluded by !**/*.jpeg
  • public/marketplace-gallery/2.jpeg is excluded by !**/*.jpeg
  • public/marketplace-gallery/3.jpeg is excluded by !**/*.jpeg
  • public/marketplace-gallery/4.jpeg is excluded by !**/*.jpeg
  • public/marketplace-gallery/5.jpeg is excluded by !**/*.jpeg
  • public/marketplace-gallery/6.jpeg is excluded by !**/*.jpeg
  • public/marketplace-gallery/7.jpeg is excluded by !**/*.jpeg
  • public/marketplace-gallery/8.jpeg is excluded by !**/*.jpeg
  • public/marketplace-gallery/9.jpeg is excluded by !**/*.jpeg
  • public/notes-gallery/1.jpeg is excluded by !**/*.jpeg
  • public/notes-gallery/10.jpeg is excluded by !**/*.jpeg
  • public/notes-gallery/11.jpeg is excluded by !**/*.jpeg
  • public/notes-gallery/12.jpeg is excluded by !**/*.jpeg
  • public/notes-gallery/2.jpeg is excluded by !**/*.jpeg
  • public/notes-gallery/3.jpeg is excluded by !**/*.jpeg
  • public/notes-gallery/4.jpeg is excluded by !**/*.jpeg
  • public/notes-gallery/5.jpeg is excluded by !**/*.jpeg
  • public/notes-gallery/6.jpeg is excluded by !**/*.jpeg
  • public/notes-gallery/7.jpeg is excluded by !**/*.jpeg
  • public/notes-gallery/8.jpeg is excluded by !**/*.jpeg
  • public/notes-gallery/9.jpeg is excluded by !**/*.jpeg
📒 Files selected for processing (6)
  • app/page.jsx (1 hunks)
  • components/homepage/community-section.tsx (1 hunks)
  • components/homepage/hero-section.tsx (1 hunks)
  • components/homepage/marketplace-section.tsx (1 hunks)
  • components/homepage/notes-section.tsx (1 hunks)
  • hooks/useDimensions.ts (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • hooks/useDimensions.ts
  • components/homepage/marketplace-section.tsx
🔇 Additional comments (6)
app/page.jsx (1)

11-16: LGTM! Lenis integration is properly implemented.

The smooth scrolling setup with proper cleanup in useEffect looks good. The memory leak issue from previous reviews has been resolved.

components/homepage/hero-section.tsx (2)

10-18: Well-defined TypeScript interfaces.

The AnimatedTriangleProps interface is properly structured with clear type definitions for animation props.


51-61: Animation state management is well implemented.

The conditional triangle rendering with onAnimationComplete callback provides smooth user experience by showing background elements after primary content loads.

components/homepage/notes-section.tsx (1)

60-74: Responsive parallax implementation is well-architected.

The responsive parallax multipliers with window resize listeners provide smooth animations across different screen sizes.

components/homepage/community-section.tsx (2)

81-81: Good accessibility improvement.

The descriptive alt text Community gallery image ${index + 1} addresses the previous review feedback and improves accessibility.


97-99: Gradient text implementation looks great.

The gradient text effect using bg-gradient-to-r and bg-clip-text creates an engaging visual hierarchy for the section title.

@@ -0,0 +1,156 @@
"use client"
import React from 'react'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Remove duplicate React import.

React is imported twice - once at the top and once via React.useState and React.useEffect. Consolidate imports:

-import React from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import Link from "next/link"
 import {useTransform,useScroll, motion, MotionValue} from "framer-motion"
 import { Button } from '@/components/ui/button'
 import useDimensions from '@/hooks/useDimensions'
 import Image from 'next/image'
-import { useRef } from 'react'

And update the usage:

-    const [parallaxMultipliers, setParallaxMultipliers] = React.useState([0.2, 0.35, 0.15]);
+    const [parallaxMultipliers, setParallaxMultipliers] = useState([0.2, 0.35, 0.15]);

-    React.useEffect(() => {
+    useEffect(() => {

Also applies to: 58-58

🤖 Prompt for AI Agents
In components/homepage/notes-section.tsx at lines 2 and 58, there are duplicate
React imports. Remove the separate React import statement and instead import
useState and useEffect directly from 'react' in a single import statement. Then
update all React.useState and React.useEffect usages to just useState and
useEffect respectively to consolidate and clean up the imports.

@sambhavgsharma
Copy link
Author

I have made a new commit which does the following

  • Implements Code Changes suggested by CodeRabbit
  • Add Dynamic Top Values (As per screen width) for Community Section grid, which aims to increase responsiveness
  • Improved Contrast in Dark Mode for the Community Section
  • Rename the galleries
    @MrImmortal09 Please have a look, and tell me if there are any more changes :)

@MrImmortal09
Copy link
Collaborator

MrImmortal09 commented Jun 21, 2025

Honestly, The design is better than previous one but not the best, or something to make this PR stand out.
Like I am ok with the changes, but think for the Dark Mode once.
Further review to be done by Prashant.

@sambhavgsharma
Copy link
Author

Honestly, The design is better than previous one but not the best, or something to make this PR stand out. Like I am ok with the changes, but think for the Dark Mode once. Further review to be done by Prashant.

I’m really sorry, sir — I now realise the design might not be up to the mark.
The current version was actually based on the inspiration site shared earlier in the past issue conversations (with the previously assigned contributor), so I followed that as a reference.
Would it be possible for you to share more specific feedback on what exactly I can improve to make this PR stand out?
Should I take a different design direction altogether? Or focus specifically on enhancing dark mode?
I will be Happy to rework the layout, animations, color palette — whatever’s needed. Just need a little more clarity so I can bring it closer to what you have in mind.
Thank you sir for your time and feedback 🙏

@0PrashantYadav0
Copy link
Member

One point I need to mention here: it's not about UI, it's about UX. We definitely want to change the design, but not just to make the site more visually appealing — the goal is to make it easier to use. For example, our current top navbar is quite cluttered, and I want to group similar items under a single point.

At this stage, I’d like to first explore ways to improve the UX. Alongside that, I also want you to look into some UI inspirations. The one we have is good, but I’d like you to explore more options.

@sambhavgsharma
Copy link
Author

Thank you so much for your feedback, sir 🙏
I’ll definitely focus on improving the ux —like making interactions smoother and more intuitive. I’ll also look for better ui inspirations that are a balance between visual aesthetics and solid ux principles. Will come back with a refined design that aligns better with what we’re aiming for.

@0PrashantYadav0
Copy link
Member

Good, in the mean time let this pr be opened and you explore. @MrImmortal09 Do drop any ui reference you find.

@0PrashantYadav0
Copy link
Member

Any updates @sambhavgsharma

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[feat]: Redesign the home page

3 participants