Create reusable hooks and components

[naman9271]

There are several duplicated code there in th ecodebase and as I have created a component of StarField
I want to have components for various other features which we are using againa and again in the codebase, so in order to create our codebase consistent and scalable so

Build the comonents for:

• GridBackground
• Background Effects

Creating Hooks for :

• Dropdown Animation

• cards parallax effect

• cards hover effect

• And hooks/components for all other animations

Things to keep in mind:

• Please raise a PR for eachc component/hooks don't dump everything in one PR (and minimize the use of LLM agents as they will most prolly break the existing functionality)

• Please check locally before pushing the code as the effect should be same before and after your PR

• as you are not creating new effect just making a component/hook for a existing ones

[naman9271]

I want consistency throughout all components as you can see the StarField component

this component is customisable and we can use it in any component as per our use

      {/* Starfield background */}
      <StarField density="medium" showComets={true} cometCount={3} />

so in the same way i want other components should be like i have a idea for grid lines , it can be anything you want but it si customisable as we can use it in any component as in navbar we need different no.of lines and in master page there are different so please take a look into this.

• Would love to hear your suggestions on improving or extending this idea!

<GridBackground 
        id="grid-lines-nav"
        linesHorizontal={10}
        linesVertical={10}
        className="absolute inset-0 opacity-10 z-[-1]"
      />

[naman9271]

@vedansh-5 @SakshamDutt @adity1raut please read this issue carefully before working and raising the PRs

[adity1raut]

@vedansh-5 @SakshamDutt @adity1raut please read this issue carefully before working and raising the PRs

@naman9271 can you assign this issue to me I can start working from this time

[github-actions]

👋 Hi @adity1raut!

To assign yourself to this issue, please use the slash command:

/assign

This will automatically assign the issue to you via our Prow bot. You can also use /unassign to remove yourself from an issue.

📚 For more information about contributing, please check out our Contributors Guide.

Thank you for your interest in contributing to KubeStellar! 🚀

[adity1raut]

/assign

[naman9271]

@naman9271 can you assign this issue to me I can start working from this time

please read the issue, This is not issue to be assigned on you have to choose one component/hook and start working on it
you can start with creating a hook for dropdown animations and use its instance everywhere it is used in codebase

[vedansh-5]

@naman9271 I'll take up the creation of the grid background across sections

[naman9271]

@naman9271 I'll take up the creation of the grid background across sections

Go Ahead !!