-
Notifications
You must be signed in to change notification settings - Fork 39
feat: Redesigned Home Page with Animations, Parallax Effects, and Smooth Scrolling #107
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
|
@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. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@sambhavgsharma please fix the build errors. |
WalkthroughThe 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
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
Assessment against linked issues
Suggested labels
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
npm error Exit handler never called! ✨ 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this 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.jsonapp/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-reactand@types/zxcvbnwithout 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
useRefis 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_IMAGESconstant.-<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
⛔ Files ignored due to path filters (37)
package-lock.jsonis excluded by!**/package-lock.jsonpublic/commsgall/1.jpegis excluded by!**/*.jpegpublic/commsgall/10.jpegis excluded by!**/*.jpegpublic/commsgall/11.jpegis excluded by!**/*.jpegpublic/commsgall/12.jpegis excluded by!**/*.jpegpublic/commsgall/2.jpegis excluded by!**/*.jpegpublic/commsgall/3.jpegis excluded by!**/*.jpegpublic/commsgall/4.jpegis excluded by!**/*.jpegpublic/commsgall/5.jpegis excluded by!**/*.jpegpublic/commsgall/6.jpegis excluded by!**/*.jpegpublic/commsgall/7.jpegis excluded by!**/*.jpegpublic/commsgall/8.jpegis excluded by!**/*.jpegpublic/commsgall/9.jpegis excluded by!**/*.jpegpublic/marketgall/1.jpegis excluded by!**/*.jpegpublic/marketgall/10.jpegis excluded by!**/*.jpegpublic/marketgall/11.jpegis excluded by!**/*.jpegpublic/marketgall/12.jpegis excluded by!**/*.jpegpublic/marketgall/2.jpegis excluded by!**/*.jpegpublic/marketgall/3.jpegis excluded by!**/*.jpegpublic/marketgall/4.jpegis excluded by!**/*.jpegpublic/marketgall/5.jpegis excluded by!**/*.jpegpublic/marketgall/6.jpegis excluded by!**/*.jpegpublic/marketgall/7.jpegis excluded by!**/*.jpegpublic/marketgall/8.jpegis excluded by!**/*.jpegpublic/marketgall/9.jpegis excluded by!**/*.jpegpublic/notesgall/1.jpegis excluded by!**/*.jpegpublic/notesgall/10.jpegis excluded by!**/*.jpegpublic/notesgall/11.jpegis excluded by!**/*.jpegpublic/notesgall/12.jpegis excluded by!**/*.jpegpublic/notesgall/2.jpegis excluded by!**/*.jpegpublic/notesgall/3.jpegis excluded by!**/*.jpegpublic/notesgall/4.jpegis excluded by!**/*.jpegpublic/notesgall/5.jpegis excluded by!**/*.jpegpublic/notesgall/6.jpegis excluded by!**/*.jpegpublic/notesgall/7.jpegis excluded by!**/*.jpegpublic/notesgall/8.jpegis excluded by!**/*.jpegpublic/notesgall/9.jpegis 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-motionandlenisalign 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"andrel="noopener noreferrer"- Implementing responsive design with proper hover states
13-13: ```shell
#!/bin/bashSearch 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
useDimensionshook is properly implemented and provides the expectedheightvalue.#!/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' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
| <Head> | ||
| <link | ||
| href="https://api.fontshare.com/v2/css?f[]=satoshi@400&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| </Head> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
| 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'.
|
@0PrashantYadav0 Do take a look at this one. |
|
I will check this soon, currently I don't have bandwidth. |
|
do have complete names for the folders you create, long names aren't an issue. |
There was a problem hiding this 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
NotesSectionhave similar responsive parallax logic. Consider creating a shareduseResponsiveParallaxhook:// 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
⛔ Files ignored due to path filters (36)
public/community-gallery/1.jpegis excluded by!**/*.jpegpublic/community-gallery/10.jpegis excluded by!**/*.jpegpublic/community-gallery/11.jpegis excluded by!**/*.jpegpublic/community-gallery/12.jpegis excluded by!**/*.jpegpublic/community-gallery/2.jpegis excluded by!**/*.jpegpublic/community-gallery/3.jpegis excluded by!**/*.jpegpublic/community-gallery/4.jpegis excluded by!**/*.jpegpublic/community-gallery/5.jpegis excluded by!**/*.jpegpublic/community-gallery/6.jpegis excluded by!**/*.jpegpublic/community-gallery/7.jpegis excluded by!**/*.jpegpublic/community-gallery/8.jpegis excluded by!**/*.jpegpublic/community-gallery/9.jpegis excluded by!**/*.jpegpublic/marketplace-gallery/1.jpegis excluded by!**/*.jpegpublic/marketplace-gallery/10.jpegis excluded by!**/*.jpegpublic/marketplace-gallery/11.jpegis excluded by!**/*.jpegpublic/marketplace-gallery/12.jpegis excluded by!**/*.jpegpublic/marketplace-gallery/2.jpegis excluded by!**/*.jpegpublic/marketplace-gallery/3.jpegis excluded by!**/*.jpegpublic/marketplace-gallery/4.jpegis excluded by!**/*.jpegpublic/marketplace-gallery/5.jpegis excluded by!**/*.jpegpublic/marketplace-gallery/6.jpegis excluded by!**/*.jpegpublic/marketplace-gallery/7.jpegis excluded by!**/*.jpegpublic/marketplace-gallery/8.jpegis excluded by!**/*.jpegpublic/marketplace-gallery/9.jpegis excluded by!**/*.jpegpublic/notes-gallery/1.jpegis excluded by!**/*.jpegpublic/notes-gallery/10.jpegis excluded by!**/*.jpegpublic/notes-gallery/11.jpegis excluded by!**/*.jpegpublic/notes-gallery/12.jpegis excluded by!**/*.jpegpublic/notes-gallery/2.jpegis excluded by!**/*.jpegpublic/notes-gallery/3.jpegis excluded by!**/*.jpegpublic/notes-gallery/4.jpegis excluded by!**/*.jpegpublic/notes-gallery/5.jpegis excluded by!**/*.jpegpublic/notes-gallery/6.jpegis excluded by!**/*.jpegpublic/notes-gallery/7.jpegis excluded by!**/*.jpegpublic/notes-gallery/8.jpegis excluded by!**/*.jpegpublic/notes-gallery/9.jpegis 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
AnimatedTrianglePropsinterface is properly structured with clear type definitions for animation props.
51-61: Animation state management is well implemented.The conditional triangle rendering with
onAnimationCompletecallback 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-randbg-clip-textcreates an engaging visual hierarchy for the section title.
| @@ -0,0 +1,156 @@ | |||
| "use client" | |||
| import React from 'react' | |||
There was a problem hiding this comment.
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.
|
I have made a new commit which does the following
|
|
Honestly, The design is better than previous one but not the best, or something to make this PR stand out. |
I’m really sorry, sir — I now realise the design might not be up to the mark. |
|
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. |
|
Thank you so much for your feedback, sir 🙏 |
|
Good, in the mean time let this pr be opened and you explore. @MrImmortal09 Do drop any ui reference you find. |
|
Any updates @sambhavgsharma |



feat: Redesigned Home Page with Animations, Parallax Effects, and Smooth Scrolling
Resolves #3
Description
This PR completely revamps the Home Page UI to give it a more modern, clean, and dynamic look.
Key enhancements include:
These changes aim to enhance the overall user experience and visual appeal of the landing page.
Live Demo and Screenshots
2025-06-20.08-59-23.1.mp4
Note for Maintainer
Checkout
Summary by CodeRabbit