From 3bc453601da7c0cfc352c403d438bd1bc9bb4c47 Mon Sep 17 00:00:00 2001
From: Damien Schneider <74979845+damien-schneider@users.noreply.github.com>
Date: Thu, 31 Oct 2024 02:00:01 +0100
Subject: [PATCH] Add-new-bottom-navigation-menu-&-home-page (#50)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* :sparkles: add new floating dock menu

* :art: improve scrollarea to accept viewport

* :sparkles: display sidemenu corresponding to category selected

* ✅ remove outdated HomePage tests and update Sidemenu tests to include InfoMenuList

* :art: add components to preview only variants

* :sparkles: update dev script to use turbo mode for improved performance
---
 apps/website/__tests__/home-h1.test.tsx       |  35 ---
 apps/website/__tests__/sidemenu.test.tsx      |  13 +-
 apps/website/package.json                     |   2 +-
 apps/website/src/app/(components)/layout.tsx  |  26 +-
 .../src/app/floating-docks-component.tsx      | 261 ++++++++++++++++++
 apps/website/src/app/layout-floating-dock.tsx |  92 ++++++
 apps/website/src/app/layout.tsx               |  33 +--
 apps/website/src/app/page.tsx                 | 132 +++++----
 .../component-tab-renderer.tsx                |  25 +-
 .../component-wrapper/github-edit-button.tsx  |   2 +-
 .../main-menus/menu-category-wrapper.tsx      |  18 +-
 .../components/navigation/desktop-menu.tsx    |  12 +-
 .../components/navigation/info-menu-list.tsx  |  31 +++
 .../src/components/navigation/mobile-menu.tsx |  79 ------
 .../components/navigation/navigation-item.tsx |  60 +---
 .../components/navigation/navigation-menu.tsx |  23 +-
 ...opy-to-clipboard-code-snippet-dropdown.tsx | 146 +++++-----
 apps/website/src/ui/shadcn/scrollarea.tsx     | 110 ++++----
 .../src/ui/star-github-project-button.tsx     |   6 +-
 apps/website/src/ui/theme-switcher.tsx        |  46 ---
 .../battery-indicator/battery-indicator.tsx   |   2 +-
 .../common-ui/buttons/buttons.category.tsx    |  10 +-
 ...component.shiny-rotating-border-button.tsx |  73 +++++
 .../preview.shiny-rotating-border-button.tsx  |   5 +
 .../shiny-rotating-border-button/variant1.tsx |  62 -----
 .../hooks/use-step/preview-use-step.tsx       |   4 +-
 .../mock-ups/laptops/component.mackbook.tsx   |  39 +++
 .../mock-ups/laptops/preview.mackbook.tsx     |   5 +
 .../other/mock-ups/laptops/variant1.tsx       |  22 --
 .../other/mock-ups/mock-ups.category.tsx      |   7 +-
 30 files changed, 820 insertions(+), 561 deletions(-)
 delete mode 100644 apps/website/__tests__/home-h1.test.tsx
 create mode 100644 apps/website/src/app/floating-docks-component.tsx
 create mode 100644 apps/website/src/app/layout-floating-dock.tsx
 create mode 100644 apps/website/src/components/navigation/info-menu-list.tsx
 delete mode 100644 apps/website/src/components/navigation/mobile-menu.tsx
 delete mode 100644 apps/website/src/ui/theme-switcher.tsx
 create mode 100644 packages/ui/cuicui/common-ui/buttons/shiny-rotating-border-button/component.shiny-rotating-border-button.tsx
 create mode 100644 packages/ui/cuicui/common-ui/buttons/shiny-rotating-border-button/preview.shiny-rotating-border-button.tsx
 delete mode 100644 packages/ui/cuicui/common-ui/buttons/shiny-rotating-border-button/variant1.tsx
 create mode 100644 packages/ui/cuicui/other/mock-ups/laptops/component.mackbook.tsx
 create mode 100644 packages/ui/cuicui/other/mock-ups/laptops/preview.mackbook.tsx
 delete mode 100644 packages/ui/cuicui/other/mock-ups/laptops/variant1.tsx

diff --git a/apps/website/__tests__/home-h1.test.tsx b/apps/website/__tests__/home-h1.test.tsx
deleted file mode 100644
index 6312b9e..0000000
--- a/apps/website/__tests__/home-h1.test.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import HomePage from "#/src/app/page";
-
-const gettingStartedRegex = /getting-started$/;
-
-describe("Page", () => {
-	render(<HomePage />);
-	it("should have a heading", () => {
-		const heading = screen.getByRole("heading", {
-			level: 1,
-			name: "CuiCui - Copy Paste quality React component",
-		});
-		expect(heading).toBeDefined();
-	});
-	it("should have href attribute of the 'Contribute' element set to https://cuicui.featurebase.app/", () => {
-		const contributeElement = screen.getByTestId(
-			"home-navigation-link-Contribute",
-		);
-
-		// Check if the href attribute of the 'Contribute' element is https://cuicui.featurebase.app/
-		const hrefValue = contributeElement.getAttribute("href");
-		expect(hrefValue).toBe("https://cuicui.featurebase.app/");
-	});
-
-	it("should have href attribute of the 'Getting started' element to finish by getting-started", () => {
-		const contributeElement = screen.getByTestId(
-			"home-navigation-link-Getting Started",
-		);
-
-		// Check if the href attribute of the 'Getting started' element finishes by getting-started
-		const hrefValue = contributeElement.getAttribute("href");
-		expect(hrefValue).toMatch(gettingStartedRegex);
-	});
-});
diff --git a/apps/website/__tests__/sidemenu.test.tsx b/apps/website/__tests__/sidemenu.test.tsx
index fef637c..8590a6d 100644
--- a/apps/website/__tests__/sidemenu.test.tsx
+++ b/apps/website/__tests__/sidemenu.test.tsx
@@ -1,16 +1,25 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import NavigationMenu from "#/src/components/navigation/navigation-menu";
+import InfoMenuList from "#/src/components/navigation/info-menu-list";
 
 const gettingStartedRegex = /getting-started$/;
 
 vi.mock("next/navigation", () => ({
-	usePathname: () => [],
+	usePathname: () => {
+		return "/common-ui";
+	},
 	useSelectedLayoutSegments: () => [],
 }));
 
 describe("Sidemenu component", () => {
-	render(<NavigationMenu />);
+	render(
+		<div>
+			<InfoMenuList />
+			<NavigationMenu />
+		</div>,
+	);
+
 	it("should have href attribute of the 'Contribute' element set to https://cuicui.featurebase.app/", () => {
 		const contributeElement = screen.getByTestId("navigation-link-Contribute");
 
diff --git a/apps/website/package.json b/apps/website/package.json
index fd00cfb..ebcf925 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -89,7 +89,7 @@
   "publisher": "Damien Schneider",
   "scripts": {
     "build": "next build",
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "start": "next start",
     "format:check": "biome format --check ./src",
     "format:write": "biome format --write ./src",
diff --git a/apps/website/src/app/(components)/layout.tsx b/apps/website/src/app/(components)/layout.tsx
index 8cf35fe..17d9353 100644
--- a/apps/website/src/app/(components)/layout.tsx
+++ b/apps/website/src/app/(components)/layout.tsx
@@ -1,7 +1,29 @@
+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,
+	children,
 }: Readonly<{ children: React.ReactNode }>) {
-  return <div className="space-y-10">{children}</div>;
+	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 pb-20 md:p-6">
+					<div className="space-y-10">{children}</div>
+				</main>
+
+				<div className="flex sm:hidden fixed bottom-6 left-2">
+					<StarGithubProjectButton />
+				</div>
+			</div>
+		</div>
+	);
 }
diff --git a/apps/website/src/app/floating-docks-component.tsx b/apps/website/src/app/floating-docks-component.tsx
new file mode 100644
index 0000000..2530cd0
--- /dev/null
+++ b/apps/website/src/app/floating-docks-component.tsx
@@ -0,0 +1,261 @@
+"use client";
+import { useOnClickOutside } from "@/cuicui/hooks/use-click-outside/use-click-outside";
+/**
+ * Note: Use position fixed according to your needs
+ * Desktop navbar is better positioned at the bottom
+ * Mobile navbar is better positioned at bottom right.
+ **/
+
+import { cn } from "@/cuicui/utils/cn/cn";
+import {
+	AnimatePresence,
+	type MotionValue,
+	motion,
+	useMotionValue,
+	useSpring,
+	useTransform,
+} from "framer-motion";
+import { ListCollapseIcon, type LucideIcon } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+
+export const FloatingDock = ({
+	items,
+	desktopClassName,
+	mobileClassName,
+}: {
+	items: {
+		title: string;
+		Icon: LucideIcon;
+		href: string;
+	}[];
+	desktopClassName?: string;
+	mobileClassName?: string;
+}) => {
+	return (
+		<>
+			<FloatingDockDesktop items={items} className={desktopClassName} />
+			<FloatingDockMobile items={items} className={mobileClassName} />
+		</>
+	);
+};
+
+const FloatingDockMobile = ({
+	items,
+	className,
+}: {
+	items: {
+		title: string;
+		Icon: LucideIcon;
+		href: string;
+	}[];
+	className?: string;
+}) => {
+	const ref = useRef<HTMLDivElement>(null);
+	const handleClickOutside = (event: MouseEvent | TouchEvent | FocusEvent) => {
+		setOpen(false);
+	};
+
+	const pathname = usePathname();
+
+	useEffect(() => {
+		if (!pathname) {
+			return;
+		}
+		setOpen(false);
+	}, [pathname]);
+
+	useOnClickOutside(ref, handleClickOutside);
+	const [open, setOpen] = useState(false);
+	return (
+		<div ref={ref} className={cn("relative block md:hidden ", className)}>
+			<AnimatePresence>
+				{open && (
+					<motion.div
+						layoutId="nav"
+						className="absolute bottom-full mb-2 inset-x-0 flex flex-col items-end gap-2"
+					>
+						{items.map((item, idx) => (
+							<motion.div
+								key={item.title}
+								initial={{ opacity: 0, y: 10 }}
+								animate={{
+									opacity: 1,
+									y: 0,
+								}}
+								exit={{
+									opacity: 0,
+									y: 10,
+									transition: {
+										delay: idx * 0.05,
+									},
+								}}
+								transition={{ delay: (items.length - 1 - idx) * 0.05 }}
+							>
+								<Link
+									href={item.href}
+									key={item.title}
+									className={cn(
+										"rounded-full w-fit px-4 py-4 bg-neutral-50 border border-neutral-400/20  flex items-center justify-center  gap-2",
+										pathname.includes(item.href)
+											? "bg-neutral-700 dark:bg-neutral-200 text-neutral-100 dark:text-neutral-800"
+											: "dark:bg-neutral-900 text-neutral-500 dark:text-neutral-300",
+									)}
+									onClick={() => setOpen(false)}
+								>
+									<item.Icon className="size-6" />
+									<p className=" text-nowrap tracking-tighter  font-medium">
+										{item.title}
+									</p>
+								</Link>
+							</motion.div>
+						))}
+					</motion.div>
+				)}
+			</AnimatePresence>
+			<button
+				type="button"
+				onClick={() => setOpen(!open)}
+				className="size-16 rounded-full  border border-neutral-400/20 bg-neutral-50 dark:bg-neutral-800 flex items-center justify-center"
+			>
+				<ListCollapseIcon className="size-7 text-neutral-500 dark:text-neutral-400" />
+			</button>
+		</div>
+	);
+};
+
+const FloatingDockDesktop = ({
+	items,
+	className,
+}: {
+	items: { title: string; Icon: LucideIcon; href: string }[];
+	className?: string;
+}) => {
+	const mouseX = useMotionValue(Number.POSITIVE_INFINITY);
+	return (
+		<motion.div
+			onMouseMove={(e) => mouseX.set(e.pageX)}
+			onMouseLeave={() => mouseX.set(Number.POSITIVE_INFINITY)}
+			className={cn(
+				"mx-auto hidden md:flex h-14 gap-2 items-end  rounded-full bg-neutral-50 dark:bg-neutral-900 px-2 pb-2 border border-neutral-500/20",
+				className,
+			)}
+		>
+			{items.map((item) => (
+				<IconContainer mouseX={mouseX} key={item.title} {...item} />
+			))}
+		</motion.div>
+	);
+};
+
+function IconContainer({
+	mouseX,
+	title,
+	Icon,
+	href,
+}: Readonly<{
+	mouseX: MotionValue;
+	title: string;
+	Icon: LucideIcon;
+	href: string;
+}>) {
+	const pathname = usePathname();
+	const [isActive, setIsActive] = useState(false);
+
+	useEffect(() => {
+		if (href === "/") {
+			setIsActive(href === pathname);
+		} else {
+			setIsActive(pathname.includes(href));
+		}
+	}, [pathname, href]);
+
+	const ref = useRef<HTMLDivElement>(null);
+
+	const distance = useTransform(mouseX, (val) => {
+		const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
+
+		return val - bounds.x - bounds.width / 2;
+	});
+
+	const widthTransform = useTransform(distance, [-150, 0, 150], [60, 80, 60]);
+	const heightTransform = useTransform(distance, [-150, 0, 150], [40, 60, 40]);
+
+	const widthTransformIcon = useTransform(
+		distance,
+		[-150, 0, 150],
+		[20, 40, 20],
+	);
+	const heightTransformIcon = useTransform(
+		distance,
+		[-150, 0, 150],
+		[20, 40, 20],
+	);
+
+	const width = useSpring(widthTransform, {
+		mass: 0.1,
+		stiffness: 300,
+		damping: 12,
+	});
+	const height = useSpring(heightTransform, {
+		mass: 0.1,
+		stiffness: 300,
+		damping: 12,
+	});
+
+	const widthIcon = useSpring(widthTransformIcon, {
+		mass: 0.1,
+		stiffness: 300,
+		damping: 12,
+	});
+	const heightIcon = useSpring(heightTransformIcon, {
+		mass: 0.1,
+		stiffness: 300,
+		damping: 12,
+	});
+
+	const [hovered, setHovered] = useState(false);
+
+	return (
+		<Link href={href}>
+			<motion.div
+				ref={ref}
+				style={{ width, height }}
+				onMouseEnter={() => setHovered(true)}
+				onMouseLeave={() => setHovered(false)}
+				className={cn(
+					"aspect-square rounded-full border border-neutral-400/20 backdrop-blur-2xl flex items-center justify-center relative",
+					isActive
+						? "bg-neutral-800 dark:bg-neutral-100"
+						: "bg-neutral-100 dark:bg-neutral-800",
+				)}
+			>
+				<AnimatePresence>
+					{hovered && (
+						// ------ Tooltip ------ //
+						<motion.div
+							initial={{ opacity: 0, y: 10, x: "-50%" }}
+							animate={{ opacity: 1, y: 0, x: "-50%" }}
+							exit={{ opacity: 0, y: 2, x: "-50%" }}
+							className="px-2 py-0.5 whitespace-pre rounded-md bg-neutral-100 dark:bg-neutral-800 dark:text-white border border-neutral-500/20 text-neutral-700 absolute left-1/2 -translate-x-1/2 -top-8 w-fit text-xs"
+						>
+							{title}
+						</motion.div>
+					)}
+				</AnimatePresence>
+				<motion.div
+					style={{ width: widthIcon, height: heightIcon }}
+					className={cn(
+						"flex items-center justify-center",
+						isActive
+							? "*:text-neutral-100 *:dark:text-neutral-800"
+							: "*:text-neutral-800 *:dark:text-neutral-100",
+					)}
+				>
+					<Icon className="size-6" />
+				</motion.div>
+			</motion.div>
+		</Link>
+	);
+}
diff --git a/apps/website/src/app/layout-floating-dock.tsx b/apps/website/src/app/layout-floating-dock.tsx
new file mode 100644
index 0000000..a2ec42a
--- /dev/null
+++ b/apps/website/src/app/layout-floating-dock.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { SectionsList } from "@cuicui/ui";
+
+import { FloatingDock } from "#/src/app/floating-docks-component";
+import { HomeIcon, MoonIcon, SunIcon } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { useTheme } from "next-themes";
+import { cn } from "#/src/utils/cn";
+import Link from "next/link";
+
+export function CuicuiFloatingDock() {
+	const pathName = usePathname();
+	const { setTheme, theme, resolvedTheme } = useTheme();
+
+	const handleSwitchTheme = () => {
+		if (resolvedTheme === "dark") {
+			setTheme("light");
+		}
+		if (resolvedTheme === "light") {
+			setTheme("dark");
+		}
+	};
+	return (
+		<div className="relative w-full h-full">
+			<div
+				className={cn(
+					"flex items-center fixed gap-2 justify-center z-50 ",
+					"right-4 bottom-4",
+					"md:bottom-2  md:right-auto md:left-1/2 md:-translate-x-1/2",
+				)}
+			>
+				<Link
+					href="/"
+					className="relative h-14 w-10 ml-2 overflow-hidden transition rounded-full bg-neutral-50 dark:bg-neutral-900 p-2 border border-neutral-500/20"
+				>
+					<HomeIcon
+						className={cn(
+							"size-5 text-neutral-600 transition dark:text-neutral-300 z-50 duration-500 absolute -translate-x-1/2 left-1/2 top-2 transform-gpu mr-2",
+						)}
+					/>
+				</Link>
+				<div className="order-3 md:order-none">
+					<FloatingDock
+						// mobileClassName="translate-y-20" // only for demo, remove for production
+						items={sectionLinks}
+					/>
+				</div>
+				<button
+					type="button"
+					onClick={handleSwitchTheme}
+					className="relative h-14 w-10 overflow-hidden transition rounded-full bg-neutral-50 dark:bg-neutral-900 p-2 border border-neutral-500/20"
+				>
+					<SunIcon
+						className={cn(
+							"size-5 text-neutral-600 transition dark:text-neutral-300 z-50 duration-500 absolute -translate-x-1/2 left-1/2 top-2 transform-gpu",
+							resolvedTheme === "light"
+								? "opacity-100 translate-y-0 scale-100"
+								: "opacity-50 -translate-y-8 scale-75",
+						)}
+					/>
+
+					<MoonIcon
+						className={cn(
+							"size-5 text-neutral-600 transition dark:text-neutral-300 z-50 duration-500 absolute -translate-x-1/2 left-1/2 bottom-2 transform-gpu",
+							resolvedTheme === "dark"
+								? "opacity-100 translate-y-0 scale-100"
+								: "opacity-50 translate-y-8 scale-75",
+						)}
+					/>
+				</button>
+			</div>
+		</div>
+	);
+}
+
+const sectionLinks = SectionsList.map((section) => {
+	return {
+		title: section.name,
+		Icon: section.icon,
+		href: `/${section.slug}`,
+	};
+});
+
+const homeLink = {
+	title: "Home",
+	icon: (
+		<HomeIcon className="h-full w-full text-neutral-500 dark:text-neutral-300" />
+	),
+	href: "/",
+};
+const links = [homeLink, ...sectionLinks];
diff --git a/apps/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx
index cb25c45..6481f0d 100644
--- a/apps/website/src/app/layout.tsx
+++ b/apps/website/src/app/layout.tsx
@@ -3,13 +3,13 @@ import { Toaster } from "sonner";
 import "#/src/styles/globals.css";
 import { DesktopSideMenu } from "#/src/components/navigation/desktop-menu";
 import { AddressBar } from "#/src/ui/address-bar";
-import { MobileMenu } from "../components/navigation/mobile-menu";
 
 import { DM_Sans } from "next/font/google";
 import type { ReactNode } from "react";
 import Providers from "#/src/app/providers";
 import StarGithubProjectButton from "#/src/ui/star-github-project-button";
 import PlausibleScripts from "#/src/components/analytics/plausible-scripts";
+import { CuicuiFloatingDock } from "#/src/app/layout-floating-dock";
 const font = DM_Sans({
 	subsets: ["latin"],
 	display: "swap",
@@ -79,35 +79,8 @@ export default function RootLayout({
 				<body className="bg-neutral-50 dark:bg-neutral-950 ">
 					<Toaster />
 
-					<div className="mx-auto max-w-screen-2xl">
-						<DesktopSideMenu />
-						{/* <div className="absolute top-0 left-0 bottom-0 right-0 overflow-hidden">
-                <div className="relative">
-                  <div className="gradient-top-animation absolute rotate-3 blur-[100px] h-48 w-[60vw] -right-[20vw] z-0 -top-24 opacity-20 pointer-events-none" />
-                </div>
-              </div> */}
-						<div className="lg:ml-80">
-							{/* Add overflow-auto if layout width problems */}
-
-							<AddressBar />
-							{/* <GradientContainer
-                    rounded="sm"
-                    background="solid"
-                    classNameParent=""
-                    classNameChild="px-8 py-10 min-h-[calc(100vh-6rem)]"
-                    > */}
-							<main className=" p-4 pt-12 pb-20 md:p-6">
-								{/* Move overflow-auto to the previous comment if problems occurs */}
-								{children}
-							</main>
-							{/* </GradientContainer> */}
-							<div className="flex sm:hidden fixed bottom-20 left-2">
-								<StarGithubProjectButton />
-							</div>
-
-							<MobileMenu />
-						</div>
-					</div>
+					{children}
+					<CuicuiFloatingDock />
 				</body>
 			</Providers>
 		</html>
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index 01cac1c..2e10106 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -6,59 +6,93 @@ import { SectionsList } from "@cuicui/ui";
 import { firstMenuSection } from "#/src/lib/first-menu-section";
 import { MainMenusGradientCard } from "@cuicui/ui/cuicui/other/cursors/dynamic-cards/gradient-card";
 import { MainMenuCardContent } from "./card";
+import { MacbookMockUp } from "@/cuicui/other/mock-ups/laptops/component.mackbook";
+import { PreviewRecursiveTree } from "@/cuicui/application-ui/tree/recursive-tree/preview-recursive-tree";
+import { PreviewBatteryIndicator } from "@/cuicui/application-ui/battery/battery-indicator/preview-battery-indicator";
+import { ShinyRotatingBorderButton } from "@/cuicui/common-ui/buttons/shiny-rotating-border-button/component.shiny-rotating-border-button";
+import { TextEffectWrapper } from "@/cuicui/other/transition-wrappers/text-effect-wrapper/text-effect-wrapper";
+import { DotsPattern } from "@/cuicui/other/patterns/dots-pattern/dots-pattern";
+import { PreviewUseMeasure } from "@/cuicui/hooks/use-measure/preview.use-measure";
 
 export default function HomePage() {
 	return (
-		<div className="my-8 space-y-8 px-4">
-			<h1 className="header-1">CuiCui - Copy Paste quality React component</h1>
-			<p className="caption-md ">
-				CuiCui is a modern UI copy paste library that helps you build beautiful
-				websites and applications. Its name "CuiCui" is for Quick UI.
-			</p>
-			<div className="space-y-10 text-white">
-				<h2 className="header-2">Explore the component categories</h2>
-				<MenuSectionWrapper name={firstMenuSection.name}>
-					{firstMenuSection.categoryList.map((category) => {
-						return (
-							<Link
-								data-testid={`home-navigation-link-${category.name}`}
-								href={category.href ?? `/${category.slug}`}
-								key={category.name}
-							>
-								<MainMenusGradientCard
-									description={category.description}
-									title={category.name}
-									withArrow={Boolean(category.href)}
-								/>
-							</Link>
-						);
-					})}
-				</MenuSectionWrapper>
+		<section className="relative overflow-hidden min-h-dvh grid place-content-center">
+			<DotsPattern className="absolute inset-0 w-full h-full [mask-image:radial-gradient(500px_circle_at_center,white,transparent)]" />
+			<div className="absolute -left-[370px] -top-[10%] rotate-6">
+				<MacbookMockUp
+					src="https://devicescss.xyz/assets/img/bg-10.jpg"
+					className=" scale-50 "
+				/>
+			</div>
+			<div className="rotate-3 absolute top-0 -right-[10%] mt-20 ">
+				<PreviewRecursiveTree />
+			</div>
+
+			<div className="max-w-lg xl:max-w-xl mx-auto  lg:mb-0 text-center relative pb-20 px-8">
+				<div className="flex mb-6 items-center justify-center">
+					<TextEffectWrapper
+						className="block ml-2 font-medium lg:text-xl"
+						as="span"
+						preset="slide"
+						per="word"
+						delay={0.8}
+					>
+						Cuicui
+					</TextEffectWrapper>
+				</div>
+				<h1 className="text-4xl md:text-5xl lg:text-7xl tracking-tight">
+					<TextEffectWrapper
+						className="block"
+						as="span"
+						preset="blur"
+						per="word"
+						delay={0.1}
+					>
+						Every UI
+					</TextEffectWrapper>
+					<TextEffectWrapper
+						className="block text-balance"
+						as="span"
+						preset="blur"
+						per="word"
+						delay={0.3}
+					>
+						components, hooks, tools, ...
+					</TextEffectWrapper>
+					<TextEffectWrapper
+						className="block"
+						as="h1"
+						preset="blur"
+						per="word"
+						delay={0.5}
+					>
+						you need
+					</TextEffectWrapper>
+				</h1>
+				<TextEffectWrapper
+					className="text-lg dark:text-neutral-300 text-neutral-600 mt-10 mb-10"
+					as="p"
+					preset="blur"
+					per="word"
+					delay={0.7}
+				>
+					More than 100 variants of Open-Source components, hooks and tools made
+					for React. Just Copy Paste.
+				</TextEffectWrapper>
 
-				{SectionsList.map((section) => (
-					<MenuSectionWrapper key={section.name} name={section.name}>
-						{section.type !== "page" &&
-							section.categoriesList.map((category) => {
-								return (
-									<Link
-										href={`/${section.slug}/${category.slug}`}
-										key={category.name}
-									>
-										<MainMenusGradientCard
-											description={category.description}
-											title={category.name}
-										>
-											<MainMenuCardContent
-												sectionSlug={section.slug}
-												category={category}
-											/>
-										</MainMenusGradientCard>
-									</Link>
-								);
-							})}
-					</MenuSectionWrapper>
-				))}
+				<Link
+					href="/common-ui"
+					className=" font-medium text-xl px-6 py-2 rounded-2xl dark:text-neutral-300 text-neutral-700 bg-neutral-100 dark:hover:bg-neutral-800 hover:bg-neutral-200 transition hover:scale-105 dark:bg-neutral-900 border border-neutral-400/15"
+				>
+					Start Copy Pasting
+				</Link>
+			</div>
+			<div className="absolute bottom-1/4 px-4 left-3/4 rotate-6 ">
+				<PreviewBatteryIndicator />
+			</div>
+			<div className="bottom-[15%] absolute left-[8%] px-4 -rotate-3">
+				<PreviewUseMeasure />
 			</div>
-		</div>
+		</section>
 	);
 }
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 53255e3..3ae1bc6 100644
--- a/apps/website/src/components/component-wrapper/component-tab-renderer.tsx
+++ b/apps/website/src/components/component-wrapper/component-tab-renderer.tsx
@@ -15,7 +15,11 @@ import {
 	ResizablePanel,
 	ResizablePanelGroup,
 } from "#/src/ui/shadcn/resizable";
-import { ScrollArea, ScrollBar } from "#/src/ui/shadcn/scrollarea";
+import {
+	ScrollArea,
+	ScrollAreaViewport,
+	ScrollBar,
+} from "#/src/ui/shadcn/scrollarea";
 import { cn } from "#/src/utils/cn";
 import { getContainerHeightClass } from "#/src/components/component-wrapper/get-container-height-class";
 const tabs = [
@@ -143,16 +147,17 @@ export default function ComponentTabRenderer({
 
 									getContainerHeightClass({ size }),
 								)}
-								classNameViewport="p-3"
 							>
-								<ScrollBar orientation="vertical" />
-								<ScrollBar orientation="horizontal" />
-								{tab === "code-preview" && (
-									<CodeHighlighter code={previewCode} />
-								)}
-								{tab === "code-component" && componentCode && (
-									<CodeHighlighter code={componentCode} />
-								)}
+								<ScrollAreaViewport className="p-3">
+									<ScrollBar orientation="vertical" />
+									<ScrollBar orientation="horizontal" />
+									{tab === "code-preview" && (
+										<CodeHighlighter code={previewCode} />
+									)}
+									{tab === "code-component" && componentCode && (
+										<CodeHighlighter code={componentCode} />
+									)}
+								</ScrollAreaViewport>
 							</ScrollArea>
 							{tab === "code-preview" && (
 								<StepToInstall code={previewCode ?? ""} />
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 7791862..0a0958c 100644
--- a/apps/website/src/components/component-wrapper/github-edit-button.tsx
+++ b/apps/website/src/components/component-wrapper/github-edit-button.tsx
@@ -17,7 +17,7 @@ export default function GithubEditButton({
 	return (
 		<Link
 			// Example : https://github.com/damien-schneider/cuicui/tree/main/src/ui/cuicui/other/creative-effects/animated-noise
-			href={`${CUICUI_GITHUB_URL}/tree/main/src/ui/cuicui/${sectionSlug}/${categorySlug}/${componentSlug ? componentSlug : ""}`}
+			href={`${CUICUI_GITHUB_URL}/tree/main/packages/ui/cuicui/${sectionSlug}/${categorySlug}/${componentSlug ? componentSlug : ""}`}
 			className="text-sm text-neutral-500 hover:text-neutral-500/50 hover:underline font-medium tracking-tight"
 		>
 			Edit on Github
diff --git a/apps/website/src/components/main-menus/menu-category-wrapper.tsx b/apps/website/src/components/main-menus/menu-category-wrapper.tsx
index 2c6c327..823f700 100644
--- a/apps/website/src/components/main-menus/menu-category-wrapper.tsx
+++ b/apps/website/src/components/main-menus/menu-category-wrapper.tsx
@@ -1,14 +1,16 @@
 import type { ReactNode } from "react";
 
 export default function MenuSectionWrapper({
-  name,
-  children,
+	name,
+	children,
 }: Readonly<{ name: string; children: ReactNode }>) {
-  return (
-    <div className="space-y-5" key={name}>
-      <h2 className="uppercase-title">{name}</h2>
+	return (
+		<div className="space-y-5" key={name}>
+			<h2 className="uppercase-title">{name}</h2>
 
-      <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">{children}</div>
-    </div>
-  );
+			<div className="grid grid-cols-1 gap-5 lg:grid-cols-2 pb-20">
+				{children}
+			</div>
+		</div>
+	);
 }
diff --git a/apps/website/src/components/navigation/desktop-menu.tsx b/apps/website/src/components/navigation/desktop-menu.tsx
index 0503fb9..47589bd 100644
--- a/apps/website/src/components/navigation/desktop-menu.tsx
+++ b/apps/website/src/components/navigation/desktop-menu.tsx
@@ -7,11 +7,11 @@ import { cn } from "../../utils/cn";
 
 import Byline from "../../ui/byline";
 
-import { ScrollArea } from "../../ui/shadcn/scrollarea";
+import { ScrollArea, ScrollAreaViewport } from "../../ui/shadcn/scrollarea";
 import StarGithubProjectButton from "../../ui/star-github-project-button";
-import ThemeSwitcher from "../../ui/theme-switcher";
 import { SearchMenu } from "../search-menu/search-menu";
 import NavigationMenu from "./navigation-menu";
+import InfoMenuList from "#/src/components/navigation/info-menu-list";
 
 export function DesktopSideMenu({
 	className,
@@ -35,13 +35,15 @@ export function DesktopSideMenu({
 							Cuicui - Best all in one React component library
 						</span>
 					</Link>
-					<ThemeSwitcher />
 				</div>
 				<StarGithubProjectButton />
 				<SearchMenu />
 			</div>
-			<ScrollArea className="w-full ">
-				<NavigationMenu />
+			<InfoMenuList />
+			<ScrollArea className="w-full h-full mt-4">
+				<ScrollAreaViewport className="h-full">
+					<NavigationMenu />
+				</ScrollAreaViewport>
 			</ScrollArea>
 			<Byline className="w-full" />
 		</div>
diff --git a/apps/website/src/components/navigation/info-menu-list.tsx b/apps/website/src/components/navigation/info-menu-list.tsx
new file mode 100644
index 0000000..ca77419
--- /dev/null
+++ b/apps/website/src/components/navigation/info-menu-list.tsx
@@ -0,0 +1,31 @@
+import { NavigationAnimatedBackground } from "#/src/components/navigation/navigation-animated-background";
+import {
+	GlobalNavItem,
+	SectionWrapper,
+} from "#/src/components/navigation/navigation-item";
+import { firstMenuSection } from "#/src/lib/first-menu-section";
+import React from "react";
+
+export default function InfoMenuList() {
+	return (
+		<SectionWrapper
+			sectionSlug=""
+			name={firstMenuSection.name}
+			className="w-full mt-4"
+		>
+			<NavigationAnimatedBackground>
+				{firstMenuSection.categoryList.map((category, _index) => (
+					<li className="block" data-id={category.slug} key={category.slug}>
+						<GlobalNavItem
+							Icon={null}
+							href={category.href ?? `/${category.slug}`}
+							isMobile={false}
+							name={category.name}
+							target={category.href ? "newWindow" : "sameWindow"}
+						/>
+					</li>
+				))}
+			</NavigationAnimatedBackground>
+		</SectionWrapper>
+	);
+}
diff --git a/apps/website/src/components/navigation/mobile-menu.tsx b/apps/website/src/components/navigation/mobile-menu.tsx
deleted file mode 100644
index 8442b5e..0000000
--- a/apps/website/src/components/navigation/mobile-menu.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-"use client";
-
-import { MenuIcon } from "lucide-react";
-import Byline from "../../ui/byline";
-import GradientContainer from "../../ui/gradient-container";
-
-import Image from "next/image";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useEffect, useState } from "react";
-import { Drawer } from "vaul";
-import LogoLarge from "#/src/assets/logo/logo-large.png";
-import { cn } from "#/src/utils/cn";
-import ThemeSwitcher from "../../ui/theme-switcher";
-import NavigationMenu from "./navigation-menu";
-export function MobileMenu({ className }: Readonly<{ className?: string }>) {
-	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-	const pathname = usePathname();
-
-	useEffect(() => {
-		if (!pathname) {
-			return;
-		}
-		setIsDrawerOpen(false);
-	}, [pathname]);
-
-	return (
-		<Drawer.Root
-			onOpenChange={(isOpen) => setIsDrawerOpen(isOpen)}
-			open={isDrawerOpen}
-		>
-			<div
-				className={cn(
-					"flex lg:hidden",
-					"fixed bottom-0 left-0 w-full justify-between p-2",
-					className,
-				)}
-			>
-				<GradientContainer classNameChild="p-2.5 h-full flex items-center gap-4">
-					<Link
-						className="group flex w-fit items-center gap-x-2.5 transition-transform hover:scale-105"
-						href="/"
-					>
-						<Image alt="Cuicui logo" src={LogoLarge} width={100} />
-					</Link>
-					<ThemeSwitcher />
-				</GradientContainer>
-				<Drawer.Trigger className="">
-					<GradientContainer classNameChild="w-20 h-14 grid place-content-center">
-						<MenuIcon className="size-8" />
-					</GradientContainer>
-				</Drawer.Trigger>
-			</div>
-
-			<Drawer.Portal>
-				<Drawer.Overlay
-					className="fixed inset-0 z-50 backdrop-blur-sm"
-					// style={{
-					//   background:
-					//     "linear-gradient(135deg, #3BC4F2, #7A69F9,#F26378,#F5833F)",
-					// }}
-					style={{
-						// Gradient background
-						background:
-							"linear-gradient(90deg, rgba(59, 196, 242, 0.2), rgba(122, 105, 249, 0.2), rgba(242, 99, 120, 0.2), rgba(245, 131, 63, 0.2))",
-					}}
-				/>
-				<Drawer.Content className="fixed right-0 bottom-0 left-0 z-50 flex max-h-[80dvh] flex-col rounded-t-2xl bg-neutral-50 p-4 dark:bg-neutral-900">
-					<Drawer.Handle className="mb-4 min-h-1 bg-neutral-400" />
-					<div className="overflow-y-scroll">
-						<NavigationMenu isMobile={true} />
-					</div>
-					<Byline />
-				</Drawer.Content>
-			</Drawer.Portal>
-			{/* </div> */}
-		</Drawer.Root>
-	);
-}
diff --git a/apps/website/src/components/navigation/navigation-item.tsx b/apps/website/src/components/navigation/navigation-item.tsx
index 8a64393..c36d22c 100644
--- a/apps/website/src/components/navigation/navigation-item.tsx
+++ b/apps/website/src/components/navigation/navigation-item.tsx
@@ -6,17 +6,7 @@ import {
 } from "lucide-react";
 import Link from "next/link";
 import { usePathname, useSelectedLayoutSegments } from "next/navigation";
-import {
-	useEffect,
-	useState,
-	type AnchorHTMLAttributes,
-	type ReactNode,
-} from "react";
-import {
-	Disclosure,
-	DisclosureContent,
-	DisclosureTrigger,
-} from "#/src/components/navigation/disclosure";
+import type { AnchorHTMLAttributes, ReactNode } from "react";
 import GradientContainer from "#/src/ui/gradient-container";
 import GradientText from "#/src/ui/gradient-text";
 import { cn } from "#/src/utils/cn";
@@ -90,64 +80,22 @@ export function GlobalNavItem({
 export const SectionWrapper = ({
 	children,
 	name,
-	disclosure = true,
 	Icon,
 	className,
 	sectionSlug,
 }: {
 	children: ReactNode;
 	name: string;
-	disclosure?: boolean;
 	Icon?: LucideIcon;
 	className?: string;
 	sectionSlug: SectionType["slug"];
 }) => {
-	const [isOpen, setOpen] = useState(false);
 	const pathName = usePathname();
-	useEffect(() => {
-		const doesPathNameIncludeSectionSlug = pathName.includes(sectionSlug);
-		if (doesPathNameIncludeSectionSlug) {
-			setOpen(true);
-		}
-	}, [pathName, sectionSlug]);
-	if (disclosure) {
-		return (
-			<Disclosure
-				onOpenChange={setOpen}
-				open={isOpen}
-				className={cn("w-full rounded-md has-[:aria-expanded]:my-6")}
-			>
-				<DisclosureTrigger>
-					<button
-						className={cn(
-							"relative group peer px-3 py-2  text-xs w-full flex font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400 justify-between items-center",
-							"before:absolute before:inset-0 before:scale-50 before:opacity-0 hover:before:scale-100 hover:before:opacity-100 before:transition before:transform-gpu before:bg-neutral-400/15 before:rounded-lg before:border before:border-neutral-400/15 active:before:bg-neutral-400/30  transition-all aria-expanded:mt-6",
-						)}
-						type="button"
-					>
-						<span className="inline-flex gap-2 items-center">
-							{Icon && (
-								<Icon className="size-4 transform-gpu text-neutral-400 transition-transform group-hover:scale-125 dark:text-neutral-500 " />
-							)}
 
-							{name}
-						</span>
-
-						<ChevronRightIcon className="size-4 text-black/40 transition-transform dark:text-white/40 group-aria-expanded:rotate-90" />
-					</button>
-				</DisclosureTrigger>
-				<DisclosureContent className="pt-1 peer-aria-expanded:mb-8">
-					{children}
-				</DisclosureContent>
-			</Disclosure>
-			// <div>
-			//   <div className="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
-			//     <p>{name}</p>
-			//   </div>
-			//   {children}
-			// </div>
-		);
+	if (!pathName.includes(sectionSlug)) {
+		return null;
 	}
+
 	return (
 		<div className={className}>
 			<div className="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
diff --git a/apps/website/src/components/navigation/navigation-menu.tsx b/apps/website/src/components/navigation/navigation-menu.tsx
index 3ae6d6e..3f9e751 100644
--- a/apps/website/src/components/navigation/navigation-menu.tsx
+++ b/apps/website/src/components/navigation/navigation-menu.tsx
@@ -77,28 +77,7 @@ export default function NavigationMenu({
 	}
 
 	return (
-		<nav className={cn("mt-5 mb-12 px-1 space-y-2 ", className)}>
-			<SectionWrapper
-				sectionSlug=""
-				disclosure={false}
-				name={firstMenuSection.name}
-				className="mb-16"
-			>
-				<NavigationAnimatedBackground>
-					{firstMenuSection.categoryList.map((category, _index) => (
-						<li className="block" data-id={category.slug} key={category.slug}>
-							<GlobalNavItem
-								Icon={null}
-								href={category.href ?? `/${category.slug}`}
-								isMobile={isMobile}
-								name={category.name}
-								target={category.href ? "newWindow" : "sameWindow"}
-							/>
-						</li>
-					))}
-				</NavigationAnimatedBackground>
-			</SectionWrapper>
-
+		<nav className={cn("mt-5 mb-12 px-1 space-y-2 min-h-full", className)}>
 			{SectionsList.map((section) => {
 				if (section.type === "page") {
 					return (
diff --git a/apps/website/src/ui/copy-to-clipboard-code-snippet-dropdown.tsx b/apps/website/src/ui/copy-to-clipboard-code-snippet-dropdown.tsx
index 398f0a2..9132c72 100644
--- a/apps/website/src/ui/copy-to-clipboard-code-snippet-dropdown.tsx
+++ b/apps/website/src/ui/copy-to-clipboard-code-snippet-dropdown.tsx
@@ -5,87 +5,91 @@ import { toast } from "sonner";
 import { cn } from "../utils/cn";
 
 import { Button } from "./shadcn/button";
-import { ScrollArea, ScrollBar } from "./shadcn/scrollarea";
+import { ScrollArea, ScrollAreaViewport, ScrollBar } from "./shadcn/scrollarea";
 
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
 } from "./shadcn/dropdown-menu";
 import {
-  PackageManagerList,
-  type PackageManagerType,
-  getCodeByPackageManager,
-  usePackageManager,
+	PackageManagerList,
+	type PackageManagerType,
+	getCodeByPackageManager,
+	usePackageManager,
 } from "./store/use-package-manager";
 
 import { useEffect, useState } from "react";
 
 export default function SnippetCommandCard({
-  code,
+	code,
 }: Readonly<{ code: string }>) {
-  const { packageManager, setPackageManager } = usePackageManager();
-  const [isCopied, setIsCopied] = useState(false);
-  function handleCopyToClipboard(
-    packageManager: PackageManagerType,
-    code: string,
-  ) {
-    navigator.clipboard.writeText(
-      `${getCodeByPackageManager(packageManager)} ${code}`,
-    );
-    setIsCopied(true);
-    toast.success(`Copied the code for ${packageManager}`);
-  }
+	const { packageManager, setPackageManager } = usePackageManager();
+	const [isCopied, setIsCopied] = useState(false);
+	function handleCopyToClipboard(
+		packageManager: PackageManagerType,
+		code: string,
+	) {
+		navigator.clipboard.writeText(
+			`${getCodeByPackageManager(packageManager)} ${code}`,
+		);
+		setIsCopied(true);
+		toast.success(`Copied the code for ${packageManager}`);
+	}
 
-  useEffect(() => {
-    if (isCopied) {
-      setTimeout(() => {
-        setIsCopied(false);
-      }, 2000);
-    }
-  }, [isCopied]);
+	useEffect(() => {
+		if (isCopied) {
+			setTimeout(() => {
+				setIsCopied(false);
+			}, 2000);
+		}
+	}, [isCopied]);
 
-  return (
-    <div className="card relative block w-full">
-      <ScrollArea classNameViewport={cn("w-full ")}>
-        <ScrollBar orientation="horizontal" />
-        <code className="text-nowrap pr-10 text-sm">
-          <span className="text-neutral-400 dark:text-neutral-500">
-            {getCodeByPackageManager(packageManager)}{" "}
-          </span>
-          <span className="text-neutral-600 dark:text-neutral-300">{code}</span>
-        </code>
-      </ScrollArea>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild={true}>
-          <Button
-            aria-label="Copy the code"
-            className="absolute top-2 right-2 bg-neutral-200 p-1 dark:bg-neutral-800"
-            size="icon"
-            variant="icon"
-          >
-            {isCopied ? (
-              <CheckIcon className="size-5" />
-            ) : (
-              <ClipboardIcon className="size-5" />
-            )}
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          {PackageManagerList.map((item) => (
-            <DropdownMenuItem
-              key={item}
-              onSelect={() => {
-                setPackageManager(item);
-                handleCopyToClipboard(item, code);
-              }}
-            >
-              {item}
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
+	return (
+		<div className="card relative block w-full">
+			<ScrollArea>
+				<ScrollAreaViewport className="w-full">
+					<ScrollBar orientation="horizontal" />
+					<code className="text-nowrap pr-10 text-sm">
+						<span className="text-neutral-400 dark:text-neutral-500">
+							{getCodeByPackageManager(packageManager)}{" "}
+						</span>
+						<span className="text-neutral-600 dark:text-neutral-300">
+							{code}
+						</span>
+					</code>
+				</ScrollAreaViewport>
+			</ScrollArea>
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild={true}>
+					<Button
+						aria-label="Copy the code"
+						className="absolute top-2 right-2 bg-neutral-200 p-1 dark:bg-neutral-800"
+						size="icon"
+						variant="icon"
+					>
+						{isCopied ? (
+							<CheckIcon className="size-5" />
+						) : (
+							<ClipboardIcon className="size-5" />
+						)}
+					</Button>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="end">
+					{PackageManagerList.map((item) => (
+						<DropdownMenuItem
+							key={item}
+							onSelect={() => {
+								setPackageManager(item);
+								handleCopyToClipboard(item, code);
+							}}
+						>
+							{item}
+						</DropdownMenuItem>
+					))}
+				</DropdownMenuContent>
+			</DropdownMenu>
+		</div>
+	);
 }
diff --git a/apps/website/src/ui/shadcn/scrollarea.tsx b/apps/website/src/ui/shadcn/scrollarea.tsx
index 8f7b645..ad81e65 100644
--- a/apps/website/src/ui/shadcn/scrollarea.tsx
+++ b/apps/website/src/ui/shadcn/scrollarea.tsx
@@ -1,57 +1,73 @@
 "use client";
 
-// biome-ignore lint/style/noNamespaceImport: <explanation>
+import { cn } from "#/src/utils/cn";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
 
-import {
-  type ComponentPropsWithoutRef,
-  type ElementRef,
-  forwardRef,
-} from "react";
-import { cn } from "../../utils/cn";
-
-const ScrollArea = forwardRef<
-  ElementRef<typeof ScrollAreaPrimitive.Root>,
-  ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
-    classNameViewport?: string;
-  }
->(({ className, classNameViewport, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    className={cn("relative overflow-hidden", className)}
-    ref={ref}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport
-      className={cn("h-full w-full rounded-[inherit]", classNameViewport)}
-    >
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
+const ScrollArea = React.forwardRef<
+	React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => {
+	const hasViewportChild = React.Children.toArray(children).some(
+		(child) => React.isValidElement(child) && child.type === ScrollAreaViewport,
+	);
+	return (
+		<ScrollAreaPrimitive.Root
+			className={cn("relative overflow-hidden", className)}
+			ref={ref}
+			{...props}
+		>
+			{/*...then renders conditionally */}
+			{hasViewportChild ? (
+				children
+			) : (
+				<ScrollAreaViewport>{children}</ScrollAreaViewport>
+			)}
+			<ScrollBar />
+			<ScrollAreaPrimitive.Corner />
+		</ScrollAreaPrimitive.Root>
+	);
+});
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
-const ScrollBar = forwardRef<
-  ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+const ScrollAreaViewport = React.forwardRef<
+	React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaViewport>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaViewport>
+>(({ className, children, ...props }, ref) => {
+	return (
+		<ScrollAreaPrimitive.Viewport
+			ref={ref}
+			className={cn("h-full w-full rounded-[inherit]", className)}
+			{...props}
+		>
+			{children}
+		</ScrollAreaPrimitive.Viewport>
+	);
+});
+
+ScrollAreaViewport.displayName =
+	ScrollAreaPrimitive.ScrollAreaViewport.displayName;
+
+const ScrollBar = React.forwardRef<
+	React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
 >(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className,
-    )}
-    orientation={orientation}
-    ref={ref}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-neutral-500/40" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+	<ScrollAreaPrimitive.ScrollAreaScrollbar
+		ref={ref}
+		orientation={orientation}
+		className={cn(
+			"flex touch-none select-none transition-colors",
+			orientation === "vertical" &&
+				"h-full w-2.5 border-l py-6 border-l-transparent p-[1px]",
+			orientation === "horizontal" &&
+				"h-2.5 flex-col border-t border-t-transparent p-[1px]",
+			className,
+		)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-black/15 dark:bg-white/15" />
+	</ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar };
+export { ScrollArea, ScrollAreaViewport, ScrollBar };
diff --git a/apps/website/src/ui/star-github-project-button.tsx b/apps/website/src/ui/star-github-project-button.tsx
index ae6f714..926e41b 100644
--- a/apps/website/src/ui/star-github-project-button.tsx
+++ b/apps/website/src/ui/star-github-project-button.tsx
@@ -11,12 +11,12 @@ export default async function StarGithubProjectButton({
 	return (
 		<Link href={CUICUI_GITHUB_URL}>
 			<GradientContainer
-				classNameChild="group-hover:opacity-80 transition-opacity duration-150 ease-in-out px-4 py-2 flex gap-2 items-center text-sm text-neutral-500 font-medium relative"
+				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" />
-				Star this project on GitHub
+				<span className="md:inline hidden">Star this project on GitHub</span>
 				{await getGithubStarCountComponent()}
 			</GradientContainer>
 		</Link>
@@ -30,7 +30,7 @@ const getGithubStarCountComponent = async () => {
 		const githubRepoData = await fetch(apiGithub).then((res) => res.json());
 		const numberOfStars = githubRepoData.stargazers_count;
 		return (
-			<div className="flex items-center gap-0.5 absolute top-1/2 -translate-y-1/2 right-0.5">
+			<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>
diff --git a/apps/website/src/ui/theme-switcher.tsx b/apps/website/src/ui/theme-switcher.tsx
deleted file mode 100644
index f5613d5..0000000
--- a/apps/website/src/ui/theme-switcher.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-"use client";
-
-import { MoonIcon, SunIcon, SunMoonIcon } from "lucide-react";
-import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
-
-export default () => {
-  const [mounted, setMounted] = useState(false);
-  const { setTheme } = useTheme();
-
-  // useEffect only runs on the client, so now we can safely show the UI
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return null;
-  }
-
-  return (
-    <div className="flex gap-0.5 rounded-lg border border-neutral-500/15 bg-neutral-500/5 stroke-neutral-800 p-px ">
-      {/* <ThemeSwitch onThemeSwitch={setTheme} themeMode={themeMode} /> */}
-      <button
-        className=" rounded-md p-1 transition-colors hover:bg-neutral-500/10"
-        onClick={() => setTheme("dark")}
-        type="button"
-      >
-        <MoonIcon className="size-5 dark:stroke-neutral-400" />
-      </button>
-      <button
-        className=" rounded-md p-1 transition-colors hover:bg-neutral-500/20"
-        onClick={() => setTheme("light")}
-        type="button"
-      >
-        <SunIcon className="size-5 dark:stroke-neutral-400" />
-      </button>
-      <button
-        className=" rounded-md p-1 transition-colors hover:bg-neutral-500/20"
-        onClick={() => setTheme("system")}
-        type="button"
-      >
-        <SunMoonIcon className="size-5 dark:stroke-neutral-400" />
-      </button>
-    </div>
-  );
-};
diff --git a/packages/ui/cuicui/application-ui/battery/battery-indicator/battery-indicator.tsx b/packages/ui/cuicui/application-ui/battery/battery-indicator/battery-indicator.tsx
index 65b8d9b..b357099 100644
--- a/packages/ui/cuicui/application-ui/battery/battery-indicator/battery-indicator.tsx
+++ b/packages/ui/cuicui/application-ui/battery/battery-indicator/battery-indicator.tsx
@@ -75,7 +75,7 @@ export const BatteryIndicator: React.FC<BatteryInfoProps> = ({
 	return (
 		<div
 			className={cn(
-				"flex items-center space-x-2 rounded-2xl border border-neutral-400/10 bg-white px-3 py-1 shadow-sm transition-all duration-300 hover:shadow-md dark:bg-neutral-500/20",
+				"inline-flex items-center space-x-2 rounded-2xl border border-neutral-400/10 bg-white px-3 py-1 shadow-sm transition-all duration-300 hover:shadow-md dark:bg-neutral-500/20",
 				className,
 			)}
 		>
diff --git a/packages/ui/cuicui/common-ui/buttons/buttons.category.tsx b/packages/ui/cuicui/common-ui/buttons/buttons.category.tsx
index 8c11b77..f54eac4 100644
--- a/packages/ui/cuicui/common-ui/buttons/buttons.category.tsx
+++ b/packages/ui/cuicui/common-ui/buttons/buttons.category.tsx
@@ -5,7 +5,8 @@ import PreviewBeforeEffectButtonDefault from "@/cuicui/common-ui/buttons/before-
 import PreviewBeforeEffectButtonHoverOnly from "@/cuicui/common-ui/buttons/before-effect-button/preview-hover-only";
 import GrowingButtonVariant1 from "@/cuicui/common-ui/buttons/growing-button/variant1";
 import ModernAnimatedButtonVariant1 from "@/cuicui/common-ui/buttons/modern-animated-button/variant1";
-import ShinyRotatingBorderButtonVariant1 from "@/cuicui/common-ui/buttons/shiny-rotating-border-button/variant1";
+
+import { PreviewShinyRotatingBorderButton } from "@/cuicui/common-ui/buttons/shiny-rotating-border-button/preview.shiny-rotating-border-button";
 
 export const buttonsCategory: CategoryType = {
 	slug: "buttons",
@@ -14,7 +15,7 @@ export const buttonsCategory: CategoryType = {
 	releaseDateCategory: new Date("2024-08-09"),
 	icon: SquareArrowRightIcon,
 	previewCategory: {
-		component: <ShinyRotatingBorderButtonVariant1 />,
+		component: <PreviewShinyRotatingBorderButton />,
 		previewScale: 1.5,
 	},
 	componentList: [
@@ -69,8 +70,9 @@ export const buttonsCategory: CategoryType = {
 			variantList: [
 				{
 					name: "Default",
-					component: <ShinyRotatingBorderButtonVariant1 />,
-					slugPreviewFile: "variant1",
+					component: <PreviewShinyRotatingBorderButton />,
+					slugPreviewFile: "preview.shiny-rotating-border-button",
+					slugComponentFile: "component.shiny-rotating-border-button",
 				},
 			],
 			isIframed: true,
diff --git a/packages/ui/cuicui/common-ui/buttons/shiny-rotating-border-button/component.shiny-rotating-border-button.tsx b/packages/ui/cuicui/common-ui/buttons/shiny-rotating-border-button/component.shiny-rotating-border-button.tsx
new file mode 100644
index 0000000..905368a
--- /dev/null
+++ b/packages/ui/cuicui/common-ui/buttons/shiny-rotating-border-button/component.shiny-rotating-border-button.tsx
@@ -0,0 +1,73 @@
+"use client";
+import { cn } from "@/cuicui/utils/cn/cn";
+import { motion } from "framer-motion";
+import type { HTMLAttributes, ReactNode } from "react";
+
+export const ShinyRotatingBorderButton = ({
+	children,
+	className,
+	...props
+}: Readonly<{ children: ReactNode; className?: string }> &
+	HTMLAttributes<HTMLButtonElement>) => {
+	return (
+		<button
+			className={cn(
+				"group relative overflow-hidden rounded-full bg-neutral-200 p-px transition-transform active:scale-95 dark:bg-neutral-600",
+				className,
+			)}
+			type="button"
+			{...props}
+		>
+			<motion.span
+				animate={{
+					top: ["50%", "0%", "50%", "100%", "50%"],
+					left: ["0%", "50%", "100%", "50%", "0%"],
+				}}
+				className="-translate-x-1/2 -translate-y-1/2 absolute z-10 size-8 transform-gpu blur-sm transition-transform duration-300 group-hover:scale-[3]"
+				initial={{ top: 0, left: 0 }}
+				transition={{
+					duration: 3,
+					ease: "linear",
+					repeat: Number.POSITIVE_INFINITY,
+				}}
+			>
+				<motion.span
+					animate={{
+						rotate: ["0deg", "360deg"],
+					}}
+					className="block size-full transform-gpu rounded-full"
+					style={{
+						background:
+							"linear-gradient(135deg, #3BC4F2, #7A69F9, #F26378, #F5833F)",
+					}}
+					transition={{
+						duration: 3,
+						ease: "linear",
+						repeat: Number.POSITIVE_INFINITY,
+					}}
+				/>
+			</motion.span>
+			<span className="relative z-10 block rounded-full bg-white px-3 py-1 dark:bg-neutral-800">
+				<motion.span
+					animate={{
+						backgroundImage: [
+							"linear-gradient(90deg, #3BC4F2, #7A69F9, #F26378, #F5833F)",
+							"linear-gradient(90deg, #F5833F,#3BC4F2, #7A69F9, #F26378)",
+							"linear-gradient(90deg, #F26378, #F5833F,#3BC4F2, #7A69F9)",
+							"linear-gradient(90deg, #7A69F9, #F26378, #F5833F,#3BC4F2)",
+							"linear-gradient(90deg, #3BC4F2, #7A69F9, #F26378, #F5833F)",
+						],
+					}}
+					className="transform-gpu bg-clip-text text-neutral-600 text-sm tracking-tighter transition-colors duration-500 group-hover:text-transparent dark:text-neutral-200"
+					transition={{
+						duration: 1,
+						ease: "linear",
+						repeat: Number.POSITIVE_INFINITY,
+					}}
+				>
+					{children}
+				</motion.span>
+			</span>
+		</button>
+	);
+};
diff --git a/packages/ui/cuicui/common-ui/buttons/shiny-rotating-border-button/preview.shiny-rotating-border-button.tsx b/packages/ui/cuicui/common-ui/buttons/shiny-rotating-border-button/preview.shiny-rotating-border-button.tsx
new file mode 100644
index 0000000..14cae08
--- /dev/null
+++ b/packages/ui/cuicui/common-ui/buttons/shiny-rotating-border-button/preview.shiny-rotating-border-button.tsx
@@ -0,0 +1,5 @@
+import { ShinyRotatingBorderButton } from "@/cuicui/common-ui/buttons/shiny-rotating-border-button/component.shiny-rotating-border-button";
+
+export const PreviewShinyRotatingBorderButton = () => {
+	return <ShinyRotatingBorderButton>Click</ShinyRotatingBorderButton>;
+};
diff --git a/packages/ui/cuicui/common-ui/buttons/shiny-rotating-border-button/variant1.tsx b/packages/ui/cuicui/common-ui/buttons/shiny-rotating-border-button/variant1.tsx
deleted file mode 100644
index 4cd2ef0..0000000
--- a/packages/ui/cuicui/common-ui/buttons/shiny-rotating-border-button/variant1.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-"use client";
-import { motion } from "framer-motion";
-
-export default function ShinyRotatingBorderButtonVariant1() {
-  return (
-    <button
-      className="group relative overflow-hidden rounded-full bg-neutral-200 p-px transition-transform active:scale-95 dark:bg-neutral-600"
-      type="button"
-    >
-      <motion.span
-        animate={{
-          top: ["50%", "0%", "50%", "100%", "50%"],
-          left: ["0%", "50%", "100%", "50%", "0%"],
-        }}
-        className="-translate-x-1/2 -translate-y-1/2 absolute z-10 size-8 transform-gpu blur-sm transition-transform duration-300 group-hover:scale-[3]"
-        initial={{ top: 0, left: 0 }}
-        transition={{
-          duration: 3,
-          ease: "linear",
-          repeat: Number.POSITIVE_INFINITY,
-        }}
-      >
-        <motion.span
-          animate={{
-            rotate: ["0deg", "360deg"],
-          }}
-          className="block size-full transform-gpu rounded-full"
-          style={{
-            background:
-              "linear-gradient(135deg, #3BC4F2, #7A69F9, #F26378, #F5833F)",
-          }}
-          transition={{
-            duration: 3,
-            ease: "linear",
-            repeat: Number.POSITIVE_INFINITY,
-          }}
-        />
-      </motion.span>
-      <span className="relative z-10 block rounded-full bg-white px-3 py-1 dark:bg-neutral-800">
-        <motion.span
-          animate={{
-            backgroundImage: [
-              "linear-gradient(90deg, #3BC4F2, #7A69F9, #F26378, #F5833F)",
-              "linear-gradient(90deg, #F5833F,#3BC4F2, #7A69F9, #F26378)",
-              "linear-gradient(90deg, #F26378, #F5833F,#3BC4F2, #7A69F9)",
-              "linear-gradient(90deg, #7A69F9, #F26378, #F5833F,#3BC4F2)",
-              "linear-gradient(90deg, #3BC4F2, #7A69F9, #F26378, #F5833F)",
-            ],
-          }}
-          className="transform-gpu bg-clip-text text-neutral-600 text-sm tracking-tighter transition-colors duration-500 group-hover:text-transparent dark:text-neutral-200"
-          transition={{
-            duration: 1,
-            ease: "linear",
-            repeat: Number.POSITIVE_INFINITY,
-          }}
-        >
-          variant1
-        </motion.span>
-      </span>
-    </button>
-  );
-}
diff --git a/packages/ui/cuicui/hooks/use-step/preview-use-step.tsx b/packages/ui/cuicui/hooks/use-step/preview-use-step.tsx
index 6fefece..56fa767 100644
--- a/packages/ui/cuicui/hooks/use-step/preview-use-step.tsx
+++ b/packages/ui/cuicui/hooks/use-step/preview-use-step.tsx
@@ -14,7 +14,7 @@ export function PreviewUseStep() {
 	} = helpers;
 
 	return (
-		<>
+		<div className="cuicui-default-style">
 			<p>Current step is {currentStep}</p>
 			<p>Can go to previous step {canGoToPrevStep ? "yes" : "no"}</p>
 			<p>Can go to next step {canGoToNextStep ? "yes" : "no"}</p>
@@ -35,6 +35,6 @@ export function PreviewUseStep() {
 			>
 				Set to step 3
 			</button>
-		</>
+		</div>
 	);
 }
diff --git a/packages/ui/cuicui/other/mock-ups/laptops/component.mackbook.tsx b/packages/ui/cuicui/other/mock-ups/laptops/component.mackbook.tsx
new file mode 100644
index 0000000..d922141
--- /dev/null
+++ b/packages/ui/cuicui/other/mock-ups/laptops/component.mackbook.tsx
@@ -0,0 +1,39 @@
+import { cn } from "@/cuicui/utils/cn/cn";
+
+export function MacbookMockUp({
+	className,
+	children,
+	src,
+}: Readonly<{
+	className?: string;
+	children?: React.ReactNode;
+	src?: string;
+}>) {
+	return (
+		<div
+			className={cn(
+				"relative z-[1] mx-0 my-4 max-h-[434px] w-[740px]",
+				className,
+			)}
+		>
+			<div className="relative z-[1] mx-auto my-0 h-[418px] w-[618px] overflow-hidden rounded-[20px] border-2 border-[rgb(200,202,203)] px-[9px] pt-[9px] pb-[23px] [background:rgb(13,13,13)]">
+				{children || (
+					<img
+						alt="Macbook Pro background"
+						className="relative h-[375px] w-full rounded-t-[10px] border-2 border-[rgb(18,18,18)] border-solid bg-amber-200 bg-cover object-cover"
+						loading="lazy"
+						src={src}
+					/>
+				)}
+				<div className="absolute right-0 bottom-0 left-0 h-6 bg-gradient-to-b from-[#272727] to-[#0d0d0d]" />
+			</div>
+
+			<div className="-ml-8 absolute top-[11px] left-2/4 z-[2] h-3 w-16 rounded-br rounded-bl bg-[rgb(13,13,13)]" />
+			<div className="-mt-2.5 relative z-[9] h-6 w-[740px] rounded-[2px_2px_12px_12px] border-[1px_2px_0px] border-[rgb(160,163,167)] border-solid shadow-[rgb(108,112,116)_0px_-2px_8px_0px_inset] [background:radial-gradient(circle,rgb(226,227,228)_85%,rgb(200,202,203)_100%)] [border-image:initial]">
+				<div className="absolute top-0 left-1/2 ml-[-60px] h-2.5 w-[120px] rounded-b-[10px] shadow-[inset_0_0_4px_2px_#babdbf]" />
+			</div>
+			<div className="-bottom-0.5 absolute left-12 h-0.5 w-10 rounded-b-full bg-neutral-600" />
+			<div className="-bottom-0.5 absolute right-12 h-0.5 w-10 rounded-b-full bg-neutral-600" />
+		</div>
+	);
+}
diff --git a/packages/ui/cuicui/other/mock-ups/laptops/preview.mackbook.tsx b/packages/ui/cuicui/other/mock-ups/laptops/preview.mackbook.tsx
new file mode 100644
index 0000000..1590372
--- /dev/null
+++ b/packages/ui/cuicui/other/mock-ups/laptops/preview.mackbook.tsx
@@ -0,0 +1,5 @@
+import { MacbookMockUp } from "@/cuicui/other/mock-ups/laptops/component.mackbook";
+
+export function PreviewMackbook() {
+	return <MacbookMockUp src="https://devicescss.xyz/assets/img/bg-10.jpg" />;
+}
diff --git a/packages/ui/cuicui/other/mock-ups/laptops/variant1.tsx b/packages/ui/cuicui/other/mock-ups/laptops/variant1.tsx
deleted file mode 100644
index 474df3a..0000000
--- a/packages/ui/cuicui/other/mock-ups/laptops/variant1.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-export default function MacbookVariant1() {
-  return (
-    <div className="relative z-[1] mx-0 my-4 max-h-[434px] w-[740px]">
-      <div className="relative z-[1] mx-auto my-0 h-[418px] w-[618px] overflow-hidden rounded-[20px] border-2 border-[rgb(200,202,203)] px-[9px] pt-[9px] pb-[23px] [background:rgb(13,13,13)]">
-        <img
-          alt="Macbook Pro background"
-          className=" relative h-[375px] w-full rounded-t-[10px] border-2 border-[rgb(18,18,18)] border-solid bg-amber-200 bg-cover object-cover"
-          loading="lazy"
-          src="	https://devicescss.xyz/assets/img/bg-10.jpg"
-        />
-        <div className="absolute right-0 bottom-0 left-0 h-6 bg-gradient-to-b from-[#272727] to-[#0d0d0d]" />
-      </div>
-
-      <div className="-ml-8 absolute top-[11px] left-2/4 z-[2] h-3 w-16 rounded-br rounded-bl bg-[rgb(13,13,13)]" />
-      <div className="-mt-2.5 relative z-[9] h-6 w-[740px] rounded-[2px_2px_12px_12px] border-[1px_2px_0px] border-[rgb(160,163,167)] border-solid shadow-[rgb(108,112,116)_0px_-2px_8px_0px_inset] [background:radial-gradient(circle,rgb(226,227,228)_85%,rgb(200,202,203)_100%)] [border-image:initial]">
-        <div className="absolute top-0 left-1/2 ml-[-60px] h-2.5 w-[120px] rounded-b-[10px] shadow-[inset_0_0_4px_2px_#babdbf]" />
-      </div>
-      <div className="-bottom-0.5 absolute left-12 h-0.5 w-10 rounded-b-full bg-neutral-600" />
-      <div className="-bottom-0.5 absolute right-12 h-0.5 w-10 rounded-b-full bg-neutral-600" />
-    </div>
-  );
-}
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 51408a2..8840124 100644
--- a/packages/ui/cuicui/other/mock-ups/mock-ups.category.tsx
+++ b/packages/ui/cuicui/other/mock-ups/mock-ups.category.tsx
@@ -3,9 +3,9 @@ import type { CategoryType } from "@/lib/types/component";
 
 import { Airpods } from "@/cuicui/other/mock-ups/airpods/airpods";
 import { AirpodsPro } from "@/cuicui/other/mock-ups/airpods/airpods-pro";
-import MacbookVariant1 from "@/cuicui/other/mock-ups/laptops/variant1";
 import { GooglePixelVariant1 } from "@/cuicui/other/mock-ups/smartphone/variant1";
 import { Iphone14ProVariant2 } from "@/cuicui/other/mock-ups/smartphone/variant2";
+import { PreviewMackbook } from "@/cuicui/other/mock-ups/laptops/preview.mackbook";
 
 export const mockUpsCategory: CategoryType = {
 	slug: "mock-ups",
@@ -54,8 +54,9 @@ export const mockUpsCategory: CategoryType = {
 			variantList: [
 				{
 					name: "Macbook Pro",
-					component: <MacbookVariant1 />,
-					slugPreviewFile: "variant1",
+					component: <PreviewMackbook />,
+					slugPreviewFile: "preview.mackbook",
+					slugComponentFile: "component.mackbook",
 				},
 			],
 			inspiration: "Devices CSS",