From 6e72ae7c37eeeac951b5557e79609b01fde20407 Mon Sep 17 00:00:00 2001
From: Khalidnoori568 <khalidnoori568@gmail.com>
Date: Wed, 13 Aug 2025 16:45:10 +0430
Subject: [PATCH 1/2] Add notebook-card

---
 apps/web/app/page.tsx                         |   8 +-
 apps/web/components/gradient-editor.tsx       |   2 +-
 apps/web/components/notebook-editor.tsx       | 407 ++++++++++++++++++
 .../notebook-preview.style.css                | 106 +++++
 .../notebookcard-preview/notebook-preview.tsx |  72 ++++
 5 files changed, 592 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/components/notebook-editor.tsx
 create mode 100644 packages/ui/src/notebookcard-preview/notebook-preview.style.css
 create mode 100644 packages/ui/src/notebookcard-preview/notebook-preview.tsx

diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 7aca0bf..f7420fa 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -5,7 +5,7 @@ import "./page.module.css";
 import QuizMarkdownEditor from "../components/markdown-editor";
 import ChatgptEditor from "../components/chatgpt-editor";
 import TwitterEditor from "../components/twitter-editor";
-
+import NotebookEditor from "../components/notebook-editor";
 import GradientEditor from "../components/gradient-editor";
 import { CardSizeProvider } from "@repo/ui/context/CardSizeContext";
 
@@ -26,7 +26,10 @@ const tabs = [
     key: "twitter",
     label: "Twitter Card",
   },
-
+  {
+    key: "notebook",
+    label: "Notebook Card",
+  }
 ];
 
 export default function Home() {
@@ -39,6 +42,7 @@ export default function Home() {
         {tab === "chatgpt" ? <ChatgptEditor /> : null}
          {/* {tab === "gradient" ? <GradientEditor /> : null} */}
         {tab === "twitter" ? <TwitterEditor /> : null}
+        {tab === "notebook" ? <NotebookEditor /> : null}
      
       </CardSizeProvider>
     </MainHomeLayout>
diff --git a/apps/web/components/gradient-editor.tsx b/apps/web/components/gradient-editor.tsx
index 2e9d96b..6bfe529 100644
--- a/apps/web/components/gradient-editor.tsx
+++ b/apps/web/components/gradient-editor.tsx
@@ -6,7 +6,7 @@ import { CardSizeContext } from "@repo/ui/context/CardSizeContext";
 import SocialMediaController from "@repo/web-ui/SocialMediaController";
 const STORAGE_KEY = "gradient-editor-v1";
 
-const cardBgColor = "bg-white";
+const cardBgColor = "bg-yellow-200";
 const textColor = "text-gray-900";
 const borderColor = "border-gray-300";
 
diff --git a/apps/web/components/notebook-editor.tsx b/apps/web/components/notebook-editor.tsx
new file mode 100644
index 0000000..ee035c4
--- /dev/null
+++ b/apps/web/components/notebook-editor.tsx
@@ -0,0 +1,407 @@
+"use client";
+
+import { NotebookPreview } from "@repo/ui/notebookcard-preview/notebook-preview";
+import { useContext, useEffect, useState } from "react";
+import { DownloadButton } from "@repo/web-ui/download-button";
+import {
+  CardSizeContext,
+  CardSizeProvider,
+} from "@repo/ui/context/CardSizeContext";
+import SocialMediaController from "@repo/web-ui/SocialMediaController";
+
+const STORAGE_KEY = "notebookCardv1";
+
+const cardBgColor = "bg-violet-500";
+const textColor = "text-white";
+
+
+const componentSocialMapping = {
+  instagramPost: {
+    width: 1080 / 2,
+    height: 1080 / 2,
+    innerPaddingY: 1080 / 10,
+    scale: 1,
+  },
+  instagramStory: {
+    width: 1080 / 2,
+    height: 1920 / 2,
+    innerPaddingY: 1920 / 8,
+    scale: 1,
+  },
+  twitterPost: {
+    width: 1200 / 2,
+    height: 675 / 2,
+    innerPaddingY: 0,
+    scale: 0.7,
+  },
+  twitterHeader: {
+    width: (1500 / 2) * 1.2,
+    height: (500 / 2) * 1.2,
+    innerPaddingY: 0,
+    scale: 0.7,
+  },
+  facebookPost: {
+    width: (1200 / 2) * 1.3,
+    height: (630 / 2) * 1.3,
+    innerPaddingY: 630 / 10,
+    scale: 1,
+  },
+  facebookCover: {
+    width: 820,
+    height: 312,
+    innerPaddingY: 312 / 10,
+    scale: 0.7,
+  },
+  dribbleShot: {
+    width: (800 / 2) * 1.5,
+    height: (600 / 2) * 1.5,
+    innerPaddingY: 600 / 10,
+    scale: 1,
+  },
+  linkedinPost: {
+    width: 1200 / 1.5,
+    height: 627 / 1.5,
+    innerPaddingY: 627 / 10,
+    scale: 1,
+  },
+  linkedinCover: {
+    width: 1584 / 1.5,
+    height: 396 / 1.5,
+    innerPaddingY: 10,
+    scale: 0.5,
+  },
+};
+
+export default function NotebookEditor() {
+  const [loaded, setLoaded] = useState(false);
+
+  const [state, setState] = useState({
+    previewHeightPixels: 540,
+    previewWidthPixels: 540,
+    width: 540,
+    height: 540,
+    innerPaddingX: 30,
+    innerPaddingY: 50,
+    scale: 1,
+    exportScale: 1,
+    pageName: "postmaker.dev",
+    logoUrl: "/logo.svg",
+    logoUrlLabel: "Created with Postmaker.dev",
+    borderRadius: 8,
+    hasCardBorder: false,
+    isRtl: false,
+    title: "Prepare for interviews with ChatGPT",
+    items: [
+      "Generate practice questions",
+      "Talk through your responses",
+      "Practice interview scenarios",
+      "Get ideas to build rapport",
+      "Do a mock interview"
+    ],
+    showCheckboxes: true,
+  });
+
+  const {
+    width: width,
+    height: height,
+    innerPaddingX,
+    innerPaddingY,
+    pageName,
+    logoUrl,
+    logoUrlLabel,
+    borderRadius,
+    hasCardBorder,
+    isRtl,
+    title,
+    items,
+    showCheckboxes,
+    scale,
+    exportScale,
+  } = state;
+
+  // Load from localStorage on mount
+  // Save
+  useEffect(() => {
+    if (!loaded) return;
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  }, [loaded, state]);
+
+  // Save to localStorage whenever any value changes
+  // Load
+  useEffect(() => {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      setState(JSON.parse(saved));
+    }
+    setLoaded(true);
+  }, []);
+
+  const setStateValue = (key: string, value: any) => {
+    setState((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const handleItemChange = (index: number, value: string) => {
+    const newItems = [...items];
+    newItems[index] = value;
+    setStateValue("items", newItems);
+  };
+
+  const addItem = () => {
+    setStateValue("items", [...items, "New item"]);
+  };
+
+  const removeItem = (index: number) => {
+    const newItems = [...items];
+    newItems.splice(index, 1);
+    setStateValue("items", newItems);
+  };
+
+  return (
+    <div className="p-4 flex md:flex-row flex-col gap-2 w-full">
+      <div className="min-h-screen preview-left-panel">
+        <h2 className="preview-heading">Notebook Card</h2>
+        <p>Page Name:</p>
+        <input
+          className="w-full px-2 border rounded-md"
+          value={pageName}
+          name="pageName"
+          onChange={(e) => setStateValue(e.target.name, e.target.value)}
+          placeholder="Enter page name..."
+        />
+        <p>Logo URL:</p>
+        <input
+          className="w-full px-2 border rounded-md"
+          value={logoUrl}
+          name="logoUrl"
+          onChange={(e) => setStateValue(e.target.name, e.target.value)}
+          placeholder="Enter logo URL..."
+        />
+        <p>Logo URL Label:</p>
+        <input
+          className="w-full px-2 border rounded-md"
+          value={logoUrlLabel}
+          name="logoUrlLabel"
+          onChange={(e) => setStateValue(e.target.name, e.target.value)}
+          placeholder="Enter logo URL label..."
+        />
+        <p>Title:</p>
+        <input
+          className="w-full px-2 border rounded-md"
+          value={title}
+          name="title"
+          onChange={(e) => setStateValue(e.target.name, e.target.value)}
+          placeholder="Enter title..."
+        />
+        
+        <p>Checklist Items:</p>
+        {items.map((item, index) => (
+          <div key={index} className="flex mb-2">
+            <input
+              className="flex-1 px-1 border rounded-md mr-2"
+              value={item}
+              onChange={(e) => handleItemChange(index, e.target.value)}
+              placeholder="Enter item text..."
+            />
+            <button
+              onClick={() => removeItem(index)}
+              className="px-1 bg-red-400 rounded-md hover:bg-red-500"
+            >
+              Remove
+            </button>
+          </div>
+        ))}
+        <button
+          onClick={addItem}
+          className="mt-2 px-4 py-1 bg-blue-500 rounded-md hover:bg-blue-700"
+        >
+          Add Item
+        </button>
+
+        <div className="flex flex-col mt-4 border p-2 rounded-md">
+          <label className="flex items-center">
+            <input
+              type="checkbox"
+              checked={showCheckboxes}
+              name="showCheckboxes"
+              onChange={(e) => setStateValue(e.target.name, e.target.checked)}
+              className="mr-2"
+            />
+            Show Checkboxes
+          </label>
+        </div>
+
+        <div className="flex flex-col mt-4 border p-2 rounded-md">
+          <label className="block mb-2">
+            Preview Width: {width ? width : 0}px
+          </label>
+          <input
+            type="range"
+            min="40"
+            name="previewWidth"
+            max="1920"
+            value={width}
+            onChange={(e) =>
+              setStateValue(e.target.name, Number(e.target.value))
+            }
+            className="w-full"
+          />
+        </div>
+        <div className="flex flex-col mt-4 border p-2 rounded-md">
+          <label className="block mb-2">
+            Preview Height: {height ? height : 0}px
+          </label>
+          <input
+            type="range"
+            min="40"
+            name="previewHeight"
+            max="1920"
+            value={height}
+            onChange={(e) =>
+              setStateValue(e.target.name, Number(e.target.value))
+            }
+            className="w-full"
+          />
+        </div>
+        <div className="flex flex-col mt-4 border p-2 rounded-md">
+          <label className="block mb-2">
+            Content Scale: {scale ? scale : 0}x
+          </label>
+          <input
+            type="range"
+            min="0"
+            name="scale"
+            max="300"
+            value={scale * 100}
+            onChange={(e) =>
+              setStateValue(e.target.name, Number(e.target.value) / 100)
+            }
+            className="w-full"
+          />
+        </div>
+        <div className="flex flex-col mt-4 border p-2 rounded-md">
+          <label className="block mb-2">Border Radius: {borderRadius}px</label>
+          <input
+            type="range"
+            min="0"
+            max="50"
+            name="borderRadius"
+            value={borderRadius}
+            onChange={(e) =>
+              setStateValue(e.target.name, Number(e.target.value))
+            }
+            className="w-full"
+          />
+        </div>
+
+        <div className="flex flex-col mt-4 border p-2 rounded-md">
+          <label className="flex items-center">
+            <input
+              type="checkbox"
+              checked={hasCardBorder}
+              name="hasCardBorder"
+              onChange={(e) => setStateValue(e.target.name, e.target.checked)}
+              className="mr-2"
+            />
+            Has Card Border
+          </label>
+        </div>
+        <div className="flex flex-col mt-4 border p-2 rounded-md">
+          <label className="flex items-center">
+            <input
+              type="checkbox"
+              checked={isRtl}
+              name="isRtl"
+              onChange={(e) => setStateValue(e.target.name, e.target.checked)}
+              className="mr-2"
+            />
+            Is RTL
+          </label>
+        </div>
+
+        <div className="flex flex-col mt-4 border p-2 rounded-md">
+          <label className="block mb-2">
+            Inner Padding X: {innerPaddingX}px
+          </label>
+          <input
+            type="range"
+            min="0"
+            max="150"
+            name="innerPaddingX"
+            value={innerPaddingX}
+            onChange={(e) =>
+              setStateValue(e.target.name, Number(e.target.value))
+            }
+            className="w-full"
+          />
+        </div>
+        <div className="flex flex-col mt-4 border p-2 rounded-md">
+          <label className="block mb-2">
+            Inner Padding Y: {innerPaddingY}px
+          </label>
+          <input
+            type="range"
+            min="0"
+            max="1920"
+            value={innerPaddingY}
+            name="innerPaddingY"
+            onChange={(e) =>
+              setStateValue(e.target.name, Number(e.target.value))
+            }
+            className="w-full"
+          />
+        </div>
+      </div>
+      {/* Resizable Preview Panel */}
+      <div className="preview-right-panel">
+        <SocialMediaController
+          setStateValue={setStateValue}
+          exportScale={exportScale}
+          CardSizeContext={CardSizeContext}
+          componentSocialMapping={componentSocialMapping}
+        />
+        <div
+          style={{
+            zIndex: 10,
+            backgroundColor: "transparent",
+            width: `${width}px`,
+            height: `${height}px`,
+            overflow: "clip",
+          }}
+          className="transition-all duration-200 select-none preview-container-drag"
+        >
+          <NotebookPreview
+            logoUrl={logoUrl}
+            logoUrlLabel={logoUrlLabel}
+            pageName={pageName}
+            title={title}
+            items={items}
+            showCheckboxes={showCheckboxes}
+            scale={scale}
+            styles={{
+              zIndex: 10,
+              height: "100%",
+              direction: isRtl ? "rtl" : "ltr",
+              ...(innerPaddingX
+                ? {
+                    paddingLeft: `${innerPaddingX}px`,
+                    paddingRight: `${innerPaddingX}px`,
+                  }
+                : {}),
+              ...(innerPaddingY
+                ? {
+                    paddingTop: `${innerPaddingY}px`,
+                    paddingBottom: `${innerPaddingY}px`,
+                  }
+                : {}),
+              ...(borderRadius ? { borderRadius: `${borderRadius}px` } : {}),
+            }}
+            className={`w-full ${
+              hasCardBorder ? "border" : ""
+            } shadow-md transition-colors duration-300 ${cardBgColor} ${textColor} `}
+          />
+        </div>
+      </div>
+      <DownloadButton className="show-mobile bg-gray-700 shadow-2xl text-white p-4 rounded-md hover:bg-gray-800" />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/packages/ui/src/notebookcard-preview/notebook-preview.style.css b/packages/ui/src/notebookcard-preview/notebook-preview.style.css
new file mode 100644
index 0000000..cd958b1
--- /dev/null
+++ b/packages/ui/src/notebookcard-preview/notebook-preview.style.css
@@ -0,0 +1,106 @@
+/* Main container with purple background */
+.notebook-preview-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  /* background-color: #8b5cf6; bg-purple-500 */
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+/* Notebook page with enhanced shadow */
+.notebook-page {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: #f8f1e5; /* Keeping notebook color */
+  background-image: linear-gradient(#e5dfd3 1px, transparent 1px);
+  background-size: 100% 20px;
+  padding: 30px 25px 25px 45px;
+  box-shadow: 
+    0 6px 12px rgba(0, 0, 0, 0.25), /* Stronger shadow for contrast */
+    0 10px 24px rgba(0, 0, 0, 0.15);
+  border-radius: 2px;
+  font-family: 'Reenie Beanie', cursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+/* Spiral binding */
+.notebook-page::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 25px;
+  background: repeating-linear-gradient(
+    to bottom,
+    #d9c7a7,
+    #d9c7a7 18px,
+    #f8f1e5 18px,
+    #f8f1e5 36px
+  );
+  border-right: 1px solid #d9c7a7;
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Title styling */
+.notebook-title {
+  font-size: 22px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  color: #333;
+  position: relative;
+  display: inline-block;
+}
+
+.notebook-title::after {
+  content: "";
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: #333;
+  transform: rotate(-1deg);
+}
+
+/* Checklist items */
+.notebook-items {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.notebook-item {
+  font-size: 18px;
+  margin-bottom: 10px;
+  color: #333;
+  display: flex;
+  align-items: center;
+  position: relative;
+  left: -5px;
+  line-height: 1.3;
+}
+
+.checkbox {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid #333;
+  margin-right: 12px;
+  position: relative;
+  border-radius: 3px;
+}
+
+.checkmark {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  width: 16px;
+  height: 16px;
+  fill: #333;
+}
+
+
diff --git a/packages/ui/src/notebookcard-preview/notebook-preview.tsx b/packages/ui/src/notebookcard-preview/notebook-preview.tsx
new file mode 100644
index 0000000..3fe4ef1
--- /dev/null
+++ b/packages/ui/src/notebookcard-preview/notebook-preview.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import React from "react";
+import { CardContainer } from "../layouts/card-container";
+import "./notebook-preview.style.css";
+
+interface NotebookPreviewProps {
+  scale?: number;
+  className?: string;
+  styles?: React.CSSProperties;
+  pageName?: string;
+  logoUrl?: string;
+  logoUrlLabel?: string;
+
+  // component props
+  title: string;
+  items: string[];
+  showCheckboxes?: boolean;
+}
+
+export const NotebookPreview: React.FC<NotebookPreviewProps> = ({
+  scale = 1,
+  className = "",
+  styles = {},
+  pageName,
+  logoUrl = "",
+  logoUrlLabel = "",
+  
+  // component props:
+  title = "Prepare for interviews with ChatGPT",
+  items = [
+    "Generate practice questions",
+    "Talk through your responses",
+    "Practice interview scenarios",
+    "Get ideas to build rapport",
+    "Do a mock interview"
+  ],
+  showCheckboxes = true,
+}) => {
+  return (
+    <CardContainer
+      className={`${className} bg-violet-500`} 
+      styles={styles}
+      pageName={pageName}
+      logoUrl={logoUrl}
+      logoUrlLabel={logoUrlLabel}
+      lightMode={true}
+      scale={scale}
+    >
+      <div className="notebook-preview-container">
+        <div className="notebook-page">
+          <h1 className="notebook-title">{title}</h1>
+          <ul className="notebook-items">
+            {items.map((item, index) => (
+              <li key={index} className="notebook-item">
+                {showCheckboxes && (
+                  <span className="checkbox">
+                    <svg viewBox="0 0 24 24" className="checkmark">
+                      <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"></path>
+                    </svg>
+                  </span>
+                )}
+                {item}
+              </li>
+            ))}
+          </ul>
+          
+        </div>
+      </div>
+    </CardContainer>
+  );
+};
\ No newline at end of file

From 4cefeb5b82d295133ad60c2f4222a291aec7c487 Mon Sep 17 00:00:00 2001
From: Khalidnoori568 <khalidnoori568@gmail.com>
Date: Tue, 19 Aug 2025 15:00:10 +0430
Subject: [PATCH 2/2] new update

---
 apps/web/app/page.tsx                         |  54 +-
 apps/web/components/common/index.tsx          | 136 +++++
 apps/web/components/gradient-editor.tsx       | 509 ++++++++--------
 apps/web/components/notebook-editor.tsx       | 379 ++++++------
 apps/web/components/twitter-editor.tsx        | 443 --------------
 apps/web/components/ui/aspect-ratio.tsx       |   7 +
 apps/web/components/ui/input.tsx              |  22 +
 apps/web/components/ui/slider.tsx             |  28 +
 apps/web/components/ui/switch.tsx             |  29 +
 apps/web/components/ui/tabs.tsx               |  57 ++
 apps/web/components/ui/textarea.tsx           |  22 +
 apps/web/components/ui/toggle.tsx             |  45 ++
 apps/web/components/ui/use-mobile.tsx         |  19 +
 apps/web/components/x-editor.tsx              | 544 ++++++++++++++++++
 apps/web/lib/cn.ts                            |  36 ++
 apps/web/package.json                         |  12 +-
 .../gradient-preview/PastelGradientCanvas.tsx |   1 +
 .../src/gradient-preview/gradient-preview.tsx |   5 +-
 .../notebook-preview.style.css                |   4 +-
 .../notebookcard-preview/notebook-preview.tsx |   1 -
 .../x-preview.style.css}                      |  74 ++-
 .../x-preview.tsx}                            | 144 +++--
 pnpm-lock.yaml                                | 458 +++++++++++++++
 23 files changed, 2037 insertions(+), 992 deletions(-)
 create mode 100644 apps/web/components/common/index.tsx
 delete mode 100644 apps/web/components/twitter-editor.tsx
 create mode 100644 apps/web/components/ui/aspect-ratio.tsx
 create mode 100644 apps/web/components/ui/input.tsx
 create mode 100644 apps/web/components/ui/slider.tsx
 create mode 100644 apps/web/components/ui/switch.tsx
 create mode 100644 apps/web/components/ui/tabs.tsx
 create mode 100644 apps/web/components/ui/textarea.tsx
 create mode 100644 apps/web/components/ui/toggle.tsx
 create mode 100644 apps/web/components/ui/use-mobile.tsx
 create mode 100644 apps/web/components/x-editor.tsx
 create mode 100644 apps/web/lib/cn.ts
 rename packages/ui/src/{twitter-preview/twitter-preview.style.css => x-preview/x-preview.style.css} (63%)
 rename packages/ui/src/{twitter-preview/twitter-preview.tsx => x-preview/x-preview.tsx} (50%)

diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index f7420fa..cbff035 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,10 +1,11 @@
 "use client";
 import { MainHomeLayout } from "@repo/web-ui/layout";
-import React, { useState } from "react";
+import React, { useCallback, Suspense } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
 import "./page.module.css";
 import QuizMarkdownEditor from "../components/markdown-editor";
 import ChatgptEditor from "../components/chatgpt-editor";
-import TwitterEditor from "../components/twitter-editor";
+import XEditor from "../components/x-editor";
 import NotebookEditor from "../components/notebook-editor";
 import GradientEditor from "../components/gradient-editor";
 import { CardSizeProvider } from "@repo/ui/context/CardSizeContext";
@@ -18,33 +19,50 @@ const tabs = [
     key: "chatgpt",
     label: "ChatGPT Card",
   },
-  // {
-  //   key: "gradient",
-  //   label: "Gradient Card",
-  // },
   {
-    key: "twitter",
-    label: "Twitter Card",
+    key: "gradient",
+    label: "Gradient Card",
+  },
+  {
+    key: "x",
+    label: "X Card",
   },
   {
     key: "notebook",
     label: "Notebook Card",
-  }
+  },
+
 ];
 
-export default function Home() {
-  const [tab, setTab] = useState("markdown");
+function HomeContent() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  
+  const currentTab = searchParams.get("t") || "markdown";
+  
+  const setTab = useCallback((newTab: string) => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("t", newTab);
+    router.push(`?${params.toString()}`);
+  }, [searchParams, router]);
 
   return (
-    <MainHomeLayout tab={tab} tabs={tabs} setTab={setTab}>
+    <MainHomeLayout tab={currentTab} tabs={tabs} setTab={setTab}>
       <CardSizeProvider>
-        {tab === "markdown" ? <QuizMarkdownEditor /> : null}
-        {tab === "chatgpt" ? <ChatgptEditor /> : null}
-         {/* {tab === "gradient" ? <GradientEditor /> : null} */}
-        {tab === "twitter" ? <TwitterEditor /> : null}
-        {tab === "notebook" ? <NotebookEditor /> : null}
-     
+        {currentTab === "markdown" ? <QuizMarkdownEditor /> : null}
+        {currentTab === "chatgpt" ? <ChatgptEditor /> : null}
+        {currentTab === "gradient" ? <GradientEditor /> : null}
+        {currentTab === "x" ? <XEditor /> : null}
+        {currentTab === "notebook" ? <NotebookEditor /> : null}
       </CardSizeProvider>
     </MainHomeLayout>
   );
+}
+
+export default function Home() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <HomeContent />
+    </Suspense>
+  );
 }
\ No newline at end of file
diff --git a/apps/web/components/common/index.tsx b/apps/web/components/common/index.tsx
new file mode 100644
index 0000000..6452dd0
--- /dev/null
+++ b/apps/web/components/common/index.tsx
@@ -0,0 +1,136 @@
+"use client";
+import { Slider } from "../ui/slider";
+import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
+import { cn } from "../../lib/cn";
+
+function SliderBox({
+  keyName,
+  value,
+  label,
+  min,
+  max,
+  unit,
+  widthWrapper = false,
+  formatValue = false,
+  setStateValue,
+}: {
+  keyName: string;
+  value: number;
+  label: string;
+  min: number;
+  max: number;
+  unit?: string;
+  formatValue?: boolean;
+  widthWrapper?: boolean;
+  setStateValue: (name: string, value: any) => void;
+}) {
+  const comp =  (
+    <>
+      <label className="block mb-2">
+        {label || <span>{keyName}</span>}:{" "}
+        {formatValue ? (
+          <span>{new Intl.NumberFormat().format(value)}</span>
+        ) : (
+          value
+        )}
+        {unit && <span className="">{unit}</span>}
+      </label>
+      <Slider
+        min={min}
+        max={max}
+        name={keyName}
+        value={[value]}
+        onValueChange={(val) => setStateValue(keyName, val)}
+        className="w-full"
+      />
+    </>
+  );
+
+  if (widthWrapper) {
+    return <WithWrapper>{comp}</WithWrapper>;
+  }
+  return comp;
+}
+
+function DrawInput({
+  keyName,
+  value,
+  placeholder,
+  label,
+  onChange: setStateValue,
+  isTextArea = false,
+  type = "text",
+  className = "",
+}: {
+  keyName: string;
+  value: string;
+  placeholder?: string;
+  label?: React.ReactNode;
+  onChange: (name: string, value: any) => void;
+  isTextArea?: boolean;
+  type?: string;
+  className?: string;
+}) {
+  return (
+    <div className={cn("mb-4", className)}>
+      <label className="block">{label || <span>{keyName}</span>}:</label>
+      {isTextArea ? (
+        <Textarea
+          value={value}
+          onChange={(e) => setStateValue(keyName, e.target.value)}
+          className="w-full px-2 border rounded-md"
+          placeholder={placeholder}
+        />
+      ) : (
+        <Input
+          type={type}
+          value={value}
+          onChange={(e) => setStateValue(keyName, e.target.value)}
+          className="w-full px-2 border rounded-md"
+          placeholder={placeholder}
+        />
+      )}
+    </div>
+  );
+}
+
+function WithWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col mt-4 border p-2 rounded-md">{children}</div>
+  );
+}
+
+function CheckBox({
+  keyName,
+  value,
+  label,
+  setStateValue,
+  widthWrapper = false,
+}: {
+  keyName: string;
+  value: boolean;
+  label: string;
+  widthWrapper?: boolean;
+  setStateValue: (name: string, value: any) => void;
+}) {
+  const component = (
+    <label className="flex items-center">
+      <input
+        type="checkbox"
+        checked={value}
+        name={keyName}
+        onChange={(e) => setStateValue(keyName, e.target.checked)}
+        className="mr-2"
+      />
+      {label || <span>{keyName}</span>}
+    </label>
+  );
+
+  if (widthWrapper) {
+    return <WithWrapper>{component}</WithWrapper>;
+  }
+  return component;
+}
+
+export { SliderBox, DrawInput, CheckBox };
diff --git a/apps/web/components/gradient-editor.tsx b/apps/web/components/gradient-editor.tsx
index 6bfe529..3fa6c09 100644
--- a/apps/web/components/gradient-editor.tsx
+++ b/apps/web/components/gradient-editor.tsx
@@ -4,6 +4,11 @@ import { useContext, useEffect, useState } from "react";
 import { DownloadButton } from "@repo/web-ui/download-button";
 import { CardSizeContext } from "@repo/ui/context/CardSizeContext";
 import SocialMediaController from "@repo/web-ui/SocialMediaController";
+
+import { Cog, Delete, Move, Package2, Trash2 } from "lucide-react";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "./ui/tabs";
+import { SliderBox, DrawInput, CheckBox } from "./common";
+
 const STORAGE_KEY = "gradient-editor-v1";
 
 const cardBgColor = "bg-yellow-200";
@@ -67,7 +72,6 @@ const componentSocialMapping = {
   },
 };
 
-
 const gradientTypes = [
   { label: "Default", value: "default" },
   { label: "Nano", value: "nano" },
@@ -144,284 +148,265 @@ export default function GradientEditor() {
     setLoaded(true);
   }, []);
 
+  const deleteStorage = () => {
+    localStorage.removeItem(STORAGE_KEY);
+    alert("Storage cleared! Reloading the page.");
+    window.location.reload();
+  };
+
   const setStateValue = (key: string, value: any) => {
     setState((prev) => ({ ...prev, [key]: value }));
   };
 
   return (
     <div className="p-4 flex md:flex-row flex-col gap-2 w-full">
-      <div className="min-h-screen preview-left-panel">
+      <div className="min-h-screen preview-left-panel relative">
+        <button
+          onClick={deleteStorage}
+          className="absolute top-2 right-1 text-white  rounded-md hover:text-black cursor-pointer"
+        >
+          <Trash2 size={16} className="inline-block mr-1" />
+        </button>
         <h2 className="preview-heading">Gradient Card</h2>
-        <p>Page Name:</p>
-        <input
-          className="w-full px-2 border rounded-md"
-          value={pageName}
-          name="pageName"
-          onChange={(e) => setStateValue(e.target.name, e.target.value)}
-          placeholder="Enter page name..."
-        />
-        <p>Logo URL:</p>
-        <input
-          className="w-full px-2 border rounded-md"
-          value={logoUrl}
-          name="logoUrl"
-          onChange={(e) => setStateValue(e.target.name, e.target.value)}
-          placeholder="Enter logo URL..."
-        />
-        <p>Logo URL Label:</p>
-        <input
-          className="w-full px-2 border rounded-md"
-          value={logoUrlLabel}
-          name="logoUrlLabel"
-          onChange={(e) => setStateValue(e.target.name, e.target.value)}
-          placeholder="Enter logo URL label..."
-        />
-
 
-        {/* gradient types select */}
-        <p>Gradient Type:</p>
-        <select
-          className="w-full px-2 border rounded-md"
-          value={gradientType}
-          name="gradientType"
-          onChange={(e) => {
-            if (e.target.value === "conic") {
-              setStateValue("blurAmount", 40);
-            } else {
-              setStateValue("blurAmount", 0);
-            }
-              setStateValue(e.target.name, e.target.value);
+        {/* Tabs */}
+        <Tabs defaultValue="card" className="w-full">
+          <TabsList className="mb-4 border-b">
+            <TabsTrigger value="card" className="mr-2">
+              <Package2 size={16} className="inline-block mr-1" />
+            </TabsTrigger>
+            <TabsTrigger value="settings" className="mr-2">
+              <Cog size={16} className="inline-block mr-1" />
+            </TabsTrigger>
+            <TabsTrigger value="page" className="mr-2">
+              <Move size={16} className="inline-block mr-1" />
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="card">
+            {/* gradient types select */}
+            <p>Gradient Type:</p>
+            <select
+              className="w-full px-2 border rounded-md mb-4"
+              value={gradientType}
+              name="gradientType"
+              onChange={(e) => {
+                if (e.target.value === "conic") {
+                  setStateValue("blurAmount", 40);
+                } else {
+                  setStateValue("blurAmount", 0);
+                }
+                setStateValue(e.target.name, e.target.value);
+              }}
+            >
+              {gradientTypes.map((type) => (
+                <option key={type.value} value={type.value}>
+                  {type.label}
+                </option>
+              ))}
+            </select>
+            {gradientType === "custom" && (
+              <>
+                <DrawInput
+                  keyName="customImage"
+                  value={customImage}
+                  placeholder="Enter custom image URL..."
+                  label="Custom Image URL"
+                  onChange={setStateValue}
+                  isTextArea={false}
+                  className="mt-4"
+                />
+              </>
+            )}
+            {/* Blur Amount */}
 
-          }}
-        >
-          {gradientTypes.map((type) => (
-            <option key={type.value} value={type.value}>
-              {type.label}
-            </option>
-          ))}
-        </select>
- {gradientType === "custom" && (
-          <>
-            <p>Custom Image URL:</p>
-            <input
-              className="w-full px-2 border rounded-md"
-              value={customImage}
-              name="customImage"
-              onChange={(e) => setStateValue(e.target.name, e.target.value)}
-              placeholder="Enter custom image URL..."
+            <SliderBox
+              keyName="blurAmount"
+              label="Blur Amount"
+              value={blurAmount || 0}
+              unit="px"
+              min={0}
+              max={100}
+              setStateValue={(name, value) =>
+                setStateValue(name, Number(value))
+              }
+            />
+            <DrawInput
+              keyName="title"
+              value={title}
+              placeholder="Enter title..."
+              label="Title"
+              onChange={setStateValue}
+              isTextArea={false}
+              className="mt-4"
             />
-          </>
-        )}
-        {/* Blur Amount */}
-        <p>Blur Amount: {blurAmount}px</p>
-        <input
-          type="range"
-          min="0"
-          name="blurAmount"
-          max="100"
-          value={blurAmount || 0}
-          onChange={(e) =>
-            setStateValue(e.target.name, Number(e.target.value))
-          }
-          className="w-full"
-        />
 
-       
-        <p>Title:</p>
-        <input
-          className="w-full px-2 border rounded-md"
-          value={title}
-          name="title"
-          onChange={(e) => setStateValue(e.target.name, e.target.value)}
-          placeholder="Enter title..."
-        />
+            <DrawInput
+              keyName="text"
+              value={text}
+              placeholder="Enter subtitle..."
+              label="Subtitle"
+              onChange={setStateValue}
+              isTextArea={false}
+              className=""
+            />
 
-        <p>Subtitle:</p>
-        <input
-          className="w-full px-2 border rounded-md"
-          value={text}
-          name="text"
-          onChange={(e) => setStateValue(e.target.name, e.target.value)}
-          placeholder="Enter subtitle..."
-        />
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              {/* Checkbox */}
+              <CheckBox
+                keyName="rounded"
+                value={rounded}
+                label="Rounded Gradient"
+                setStateValue={setStateValue}
+              />
+            </div>
 
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          {/* Slider */}
-          <label className="block mb-2">
-            Preview Width: {width ? width : 0}px
-          </label>
-          <input
-            type="range"
-            min="40"
-            name="width"
-            max="1920"
-            value={width}
-            onChange={(e) =>
-              setStateValue(e.target.name, Number(e.target.value))
-            }
-            className="w-full"
-          />
-        </div>
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          {/* Slider */}
-          <label className="block mb-2">
-            Preview Height: {height ? height : 0}px
-          </label>
-          <input
-            type="range"
-            min="40"
-            name="height"
-            max="1920"
-            value={height}
-            onChange={(e) =>
-              setStateValue(e.target.name, Number(e.target.value))
-            }
-            className="w-full"
-          />
-        </div>
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          {/* Scale */}
-          <label className="block mb-2">
-            Content Scale: {scale ? scale : 0}x
-          </label>
-          <input
-            type="range"
-            min="0"
-            name="scale"
-            max="300"
-            value={scale * 100}
-            onChange={(e) =>
-              setStateValue(e.target.name, Number(e.target.value) / 100)
-            }
-            className="w-full"
-          />
-        </div>
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          {/* Slider */}
-          <label className="block mb-2">Border Radius: {borderRadius}px</label>
-          <input
-            type="range"
-            min="0"
-            max="50"
-            name="borderRadius"
-            value={borderRadius}
-            onChange={(e) =>
-              setStateValue(e.target.name, Number(e.target.value))
-            }
-            className="w-full"
-          />
-        </div>
-
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          {/* Checkbox for card border */}
-          <label className="flex items-center">
-            <input
-              type="checkbox"
-              checked={hasCardBorder}
-              name="hasCardBorder"
-              onChange={(e) => setStateValue(e.target.name, e.target.checked)}
-              className="mr-2"
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              {/* Slider */}
+              <SliderBox
+                keyName="gradientWidth"
+                label="Gradient Width"
+                value={gradientWidth}
+                unit="px"
+                min={0}
+                max={1920}
+                setStateValue={setStateValue}
+              />
+            </div>
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              <SliderBox
+                keyName="gradientHeight"
+                label="Gradient Height"
+                value={gradientHeight}
+                unit="px"
+                min={0}
+                max={1920}
+                setStateValue={setStateValue}
+              />
+            </div>
+          </TabsContent>
+          <TabsContent value="settings">
+            <DrawInput
+              keyName="pageName"
+              value={pageName}
+              placeholder="Enter page name..."
+              label="Page Name"
+              onChange={setStateValue}
+              isTextArea={false}
+              className="mt-4"
             />
-            Has Card Border
-          </label>
-        </div>
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          {/* Checkbox */}
-          <label className="flex items-center">
-            <input
-              type="checkbox"
-              checked={rounded}
-              name="rounded"
-              onChange={(e) => setStateValue(e.target.name, e.target.checked)}
-              className="mr-2"
+            <DrawInput
+              keyName="logoUrl"
+              value={logoUrl}
+              placeholder="Enter logo URL..."
+              label="Logo URL"
+              onChange={setStateValue}
+              isTextArea={false}
+              className="mt-4"
+            />
+            <DrawInput
+              keyName="logoUrlLabel"
+              value={logoUrlLabel}
+              placeholder="Enter logo URL label..."
+              label="Logo URL Label"
+              onChange={setStateValue}
+              isTextArea={false}
+              className="mt-4"
             />
-            Rounded Gradient
-          </label>
-        </div>
 
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          {/* Slider */}
-          <label className="block mb-2">
-            Gradient Width: {gradientWidth ? gradientWidth : 0}px
-          </label>
-          <input
-            type="range"
-            min="0"
-            name="gradientWidth"
-            max="1920"
-            value={gradientWidth || 0}
-            onChange={(e) =>
-              setStateValue(e.target.name, Number(e.target.value))
-            }
-            className="w-full"
-          />
-        </div>
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          {/* Slider */}
-          <label className="block mb-2">
-            Gradient Height: {gradientHeight ? gradientHeight : 0}px
-          </label>
-          <input
-            type="range"
-            min="0"
-            name="gradientHeight"
-            max="1920"
-            value={gradientHeight || 0}
-            onChange={(e) =>
-              setStateValue(e.target.name, Number(e.target.value))
-            }
-            className="w-full"
-          />
-        </div>
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              {/* Checkbox for card border */}
+              <CheckBox
+                keyName="hasCardBorder"
+                value={hasCardBorder}
+                label="Has Card Border"
+                setStateValue={setStateValue}
+              />
+            </div>
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              {/* Slider */}
+              <SliderBox
+                keyName="borderRadius"
+                label="Border Radius"
+                value={borderRadius}
+                unit="px"
+                min={0}
+                max={50}
+                setStateValue={setStateValue}
+              />
+            </div>
 
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          {/* Checkbox */}
-          <label className="flex items-center">
-            <input
-              type="checkbox"
-              checked={isRtl}
-              name="isRtl"
-              onChange={(e) => setStateValue(e.target.name, e.target.checked)}
-              className="mr-2"
-            />
-            Is RTL
-          </label>
-        </div>
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              {/* Checkbox */}
+              <CheckBox
+                keyName="isRtl"
+                value={isRtl}
+                label="Is RTL"
+                setStateValue={setStateValue}
+              />
+            </div>
+          </TabsContent>
+          <TabsContent value="page">
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              <SliderBox
+                keyName="width"
+                label="Preview Width"
+                value={width}
+                unit="px"
+                min={40}
+                max={1920}
+                setStateValue={setStateValue}
+              />
+            </div>
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              <SliderBox
+                keyName="height"
+                label="Preview Height"
+                value={height}
+                unit="px"
+                min={40}
+                max={1920}
+                setStateValue={setStateValue}
+              />
+            </div>
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              <SliderBox
+                keyName="scale"
+                label="Content Scale"
+                value={scale * 100}
+                unit="x"
+                min={0}
+                max={300}
+                setStateValue={(name, value) =>
+                  setStateValue(name, value / 100)
+                }
+              />
+            </div>
 
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          {/* Slider */}
-          <label className="block mb-2">
-            Inner Padding X: {innerPaddingX}px
-          </label>
-          <input
-            type="range"
-            min="0"
-            max="150"
-            name="innerPaddingX"
-            value={innerPaddingX}
-            onChange={(e) =>
-              setStateValue(e.target.name, Number(e.target.value))
-            }
-            className="w-full"
-          />
-        </div>
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          {/* Slider */}
-          <label className="block mb-2">
-            Inner Padding Y: {innerPaddingY}px
-          </label>
-          <input
-            type="range"
-            min="0"
-            max="1920"
-            value={innerPaddingY}
-            name="innerPaddingY"
-            onChange={(e) =>
-              setStateValue(e.target.name, Number(e.target.value))
-            }
-            className="w-full"
-          />
-        </div>
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              <SliderBox
+                keyName="innerPaddingX"
+                label="Inner Padding X"
+                value={innerPaddingX}
+                unit="px"
+                min={0}
+                max={150}
+                setStateValue={setStateValue}
+              />
+            </div>
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              {/* Slider */}
+              <SliderBox
+                keyName="innerPaddingY"
+                label="Inner Padding Y"
+                value={innerPaddingY}
+                unit="px"
+                min={0}
+                max={1920}
+                setStateValue={setStateValue}
+              />
+            </div>
+          </TabsContent>
+        </Tabs>
       </div>
       {/* Resizable Preview Panel */}
       <div className="preview-right-panel">
@@ -485,4 +470,4 @@ export default function GradientEditor() {
       <DownloadButton className="show-mobile bg-black shadow-2xl text-white p-4 rounded-md hover:bg-sky-700" />
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/web/components/notebook-editor.tsx b/apps/web/components/notebook-editor.tsx
index ee035c4..ed61a84 100644
--- a/apps/web/components/notebook-editor.tsx
+++ b/apps/web/components/notebook-editor.tsx
@@ -1,20 +1,23 @@
 "use client";
 
 import { NotebookPreview } from "@repo/ui/notebookcard-preview/notebook-preview";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState, useRef } from "react";
 import { DownloadButton } from "@repo/web-ui/download-button";
 import {
   CardSizeContext,
   CardSizeProvider,
 } from "@repo/ui/context/CardSizeContext";
 import SocialMediaController from "@repo/web-ui/SocialMediaController";
+import { Trash2 } from "lucide-react";
+import { SliderBox, DrawInput, CheckBox } from "./common";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "./ui/tabs";
+import { Cog, Delete, Move, Package2 } from "lucide-react";
 
 const STORAGE_KEY = "notebookCardv1";
 
 const cardBgColor = "bg-violet-500";
 const textColor = "text-white";
 
-
 const componentSocialMapping = {
   instagramPost: {
     width: 1080 / 2,
@@ -136,6 +139,12 @@ export default function NotebookEditor() {
     setLoaded(true);
   }, []);
 
+  const deleteStorage = () => {
+    localStorage.removeItem(STORAGE_KEY);
+    alert("Storage cleared! Reloading the page.");
+    window.location.reload();
+  };
+
   const setStateValue = (key: string, value: any) => {
     setState((prev) => ({ ...prev, [key]: value }));
   };
@@ -158,198 +167,198 @@ export default function NotebookEditor() {
 
   return (
     <div className="p-4 flex md:flex-row flex-col gap-2 w-full">
-      <div className="min-h-screen preview-left-panel">
-        <h2 className="preview-heading">Notebook Card</h2>
-        <p>Page Name:</p>
-        <input
-          className="w-full px-2 border rounded-md"
-          value={pageName}
-          name="pageName"
-          onChange={(e) => setStateValue(e.target.name, e.target.value)}
-          placeholder="Enter page name..."
-        />
-        <p>Logo URL:</p>
-        <input
-          className="w-full px-2 border rounded-md"
-          value={logoUrl}
-          name="logoUrl"
-          onChange={(e) => setStateValue(e.target.name, e.target.value)}
-          placeholder="Enter logo URL..."
-        />
-        <p>Logo URL Label:</p>
-        <input
-          className="w-full px-2 border rounded-md"
-          value={logoUrlLabel}
-          name="logoUrlLabel"
-          onChange={(e) => setStateValue(e.target.name, e.target.value)}
-          placeholder="Enter logo URL label..."
-        />
-        <p>Title:</p>
-        <input
-          className="w-full px-2 border rounded-md"
-          value={title}
-          name="title"
-          onChange={(e) => setStateValue(e.target.name, e.target.value)}
-          placeholder="Enter title..."
-        />
-        
-        <p>Checklist Items:</p>
-        {items.map((item, index) => (
-          <div key={index} className="flex mb-2">
-            <input
-              className="flex-1 px-1 border rounded-md mr-2"
-              value={item}
-              onChange={(e) => handleItemChange(index, e.target.value)}
-              placeholder="Enter item text..."
-            />
-            <button
-              onClick={() => removeItem(index)}
-              className="px-1 bg-red-400 rounded-md hover:bg-red-500"
-            >
-              Remove
-            </button>
-          </div>
-        ))}
+      <div className="min-h-screen preview-left-panel relative">
         <button
-          onClick={addItem}
-          className="mt-2 px-4 py-1 bg-blue-500 rounded-md hover:bg-blue-700"
+          onClick={deleteStorage}
+          className="absolute top-2 right-1 text-white  rounded-md hover:text-black cursor-pointer"
         >
-          Add Item
+          <Trash2 size={16} className="inline-block mr-1" />
         </button>
+        <h2 className="preview-heading">Notebook Card</h2>
 
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          <label className="flex items-center">
-            <input
-              type="checkbox"
-              checked={showCheckboxes}
-              name="showCheckboxes"
-              onChange={(e) => setStateValue(e.target.name, e.target.checked)}
-              className="mr-2"
+        {/* Tabs */}
+        <Tabs defaultValue="card" className="w-full">
+          <TabsList className="mb-4 border-b">
+            <TabsTrigger value="card" className="mr-2">
+              <Package2 size={16} className="inline-block mr-1" />
+            </TabsTrigger>
+            <TabsTrigger value="settings" className="mr-2">
+              <Cog size={16} className="inline-block mr-1" />
+            </TabsTrigger>
+            <TabsTrigger value="page" className="mr-2">
+              <Move size={16} className="inline-block mr-1" />
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="card">
+            <DrawInput
+              keyName="title"
+              value={title}
+              placeholder="Enter title..."
+              label="Title"
+              onChange={setStateValue}
+              isTextArea={false}
+              className="mt-4"
             />
-            Show Checkboxes
-          </label>
-        </div>
 
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          <label className="block mb-2">
-            Preview Width: {width ? width : 0}px
-          </label>
-          <input
-            type="range"
-            min="40"
-            name="previewWidth"
-            max="1920"
-            value={width}
-            onChange={(e) =>
-              setStateValue(e.target.name, Number(e.target.value))
-            }
-            className="w-full"
-          />
-        </div>
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          <label className="block mb-2">
-            Preview Height: {height ? height : 0}px
-          </label>
-          <input
-            type="range"
-            min="40"
-            name="previewHeight"
-            max="1920"
-            value={height}
-            onChange={(e) =>
-              setStateValue(e.target.name, Number(e.target.value))
-            }
-            className="w-full"
-          />
-        </div>
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          <label className="block mb-2">
-            Content Scale: {scale ? scale : 0}x
-          </label>
-          <input
-            type="range"
-            min="0"
-            name="scale"
-            max="300"
-            value={scale * 100}
-            onChange={(e) =>
-              setStateValue(e.target.name, Number(e.target.value) / 100)
-            }
-            className="w-full"
-          />
-        </div>
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          <label className="block mb-2">Border Radius: {borderRadius}px</label>
-          <input
-            type="range"
-            min="0"
-            max="50"
-            name="borderRadius"
-            value={borderRadius}
-            onChange={(e) =>
-              setStateValue(e.target.name, Number(e.target.value))
-            }
-            className="w-full"
-          />
-        </div>
+            <div className="mb-4">
+              <p>Checklist Items:</p>
+              {items.map((item, index) => (
+                <div key={index} className="flex mb-2">
+                  <input
+                    className="flex-1 px-1 border rounded-md mr-2"
+                    value={item}
+                    onChange={(e) => handleItemChange(index, e.target.value)}
+                    placeholder="Enter item text..."
+                  />
+                  <button
+                    onClick={() => removeItem(index)}
+                    className="px-1 bg-red-400 rounded-md hover:bg-red-500"
+                  >
+                    Remove
+                  </button>
+                </div>
+              ))}
+              <button
+                onClick={addItem}
+                className="mt-2 px-4 py-1 bg-blue-500 rounded-md hover:bg-blue-700"
+              >
+                Add Item
+              </button>
+            </div>
 
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          <label className="flex items-center">
-            <input
-              type="checkbox"
-              checked={hasCardBorder}
-              name="hasCardBorder"
-              onChange={(e) => setStateValue(e.target.name, e.target.checked)}
-              className="mr-2"
+            <CheckBox
+              keyName="showCheckboxes"
+              value={showCheckboxes}
+              label="Show Checkboxes"
+              setStateValue={setStateValue}
+              widthWrapper={true}
             />
-            Has Card Border
-          </label>
-        </div>
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          <label className="flex items-center">
-            <input
-              type="checkbox"
-              checked={isRtl}
-              name="isRtl"
-              onChange={(e) => setStateValue(e.target.name, e.target.checked)}
-              className="mr-2"
+          </TabsContent>
+
+          {/* Settings and others */}
+          <TabsContent value="settings">
+            <DrawInput
+              keyName="pageName"
+              value={pageName}
+              placeholder="Enter page name..."
+              label="Page Name"
+              onChange={setStateValue}
+              isTextArea={false}
+              className="mt-4"
+            />
+            <DrawInput
+              keyName="logoUrl"
+              value={logoUrl}
+              placeholder="Enter logo URL..."
+              label="Logo URL"
+              onChange={setStateValue}
+              isTextArea={false}
+              className="mt-4"
+            />
+            <DrawInput
+              keyName="logoUrlLabel"
+              value={logoUrlLabel}
+              placeholder="Enter logo URL label..."
+              label="Logo URL Label"
+              onChange={setStateValue}
+              isTextArea={false}
+              className="mt-4"
             />
-            Is RTL
-          </label>
-        </div>
 
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          <label className="block mb-2">
-            Inner Padding X: {innerPaddingX}px
-          </label>
-          <input
-            type="range"
-            min="0"
-            max="150"
-            name="innerPaddingX"
-            value={innerPaddingX}
-            onChange={(e) =>
-              setStateValue(e.target.name, Number(e.target.value))
-            }
-            className="w-full"
-          />
-        </div>
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          <label className="block mb-2">
-            Inner Padding Y: {innerPaddingY}px
-          </label>
-          <input
-            type="range"
-            min="0"
-            max="1920"
-            value={innerPaddingY}
-            name="innerPaddingY"
-            onChange={(e) =>
-              setStateValue(e.target.name, Number(e.target.value))
-            }
-            className="w-full"
-          />
-        </div>
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              {/* Checkbox for card border */}
+              <CheckBox
+                keyName="hasCardBorder"
+                value={hasCardBorder}
+                label="Has Card Border"
+                setStateValue={setStateValue}
+              />
+            </div>
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              {/* Slider */}
+              <SliderBox
+                keyName="borderRadius"
+                label="Border Radius"
+                value={borderRadius}
+                unit="px"
+                min={0}
+                max={50}
+                setStateValue={setStateValue}
+              />
+            </div>
+
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              {/* Checkbox */}
+              <CheckBox
+                keyName="isRtl"
+                value={isRtl}
+                label="Is RTL"
+                setStateValue={setStateValue}
+              />
+            </div>
+          </TabsContent>
+          <TabsContent value="page">
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              <SliderBox
+                keyName="width"
+                label="Preview Width"
+                value={width}
+                unit="px"
+                min={40}
+                max={1920}
+                setStateValue={setStateValue}
+              />
+            </div>
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              <SliderBox
+                keyName="height"
+                label="Preview Height"
+                value={height}
+                unit="px"
+                min={40}
+                max={1920}
+                setStateValue={setStateValue}
+              />
+            </div>
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              <SliderBox
+                keyName="scale"
+                label="Content Scale"
+                value={scale * 100}
+                unit="x"
+                min={0}
+                max={300}
+                setStateValue={(name, value) =>
+                  setStateValue(name, value / 100)
+                }
+              />
+            </div>
+
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              <SliderBox
+                keyName="innerPaddingX"
+                label="Inner Padding X"
+                value={innerPaddingX}
+                unit="px"
+                min={0}
+                max={150}
+                setStateValue={setStateValue}
+              />
+            </div>
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              {/* Slider */}
+              <SliderBox
+                keyName="innerPaddingY"
+                label="Inner Padding Y"
+                value={innerPaddingY}
+                unit="px"
+                min={0}
+                max={1920}
+                setStateValue={setStateValue}
+              />
+            </div>
+          </TabsContent>
+        </Tabs>
       </div>
       {/* Resizable Preview Panel */}
       <div className="preview-right-panel">
@@ -397,7 +406,7 @@ export default function NotebookEditor() {
             }}
             className={`w-full ${
               hasCardBorder ? "border" : ""
-            } shadow-md transition-colors duration-300 ${cardBgColor} ${textColor} `}
+            } shadow-md transition-colors duration-300 ${cardBgColor} ${textColor}`}
           />
         </div>
       </div>
diff --git a/apps/web/components/twitter-editor.tsx b/apps/web/components/twitter-editor.tsx
deleted file mode 100644
index a856a06..0000000
--- a/apps/web/components/twitter-editor.tsx
+++ /dev/null
@@ -1,443 +0,0 @@
-"use client";
-
-import { TwitterPreview } from "@repo/ui/twitter-preview/twitter-preview";
-import { useContext, useEffect, useState, useRef } from "react";
-import { DownloadButton } from "@repo/web-ui/download-button";
-import {
-  CardSizeContext,
-  CardSizeProvider,
-} from "@repo/ui/context/CardSizeContext";
-import SocialMediaController from "@repo/web-ui/SocialMediaController";
-
-const STORAGE_KEY = "twitterCardv4";
-
-const cardBgColor = "bg-gradient-to-br from-sky-200 via-ice-100 to-white";
-const textColor = "text-black";
-const borderColor = "border-gray-200";
-
-const componentSocialMapping = {
-  instagramPost: {
-    width: 1080 / 2,
-    height: 1080 / 2,
-    innerPaddingY: 1080 / 10,
-    scale: 1,
-  },
-  instagramStory: {
-    width: 1080 / 2,
-    height: 1920 / 2,
-    innerPaddingY: 1920 / 8,
-    scale: 1,
-  },
-  twitterPost: {
-    width: 1200 / 2,
-    height: 675 / 2,
-    innerPaddingY: 0,
-    scale: 0.7,
-  },
-  twitterHeader: {
-    width: (1500 / 2) * 1.2,
-    height: (500 / 2) * 1.2,
-    innerPaddingY: 0,
-    scale: 0.7,
-  },
-  facebookPost: {
-    width: (1200 / 2) * 1.3,
-    height: (630 / 2) * 1.3,
-    innerPaddingY: 630 / 10,
-    scale: 1,
-  },
-  facebookCover: {
-    width: 820,
-    height: 312,
-    innerPaddingY: 312 / 10,
-    scale: 0.7,
-  },
-  dribbleShot: {
-    width: (800 / 2) * 1.5,
-    height: (600 / 2) * 1.5,
-    innerPaddingY: 600 / 10,
-    scale: 1,
-  },
-  linkedinPost: {
-    width: 1200 / 1.5,
-    height: 627 / 1.5,
-    innerPaddingY: 627 / 10,
-    scale: 1,
-  },
-  linkedinCover: {
-    width: 1584 / 1.5,
-    height: 396 / 1.5,
-    innerPaddingY: 10,
-    scale: 0.5,
-  },
-};
-
-export default function TwitterEditor() {
-  const [loaded, setLoaded] = useState(false);
-  const profileImageInputRef = useRef<HTMLInputElement>(null);
-  const tweetImageInputRef = useRef<HTMLInputElement>(null);
-
-  const [state, setState] = useState({
-    previewHeightPixels: 540,
-    previewWidthPixels: 540,
-    width: 540,
-    height: 540,
-    innerPaddingX: 30,
-    innerPaddingY: 50,
-    scale: 1,
-    exportScale: 1,
-    pageName: "postmaker.dev",
-    logoUrl: "/logo.svg",
-    logoUrlLabel: "Created with Postmaker.dev",
-    borderRadius: 16,
-    hasCardBorder: false,
-    isRtl: false,
-    name: "John",
-    username: "john_doe",
-    text: "Boost your workflow with PostMaker.dev! Create, schedule, and share posts seamlessly across all your platforms. Say goodbye to cluttered posting and hello to smarter content management. Start creating now!",
-    showTwitterUI: true,
-    verified: true,
-    profileImage: "",
-    tweetImage: "",
-  });
-
-  const {
-    width: width,
-    height: height,
-    innerPaddingX,
-    innerPaddingY,
-    pageName,
-    logoUrl,
-    logoUrlLabel,
-    borderRadius,
-    hasCardBorder,
-    isRtl,
-    name,
-    username,
-    showTwitterUI,
-    verified,
-    text,
-    profileImage,
-    tweetImage,
-    scale,
-    exportScale,
-  } = state;
-
-  // Load from localStorage on mount
-  // Save
-  useEffect(() => {
-    if (!loaded) return;
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
-  }, [loaded, state]);
-
-  // Save to localStorage whenever any value changes
-  // Load
-  useEffect(() => {
-    const saved = localStorage.getItem(STORAGE_KEY);
-    if (saved) {
-      setState(JSON.parse(saved));
-    }
-    setLoaded(true);
-  }, []);
-
-  const setStateValue = (key: string, value: any) => {
-    setState((prev) => ({ ...prev, [key]: value }));
-  };
-
-  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>, type: 'profile' | 'tweet') => {
-    const file = e.target.files?.[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = (event) => {
-        if (event.target?.result) {
-          setStateValue(type === 'profile' ? 'profileImage' : 'tweetImage', event.target.result as string);
-        }
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  return (
-    <div className="p-4 flex md:flex-row flex-col gap-2 w-full">
-      <div className="min-h-screen preview-left-panel">
-        <h2 className="preview-heading">Twitter Card</h2>
-        <p>Page Name:</p>
-        <input
-          className="w-full px-2 border rounded-md"
-          value={pageName}
-          name="pageName"
-          onChange={(e) => setStateValue(e.target.name, e.target.value)}
-          placeholder="Enter page name..."
-        />
-        <p>Logo URL:</p>
-        <input
-          className="w-full px-2 border rounded-md"
-          value={logoUrl}
-          name="logoUrl"
-          onChange={(e) => setStateValue(e.target.name, e.target.value)}
-          placeholder="Enter logo URL..."
-        />
-        <p>Logo URL Label:</p>
-        <input
-          className="w-full px-2 border rounded-md"
-          value={logoUrlLabel}
-          name="logoUrlLabel"
-          onChange={(e) => setStateValue(e.target.name, e.target.value)}
-          placeholder="Enter logo URL label..."
-        />
-        <p>Name:</p>
-        <input
-          className="w-full px-2 border rounded-md"
-          value={name}
-          name="name"
-          onChange={(e) => setStateValue(e.target.name, e.target.value)}
-          placeholder="Enter name..."
-        />
-        <p>Username:</p>
-        <input
-          className="w-full px-2 border rounded-md"
-          value={username}
-          name="username"
-          onChange={(e) => setStateValue(e.target.name, e.target.value)}
-          placeholder="Enter username..."
-        />
-        <p>Your tweet:</p>
-        <textarea
-          className="w-full h-64 px-2 border rounded-md"
-          value={text}
-          name="text"
-          onChange={(e) => setStateValue(e.target.name, e.target.value)}
-          placeholder="Write your tweet here..."
-        />
-
-        {/* Profile Image Upload */}
-        <div className="mt-4">
-          <p>Profile Image:</p>
-          <input
-            type="file"
-            ref={profileImageInputRef}
-            onChange={(e) => handleImageUpload(e, 'profile')}
-            accept="image/*"
-            className="hidden"
-          />
-          <button
-            onClick={() => profileImageInputRef.current?.click()}
-            className="px-2 py-2 bg-blue-500 rounded-md hover:bg-blue-700"
-          >
-            Upload Profile Image
-          </button>
-          {profileImage && (
-            <button
-              onClick={() => setStateValue('profileImage', '')}
-              className="ml-2 px-4 py-2 bg-red-400 rounded-md hover:bg-red-500"
-            >
-              Remove
-            </button>
-          )}
-        </div>
-
-     
-
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          <label className="block mb-2">
-            Preview Width: {width ? width : 0}px
-          </label>
-          <input
-            type="range"
-            min="40"
-            name="previewWidth"
-            max="1920"
-            value={width}
-            onChange={(e) =>
-              setStateValue(e.target.name, Number(e.target.value))
-            }
-            className="w-full"
-          />
-        </div>
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          <label className="block mb-2">
-            Preview Height: {height ? height : 0}px
-          </label>
-          <input
-            type="range"
-            min="40"
-            name="previewHeight"
-            max="1920"
-            value={height}
-            onChange={(e) =>
-              setStateValue(e.target.name, Number(e.target.value))
-            }
-            className="w-full"
-          />
-        </div>
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          <label className="block mb-2">
-            Content Scale: {scale ? scale : 0}x
-          </label>
-          <input
-            type="range"
-            min="0"
-            name="scale"
-            max="300"
-            value={scale * 100}
-            onChange={(e) =>
-              setStateValue(e.target.name, Number(e.target.value) / 100)
-            }
-            className="w-full"
-          />
-        </div>
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          <label className="block mb-2">Border Radius: {borderRadius}px</label>
-          <input
-            type="range"
-            min="0"
-            max="50"
-            name="borderRadius"
-            value={borderRadius}
-            onChange={(e) =>
-              setStateValue(e.target.name, Number(e.target.value))
-            }
-            className="w-full"
-          />
-        </div>
-
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          <label className="flex items-center">
-            <input
-              type="checkbox"
-              checked={hasCardBorder}
-              name="hasCardBorder"
-              onChange={(e) => setStateValue(e.target.name, e.target.checked)}
-              className="mr-2"
-            />
-            Has Card Border
-          </label>
-        </div>
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          <label className="flex items-center">
-            <input
-              type="checkbox"
-              checked={showTwitterUI}
-              name="showTwitterUI"
-              onChange={(e) => setStateValue(e.target.name, e.target.checked)}
-              className="mr-2"
-            />
-            Show Twitter UI
-          </label>
-        </div>
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          <label className="flex items-center">
-            <input
-              type="checkbox"
-              checked={verified}
-              name="verified"
-              onChange={(e) => setStateValue(e.target.name, e.target.checked)}
-              className="mr-2"
-            />
-            Verified Account
-          </label>
-        </div>
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          <label className="flex items-center">
-            <input
-              type="checkbox"
-              checked={isRtl}
-              name="isRtl"
-              onChange={(e) => setStateValue(e.target.name, e.target.checked)}
-              className="mr-2"
-            />
-            Is RTL
-          </label>
-        </div>
-
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          <label className="block mb-2">
-            Inner Padding X: {innerPaddingX}px
-          </label>
-          <input
-            type="range"
-            min="0"
-            max="150"
-            name="innerPaddingX"
-            value={innerPaddingX}
-            onChange={(e) =>
-              setStateValue(e.target.name, Number(e.target.value))
-            }
-            className="w-full"
-          />
-        </div>
-        <div className="flex flex-col mt-4 border p-2 rounded-md">
-          <label className="block mb-2">
-            Inner Padding Y: {innerPaddingY}px
-          </label>
-          <input
-            type="range"
-            min="0"
-            max="1920"
-            value={innerPaddingY}
-            name="innerPaddingY"
-            onChange={(e) =>
-              setStateValue(e.target.name, Number(e.target.value))
-            }
-            className="w-full"
-          />
-        </div>
-      </div>
-      {/* Resizable Preview Panel */}
-      <div className="preview-right-panel">
-        <SocialMediaController
-          setStateValue={setStateValue}
-          exportScale={exportScale}
-          CardSizeContext={CardSizeContext}
-          componentSocialMapping={componentSocialMapping}
-        />
-        <div
-          style={{
-            zIndex: 10,
-            backgroundColor: "transparent",
-            width: `${width}px`,
-            height: `${height}px`,
-            overflow: "clip",
-          }}
-          className="transition-all duration-200 select-none preview-container-drag"
-        >
-          <TwitterPreview
-            logoUrl={logoUrl}
-            logoUrlLabel={logoUrlLabel}
-            pageName={pageName}
-            name={name}
-            username={username}
-            text={text}
-            showTwitterUI={showTwitterUI}
-            verified={verified}
-            profileImage={profileImage}
-            tweetImage={tweetImage}
-            scale={scale}
-            styles={{
-              zIndex: 10,
-              height: "100%",
-              direction: isRtl ? "rtl" : "ltr",
-              ...(innerPaddingX
-                ? {
-                    paddingLeft: `${innerPaddingX}px`,
-                    paddingRight: `${innerPaddingX}px`,
-                  }
-                : {}),
-              ...(innerPaddingY
-                ? {
-                    paddingTop: `${innerPaddingY}px`,
-                    paddingBottom: `${innerPaddingY}px`,
-                  }
-                : {}),
-              ...(borderRadius ? { borderRadius: `${borderRadius}px` } : {}),
-            }}
-            className={`w-full ${
-              hasCardBorder ? "border" : ""
-            } shadow-md transition-colors duration-300 ${cardBgColor} ${textColor} ${borderColor}`}
-          />
-        </div>
-      </div>
-      <DownloadButton className="show-mobile bg-sky-600 shadow-2xl text-white p-4 rounded-md hover:bg-sky-700" />
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/apps/web/components/ui/aspect-ratio.tsx b/apps/web/components/ui/aspect-ratio.tsx
new file mode 100644
index 0000000..d6a5226
--- /dev/null
+++ b/apps/web/components/ui/aspect-ratio.tsx
@@ -0,0 +1,7 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }
diff --git a/apps/web/components/ui/input.tsx b/apps/web/components/ui/input.tsx
new file mode 100644
index 0000000..10baa52
--- /dev/null
+++ b/apps/web/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "../../lib/cn"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/apps/web/components/ui/slider.tsx b/apps/web/components/ui/slider.tsx
new file mode 100644
index 0000000..4d4d5fc
--- /dev/null
+++ b/apps/web/components/ui/slider.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "../../lib/cn"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-gray-50">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-[#00ddff] ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
diff --git a/apps/web/components/ui/switch.tsx b/apps/web/components/ui/switch.tsx
new file mode 100644
index 0000000..8b81778
--- /dev/null
+++ b/apps/web/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "../../lib/cn"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/apps/web/components/ui/tabs.tsx b/apps/web/components/ui/tabs.tsx
new file mode 100644
index 0000000..e289242
--- /dev/null
+++ b/apps/web/components/ui/tabs.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '../../lib/cn';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex h-10 items-center justify-center rounded-md p-1',
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => {
+  return (
+    <TabsPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'inline-flex whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-blue-500 data-[state=active]:bg-white hover:shadow-md hover:bg-gray-200',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/apps/web/components/ui/textarea.tsx b/apps/web/components/ui/textarea.tsx
new file mode 100644
index 0000000..b9502bf
--- /dev/null
+++ b/apps/web/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "../../lib/cn"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/apps/web/components/ui/toggle.tsx b/apps/web/components/ui/toggle.tsx
new file mode 100644
index 0000000..4afbc8b
--- /dev/null
+++ b/apps/web/components/ui/toggle.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/cn"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-gray-200 hover:text-black",
+      },
+      size: {
+        default: "h-10 px-3 min-w-10",
+        sm: "h-9 px-2.5 min-w-9",
+        lg: "h-11 px-5 min-w-11",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }
diff --git a/apps/web/components/ui/use-mobile.tsx b/apps/web/components/ui/use-mobile.tsx
new file mode 100644
index 0000000..2b0fe1d
--- /dev/null
+++ b/apps/web/components/ui/use-mobile.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/apps/web/components/x-editor.tsx b/apps/web/components/x-editor.tsx
new file mode 100644
index 0000000..1af16f5
--- /dev/null
+++ b/apps/web/components/x-editor.tsx
@@ -0,0 +1,544 @@
+"use client";
+
+import { XPreview } from "@repo/ui/x-preview/x-preview";
+import { useContext, useEffect, useState, useRef } from "react";
+import { DownloadButton } from "@repo/web-ui/download-button";
+import {
+  CardSizeContext,
+  CardSizeProvider,
+} from "@repo/ui/context/CardSizeContext";
+import SocialMediaController from "@repo/web-ui/SocialMediaController";
+import { Trash2 } from "lucide-react";
+import { SliderBox, DrawInput, CheckBox } from "./common";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "./ui/tabs";
+import { Cog, Delete, Move, Package2 } from "lucide-react";
+
+const STORAGE_KEY = "xCardv1";
+
+const cardBgColor = "bg-gradient-to-br from-sky-200 via-ice-100 to-white";
+const textColor = "text-black";
+const borderColor = "border-gray-200";
+
+const componentSocialMapping = {
+  instagramPost: {
+    width: 1080 / 2,
+    height: 1080 / 2,
+    innerPaddingY: 1080 / 10,
+    scale: 1,
+  },
+  instagramStory: {
+    width: 1080 / 2,
+    height: 1920 / 2,
+    innerPaddingY: 1920 / 8,
+    scale: 1,
+  },
+  twitterPost: {
+    width: 1200 / 2,
+    height: 675 / 2,
+    innerPaddingY: 50,
+    scale: 0.7,
+  },
+  twitterHeader: {
+    width: (1500 / 2) * 1.2,
+    height: (500 / 2) * 1.2,
+    innerPaddingY: 500 / 10,
+    scale: 0.7,
+  },
+  facebookPost: {
+    width: (1200 / 2) * 1.3,
+    height: (630 / 2) * 1.3,
+    innerPaddingY: 630 / 10,
+    scale: 1,
+  },
+  facebookCover: {
+    width: 820,
+    height: 312,
+    innerPaddingY: 312 / 10,
+    scale: 0.7,
+  },
+  dribbleShot: {
+    width: (800 / 2) * 1.5,
+    height: (600 / 2) * 1.5,
+    innerPaddingY: 600 / 10,
+    scale: 1,
+  },
+  linkedinPost: {
+    width: 1200 / 1.5,
+    height: 627 / 1.5,
+    innerPaddingY: 627 / 10,
+    scale: 1,
+  },
+  linkedinCover: {
+    width: 1584 / 1.5,
+    height: 396 / 1.5,
+    innerPaddingY: 10,
+    scale: 0.5,
+  },
+};
+
+export default function XEditor() {
+  const [loaded, setLoaded] = useState(false);
+  const profileImageInputRef = useRef<HTMLInputElement>(null);
+  const postImageInputRef = useRef<HTMLInputElement>(null);
+
+  const [state, setState] = useState({
+    previewHeightPixels: 540,
+    previewWidthPixels: 540,
+    width: 540,
+    height: 540,
+    innerPaddingX: 30,
+    innerPaddingY: 50,
+    scale: 1,
+    exportScale: 1,
+    pageName: "postmaker.dev",
+    logoUrl: "/logo.svg",
+    logoUrlLabel: "Created with Postmaker.dev",
+    borderRadius: 16,
+    hasCardBorder: false,
+    isRtl: false,
+    name: "Postmaker.dev",
+    username: "postmaker.dev",
+    text: "Create beatiful social media images in seconds with Postmaker.dev! #NoCode #Design #SocialMedia",
+    showXUI: true,
+    verified: true,
+    profileImage: "/logo.svg",
+    postImage: "",
+    postTimestamp: new Date().toISOString(),
+    postComments: 123,
+    postRetweets: 456,
+    postLikes: 789,
+    postViews: 1000,
+  });
+
+  const {
+    width: width,
+    height: height,
+    innerPaddingX,
+    innerPaddingY,
+    pageName,
+    logoUrl,
+    logoUrlLabel,
+    borderRadius,
+    hasCardBorder,
+    isRtl,
+    name,
+    username,
+    showXUI,
+    verified,
+    text,
+    profileImage,
+    postImage,
+    scale,
+    exportScale,
+    postTimestamp,
+    postComments,
+    postRetweets,
+    postLikes,
+    postViews,
+  } = state;
+
+  // Load from localStorage on mount
+  // Save
+  useEffect(() => {
+    if (!loaded) return;
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  }, [loaded, state]);
+
+  // Save to localStorage whenever any value changes
+  // Load
+  useEffect(() => {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      setState(JSON.parse(saved));
+    }
+    setLoaded(true);
+  }, []);
+
+  const deleteStorage = () => {
+    localStorage.removeItem(STORAGE_KEY);
+    alert("Storage cleared! Reloading the page.");
+    window.location.reload();
+  };
+
+  const setStateValue = (key: string, value: any) => {
+    setState((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const handleImageUpload = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    type: "profile" | "post"
+  ) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        if (event.target?.result) {
+          setStateValue(
+            type === "profile" ? "profileImage" : "postImage",
+            event.target.result as string
+          );
+        }
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  return (
+    <div className="p-4 flex md:flex-row flex-col gap-2 w-full">
+      <div className="min-h-screen preview-left-panel relative">
+        <button
+          onClick={deleteStorage}
+          className="absolute top-2 right-1 text-white  rounded-md hover:text-black cursor-pointer"
+        >
+          <Trash2 size={16} className="inline-block mr-1" />
+        </button>
+        <h2 className="preview-heading">X Card</h2>
+
+        {/* Tabs */}
+        <Tabs defaultValue="card" className="w-full">
+          <TabsList className="mb-4 border-b">
+            <TabsTrigger value="card" className="mr-2">
+              <Package2 size={16} className="inline-block mr-1" />
+            </TabsTrigger>
+            <TabsTrigger value="settings" className="mr-2">
+              <Cog size={16} className="inline-block mr-1" />
+            </TabsTrigger>
+            <TabsTrigger value="page" className="mr-2">
+              <Move size={16} className="inline-block mr-1" />
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="card">
+            <DrawInput
+              keyName="name"
+              value={name}
+              placeholder="Enter name..."
+              label="Name"
+              onChange={setStateValue}
+              isTextArea={false}
+              className="mt-4"
+            />
+
+            <DrawInput
+              keyName="username"
+              value={username}
+              placeholder="Enter username..."
+              label="Username"
+              onChange={setStateValue}
+              isTextArea={false}
+              className="mt-4"
+            />
+            <DrawInput
+              keyName="text"
+              value={text}
+              placeholder="Enter post text..."
+              label="Post Text"
+              onChange={setStateValue}
+              isTextArea={true}
+              className="mt-4"
+            />
+
+            {/* Profile Image Upload */}
+            <div className=" mb-4">
+              <p>Profile Image:</p>
+              <input
+                type="file"
+                ref={profileImageInputRef}
+                onChange={(e) => handleImageUpload(e, "profile")}
+                accept="image/*"
+                className="hidden"
+              />
+              <button
+                onClick={() => profileImageInputRef.current?.click()}
+                className="px-2 py-2 rounded-md border hover:bg-gray-50 hover:text-gray-800"
+              >
+                Upload Profile Image
+              </button>
+              {profileImage && (
+                <button
+                  onClick={() => setStateValue("profileImage", "")}
+                  className="ml-2 px-4 py-2 bg-red-400 rounded-md hover:bg-red-500"
+                >
+                  Remove
+                </button>
+              )}
+
+              {profileImage.length < 1000 && (
+                <DrawInput
+                  keyName="profileImage"
+                  value={profileImage}
+                  placeholder="or enter profile image URL..."
+                  label="Or Profile Image URL"
+                  onChange={setStateValue}
+                  isTextArea={false}
+                  className="mt-2"
+                />
+              )}
+            </div>
+
+            <CheckBox
+              keyName="showXUI"
+              value={showXUI}
+              label="Show X UI"
+              setStateValue={setStateValue}
+              widthWrapper={true}
+            />
+            {/* verfied */}
+            <CheckBox
+              keyName="verified"
+              value={verified}
+              label="Verified Account"
+              setStateValue={setStateValue}
+              widthWrapper={true}
+            />
+
+            {/* timestamp */}
+            <DrawInput
+              keyName="postTimestamp"
+              value={new Date(postTimestamp).toISOString().slice(0, 16)}
+              type="datetime-local"
+              placeholder="Enter post timestamp..."
+              label="Post Timestamp"
+              onChange={setStateValue}
+              isTextArea={false}
+              className="mt-4"
+            />
+
+            {/* postViews */}
+            <SliderBox
+              keyName="postViews"
+              label="Post Views"
+              value={postViews}
+              formatValue={true}
+              unit=""
+              min={0}
+              max={10000000}
+              setStateValue={setStateValue}
+              widthWrapper={true}
+            />
+
+            {/* post comments */}
+            <SliderBox
+              keyName="postComments"
+              label="Post Comments"
+              value={postComments}
+              formatValue={true}
+              unit=""
+              min={0}
+              widthWrapper={true}
+              max={10000000}
+              setStateValue={setStateValue}
+            />
+            {/* post retweets */}
+            <SliderBox
+              keyName="postRetweets"
+              label="Post Retweets"
+              value={postRetweets}
+              formatValue={true}
+              unit=""
+              widthWrapper={true}
+              min={0}
+              max={10000000}
+              setStateValue={setStateValue}
+            />
+            {/* post likes */}
+            <SliderBox
+              keyName="postLikes"
+              label="Post Likes"
+              value={postLikes}
+              formatValue={true}
+              widthWrapper={true}
+              unit=""
+              min={0}
+              max={10000000}
+              setStateValue={setStateValue}
+            />
+          </TabsContent>
+
+          {/* Settings and others */}
+          <TabsContent value="settings">
+            <DrawInput
+              keyName="pageName"
+              value={pageName}
+              placeholder="Enter page name..."
+              label="Page Name"
+              onChange={setStateValue}
+              isTextArea={false}
+              className="mt-4"
+            />
+            <DrawInput
+              keyName="logoUrl"
+              value={logoUrl}
+              placeholder="Enter logo URL..."
+              label="Logo URL"
+              onChange={setStateValue}
+              isTextArea={false}
+              className="mt-4"
+            />
+            <DrawInput
+              keyName="logoUrlLabel"
+              value={logoUrlLabel}
+              placeholder="Enter logo URL label..."
+              label="Logo URL Label"
+              onChange={setStateValue}
+              isTextArea={false}
+              className="mt-4"
+            />
+
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              {/* Checkbox for card border */}
+              <CheckBox
+                keyName="hasCardBorder"
+                value={hasCardBorder}
+                label="Has Card Border"
+                setStateValue={setStateValue}
+              />
+            </div>
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              {/* Slider */}
+              <SliderBox
+                keyName="borderRadius"
+                label="Border Radius"
+                value={borderRadius}
+                unit="px"
+                min={0}
+                max={50}
+                setStateValue={setStateValue}
+              />
+            </div>
+
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              {/* Checkbox */}
+              <CheckBox
+                keyName="isRtl"
+                value={isRtl}
+                label="Is RTL"
+                setStateValue={setStateValue}
+              />
+            </div>
+          </TabsContent>
+          <TabsContent value="page">
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              <SliderBox
+                keyName="width"
+                label="Preview Width"
+                value={width}
+                unit="px"
+                min={40}
+                max={1920}
+                setStateValue={setStateValue}
+              />
+            </div>
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              <SliderBox
+                keyName="height"
+                label="Preview Height"
+                value={height}
+                unit="px"
+                min={40}
+                max={1920}
+                setStateValue={setStateValue}
+              />
+            </div>
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              <SliderBox
+                keyName="scale"
+                label="Content Scale"
+                value={scale * 100}
+                unit="x"
+                min={0}
+                max={300}
+                setStateValue={(name, value) =>
+                  setStateValue(name, value / 100)
+                }
+              />
+            </div>
+
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              <SliderBox
+                keyName="innerPaddingX"
+                label="Inner Padding X"
+                value={innerPaddingX}
+                unit="px"
+                min={0}
+                max={150}
+                setStateValue={setStateValue}
+              />
+            </div>
+            <div className="flex flex-col mt-4 border p-2 rounded-md">
+              {/* Slider */}
+              <SliderBox
+                keyName="innerPaddingY"
+                label="Inner Padding Y"
+                value={innerPaddingY}
+                unit="px"
+                min={0}
+                max={1920}
+                setStateValue={setStateValue}
+              />
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+      {/* Resizable Preview Panel */}
+      <div className="preview-right-panel">
+        <SocialMediaController
+          setStateValue={setStateValue}
+          exportScale={exportScale}
+          CardSizeContext={CardSizeContext}
+          componentSocialMapping={componentSocialMapping}
+        />
+        <div
+          style={{
+            zIndex: 10,
+            backgroundColor: "transparent",
+            width: `${width}px`,
+            height: `${height}px`,
+            overflow: "clip",
+          }}
+          className="transition-all duration-200 select-none preview-container-drag"
+        >
+          <XPreview
+            logoUrl={logoUrl}
+            logoUrlLabel={logoUrlLabel}
+            pageName={pageName}
+            name={name}
+            username={username}
+            text={text}
+            showXUI={showXUI}
+            verified={verified}
+            profileImage={profileImage}
+            postImage={postImage}
+            postTimestamp={postTimestamp}
+            postComments={postComments}
+            postRetweets={postRetweets}
+            postLikes={postLikes}
+            postViews={postViews}
+            scale={scale}
+            styles={{
+              zIndex: 10,
+              height: "100%",
+              direction: isRtl ? "rtl" : "ltr",
+              ...(innerPaddingX
+                ? {
+                    paddingLeft: `${innerPaddingX}px`,
+                    paddingRight: `${innerPaddingX}px`,
+                  }
+                : {}),
+              ...(innerPaddingY
+                ? {
+                    paddingTop: `${innerPaddingY}px`,
+                    paddingBottom: `${innerPaddingY}px`,
+                  }
+                : {}),
+              ...(borderRadius ? { borderRadius: `${borderRadius}px` } : {}),
+            }}
+            className={`w-full ${
+              hasCardBorder ? "border" : ""
+            } shadow-md transition-colors duration-300 ${cardBgColor} ${textColor} ${borderColor}`}
+          />
+        </div>
+      </div>
+      <DownloadButton className="show-mobile bg-sky-600 shadow-2xl text-white p-4 rounded-md hover:bg-sky-700" />
+    </div>
+  );
+}
diff --git a/apps/web/lib/cn.ts b/apps/web/lib/cn.ts
new file mode 100644
index 0000000..33a13fe
--- /dev/null
+++ b/apps/web/lib/cn.ts
@@ -0,0 +1,36 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+
+export const formatDistanceToNow = (date: Date, options?: { addSuffix?: boolean }) => {
+  const distance = Math.abs(new Date().getTime() - date.getTime())
+  const seconds = Math.floor(distance / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+  const months = Math.floor(days / 30)
+  const years = Math.floor(days / 365)
+  if (years > 0) {
+    return `${years} year${years > 1 ? 's' : ''} ago`
+  }
+  if (months > 0) {
+    return `${months} month${months > 1 ? 's' : ''} ago`
+  }
+  if (days > 0) {
+    return `${days} day${days > 1 ? 's' : ''} ago`
+  }
+  if (hours > 0) {
+    return `${hours} hour${hours > 1 ? 's' : ''} ago`
+  }
+  if (minutes > 0) {
+    return `${minutes} minute${minutes > 1 ? 's' : ''} ago`
+  }
+  if (seconds > 0) {
+    return `${seconds} second${seconds > 1 ? 's' : ''} ago`
+  }
+  return 'just now'
+}
\ No newline at end of file
diff --git a/apps/web/package.json b/apps/web/package.json
index cca7ccd..8b1bfe1 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -11,8 +11,15 @@
     "check-types": "tsc --noEmit"
   },
   "dependencies": {
-    "@repo/ui": "workspace:*",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
     "@repo/constants": "workspace:*",
+    "@repo/ui": "workspace:*",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "highlight.js": "^11.11.1",
     "html-to-image": "^1.11.13",
     "lucide-react": "^0.536.0",
@@ -21,7 +28,8 @@
     "react-dom": "^19.1.0",
     "react-markdown": "^10.1.0",
     "rehype-highlight": "^7.0.2",
-    "remark-gfm": "^4.0.1"
+    "remark-gfm": "^4.0.1",
+    "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
diff --git a/packages/ui/src/gradient-preview/PastelGradientCanvas.tsx b/packages/ui/src/gradient-preview/PastelGradientCanvas.tsx
index 13f8aca..e2919d1 100644
--- a/packages/ui/src/gradient-preview/PastelGradientCanvas.tsx
+++ b/packages/ui/src/gradient-preview/PastelGradientCanvas.tsx
@@ -111,6 +111,7 @@ export const PastelGradientCanvas = ({
     <canvas
       ref={canvasRef}
       style={{
+        display: "block",
         width: width ? width + "px" : "100%",
         height: height ? height + "px" : "100%",
         borderRadius: rounded ? "15px" : "0",
diff --git a/packages/ui/src/gradient-preview/gradient-preview.tsx b/packages/ui/src/gradient-preview/gradient-preview.tsx
index deb36ce..027d497 100644
--- a/packages/ui/src/gradient-preview/gradient-preview.tsx
+++ b/packages/ui/src/gradient-preview/gradient-preview.tsx
@@ -69,10 +69,10 @@ export const GradientPreview: React.FC<GradientPreviewProps> = ({
           <div
             style={{
               display: "flex",
+              border: "1px solid #eee",
               justifyContent: "center",
               alignItems: "center",
               width: "100%",
-              height: gradientHeight ? gradientHeight : 200,
               marginBottom: "16px",
               filter: `blur(${blurAmount}px)`,
             }}
@@ -195,8 +195,7 @@ export const GradientPreview: React.FC<GradientPreviewProps> = ({
           </div>
         )}
 
-
-         {gradientType === "custom" && (
+        {gradientType === "custom" && (
           <div
             style={{
               display: "flex",
diff --git a/packages/ui/src/notebookcard-preview/notebook-preview.style.css b/packages/ui/src/notebookcard-preview/notebook-preview.style.css
index cd958b1..9f04625 100644
--- a/packages/ui/src/notebookcard-preview/notebook-preview.style.css
+++ b/packages/ui/src/notebookcard-preview/notebook-preview.style.css
@@ -101,6 +101,4 @@
   width: 16px;
   height: 16px;
   fill: #333;
-}
-
-
+}
\ No newline at end of file
diff --git a/packages/ui/src/notebookcard-preview/notebook-preview.tsx b/packages/ui/src/notebookcard-preview/notebook-preview.tsx
index 3fe4ef1..14059c0 100644
--- a/packages/ui/src/notebookcard-preview/notebook-preview.tsx
+++ b/packages/ui/src/notebookcard-preview/notebook-preview.tsx
@@ -64,7 +64,6 @@ export const NotebookPreview: React.FC<NotebookPreviewProps> = ({
               </li>
             ))}
           </ul>
-          
         </div>
       </div>
     </CardContainer>
diff --git a/packages/ui/src/twitter-preview/twitter-preview.style.css b/packages/ui/src/x-preview/x-preview.style.css
similarity index 63%
rename from packages/ui/src/twitter-preview/twitter-preview.style.css
rename to packages/ui/src/x-preview/x-preview.style.css
index f487b66..9167956 100644
--- a/packages/ui/src/twitter-preview/twitter-preview.style.css
+++ b/packages/ui/src/x-preview/x-preview.style.css
@@ -1,28 +1,46 @@
-.twitter-preview-container {
+.x-preview-container {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
-  background: linear-gradient(135deg, #87CEEB 0%, #E0F7FA 50%, #FFFFFF 100%);
-  color: #000;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  background: white;
+  color: #0f1419;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
+    sans-serif;
   padding: 20px;
   box-sizing: border-box;
   border-radius: 16px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 }
 
-.twitter-header {
+.x-dark {
+  background: black;
+  color: white;
+}
+
+.x-icon-main {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 24px;
+  height: 24px;
+  fill: #0f1419;
+  vertical-align: middle;
+}
+
+.x-header {
   display: flex;
   align-items: center;
   margin-bottom: 16px;
 }
 
-.twitter-avatar {
+.x-avatar {
   width: 48px;
   height: 48px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #B388FF 0%, #FF80AB 100%);
+  border-radius: 10px;
+  border: 1px solid #dfdfdf25;
+  background: transparent;
   margin-right: 12px;
   flex-shrink: 0;
   overflow: hidden;
@@ -35,31 +53,31 @@
   object-fit: cover;
 }
 
-.twitter-user-info {
+.x-user-info {
   display: flex;
   flex-direction: column;
 }
 
-.twitter-name-container {
+.x-name-container {
   display: flex;
   align-items: center;
   gap: 4px;
 }
 
-.twitter-name {
+.x-name {
   font-weight: 700;
   font-size: 16px;
   line-height: 20px;
   color: #000;
 }
 
-.twitter-username {
+.x-username {
   color: #555;
   font-size: 15px;
   line-height: 20px;
 }
 
-.twitter-text {
+.x-text {
   font-size: 16px;
   line-height: 24px;
   margin-bottom: 16px;
@@ -67,11 +85,11 @@
   color: #000;
 }
 
-.twitter-text p {
+.x-text p {
   margin: 0 0 16px 0;
 }
 
-.twitter-text p:last-child {
+.x-text p:last-child {
   margin-bottom: 0;
 }
 
@@ -87,31 +105,31 @@
   object-fit: cover;
 }
 
-.twitter-footer {
+.x-footer {
   margin-top: auto;
-  padding-top: 16px;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.twitter-stats {
-  color: #555;
+.x-stats {
+  border-bottom: 1px solid rgba(34, 34, 34, 0.03);
+  color: #858585;
   font-size: 14px;
-  margin-bottom: 16px;
+  margin-bottom: 10px;
+  padding-bottom: 5px;
   display: flex;
   gap: 4px;
 }
 
-.twitter-stat {
+.x-stat {
   margin-right: 4px;
 }
 
-.twitter-actions {
+.x-actions {
   display: flex;
   justify-content: space-between;
   max-width: 425px;
 }
 
-.twitter-action {
+.x-action {
   display: flex;
   align-items: center;
   color: #555;
@@ -119,14 +137,14 @@
   gap: 4px;
 }
 
-.twitter-icon {
+.x-icon {
   width: 18px;
   height: 18px;
   fill: currentColor;
 }
 
-.twitter-verified {
+.x-verified {
   width: 18px;
   height: 18px;
-  fill: #1DA1F2;
-}
\ No newline at end of file
+  fill: #1da1f2;
+}
diff --git a/packages/ui/src/twitter-preview/twitter-preview.tsx b/packages/ui/src/x-preview/x-preview.tsx
similarity index 50%
rename from packages/ui/src/twitter-preview/twitter-preview.tsx
rename to packages/ui/src/x-preview/x-preview.tsx
index daeb131..6fd2ac8 100644
--- a/packages/ui/src/twitter-preview/twitter-preview.tsx
+++ b/packages/ui/src/x-preview/x-preview.tsx
@@ -2,9 +2,9 @@
 
 import React from "react";
 import { CardContainer } from "../layouts/card-container";
-import "./twitter-preview.style.css";
+import "./x-preview.style.css";
 
-interface TwitterPreviewProps {
+interface XPreviewProps {
   scale?: number;
   className?: string;
   styles?: React.CSSProperties;
@@ -16,28 +16,38 @@ interface TwitterPreviewProps {
   name: string;
   username: string;
   text: string;
-  showTwitterUI?: boolean;
+  showXUI?: boolean;
   verified?: boolean;
   profileImage?: string;
-  tweetImage?: string;
+  postImage?: string;
+  postTimestamp: string;
+  postComments: number;
+  postRetweets: number;
+  postViews: number;
+  postLikes: number;
 }
 
-export const TwitterPreview: React.FC<TwitterPreviewProps> = ({
+export const XPreview: React.FC<XPreviewProps> = ({
   scale = 1,
   className = "",
   styles = {},
   pageName,
   logoUrl = "",
   logoUrlLabel = "",
-  
+
   // component props:
   name = "",
   username = "",
   text = "",
-  showTwitterUI = true,
+  showXUI = true,
   verified = true,
   profileImage = "",
-  tweetImage = "",
+  postImage = "",
+  postTimestamp,
+  postViews,
+  postComments,
+  postRetweets,
+  postLikes,
 }) => {
   return (
     <CardContainer
@@ -49,81 +59,121 @@ export const TwitterPreview: React.FC<TwitterPreviewProps> = ({
       lightMode={true}
       scale={scale}
     >
-      <div className="twitter-preview-container">
-        {showTwitterUI && (
-          <div className="twitter-header">
-            <div className="twitter-avatar">
+      <div className="x-preview-container relative">
+        {showXUI && (
+          <div className="x-icon-main">
+            <svg viewBox="0 0 24 24" aria-hidden="true" className="">
+              <g>
+                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
+              </g>
+            </svg>
+          </div>
+        )}
+        {showXUI && (
+          <div className="x-header">
+            <div className="x-avatar">
               {profileImage ? (
-                <img src={profileImage} alt="Profile" className="profile-image" />
+                <img
+                  src={profileImage}
+                  alt="Profile"
+                  className="profile-image"
+                />
               ) : null}
             </div>
-            <div className="twitter-user-info">
-              <div className="twitter-name-container">
-                <span className="twitter-name">{name}</span>
+            <div className="x-user-info">
+              <div className="x-name-container">
+                <span className="x-name">{name}</span>
                 {verified && (
-                  <svg viewBox="0 0 24 24" className="twitter-verified">
+                  <svg viewBox="0 0 24 24" className="x-verified">
                     <path d="M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z"></path>
                   </svg>
                 )}
               </div>
-              <span className="twitter-username">@{username}</span>
+              <span className="x-username">@{username}</span>
             </div>
           </div>
         )}
-        
-        <TwitterText text={text} />
-        
-        {tweetImage && (
-          <div className="tweet-image-container">
-            <img src={tweetImage} alt="Tweet content" className="tweet-image" />
-          </div>
-        )}
-        
-        {showTwitterUI && (
-          <div className="twitter-footer">
-            <div className="twitter-stats">
-              <span className="twitter-stat">1:23 PM · Feb 28, 2025</span>
-              <span className="twitter-stat">·</span>
-              <span className="twitter-stat">10.4K Views</span>
+
+        <XText text={text} />
+        {showXUI && (
+          <div className="x-footer">
+            <div className="x-stats">
+              <span className="x-stat">
+                {new Date(postTimestamp).toLocaleString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  year: "numeric",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                })}
+              </span>
+              <span className="x-stat">·</span>
+              <span className="x-stat">{
+                formatNumberValue(postViews)
+              } Views</span>
             </div>
-            <div className="twitter-actions">
-              <div className="twitter-action">
-                <svg viewBox="0 0 24 24" className="twitter-icon">
+            <div className="x-actions">
+              <div className="x-action">
+                <svg viewBox="0 0 24 24" className="x-icon">
                   <path d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z"></path>
                 </svg>
-                <span>128</span>
+                <span>
+                  {formatNumberValue(postComments)}
+                </span>
               </div>
-              <div className="twitter-action">
-                <svg viewBox="0 0 24 24" className="twitter-icon">
+              <div className="x-action">
+                <svg viewBox="0 0 24 24" className="x-icon">
                   <path d="M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z"></path>
                 </svg>
-                <span>45</span>
+                <span>{
+                  formatNumberValue(postRetweets)
+                }</span>
               </div>
-              <div className="twitter-action">
-                <svg viewBox="0 0 24 24" className="twitter-icon">
+              <div className="x-action">
+                <svg viewBox="0 0 24 24" className="x-icon">
                   <path d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"></path>
                 </svg>
-                <span>298</span>
+                <span>{
+                  formatNumberValue(postLikes)
+                }</span>
               </div>
-              <div className="twitter-action">
-                <svg viewBox="0 0 24 24" className="twitter-icon">
+              <div className="x-action">
+                <svg viewBox="0 0 24 24" className="x-icon">
                   <path d="M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z"></path>
                 </svg>
               </div>
             </div>
           </div>
         )}
+        {postImage && (
+          <div className="post-image-container">
+            <img src={postImage} alt="Tweet content" className="post-image" />
+          </div>
+        )}
       </div>
     </CardContainer>
   );
 };
 
-function TwitterText({ text }: { text: string }) {
+function XText({ text }: { text: string }) {
   return (
-    <div className="twitter-text">
+    <div className="x-text">
       {text.split("\n").map((line, index) => (
         <p key={index}>{line}</p>
       ))}
     </div>
   );
+}
+
+
+function formatNumberValue(num: number): string {
+ try {
+   if (num < 1000) return num.toString();
+  if (num < 1_000_000) return (num / 1000).toFixed(num % 1000 === 0 ? 0 : 1) + "k";
+  if (num < 1_000_000_000) return (num / 1_000_000).toFixed(num % 1_000_000 === 0 ? 0 : 1) + "m";
+  if (num < 1_000_000_000_000) return (num / 1_000_000_000).toFixed(num % 1_000_000_000 === 0 ? 0 : 1) + "b";
+  return (num / 1_000_000_000_000).toFixed(num % 1_000_000_000_000 === 0 ? 0 : 1) + "t";
+ } catch (error) {
+    return num.toString();
+ }
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 376332a..49d6394 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,12 +20,33 @@ importers:
 
   apps/web:
     dependencies:
+      '@radix-ui/react-aspect-ratio':
+        specifier: ^1.1.7
+        version: 1.1.7(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slider':
+        specifier: ^1.3.6
+        version: 1.3.6(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-switch':
+        specifier: ^1.2.6
+        version: 1.2.6(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-tabs':
+        specifier: ^1.1.13
+        version: 1.1.13(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-toggle':
+        specifier: ^1.1.10
+        version: 1.1.10(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@repo/constants':
         specifier: workspace:*
         version: link:../../packages/constants
       '@repo/ui':
         specifier: workspace:*
         version: link:../../packages/ui
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       highlight.js:
         specifier: ^11.11.1
         version: 11.11.1
@@ -53,6 +74,9 @@ importers:
       remark-gfm:
         specifier: ^4.0.1
         version: 4.0.1
+      tailwind-merge:
+        specifier: ^3.3.1
+        version: 3.3.1
     devDependencies:
       '@repo/eslint-config':
         specifier: workspace:*
@@ -606,6 +630,228 @@ packages:
     resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
     engines: {node: '>= 10.0.0'}
 
+  '@radix-ui/number@1.1.1':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+
+  '@radix-ui/primitive@1.1.3':
+    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+
+  '@radix-ui/react-aspect-ratio@1.1.7':
+    resolution: {integrity: sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context@1.1.2':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-id@1.1.1':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.5':
+    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.1.11':
+    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slider@1.3.6':
+    resolution: {integrity: sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-switch@1.2.6':
+    resolution: {integrity: sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tabs@1.1.13':
+    resolution: {integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle@1.1.10':
+    resolution: {integrity: sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
@@ -927,9 +1173,16 @@ packages:
     resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
     engines: {node: '>=18'}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -2069,6 +2322,9 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  tailwind-merge@3.3.1:
+    resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
+
   tailwindcss@4.1.11:
     resolution: {integrity: sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==}
 
@@ -2529,6 +2785,200 @@ snapshots:
       '@parcel/watcher-win32-ia32': 2.5.1
       '@parcel/watcher-win32-x64': 2.5.1
 
+  '@radix-ui/number@1.1.1': {}
+
+  '@radix-ui/primitive@1.1.3': {}
+
+  '@radix-ui/react-aspect-ratio@1.1.7(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.0
+      '@types/react-dom': 19.1.1(@types/react@19.1.0)
+
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.0)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.0
+      '@types/react-dom': 19.1.1(@types/react@19.1.0)
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.0)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.0
+
+  '@radix-ui/react-context@1.1.2(@types/react@19.1.0)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.0
+
+  '@radix-ui/react-direction@1.1.1(@types/react@19.1.0)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.0
+
+  '@radix-ui/react-id@1.1.1(@types/react@19.1.0)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.0)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.0
+
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.0)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.0
+      '@types/react-dom': 19.1.1(@types/react@19.1.0)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.0)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.0
+      '@types/react-dom': 19.1.1(@types/react@19.1.0)
+
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.0)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.0
+      '@types/react-dom': 19.1.1(@types/react@19.1.0)
+
+  '@radix-ui/react-slider@1.3.6(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.0)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.0
+      '@types/react-dom': 19.1.1(@types/react@19.1.0)
+
+  '@radix-ui/react-slot@1.2.3(@types/react@19.1.0)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.0)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.0
+
+  '@radix-ui/react-switch@1.2.6(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.0)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.0
+      '@types/react-dom': 19.1.1(@types/react@19.1.0)
+
+  '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.0)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.0
+      '@types/react-dom': 19.1.1(@types/react@19.1.0)
+
+  '@radix-ui/react-toggle@1.1.10(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.1(@types/react@19.1.0))(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.0)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.0
+      '@types/react-dom': 19.1.1(@types/react@19.1.0)
+
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.0)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.0
+
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.1.0)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.0)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.0)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.0
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.1.0)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.0)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.0
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.0)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.0
+
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.1.0)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.0
+
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.1.0)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.0)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.0
+
   '@swc/helpers@0.5.15':
     dependencies:
       tslib: 2.8.1
@@ -2902,8 +3352,14 @@ snapshots:
 
   chownr@3.0.0: {}
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
   client-only@0.0.1: {}
 
+  clsx@2.1.1: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -4473,6 +4929,8 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  tailwind-merge@3.3.1: {}
+
   tailwindcss@4.1.11: {}
 
   tailwindcss@4.1.5: {}