Dev

.env.example

@@ -5,8 +5,4 @@ NODE_ENV=development
 ANALYZE=false
 
 # Telemetry (set to 1 to disable)
-NEXT_TELEMETRY_DISABLED=1
-
-# Add any other environment variables your app needs below
-# NEXT_PUBLIC_API_URL=
-# NEXT_PUBLIC_ANALYTICS_ID=
+NEXT_TELEMETRY_DISABLED=1

next.config.ts

@@ -11,37 +11,36 @@ const analyzer = withBundleAnalyzer({
 const nextConfig: NextConfig = {
   output: "standalone",
   images: {
+    loader: "custom",
+    loaderFile: "./src/lib/cloudinaryLoader.ts",
     remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "images.unsplash.com",
-      },
-      {
-        protocol: "https",
-        hostname: "i.ibb.co",
-      },
       {
         protocol: "https",
         hostname: "res.cloudinary.com",
-      },
-      {
-        protocol: "https",
-        hostname: "plus.unsplash.com",
+        pathname: "/**",
       },
       {
         protocol: "https",
         hostname: "raw.githubusercontent.com",
+        pathname: "/**",
       },
       {
         protocol: "https",
-        hostname: "nurui.vercel.app",
+        hostname: "avatars.githubusercontent.com",
+        pathname: "/**",
       },
       {
         protocol: "https",
-        hostname: "avatars.githubusercontent.com",
+        hostname: "nurui.vercel.app",
+        pathname: "/**",
       },
     ],
+    formats: ["image/avif", "image/webp"],
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+    minimumCacheTTL: 60 * 60 * 24 * 365,
   },
+  compress: true,
   pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
   webpack(config) {
     config.module.rules.push({
@@ -51,6 +50,9 @@ const nextConfig: NextConfig = {
     });
     return config;
   },
+  compiler: {
+    removeConsole: process.env.NODE_ENV === "production",
+  },
 };
 
 const withMDX = createMDX({

package.json

@@ -41,6 +41,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cross-env": "^10.1.0",
+    "d3": "^7.9.0",
     "dotted-map": "^2.2.3",
     "gsap": "^3.13.0",
     "lodash": "^4.17.21",
@@ -70,6 +71,7 @@
     "svg-path-commander": "^2.1.10",
     "tailwind-merge": "^3.3.1",
     "three": "^0.176.0",
+    "topojson-client": "^3.1.0",
     "tw-animate-css": "^1.3.4",
     "typescript": "^5.8.3",
     "uuid": "^11.1.0",
@@ -79,6 +81,7 @@
     "@eslint/eslintrc": "^3",
     "@next/bundle-analyzer": "^15.5.4",
     "@react-three/drei": "^10.6.1",
+    "@types/d3": "^7.4.3",
     "@types/lodash": "^4.17.15",
     "@types/matter-js": "^0.20.0",
     "@types/mdx": "^2.0.13",
@@ -88,6 +91,7 @@
     "@types/react-dom": "^19",
     "@types/react-lottie": "^1.2.10",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/topojson-client": "^3.1.5",
     "eslint": "^9",
     "eslint-config-next": "15.1.7",
     "postcss": "^8",

public/r/animated-list.json

@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "./src/components/nurui/animated-list-demo.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\nimport { Notification } from \"@/components/nurui/notification\";\nimport { AnimatedList } from \"@/components/nurui/animated-list-items\";\n\nlet notifications = [\n  {\n    name: \"New follower\",\n    description: \"Alex started following you\",\n    time: \"2m ago\",\n    icon: \"👥\",\n    color: \"#6C63FF\",\n  },\n  {\n    name: \"Comment received\",\n    description: \"John commented on your post\",\n    time: \"5m ago\",\n    icon: \"💬\",\n    color: \"#FF6584\",\n  },\n  {\n    name: \"File uploaded\",\n    description: \"You uploaded 'design.png'\",\n    time: \"8m ago\",\n    icon: \"📁\",\n    color: \"#4CAF50\",\n  },\n  {\n    name: \"Payment processed\",\n    description: \"$120 sent to your account\",\n    time: \"12m ago\",\n    icon: \"💳\",\n    color: \"#00BFA6\",\n  },\n  {\n    name: \"New like\",\n    description: \"Sophia liked your photo\",\n    time: \"18m ago\",\n    icon: \"❤️\",\n    color: \"#FF1744\",\n  },\n  {\n    name: \"System alert\",\n    description: \"Server downtime detected\",\n    time: \"25m ago\",\n    icon: \"⚠️\",\n    color: \"#FFC107\",\n  },\n  {\n    name: \"Message received\",\n    description: \"Daniel sent you a message\",\n    time: \"45m ago\",\n    icon: \"📨\",\n    color: \"#2196F3\",\n  },\n  {\n    name: \"Password updated\",\n    description: \"Your account password has been changed\",\n    time: \"1h ago\",\n    icon: \"🔑\",\n    color: \"#9C27B0\",\n  },\n];\nnotifications = Array.from({ length: 10 }, () => notifications).flat();\n\nexport function AnimatedListDemo({ className }: { className?: string }) {\n  return (\n    <div\n      className={cn(\n        \"relative flex h-[30rem] w-full flex-col overflow-hidden p-2\",\n        className,\n      )}\n    >\n      <AnimatedList>\n        {notifications.map((item, idx) => (\n          <Notification {...item} key={idx} />\n        ))}\n      </AnimatedList>\n\n      <div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-1/4 bg-gradient-to-t from-background\"></div>\n    </div>\n  );\n}\n",
+      "content": "import { cn } from \"@/lib/utils\";\nimport { Notification } from \"@/components/nurui/notification\";\nimport { AnimatedList } from \"@/components/nurui/animated-list-items\";\n\nlet notifications = [\n  {\n    name: \"New follower\",\n    description: \"Alex started following you\",\n    time: \"2m ago\",\n    icon: \"👥\",\n    color: \"#6C63FF\",\n  },\n  {\n    name: \"Comment received\",\n    description: \"John commented on your post\",\n    time: \"5m ago\",\n    icon: \"💬\",\n    color: \"#FF6584\",\n  },\n  {\n    name: \"File uploaded\",\n    description: \"You uploaded 'design.png'\",\n    time: \"8m ago\",\n    icon: \"📁\",\n    color: \"#4CAF50\",\n  },\n  {\n    name: \"Payment processed\",\n    description: \"$120 sent to your account\",\n    time: \"12m ago\",\n    icon: \"💳\",\n    color: \"#00BFA6\",\n  },\n  {\n    name: \"New like\",\n    description: \"Sophia liked your photo\",\n    time: \"18m ago\",\n    icon: \"❤️\",\n    color: \"#FF1744\",\n  },\n  {\n    name: \"System alert\",\n    description: \"Server downtime detected\",\n    time: \"25m ago\",\n    icon: \"⚠️\",\n    color: \"#FFC107\",\n  },\n  {\n    name: \"Message received\",\n    description: \"Daniel sent you a message\",\n    time: \"45m ago\",\n    icon: \"📨\",\n    color: \"#2196F3\",\n  },\n  {\n    name: \"Password updated\",\n    description: \"Your account password has been changed\",\n    time: \"1h ago\",\n    icon: \"🔑\",\n    color: \"#9C27B0\",\n  },\n];\nnotifications = Array.from({ length: 10 }, () => notifications).flat();\n\nfunction AnimatedListDemo({ className }: { className?: string }) {\n  return (\n    <div\n      className={cn(\n        \"relative flex h-[30rem] w-full flex-col overflow-hidden p-2\",\n        className,\n      )}\n    >\n      <AnimatedList>\n        {notifications.map((item, idx) => (\n          <Notification {...item} key={idx} />\n        ))}\n      </AnimatedList>\n\n      <div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-1/4 bg-gradient-to-t from-background\"></div>\n    </div>\n  );\n}\n\nexport default AnimatedListDemo;\n",
       "type": "registry:component"
     },
     {

public/r/animated-pricing.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "./src/components/nurui/animated-pricing-demo.tsx",
-      "content": "import {\n  ModernPricingPage,\n  PricingCardProps,\n} from \"@/components/nurui/modern-pricing-page\";\n\nconst myPricingPlans: PricingCardProps[] = [\n  {\n    planName: \"Basic\",\n    description: \"Perfect for personal projects and hobbyists.\",\n    price: \"0\",\n    features: [\"1 User\", \"1GB Storage\", \"Community Forum\"],\n    buttonText: \"Get Started\",\n    buttonVariant: \"secondary\",\n  },\n  {\n    planName: \"Team\",\n    description: \"Collaborate with your team on multiple projects.\",\n    price: \"49\",\n    features: [\n      \"10 Users\",\n      \"100GB Storage\",\n      \"Email Support\",\n      \"Shared Workspaces\",\n    ],\n    buttonText: \"Choose Team Plan\",\n    isPopular: true,\n    buttonVariant: \"primary\",\n  },\n  {\n    planName: \"Agency\",\n    description: \"Manage all your clients under one roof.\",\n    price: \"149\",\n    features: [\n      \"Unlimited Users\",\n      \"1TB Storage\",\n      \"Dedicated Support\",\n      \"Client Invoicing\",\n    ],\n    buttonText: \"Contact Us\",\n    buttonVariant: \"primary\",\n  },\n];\n\nconst AnimatedPricingDemo = () => {\n  return (\n    <ModernPricingPage\n      title={\n        <>\n          Find the <span className=\"text-cyan-400\">Perfect Plan</span>\n        </>\n      }\n      subtitle=\"Start for free, then grow with us. Flexible plans for projects of all sizes.\"\n      plans={myPricingPlans}\n      showAnimatedBackground={true}\n    />\n  );\n};\n\nexport { AnimatedPricingDemo };\n",
+      "content": "import {\n  ModernPricingPage,\n  PricingCardProps,\n} from \"@/components/nurui/modern-pricing-page\";\n\nconst myPricingPlans: PricingCardProps[] = [\n  {\n    planName: \"Basic\",\n    description: \"Perfect for personal projects and hobbyists.\",\n    price: \"0\",\n    features: [\"1 User\", \"1GB Storage\", \"Community Forum\"],\n    buttonText: \"Get Started\",\n    buttonVariant: \"secondary\",\n  },\n  {\n    planName: \"Team\",\n    description: \"Collaborate with your team on multiple projects.\",\n    price: \"49\",\n    features: [\n      \"10 Users\",\n      \"100GB Storage\",\n      \"Email Support\",\n      \"Shared Workspaces\",\n    ],\n    buttonText: \"Choose Team Plan\",\n    isPopular: true,\n    buttonVariant: \"primary\",\n  },\n  {\n    planName: \"Agency\",\n    description: \"Manage all your clients under one roof.\",\n    price: \"149\",\n    features: [\n      \"Unlimited Users\",\n      \"1TB Storage\",\n      \"Dedicated Support\",\n      \"Client Invoicing\",\n    ],\n    buttonText: \"Contact Us\",\n    buttonVariant: \"primary\",\n  },\n];\n\nconst AnimatedPricingDemo = () => {\n  return (\n    <ModernPricingPage\n      title={\n        <>\n          Find the <span className=\"text-cyan-400\">Perfect Plan</span>\n        </>\n      }\n      subtitle=\"Start for free, then grow with us. Flexible plans for projects of all sizes.\"\n      plans={myPricingPlans}\n      showAnimatedBackground={true}\n    />\n  );\n};\n\nexport default AnimatedPricingDemo;",
       "type": "registry:component"
     },
     {

public/r/border-button.json

@@ -17,9 +17,7 @@
     },
     {
       "path": "./src/components/nurui/border-button.tsx",
-
-      "content": "import { cn } from \"@/lib/utils\";\r\nimport React from \"react\";\r\nimport { FaLocationArrow } from \"react-icons/fa\";\r\n\r\nconst BorderAnimationButton = ({ text , className}: { text: string , className?: string}) => {\r\n  return (\r\n    <div className={cn(\"relative inline-flex h-12 active:scale-95 transistion overflow-hidden rounded-lg p-[1px] focus:outline-none\", className)}>\r\n      <span className=\"absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#e7029a_0%,#f472b6_50%,#bd5fff_100%)]\"></span>\r\n      <p className=\"inline-flex h-full w-full cursor-pointer items-center justify-center rounded-lg bg-slate-950 px-7 text-sm font-medium text-white backdrop-blur-3xl gap-2 undefined\">\r\n        <span>{text}</span>\r\n        <FaLocationArrow />\r\n      </p>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default BorderAnimationButton;\r\n",
-
+      "content": "import { cn } from \"@/lib/utils\";\nimport React from \"react\";\nimport { FaLocationArrow } from \"react-icons/fa\";\n\nconst BorderAnimationButton = ({ text , className}: { text: string , className?: string}) => {\n  return (\n    <div className={cn(\"relative inline-flex h-12 active:scale-95 transistion overflow-hidden rounded-lg p-[1px] focus:outline-none\", className)}>\n      <span className=\"absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#e7029a_0%,#f472b6_50%,#bd5fff_100%)]\"></span>\n      <p className=\"inline-flex h-full w-full cursor-pointer items-center justify-center rounded-lg bg-slate-950 px-7 text-sm font-medium text-white backdrop-blur-3xl gap-2 undefined\">\n        <span>{text}</span>\n        <FaLocationArrow />\n      </p>\n    </div>\n  );\n};\n\nexport default BorderAnimationButton;\n",
       "type": "registry:component"
     }
   ]