@m5kdev/web-ui 0.8.7 → 0.8.8

package/dist/src/components/features-section-demo-3.js

@@ -0,0 +1,263 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_src_lib_utils = require("../lib/utils.js");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let motion_react = require("motion/react");
+let _tabler_icons_react = require("@tabler/icons-react");
+let cobe = require("cobe");
+cobe = require_runtime.__toESM(cobe);
+//#region src/components/features-section-demo-3.tsx
+function FeaturesSectionDemo() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative z-20 py-10 lg:py-40 max-w-7xl mx-auto",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "px-8",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+				className: "text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white",
+				children: "Packed with thousands of features"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-sm lg:text-base  max-w-2xl  my-4 mx-auto text-neutral-500 text-center font-normal dark:text-neutral-300",
+				children: "From Image generation to video generation, Everything AI has APIs for literally everything. It can even create this website copy for you."
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "relative ",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "grid grid-cols-1 lg:grid-cols-6 mt-12 xl:border rounded-md dark:border-neutral-800",
+				children: [
+					{
+						title: "Open Source Projects",
+						description: "Track and manage your project issues with ease using our intuitive interface.",
+						skeleton: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonOne, {}),
+						className: "col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800"
+					},
+					{
+						title: "Research Papers",
+						description: "Capture stunning photos effortlessly using our advanced AI technology.",
+						skeleton: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonTwo, {}),
+						className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800"
+					},
+					{
+						title: "Side Projects",
+						description: "Whether its you or Tyler Durden, you can get to know about our product on YouTube",
+						skeleton: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonThree, {}),
+						className: "col-span-1 lg:col-span-3 lg:border-r  dark:border-neutral-800"
+					},
+					{
+						title: "Music",
+						description: "With our blazing fast, state of the art, cutting edge, we are so back cloud servies (read AWS) - you can deploy your model in seconds.",
+						skeleton: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonFour, {}),
+						className: "col-span-1 lg:col-span-3 border-b lg:border-none"
+					}
+				].map((feature) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FeatureCard, {
+					className: feature.className,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FeatureTitle, { children: feature.title }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FeatureDescription, { children: feature.description }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: " h-full w-full",
+							children: feature.skeleton
+						})
+					]
+				}, feature.title))
+			})
+		})]
+	});
+}
+const FeatureCard = ({ children, className }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_src_lib_utils.cn("p-4 sm:p-8 relative overflow-hidden", className),
+		children
+	});
+};
+const FeatureTitle = ({ children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: " max-w-5xl mx-auto text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug",
+		children
+	});
+};
+const FeatureDescription = ({ children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: require_src_lib_utils.cn("text-sm md:text-base  max-w-4xl text-left mx-auto", "text-neutral-500 text-center font-normal dark:text-neutral-300", "text-left max-w-sm mx-0 md:text-sm my-2"),
+		children
+	});
+};
+const SkeletonOne = () => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative flex py-8 px-2 gap-10 h-full",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "w-full  p-5  mx-auto bg-white dark:bg-neutral-900 shadow-2xl group h-full",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex flex-1 w-full h-full flex-col space-y-2  ",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+						src: "/linear.webp",
+						alt: "header",
+						width: 800,
+						height: 800,
+						className: "h-full w-full aspect-square object-cover object-left-top rounded-sm"
+					})
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "absolute bottom-0 z-40 inset-x-0 h-60 bg-gradient-to-t from-white dark:from-black via-white dark:via-black to-transparent w-full pointer-events-none" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "absolute top-0 z-40 inset-x-0 h-60 bg-gradient-to-b from-white dark:from-black via-transparent to-transparent w-full pointer-events-none" })
+		]
+	});
+};
+const SkeletonThree = () => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		href: "https://www.youtube.com/watch?v=RPa3_AD1_Vs",
+		target: "__blank",
+		className: "relative flex gap-10  h-full group/image",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "w-full  mx-auto bg-transparent dark:bg-transparent group h-full",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-1 w-full h-full flex-col space-y-2  relative",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconBrandYoutubeFilled, { className: "h-20 w-20 absolute z-10 inset-0 text-red-500 m-auto " }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					src: "https://assets.aceternity.com/fireship.jpg",
+					alt: "header",
+					width: 800,
+					height: 800,
+					className: "h-full w-full aspect-square object-cover object-center rounded-sm blur-none group-hover/image:blur-md transition-all duration-200"
+				})]
+			})
+		})
+	});
+};
+const SkeletonTwo = () => {
+	const images = [
+		"https://images.unsplash.com/photo-1517322048670-4fba75cbbb62?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+		"https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=3425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+		"https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+		"https://images.unsplash.com/photo-1554931670-4ebfabf6e7a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+		"https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=2581&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+	];
+	const imageVariants = {
+		whileHover: {
+			scale: 1.1,
+			rotate: 0,
+			zIndex: 100
+		},
+		whileTap: {
+			scale: 1.1,
+			rotate: 0,
+			zIndex: 100
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative flex flex-col items-start p-8 gap-10 h-full overflow-hidden",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex flex-row -ml-20",
+				children: images.map((image, idx) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.motion.div, {
+					variants: imageVariants,
+					style: { rotate: Math.random() * 20 - 10 },
+					whileHover: "whileHover",
+					whileTap: "whileTap",
+					className: "rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+						src: image,
+						alt: "bali images",
+						width: "500",
+						height: "500",
+						className: "rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
+					})
+				}, "images-first" + idx))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex flex-row",
+				children: images.map((image, idx) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.motion.div, {
+					style: { rotate: Math.random() * 20 - 10 },
+					variants: imageVariants,
+					whileHover: "whileHover",
+					whileTap: "whileTap",
+					className: "rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+						src: image,
+						alt: "bali images",
+						width: "500",
+						height: "500",
+						className: "rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
+					})
+				}, "images-second" + idx))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "absolute left-0 z-[100] inset-y-0 w-20 bg-gradient-to-r from-white dark:from-black to-transparent  h-full pointer-events-none" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "absolute right-0 z-[100] inset-y-0 w-20 bg-gradient-to-l from-white dark:from-black  to-transparent h-full pointer-events-none" })
+		]
+	});
+};
+const SkeletonFour = () => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "h-60 md:h-60  flex flex-col items-center relative bg-transparent dark:bg-transparent mt-10",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Globe, { className: "absolute -right-10 md:-right-10 -bottom-80 md:-bottom-72" })
+	});
+};
+const Globe = ({ className }) => {
+	const canvasRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		let phi = 0;
+		if (!canvasRef.current) return;
+		const globe = (0, cobe.default)(canvasRef.current, {
+			devicePixelRatio: 2,
+			width: 600 * 2,
+			height: 600 * 2,
+			phi: 0,
+			theta: 0,
+			dark: 1,
+			diffuse: 1.2,
+			mapSamples: 16e3,
+			mapBrightness: 6,
+			baseColor: [
+				.3,
+				.3,
+				.3
+			],
+			markerColor: [
+				.1,
+				.8,
+				1
+			],
+			glowColor: [
+				1,
+				1,
+				1
+			],
+			markers: [{
+				location: [37.7595, -122.4367],
+				size: .03
+			}, {
+				location: [40.7128, -74.006],
+				size: .1
+			}],
+			onRender: (state) => {
+				state.phi = phi;
+				phi += .01;
+			}
+		});
+		return () => {
+			globe.destroy();
+		};
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
+		ref: canvasRef,
+		style: {
+			width: 600,
+			height: 600,
+			maxWidth: "100%",
+			aspectRatio: 1
+		},
+		className
+	});
+};
+//#endregion
+exports.Globe = Globe;
+exports.SkeletonFour = SkeletonFour;
+exports.SkeletonOne = SkeletonOne;
+exports.SkeletonThree = SkeletonThree;
+exports.SkeletonTwo = SkeletonTwo;
+exports.default = FeaturesSectionDemo;
+
+//# sourceMappingURL=features-section-demo-3.js.map

package/dist/src/components/features-section-demo-3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"features-section-demo-3.js","names":["cn","IconBrandYoutubeFilled","motion"],"sources":["../../../src/components/features-section-demo-3.tsx"],"sourcesContent":["import { IconBrandYoutubeFilled } from \"@tabler/icons-react\";\r\nimport createGlobe from \"cobe\";\r\nimport { motion } from \"motion/react\";\r\nimport type React from \"react\";\r\nimport { useEffect, useRef } from \"react\";\r\nimport { cn } from \"../lib/utils\";\r\n\r\nexport default function FeaturesSectionDemo() {\r\n  const features = [\r\n    {\r\n      title: \"Open Source Projects\",\r\n      description: \"Track and manage your project issues with ease using our intuitive interface.\",\r\n      skeleton: <SkeletonOne />,\r\n      className: \"col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800\",\r\n    },\r\n    {\r\n      title: \"Research Papers\",\r\n      description: \"Capture stunning photos effortlessly using our advanced AI technology.\",\r\n      skeleton: <SkeletonTwo />,\r\n      className: \"border-b col-span-1 lg:col-span-2 dark:border-neutral-800\",\r\n    },\r\n    {\r\n      title: \"Side Projects\",\r\n      description:\r\n        \"Whether its you or Tyler Durden, you can get to know about our product on YouTube\",\r\n      skeleton: <SkeletonThree />,\r\n      className: \"col-span-1 lg:col-span-3 lg:border-r  dark:border-neutral-800\",\r\n    },\r\n    {\r\n      title: \"Music\",\r\n      description:\r\n        \"With our blazing fast, state of the art, cutting edge, we are so back cloud servies (read AWS) - you can deploy your model in seconds.\",\r\n      skeleton: <SkeletonFour />,\r\n      className: \"col-span-1 lg:col-span-3 border-b lg:border-none\",\r\n    },\r\n  ];\r\n  return (\r\n    <div className=\"relative z-20 py-10 lg:py-40 max-w-7xl mx-auto\">\r\n      <div className=\"px-8\">\r\n        <h4 className=\"text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white\">\r\n          Packed with thousands of features\r\n        </h4>\r\n\r\n        <p className=\"text-sm lg:text-base  max-w-2xl  my-4 mx-auto text-neutral-500 text-center font-normal dark:text-neutral-300\">\r\n          From Image generation to video generation, Everything AI has APIs for literally\r\n          everything. It can even create this website copy for you.\r\n        </p>\r\n      </div>\r\n\r\n      <div className=\"relative \">\r\n        <div className=\"grid grid-cols-1 lg:grid-cols-6 mt-12 xl:border rounded-md dark:border-neutral-800\">\r\n          {features.map((feature) => (\r\n            <FeatureCard key={feature.title} className={feature.className}>\r\n              <FeatureTitle>{feature.title}</FeatureTitle>\r\n              <FeatureDescription>{feature.description}</FeatureDescription>\r\n              <div className=\" h-full w-full\">{feature.skeleton}</div>\r\n            </FeatureCard>\r\n          ))}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst FeatureCard = ({\r\n  children,\r\n  className,\r\n}: {\r\n  children?: React.ReactNode;\r\n  className?: string;\r\n}) => {\r\n  return <div className={cn(\"p-4 sm:p-8 relative overflow-hidden\", className)}>{children}</div>;\r\n};\r\n\r\nconst FeatureTitle = ({ children }: { children?: React.ReactNode }) => {\r\n  return (\r\n    <p className=\" max-w-5xl mx-auto text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug\">\r\n      {children}\r\n    </p>\r\n  );\r\n};\r\n\r\nconst FeatureDescription = ({ children }: { children?: React.ReactNode }) => {\r\n  return (\r\n    <p\r\n      className={cn(\r\n        \"text-sm md:text-base  max-w-4xl text-left mx-auto\",\r\n        \"text-neutral-500 text-center font-normal dark:text-neutral-300\",\r\n        \"text-left max-w-sm mx-0 md:text-sm my-2\"\r\n      )}\r\n    >\r\n      {children}\r\n    </p>\r\n  );\r\n};\r\n\r\nexport const SkeletonOne = () => {\r\n  return (\r\n    <div className=\"relative flex py-8 px-2 gap-10 h-full\">\r\n      <div className=\"w-full  p-5  mx-auto bg-white dark:bg-neutral-900 shadow-2xl group h-full\">\r\n        <div className=\"flex flex-1 w-full h-full flex-col space-y-2  \">\r\n          {/* TODO */}\r\n          <img\r\n            src=\"/linear.webp\"\r\n            alt=\"header\"\r\n            width={800}\r\n            height={800}\r\n            className=\"h-full w-full aspect-square object-cover object-left-top rounded-sm\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div className=\"absolute bottom-0 z-40 inset-x-0 h-60 bg-gradient-to-t from-white dark:from-black via-white dark:via-black to-transparent w-full pointer-events-none\" />\r\n      <div className=\"absolute top-0 z-40 inset-x-0 h-60 bg-gradient-to-b from-white dark:from-black via-transparent to-transparent w-full pointer-events-none\" />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const SkeletonThree = () => {\r\n  return (\r\n    <a\r\n      href=\"https://www.youtube.com/watch?v=RPa3_AD1_Vs\"\r\n      target=\"__blank\"\r\n      className=\"relative flex gap-10  h-full group/image\"\r\n    >\r\n      <div className=\"w-full  mx-auto bg-transparent dark:bg-transparent group h-full\">\r\n        <div className=\"flex flex-1 w-full h-full flex-col space-y-2  relative\">\r\n          {/* TODO */}\r\n          <IconBrandYoutubeFilled className=\"h-20 w-20 absolute z-10 inset-0 text-red-500 m-auto \" />\r\n          <img\r\n            src=\"https://assets.aceternity.com/fireship.jpg\"\r\n            alt=\"header\"\r\n            width={800}\r\n            height={800}\r\n            className=\"h-full w-full aspect-square object-cover object-center rounded-sm blur-none group-hover/image:blur-md transition-all duration-200\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </a>\r\n  );\r\n};\r\n\r\nexport const SkeletonTwo = () => {\r\n  const images = [\r\n    \"https://images.unsplash.com/photo-1517322048670-4fba75cbbb62?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\r\n    \"https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=3425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\r\n    \"https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\r\n    \"https://images.unsplash.com/photo-1554931670-4ebfabf6e7a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\r\n    \"https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=2581&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\r\n  ];\r\n\r\n  const imageVariants = {\r\n    whileHover: {\r\n      scale: 1.1,\r\n      rotate: 0,\r\n      zIndex: 100,\r\n    },\r\n    whileTap: {\r\n      scale: 1.1,\r\n      rotate: 0,\r\n      zIndex: 100,\r\n    },\r\n  };\r\n  return (\r\n    <div className=\"relative flex flex-col items-start p-8 gap-10 h-full overflow-hidden\">\r\n      {/* TODO */}\r\n      <div className=\"flex flex-row -ml-20\">\r\n        {images.map((image, idx) => (\r\n          <motion.div\r\n            variants={imageVariants}\r\n            key={\"images-first\" + idx}\r\n            style={{\r\n              rotate: Math.random() * 20 - 10,\r\n            }}\r\n            whileHover=\"whileHover\"\r\n            whileTap=\"whileTap\"\r\n            className=\"rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden\"\r\n          >\r\n            <img\r\n              src={image}\r\n              alt=\"bali images\"\r\n              width=\"500\"\r\n              height=\"500\"\r\n              className=\"rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0\"\r\n            />\r\n          </motion.div>\r\n        ))}\r\n      </div>\r\n      <div className=\"flex flex-row\">\r\n        {images.map((image, idx) => (\r\n          <motion.div\r\n            key={\"images-second\" + idx}\r\n            style={{\r\n              rotate: Math.random() * 20 - 10,\r\n            }}\r\n            variants={imageVariants}\r\n            whileHover=\"whileHover\"\r\n            whileTap=\"whileTap\"\r\n            className=\"rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden\"\r\n          >\r\n            <img\r\n              src={image}\r\n              alt=\"bali images\"\r\n              width=\"500\"\r\n              height=\"500\"\r\n              className=\"rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0\"\r\n            />\r\n          </motion.div>\r\n        ))}\r\n      </div>\r\n\r\n      <div className=\"absolute left-0 z-[100] inset-y-0 w-20 bg-gradient-to-r from-white dark:from-black to-transparent  h-full pointer-events-none\" />\r\n      <div className=\"absolute right-0 z-[100] inset-y-0 w-20 bg-gradient-to-l from-white dark:from-black  to-transparent h-full pointer-events-none\" />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const SkeletonFour = () => {\r\n  return (\r\n    <div className=\"h-60 md:h-60  flex flex-col items-center relative bg-transparent dark:bg-transparent mt-10\">\r\n      <Globe className=\"absolute -right-10 md:-right-10 -bottom-80 md:-bottom-72\" />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const Globe = ({ className }: { className?: string }) => {\r\n  const canvasRef = useRef<HTMLCanvasElement>(null);\r\n\r\n  useEffect(() => {\r\n    let phi = 0;\r\n\r\n    if (!canvasRef.current) return;\r\n\r\n    const globe = createGlobe(canvasRef.current, {\r\n      devicePixelRatio: 2,\r\n      width: 600 * 2,\r\n      height: 600 * 2,\r\n      phi: 0,\r\n      theta: 0,\r\n      dark: 1,\r\n      diffuse: 1.2,\r\n      mapSamples: 16000,\r\n      mapBrightness: 6,\r\n      baseColor: [0.3, 0.3, 0.3],\r\n      markerColor: [0.1, 0.8, 1],\r\n      glowColor: [1, 1, 1],\r\n      markers: [\r\n        // longitude latitude\r\n        { location: [37.7595, -122.4367], size: 0.03 },\r\n        { location: [40.7128, -74.006], size: 0.1 },\r\n      ],\r\n      onRender: (state) => {\r\n        // Called on every animation frame.\r\n        // `state` will be an empty object, return updated params.\r\n        state.phi = phi;\r\n        phi += 0.01;\r\n      },\r\n    });\r\n\r\n    return () => {\r\n      globe.destroy();\r\n    };\r\n  }, []);\r\n\r\n  return (\r\n    <canvas\r\n      ref={canvasRef}\r\n      style={{ width: 600, height: 600, maxWidth: \"100%\", aspectRatio: 1 }}\r\n      className={className}\r\n    />\r\n  );\r\n};\r\n"],"mappings":"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"}

package/dist/src/components/mode-toggle.d.ts

@@ -0,0 +1,7 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/mode-toggle.d.ts
+declare function ModeToggle(): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ModeToggle };
+//# sourceMappingURL=mode-toggle.d.ts.map

package/dist/src/components/mode-toggle.js

@@ -0,0 +1,46 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.js");
+const require_src_components_ui_button = require("./ui/button.js");
+const require_src_components_ui_dropdown_menu = require("./ui/dropdown-menu.js");
+const require_src_components_theme_provider = require("./theme-provider.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+//#region src/components/mode-toggle.tsx
+function ModeToggle() {
+	const { setTheme } = require_src_components_theme_provider.useTheme();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_dropdown_menu.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_dropdown_menu.DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_button.Button, {
+			variant: "outline",
+			size: "icon",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Sun, { className: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Moon, { className: "absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "sr-only",
+					children: "Toggle theme"
+				})
+			]
+		})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_dropdown_menu.DropdownMenuContent, {
+		align: "end",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_dropdown_menu.DropdownMenuItem, {
+				onClick: () => setTheme("light"),
+				children: "Light"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_dropdown_menu.DropdownMenuItem, {
+				onClick: () => setTheme("dark"),
+				children: "Dark"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_dropdown_menu.DropdownMenuItem, {
+				onClick: () => setTheme("system"),
+				children: "System"
+			})
+		]
+	})] });
+}
+//#endregion
+exports.ModeToggle = ModeToggle;
+
+//# sourceMappingURL=mode-toggle.js.map

package/dist/src/components/mode-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-toggle.js","names":["useTheme","DropdownMenu","DropdownMenuTrigger","Button","Sun","Moon","DropdownMenuContent","DropdownMenuItem"],"sources":["../../../src/components/mode-toggle.tsx"],"sourcesContent":["import { Moon, Sun } from \"lucide-react\";\r\n\r\nimport { useTheme } from \"./theme-provider\";\r\nimport { Button } from \"./ui/button\";\r\nimport {\r\n  DropdownMenu,\r\n  DropdownMenuContent,\r\n  DropdownMenuItem,\r\n  DropdownMenuTrigger,\r\n} from \"./ui/dropdown-menu\";\r\n\r\nexport function ModeToggle() {\r\n  const { setTheme } = useTheme();\r\n\r\n  return (\r\n    <DropdownMenu>\r\n      <DropdownMenuTrigger asChild>\r\n        <Button variant=\"outline\" size=\"icon\">\r\n          <Sun className=\"h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\r\n          <Moon className=\"absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\r\n          <span className=\"sr-only\">Toggle theme</span>\r\n        </Button>\r\n      </DropdownMenuTrigger>\r\n      <DropdownMenuContent align=\"end\">\r\n        <DropdownMenuItem onClick={() => setTheme(\"light\")}>Light</DropdownMenuItem>\r\n        <DropdownMenuItem onClick={() => setTheme(\"dark\")}>Dark</DropdownMenuItem>\r\n        <DropdownMenuItem onClick={() => setTheme(\"system\")}>System</DropdownMenuItem>\r\n      </DropdownMenuContent>\r\n    </DropdownMenu>\r\n  );\r\n}\r\n"],"mappings":";;;;;;;;AAWA,SAAgB,aAAa;CAC3B,MAAM,EAAE,aAAaA,sCAAAA,UAAU;AAE/B,QACE,iBAAA,GAAA,kBAAA,MAACC,wCAAAA,cAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,wCAAAA,qBAAD;EAAqB,SAAA;YACnB,iBAAA,GAAA,kBAAA,MAACC,iCAAAA,QAAD;GAAQ,SAAQ;GAAU,MAAK;aAA/B;IACE,iBAAA,GAAA,kBAAA,KAACC,aAAAA,KAAD,EAAK,WAAU,wFAAyF,CAAA;IACxG,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD,EAAM,WAAU,gGAAiG,CAAA;IACjH,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eAAU;KAAmB,CAAA;IACtC;;EACW,CAAA,EACtB,iBAAA,GAAA,kBAAA,MAACC,wCAAAA,qBAAD;EAAqB,OAAM;YAA3B;GACE,iBAAA,GAAA,kBAAA,KAACC,wCAAAA,kBAAD;IAAkB,eAAe,SAAS,QAAQ;cAAE;IAAwB,CAAA;GAC5E,iBAAA,GAAA,kBAAA,KAACA,wCAAAA,kBAAD;IAAkB,eAAe,SAAS,OAAO;cAAE;IAAuB,CAAA;GAC1E,iBAAA,GAAA,kBAAA,KAACA,wCAAAA,kBAAD;IAAkB,eAAe,SAAS,SAAS;cAAE;IAAyB,CAAA;GAC1D;IACT,EAAA,CAAA"}

package/dist/src/components/mode-toggle.mjs

@@ -1,8 +1,8 @@
 import { Button } from "./ui/button.mjs";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./ui/dropdown-menu.mjs";
 import { useTheme } from "./theme-provider.mjs";
-import { Moon, Sun } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Moon, Sun } from "lucide-react";
 //#region src/components/mode-toggle.tsx
 function ModeToggle() {
 	const { setTheme } = useTheme();

package/dist/src/components/nav-main.d.mts

@@ -1,5 +1,5 @@
-import { LucideIcon } from "lucide-react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { LucideIcon } from "lucide-react";
 
 //#region src/components/nav-main.d.ts
 declare function NavMain({

package/dist/src/components/nav-main.d.ts

@@ -0,0 +1,21 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { LucideIcon } from "lucide-react";
+
+//#region src/components/nav-main.d.ts
+declare function NavMain({
+  items
+}: {
+  items: {
+    title: string;
+    url: string;
+    icon?: LucideIcon;
+    isActive?: boolean;
+    items?: {
+      title: string;
+      url: string;
+    }[];
+  }[];
+}): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { NavMain };
+//# sourceMappingURL=nav-main.d.ts.map

package/dist/src/components/nav-main.js

@@ -0,0 +1,37 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.js");
+const require_src_components_ui_collapsible = require("./ui/collapsible.js");
+const require_src_components_ui_sidebar = require("./ui/sidebar.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let react_router = require("react-router");
+//#region src/components/nav-main.tsx
+function NavMain({ items }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_sidebar.SidebarGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_sidebar.SidebarGroupLabel, { children: "Platform" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_sidebar.SidebarMenu, { children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_collapsible.Collapsible, {
+		asChild: true,
+		defaultOpen: item.isActive,
+		className: "group/collapsible",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_sidebar.SidebarMenuItem, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_collapsible.CollapsibleTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_sidebar.SidebarMenuButton, {
+				tooltip: item.title,
+				children: [
+					item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(item.icon, {}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.title }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })
+				]
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_collapsible.CollapsibleContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_sidebar.SidebarMenuSub, { children: item.items?.map((subItem) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_sidebar.SidebarMenuSubItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_sidebar.SidebarMenuSubButton, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router.Link, {
+				to: subItem.url,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: subItem.title })
+			})
+		}) }, subItem.title)) }) })] })
+	}, item.title)) })] });
+}
+//#endregion
+exports.NavMain = NavMain;
+
+//# sourceMappingURL=nav-main.js.map

package/dist/src/components/nav-main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-main.js","names":["SidebarGroup","SidebarGroupLabel","SidebarMenu","Collapsible","SidebarMenuItem","CollapsibleTrigger","SidebarMenuButton","ChevronRight","CollapsibleContent","SidebarMenuSub","SidebarMenuSubItem","SidebarMenuSubButton","Link"],"sources":["../../../src/components/nav-main.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ChevronRight, type LucideIcon } from \"lucide-react\";\r\nimport { Link } from \"react-router\";\r\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"./ui/collapsible\";\r\nimport {\r\n  SidebarGroup,\r\n  SidebarGroupLabel,\r\n  SidebarMenu,\r\n  SidebarMenuButton,\r\n  SidebarMenuItem,\r\n  SidebarMenuSub,\r\n  SidebarMenuSubButton,\r\n  SidebarMenuSubItem,\r\n} from \"./ui/sidebar\";\r\n\r\nexport function NavMain({\r\n  items,\r\n}: {\r\n  items: {\r\n    title: string;\r\n    url: string;\r\n    icon?: LucideIcon;\r\n    isActive?: boolean;\r\n    items?: {\r\n      title: string;\r\n      url: string;\r\n    }[];\r\n  }[];\r\n}) {\r\n  return (\r\n    <SidebarGroup>\r\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\r\n      <SidebarMenu>\r\n        {items.map((item) => (\r\n          <Collapsible\r\n            key={item.title}\r\n            asChild\r\n            defaultOpen={item.isActive}\r\n            className=\"group/collapsible\"\r\n          >\r\n            <SidebarMenuItem>\r\n              <CollapsibleTrigger asChild>\r\n                <SidebarMenuButton tooltip={item.title}>\r\n                  {item.icon && <item.icon />}\r\n                  <span>{item.title}</span>\r\n                  <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\r\n                </SidebarMenuButton>\r\n              </CollapsibleTrigger>\r\n              <CollapsibleContent>\r\n                <SidebarMenuSub>\r\n                  {item.items?.map((subItem) => (\r\n                    <SidebarMenuSubItem key={subItem.title}>\r\n                      <SidebarMenuSubButton asChild>\r\n                        <Link to={subItem.url}>\r\n                          <span>{subItem.title}</span>\r\n                        </Link>\r\n                      </SidebarMenuSubButton>\r\n                    </SidebarMenuSubItem>\r\n                  ))}\r\n                </SidebarMenuSub>\r\n              </CollapsibleContent>\r\n            </SidebarMenuItem>\r\n          </Collapsible>\r\n        ))}\r\n      </SidebarMenu>\r\n    </SidebarGroup>\r\n  );\r\n}\r\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,QAAQ,EACtB,SAYC;AACD,QACE,iBAAA,GAAA,kBAAA,MAACA,kCAAAA,cAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,kCAAAA,mBAAD,EAAA,UAAmB,YAA4B,CAAA,EAC/C,iBAAA,GAAA,kBAAA,KAACC,kCAAAA,aAAD,EAAA,UACG,MAAM,KAAK,SACV,iBAAA,GAAA,kBAAA,KAACC,sCAAAA,aAAD;EAEE,SAAA;EACA,aAAa,KAAK;EAClB,WAAU;YAEV,iBAAA,GAAA,kBAAA,MAACC,kCAAAA,iBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,sCAAAA,oBAAD;GAAoB,SAAA;aAClB,iBAAA,GAAA,kBAAA,MAACC,kCAAAA,mBAAD;IAAmB,SAAS,KAAK;cAAjC;KACG,KAAK,QAAQ,iBAAA,GAAA,kBAAA,KAAC,KAAK,MAAN,EAAa,CAAA;KAC3B,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,KAAK,OAAa,CAAA;KACzB,iBAAA,GAAA,kBAAA,KAACC,aAAAA,cAAD,EAAc,WAAU,2FAA4F,CAAA;KAClG;;GACD,CAAA,EACrB,iBAAA,GAAA,kBAAA,KAACC,sCAAAA,oBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,kCAAAA,gBAAD,EAAA,UACG,KAAK,OAAO,KAAK,YAChB,iBAAA,GAAA,kBAAA,KAACC,kCAAAA,oBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,kCAAAA,sBAAD;GAAsB,SAAA;aACpB,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;IAAM,IAAI,QAAQ;cAChB,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,QAAQ,OAAa,CAAA;IACvB,CAAA;GACc,CAAA,EACJ,EANI,QAAQ,MAMZ,CACrB,EACa,CAAA,EACE,CAAA,CACL,EAAA,CAAA;EACN,EA3BP,KAAK,MA2BE,CACd,EACU,CAAA,CACD,EAAA,CAAA"}

package/dist/src/components/nav-main.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.mjs";
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem } from "./ui/sidebar.mjs";
-import { ChevronRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
 import { Link } from "react-router";
 //#region src/components/nav-main.tsx
 function NavMain({ items }) {

package/dist/src/components/pricing-cards.d.ts

@@ -0,0 +1,7 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/pricing-cards.d.ts
+declare function PricingCards(): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PricingCards };
+//# sourceMappingURL=pricing-cards.d.ts.map

package/dist/src/components/pricing-cards.js

@@ -0,0 +1,130 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.js");
+const require_src_components_ui_button = require("./ui/button.js");
+const require_src_components_ui_card = require("./ui/card.js");
+const require_src_components_ui_badge = require("./ui/badge.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+//#region src/components/pricing-cards.tsx
+function PricingCard({ title, description, price, features, highlighted = false, ctaText, ctaIcon: CtaIcon, variant = "outline" }) {
+	const Icon = CtaIcon;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_card.Card, {
+		className: `w-full rounded-md ${highlighted ? "shadow-2xl" : ""}`,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_card.CardHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_card.CardTitle, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "flex flex-row gap-4 items-center font-normal",
+			children: title
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_card.CardDescription, { children: description })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_card.CardContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-8 justify-start",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: "flex flex-row items-center gap-2 text-xl",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "text-4xl",
+						children: ["$", price]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-sm text-muted-foreground",
+						children: " / month"
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex flex-col gap-4 justify-start",
+					children: features.map((feature, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-row gap-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "w-4 h-4 mt-2 text-primary" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex flex-col",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: feature.title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-muted-foreground text-sm",
+								children: feature.description
+							})]
+						})]
+					}, index))
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_button.Button, {
+					variant,
+					className: "gap-4",
+					children: [
+						ctaText,
+						" ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "w-4 h-4" })
+					]
+				})
+			]
+		}) })]
+	});
+}
+function PricingCards() {
+	const commonDescription = "Our goal is to streamline SMB trade, making it easier and faster than ever for everyone and everywhere.";
+	const commonFeatures = [
+		{
+			title: "Fast and reliable",
+			description: "We've made it fast and reliable."
+		},
+		{
+			title: "Fast and reliable",
+			description: "We've made it fast and reliable."
+		},
+		{
+			title: "Fast and reliable",
+			description: "We've made it fast and reliable."
+		}
+	];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "w-full py-20 lg:py-40",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "container mx-auto",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex text-center justify-center items-center gap-4 flex-col",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_badge.Badge, { children: "Pricing" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex gap-2 flex-col",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+							className: "text-3xl md:text-5xl tracking-tighter max-w-xl text-center font-regular",
+							children: "Prices that make sense!"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "text-lg leading-relaxed tracking-tight text-muted-foreground max-w-xl text-center",
+							children: "Managing a small business today is already tough."
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "grid pt-20 text-left grid-cols-1 lg:grid-cols-3 w-full gap-8",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PricingCard, {
+								title: "Startup",
+								description: commonDescription,
+								price: 40,
+								features: commonFeatures,
+								ctaText: "Sign up today",
+								ctaIcon: lucide_react.MoveRight,
+								variant: "outline"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PricingCard, {
+								title: "Growth",
+								description: commonDescription,
+								price: 40,
+								features: commonFeatures,
+								highlighted: true,
+								ctaText: "Sign up today",
+								ctaIcon: lucide_react.MoveRight,
+								variant: "default"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PricingCard, {
+								title: "Enterprise",
+								description: commonDescription,
+								price: 40,
+								features: commonFeatures,
+								ctaText: "Book a meeting",
+								ctaIcon: lucide_react.PhoneCall,
+								variant: "outline"
+							})
+						]
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+exports.PricingCards = PricingCards;
+
+//# sourceMappingURL=pricing-cards.js.map

package/dist/src/components/pricing-cards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pricing-cards.js","names":["Card","CardHeader","CardTitle","CardDescription","CardContent","Check","Button","Badge","MoveRight","PhoneCall"],"sources":["../../../src/components/pricing-cards.tsx"],"sourcesContent":["import { Check, type LucideIcon, MoveRight, PhoneCall } from \"lucide-react\";\r\nimport { Badge } from \"./ui/badge\";\r\nimport { Button } from \"./ui/button\";\r\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"./ui/card\";\r\n\r\ninterface Feature {\r\n  title: string;\r\n  description: string;\r\n}\r\n\r\ninterface PricingCardProps {\r\n  title: string;\r\n  description: string;\r\n  price: number;\r\n  features: Feature[];\r\n  highlighted?: boolean;\r\n  ctaText: string;\r\n  ctaIcon: LucideIcon;\r\n  variant?: \"default\" | \"outline\";\r\n}\r\n\r\nfunction PricingCard({\r\n  title,\r\n  description,\r\n  price,\r\n  features,\r\n  highlighted = false,\r\n  ctaText,\r\n  ctaIcon: CtaIcon,\r\n  variant = \"outline\",\r\n}: PricingCardProps) {\r\n  const Icon = CtaIcon;\r\n  return (\r\n    <Card className={`w-full rounded-md ${highlighted ? \"shadow-2xl\" : \"\"}`}>\r\n      <CardHeader>\r\n        <CardTitle>\r\n          <span className=\"flex flex-row gap-4 items-center font-normal\">{title}</span>\r\n        </CardTitle>\r\n        <CardDescription>{description}</CardDescription>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <div className=\"flex flex-col gap-8 justify-start\">\r\n          <p className=\"flex flex-row items-center gap-2 text-xl\">\r\n            <span className=\"text-4xl\">${price}</span>\r\n            <span className=\"text-sm text-muted-foreground\"> / month</span>\r\n          </p>\r\n          <div className=\"flex flex-col gap-4 justify-start\">\r\n            {features.map((feature, index) => (\r\n              <div key={index} className=\"flex flex-row gap-4\">\r\n                <Check className=\"w-4 h-4 mt-2 text-primary\" />\r\n                <div className=\"flex flex-col\">\r\n                  <p>{feature.title}</p>\r\n                  <p className=\"text-muted-foreground text-sm\">{feature.description}</p>\r\n                </div>\r\n              </div>\r\n            ))}\r\n          </div>\r\n          <Button variant={variant} className=\"gap-4\">\r\n            {ctaText} <Icon className=\"w-4 h-4\" />\r\n          </Button>\r\n        </div>\r\n      </CardContent>\r\n    </Card>\r\n  );\r\n}\r\n\r\nexport function PricingCards() {\r\n  const commonDescription =\r\n    \"Our goal is to streamline SMB trade, making it easier and faster than ever for everyone and everywhere.\";\r\n\r\n  const commonFeatures = [\r\n    {\r\n      title: \"Fast and reliable\",\r\n      description: \"We've made it fast and reliable.\",\r\n    },\r\n    {\r\n      title: \"Fast and reliable\",\r\n      description: \"We've made it fast and reliable.\",\r\n    },\r\n    {\r\n      title: \"Fast and reliable\",\r\n      description: \"We've made it fast and reliable.\",\r\n    },\r\n  ];\r\n\r\n  return (\r\n    <div className=\"w-full py-20 lg:py-40\">\r\n      <div className=\"container mx-auto\">\r\n        <div className=\"flex text-center justify-center items-center gap-4 flex-col\">\r\n          <Badge>Pricing</Badge>\r\n          <div className=\"flex gap-2 flex-col\">\r\n            <h2 className=\"text-3xl md:text-5xl tracking-tighter max-w-xl text-center font-regular\">\r\n              Prices that make sense!\r\n            </h2>\r\n            <p className=\"text-lg leading-relaxed tracking-tight text-muted-foreground max-w-xl text-center\">\r\n              Managing a small business today is already tough.\r\n            </p>\r\n          </div>\r\n          <div className=\"grid pt-20 text-left grid-cols-1 lg:grid-cols-3 w-full gap-8\">\r\n            <PricingCard\r\n              title=\"Startup\"\r\n              description={commonDescription}\r\n              price={40}\r\n              features={commonFeatures}\r\n              ctaText=\"Sign up today\"\r\n              ctaIcon={MoveRight}\r\n              variant=\"outline\"\r\n            />\r\n            <PricingCard\r\n              title=\"Growth\"\r\n              description={commonDescription}\r\n              price={40}\r\n              features={commonFeatures}\r\n              highlighted={true}\r\n              ctaText=\"Sign up today\"\r\n              ctaIcon={MoveRight}\r\n              variant=\"default\"\r\n            />\r\n            <PricingCard\r\n              title=\"Enterprise\"\r\n              description={commonDescription}\r\n              price={40}\r\n              features={commonFeatures}\r\n              ctaText=\"Book a meeting\"\r\n              ctaIcon={PhoneCall}\r\n              variant=\"outline\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";;;;;;;;AAqBA,SAAS,YAAY,EACnB,OACA,aACA,OACA,UACA,cAAc,OACd,SACA,SAAS,SACT,UAAU,aACS;CACnB,MAAM,OAAO;AACb,QACE,iBAAA,GAAA,kBAAA,MAACA,+BAAAA,MAAD;EAAM,WAAW,qBAAqB,cAAc,eAAe;YAAnE,CACE,iBAAA,GAAA,kBAAA,MAACC,+BAAAA,YAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,WAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAgD;GAAa,CAAA,EACnE,CAAA,EACZ,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,iBAAD,EAAA,UAAkB,aAA8B,CAAA,CACrC,EAAA,CAAA,EACb,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,aAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf;IACE,iBAAA,GAAA,kBAAA,MAAC,KAAD;KAAG,WAAU;eAAb,CACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;MAAM,WAAU;gBAAhB,CAA2B,KAAE,MAAa;SAC1C,iBAAA,GAAA,kBAAA,KAAC,QAAD;MAAM,WAAU;gBAAgC;MAAe,CAAA,CAC7D;;IACJ,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAU;eACZ,SAAS,KAAK,SAAS,UACtB,iBAAA,GAAA,kBAAA,MAAC,OAAD;MAAiB,WAAU;gBAA3B,CACE,iBAAA,GAAA,kBAAA,KAACC,aAAAA,OAAD,EAAO,WAAU,6BAA8B,CAAA,EAC/C,iBAAA,GAAA,kBAAA,MAAC,OAAD;OAAK,WAAU;iBAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,KAAD,EAAA,UAAI,QAAQ,OAAU,CAAA,EACtB,iBAAA,GAAA,kBAAA,KAAC,KAAD;QAAG,WAAU;kBAAiC,QAAQ;QAAgB,CAAA,CAClE;SACF;QANI,MAMJ,CACN;KACE,CAAA;IACN,iBAAA,GAAA,kBAAA,MAACC,iCAAAA,QAAD;KAAiB;KAAS,WAAU;eAApC;MACG;MAAQ;MAAC,iBAAA,GAAA,kBAAA,KAAC,MAAD,EAAM,WAAU,WAAY,CAAA;MAC/B;;IACL;MACM,CAAA,CACT;;;AAIX,SAAgB,eAAe;CAC7B,MAAM,oBACJ;CAEF,MAAM,iBAAiB;EACrB;GACE,OAAO;GACP,aAAa;GACd;EACD;GACE,OAAO;GACP,aAAa;GACd;EACD;GACE,OAAO;GACP,aAAa;GACd;EACF;AAED,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;YACb,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,WAAU;aACb,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf;KACE,iBAAA,GAAA,kBAAA,KAACC,gCAAAA,OAAD,EAAA,UAAO,WAAe,CAAA;KACtB,iBAAA,GAAA,kBAAA,MAAC,OAAD;MAAK,WAAU;gBAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;OAAI,WAAU;iBAA0E;OAEnF,CAAA,EACL,iBAAA,GAAA,kBAAA,KAAC,KAAD;OAAG,WAAU;iBAAoF;OAE7F,CAAA,CACA;;KACN,iBAAA,GAAA,kBAAA,MAAC,OAAD;MAAK,WAAU;gBAAf;OACE,iBAAA,GAAA,kBAAA,KAAC,aAAD;QACE,OAAM;QACN,aAAa;QACb,OAAO;QACP,UAAU;QACV,SAAQ;QACR,SAASC,aAAAA;QACT,SAAQ;QACR,CAAA;OACF,iBAAA,GAAA,kBAAA,KAAC,aAAD;QACE,OAAM;QACN,aAAa;QACb,OAAO;QACP,UAAU;QACV,aAAa;QACb,SAAQ;QACR,SAASA,aAAAA;QACT,SAAQ;QACR,CAAA;OACF,iBAAA,GAAA,kBAAA,KAAC,aAAD;QACE,OAAM;QACN,aAAa;QACb,OAAO;QACP,UAAU;QACV,SAAQ;QACR,SAASC,aAAAA;QACT,SAAQ;QACR,CAAA;OACE;;KACF;;GACF,CAAA;EACF,CAAA"}

package/dist/src/components/pricing-cards.mjs

@@ -1,8 +1,8 @@
 import { Button } from "./ui/button.mjs";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card.mjs";
 import { Badge } from "./ui/badge.mjs";
-import { Check, MoveRight, PhoneCall } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, MoveRight, PhoneCall } from "lucide-react";
 //#region src/components/pricing-cards.tsx
 function PricingCard({ title, description, price, features, highlighted = false, ctaText, ctaIcon: CtaIcon, variant = "outline" }) {
 	const Icon = CtaIcon;