Release v0.0.1 (#4)

* 🐛 fix display when no Iframe

* ✨ Improve simple cursor variants

* ✨ improve responsive of skeleton children

* 💄 update component height

* ✨ Add component wrapper h-full children

* 🏷️ add prefer-desktop badge

* 🔍 Add manifest, metadatas & sitemap

* ✨ Improve home page with card preview

* 🔥 replace changelog by featurebase changelogs

* 🚧 Add coming soon categories

* 🎨  Improve existing components

* 🎨 Improve website & code structure & minor errors

* 📝 Add micro interactions section to About page

public/manifest.json

@@ -0,0 +1,12 @@
+{
+	"theme_color": "#e34ba9",
+	"background_color": "#F3F3F3",
+	"display": "standalone",
+	"scope": "/",
+	"start_url": "/localhost:3000",
+	"name": "CuiCui",
+	"short_name": "Cuicui",
+	"description": "The best react copy paste component library, customisable, robust and easy to use.",
+	"lang": "en",
+	"orientation": "landscape-primary"
+}

src/app/(components)/application-ui/kbd/page.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ComingSoonCard from "#/src/components/coming-soon";
+
+export default function Page() {
+  return (
+    <div>
+      <ComingSoonCard />
+    </div>
+  );
+}

src/app/(components)/application-ui/settings/page.tsx

@@ -2,8 +2,6 @@ import FullComponent from "#/src/components/full-component";
 import { getFileContentAsString } from "#/src/utils/get-file-content-as-string";
 import DynamicSettingsVariant1 from "./dynamic-settings/variant1";
 
-const BASE_COMPONENT_PATH =
-  "./src/app/(components)/marketing-components/features/";
 export default async function Page() {
   return (
     <FullComponent

src/app/(components)/application-ui/static-steppers/code/variant1.tsx

@@ -0,0 +1,76 @@
+"use client";
+import { motion, useScroll } from "framer-motion";
+import { type ReactNode, useRef } from "react";
+import { cn } from "#/src/utils/cn";
+
+const dataSteps = [
+  {
+    title: "Step 1",
+    code: "npx create-react-app my-app",
+  },
+  {
+    title: "Step 2",
+    code: "cd my-app",
+  },
+  {
+    title: "Step 3",
+    code: "npm start",
+  },
+  {
+    title: "Step 4",
+    code: "npm run build",
+  },
+];
+
+export const StepWithStickyColorVariant1 = () => {
+  return (
+    <div className="w-full max-w-2xl p-4">
+      {dataSteps.map((step, index) => (
+        <StaticStep key={step.title} step={index + 1} title={step.title}>
+          <CodeContainer>{step.code}</CodeContainer>
+        </StaticStep>
+      ))}
+    </div>
+  );
+};
+
+const StaticStep = ({
+  step,
+  title,
+  children,
+}: {
+  step: number;
+  title: string;
+  children?: ReactNode;
+}) => {
+  return (
+    <div className="flex gap-6 ">
+      <div className="flex-col flex items-center">
+        <p className="flex items-center justify-center size-8 rounded-full bg-neutral-100 dark:bg-neutral-800 dark:hover:bg-neutral-800/80 text-sm font-medium select-none flex-none text-neutral-700 dark:text-neutral-50 border-neutral-400/20 border dark:border-neutral-400/10">
+          {step}
+        </p>
+        <div className="w-px h-full relative rounded-full bg-neutral-200 dark:bg-neutral-700 my-2" />
+      </div>
+      <div className="mb-4 w-full">
+        <h6 className="text-lg ml-1 font-medium tracking-tight mb-4 text-neutral-700 dark:text-neutral-50">
+          {title}
+        </h6>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+const CodeContainer = ({ children }: { children: ReactNode }) => {
+  return (
+    <div className="w-full h-fit bg-neutral-100 dark:bg-neutral-800 dark:hover:bg-neutral-800/80 transition-colors duration-300 rounded-lg px-5 py-3 border border-neutral-400/20 dark:border-neutral-400/10">
+      <code
+        className={cn(
+          "text-neutral-500 dark:text-neutral-300 text-sm  whitespace-pre-wrap",
+        )}
+      >
+        {children}
+      </code>
+    </div>
+  );
+};

src/app/(components)/application-ui/static-steppers/page.tsx

@@ -0,0 +1,27 @@
+import FullComponent from "#/src/components/full-component";
+import { getFileContentAsString } from "#/src/utils/get-file-content-as-string";
+import { StepWithStickyColorVariant1 } from "./code/variant1";
+
+export default async function Page() {
+  return (
+    <FullComponent
+      size="sm"
+      componentList={[
+        {
+          variantName: "variant1",
+          component: <StepWithStickyColorVariant1 />,
+          code: await getFileContentAsString({
+            componentSlug: "static-steppers",
+            variantName: "code/variant1",
+          }),
+        },
+      ]}
+      librariesBadges={["framer-motion", "lucide-react", "sonner"]}
+      componentBadges={["updated"]}
+      title="Simple static stepper"
+      description="A simple static stepper component to display a list of steps."
+      inspiration="Hooks Scriptkavi manual installation"
+      inspirationLink="https://hooks.scriptkavi.com/docs/hooks/battery"
+    />
+  );
+}

src/app/(components)/common-ui/avatars/page.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import ComingSoonCard from "#/src/components/coming-soon";
+
+export default function Page() {
+  return <ComingSoonCard />;
+}

src/app/(components)/common-ui/badges/page.tsx

@@ -6,8 +6,6 @@ import ClerkBadgeVariant1 from "./clerk-badge/variant1";
 import { BadgeSimpleVariantAmber } from "./modern-simple-badges/variant1";
 import { BadgeSimpleVariantRed } from "./modern-simple-badges/variant2";
 
-const BASE_COMPONENT_PATH =
-  "./src/app/(components)/marketing-components/features/";
 export default async function Page() {
   return (
     <>

src/app/(components)/common-ui/buttons/before-effect-button/variant1.tsx

@@ -5,8 +5,7 @@ export default function BeforeEffectButtonVariant1() {
   return (
     <button
       type="button"
-      className="px-2 relative py-1 before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-neutral-500/15 before:rounded-md before:scale-0 before:hover:scale-100 before:opacity-0 before:hover:opacity-100 before:transition-all  before:-z-10 text-neutral-600 hover:text-neutral-500 transition-colors dark:text-neutral-400 before:ease-out before:duration-200
-    "
+      className="px-2 relative py-1 before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-neutral-500/15 before:rounded-md before:scale-0 before:hover:scale-100 before:opacity-0 before:hover:opacity-100 before:transition-all  before:-z-10 text-neutral-600 hover:text-neutral-500 transition-colors dark:text-neutral-400 before:ease-out before:duration-200 active:text-neutral-400 before:active:bg-neutral-500/20"
     >
       Button
     </button>

src/app/(components)/common-ui/buttons/before-effect-button/variant2.tsx

@@ -5,7 +5,7 @@ export default function BeforeEffectButtonVariant2() {
   return (
     <button
       type="button"
-      className="px-3 relative py-2 before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-neutral-500/10 before:rounded-lg before:scale-90 before:hover:scale-100 before:opacity-0 before:hover:opacity-100 before:transition-all  before:-z-10 text-neutral-600  transition-colors dark:text-neutral-400 before:ease-out before:duration-200"
+      className="px-3 relative py-2 before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-neutral-500/5 before:rounded-lg before:scale-90 before:hover:scale-100 before:opacity-0 before:hover:opacity-100 before:transition-all  before:-z-10 text-neutral-600  transition-colors dark:text-neutral-400 before:ease-out before:duration-200 before:active:bg-neutral-500/10 before:border before:border-neutral-500/5 before:dark:border-neutral-600/10"
     >
       <div className="flex items-center gap-2">
         <div className="size-6 rounded-full bg-neutral-300 border dark:bg-neutral-600 border-neutral-500/30" />

src/app/(components)/common-ui/buttons/growing-button/variant1.tsx

@@ -5,7 +5,7 @@ export default function GrowingButtonVariant1() {
   return (
     <button
       type="button"
-      className="px-2 py-1 group hover:bg-neutral-400/15 rounded-md items-center flex gap-1 transition-colors"
+      className="px-2 py-1 group hover:bg-neutral-400/15 active:bg-neutral-400/25 rounded-md items-center flex gap-1 transition-colors"
     >
       <SparklesIcon className="size-4 text-neutral-400" />
       <div className="w-fit group-hover:max-w-20 max-w-0 overflow-hidden transition-all duration-500 ">

src/app/(components)/common-ui/buttons/page.tsx

@@ -5,8 +5,6 @@ import BeforeEffectButtonVariant2 from "./before-effect-button/variant2";
 import GrowingButtonVariant1 from "./growing-button/variant1";
 import ShinyRotatingBorderButtonVariant1 from "./shiny-rotating-border-button/variant1";
 
-const BASE_COMPONENT_PATH =
-  "./src/app/(components)/marketing-components/features/";
 export default async function Page() {
   return (
     <>
@@ -23,7 +21,7 @@ export default async function Page() {
           },
         ]}
         title="Button"
-        description="Simple modern button that can be used in any project with any artisitic style."
+        description="Simple button with icon which grows on hover. Perfect for having small rarelly used buttons replacing an old tooltip."
       />
       <FullComponent
         size="xs"

src/app/(components)/common-ui/buttons/shiny-rotating-border-button/variant1.tsx

@@ -6,7 +6,7 @@ export default function ShinyRotatingBorderButtonVariant1() {
   return (
     <button
       type="button"
-      className="bg-neutral-200 dark:bg-neutral-600 p-px relative rounded-full overflow-hidden group"
+      className="bg-neutral-200 dark:bg-neutral-600 p-px relative rounded-full overflow-hidden group active:scale-95 transition-transform"
     >
       <motion.div
         initial={{ top: 0, left: 0 }}

src/app/(components)/common-ui/skeletons/page.tsx

@@ -1,7 +1,7 @@
 import FullComponent from "#/src/components/full-component";
 import { getFileContentAsString } from "#/src/utils/get-file-content-as-string";
 import { ClassicPulseVariant1 } from "./classic-pulse/variant1";
-import { ShinyGradientVariant1 } from "./shiny-gradient/variant1";
+import { ShinyGradientSkeletonVariant1 } from "./shiny-gradient/variant1";
 import { ShinyGradientVariant2 } from "./shiny-gradient/variant2";
 
 export default async function Page() {
@@ -29,7 +29,7 @@ export default async function Page() {
         componentList={[
           {
             variantName: "Horizontal",
-            component: <ShinyGradientVariant1 />,
+            component: <ShinyGradientSkeletonVariant1 />,
             code: await getFileContentAsString({
               componentSlug: "skeletons",
               variantName: "/shiny-gradient/variant1",

src/app/(components)/common-ui/skeletons/shiny-gradient/variant1.tsx

@@ -2,16 +2,14 @@
 
 import { cn } from "#/src/utils/cn";
 
-export function ShinyGradientVariant1() {
+export function ShinyGradientSkeletonVariant1() {
   return (
-    <Skeleton className="rounded-2xl">
-      <div className="flex flex-col gap-5 w-48 rounded-2xl bg-black/5 dark:bg-white/5 p-4">
-        <div className="h-24 rounded-lg dark:bg-rose-100/10 bg-neutral-200" />
-        <div className="space-y-3">
-          <div className="h-3 w-3/5 rounded-lg dark:bg-rose-100/10 bg-neutral-200" />
-          <div className="h-3 w-4/5 rounded-lg dark:bg-rose-100/20 bg-neutral-300" />
-          <div className="h-3 w-2/5 rounded-lg dark:bg-rose-100/20 bg-neutral-300" />
-        </div>
+    <Skeleton className="rounded-2xl flex flex-col gap-5 w-48 bg-black/5 dark:bg-white/5 p-4">
+      <div className="h-24 rounded-lg dark:bg-rose-100/10 bg-neutral-200 w-full" />
+      <div className="space-y-3">
+        <div className="h-3 w-3/5 rounded-lg dark:bg-rose-100/10 bg-neutral-200" />
+        <div className="h-3 w-4/5 rounded-lg dark:bg-rose-100/20 bg-neutral-300" />
+        <div className="h-3 w-2/5 rounded-lg dark:bg-rose-100/20 bg-neutral-300" />
       </div>
     </Skeleton>
   );

src/app/(components)/hooks/page.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ComingSoonCard from "#/src/components/coming-soon";
+
+export default function Page() {
+  return (
+    <div>
+      <ComingSoonCard />
+    </div>
+  );
+}

src/app/(components)/hooks/picture-in-picture/page.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ComingSoonCard from "#/src/components/coming-soon";
+
+export default function Page() {
+  return (
+    <div>
+      <ComingSoonCard />
+    </div>
+  );
+}

src/app/(components)/marketing-components/pricing-tables/page.tsx

@@ -5,25 +5,23 @@ import ManyOffersVariant1 from "./many-offers/variant1";
 
 export default async function Page() {
   return (
-    <>
-      <FullComponent
-        size="xl"
-        componentList={[
-          {
-            variantName: "Many offers",
-            component: <ManyOffersVariant1 />,
-            code: await getFileContentAsString({
-              componentSlug: "pricing-tables",
-              variantName: "/many-offers/variant1",
-            }),
-          },
-        ]}
-        title="Pricing with many offers"
-        description="A pricing table with a lot of offers"
-        inspiration="Artlist"
-        inspirationLink="https://artlist.io/pricing"
-        librariesBadges={["lucide-react"]}
-      />
-    </>
+    <FullComponent
+      size="lg"
+      componentList={[
+        {
+          variantName: "Many offers",
+          component: <ManyOffersVariant1 />,
+          code: await getFileContentAsString({
+            componentSlug: "pricing-tables",
+            variantName: "/many-offers/variant1",
+          }),
+        },
+      ]}
+      title="Pricing with many offers"
+      description="A pricing table with a lot of offers"
+      inspiration="Artlist"
+      inspirationLink="https://artlist.io/pricing"
+      librariesBadges={["lucide-react"]}
+    />
   );
 }

src/app/(components)/other/cursors/dynamic-cards/variant2.tsx

@@ -1,9 +1,10 @@
 "use client";
 import React, { useRef, useEffect, useState } from "react";
+import { cn } from "#/src/utils/cn";
 
 export default function DynamicCardsVariant2() {
   return (
-    <div className="relative w-full h-full">
+    <div className="relative w-5/6 p-12">
       <div className="grid gap-2 md:grid-cols-2 grid-cols-1">
         <Card
           title="CuiCui"
@@ -43,7 +44,10 @@ const Card = ({
       className="relative overflow-hidden rounded-[20px] bg-white/10 p-2"
     >
       <div
-        className="size-40 rounded-full blur-3xl absolute top-[var(--y)] left-[var(--x)] -translate-x-1/2 -translate-y-1/2"
+        className={cn(
+          "size-40 rounded-full blur-3xl absolute top-[var(--y)] left-[var(--x)] -translate-x-1/2 -translate-y-1/2",
+          (x === null || y === null) && "hidden",
+        )}
         style={{
           background:
             "linear-gradient(135deg, #3BC4F2, #7A69F9,#F26378,#F5833F)",

src/app/(components)/other/cursors/follow-cursor/variant1.tsx

@@ -5,8 +5,8 @@ export default function FollowCursorVariant1() {
   const { x, y, parentRef } = useMousePosition();
 
   return (
-    <div className="w-full h-full relative" ref={parentRef}>
-      {x && y && (
+    <div className="w-full h-full relative cursor-none" ref={parentRef}>
+      {x !== null && y !== null && (
         <div
           className="size-6 bg-neutral-500/15 border border-neutral-500/20 rounded-full absolute -translate-x-1/2 -translate-y-1/2 pointer-events-none"
           style={{