From 7f82807e3e4e174ce51a24190f23ab96df4639e4 Mon Sep 17 00:00:00 2001
From: Damien Schneider <74979845+damien-schneider@users.noreply.github.com>
Date: Thu, 14 Nov 2024 11:24:06 +0100
Subject: [PATCH] V0.3.2 (#55)

* :art: unify component type

* :fire: remove dupplicated lib files

* :fire: remove lastUpdatedDateComponent from multiple categories

* :sparkles: v0.3.2

* :art: update slugPreviewFile format in gradientPricingTableComponent
---
 apps/website/package.json                     |   3 +-
 apps/website/src/app/(components)/layout.tsx  |  29 ----
 .../[section]/[category]/layout.tsx           |   0
 .../[category]/multiple-component-section.tsx |   9 +-
 .../[category]/opengraph-image.alt.txt        |   0
 .../[section]/[category]/opengraph-image.png  | Bin
 .../[section]/[category]/page.tsx             |   6 +-
 .../[category]/process-variant-data.ts        |  14 +-
 .../[category]/single-component-section.tsx   |  10 +-
 .../[section]/layout.tsx                      |   0
 .../[section]/opengraph-image.alt.txt         |   0
 .../[section]/opengraph-image.png             | Bin
 .../[section]/page.tsx                        |   0
 .../{(components) => (site)}/about/page.tsx   |   0
 .../changelog/page.tsx                        |  15 +-
 .../getting-started/page.tsx                  |   0
 apps/website/src/app/(site)/layout.tsx        |  39 +++++
 .../opengraph-image.alt.txt                   |   0
 .../opengraph-image.png                       | Bin
 .../get-components/get-components.utils.ts    |   4 -
 apps/website/src/app/card.tsx                 |  64 +++----
 .../app/dev/generate-preview-images/page.tsx  |  10 +-
 apps/website/src/app/dev/page.tsx             |   6 +
 .../src/app/dev/playground-component/page.tsx |  15 ++
 .../dev/playground-component/playground.tsx   |  15 ++
 .../src/app/dev/playground-component/test.tsx |   6 +
 apps/website/src/app/layout.tsx               |   2 -
 .../[category]/[component]/[variant]/page.tsx | 117 +++++++++++++
 .../[section]/[category]/[component]/page.tsx |  60 +++++++
 apps/website/src/changelogs/2024-11-14.mdx    |  17 ++
 .../component-tab-renderer.tsx                |  22 ++-
 .../component-wrapper/component-wrapper.tsx   |   2 +-
 .../get-container-height-class.tsx            |   2 +-
 .../component-wrapper/github-edit-button.tsx  |   2 +-
 .../component-wrapper/header-component.tsx    |   5 +-
 .../component-wrapper/variant-tabs.tsx        |  20 ++-
 .../components/custom-iframe-component.tsx    |   2 +-
 .../floating-dock.tsx                         |   9 +-
 .../components/navigation/desktop-menu.tsx    |   4 +-
 .../components/navigation/navigation-item.tsx |   2 +-
 .../components/navigation/navigation-menu.tsx |  23 +--
 .../search-group-multi-component-section.tsx  |   2 +-
 apps/website/src/lib/badges.const.ts          |  39 -----
 apps/website/src/lib/first-menu-section.ts    |   2 +-
 apps/website/src/lib/types/component.d.ts     | 156 ------------------
 apps/website/src/ui/address-bar.tsx           |   4 +-
 .../src/ui/star-github-project-button.tsx     |  40 +----
 .../find-category-by-slug.ts                  |   2 +-
 .../find-section-by-slug.ts                   |   2 +-
 .../ui/cuicui/all-in-one-themes/theme1.tsx    |  13 ++
 .../advanced-bottom-action-menu.component.tsx |   1 -
 .../application-ui/alert/alert.category.tsx   |   2 -
 .../authentication.category.tsx               |   1 -
 .../battery/battery.category.tsx              |   2 -
 .../advanced-code-block.component.tsx         |   1 -
 .../code/code-card/code-card.component.tsx    |   2 +-
 .../code-snippet/code-snippet.component.tsx   |   2 +-
 .../inline-code/inline-code.component.tsx     |   2 +-
 .../component.simple-cookie-banner.tsx        |   1 -
 .../application-ui/kbd/kbd.category.tsx       |   3 -
 .../component.dynamic-island-notification.tsx |   1 -
 .../search-bars/search-bars.category.tsx      |   1 -
 .../settings/settings.category.tsx            |   1 -
 .../react-signature.component.tsx             |   1 -
 .../sliders/sliders.category.tsx              |   2 -
 .../static-steppers.category.tsx              |   1 -
 .../table-of-contents.category.tsx            |   2 +-
 .../application-ui/theme/theme.category.tsx   |   1 -
 .../recursive-tree.component.tsx              |   1 -
 .../common-ui/badges/badges.category.tsx      |   3 -
 .../blockquotes/blockquotes.category.tsx      |   1 -
 .../common-ui/buttons/buttons.category.tsx    |   7 -
 .../github-stars/preview.github-stars.tsx     |   6 +-
 .../component.magnetic-button.tsx             | 105 ++++++------
 .../preview.magnetic-button.tsx               |  11 +-
 .../cuicui/common-ui/cards/cards.category.tsx |   6 +-
 .../checkboxes/checkboxes.category.tsx        |   2 -
 .../common-ui/inputs/inputs.category.tsx      |   4 +-
 .../common-ui/loaders/loaders.category.tsx    |   4 -
 .../navigation/navigation.category.tsx        |   2 -
 .../skeletons/skeletons.category.tsx          |   4 +-
 .../use-battery/use-battery.category.tsx      |   2 +-
 .../category.use-click-outside.tsx            |   1 -
 .../use-counter/category.use-counter.tsx      |   1 -
 .../use-debounce/category.use-debounce.tsx    |   1 -
 .../category.use-event-callback.tsx           |   1 -
 .../category.use-event-listener.tsx           |   1 -
 .../category.use-first-visit.tsx              |   1 -
 .../category-use-geolocation.tsx              |   1 -
 .../use-in-view/category.use-in-view.tsx      |   1 -
 .../category.use-input-value.tsx              |   1 -
 .../category.use-isomorphic-layout-effect.tsx |   1 -
 .../use-key-press/category.use-key-press.tsx  |   1 -
 .../category.use-konami-code.tsx              |   1 -
 .../category.use-local-storage.tsx            |   1 -
 .../use-location/category.use-location.tsx    |   2 +-
 .../use-measure/category.use-measure.tsx      |   1 -
 .../hooks/use-mouse/component.use-mouse.tsx   |   9 +-
 .../category.use-network.tsx                  |   2 +-
 .../category.use-online-status.tsx            |   1 -
 .../use-rerender/component.use-rerender.tsx   |   1 -
 .../hooks/use-step/category.use-step.tsx      |   2 +-
 .../use-stopwatch/category.use-stopwatch.tsx  |   1 -
 .../category.use-text-to-speech.tsx           |   1 -
 .../use-throttle/category.use-throttle.tsx    |   1 -
 .../hooks/use-video/category.use-video.tsx    |   1 -
 .../category.use-window-scroll-postion.tsx    |   1 -
 .../category.use-window-size.tsx              |   1 -
 .../carousels/category.carousels.tsx          |   3 +-
 .../full-section/component.full-section.tsx   |   2 +-
 .../gradient-qna/component.gradient-qna.tsx   |   1 -
 .../features/category.features.tsx            |   3 +-
 .../component.gradient-pricing-table.tsx      |   2 +-
 .../component.artlist-inspired.tsx            |   1 -
 .../statistics/category.statistics.tsx        |   3 -
 .../testimonials/category.testimonials.tsx    |   3 +-
 .../animated-noise/animated-noise.tsx         |  11 +-
 .../component.animated-noise.tsx              |   1 -
 .../animated-noise/preview.animated-noise.tsx |  11 +-
 .../animated-noise/preview.static-noise.tsx   |   2 +-
 .../animated-noise/static-noise.tsx           |  12 +-
 .../border-trail/component.animated-noise.tsx |   1 -
 .../component.bottom-blur-out.tsx             |   1 -
 .../category.creative-effet.tsx               |   2 +
 .../wavy-line/definition.wavy-line.tsx        |  17 ++
 .../wavy-line/preview.wavy-line.tsx           |   5 +
 .../creative-effects/wavy-line/wavy-line.tsx  | 115 +++++++++++++
 .../card-hover-cursor-effect.component.tsx    |   1 -
 .../follow-cursor/follow-cursor.component.tsx |   1 -
 .../other/mock-ups/mock-ups.category.tsx      |   4 +-
 .../grid-pattern/component.grid-pattern.tsx   |   1 -
 .../other/patterns/patterns.category.tsx      |   3 +-
 .../bar-code-generator.component.tsx          |   2 -
 .../qr-code-generator.component.tsx           |   1 -
 .../slide-in-on-scroll.component.tsx          |   2 +-
 .../component.text-effect-wrapper.tsx         |   1 -
 .../component.text-effect-wrapper.tsx         |   1 -
 .../transition-wrappers.category.tsx          |   1 -
 .../color-converter/page.color-converter.tsx  |  15 --
 .../catch-error/category.catch-error.tsx      |   1 -
 packages/ui/cuicui/utils/cn/cn.category.tsx   |   1 -
 .../ui/cuicui/utils/sleep/sleep.category.tsx  |   2 +-
 packages/ui/lib/first-menu-section.ts         |  38 -----
 packages/ui/lib/site.const.ts                 |   7 -
 packages/ui/lib/types/component.d.ts          |  12 +-
 readme.md                                     |  27 +--
 turbo.json                                    |   4 +-
 147 files changed, 677 insertions(+), 660 deletions(-)
 delete mode 100644 apps/website/src/app/(components)/layout.tsx
 rename apps/website/src/app/{(components) => (site)}/[section]/[category]/layout.tsx (100%)
 rename apps/website/src/app/{(components) => (site)}/[section]/[category]/multiple-component-section.tsx (86%)
 rename apps/website/src/app/{(components) => (site)}/[section]/[category]/opengraph-image.alt.txt (100%)
 rename apps/website/src/app/{(components) => (site)}/[section]/[category]/opengraph-image.png (100%)
 rename apps/website/src/app/{(components) => (site)}/[section]/[category]/page.tsx (87%)
 rename apps/website/src/app/{(components) => (site)}/[section]/[category]/process-variant-data.ts (89%)
 rename apps/website/src/app/{(components) => (site)}/[section]/[category]/single-component-section.tsx (85%)
 rename apps/website/src/app/{(components) => (site)}/[section]/layout.tsx (100%)
 rename apps/website/src/app/{(components) => (site)}/[section]/opengraph-image.alt.txt (100%)
 rename apps/website/src/app/{(components) => (site)}/[section]/opengraph-image.png (100%)
 rename apps/website/src/app/{(components) => (site)}/[section]/page.tsx (100%)
 rename apps/website/src/app/{(components) => (site)}/about/page.tsx (100%)
 rename apps/website/src/app/{(components) => (site)}/changelog/page.tsx (86%)
 rename apps/website/src/app/{(components) => (site)}/getting-started/page.tsx (100%)
 create mode 100644 apps/website/src/app/(site)/layout.tsx
 rename apps/website/src/app/{(components) => (site)}/opengraph-image.alt.txt (100%)
 rename apps/website/src/app/{(components) => (site)}/opengraph-image.png (100%)
 create mode 100644 apps/website/src/app/dev/page.tsx
 create mode 100644 apps/website/src/app/dev/playground-component/page.tsx
 create mode 100644 apps/website/src/app/dev/playground-component/playground.tsx
 create mode 100644 apps/website/src/app/dev/playground-component/test.tsx
 create mode 100644 apps/website/src/app/preview/[section]/[category]/[component]/[variant]/page.tsx
 create mode 100644 apps/website/src/app/preview/[section]/[category]/[component]/page.tsx
 create mode 100644 apps/website/src/changelogs/2024-11-14.mdx
 delete mode 100644 apps/website/src/lib/badges.const.ts
 delete mode 100644 apps/website/src/lib/types/component.d.ts
 create mode 100644 packages/ui/cuicui/all-in-one-themes/theme1.tsx
 create mode 100644 packages/ui/cuicui/other/creative-effects/wavy-line/definition.wavy-line.tsx
 create mode 100644 packages/ui/cuicui/other/creative-effects/wavy-line/preview.wavy-line.tsx
 create mode 100644 packages/ui/cuicui/other/creative-effects/wavy-line/wavy-line.tsx
 delete mode 100644 packages/ui/lib/first-menu-section.ts
 delete mode 100644 packages/ui/lib/site.const.ts

diff --git a/apps/website/package.json b/apps/website/package.json
index 72710af0..f33970bd 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -91,7 +91,8 @@
     "lint:check": "biome check ./src",
     "lint:write-unsafe": "biome check --write --unsafe ./src",
     "test": "vitest",
-    "test:watch": "vitest --watch"
+    "test:watch": "vitest --watch",
+    "type-check": "tsc --noEmit"
   },
   "version": "0.1.2"
 }
\ No newline at end of file
diff --git a/apps/website/src/app/(components)/layout.tsx b/apps/website/src/app/(components)/layout.tsx
deleted file mode 100644
index 0315550a..00000000
--- a/apps/website/src/app/(components)/layout.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { DesktopSideMenu } from "#/src/components/navigation/desktop-menu";
-
-import { AddressBar } from "#/src/ui/address-bar";
-import StarGithubProjectButton from "#/src/ui/star-github-project-button";
-import type React from "react";
-
-export default function ComponentsLayout({
-	children,
-}: Readonly<{ children: React.ReactNode }>) {
-	return (
-		<div className="mx-auto max-w-screen-2xl">
-			<DesktopSideMenu />
-
-			<div className="lg:ml-80">
-				{/* Add overflow-auto if layout width problems */}
-
-				<AddressBar />
-
-				<main className=" p-4 pt-12 md:p-6">
-					<div className="space-y-10 pb-20">{children}</div>
-				</main>
-
-				<div className="flex sm:hidden fixed bottom-6 left-2">
-					<StarGithubProjectButton />
-				</div>
-			</div>
-		</div>
-	);
-}
diff --git a/apps/website/src/app/(components)/[section]/[category]/layout.tsx b/apps/website/src/app/(site)/[section]/[category]/layout.tsx
similarity index 100%
rename from apps/website/src/app/(components)/[section]/[category]/layout.tsx
rename to apps/website/src/app/(site)/[section]/[category]/layout.tsx
diff --git a/apps/website/src/app/(components)/[section]/[category]/multiple-component-section.tsx b/apps/website/src/app/(site)/[section]/[category]/multiple-component-section.tsx
similarity index 86%
rename from apps/website/src/app/(components)/[section]/[category]/multiple-component-section.tsx
rename to apps/website/src/app/(site)/[section]/[category]/multiple-component-section.tsx
index 639bfd52..86993cae 100644
--- a/apps/website/src/app/(components)/[section]/[category]/multiple-component-section.tsx
+++ b/apps/website/src/app/(site)/[section]/[category]/multiple-component-section.tsx
@@ -1,10 +1,10 @@
 import { notFound } from "next/navigation";
-import { fetchMultipleComponentData } from "#/src/app/(components)/[section]/[category]/process-variant-data";
+import { fetchMultipleComponentData } from "#/src/app/(site)/[section]/[category]/process-variant-data";
 import ComingSoonCard from "#/src/components/coming-soon";
 import HeaderComponent from "#/src/components/component-wrapper/header-component";
 import InspirationComponentFooter from "#/src/components/component-wrapper/inspiration-component-footer";
 import VariantTabs from "#/src/components/component-wrapper/variant-tabs";
-import type { CategoryType, SectionType } from "#/src/lib/types/component";
+import type { CategoryType, SectionType } from "@cuicui/ui/lib/types/component";
 import GithubEditButton from "#/src/components/component-wrapper/github-edit-button";
 
 export default async function MultipleComponentCategory({
@@ -56,6 +56,11 @@ export default async function MultipleComponentCategory({
 						rerenderButton={component.rerenderButton}
 						size={component.sizePreview}
 						variantList={component.componentList}
+						componentParams={{
+							sectionSlug,
+							categorySlug: category.slug,
+							componentSlug: component.slug,
+						}}
 					/>
 				</div>
 			))}
diff --git a/apps/website/src/app/(components)/[section]/[category]/opengraph-image.alt.txt b/apps/website/src/app/(site)/[section]/[category]/opengraph-image.alt.txt
similarity index 100%
rename from apps/website/src/app/(components)/[section]/[category]/opengraph-image.alt.txt
rename to apps/website/src/app/(site)/[section]/[category]/opengraph-image.alt.txt
diff --git a/apps/website/src/app/(components)/[section]/[category]/opengraph-image.png b/apps/website/src/app/(site)/[section]/[category]/opengraph-image.png
similarity index 100%
rename from apps/website/src/app/(components)/[section]/[category]/opengraph-image.png
rename to apps/website/src/app/(site)/[section]/[category]/opengraph-image.png
diff --git a/apps/website/src/app/(components)/[section]/[category]/page.tsx b/apps/website/src/app/(site)/[section]/[category]/page.tsx
similarity index 87%
rename from apps/website/src/app/(components)/[section]/[category]/page.tsx
rename to apps/website/src/app/(site)/[section]/[category]/page.tsx
index 545a6b55..217c63e0 100644
--- a/apps/website/src/app/(components)/[section]/[category]/page.tsx
+++ b/apps/website/src/app/(site)/[section]/[category]/page.tsx
@@ -1,11 +1,11 @@
 import { notFound } from "next/navigation";
-import MultipleComponentCategory from "#/src/app/(components)/[section]/[category]/multiple-component-section";
-import SingleComponentCategory from "#/src/app/(components)/[section]/[category]/single-component-section";
+import MultipleComponentCategory from "#/src/app/(site)/[section]/[category]/multiple-component-section";
+import SingleComponentCategory from "#/src/app/(site)/[section]/[category]/single-component-section";
 import { SectionsList } from "@cuicui/ui";
 import type {
 	CategoryType,
 	SingleComponentCategoryType,
-} from "#/src/lib/types/component";
+} from "@cuicui/ui/lib/types/component";
 import { findCategoryBySlug } from "#/src/utils/section-category-components-utils/find-category-by-slug";
 type Props = {
 	params: {
diff --git a/apps/website/src/app/(components)/[section]/[category]/process-variant-data.ts b/apps/website/src/app/(site)/[section]/[category]/process-variant-data.ts
similarity index 89%
rename from apps/website/src/app/(components)/[section]/[category]/process-variant-data.ts
rename to apps/website/src/app/(site)/[section]/[category]/process-variant-data.ts
index 10e58a61..330bb977 100644
--- a/apps/website/src/app/(components)/[section]/[category]/process-variant-data.ts
+++ b/apps/website/src/app/(site)/[section]/[category]/process-variant-data.ts
@@ -1,17 +1,13 @@
 import type {
 	ComponentType,
+	ProcessedVariantType,
 	SingleComponentType,
 	VariantType,
-} from "#/src/lib/types/component";
+} from "@cuicui/ui/lib/types/component";
 import { getFileContentAsString } from "#/src/utils/get-file-content-as-string";
 
-interface ProcessedVariant extends VariantType {
-	previewCode: string;
-	componentCode?: string;
-}
-
 interface ProcessedComponent extends ComponentType {
-	componentList: ProcessedVariant[];
+	componentList: ProcessedVariantType[];
 }
 
 export async function fetchVariantData({
@@ -71,7 +67,7 @@ export async function fetchMultipleComponentData({
 	const processedComponents: ProcessedComponent[] = [];
 
 	for (const component of componentList) {
-		const processedVariants: ProcessedVariant[] = [];
+		const processedVariants: ProcessedVariantType[] = [];
 
 		for (const variant of component.variantList) {
 			const processedVariant = await fetchVariantData({
@@ -100,7 +96,7 @@ export async function fetchSingleComponentData({
 	categorySlug: string;
 	component: SingleComponentType;
 }) {
-	const processedVariants: ProcessedVariant[] = [];
+	const processedVariants: ProcessedVariantType[] = [];
 
 	for (const variant of component.variantList) {
 		const processedVariant = await fetchVariantData({ categorySlug, variant });
diff --git a/apps/website/src/app/(components)/[section]/[category]/single-component-section.tsx b/apps/website/src/app/(site)/[section]/[category]/single-component-section.tsx
similarity index 85%
rename from apps/website/src/app/(components)/[section]/[category]/single-component-section.tsx
rename to apps/website/src/app/(site)/[section]/[category]/single-component-section.tsx
index f7c73b20..e9a2e02a 100644
--- a/apps/website/src/app/(components)/[section]/[category]/single-component-section.tsx
+++ b/apps/website/src/app/(site)/[section]/[category]/single-component-section.tsx
@@ -1,5 +1,5 @@
 import { notFound } from "next/navigation";
-import { fetchSingleComponentData } from "#/src/app/(components)/[section]/[category]/process-variant-data";
+import { fetchSingleComponentData } from "#/src/app/(site)/[section]/[category]/process-variant-data";
 import ComingSoonCard from "#/src/components/coming-soon";
 import HeaderComponent from "#/src/components/component-wrapper/header-component";
 import InspirationComponentFooter from "#/src/components/component-wrapper/inspiration-component-footer";
@@ -7,7 +7,7 @@ import VariantTabs from "#/src/components/component-wrapper/variant-tabs";
 import type {
 	SectionType,
 	SingleComponentCategoryType,
-} from "#/src/lib/types/component";
+} from "@cuicui/ui/lib/types/component";
 import GithubEditButton from "#/src/components/component-wrapper/github-edit-button";
 
 export default async function SingleComponentCategory({
@@ -27,7 +27,7 @@ export default async function SingleComponentCategory({
 
 	const component = await fetchSingleComponentData({
 		categorySlug: category.slug,
-		component: category.component,
+		component: { ...category.component },
 	});
 
 	return (
@@ -50,6 +50,10 @@ export default async function SingleComponentCategory({
 					rerenderButton={component.rerenderButton}
 					size={component.sizePreview}
 					variantList={component.componentList}
+					componentParams={{
+						sectionSlug,
+						categorySlug: category.slug,
+					}}
 				/>
 				<InspirationComponentFooter
 					inspiration={component.inspiration}
diff --git a/apps/website/src/app/(components)/[section]/layout.tsx b/apps/website/src/app/(site)/[section]/layout.tsx
similarity index 100%
rename from apps/website/src/app/(components)/[section]/layout.tsx
rename to apps/website/src/app/(site)/[section]/layout.tsx
diff --git a/apps/website/src/app/(components)/[section]/opengraph-image.alt.txt b/apps/website/src/app/(site)/[section]/opengraph-image.alt.txt
similarity index 100%
rename from apps/website/src/app/(components)/[section]/opengraph-image.alt.txt
rename to apps/website/src/app/(site)/[section]/opengraph-image.alt.txt
diff --git a/apps/website/src/app/(components)/[section]/opengraph-image.png b/apps/website/src/app/(site)/[section]/opengraph-image.png
similarity index 100%
rename from apps/website/src/app/(components)/[section]/opengraph-image.png
rename to apps/website/src/app/(site)/[section]/opengraph-image.png
diff --git a/apps/website/src/app/(components)/[section]/page.tsx b/apps/website/src/app/(site)/[section]/page.tsx
similarity index 100%
rename from apps/website/src/app/(components)/[section]/page.tsx
rename to apps/website/src/app/(site)/[section]/page.tsx
diff --git a/apps/website/src/app/(components)/about/page.tsx b/apps/website/src/app/(site)/about/page.tsx
similarity index 100%
rename from apps/website/src/app/(components)/about/page.tsx
rename to apps/website/src/app/(site)/about/page.tsx
diff --git a/apps/website/src/app/(components)/changelog/page.tsx b/apps/website/src/app/(site)/changelog/page.tsx
similarity index 86%
rename from apps/website/src/app/(components)/changelog/page.tsx
rename to apps/website/src/app/(site)/changelog/page.tsx
index 20c2ad92..4c1fe89b 100644
--- a/apps/website/src/app/(components)/changelog/page.tsx
+++ b/apps/website/src/app/(site)/changelog/page.tsx
@@ -88,17 +88,26 @@ export default async function ProjectPage() {
 		}),
 	);
 
+	const sortedChangelogs = changelogs.sort(
+		(a, b) => b.date.getTime() - a.date.getTime(),
+	);
+
 	return (
 		<div className="cuicui-default-style">
 			<h1>Changelog</h1>
-			<section className="space-y-12">
-				{changelogs.map(({ content, date, title }) => {
+			<section className="space-y-20 m-4">
+				{sortedChangelogs.map(({ content, date, title }, index) => {
 					return (
 						<article
 							key={date.toISOString()}
 							className="[&_ul]:text-neutral-600 [&_ul]:dark:text-neutral-400"
 						>
-							<h5 className="m-0">{format(date, "do MMMM yyyy")}</h5>
+							<h5 className="m-0 inline">{format(date, "do MMMM yyyy")}</h5>
+							{index === 0 && (
+								<p className="border inline ml-4 rounded-full border-neutral-200 dark:border-neutral-800 text-xs px-2 py-0.5">
+									Latest Release
+								</p>
+							)}
 							<p className="text-neutral-500 tracking-tight text-sm">
 								{formatDistanceToNow(date, { addSuffix: true })}
 							</p>
diff --git a/apps/website/src/app/(components)/getting-started/page.tsx b/apps/website/src/app/(site)/getting-started/page.tsx
similarity index 100%
rename from apps/website/src/app/(components)/getting-started/page.tsx
rename to apps/website/src/app/(site)/getting-started/page.tsx
diff --git a/apps/website/src/app/(site)/layout.tsx b/apps/website/src/app/(site)/layout.tsx
new file mode 100644
index 00000000..b0a40258
--- /dev/null
+++ b/apps/website/src/app/(site)/layout.tsx
@@ -0,0 +1,39 @@
+import { CuicuiFloatingDock } from "#/src/components/floating-dock-navigation/floating-dock";
+import { DesktopSideMenu } from "#/src/components/navigation/desktop-menu";
+
+import { AddressBar } from "#/src/ui/address-bar";
+import StarCuicuiGithubButton from "#/src/ui/star-github-project-button";
+import { StaticNoise } from "@/cuicui/other/creative-effects/animated-noise/static-noise";
+import type React from "react";
+
+export default function ComponentsLayout({
+	children,
+}: Readonly<{ children: React.ReactNode }>) {
+	return (
+		<>
+			<div className="mx-auto max-w-screen-2xl">
+				{/* Note: The noise effect is experimental and may affect the design. Consider its impact before using it officialy. */}
+				<StaticNoise
+					opacity={0.05}
+					className="z-[9999] fixed inset-0 pointer-events-none"
+				/>
+				<DesktopSideMenu />
+
+				<div className="lg:ml-80">
+					{/* Add overflow-auto if layout width problems */}
+
+					<AddressBar />
+
+					<main className=" p-4 pt-12 md:p-6">
+						<div className="space-y-10 pb-20">{children}</div>
+					</main>
+
+					<div className="flex sm:hidden fixed bottom-6 left-2">
+						<StarCuicuiGithubButton />
+					</div>
+				</div>
+			</div>
+			<CuicuiFloatingDock />
+		</>
+	);
+}
diff --git a/apps/website/src/app/(components)/opengraph-image.alt.txt b/apps/website/src/app/(site)/opengraph-image.alt.txt
similarity index 100%
rename from apps/website/src/app/(components)/opengraph-image.alt.txt
rename to apps/website/src/app/(site)/opengraph-image.alt.txt
diff --git a/apps/website/src/app/(components)/opengraph-image.png b/apps/website/src/app/(site)/opengraph-image.png
similarity index 100%
rename from apps/website/src/app/(components)/opengraph-image.png
rename to apps/website/src/app/(site)/opengraph-image.png
diff --git a/apps/website/src/app/api/get-components/get-components.utils.ts b/apps/website/src/app/api/get-components/get-components.utils.ts
index 3425ec07..9d404d8d 100644
--- a/apps/website/src/app/api/get-components/get-components.utils.ts
+++ b/apps/website/src/app/api/get-components/get-components.utils.ts
@@ -52,9 +52,6 @@ export function extractComponents(node: FileSystemNode): ComponentType[] {
 			description: node.config.description,
 			sizePreview: node.config.sizePreview,
 			slug: node.config.slug,
-			lastUpdatedDateComponent: node.config.lastUpdatedDateComponent
-				? new Date(node.config.lastUpdatedDateComponent)
-				: undefined,
 			isIframed: node.config.isIframed,
 			variantList: [],
 			inspiration: node.config.inspiration,
@@ -114,7 +111,6 @@ export type ComponentType = {
 	description: string;
 	sizePreview: string;
 	slug: string;
-	lastUpdatedDateComponent?: Date;
 	isIframed?: boolean;
 	variantList: VariantType[];
 	inspiration?: string;
diff --git a/apps/website/src/app/card.tsx b/apps/website/src/app/card.tsx
index 03a131cf..0393ac46 100644
--- a/apps/website/src/app/card.tsx
+++ b/apps/website/src/app/card.tsx
@@ -1,40 +1,40 @@
 import Image from "next/image";
 import type {
-  CategoryType,
-  SingleComponentCategoryType,
-} from "../lib/types/component";
+	CategoryType,
+	SingleComponentCategoryType,
+} from "@cuicui/ui/lib/types/component";
 
 export const MainMenuCardContent = ({
-  category,
-  sectionSlug,
+	category,
+	sectionSlug,
 }: {
-  category: CategoryType | SingleComponentCategoryType;
-  sectionSlug: string;
+	category: CategoryType | SingleComponentCategoryType;
+	sectionSlug: string;
 }) => {
-  if (category?.comingSoonCategory) {
-    return (
-      <p className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 font-semibold text-2xl text-neutral-800 dark:text-neutral-300">
-        Coming Soon
-      </p>
-    );
-  }
+	if (category?.comingSoonCategory) {
+		return (
+			<p className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 font-semibold text-2xl text-neutral-800 dark:text-neutral-300">
+				Coming Soon
+			</p>
+		);
+	}
 
-  return (
-    <>
-      <Image
-        alt={`${category.name} preview`}
-        className="h-48 w-full object-cover hidden dark:block"
-        height={400}
-        src={`/preview-images/dark-${sectionSlug}-${category.slug}.png`}
-        width={600}
-      />
-      <Image
-        alt={`${category.name} preview`}
-        className="h-48 w-full object-cover dark:hidden"
-        height={400}
-        src={`/preview-images/light-${sectionSlug}-${category.slug}.png`}
-        width={600}
-      />
-    </>
-  );
+	return (
+		<>
+			<Image
+				alt={`${category.name} preview`}
+				className="h-48 w-full object-cover hidden dark:block"
+				height={400}
+				src={`/preview-images/dark-${sectionSlug}-${category.slug}.png`}
+				width={600}
+			/>
+			<Image
+				alt={`${category.name} preview`}
+				className="h-48 w-full object-cover dark:hidden"
+				height={400}
+				src={`/preview-images/light-${sectionSlug}-${category.slug}.png`}
+				width={600}
+			/>
+		</>
+	);
 };
diff --git a/apps/website/src/app/dev/generate-preview-images/page.tsx b/apps/website/src/app/dev/generate-preview-images/page.tsx
index 2be4181a..8cf959db 100644
--- a/apps/website/src/app/dev/generate-preview-images/page.tsx
+++ b/apps/website/src/app/dev/generate-preview-images/page.tsx
@@ -2,10 +2,14 @@ import GeneratePreviewImages from "./generate-preview-images";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
-  referrer: "no-referrer",
-  robots: "noindex, nofollow",
+	referrer: "no-referrer",
+	robots: "noindex, nofollow",
 };
 
 export default function PageGeneratePreviewImages() {
-  return <GeneratePreviewImages />;
+	if (process.env.NODE_ENV === "production") {
+		return null;
+	}
+
+	return <GeneratePreviewImages />;
 }
diff --git a/apps/website/src/app/dev/page.tsx b/apps/website/src/app/dev/page.tsx
new file mode 100644
index 00000000..02330c93
--- /dev/null
+++ b/apps/website/src/app/dev/page.tsx
@@ -0,0 +1,6 @@
+import Modern3dKbdVariant1 from "@/cuicui/application-ui/kbd/modern-3d-kbd/variant1";
+import React from "react";
+
+export default function Page() {
+	return <Modern3dKbdVariant1 />;
+}
diff --git a/apps/website/src/app/dev/playground-component/page.tsx b/apps/website/src/app/dev/playground-component/page.tsx
new file mode 100644
index 00000000..7c9ca61c
--- /dev/null
+++ b/apps/website/src/app/dev/playground-component/page.tsx
@@ -0,0 +1,15 @@
+import Playground from "#/src/app/dev/playground-component/playground";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+	referrer: "no-referrer",
+	robots: "noindex, nofollow",
+};
+
+export default function PageGeneratePreviewImages() {
+	if (process.env.NODE_ENV === "production") {
+		return null;
+	}
+
+	return <Playground />;
+}
diff --git a/apps/website/src/app/dev/playground-component/playground.tsx b/apps/website/src/app/dev/playground-component/playground.tsx
new file mode 100644
index 00000000..253babd6
--- /dev/null
+++ b/apps/website/src/app/dev/playground-component/playground.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+export default function Playground() {
+	return (
+		<div className="h-screen w-full">
+			<iframe
+				className="w-full h-full flex items-center *:flex *:items-center"
+				src="/dev"
+				title="test"
+			>
+				test
+			</iframe>
+		</div>
+	);
+}
diff --git a/apps/website/src/app/dev/playground-component/test.tsx b/apps/website/src/app/dev/playground-component/test.tsx
new file mode 100644
index 00000000..203f468f
--- /dev/null
+++ b/apps/website/src/app/dev/playground-component/test.tsx
@@ -0,0 +1,6 @@
+import Modern3dKbdVariant1 from "@/cuicui/application-ui/kbd/modern-3d-kbd/variant1";
+import React from "react";
+
+export default function test() {
+	return <Modern3dKbdVariant1 />;
+}
diff --git a/apps/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx
index 158c4f8f..d761d779 100644
--- a/apps/website/src/app/layout.tsx
+++ b/apps/website/src/app/layout.tsx
@@ -6,7 +6,6 @@ import { DM_Sans } from "next/font/google";
 import type { ReactNode } from "react";
 import Providers from "#/src/app/providers";
 import PlausibleScripts from "#/src/components/analytics/plausible-scripts";
-import { CuicuiFloatingDock } from "#/src/components/floating-dock-navigation/floating-dock";
 const font = DM_Sans({
 	subsets: ["latin"],
 	display: "swap",
@@ -64,7 +63,6 @@ export default function RootLayout({
 					<Toaster />
 
 					{children}
-					<CuicuiFloatingDock />
 				</body>
 			</Providers>
 		</html>
diff --git a/apps/website/src/app/preview/[section]/[category]/[component]/[variant]/page.tsx b/apps/website/src/app/preview/[section]/[category]/[component]/[variant]/page.tsx
new file mode 100644
index 00000000..ea2f2645
--- /dev/null
+++ b/apps/website/src/app/preview/[section]/[category]/[component]/[variant]/page.tsx
@@ -0,0 +1,117 @@
+import { SectionsList } from "@cuicui/ui/lib/sections-list";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+
+export const metadata: Metadata = {
+	referrer: "no-referrer",
+	robots: "noindex, nofollow",
+};
+
+export async function generateStaticParams() {
+	return SectionsList.map((section) => {
+		if (section.type === "multiple-component") {
+			return section.categoriesList.map((category) => {
+				return category.componentList?.map((component) => {
+					return component.variantList.map((variant) => {
+						return {
+							params: {
+								section: section.slug,
+								category: category.slug,
+								component: component.slug,
+								variant: variant.slugPreviewFile,
+							},
+						};
+					});
+				});
+			});
+		}
+	});
+}
+
+export default function PagePreview({
+	params: { section, category, component, variant },
+}: {
+	params: {
+		section: string;
+		category: string;
+		component: string;
+		variant: string;
+	};
+}) {
+	const variantFound = findCorrespondingComponent({
+		section,
+		category,
+		component,
+		variant,
+	});
+
+	if (!variantFound) {
+		return notFound();
+	}
+
+	return (
+		<div className="grid place-content-center w-full min-h-screen">
+			{variantFound.component}
+		</div>
+	);
+}
+
+export const findCorrespondingComponent = ({
+	section,
+	category,
+	component,
+	variant,
+}: {
+	section: string;
+	category: string;
+	component: string;
+	variant?: string;
+}) => {
+	const sectionFound = SectionsList.find((s) => s.slug === section);
+	if (!sectionFound) {
+		return null;
+	}
+	console.log(sectionFound.slug);
+	if (sectionFound.type === "multiple-component") {
+		const categoryFound = sectionFound.categoriesList.find(
+			(c) => c.slug === category,
+		);
+		if (!categoryFound) {
+			return null;
+		}
+		console.log(categoryFound.slug);
+
+		const componentFound = categoryFound.componentList?.find(
+			(c) => c.slug === component,
+		);
+		if (!componentFound) {
+			return null;
+		}
+
+		console.log(componentFound.slug);
+
+		const variantFound = componentFound.variantList.find(
+			(v) => v.slugPreviewFile === variant,
+		);
+
+		console.log(variantFound?.slugPreviewFile);
+
+		return variantFound;
+	}
+
+	if (sectionFound.type === "single-component") {
+		const categoryFound = sectionFound.categoriesList.find(
+			(c) => c.slug === category,
+		);
+		if (!categoryFound) {
+			return null;
+		}
+
+		const variantFound = categoryFound.component?.variantList.find(
+			// We use component instead of variant as it is a single-component
+			(v) => v.slugPreviewFile === component,
+		);
+
+		return variantFound;
+	}
+};
diff --git a/apps/website/src/app/preview/[section]/[category]/[component]/page.tsx b/apps/website/src/app/preview/[section]/[category]/[component]/page.tsx
new file mode 100644
index 00000000..ee309239
--- /dev/null
+++ b/apps/website/src/app/preview/[section]/[category]/[component]/page.tsx
@@ -0,0 +1,60 @@
+import { findCorrespondingComponent } from "#/src/app/preview/[section]/[category]/[component]/[variant]/page";
+import { SectionsList } from "@cuicui/ui/lib/sections-list";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+
+export const metadata: Metadata = {
+	referrer: "no-referrer",
+	robots: "noindex, nofollow",
+};
+
+export async function generateStaticParams() {
+	return SectionsList.map((section) => {
+		if (section.type === "single-component") {
+			return section.categoriesList.map((category) => {
+				if (!category.component) {
+					return null;
+				}
+				return category.component.variantList.map((variant) => {
+					if (!category.component) {
+						return null;
+					}
+
+					return {
+						params: {
+							section: section.slug,
+							category: category.slug,
+							component: variant.slugPreviewFile,
+						},
+					};
+				});
+			});
+		}
+	});
+}
+
+export default function PagePreview({
+	params: { section, category, component },
+}: {
+	params: {
+		section: string;
+		category: string;
+		component: string;
+	};
+}) {
+	const variantFound = findCorrespondingComponent({
+		section,
+		category,
+		component,
+	});
+
+	if (!variantFound) {
+		return notFound();
+	}
+
+	return (
+		<div className="grid place-content-center w-full h-screen overflow-auto">
+			{variantFound.component}
+		</div>
+	);
+}
diff --git a/apps/website/src/changelogs/2024-11-14.mdx b/apps/website/src/changelogs/2024-11-14.mdx
new file mode 100644
index 00000000..b2776939
--- /dev/null
+++ b/apps/website/src/changelogs/2024-11-14.mdx
@@ -0,0 +1,17 @@
+---
+title: Waveline component, Noise & Layout fix
+---
+
+#### New component
+
+- A new creative effect : The waveline
+
+#### Updated components
+
+- The noise effect has been updated to be more responsive and the preview is cleaner.
+- The static Noise has also been improve in light mode and is now used to style the website.
+- Code component props improved to now accept a language prop.
+
+##### Website fix
+
+- Fix the overflow issue due to the adress bar.
\ No newline at end of file
diff --git a/apps/website/src/components/component-wrapper/component-tab-renderer.tsx b/apps/website/src/components/component-wrapper/component-tab-renderer.tsx
index 06482af2..05af2181 100644
--- a/apps/website/src/components/component-wrapper/component-tab-renderer.tsx
+++ b/apps/website/src/components/component-wrapper/component-tab-renderer.tsx
@@ -1,4 +1,3 @@
-// biome-ignore lint/style/noNamespaceImport: <explanation>
 import * as Tabs from "@radix-ui/react-tabs";
 
 import "./full-component.css";
@@ -7,8 +6,8 @@ import { ComponentWrapper } from "#/src/components/component-wrapper/component-w
 import StepToInstall from "#/src/components/steps-to-install/step-to-install";
 import type {
 	ComponentHeightType,
-	ProcessVariantType,
-} from "#/src/lib/types/component";
+	ProcessedVariantType,
+} from "@cuicui/ui/lib/types/component";
 import CodeHighlighter from "#/src/ui/code-highlighter";
 import {
 	ResizableHandle,
@@ -45,12 +44,19 @@ export default function ComponentTabRenderer({
 	rerenderButton,
 	isIframed = false,
 	size,
+	componentParams,
 }: {
 	isResizable?: boolean;
 	rerenderButton?: boolean;
 	isIframed?: boolean;
 	size: ComponentHeightType;
-} & ProcessVariantType) {
+	componentParams: {
+		sectionSlug: string;
+		categorySlug: string;
+		componentSlug: string;
+		variantSlug: string;
+	};
+} & ProcessedVariantType) {
 	return (
 		<Tabs.Root defaultValue="preview" id="variants-tabs" itemID="variants-tabs">
 			<Tabs.List
@@ -98,6 +104,14 @@ export default function ComponentTabRenderer({
 					>
 						<ResizablePanel defaultSize={100}>
 							{/* {rerenderButton && <RerenderButton setRender={setRender} />} */}
+							{/* <p>
+								{`/preview/${componentParams.sectionSlug}/${componentParams.categorySlug}/${componentParams.componentSlug}/${componentParams.variantSlug}`}
+							</p>
+							<iframe
+								className="w-full h-full"
+								title="component-preview"
+								src={`/preview/${componentParams.sectionSlug}/${componentParams.categorySlug}/${componentParams.componentSlug}/${componentParams.variantSlug}`}
+							/> */}
 							<ComponentWrapper
 								isIframed={isIframed}
 								renderButton={rerenderButton}
diff --git a/apps/website/src/components/component-wrapper/component-wrapper.tsx b/apps/website/src/components/component-wrapper/component-wrapper.tsx
index 7a66266a..aeef4de7 100644
--- a/apps/website/src/components/component-wrapper/component-wrapper.tsx
+++ b/apps/website/src/components/component-wrapper/component-wrapper.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { useLayoutEffect, useState, type ReactNode } from "react";
 import { CustomIframe } from "#/src/components/custom-iframe-component";
-import type { ComponentHeightType } from "#/src/lib/types/component";
+import type { ComponentHeightType } from "@cuicui/ui/lib/types/component";
 import { cn } from "#/src/utils/cn";
 import { getContainerHeightClass } from "#/src/components/component-wrapper/get-container-height-class";
 import { RefreshCwIcon } from "lucide-react";
diff --git a/apps/website/src/components/component-wrapper/get-container-height-class.tsx b/apps/website/src/components/component-wrapper/get-container-height-class.tsx
index 8c818f12..2eaf2743 100644
--- a/apps/website/src/components/component-wrapper/get-container-height-class.tsx
+++ b/apps/website/src/components/component-wrapper/get-container-height-class.tsx
@@ -1,4 +1,4 @@
-import type { ComponentHeightType } from "#/src/lib/types/component";
+import type { ComponentHeightType } from "@cuicui/ui/lib/types/component";
 
 export function getContainerHeightClass({
 	size,
diff --git a/apps/website/src/components/component-wrapper/github-edit-button.tsx b/apps/website/src/components/component-wrapper/github-edit-button.tsx
index b9177148..3d38342f 100644
--- a/apps/website/src/components/component-wrapper/github-edit-button.tsx
+++ b/apps/website/src/components/component-wrapper/github-edit-button.tsx
@@ -3,7 +3,7 @@ import type {
 	CategoryType,
 	ComponentType,
 	SectionType,
-} from "#/src/lib/types/component";
+} from "@cuicui/ui/lib/types/component";
 import { CUICUI_GITHUB_URL } from "#/src/lib/site.const";
 export default function GithubEditButton({
 	sectionSlug,
diff --git a/apps/website/src/components/component-wrapper/header-component.tsx b/apps/website/src/components/component-wrapper/header-component.tsx
index d9b67750..c1cece2f 100644
--- a/apps/website/src/components/component-wrapper/header-component.tsx
+++ b/apps/website/src/components/component-wrapper/header-component.tsx
@@ -1,10 +1,11 @@
 import BadgeList from "#/src/components/badge-list";
-import { ComponentBadgeList } from "#/src/lib/badges.const";
+
 import type {
 	ComponentBadgeSlug,
 	FrameworkBadge,
-} from "#/src/lib/types/component";
+} from "@cuicui/ui/lib/types/component";
 import Badge from "#/src/ui/badge";
+import { ComponentBadgeList } from "@cuicui/ui/lib/badges.const";
 
 export default function HeaderComponent({
 	frameworksBadges,
diff --git a/apps/website/src/components/component-wrapper/variant-tabs.tsx b/apps/website/src/components/component-wrapper/variant-tabs.tsx
index f0db788d..cf9969a9 100644
--- a/apps/website/src/components/component-wrapper/variant-tabs.tsx
+++ b/apps/website/src/components/component-wrapper/variant-tabs.tsx
@@ -4,8 +4,8 @@ import ComponentTabRenderer from "#/src/components/component-wrapper/component-t
 import { cn } from "#/src/utils/cn";
 import type {
 	ComponentHeightType,
-	ProcessVariantType,
-} from "../../lib/types/component";
+	ProcessedVariantType,
+} from "@cuicui/ui/lib/types/component";
 
 export type TabType = "preview" | "code-component" | "code-preview";
 
@@ -15,12 +15,18 @@ export default function VariantTabs({
 	isIframed = false,
 	isResizable = true,
 	rerenderButton = false,
+	componentParams,
 }: Readonly<{
-	variantList: ProcessVariantType[];
+	variantList: ProcessedVariantType[];
 	size?: ComponentHeightType;
 	isIframed?: boolean;
 	isResizable?: boolean;
 	rerenderButton?: boolean;
+	componentParams: {
+		sectionSlug: string;
+		categorySlug: string;
+		componentSlug?: string;
+	};
 }>) {
 	return (
 		<div>
@@ -37,6 +43,14 @@ export default function VariantTabs({
 							isResizable={isResizable}
 							rerenderButton={rerenderButton}
 							size={size}
+							componentParams={{
+								...componentParams,
+								componentSlug:
+									componentParams.componentSlug ?? variant.slugPreviewFile,
+								variantSlug: componentParams.componentSlug
+									? variant.slugPreviewFile
+									: "",
+							}}
 						/>
 					</Tabs.Content>
 				))}
diff --git a/apps/website/src/components/custom-iframe-component.tsx b/apps/website/src/components/custom-iframe-component.tsx
index 0413b45b..a8829d1c 100644
--- a/apps/website/src/components/custom-iframe-component.tsx
+++ b/apps/website/src/components/custom-iframe-component.tsx
@@ -2,7 +2,7 @@
 import type React from "react";
 import Frame from "react-frame-component";
 
-import type { ComponentHeightType } from "#/src/lib/types/component";
+import type { ComponentHeightType } from "@cuicui/ui/lib/types/component";
 import { cn } from "#/src/utils/cn";
 import { getContainerHeightClass } from "#/src/components/component-wrapper/get-container-height-class";
 
diff --git a/apps/website/src/components/floating-dock-navigation/floating-dock.tsx b/apps/website/src/components/floating-dock-navigation/floating-dock.tsx
index c89f6047..dee5a7ba 100644
--- a/apps/website/src/components/floating-dock-navigation/floating-dock.tsx
+++ b/apps/website/src/components/floating-dock-navigation/floating-dock.tsx
@@ -4,8 +4,9 @@ import { FloatingDock } from "#/src/components/floating-dock-navigation/floating
 import { ArrowUpRightIcon, GithubIcon } from "lucide-react";
 import { cn } from "#/src/utils/cn";
 import Link from "next/link";
-import { CUICUI_GITHUB_URL } from "@/lib/site.const";
+
 import { FloatingDockToggleTheme } from "#/src/components/floating-dock-navigation/floating-dock-toggle-theme";
+import { CUICUI_GITHUB_URL } from "#/src/lib/site.const";
 
 const sectionLinks = SectionsList.map((section) => {
 	return {
@@ -19,9 +20,9 @@ export function CuicuiFloatingDock() {
 	return (
 		<div
 			className={cn(
-				"flex items-center fixed gap-2 justify-center z-50 p-2",
+				"inline-flex items-center fixed gap-2 justify-center z-50 p-2",
 				"right-4 bottom-4",
-				"md:bottom-4  md:right-auto md:left-1/2 md:-translate-x-1/2",
+				"md:bottom-4 md:right-auto md:left-1/2 md:-translate-x-1/2",
 				"scale-90 hover:scale-100 transform-gpu transition duration-150",
 			)}
 		>
@@ -41,7 +42,7 @@ export function CuicuiFloatingDock() {
 				/>
 				<ArrowUpRightIcon
 					className={cn(
-						"size-4 text-neutral-600 transition dark:text-neutral-300 z-50 duration-300 absolute  right-0 top-2 transform-gpu mr-2 group-hover:translate-y-0 group-hover:-translate-x-0 translate-x-8 -translate-y-5 ",
+						"size-4 text-neutral-600 transition dark:text-neutral-300 z-50 duration-300 absolute right-0 top-2 transform-gpu mr-2 group-hover:translate-y-0 group-hover:-translate-x-0 translate-x-8 -translate-y-5",
 					)}
 				/>
 			</Link>
diff --git a/apps/website/src/components/navigation/desktop-menu.tsx b/apps/website/src/components/navigation/desktop-menu.tsx
index d9c32a9d..55f23bcf 100644
--- a/apps/website/src/components/navigation/desktop-menu.tsx
+++ b/apps/website/src/components/navigation/desktop-menu.tsx
@@ -8,7 +8,7 @@ import { cn } from "../../utils/cn";
 import Byline from "../../ui/byline";
 
 import { ScrollArea, ScrollAreaViewport } from "../../ui/shadcn/scrollarea";
-import StarGithubProjectButton from "../../ui/star-github-project-button";
+import StarCuicuiGithubButton from "../../ui/star-github-project-button";
 import { SearchMenu } from "../search-menu/search-menu";
 import NavigationMenu from "./navigation-menu";
 import InfoMenuList from "#/src/components/navigation/info-menu-list";
@@ -36,7 +36,7 @@ export function DesktopSideMenu({
 						</span>
 					</Link>
 				</div>
-				<StarGithubProjectButton />
+				<StarCuicuiGithubButton />
 			</div>
 			<InfoMenuList />
 			<ScrollArea className="w-full h-full mt-4">
diff --git a/apps/website/src/components/navigation/navigation-item.tsx b/apps/website/src/components/navigation/navigation-item.tsx
index cc440fd6..08b4c4af 100644
--- a/apps/website/src/components/navigation/navigation-item.tsx
+++ b/apps/website/src/components/navigation/navigation-item.tsx
@@ -5,7 +5,7 @@ import { usePathname, useSelectedLayoutSegments } from "next/navigation";
 import type { AnchorHTMLAttributes, ReactNode } from "react";
 
 import { cn } from "#/src/utils/cn";
-import type { SectionType } from "#/src/lib/types/component";
+import type { SectionType } from "@cuicui/ui/lib/types/component";
 
 export function GlobalNavItem({
 	isMobile,
diff --git a/apps/website/src/components/navigation/navigation-menu.tsx b/apps/website/src/components/navigation/navigation-menu.tsx
index 7ac8c214..2b56b304 100644
--- a/apps/website/src/components/navigation/navigation-menu.tsx
+++ b/apps/website/src/components/navigation/navigation-menu.tsx
@@ -9,7 +9,7 @@ import { firstMenuSection } from "#/src/lib/first-menu-section";
 import type {
 	CategoryType,
 	SingleComponentCategoryType,
-} from "#/src/lib/types/component";
+} from "@cuicui/ui/lib/types/component";
 import { cn } from "#/src/utils/cn";
 
 export default function NavigationMenu({
@@ -25,17 +25,6 @@ export default function NavigationMenu({
 		if (isNew) {
 			return "New";
 		}
-		if (category.componentList) {
-			const updatedDate = getClosestUpdatedComponentDate(
-				category.componentList.map(
-					(component) => component.lastUpdatedDateComponent,
-				),
-			);
-			const isUpdated = differenceInDays(new Date(), updatedDate ?? 0) < 14;
-			if (isUpdated) {
-				return "Updated";
-			}
-		}
 		return null;
 	}
 	function getCategoryTagSingleComponentCategory(
@@ -50,16 +39,6 @@ export default function NavigationMenu({
 			return "New";
 		}
 
-		const isUpdated =
-			differenceInDays(
-				new Date(),
-				category.component?.lastUpdatedDateComponent ?? 0,
-			) < 14;
-
-		if (isUpdated) {
-			return "Updated";
-		}
-
 		return null;
 	}
 
diff --git a/apps/website/src/components/search-menu/search-group-multi-component-section.tsx b/apps/website/src/components/search-menu/search-group-multi-component-section.tsx
index ccfa6131..57486bd5 100644
--- a/apps/website/src/components/search-menu/search-group-multi-component-section.tsx
+++ b/apps/website/src/components/search-menu/search-group-multi-component-section.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from "next/navigation";
-import type { SectionType } from "#/src/lib/types/component";
+import type { SectionType } from "@cuicui/ui/lib/types/component";
 import { CommandGroup, CommandItem } from "#/src/ui/shadcn/command";
 import Link from "next/link";
 import type {
diff --git a/apps/website/src/lib/badges.const.ts b/apps/website/src/lib/badges.const.ts
deleted file mode 100644
index f958bc29..00000000
--- a/apps/website/src/lib/badges.const.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-export const ComponentBadgeList = [
-  {
-    slug: "new",
-    name: "New",
-    description:
-      "This component is new and has not been tested by the community yet.",
-  },
-  {
-    slug: "updated",
-    name: "Updated",
-    description: "This component has been updated recently.",
-  },
-  {
-    slug: "deprecated",
-    name: "Deprecated",
-    description:
-      "This component is deprecated and will be removed in the future.",
-  },
-  {
-    slug: "experimental",
-    name: "Experimental",
-    description: "This component is experimental and might not be stable.",
-  },
-  {
-    slug: "no-js",
-    name: "No JS",
-    description: "This component does not require JavaScript to work.",
-  },
-  {
-    slug: "prefer-desktop",
-    name: "Prefer Desktop",
-    description: "This component is best used on desktop devices.",
-  },
-  {
-    slug: "better-in-dark-mode",
-    name: "Better in Dark Mode",
-    description: "This component looks better in dark mode.",
-  },
-] as const;
diff --git a/apps/website/src/lib/first-menu-section.ts b/apps/website/src/lib/first-menu-section.ts
index 37809db4..58d75fbe 100644
--- a/apps/website/src/lib/first-menu-section.ts
+++ b/apps/website/src/lib/first-menu-section.ts
@@ -1,4 +1,4 @@
-import { CUICUI_GITHUB_URL } from "@/lib/site.const";
+import { CUICUI_GITHUB_URL } from "#/src/lib/site.const";
 
 export const firstMenuSection = {
 	name: "Info",
diff --git a/apps/website/src/lib/types/component.d.ts b/apps/website/src/lib/types/component.d.ts
deleted file mode 100644
index 1107e6c3..00000000
--- a/apps/website/src/lib/types/component.d.ts
+++ /dev/null
@@ -1,156 +0,0 @@
-import type { LucideIcon } from "lucide-react";
-import type { StaticImageData } from "next/image";
-import type { JSX, ReactNode } from "react";
-import type { ComponentBadgeList } from "../badges.const";
-export type Variant = `variant${number}`;
-
-export type ProcessVariantType = {
-	name: string;
-	component: JSX.Element;
-	previewCode: string;
-	componentCode?: string;
-};
-
-export type ComponentBadgeSlug = (typeof ComponentBadgeList)[number]["slug"];
-
-export type FrameworkBadge =
-	| "react"
-	| "vue"
-	| "svelte"
-	| "angular"
-	| "web-components"
-	| "next";
-
-export type ComponentHeightType = "xs" | "sm" | "md" | "lg" | "xl";
-
-/*
------------------------------
-************ New ************
------------------------------
-*/
-
-export type PreviewComponent = {
-	component: ReactNode;
-	previewScale: number;
-	previewImage?: StaticImageData;
-};
-
-/*
-------------------------------------
-************ Sections **************
-------------------------------------
-*/
-
-// Base interface for common properties
-interface BaseSectionType {
-	name: string;
-	slug: string;
-	description: string;
-	icon: LucideIcon;
-}
-
-// Section with single-component type
-interface SingleComponentSectionType extends BaseSectionType {
-	type: "single-component";
-	categoriesList: SingleComponentCategoryType[];
-}
-
-// Section with multi-component type
-interface MultiComponentSectionType extends BaseSectionType {
-	type: "multiple-component";
-	categoriesList: CategoryType[];
-}
-
-// Section with page type
-interface PageSectionType extends BaseSectionType {
-	type: "page";
-	pageList: PageCategoryType[];
-}
-
-// Union type for SectionType
-export type SectionType =
-	| SingleComponentSectionType
-	| MultiComponentSectionType
-	| PageSectionType;
-
-/*
-------------------------------------
-************ Categories ************
-------------------------------------
-*/
-
-type CategoryType = {
-	slug: string;
-	name: string;
-	description: string;
-	icon: LucideIcon;
-	comingSoonCategory?: boolean;
-	releaseDateCategory: Date;
-	previewCategory?: PreviewComponent;
-	componentList: ComponentType[] | null;
-};
-
-type SingleComponentCategoryType = {
-	slug: string;
-	name: string;
-	description: string;
-	icon: LucideIcon;
-	comingSoonCategory?: boolean;
-	releaseDateCategory: Date;
-	previewCategory?: PreviewComponent;
-	component: SingleComponentType | null;
-};
-
-type PageCategoryType = {
-	slug: string;
-	name: string;
-	icon: LucideIcon;
-	description: string;
-	component: JSX.Element;
-};
-
-/*
-------------------------------------
-************ Components ************
-------------------------------------
-*/
-
-export type ComponentType = {
-	name: string;
-	description: string;
-	lastUpdatedDateComponent: Date;
-	isResizable?: boolean;
-	componentBadges?: ComponentBadgeSlug[];
-	isIframed?: boolean;
-	rerenderButton?: boolean;
-	inspiration?: string;
-	inspirationLink?: string;
-	sizePreview: ComponentHeightType;
-	slug: string;
-	variantList: VariantType[];
-};
-
-export type SingleComponentType = {
-	lastUpdatedDateComponent?: Date;
-	isResizable?: boolean;
-	componentBadges?: ComponentBadgeSlug[];
-	isIframed?: boolean;
-	rerenderButton?: boolean;
-	inspiration?: string;
-	inspirationLink?: string;
-	sizePreview: ComponentHeightType;
-	variantList: VariantType[];
-};
-
-/*
-------------------------------------
-************* Variants *************
-------------------------------------
-*/
-
-export type VariantType = {
-	name: string;
-	component: JSX.Element;
-	slugComponentFile?: string;
-	slugPreviewFile: string;
-};
diff --git a/apps/website/src/ui/address-bar.tsx b/apps/website/src/ui/address-bar.tsx
index e1f52a90..b60f712b 100644
--- a/apps/website/src/ui/address-bar.tsx
+++ b/apps/website/src/ui/address-bar.tsx
@@ -42,10 +42,10 @@ export function AddressBar() {
 	const pathname = usePathname();
 
 	return (
-		<div className="sticky top-0 z-20 p-2">
+		<div className="sticky top-0 z-20 p-2 pb-10 px-4 inset-x-0 overflow-x-hidden pointer-events-none">
 			<ModernGradientContainerRoot animationDurationInSeconds={30}>
 				<ModernGradientContainerContent>
-					<ScrollArea className="px-4 ">
+					<ScrollArea className="px-4 pointer-events-auto">
 						<ScrollAreaScrollbar orientation="horizontal" />
 						<div className="flex items-center px-2 py-1">
 							<Link2Icon className="inline-flex size-4 text-neutral-500/80" />
diff --git a/apps/website/src/ui/star-github-project-button.tsx b/apps/website/src/ui/star-github-project-button.tsx
index 55b7cc7a..f7043904 100644
--- a/apps/website/src/ui/star-github-project-button.tsx
+++ b/apps/website/src/ui/star-github-project-button.tsx
@@ -1,14 +1,10 @@
 export const dynamic = "force-static";
-import { GithubIcon, StarIcon } from "lucide-react";
-import Link from "next/link";
+
 import { CUICUI_GITHUB_URL } from "../lib/site.const";
-import GradientContainer from "./gradient-container";
-import { GithubAnimatedStarNumber } from "#/src/ui/github-animated-star-number";
+
 import { GithubStarsButton } from "@/cuicui/common-ui/buttons/github-stars/component.github-stars";
 
-export default async function StarGithubProjectButton({
-	className,
-}: Readonly<{ className?: string }>) {
+export default async function StarCuicuiGithubButton() {
 	const apiGithub = "https://api.github.com/repos/damien-schneider/cuicui";
 
 	const githubRepoData = await fetch(apiGithub).then((res) => res.json());
@@ -18,38 +14,10 @@ export default async function StarGithubProjectButton({
 		<GithubStarsButton
 			className="inline-flex w-full h-fit"
 			href={CUICUI_GITHUB_URL}
+			title="Star Cuicui on GitHub"
 			starNumber={numberOfStars ?? 0}
 		>
 			Star Cuicui on GitHub
 		</GithubStarsButton>
-		// <Link href={CUICUI_GITHUB_URL} title="Star Cuicui on GitHub">
-		// 	<GradientContainer
-		// 		classNameChild="group-hover:opacity-80 transition-opacity duration-150 ease-in-out pl-4 py-2 flex gap-2 items-center text-sm text-neutral-500 font-medium relative"
-		// 		classNameParent="group"
-		// 		rounded="sm"
-		// 	>
-		// 		<GithubIcon className="size-5 fill-neutral-300 stroke-neutral-400 dark:fill-neutral-600 dark:stroke-neutral-500" />
-		// 		<span className="md:inline hidden">Star this project on GitHub</span>
-		// 		{await getGithubStarCountComponent()}
-		// 	</GradientContainer>
-		// </Link>
 	);
 }
-
-const getGithubStarCountComponent = async () => {
-	const apiGithub = "https://api.github.com/repos/damien-schneider/cuicui";
-
-	try {
-		const githubRepoData = await fetch(apiGithub).then((res) => res.json());
-		const numberOfStars = githubRepoData.stargazers_count;
-		return (
-			<div className="flex items-center gap-0.5 w-16">
-				<StarIcon className="size-4 fill-neutral-300 stroke-neutral-400 dark:fill-neutral-600 dark:stroke-neutral-500" />
-				<GithubAnimatedStarNumber value={numberOfStars} />
-			</div>
-		);
-	} catch (error) {
-		console.error(error);
-		return null;
-	}
-};
diff --git a/apps/website/src/utils/section-category-components-utils/find-category-by-slug.ts b/apps/website/src/utils/section-category-components-utils/find-category-by-slug.ts
index e213b990..8ca1843d 100644
--- a/apps/website/src/utils/section-category-components-utils/find-category-by-slug.ts
+++ b/apps/website/src/utils/section-category-components-utils/find-category-by-slug.ts
@@ -3,7 +3,7 @@ import type {
 	PageCategoryType,
 	SectionType,
 	SingleComponentCategoryType,
-} from "#/src/lib/types/component";
+} from "@cuicui/ui/lib/types/component";
 
 // Function Overloads
 
diff --git a/apps/website/src/utils/section-category-components-utils/find-section-by-slug.ts b/apps/website/src/utils/section-category-components-utils/find-section-by-slug.ts
index 01523c71..3e59a5be 100644
--- a/apps/website/src/utils/section-category-components-utils/find-section-by-slug.ts
+++ b/apps/website/src/utils/section-category-components-utils/find-section-by-slug.ts
@@ -1,5 +1,5 @@
 import { SectionsList } from "@cuicui/ui";
-import type { SectionType } from "#/src/lib/types/component";
+import type { SectionType } from "@cuicui/ui/lib/types/component";
 
 export function findSectionBySlug(slug: string): SectionType | null {
 	return SectionsList.find((section) => section.slug === slug) ?? null;
diff --git a/packages/ui/cuicui/all-in-one-themes/theme1.tsx b/packages/ui/cuicui/all-in-one-themes/theme1.tsx
new file mode 100644
index 00000000..64323397
--- /dev/null
+++ b/packages/ui/cuicui/all-in-one-themes/theme1.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/cuicui/utils/cn/cn";
+import type { ComponentProps, ReactNode } from "react";
+
+// No forwardRef for now as it will disappear in React 19
+
+export const H1 = ({
+	children,
+	...props
+}: { children: ReactNode } & ComponentProps<"h1">) => (
+	<h1 className={cn("text-5xl font-semibold", props.className)} {...props}>
+		{children}
+	</h1>
+);
diff --git a/packages/ui/cuicui/application-ui/action-menu/advanced-bottom-action-menu/advanced-bottom-action-menu.component.tsx b/packages/ui/cuicui/application-ui/action-menu/advanced-bottom-action-menu/advanced-bottom-action-menu.component.tsx
index 75bb5f1f..e97c6837 100644
--- a/packages/ui/cuicui/application-ui/action-menu/advanced-bottom-action-menu/advanced-bottom-action-menu.component.tsx
+++ b/packages/ui/cuicui/application-ui/action-menu/advanced-bottom-action-menu/advanced-bottom-action-menu.component.tsx
@@ -7,7 +7,6 @@ export const advancedBottomActionMenuComponent: ComponentType = {
 
 	sizePreview: "md",
 	slug: "advanced-bottom-action-menu",
-	lastUpdatedDateComponent: new Date("2024-09-28"),
 
 	variantList: [
 		{
diff --git a/packages/ui/cuicui/application-ui/alert/alert.category.tsx b/packages/ui/cuicui/application-ui/alert/alert.category.tsx
index 969c1451..3d54d2ba 100644
--- a/packages/ui/cuicui/application-ui/alert/alert.category.tsx
+++ b/packages/ui/cuicui/application-ui/alert/alert.category.tsx
@@ -16,7 +16,6 @@ export const alertCategory: CategoryType = {
 	},
 	componentList: [
 		{
-			lastUpdatedDateComponent: new Date("2024-08-29"),
 			isIframed: true,
 			sizePreview: "sm",
 			slug: "simple-alert",
@@ -34,7 +33,6 @@ export const alertCategory: CategoryType = {
 			isIframed: true,
 			sizePreview: "sm",
 			slug: "modern-glassy-alert",
-			lastUpdatedDateComponent: new Date("2024-09-16"),
 			variantList: [
 				{
 					name: "Default",
diff --git a/packages/ui/cuicui/application-ui/authentication/authentication.category.tsx b/packages/ui/cuicui/application-ui/authentication/authentication.category.tsx
index 8cea9d3a..b1d5be70 100644
--- a/packages/ui/cuicui/application-ui/authentication/authentication.category.tsx
+++ b/packages/ui/cuicui/application-ui/authentication/authentication.category.tsx
@@ -13,7 +13,6 @@ export const authenticationCategory: CategoryType = {
 	},
 	componentList: [
 		{
-			lastUpdatedDateComponent: new Date("2024-08-21"),
 			isIframed: true,
 			sizePreview: "lg",
 			slug: "half-sided-glassmorphism",
diff --git a/packages/ui/cuicui/application-ui/battery/battery.category.tsx b/packages/ui/cuicui/application-ui/battery/battery.category.tsx
index 7450570f..d0fe5202 100644
--- a/packages/ui/cuicui/application-ui/battery/battery.category.tsx
+++ b/packages/ui/cuicui/application-ui/battery/battery.category.tsx
@@ -14,8 +14,6 @@ export const batteryCategory: CategoryType = {
 	},
 	componentList: [
 		{
-			lastUpdatedDateComponent: new Date("2024-08-21"),
-
 			sizePreview: "sm",
 			slug: "battery-indicator",
 			variantList: [
diff --git a/packages/ui/cuicui/application-ui/code/advanced-code-block/advanced-code-block.component.tsx b/packages/ui/cuicui/application-ui/code/advanced-code-block/advanced-code-block.component.tsx
index 75f5cbfa..9ac88ee2 100644
--- a/packages/ui/cuicui/application-ui/code/advanced-code-block/advanced-code-block.component.tsx
+++ b/packages/ui/cuicui/application-ui/code/advanced-code-block/advanced-code-block.component.tsx
@@ -6,7 +6,6 @@ export const advancedCodeBlockComponent: ComponentType = {
 	sizePreview: "sm",
 	slug: "advanced-code-block",
 
-	lastUpdatedDateComponent: new Date("2024-09-24"),
 	variantList: [
 		{
 			name: "Default",
diff --git a/packages/ui/cuicui/application-ui/code/code-card/code-card.component.tsx b/packages/ui/cuicui/application-ui/code/code-card/code-card.component.tsx
index 99d3417e..faafc442 100644
--- a/packages/ui/cuicui/application-ui/code/code-card/code-card.component.tsx
+++ b/packages/ui/cuicui/application-ui/code/code-card/code-card.component.tsx
@@ -4,7 +4,7 @@ import { CodeCardPreview } from "@/cuicui/application-ui/code/code-card/code-car
 export const codeCardComponent: ComponentType = {
 	sizePreview: "md",
 	slug: "code-card",
-	lastUpdatedDateComponent: new Date("2024-08-29"),
+
 	variantList: [
 		{
 			name: "Default",
diff --git a/packages/ui/cuicui/application-ui/code/code-snippet/code-snippet.component.tsx b/packages/ui/cuicui/application-ui/code/code-snippet/code-snippet.component.tsx
index 0ec27805..b68daf13 100644
--- a/packages/ui/cuicui/application-ui/code/code-snippet/code-snippet.component.tsx
+++ b/packages/ui/cuicui/application-ui/code/code-snippet/code-snippet.component.tsx
@@ -4,7 +4,7 @@ import PreviewCommandVariant1 from "@/cuicui/application-ui/code/code-snippet/pr
 export const codeSnippetComponent: ComponentType = {
 	sizePreview: "xs",
 	slug: "code-snippet",
-	lastUpdatedDateComponent: new Date("2024-08-21"),
+
 	variantList: [
 		{
 			name: "Default",
diff --git a/packages/ui/cuicui/application-ui/code/inline-code/inline-code.component.tsx b/packages/ui/cuicui/application-ui/code/inline-code/inline-code.component.tsx
index ae2a1fe8..2387c972 100644
--- a/packages/ui/cuicui/application-ui/code/inline-code/inline-code.component.tsx
+++ b/packages/ui/cuicui/application-ui/code/inline-code/inline-code.component.tsx
@@ -4,7 +4,7 @@ import { PreviewInlineCode } from "@/cuicui/application-ui/code/inline-code/prev
 export const inlineCodeComponent: ComponentType = {
 	sizePreview: "xs",
 	slug: "inline-code",
-	lastUpdatedDateComponent: new Date("2024-08-21"),
+
 	variantList: [
 		{
 			name: "Default",
diff --git a/packages/ui/cuicui/application-ui/cookie-banner/simple-cookie-banner/component.simple-cookie-banner.tsx b/packages/ui/cuicui/application-ui/cookie-banner/simple-cookie-banner/component.simple-cookie-banner.tsx
index 0599b3a9..e50f22f0 100644
--- a/packages/ui/cuicui/application-ui/cookie-banner/simple-cookie-banner/component.simple-cookie-banner.tsx
+++ b/packages/ui/cuicui/application-ui/cookie-banner/simple-cookie-banner/component.simple-cookie-banner.tsx
@@ -16,5 +16,4 @@ export const simpleCookieBannerComponent: ComponentType = {
 		},
 	],
 	sizePreview: "sm",
-	lastUpdatedDateComponent: new Date("2024-09-19"),
 };
diff --git a/packages/ui/cuicui/application-ui/kbd/kbd.category.tsx b/packages/ui/cuicui/application-ui/kbd/kbd.category.tsx
index 94f0d16e..e925dc68 100644
--- a/packages/ui/cuicui/application-ui/kbd/kbd.category.tsx
+++ b/packages/ui/cuicui/application-ui/kbd/kbd.category.tsx
@@ -15,8 +15,6 @@ export const kbdCategory: CategoryType = {
 	},
 	componentList: [
 		{
-			lastUpdatedDateComponent: new Date("2024-08-13"),
-
 			sizePreview: "xs",
 			slug: "modern-detailed-kbd",
 			variantList: [
@@ -31,7 +29,6 @@ export const kbdCategory: CategoryType = {
 				"A simple keyboard Kbd with an effect on hover and on press.",
 		},
 		{
-			lastUpdatedDateComponent: new Date("2024-08-13"),
 			sizePreview: "xs",
 			slug: "modern-3d-kbd",
 			variantList: [
diff --git a/packages/ui/cuicui/application-ui/notification/dynamic-island-notification/component.dynamic-island-notification.tsx b/packages/ui/cuicui/application-ui/notification/dynamic-island-notification/component.dynamic-island-notification.tsx
index 2eb17650..102591c2 100644
--- a/packages/ui/cuicui/application-ui/notification/dynamic-island-notification/component.dynamic-island-notification.tsx
+++ b/packages/ui/cuicui/application-ui/notification/dynamic-island-notification/component.dynamic-island-notification.tsx
@@ -2,7 +2,6 @@ import type { ComponentType } from "@/lib/types/component";
 import { PreviewDynamicIslandNotification } from "@/cuicui/application-ui/notification/dynamic-island-notification/preview.dynamic-island-notification";
 
 export const dynamicIslandNotificationComponent: ComponentType = {
-	lastUpdatedDateComponent: new Date("2024-10-14"),
 	sizePreview: "md",
 	slug: "dynamic-island-notification",
 	variantList: [
diff --git a/packages/ui/cuicui/application-ui/search-bars/search-bars.category.tsx b/packages/ui/cuicui/application-ui/search-bars/search-bars.category.tsx
index 37896d60..5d213ce4 100644
--- a/packages/ui/cuicui/application-ui/search-bars/search-bars.category.tsx
+++ b/packages/ui/cuicui/application-ui/search-bars/search-bars.category.tsx
@@ -14,7 +14,6 @@ export const searchBarsCategory: CategoryType = {
 	},
 	componentList: [
 		{
-			lastUpdatedDateComponent: new Date("2024-08-19"),
 			sizePreview: "xs",
 			slug: "growing-search",
 			variantList: [
diff --git a/packages/ui/cuicui/application-ui/settings/settings.category.tsx b/packages/ui/cuicui/application-ui/settings/settings.category.tsx
index d108312b..378f68e6 100644
--- a/packages/ui/cuicui/application-ui/settings/settings.category.tsx
+++ b/packages/ui/cuicui/application-ui/settings/settings.category.tsx
@@ -14,7 +14,6 @@ export const settingsCategory: CategoryType = {
 	},
 	componentList: [
 		{
-			lastUpdatedDateComponent: new Date("2024-06-30"),
 			sizePreview: "sm",
 			slug: "dynamic-settings",
 			variantList: [
diff --git a/packages/ui/cuicui/application-ui/signature/react-signature/react-signature.component.tsx b/packages/ui/cuicui/application-ui/signature/react-signature/react-signature.component.tsx
index 9931e608..ea34ffbd 100644
--- a/packages/ui/cuicui/application-ui/signature/react-signature/react-signature.component.tsx
+++ b/packages/ui/cuicui/application-ui/signature/react-signature/react-signature.component.tsx
@@ -14,5 +14,4 @@ export const reactSignatureComponent: ComponentType = {
 			slugComponentFile: "react-signature",
 		},
 	],
-	lastUpdatedDateComponent: new Date("2024-09-24"),
 };
diff --git a/packages/ui/cuicui/application-ui/sliders/sliders.category.tsx b/packages/ui/cuicui/application-ui/sliders/sliders.category.tsx
index 79952d7d..18098863 100644
--- a/packages/ui/cuicui/application-ui/sliders/sliders.category.tsx
+++ b/packages/ui/cuicui/application-ui/sliders/sliders.category.tsx
@@ -29,7 +29,6 @@ export const slidersCategory: CategoryType = {
 			],
 			inspiration: "Build UI",
 			inspirationLink: "https://buildui.com/recipes/elastic-slider",
-			lastUpdatedDateComponent: new Date("2024-08-10"),
 		},
 		{
 			slug: "simple-modern-slider",
@@ -48,7 +47,6 @@ export const slidersCategory: CategoryType = {
 					slugPreviewFile: "simple-modern-slider-with-max",
 				},
 			],
-			lastUpdatedDateComponent: new Date("2024-08-10"),
 		},
 	],
 };
diff --git a/packages/ui/cuicui/application-ui/static-steppers/static-steppers.category.tsx b/packages/ui/cuicui/application-ui/static-steppers/static-steppers.category.tsx
index 088d68e5..783334bc 100644
--- a/packages/ui/cuicui/application-ui/static-steppers/static-steppers.category.tsx
+++ b/packages/ui/cuicui/application-ui/static-steppers/static-steppers.category.tsx
@@ -29,7 +29,6 @@ export const staticSteppersCategory: CategoryType = {
 			componentBadges: ["updated"],
 			inspiration: "Hooks Scriptkavi manual installation",
 			inspirationLink: "https://hooks.scriptkavi.com/docs/hooks/battery",
-			lastUpdatedDateComponent: new Date("2024-08-01"),
 		},
 	],
 };
diff --git a/packages/ui/cuicui/application-ui/table-of-contents/table-of-contents.category.tsx b/packages/ui/cuicui/application-ui/table-of-contents/table-of-contents.category.tsx
index 63b91425..d41993eb 100644
--- a/packages/ui/cuicui/application-ui/table-of-contents/table-of-contents.category.tsx
+++ b/packages/ui/cuicui/application-ui/table-of-contents/table-of-contents.category.tsx
@@ -20,7 +20,7 @@ export const tableOfContentCategory: CategoryType = {
 			description:
 				"An advanced animated table of contents component highlighting every sections on the screen.",
 			sizePreview: "md",
-			lastUpdatedDateComponent: new Date("2024-08-28"),
+
 			variantList: [
 				{
 					name: "Default",
diff --git a/packages/ui/cuicui/application-ui/theme/theme.category.tsx b/packages/ui/cuicui/application-ui/theme/theme.category.tsx
index 652875a6..fe1fc5d8 100644
--- a/packages/ui/cuicui/application-ui/theme/theme.category.tsx
+++ b/packages/ui/cuicui/application-ui/theme/theme.category.tsx
@@ -26,7 +26,6 @@ export const themeCategory: CategoryType = {
 					slugPreviewFile: "theme-switcher-button",
 				},
 			],
-			lastUpdatedDateComponent: new Date("2024-08-10"),
 		},
 	],
 };
diff --git a/packages/ui/cuicui/application-ui/tree/recursive-tree/recursive-tree.component.tsx b/packages/ui/cuicui/application-ui/tree/recursive-tree/recursive-tree.component.tsx
index 7c31e2d3..af405dd8 100644
--- a/packages/ui/cuicui/application-ui/tree/recursive-tree/recursive-tree.component.tsx
+++ b/packages/ui/cuicui/application-ui/tree/recursive-tree/recursive-tree.component.tsx
@@ -22,5 +22,4 @@ export const recursiveTreeComponent: ComponentType = {
 	name: "Recursive Tree",
 	description:
 		"A tree component with recursive children. Without any limit with animated collapse and without needing to know the depth or to specify parent component.",
-	lastUpdatedDateComponent: new Date("2024-09-14"),
 };
diff --git a/packages/ui/cuicui/common-ui/badges/badges.category.tsx b/packages/ui/cuicui/common-ui/badges/badges.category.tsx
index 055e9d94..27a62a9b 100644
--- a/packages/ui/cuicui/common-ui/badges/badges.category.tsx
+++ b/packages/ui/cuicui/common-ui/badges/badges.category.tsx
@@ -17,7 +17,6 @@ export const badgesCategory: CategoryType = {
 	},
 	componentList: [
 		{
-			lastUpdatedDateComponent: new Date("2024-06-29"),
 			sizePreview: "xs",
 			slug: "modern-simple-badges",
 			variantList: [
@@ -37,7 +36,6 @@ export const badgesCategory: CategoryType = {
 				"Simple modern badge that can be used in any project with any artistic style.",
 		},
 		{
-			lastUpdatedDateComponent: new Date("2024-06-29"),
 			sizePreview: "xs",
 			slug: "clerk-badge",
 			variantList: [
@@ -54,7 +52,6 @@ export const badgesCategory: CategoryType = {
 			inspirationLink: "https://clerk.com/docs",
 		},
 		{
-			lastUpdatedDateComponent: new Date("2024-07-29"),
 			sizePreview: "xs",
 			slug: "advanced-badges",
 			variantList: [
diff --git a/packages/ui/cuicui/common-ui/blockquotes/blockquotes.category.tsx b/packages/ui/cuicui/common-ui/blockquotes/blockquotes.category.tsx
index ffeeaeb0..0aa7071c 100644
--- a/packages/ui/cuicui/common-ui/blockquotes/blockquotes.category.tsx
+++ b/packages/ui/cuicui/common-ui/blockquotes/blockquotes.category.tsx
@@ -25,7 +25,6 @@ export const blockquotesCategory: CategoryType = {
 					slugPreviewFile: "variant1",
 				},
 			],
-			lastUpdatedDateComponent: new Date("2024-08-01"),
 		},
 	],
 };
diff --git a/packages/ui/cuicui/common-ui/buttons/buttons.category.tsx b/packages/ui/cuicui/common-ui/buttons/buttons.category.tsx
index 4c7a5793..beb88d4f 100644
--- a/packages/ui/cuicui/common-ui/buttons/buttons.category.tsx
+++ b/packages/ui/cuicui/common-ui/buttons/buttons.category.tsx
@@ -42,7 +42,6 @@ export const buttonsCategory: CategoryType = {
 					slugComponentFile: "component.magnetic-button",
 				},
 			],
-			lastUpdatedDateComponent: new Date("2024-08-11"),
 		},
 		{
 			slug: "github-stars",
@@ -66,7 +65,6 @@ export const buttonsCategory: CategoryType = {
 			],
 			inspiration: "Refine",
 			inspirationLink: "https://refine.dev/",
-			lastUpdatedDateComponent: new Date("2024-08-11"),
 		},
 		{
 			slug: "growing-button",
@@ -81,7 +79,6 @@ export const buttonsCategory: CategoryType = {
 					slugPreviewFile: "variant1",
 				},
 			],
-			lastUpdatedDateComponent: new Date("2024-08-10"),
 		},
 		{
 			slug: "before-effect-button",
@@ -109,8 +106,6 @@ export const buttonsCategory: CategoryType = {
 					slugComponentFile: "before-effect-button",
 				},
 			],
-
-			lastUpdatedDateComponent: new Date("2024-08-10"),
 		},
 		{
 			slug: "shiny-rotating-border-button",
@@ -126,7 +121,6 @@ export const buttonsCategory: CategoryType = {
 				},
 			],
 			isIframed: true,
-			lastUpdatedDateComponent: new Date("2024-08-10"),
 		},
 		{
 			slug: "modern-animated-button",
@@ -143,7 +137,6 @@ export const buttonsCategory: CategoryType = {
 
 			inspiration: "Raycast",
 			inspirationLink: "https://www.raycast.com/",
-			lastUpdatedDateComponent: new Date("2024-08-10"),
 		},
 	],
 };
diff --git a/packages/ui/cuicui/common-ui/buttons/github-stars/preview.github-stars.tsx b/packages/ui/cuicui/common-ui/buttons/github-stars/preview.github-stars.tsx
index e371f563..580ccca0 100644
--- a/packages/ui/cuicui/common-ui/buttons/github-stars/preview.github-stars.tsx
+++ b/packages/ui/cuicui/common-ui/buttons/github-stars/preview.github-stars.tsx
@@ -1,7 +1,6 @@
 "use client";
 import { GithubStarsButton } from "@/cuicui/common-ui/buttons/github-stars/component.github-stars";
 import { sleep } from "@/cuicui/utils/sleep/sleep";
-import { CUICUI_GITHUB_URL } from "@/lib/site.const";
 
 import { useEffect, useState } from "react";
 
@@ -15,7 +14,10 @@ export default function PreviewGithubStars() {
 	}, []);
 
 	return (
-		<GithubStarsButton href={CUICUI_GITHUB_URL} starNumber={stars}>
+		<GithubStarsButton
+			href="https://github.com/damien-schneider/cuicui"
+			starNumber={stars}
+		>
 			Star Cuicui on GitHub
 		</GithubStarsButton>
 	);
diff --git a/packages/ui/cuicui/common-ui/buttons/magnetic-button/component.magnetic-button.tsx b/packages/ui/cuicui/common-ui/buttons/magnetic-button/component.magnetic-button.tsx
index 693842c0..4cb6e266 100644
--- a/packages/ui/cuicui/common-ui/buttons/magnetic-button/component.magnetic-button.tsx
+++ b/packages/ui/cuicui/common-ui/buttons/magnetic-button/component.magnetic-button.tsx
@@ -1,73 +1,60 @@
 "use client";
+import { useState, useRef, type MouseEvent } from "react";
+import { motion, useMotionValue, useSpring } from "framer-motion";
 
-import { cn } from "@/cuicui/utils/cn/cn";
-import { useState, useRef, useEffect, type ReactNode } from "react";
+const SPRING_CONFIG = { damping: 30, stiffness: 400 };
+const MAX_DISTANCE = 0.3;
 
-export function MagneticButton({
-	children = "Magnetic Button",
-	magneticStrength = 1,
-	className,
+export const MagneticButton = ({
+	children,
+	...props
 }: {
-	children?: ReactNode;
-	magneticStrength?: number;
-	className?: string;
-}) {
-	const [position, setPosition] = useState({ x: 0, y: 0 });
-	// const [buttonSize, setButtonSize] = useState({ width: 0, height: 0 });
-	const buttonRef = useRef<HTMLButtonElement>(null);
-
-	useEffect(() => {
-		const handleMouseMove = (e: MouseEvent) => {
-			if (!buttonRef.current) {
-				return;
-			}
-			const rect = buttonRef.current.getBoundingClientRect();
+	children: React.ReactNode;
+} & { height?: string }) => {
+	const [isHovered, setIsHovered] = useState(false);
+	const x = useMotionValue(0);
+	const y = useMotionValue(0);
+	const ref = useRef<HTMLDivElement>(null);
+	const springX = useSpring(x, SPRING_CONFIG);
+	const springY = useSpring(y, SPRING_CONFIG);
+
+	const calculateDistance = (e: MouseEvent<HTMLDivElement>) => {
+		if (ref.current) {
+			const rect = ref.current.getBoundingClientRect();
 			const centerX = rect.left + rect.width / 2;
 			const centerY = rect.top + rect.height / 2;
 			const distanceX = e.clientX - centerX;
 			const distanceY = e.clientY - centerY;
-			const distance = Math.sqrt(distanceX ** 2 + distanceY ** 2);
-			const maxDistance = Math.max(rect.width, rect.height);
 
-			if (distance < maxDistance) {
-				const magneticX =
-					(distanceX / maxDistance) * magneticStrength * (rect.width / 4);
-				const magneticY =
-					(distanceY / maxDistance) * magneticStrength * (rect.height / 4);
-				setPosition({ x: magneticX, y: magneticY });
+			if (isHovered) {
+				x.set(distanceX * MAX_DISTANCE);
+				y.set(distanceY * MAX_DISTANCE);
 			} else {
-				setPosition({ x: 0, y: 0 });
+				x.set(0);
+				y.set(0);
 			}
-		};
-
-		const handleMouseLeave = () => {
-			setPosition({ x: 0, y: 0 });
-		};
-
-		document.addEventListener("mousemove", handleMouseMove);
-		buttonRef.current?.addEventListener("mouseleave", handleMouseLeave);
-
-		return () => {
-			document.removeEventListener("mousemove", handleMouseMove);
-			buttonRef.current?.removeEventListener("mouseleave", handleMouseLeave);
-		};
-	}, [magneticStrength]);
+		}
+	};
 
 	return (
-		<>
-			<button
-				type="button"
-				ref={buttonRef}
-				className={cn(
-					"relative inline-flex items-center justify-center rounded-lg bg-neutral-500/20 border tracking-tight border-neutral-400/20 dark:text-neutral-200 text-neutral-600 transition duration-200 ease-out px-3 py-1.5 hover:border-neutral-400/80 hover:bg-neutral-500/30",
-					className,
-				)}
-				style={{
-					transform: `translate3D(${position.x}px, ${position.y}px, 0)`,
-				}}
-			>
-				{children}
-			</button>
-		</>
+		<motion.div
+			ref={ref}
+			onMouseMove={(e) => {
+				calculateDistance(e);
+			}}
+			onMouseEnter={() => setIsHovered(true)}
+			onMouseLeave={() => {
+				setIsHovered(false);
+				x.set(0);
+				y.set(0);
+			}}
+			style={{
+				x: springX,
+				y: springY,
+				height: props.height || "auto",
+			}}
+		>
+			{children}
+		</motion.div>
 	);
-}
+};
diff --git a/packages/ui/cuicui/common-ui/buttons/magnetic-button/preview.magnetic-button.tsx b/packages/ui/cuicui/common-ui/buttons/magnetic-button/preview.magnetic-button.tsx
index d190e3ad..901d1d57 100644
--- a/packages/ui/cuicui/common-ui/buttons/magnetic-button/preview.magnetic-button.tsx
+++ b/packages/ui/cuicui/common-ui/buttons/magnetic-button/preview.magnetic-button.tsx
@@ -1,5 +1,14 @@
 import { MagneticButton } from "@/cuicui/common-ui/buttons/magnetic-button/component.magnetic-button";
 
 export function PreviewMagneticButton() {
-	return <MagneticButton>Magnetic Button To improve</MagneticButton>;
+	return (
+		<MagneticButton>
+			<button
+				type="button"
+				className="bg-neutral-400/20 text-neutral-600 dark:text-neutral-300 px-4 py-2 rounded-md"
+			>
+				Click me
+			</button>
+		</MagneticButton>
+	);
 }
diff --git a/packages/ui/cuicui/common-ui/cards/cards.category.tsx b/packages/ui/cuicui/common-ui/cards/cards.category.tsx
index 7d1c94af..8d628135 100644
--- a/packages/ui/cuicui/common-ui/cards/cards.category.tsx
+++ b/packages/ui/cuicui/common-ui/cards/cards.category.tsx
@@ -31,7 +31,6 @@ export const cardsCategory: CategoryType = {
 			],
 
 			componentBadges: ["better-in-dark-mode"],
-			lastUpdatedDateComponent: new Date("2024-08-10"),
 		},
 		{
 			slug: "dynamic-square-background",
@@ -47,14 +46,13 @@ export const cardsCategory: CategoryType = {
 					slugComponentFile: "dynamic-square-background",
 				},
 			],
-			lastUpdatedDateComponent: new Date("2024-08-10"),
 		},
 		{
 			slug: "notification-card",
 			name: "Notification Card",
 			description:
 				"A notification card with a date and time to show the user when the notification was sent.",
-			lastUpdatedDateComponent: new Date("2024-08-10"),
+
 			sizePreview: "sm",
 			variantList: [
 				{
@@ -68,7 +66,7 @@ export const cardsCategory: CategoryType = {
 		{
 			sizePreview: "sm",
 			slug: "hover-effect-card",
-			lastUpdatedDateComponent: new Date("2024-09-10"),
+
 			variantList: [
 				{
 					name: "Variant 1",
diff --git a/packages/ui/cuicui/common-ui/checkboxes/checkboxes.category.tsx b/packages/ui/cuicui/common-ui/checkboxes/checkboxes.category.tsx
index d05db15f..0a0f3d11 100644
--- a/packages/ui/cuicui/common-ui/checkboxes/checkboxes.category.tsx
+++ b/packages/ui/cuicui/common-ui/checkboxes/checkboxes.category.tsx
@@ -27,8 +27,6 @@ export const checkboxesCategory: CategoryType = {
 			name: "Simple checkbox",
 			description:
 				"A simple checkbox that can be used in any project with simple artistic style.",
-
-			lastUpdatedDateComponent: new Date("2024-08-10"),
 		},
 	],
 };
diff --git a/packages/ui/cuicui/common-ui/inputs/inputs.category.tsx b/packages/ui/cuicui/common-ui/inputs/inputs.category.tsx
index 6934add8..4122157d 100644
--- a/packages/ui/cuicui/common-ui/inputs/inputs.category.tsx
+++ b/packages/ui/cuicui/common-ui/inputs/inputs.category.tsx
@@ -17,7 +17,7 @@ export const inputsCategory: CategoryType = {
 		{
 			sizePreview: "sm",
 			slug: "droppable-file",
-			lastUpdatedDateComponent: new Date("2024-08-20"),
+
 			variantList: [
 				{
 					name: "Droppable Zone",
@@ -32,7 +32,7 @@ export const inputsCategory: CategoryType = {
 		{
 			sizePreview: "sm",
 			slug: "modern-simple-input",
-			lastUpdatedDateComponent: new Date("2024-09-16"),
+
 			variantList: [
 				{
 					name: "Variant 1",
diff --git a/packages/ui/cuicui/common-ui/loaders/loaders.category.tsx b/packages/ui/cuicui/common-ui/loaders/loaders.category.tsx
index ad98c4af..a39a193b 100644
--- a/packages/ui/cuicui/common-ui/loaders/loaders.category.tsx
+++ b/packages/ui/cuicui/common-ui/loaders/loaders.category.tsx
@@ -40,8 +40,6 @@ export const loadersCategory: CategoryType = {
 			],
 			name: "Three Dot Simple Loader",
 			description: "A simple loader with three dots that bounce up and down.",
-
-			lastUpdatedDateComponent: new Date("2024-08-31"),
 		},
 		{
 			sizePreview: "sm",
@@ -65,8 +63,6 @@ export const loadersCategory: CategoryType = {
 			],
 			name: "Spinner Loader",
 			description: "A simple circular loader",
-
-			lastUpdatedDateComponent: new Date("2024-08-31"),
 		},
 	],
 };
diff --git a/packages/ui/cuicui/common-ui/navigation/navigation.category.tsx b/packages/ui/cuicui/common-ui/navigation/navigation.category.tsx
index a389d73c..3c240255 100644
--- a/packages/ui/cuicui/common-ui/navigation/navigation.category.tsx
+++ b/packages/ui/cuicui/common-ui/navigation/navigation.category.tsx
@@ -34,7 +34,6 @@ export const navigationCategory: CategoryType = {
 			description:
 				"A smooth and simple navigation bar inspired by Vercel, with modern transitions and animations.",
 			isIframed: true,
-			lastUpdatedDateComponent: new Date("2024-06-17"),
 		},
 		{
 			sizePreview: "sm",
@@ -51,7 +50,6 @@ export const navigationCategory: CategoryType = {
 				"A navigation menu with smooth animation as done on macOS but in a web browser!",
 
 			inspiration: "MacOS Dock",
-			lastUpdatedDateComponent: new Date("2024-06-17"),
 		},
 	],
 };
diff --git a/packages/ui/cuicui/common-ui/skeletons/skeletons.category.tsx b/packages/ui/cuicui/common-ui/skeletons/skeletons.category.tsx
index 56113361..3fad3212 100644
--- a/packages/ui/cuicui/common-ui/skeletons/skeletons.category.tsx
+++ b/packages/ui/cuicui/common-ui/skeletons/skeletons.category.tsx
@@ -18,7 +18,7 @@ export const skeletonsCategory: CategoryType = {
 		{
 			sizePreview: "sm",
 			slug: "classic-pulse",
-			lastUpdatedDateComponent: new Date("2024-08-01"),
+
 			variantList: [
 				{
 					name: "Classic Pulse",
@@ -35,7 +35,7 @@ export const skeletonsCategory: CategoryType = {
 		{
 			sizePreview: "sm",
 			slug: "shiny-gradient",
-			lastUpdatedDateComponent: new Date("2024-09-21"),
+
 			variantList: [
 				{
 					name: "Horizontal",
diff --git a/packages/ui/cuicui/hooks/use-battery/use-battery.category.tsx b/packages/ui/cuicui/hooks/use-battery/use-battery.category.tsx
index 07c3e966..56ea4f30 100644
--- a/packages/ui/cuicui/hooks/use-battery/use-battery.category.tsx
+++ b/packages/ui/cuicui/hooks/use-battery/use-battery.category.tsx
@@ -14,7 +14,7 @@ export const useBatteryCategory: SingleComponentCategoryType = {
 	},
 	component: {
 		rerenderButton: true,
-		lastUpdatedDateComponent: new Date("2024-09-16"),
+
 		sizePreview: "lg",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-click-outside/category.use-click-outside.tsx b/packages/ui/cuicui/hooks/use-click-outside/category.use-click-outside.tsx
index 6ef97f04..11cc8fe0 100644
--- a/packages/ui/cuicui/hooks/use-click-outside/category.use-click-outside.tsx
+++ b/packages/ui/cuicui/hooks/use-click-outside/category.use-click-outside.tsx
@@ -14,7 +14,6 @@ export const useClickOutsideCategory: SingleComponentCategoryType = {
 		previewScale: 0.8,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-10-15"),
 		sizePreview: "xl",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-counter/category.use-counter.tsx b/packages/ui/cuicui/hooks/use-counter/category.use-counter.tsx
index 066c8aed..14977770 100644
--- a/packages/ui/cuicui/hooks/use-counter/category.use-counter.tsx
+++ b/packages/ui/cuicui/hooks/use-counter/category.use-counter.tsx
@@ -13,7 +13,6 @@ export const useCounterCategory: SingleComponentCategoryType = {
 		previewScale: 1,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-09-16"),
 		sizePreview: "lg",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-debounce/category.use-debounce.tsx b/packages/ui/cuicui/hooks/use-debounce/category.use-debounce.tsx
index 337b06b8..a1ed13c1 100644
--- a/packages/ui/cuicui/hooks/use-debounce/category.use-debounce.tsx
+++ b/packages/ui/cuicui/hooks/use-debounce/category.use-debounce.tsx
@@ -13,7 +13,6 @@ export const useDebounceCategory: SingleComponentCategoryType = {
 		previewScale: 1,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-09-16"),
 		sizePreview: "lg",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-event-callback/category.use-event-callback.tsx b/packages/ui/cuicui/hooks/use-event-callback/category.use-event-callback.tsx
index f8024a9a..6081bf62 100644
--- a/packages/ui/cuicui/hooks/use-event-callback/category.use-event-callback.tsx
+++ b/packages/ui/cuicui/hooks/use-event-callback/category.use-event-callback.tsx
@@ -13,7 +13,6 @@ export const useEventCallbackCategory: SingleComponentCategoryType = {
 		previewScale: 0.8,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-09-28"),
 		sizePreview: "sm",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-event-listener/category.use-event-listener.tsx b/packages/ui/cuicui/hooks/use-event-listener/category.use-event-listener.tsx
index 5a6e1ef8..9924ff9f 100644
--- a/packages/ui/cuicui/hooks/use-event-listener/category.use-event-listener.tsx
+++ b/packages/ui/cuicui/hooks/use-event-listener/category.use-event-listener.tsx
@@ -14,7 +14,6 @@ export const useEventListenerCategory: SingleComponentCategoryType = {
 		previewScale: 0.8,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-09-28"),
 		sizePreview: "sm",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-first-visit/category.use-first-visit.tsx b/packages/ui/cuicui/hooks/use-first-visit/category.use-first-visit.tsx
index 623ea15b..6d37c00b 100644
--- a/packages/ui/cuicui/hooks/use-first-visit/category.use-first-visit.tsx
+++ b/packages/ui/cuicui/hooks/use-first-visit/category.use-first-visit.tsx
@@ -14,7 +14,6 @@ export const useFirstVisitCategory: SingleComponentCategoryType = {
 		previewScale: 0.8,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-10-06"),
 		sizePreview: "md",
 		variantList: [
 			{
diff --git a/packages/ui/cuicui/hooks/use-geolocation/category-use-geolocation.tsx b/packages/ui/cuicui/hooks/use-geolocation/category-use-geolocation.tsx
index 4ba92b33..70528a6b 100644
--- a/packages/ui/cuicui/hooks/use-geolocation/category-use-geolocation.tsx
+++ b/packages/ui/cuicui/hooks/use-geolocation/category-use-geolocation.tsx
@@ -13,7 +13,6 @@ export const useGeoLocationCategory: SingleComponentCategoryType = {
 		previewScale: 0.8,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-09-28"),
 		sizePreview: "sm",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-in-view/category.use-in-view.tsx b/packages/ui/cuicui/hooks/use-in-view/category.use-in-view.tsx
index 18e165b4..3c192457 100644
--- a/packages/ui/cuicui/hooks/use-in-view/category.use-in-view.tsx
+++ b/packages/ui/cuicui/hooks/use-in-view/category.use-in-view.tsx
@@ -13,7 +13,6 @@ export const useInViewCategory: SingleComponentCategoryType = {
 		previewScale: 0.8,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-08-28"),
 		sizePreview: "lg",
 
 		isIframed: true,
diff --git a/packages/ui/cuicui/hooks/use-input-value/category.use-input-value.tsx b/packages/ui/cuicui/hooks/use-input-value/category.use-input-value.tsx
index ccb266d7..f88b7d84 100644
--- a/packages/ui/cuicui/hooks/use-input-value/category.use-input-value.tsx
+++ b/packages/ui/cuicui/hooks/use-input-value/category.use-input-value.tsx
@@ -12,7 +12,6 @@ export const useInputValueCategory: SingleComponentCategoryType = {
 		previewScale: 0.8,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-09-28"),
 		sizePreview: "sm",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-isomorphic-layout-effect/category.use-isomorphic-layout-effect.tsx b/packages/ui/cuicui/hooks/use-isomorphic-layout-effect/category.use-isomorphic-layout-effect.tsx
index 973b50be..88cef42c 100644
--- a/packages/ui/cuicui/hooks/use-isomorphic-layout-effect/category.use-isomorphic-layout-effect.tsx
+++ b/packages/ui/cuicui/hooks/use-isomorphic-layout-effect/category.use-isomorphic-layout-effect.tsx
@@ -14,7 +14,6 @@ export const useIsomorphicLayoutEffectCategory: SingleComponentCategoryType = {
 		previewScale: 0.8,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-09-28"),
 		sizePreview: "sm",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-key-press/category.use-key-press.tsx b/packages/ui/cuicui/hooks/use-key-press/category.use-key-press.tsx
index c0c6892e..77a5b99f 100644
--- a/packages/ui/cuicui/hooks/use-key-press/category.use-key-press.tsx
+++ b/packages/ui/cuicui/hooks/use-key-press/category.use-key-press.tsx
@@ -14,7 +14,6 @@ export const useKeyPressCategory: SingleComponentCategoryType = {
 		previewScale: 0.8,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-09-28"),
 		sizePreview: "sm",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-konami-code/category.use-konami-code.tsx b/packages/ui/cuicui/hooks/use-konami-code/category.use-konami-code.tsx
index a0a399dc..f8e63383 100644
--- a/packages/ui/cuicui/hooks/use-konami-code/category.use-konami-code.tsx
+++ b/packages/ui/cuicui/hooks/use-konami-code/category.use-konami-code.tsx
@@ -14,7 +14,6 @@ export const useKonamiCodeCategory: SingleComponentCategoryType = {
 		previewScale: 0.8,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-09-28"),
 		sizePreview: "sm",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-local-storage/category.use-local-storage.tsx b/packages/ui/cuicui/hooks/use-local-storage/category.use-local-storage.tsx
index 79f709b1..f2ff7f4c 100644
--- a/packages/ui/cuicui/hooks/use-local-storage/category.use-local-storage.tsx
+++ b/packages/ui/cuicui/hooks/use-local-storage/category.use-local-storage.tsx
@@ -14,7 +14,6 @@ export const useLocalStorageCategory: SingleComponentCategoryType = {
 		previewScale: 0.8,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-09-28"),
 		sizePreview: "sm",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-location/category.use-location.tsx b/packages/ui/cuicui/hooks/use-location/category.use-location.tsx
index db6e3bce..4c3cf143 100644
--- a/packages/ui/cuicui/hooks/use-location/category.use-location.tsx
+++ b/packages/ui/cuicui/hooks/use-location/category.use-location.tsx
@@ -15,7 +15,7 @@ export const useLocationCategory: SingleComponentCategoryType = {
 	},
 	component: {
 		isResizable: true,
-		lastUpdatedDateComponent: new Date("2024-09-28"),
+
 		sizePreview: "xl",
 		variantList: [
 			{
diff --git a/packages/ui/cuicui/hooks/use-measure/category.use-measure.tsx b/packages/ui/cuicui/hooks/use-measure/category.use-measure.tsx
index a7d9c903..8cddab3a 100644
--- a/packages/ui/cuicui/hooks/use-measure/category.use-measure.tsx
+++ b/packages/ui/cuicui/hooks/use-measure/category.use-measure.tsx
@@ -14,7 +14,6 @@ export const useMeasureCategory: SingleComponentCategoryType = {
 		previewScale: 0.8,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-10-15"),
 		sizePreview: "sm",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-mouse/component.use-mouse.tsx b/packages/ui/cuicui/hooks/use-mouse/component.use-mouse.tsx
index 4b2325e3..e3fd9a37 100644
--- a/packages/ui/cuicui/hooks/use-mouse/component.use-mouse.tsx
+++ b/packages/ui/cuicui/hooks/use-mouse/component.use-mouse.tsx
@@ -1,10 +1,8 @@
-import type { ComponentType } from "@/lib/types/component";
+import type { ComponentType, SingleComponentType } from "@/lib/types/component";
 import PreviewUseMouse from "@/cuicui/hooks/use-mouse/preview-use-mouse";
 
-export const useMouseComponent: ComponentType = {
+export const useMouseComponent: SingleComponentType = {
 	sizePreview: "xs",
-	slug: "hook",
-
 	variantList: [
 		{
 			name: "Default",
@@ -13,7 +11,4 @@ export const useMouseComponent: ComponentType = {
 			slugComponentFile: "use-mouse",
 		},
 	],
-	name: "Use Mouse",
-	description: "A simple hook to get the mouse position.",
-	lastUpdatedDateComponent: new Date("2024-09-27"),
 };
diff --git a/packages/ui/cuicui/hooks/use-network-status/category.use-network.tsx b/packages/ui/cuicui/hooks/use-network-status/category.use-network.tsx
index 66e14d8f..33dc36ec 100644
--- a/packages/ui/cuicui/hooks/use-network-status/category.use-network.tsx
+++ b/packages/ui/cuicui/hooks/use-network-status/category.use-network.tsx
@@ -14,7 +14,7 @@ export const useNetworkCategory: SingleComponentCategoryType = {
 	},
 	component: {
 		rerenderButton: true,
-		lastUpdatedDateComponent: new Date("2024-09-16"),
+
 		sizePreview: "lg",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-online-status/category.use-online-status.tsx b/packages/ui/cuicui/hooks/use-online-status/category.use-online-status.tsx
index 246e7b85..1ca3f057 100644
--- a/packages/ui/cuicui/hooks/use-online-status/category.use-online-status.tsx
+++ b/packages/ui/cuicui/hooks/use-online-status/category.use-online-status.tsx
@@ -14,7 +14,6 @@ export const useOnlineStatusCategory: SingleComponentCategoryType = {
 		previewScale: 0.8,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-09-28"),
 		sizePreview: "sm",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-rerender/component.use-rerender.tsx b/packages/ui/cuicui/hooks/use-rerender/component.use-rerender.tsx
index dd33a9c2..78578f51 100644
--- a/packages/ui/cuicui/hooks/use-rerender/component.use-rerender.tsx
+++ b/packages/ui/cuicui/hooks/use-rerender/component.use-rerender.tsx
@@ -14,7 +14,6 @@ export const useRerenderCategory: SingleComponentCategoryType = {
 		previewScale: 0.8,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-09-28"),
 		sizePreview: "sm",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-step/category.use-step.tsx b/packages/ui/cuicui/hooks/use-step/category.use-step.tsx
index 6b6a06e3..3108edf7 100644
--- a/packages/ui/cuicui/hooks/use-step/category.use-step.tsx
+++ b/packages/ui/cuicui/hooks/use-step/category.use-step.tsx
@@ -10,7 +10,7 @@ export const useStepCategory: SingleComponentCategoryType = {
 	icon: ListEndIcon,
 	component: {
 		rerenderButton: true,
-		lastUpdatedDateComponent: new Date("2024-09-26"),
+
 		sizePreview: "md",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-stopwatch/category.use-stopwatch.tsx b/packages/ui/cuicui/hooks/use-stopwatch/category.use-stopwatch.tsx
index dbbc862f..a13c4e2d 100644
--- a/packages/ui/cuicui/hooks/use-stopwatch/category.use-stopwatch.tsx
+++ b/packages/ui/cuicui/hooks/use-stopwatch/category.use-stopwatch.tsx
@@ -14,7 +14,6 @@ export const useStopwatchCategory: SingleComponentCategoryType = {
 		previewScale: 0.8,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-09-28"),
 		sizePreview: "sm",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-text-to-speech/category.use-text-to-speech.tsx b/packages/ui/cuicui/hooks/use-text-to-speech/category.use-text-to-speech.tsx
index 81fef07a..5e07dfa7 100644
--- a/packages/ui/cuicui/hooks/use-text-to-speech/category.use-text-to-speech.tsx
+++ b/packages/ui/cuicui/hooks/use-text-to-speech/category.use-text-to-speech.tsx
@@ -15,7 +15,6 @@ export const useTextToSpeechCategory: SingleComponentCategoryType = {
 		previewScale: 0.8,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-10-06"),
 		sizePreview: "lg",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-throttle/category.use-throttle.tsx b/packages/ui/cuicui/hooks/use-throttle/category.use-throttle.tsx
index dc99564a..84e2190a 100644
--- a/packages/ui/cuicui/hooks/use-throttle/category.use-throttle.tsx
+++ b/packages/ui/cuicui/hooks/use-throttle/category.use-throttle.tsx
@@ -14,7 +14,6 @@ export const useThrottleCategory: SingleComponentCategoryType = {
 		previewScale: 0.8,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-09-28"),
 		sizePreview: "sm",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-video/category.use-video.tsx b/packages/ui/cuicui/hooks/use-video/category.use-video.tsx
index b8432e88..f648ceb5 100644
--- a/packages/ui/cuicui/hooks/use-video/category.use-video.tsx
+++ b/packages/ui/cuicui/hooks/use-video/category.use-video.tsx
@@ -14,7 +14,6 @@ export const useVideoCategory: SingleComponentCategoryType = {
 		previewScale: 0.8,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-10-06"),
 		sizePreview: "md",
 		variantList: [
 			{
diff --git a/packages/ui/cuicui/hooks/use-window-scroll-position/category.use-window-scroll-postion.tsx b/packages/ui/cuicui/hooks/use-window-scroll-position/category.use-window-scroll-postion.tsx
index d91f2465..1d2ccfe3 100644
--- a/packages/ui/cuicui/hooks/use-window-scroll-position/category.use-window-scroll-postion.tsx
+++ b/packages/ui/cuicui/hooks/use-window-scroll-position/category.use-window-scroll-postion.tsx
@@ -13,7 +13,6 @@ export const useWindowScrollPositionCategory: SingleComponentCategoryType = {
 		previewScale: 0.8,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-09-28"),
 		sizePreview: "sm",
 
 		variantList: [
diff --git a/packages/ui/cuicui/hooks/use-window-size/category.use-window-size.tsx b/packages/ui/cuicui/hooks/use-window-size/category.use-window-size.tsx
index 013d2b69..598dae63 100644
--- a/packages/ui/cuicui/hooks/use-window-size/category.use-window-size.tsx
+++ b/packages/ui/cuicui/hooks/use-window-size/category.use-window-size.tsx
@@ -13,7 +13,6 @@ export const useWindowSizeCategory: SingleComponentCategoryType = {
 		previewScale: 0.8,
 	},
 	component: {
-		lastUpdatedDateComponent: new Date("2024-08-28"),
 		sizePreview: "sm",
 
 		variantList: [
diff --git a/packages/ui/cuicui/marketing-ui/carousels/category.carousels.tsx b/packages/ui/cuicui/marketing-ui/carousels/category.carousels.tsx
index aa52023a..b071e7f7 100644
--- a/packages/ui/cuicui/marketing-ui/carousels/category.carousels.tsx
+++ b/packages/ui/cuicui/marketing-ui/carousels/category.carousels.tsx
@@ -20,7 +20,6 @@ export const carouselsCategory: CategoryType = {
 				"A simple carousel that allows you to navigate through multiple images or products.",
 			sizePreview: "md",
 			slug: "simple-carousel",
-			lastUpdatedDateComponent: new Date("2024-09-10"),
 
 			variantList: [
 				{
@@ -33,7 +32,7 @@ export const carouselsCategory: CategoryType = {
 		},
 		{
 			name: "Cylindric 3D Carousel",
-			lastUpdatedDateComponent: new Date("2024-08-10"),
+
 			description:
 				"A 3D carousel that rotates in a cylindrical way. It's perfect for showcasing multiple images or products.",
 			sizePreview: "md",
diff --git a/packages/ui/cuicui/marketing-ui/faq/full-section/component.full-section.tsx b/packages/ui/cuicui/marketing-ui/faq/full-section/component.full-section.tsx
index 8438b8d2..fbb1e6d3 100644
--- a/packages/ui/cuicui/marketing-ui/faq/full-section/component.full-section.tsx
+++ b/packages/ui/cuicui/marketing-ui/faq/full-section/component.full-section.tsx
@@ -4,7 +4,7 @@ import type { ComponentType } from "@/lib/types/component";
 export const FullSectionFaqComponent: ComponentType = {
 	name: "Full Section FAQ",
 	description: "A full section FAQ component for your projects.",
-	lastUpdatedDateComponent: new Date("2024-01-11"),
+
 	isResizable: true,
 	slug: "full-section",
 	sizePreview: "md",
diff --git a/packages/ui/cuicui/marketing-ui/faq/gradient-qna/component.gradient-qna.tsx b/packages/ui/cuicui/marketing-ui/faq/gradient-qna/component.gradient-qna.tsx
index 64efcfd1..f5ea5e6d 100644
--- a/packages/ui/cuicui/marketing-ui/faq/gradient-qna/component.gradient-qna.tsx
+++ b/packages/ui/cuicui/marketing-ui/faq/gradient-qna/component.gradient-qna.tsx
@@ -4,7 +4,6 @@ import DoubleContainerGradientQna from "@/cuicui/marketing-ui/faq/gradient-qna/d
 import SimpleContainerGradientQna from "@/cuicui/marketing-ui/faq/gradient-qna/simple-container";
 
 export const gradientQnaComponent: ComponentType = {
-	lastUpdatedDateComponent: new Date("2024-07-17"),
 	sizePreview: "lg",
 	slug: "gradient-qna",
 	name: "Gradient Q&A",
diff --git a/packages/ui/cuicui/marketing-ui/features/category.features.tsx b/packages/ui/cuicui/marketing-ui/features/category.features.tsx
index ce40fb2f..54dba8c7 100644
--- a/packages/ui/cuicui/marketing-ui/features/category.features.tsx
+++ b/packages/ui/cuicui/marketing-ui/features/category.features.tsx
@@ -18,7 +18,6 @@ export const featuresCategory: CategoryType = {
 		{
 			name: "Feature Four Images",
 
-			lastUpdatedDateComponent: new Date("2024-06-17"),
 			description:
 				"An auto-scrolling feature section with four images and text. It could be also used with videos or other content. Perfect to shocase in details multiple features of a product or service.",
 			sizePreview: "md",
@@ -39,7 +38,7 @@ export const featuresCategory: CategoryType = {
 		},
 		{
 			name: "Simple feature cards",
-			lastUpdatedDateComponent: new Date("2024-06-17"),
+
 			description:
 				"Simple feature cards with icons, text, and buttons. Perfect for micro-interactions and lists of features.",
 			sizePreview: "sm",
diff --git a/packages/ui/cuicui/marketing-ui/pricing-tables/gradient/component.gradient-pricing-table.tsx b/packages/ui/cuicui/marketing-ui/pricing-tables/gradient/component.gradient-pricing-table.tsx
index 7081dbd3..32493dad 100644
--- a/packages/ui/cuicui/marketing-ui/pricing-tables/gradient/component.gradient-pricing-table.tsx
+++ b/packages/ui/cuicui/marketing-ui/pricing-tables/gradient/component.gradient-pricing-table.tsx
@@ -3,7 +3,7 @@ import PreviewGradient from "@/cuicui/marketing-ui/pricing-tables/gradient/previ
 
 export const gradientPricingTableComponent: ComponentType = {
 	name: "Gradient Pricing Table",
-	lastUpdatedDateComponent: new Date("2024-10-06"),
+
 	description: "Simple 3 offers pricing page with gradient background.",
 	sizePreview: "xl",
 	slug: "gradient",
diff --git a/packages/ui/cuicui/marketing-ui/pricing-tables/many-offers/component.artlist-inspired.tsx b/packages/ui/cuicui/marketing-ui/pricing-tables/many-offers/component.artlist-inspired.tsx
index 9b686a13..2f6a1f0e 100644
--- a/packages/ui/cuicui/marketing-ui/pricing-tables/many-offers/component.artlist-inspired.tsx
+++ b/packages/ui/cuicui/marketing-ui/pricing-tables/many-offers/component.artlist-inspired.tsx
@@ -2,7 +2,6 @@ import type { ComponentType } from "@/lib/types/component";
 import ManyOffersVariant1 from "@/cuicui/marketing-ui/pricing-tables/many-offers/preview.artlist-inspired";
 
 export const artlistInspiredPricingTableComponent: ComponentType = {
-	lastUpdatedDateComponent: new Date("2024-08-01"),
 	sizePreview: "lg",
 	slug: "many-offers",
 	name: "Pricing with many offers",
diff --git a/packages/ui/cuicui/marketing-ui/statistics/category.statistics.tsx b/packages/ui/cuicui/marketing-ui/statistics/category.statistics.tsx
index c9a055a3..4984e233 100644
--- a/packages/ui/cuicui/marketing-ui/statistics/category.statistics.tsx
+++ b/packages/ui/cuicui/marketing-ui/statistics/category.statistics.tsx
@@ -16,7 +16,6 @@ export const statisticsCategory: CategoryType = {
 	},
 	componentList: [
 		{
-			lastUpdatedDateComponent: new Date("2024-08-11"),
 			sizePreview: "sm",
 			slug: "animated-on-scroll",
 			isIframed: true,
@@ -32,7 +31,6 @@ export const statisticsCategory: CategoryType = {
 			],
 		},
 		{
-			lastUpdatedDateComponent: new Date("2024-08-11"),
 			sizePreview: "sm",
 			slug: "increase-to-value",
 			rerenderButton: true,
@@ -47,7 +45,6 @@ export const statisticsCategory: CategoryType = {
 			],
 		},
 		{
-			lastUpdatedDateComponent: new Date("2024-09-10"),
 			sizePreview: "sm",
 			slug: "animated-counter",
 			rerenderButton: true,
diff --git a/packages/ui/cuicui/marketing-ui/testimonials/category.testimonials.tsx b/packages/ui/cuicui/marketing-ui/testimonials/category.testimonials.tsx
index e269df5a..453457f7 100644
--- a/packages/ui/cuicui/marketing-ui/testimonials/category.testimonials.tsx
+++ b/packages/ui/cuicui/marketing-ui/testimonials/category.testimonials.tsx
@@ -18,7 +18,7 @@ export const testimonialsCategory: CategoryType = {
 	componentList: [
 		{
 			isResizable: true,
-			lastUpdatedDateComponent: new Date("2024-07-17"),
+
 			sizePreview: "md",
 			slug: "testimonials-component",
 			name: "Testimonials",
@@ -32,7 +32,6 @@ export const testimonialsCategory: CategoryType = {
 			],
 		},
 		{
-			lastUpdatedDateComponent: new Date("2024-07-17"),
 			sizePreview: "sm",
 			slug: "marquee",
 			name: "Marquee",
diff --git a/packages/ui/cuicui/other/creative-effects/animated-noise/animated-noise.tsx b/packages/ui/cuicui/other/creative-effects/animated-noise/animated-noise.tsx
index 471d98cd..ec41e36a 100644
--- a/packages/ui/cuicui/other/creative-effects/animated-noise/animated-noise.tsx
+++ b/packages/ui/cuicui/other/creative-effects/animated-noise/animated-noise.tsx
@@ -1,11 +1,12 @@
 import { cn } from "@/cuicui/utils/cn/cn";
-import type { HTMLAttributes } from "react";
+import type { ComponentProps } from "react";
 
-export default function AnimatedNoise({
+export function AnimatedNoise({
 	opacity,
 	className,
+	backgroundSize = "400px",
 	...props
-}: { opacity: number } & HTMLAttributes<HTMLDivElement>) {
+}: { opacity: number; backgroundSize?: string } & ComponentProps<"div">) {
 	return (
 		<>
 			<style>{style}</style>
@@ -18,7 +19,7 @@ export default function AnimatedNoise({
 					animation: "noise .8s steps(10) infinite",
 					backgroundRepeat: "repeat",
 					backgroundImage: svgUrlEncoded,
-					backgroundSize: "20%",
+					backgroundSize: backgroundSize,
 					opacity,
 				}}
 				{...props}
@@ -66,4 +67,4 @@ const style = `
     transform: translate(50px, -60px);
   }
 }
-  `;
+`;
diff --git a/packages/ui/cuicui/other/creative-effects/animated-noise/component.animated-noise.tsx b/packages/ui/cuicui/other/creative-effects/animated-noise/component.animated-noise.tsx
index 6af638f1..aed28e8e 100644
--- a/packages/ui/cuicui/other/creative-effects/animated-noise/component.animated-noise.tsx
+++ b/packages/ui/cuicui/other/creative-effects/animated-noise/component.animated-noise.tsx
@@ -22,5 +22,4 @@ export const animatedNoiseComponent: ComponentType = {
 			component: <PreviewStaticNoise />,
 		},
 	],
-	lastUpdatedDateComponent: new Date("2024-10-14"),
 };
diff --git a/packages/ui/cuicui/other/creative-effects/animated-noise/preview.animated-noise.tsx b/packages/ui/cuicui/other/creative-effects/animated-noise/preview.animated-noise.tsx
index 05b47999..d3857c2c 100644
--- a/packages/ui/cuicui/other/creative-effects/animated-noise/preview.animated-noise.tsx
+++ b/packages/ui/cuicui/other/creative-effects/animated-noise/preview.animated-noise.tsx
@@ -1,16 +1,9 @@
-import AnimatedNoise from "@/cuicui/other/creative-effects/animated-noise/animated-noise";
-import GridPattern from "@/cuicui/other/patterns/grid-pattern/grid-pattern";
+import { AnimatedNoise } from "@/cuicui/other/creative-effects/animated-noise/animated-noise";
 
 export default function PreviewAnimatedNoise() {
 	return (
-		<div className="relative h-full w-full">
+		<div className="relative h-full w-full overflow-hidden">
 			<AnimatedNoise opacity={0.1} />
-			<section className="font-semibold h-full w-full  bg-gradient-to-t dark:to-gray-800 dark:from-gray-950 to-gray-50 from-white flex flex-col items-center justify-center dark:text-white text-black">
-				<GridPattern />
-				<p className="text-4xl px-8 font-semibold text-center tracking-tight">
-					Animated noise effect with svg only
-				</p>
-			</section>
 		</div>
 	);
 }
diff --git a/packages/ui/cuicui/other/creative-effects/animated-noise/preview.static-noise.tsx b/packages/ui/cuicui/other/creative-effects/animated-noise/preview.static-noise.tsx
index a54c4330..dc17d396 100644
--- a/packages/ui/cuicui/other/creative-effects/animated-noise/preview.static-noise.tsx
+++ b/packages/ui/cuicui/other/creative-effects/animated-noise/preview.static-noise.tsx
@@ -1,4 +1,4 @@
-import StaticNoise from "@/cuicui/other/creative-effects/animated-noise/static-noise";
+import { StaticNoise } from "@/cuicui/other/creative-effects/animated-noise/static-noise";
 import GridPattern from "@/cuicui/other/patterns/grid-pattern/grid-pattern";
 
 export default function PreviewStaticNoise() {
diff --git a/packages/ui/cuicui/other/creative-effects/animated-noise/static-noise.tsx b/packages/ui/cuicui/other/creative-effects/animated-noise/static-noise.tsx
index 3bd9dda3..b015cff3 100644
--- a/packages/ui/cuicui/other/creative-effects/animated-noise/static-noise.tsx
+++ b/packages/ui/cuicui/other/creative-effects/animated-noise/static-noise.tsx
@@ -1,21 +1,21 @@
 import { cn } from "@/cuicui/utils/cn/cn";
-import type { HTMLAttributes } from "react";
+import type { ComponentProps } from "react";
 
-export default function StaticNoise({
+export function StaticNoise({
 	opacity,
 	className,
+	backgroundSize = "400px",
 	...props
-}: { opacity: number } & HTMLAttributes<HTMLDivElement>) {
+}: { opacity: number; backgroundSize?: string } & ComponentProps<"div">) {
 	return (
 		<div
 			className={cn(
-				"absolute bg-noise inset-0 z-40 pointer-events-none select-none",
+				"absolute inset-0 z-40 pointer-events-none select-none repeat-infinite invert dark:invert-0",
 				className,
 			)}
 			style={{
-				backgroundRepeat: "repeat",
 				backgroundImage: svgUrlEncoded,
-				backgroundSize: "20%",
+				backgroundSize: backgroundSize,
 				opacity,
 			}}
 			{...props}
diff --git a/packages/ui/cuicui/other/creative-effects/border-trail/component.animated-noise.tsx b/packages/ui/cuicui/other/creative-effects/border-trail/component.animated-noise.tsx
index 43235271..06cda11e 100644
--- a/packages/ui/cuicui/other/creative-effects/border-trail/component.animated-noise.tsx
+++ b/packages/ui/cuicui/other/creative-effects/border-trail/component.animated-noise.tsx
@@ -15,5 +15,4 @@ export const borderTrailComponent: ComponentType = {
 			component: <PreviewBorderTrail />,
 		},
 	],
-	lastUpdatedDateComponent: new Date("2024-10-15"),
 };
diff --git a/packages/ui/cuicui/other/creative-effects/bottom-blur-out/component.bottom-blur-out.tsx b/packages/ui/cuicui/other/creative-effects/bottom-blur-out/component.bottom-blur-out.tsx
index 059cc705..8bdea694 100644
--- a/packages/ui/cuicui/other/creative-effects/bottom-blur-out/component.bottom-blur-out.tsx
+++ b/packages/ui/cuicui/other/creative-effects/bottom-blur-out/component.bottom-blur-out.tsx
@@ -17,5 +17,4 @@ export const bottomBlurOutComponent: ComponentType = {
 			slugComponentFile: "bottom-blur-out",
 		},
 	],
-	lastUpdatedDateComponent: new Date("2024-10-14"),
 };
diff --git a/packages/ui/cuicui/other/creative-effects/category.creative-effet.tsx b/packages/ui/cuicui/other/creative-effects/category.creative-effet.tsx
index 61060ea8..7f3680b5 100644
--- a/packages/ui/cuicui/other/creative-effects/category.creative-effet.tsx
+++ b/packages/ui/cuicui/other/creative-effects/category.creative-effet.tsx
@@ -4,6 +4,7 @@ import PreviewBottomBlurOut from "@/cuicui/other/creative-effects/bottom-blur-ou
 import { bottomBlurOutComponent } from "@/cuicui/other/creative-effects/bottom-blur-out/component.bottom-blur-out";
 import { animatedNoiseComponent } from "@/cuicui/other/creative-effects/animated-noise/component.animated-noise";
 import { borderTrailComponent } from "@/cuicui/other/creative-effects/border-trail/component.animated-noise";
+import { WavyLineComponent } from "@/cuicui/other/creative-effects/wavy-line/definition.wavy-line";
 
 export const creativeEffectCategory: CategoryType = {
 	slug: "creative-effects",
@@ -20,5 +21,6 @@ export const creativeEffectCategory: CategoryType = {
 		animatedNoiseComponent,
 		borderTrailComponent,
 		bottomBlurOutComponent,
+		WavyLineComponent,
 	],
 };
diff --git a/packages/ui/cuicui/other/creative-effects/wavy-line/definition.wavy-line.tsx b/packages/ui/cuicui/other/creative-effects/wavy-line/definition.wavy-line.tsx
new file mode 100644
index 00000000..90094cda
--- /dev/null
+++ b/packages/ui/cuicui/other/creative-effects/wavy-line/definition.wavy-line.tsx
@@ -0,0 +1,17 @@
+import { PreviewWavyLine } from "@/cuicui/other/creative-effects/wavy-line/preview.wavy-line";
+import type { ComponentType } from "@/lib/types/component";
+
+export const WavyLineComponent: ComponentType = {
+	slug: "wavy-line",
+	name: "Wavy Line",
+	description: "A wavy line that follows the mouse movement",
+	// Define the component to be lazy loaded
+	variantList: [
+		{
+			name: "Wavy Line",
+			component: <PreviewWavyLine />,
+			slugComponentFile: "wavy-line",
+			slugPreviewFile: "preview.wavy-line",
+		},
+	],
+};
diff --git a/packages/ui/cuicui/other/creative-effects/wavy-line/preview.wavy-line.tsx b/packages/ui/cuicui/other/creative-effects/wavy-line/preview.wavy-line.tsx
new file mode 100644
index 00000000..77a5d5e4
--- /dev/null
+++ b/packages/ui/cuicui/other/creative-effects/wavy-line/preview.wavy-line.tsx
@@ -0,0 +1,5 @@
+import { WavyLine } from "@/cuicui/other/creative-effects/wavy-line/wavy-line";
+
+export const PreviewWavyLine = () => {
+	return <WavyLine className="w-1/2" />;
+};
diff --git a/packages/ui/cuicui/other/creative-effects/wavy-line/wavy-line.tsx b/packages/ui/cuicui/other/creative-effects/wavy-line/wavy-line.tsx
new file mode 100644
index 00000000..52c95d9e
--- /dev/null
+++ b/packages/ui/cuicui/other/creative-effects/wavy-line/wavy-line.tsx
@@ -0,0 +1,115 @@
+"use client";
+import { cn } from "@/cuicui/utils/cn/cn";
+import { useRef, useEffect, type ComponentProps } from "react";
+
+interface MouseEvent {
+	movementY: number;
+	clientX: number;
+}
+
+export function WavyLine({ className, ...props }: ComponentProps<"div">) {
+	const path = useRef<SVGPathElement>(null);
+	const parentRef = useRef<HTMLDivElement>(null);
+
+	let progress = 0;
+	let x = 0.5;
+	let time = Math.PI / 2;
+	let reqId: number | null = null;
+
+	// Use the useEffect hook to set the path on component mount
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <Need to run only once>
+	useEffect(() => {
+		setSvgPath(progress);
+	}, []);
+
+	const setSvgPath = (progress: number) => {
+		const width = parentRef.current?.clientWidth ?? window.innerWidth * 1;
+
+		// Set the "d" attribute of the SVG path element using a quadratic Bézier curve
+		path.current?.setAttributeNS(
+			null,
+			"d",
+			`M0 50 Q${width * x} ${50 + progress}, ${width} 50`,
+		);
+	};
+
+	// Define a linear interpolation function
+	const lerp = (x: number, y: number, a: number) => x * (1 - a) + y * a;
+
+	// Define a function to handle mouse enter events
+	const handleMouseEnter = () => {
+		// If there is an animation frame request, cancel it and reset the animation
+		if (reqId) {
+			cancelAnimationFrame(reqId);
+			resetAnimation();
+		}
+	};
+
+	const handleMouseMove = (e: MouseEvent) => {
+		// Get the movementY and clientX properties from the event object
+		const { movementY, clientX } = e;
+
+		// Get the bounding rectangle of the SVG path element
+		const pathBound = path.current?.getBoundingClientRect();
+
+		// If the bounding rectangle exists, update x and progress and set the path
+		if (pathBound) {
+			x = (clientX - pathBound.left) / pathBound.width;
+			progress += movementY;
+			setSvgPath(progress);
+		}
+	};
+
+	const handleMouseLeave = () => {
+		animateOut();
+	};
+
+	// Define a function to animate out
+	const animateOut = () => {
+		// Calculate newProgress using sine of time
+		const newProgress = progress * Math.sin(time);
+
+		// Update progress using linear interpolation towards zero
+		progress = lerp(progress, 0, 0.025);
+
+		time += 0.2;
+
+		// Set the path using newProgress
+		setSvgPath(newProgress);
+
+		// If progress is greater than a threshold, request another animation frame,
+		// otherwise reset the animation.
+		if (Math.abs(progress) > 0.75) {
+			reqId = requestAnimationFrame(animateOut);
+		} else {
+			resetAnimation();
+		}
+	};
+
+	const resetAnimation = () => {
+		time = Math.PI / 2;
+		progress = 0;
+	};
+
+	return (
+		<div
+			className={cn("relative w-full h-px", className)}
+			{...props}
+			ref={parentRef}
+		>
+			<div
+				className="relative z-10 h-10 -top-5 w-full"
+				onMouseEnter={handleMouseEnter}
+				onMouseMove={handleMouseMove}
+				onMouseLeave={handleMouseLeave}
+			/>
+			<svg className="absolute w-full h-[100px] -top-[50px]">
+				<title>Wavy Line</title>
+				<path
+					ref={path}
+					className="stroke-current dark:text-neutral-200 text-neutral-800 stroke-[1px] fill-none"
+				/>
+			</svg>
+		</div>
+	);
+}
diff --git a/packages/ui/cuicui/other/cursors/dynamic-cards/card-hover-cursor-effect.component.tsx b/packages/ui/cuicui/other/cursors/dynamic-cards/card-hover-cursor-effect.component.tsx
index 38c46634..f4afdb94 100644
--- a/packages/ui/cuicui/other/cursors/dynamic-cards/card-hover-cursor-effect.component.tsx
+++ b/packages/ui/cuicui/other/cursors/dynamic-cards/card-hover-cursor-effect.component.tsx
@@ -25,5 +25,4 @@ export const cardHoverCursorEffectComponent: ComponentType = {
 		},
 	],
 	componentBadges: ["prefer-desktop"],
-	lastUpdatedDateComponent: new Date("2024-09-27"),
 };
diff --git a/packages/ui/cuicui/other/cursors/follow-cursor/follow-cursor.component.tsx b/packages/ui/cuicui/other/cursors/follow-cursor/follow-cursor.component.tsx
index 88b5d47e..5e95fe98 100644
--- a/packages/ui/cuicui/other/cursors/follow-cursor/follow-cursor.component.tsx
+++ b/packages/ui/cuicui/other/cursors/follow-cursor/follow-cursor.component.tsx
@@ -23,5 +23,4 @@ export const followCursorComponent: ComponentType = {
 		},
 	],
 	componentBadges: ["prefer-desktop"],
-	lastUpdatedDateComponent: new Date("2024-08-14"),
 };
diff --git a/packages/ui/cuicui/other/mock-ups/mock-ups.category.tsx b/packages/ui/cuicui/other/mock-ups/mock-ups.category.tsx
index ffa21618..b34a507d 100644
--- a/packages/ui/cuicui/other/mock-ups/mock-ups.category.tsx
+++ b/packages/ui/cuicui/other/mock-ups/mock-ups.category.tsx
@@ -39,7 +39,6 @@ export const mockUpsCategory: CategoryType = {
 			],
 			inspiration: "Devices CSS",
 			inspirationLink: "https://devicescss.xyz/phones.html#google-pixel-6-pro",
-			lastUpdatedDateComponent: new Date("2024-08-14"),
 		},
 		{
 			sizePreview: "lg",
@@ -57,12 +56,11 @@ export const mockUpsCategory: CategoryType = {
 			],
 			inspiration: "Devices CSS",
 			inspirationLink: "https://devicescss.xyz/laptops.html#macbook-pro",
-			lastUpdatedDateComponent: new Date("2024-08-14"),
 		},
 		{
 			sizePreview: "sm",
 			slug: "airpods",
-			lastUpdatedDateComponent: new Date("2024-09-10"),
+
 			name: "Airpods mock-up",
 			description:
 				"Create a airpods mock-up with CSS and HTML for better performance",
diff --git a/packages/ui/cuicui/other/patterns/grid-pattern/component.grid-pattern.tsx b/packages/ui/cuicui/other/patterns/grid-pattern/component.grid-pattern.tsx
index 376ec1f3..43624a9e 100644
--- a/packages/ui/cuicui/other/patterns/grid-pattern/component.grid-pattern.tsx
+++ b/packages/ui/cuicui/other/patterns/grid-pattern/component.grid-pattern.tsx
@@ -15,5 +15,4 @@ export const gridPatternComponent: ComponentType = {
 			slugPreviewFile: "grid-pattern",
 		},
 	],
-	lastUpdatedDateComponent: new Date("2024-10-15"),
 };
diff --git a/packages/ui/cuicui/other/patterns/patterns.category.tsx b/packages/ui/cuicui/other/patterns/patterns.category.tsx
index 2c48f96e..745bec9f 100644
--- a/packages/ui/cuicui/other/patterns/patterns.category.tsx
+++ b/packages/ui/cuicui/other/patterns/patterns.category.tsx
@@ -31,13 +31,12 @@ export const patternsCategory: CategoryType = {
 			],
 			inspiration: "Magic UI",
 			inspirationLink: "https://magicui.design/docs/components/dot-pattern",
-			lastUpdatedDateComponent: new Date("2024-08-10"),
 		},
 		gridPatternComponent,
 		{
 			sizePreview: "sm",
 			slug: "moving-bands",
-			lastUpdatedDateComponent: new Date("2024-09-10"),
+
 			name: "Moving bands pattern",
 			description:
 				"Create a moving bands pattern without images, just with CSS and HTML for better performance.",
diff --git a/packages/ui/cuicui/other/qr-code/bar-code-generator/bar-code-generator.component.tsx b/packages/ui/cuicui/other/qr-code/bar-code-generator/bar-code-generator.component.tsx
index 19129e55..e186ce76 100644
--- a/packages/ui/cuicui/other/qr-code/bar-code-generator/bar-code-generator.component.tsx
+++ b/packages/ui/cuicui/other/qr-code/bar-code-generator/bar-code-generator.component.tsx
@@ -15,6 +15,4 @@ export const BarCodeGeneratorComponent: ComponentType = {
 			name: "Bar Code Generator",
 		},
 	],
-
-	lastUpdatedDateComponent: new Date("2024-09-14"),
 };
diff --git a/packages/ui/cuicui/other/qr-code/qr-code-generator/qr-code-generator.component.tsx b/packages/ui/cuicui/other/qr-code/qr-code-generator/qr-code-generator.component.tsx
index b3b76ac2..9bf20464 100644
--- a/packages/ui/cuicui/other/qr-code/qr-code-generator/qr-code-generator.component.tsx
+++ b/packages/ui/cuicui/other/qr-code/qr-code-generator/qr-code-generator.component.tsx
@@ -12,5 +12,4 @@ export const QrCodeGeneratorComponent: ComponentType = {
 	],
 	name: "QR Code Generator",
 	description: "A QR code generator component using qrcode.react",
-	lastUpdatedDateComponent: new Date("2024-09-14"),
 };
diff --git a/packages/ui/cuicui/other/transition-wrappers/slide-in-on-scroll/slide-in-on-scroll.component.tsx b/packages/ui/cuicui/other/transition-wrappers/slide-in-on-scroll/slide-in-on-scroll.component.tsx
index a79a76ff..47799847 100644
--- a/packages/ui/cuicui/other/transition-wrappers/slide-in-on-scroll/slide-in-on-scroll.component.tsx
+++ b/packages/ui/cuicui/other/transition-wrappers/slide-in-on-scroll/slide-in-on-scroll.component.tsx
@@ -16,6 +16,6 @@ export const SlideInOnScrollComponent: ComponentType = {
 			slugComponentFile: "slide-in-on-scroll",
 		},
 	],
-	lastUpdatedDateComponent: new Date("2024-09-21"),
+
 	// supportedBrowers: ["chromium"],
 };
diff --git a/packages/ui/cuicui/other/transition-wrappers/text-effect-wrapper/component.text-effect-wrapper.tsx b/packages/ui/cuicui/other/transition-wrappers/text-effect-wrapper/component.text-effect-wrapper.tsx
index 38ab2efd..0d9dbe0a 100644
--- a/packages/ui/cuicui/other/transition-wrappers/text-effect-wrapper/component.text-effect-wrapper.tsx
+++ b/packages/ui/cuicui/other/transition-wrappers/text-effect-wrapper/component.text-effect-wrapper.tsx
@@ -34,5 +34,4 @@ export const textEffectWrapperComponent: ComponentType = {
 			slugComponentFile: "text-effect-wrapper",
 		},
 	],
-	lastUpdatedDateComponent: new Date("2024-10-06"),
 };
diff --git a/packages/ui/cuicui/other/transition-wrappers/text-effect/component.text-effect-wrapper.tsx b/packages/ui/cuicui/other/transition-wrappers/text-effect/component.text-effect-wrapper.tsx
index 38ab2efd..0d9dbe0a 100644
--- a/packages/ui/cuicui/other/transition-wrappers/text-effect/component.text-effect-wrapper.tsx
+++ b/packages/ui/cuicui/other/transition-wrappers/text-effect/component.text-effect-wrapper.tsx
@@ -34,5 +34,4 @@ export const textEffectWrapperComponent: ComponentType = {
 			slugComponentFile: "text-effect-wrapper",
 		},
 	],
-	lastUpdatedDateComponent: new Date("2024-10-06"),
 };
diff --git a/packages/ui/cuicui/other/transition-wrappers/transition-wrappers.category.tsx b/packages/ui/cuicui/other/transition-wrappers/transition-wrappers.category.tsx
index b251352b..33718348 100644
--- a/packages/ui/cuicui/other/transition-wrappers/transition-wrappers.category.tsx
+++ b/packages/ui/cuicui/other/transition-wrappers/transition-wrappers.category.tsx
@@ -32,7 +32,6 @@ export const transitionWrappersCategory: CategoryType = {
 				},
 			],
 			rerenderButton: true,
-			lastUpdatedDateComponent: new Date("2024-07-29"),
 		},
 		textEffectWrapperComponent,
 		SlideInOnScrollComponent,
diff --git a/packages/ui/cuicui/tools/color-converter/page.color-converter.tsx b/packages/ui/cuicui/tools/color-converter/page.color-converter.tsx
index e3396336..75ec7bc4 100644
--- a/packages/ui/cuicui/tools/color-converter/page.color-converter.tsx
+++ b/packages/ui/cuicui/tools/color-converter/page.color-converter.tsx
@@ -1,5 +1,3 @@
-import Link from "next/link";
-import { CUICUI_GITHUB_URL } from "@/lib/site.const";
 import ColorConverter from "@/cuicui/tools/color-converter/components/color-converter";
 
 export function PageColorConverter() {
@@ -47,19 +45,6 @@ export function PageColorConverter() {
 						</li>
 					</ol>
 				</section>
-
-				{/* Open Source Section */}
-				<section>
-					<h2>Open Source</h2>
-					<p>
-						<strong>CuiCui</strong> is open-sourced! Contribute to the project
-						or customize it to fit your needs by visiting our{" "}
-						<Link href={CUICUI_GITHUB_URL} title="CuiCui GitHub Repository">
-							GitHub repository
-						</Link>
-						.
-					</p>
-				</section>
 			</div>
 		</>
 	);
diff --git a/packages/ui/cuicui/utils/catch-error/category.catch-error.tsx b/packages/ui/cuicui/utils/catch-error/category.catch-error.tsx
index 995f7ae8..029787d0 100644
--- a/packages/ui/cuicui/utils/catch-error/category.catch-error.tsx
+++ b/packages/ui/cuicui/utils/catch-error/category.catch-error.tsx
@@ -12,7 +12,6 @@ export const catchErrorCategory: SingleComponentCategoryType = {
 	component: {
 		sizePreview: "sm",
 
-		lastUpdatedDateComponent: new Date("2024-09-26"),
 		variantList: [
 			{
 				name: "Default",
diff --git a/packages/ui/cuicui/utils/cn/cn.category.tsx b/packages/ui/cuicui/utils/cn/cn.category.tsx
index 897a1635..53ed3ca7 100644
--- a/packages/ui/cuicui/utils/cn/cn.category.tsx
+++ b/packages/ui/cuicui/utils/cn/cn.category.tsx
@@ -12,7 +12,6 @@ export const cnCategory: SingleComponentCategoryType = {
 	component: {
 		sizePreview: "sm",
 
-		lastUpdatedDateComponent: new Date("2024-09-26"),
 		variantList: [
 			{
 				name: "Default",
diff --git a/packages/ui/cuicui/utils/sleep/sleep.category.tsx b/packages/ui/cuicui/utils/sleep/sleep.category.tsx
index 5fd22ffe..60cf86ba 100644
--- a/packages/ui/cuicui/utils/sleep/sleep.category.tsx
+++ b/packages/ui/cuicui/utils/sleep/sleep.category.tsx
@@ -11,7 +11,7 @@ export const sleepCategory: SingleComponentCategoryType = {
 	},
 	component: {
 		sizePreview: "sm",
-		lastUpdatedDateComponent: new Date("2024-09-26"),
+
 		variantList: [
 			{
 				name: "Default",
diff --git a/packages/ui/lib/first-menu-section.ts b/packages/ui/lib/first-menu-section.ts
deleted file mode 100644
index fe3958e0..00000000
--- a/packages/ui/lib/first-menu-section.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-export const firstMenuSection = {
-  name: "Info",
-  noAlphabeticalSort: true,
-  categoryList: [
-    {
-      name: "Why another library?",
-      slug: "about",
-      description:
-        "CuiCui is a collection of components that I use in my projects. I wanted to share them with the world.",
-    },
-    {
-      name: "Getting Started",
-      slug: "getting-started",
-      description:
-        "Learn how to use CuiCui in your project. It's easy and simple.",
-    },
-    {
-      name: "Contribute",
-      slug: "contribute",
-      description:
-        "Help us make CuiCui better. Contribute to the project with your ideas or directly on GitHub.",
-      href: "https://cuicui.featurebase.app/",
-    },
-    {
-      name: "Roadmap",
-      slug: "roadmap",
-      description:
-        "See what's coming next in CuiCui. We have a lot of cool stuff planned.",
-      href: "https://cuicui.featurebase.app/roadmap",
-    },
-    {
-      name: "Changelog",
-      slug: "changelog",
-      description: "See the latest changes in CuiCui.",
-      href: "https://cuicui.featurebase.app/changelog",
-    },
-  ],
-};
diff --git a/packages/ui/lib/site.const.ts b/packages/ui/lib/site.const.ts
deleted file mode 100644
index 6dbe516a..00000000
--- a/packages/ui/lib/site.const.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const CUICUI_GITHUB_URL = "https://github.com/damien-schneider/cuicui";
-
-export const NEXT_PUBLIC_SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? null;
-
-export const IS_PRODUCTION = process.env.NODE_ENV === "production";
-
-export const PLAUSIBLE_DOMAIN = process.env.PLAUSIBLE_DOMAIN ?? null;
diff --git a/packages/ui/lib/types/component.d.ts b/packages/ui/lib/types/component.d.ts
index 1107e6c3..2255092f 100644
--- a/packages/ui/lib/types/component.d.ts
+++ b/packages/ui/lib/types/component.d.ts
@@ -4,12 +4,10 @@ import type { JSX, ReactNode } from "react";
 import type { ComponentBadgeList } from "../badges.const";
 export type Variant = `variant${number}`;
 
-export type ProcessVariantType = {
-	name: string;
-	component: JSX.Element;
+export interface ProcessedVariantType extends VariantType {
 	previewCode: string;
 	componentCode?: string;
-};
+}
 
 export type ComponentBadgeSlug = (typeof ComponentBadgeList)[number]["slug"];
 
@@ -118,27 +116,25 @@ type PageCategoryType = {
 export type ComponentType = {
 	name: string;
 	description: string;
-	lastUpdatedDateComponent: Date;
 	isResizable?: boolean;
 	componentBadges?: ComponentBadgeSlug[];
 	isIframed?: boolean;
 	rerenderButton?: boolean;
 	inspiration?: string;
 	inspirationLink?: string;
-	sizePreview: ComponentHeightType;
+	sizePreview?: ComponentHeightType;
 	slug: string;
 	variantList: VariantType[];
 };
 
 export type SingleComponentType = {
-	lastUpdatedDateComponent?: Date;
 	isResizable?: boolean;
 	componentBadges?: ComponentBadgeSlug[];
 	isIframed?: boolean;
 	rerenderButton?: boolean;
 	inspiration?: string;
 	inspirationLink?: string;
-	sizePreview: ComponentHeightType;
+	sizePreview?: ComponentHeightType;
 	variantList: VariantType[];
 };
 
diff --git a/readme.md b/readme.md
index 875f794a..cd6d219e 100644
--- a/readme.md
+++ b/readme.md
@@ -3,6 +3,13 @@
      <img src="/apps/website/public/metadata/banner-image.png" alt="Banner" />
   </a>
   <!-- <h1 align="left">CuiCui - A high quality react copy paste components library</h1> -->
+  <p>
+    <a href="https://www.cuicui.day/">Visit site</a>
+    ·
+    <a href="https://github.com/damien-schneider/cuicui/issues">Report Bug</a>
+    ·
+    <a href="https://github.com/damien-schneider/cuicui/issues">Request Feature</a>
+  </p>
   <hr></hr>
   <p align="left">
    An open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion.
@@ -11,13 +18,6 @@
 
 ![Alt](https://repobeats.axiom.co/api/embed/c72a9b3db3d7872f458beaa4db837cc58136ba99.svg "Repobeats analytics image")
 
-<p>
-   <a href="https://www.cuicui.day/">Visit site</a>
-    ·
-    <a href="https://github.com/damien-schneider/cuicui/issues">Report Bug</a>
-    ·
-    <a href="https://github.com/damien-schneider/cuicui/issues">Request Feature</a>
-  </p>
 </div>
 
 ## Table of Contents
@@ -38,19 +38,8 @@ open-source animated components built with React, Typescript, Tailwind CSS, and
 ## Developper guide
 
 To Write ... (a contribution is welcome here)
+> follow this section to contribute and write the Developper guide 🙃
 
-## Developper roadmap
-
-The component roadmap can be find on the [featurebase page](https://cuicui.featurebase.app/roadmap)
-
-### Here is the advanced roadmap for the website more globally
-
-- [ ] Refactor the navigation-menu.tsx
-- [ ] Change the sidemenu to have dropdown categories (maybe the treeview component)
-- [ ] Create the pages for the category sections (i.e https://cuicui.day/application-ui) -> Display the grid of the components as the home page but for each section
-- [ ] Improve SEO with better title and meta tags on components & site pages
-- [ ] Improve homepage performance by replacing component integrations by images
-- [x] Re-add precommit (fix importer order & console rules)
 
 ## License
 
diff --git a/turbo.json b/turbo.json
index 128a02a5..b338bd0e 100644
--- a/turbo.json
+++ b/turbo.json
@@ -11,9 +11,9 @@
         "!.next/cache/**"
       ]
     },
-    "check-types": {
+    "type-check": {
       "dependsOn": [
-        "^check-types"
+        "^type-check"
       ]
     },
     "clean": {