@m5kdev/web-ui 0.8.0 → 0.8.3

package/dist/src/components/blur-card.mjs

@@ -0,0 +1,137 @@
+import { cn } from "../lib/utils.mjs";
+import { Card } from "./ui/card.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+//#region src/components/blur-card.tsx
+function BlurCardHeader({ title, subtitle, type, date }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full px-4 py-4",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "hidden lg:block",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-lg font-semibold text-white drop-shadow-md",
+					children: title
+				}), /* @__PURE__ */ jsx("span", {
+					className: "inline-block rounded-full bg-white/20 text-xs text-white font-semibold px-2 py-0.5 drop-shadow-md",
+					children: type
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-sm text-neutral-300 drop-shadow-md",
+					children: subtitle
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-neutral-300 drop-shadow-md italic",
+					children: date
+				})]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "block lg:hidden",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "inline-block rounded-full bg-white/20 text-xs text-white font-semibold px-2 py-0.5 drop-shadow-md",
+					children: type
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "text-lg font-semibold text-white drop-shadow-md",
+					children: title
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "text-sm text-neutral-300 drop-shadow-md",
+					children: subtitle
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "text-xs text-neutral-300 drop-shadow-md italic",
+					children: date
+				})
+			]
+		})]
+	});
+}
+function BlurCard({ image, title, subtitle, type, date, description, className, link }) {
+	const isTouchDevice = typeof window !== "undefined" && ("ontouchstart" in window || navigator.maxTouchPoints > 0);
+	const [isOpen, setIsOpen] = useState(false);
+	const handleCardClick = () => {
+		if (isTouchDevice) setIsOpen((open) => !open);
+	};
+	return /* @__PURE__ */ jsx(Card, {
+		className: cn("relative overflow-hidden p-0 h-80 w-full flex flex-col justify-start", className),
+		onClick: isTouchDevice ? handleCardClick : void 0,
+		style: { touchAction: "manipulation" },
+		children: /* @__PURE__ */ jsxs(motion.div, {
+			whileHover: isTouchDevice ? void 0 : "hover",
+			initial: "rest",
+			animate: isTouchDevice && isOpen ? "hover" : "rest",
+			className: "relative w-full h-full flex flex-col justify-end",
+			style: {
+				backgroundImage: `url(${image})`,
+				backgroundSize: "cover",
+				backgroundPosition: "center",
+				height: "100%"
+			},
+			children: [
+				/* @__PURE__ */ jsx(motion.div, {
+					variants: {
+						rest: {
+							opacity: 0,
+							backdropFilter: "blur(0px)"
+						},
+						hover: {
+							opacity: 1,
+							backdropFilter: "blur(8px)"
+						}
+					},
+					transition: {
+						duration: .3,
+						ease: "easeInOut"
+					},
+					className: "absolute inset-0 z-10 bg-black/70 pointer-events-none rounded-xl",
+					style: { WebkitBackdropFilter: "blur(8px)" }
+				}),
+				/* @__PURE__ */ jsxs(motion.div, {
+					variants: {
+						rest: { height: "5rem" },
+						hover: { height: "100%" }
+					},
+					transition: {
+						duration: .3,
+						ease: "easeInOut"
+					},
+					className: "w-full flex flex-col justify-start bg-black/70 pointer-events-none rounded-xl z-20",
+					style: {
+						overflow: "hidden",
+						WebkitBackdropFilter: "blur(8px)",
+						backdropFilter: "blur(8px)"
+					},
+					children: [/* @__PURE__ */ jsx(BlurCardHeader, {
+						title,
+						subtitle,
+						type,
+						date
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "w-full h-full px-4 pb-4 flex flex-col justify-between",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "text-neutral-100",
+							children: description
+						}), /* @__PURE__ */ jsx("div", {
+							className: "flex items-center justify-end pointer-events-auto",
+							children: link
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx("img", {
+					src: image,
+					alt: title,
+					className: "invisible w-0 h-0"
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { BlurCard };
+
+//# sourceMappingURL=blur-card.mjs.map

package/dist/src/components/blur-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"blur-card.mjs","names":[],"sources":["../../../src/components/blur-card.tsx"],"sourcesContent":["import { motion } from \"motion/react\";\r\nimport type { ReactNode } from \"react\";\r\nimport { useState } from \"react\";\r\nimport { Card } from \"./ui/card\";\r\nimport { cn } from \"../lib/utils\";\r\n\r\nfunction BlurCardHeader({\r\n  title,\r\n  subtitle,\r\n  type,\r\n  date,\r\n}: {\r\n  title: string;\r\n  subtitle: string;\r\n  type: string;\r\n  date: string;\r\n}) {\r\n  return (\r\n    <div className=\"w-full px-4 py-4\">\r\n      <div className=\"hidden lg:block\">\r\n        <div className=\"flex items-center justify-between\">\r\n          <span className=\"text-lg font-semibold text-white drop-shadow-md\">{title}</span>\r\n          <span className=\"inline-block rounded-full bg-white/20 text-xs text-white font-semibold px-2 py-0.5 drop-shadow-md\">\r\n            {type}\r\n          </span>\r\n        </div>\r\n        <div className=\"flex items-center justify-between\">\r\n          <span className=\"text-sm text-neutral-300 drop-shadow-md\">{subtitle}</span>\r\n          <span className=\"text-xs text-neutral-300 drop-shadow-md italic\">{date}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <div className=\"block lg:hidden\">\r\n        <div className=\"inline-block rounded-full bg-white/20 text-xs text-white font-semibold px-2 py-0.5 drop-shadow-md\">\r\n          {type}\r\n        </div>\r\n        <div className=\"text-lg font-semibold text-white drop-shadow-md\">{title}</div>\r\n        <div className=\"text-sm text-neutral-300 drop-shadow-md\">{subtitle}</div>\r\n        <div className=\"text-xs text-neutral-300 drop-shadow-md italic\">{date}</div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\ninterface BlurCardProps {\r\n  image: string;\r\n  title: string;\r\n  subtitle: string;\r\n  type: string;\r\n  date: string;\r\n  description: string;\r\n  className?: string;\r\n  link?: ReactNode;\r\n}\r\n\r\nexport function BlurCard({\r\n  image,\r\n  title,\r\n  subtitle,\r\n  type,\r\n  date,\r\n  description,\r\n  className,\r\n  link,\r\n}: BlurCardProps) {\r\n  // Detect touch device\r\n  const isTouchDevice =\r\n    typeof window !== \"undefined\" && (\"ontouchstart\" in window || navigator.maxTouchPoints > 0);\r\n  const [isOpen, setIsOpen] = useState(false);\r\n\r\n  // Handler for tap on mobile\r\n  const handleCardClick = () => {\r\n    if (isTouchDevice) setIsOpen((open) => !open);\r\n  };\r\n\r\n  return (\r\n    <Card\r\n      className={cn(\r\n        \"relative overflow-hidden p-0 h-80 w-full flex flex-col justify-start\",\r\n        className\r\n      )}\r\n      onClick={isTouchDevice ? handleCardClick : undefined}\r\n      style={{ touchAction: \"manipulation\" }}\r\n    >\r\n      <motion.div\r\n        whileHover={isTouchDevice ? undefined : \"hover\"}\r\n        initial=\"rest\"\r\n        animate={isTouchDevice && isOpen ? \"hover\" : \"rest\"}\r\n        className=\"relative w-full h-full flex flex-col justify-end\"\r\n        style={{\r\n          backgroundImage: `url(${image})`,\r\n          backgroundSize: \"cover\",\r\n          backgroundPosition: \"center\",\r\n          height: \"100%\",\r\n        }}\r\n      >\r\n        {/* Overlay for blur and dim */}\r\n        <motion.div\r\n          variants={{\r\n            rest: { opacity: 0, backdropFilter: \"blur(0px)\" },\r\n            hover: { opacity: 1, backdropFilter: \"blur(8px)\" },\r\n          }}\r\n          transition={{ duration: 0.3, ease: \"easeInOut\" }}\r\n          className=\"absolute inset-0 z-10 bg-black/70 pointer-events-none rounded-xl\"\r\n          style={{ WebkitBackdropFilter: \"blur(8px)\" }}\r\n        />\r\n        {/* Header wrapper */}\r\n        <motion.div\r\n          variants={{\r\n            rest: { height: \"5rem\" },\r\n            hover: { height: \"100%\" },\r\n          }}\r\n          transition={{ duration: 0.3, ease: \"easeInOut\" }}\r\n          className=\"w-full flex flex-col justify-start bg-black/70 pointer-events-none rounded-xl z-20\"\r\n          style={{\r\n            overflow: \"hidden\",\r\n            WebkitBackdropFilter: \"blur(8px)\",\r\n            backdropFilter: \"blur(8px)\",\r\n          }}\r\n        >\r\n          <BlurCardHeader title={title} subtitle={subtitle} type={type} date={date} />\r\n          <div className=\"w-full h-full px-4 pb-4 flex flex-col justify-between\">\r\n            <p className=\"text-neutral-100\">{description}</p>\r\n            <div className=\"flex items-center justify-end pointer-events-auto\">{link}</div>\r\n          </div>\r\n        </motion.div>\r\n        {/* For accessibility, add an invisible img tag */}\r\n        <img src={image} alt={title} className=\"invisible w-0 h-0\" />\r\n      </motion.div>\r\n    </Card>\r\n  );\r\n}\r\n"],"mappings":";;;;;;AAMA,SAAS,eAAe,EACtB,OACA,UACA,MACA,QAMC;AACD,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KAAM,WAAU;eAAmD;KAAa,CAAA,EAChF,oBAAC,QAAD;KAAM,WAAU;eACb;KACI,CAAA,CACH;OACN,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KAAM,WAAU;eAA2C;KAAgB,CAAA,EAC3E,oBAAC,QAAD;KAAM,WAAU;eAAkD;KAAY,CAAA,CAC1E;MACF;MAEN,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,OAAD;KAAK,WAAU;eACZ;KACG,CAAA;IACN,oBAAC,OAAD;KAAK,WAAU;eAAmD;KAAY,CAAA;IAC9E,oBAAC,OAAD;KAAK,WAAU;eAA2C;KAAe,CAAA;IACzE,oBAAC,OAAD;KAAK,WAAU;eAAkD;KAAW,CAAA;IACxE;KACF;;;AAeV,SAAgB,SAAS,EACvB,OACA,OACA,UACA,MACA,MACA,aACA,WACA,QACgB;CAEhB,MAAM,gBACJ,OAAO,WAAW,gBAAgB,kBAAkB,UAAU,UAAU,iBAAiB;CAC3F,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAG3C,MAAM,wBAAwB;AAC5B,MAAI,cAAe,YAAW,SAAS,CAAC,KAAK;;AAG/C,QACE,oBAAC,MAAD;EACE,WAAW,GACT,wEACA,UACD;EACD,SAAS,gBAAgB,kBAAkB,KAAA;EAC3C,OAAO,EAAE,aAAa,gBAAgB;YAEtC,qBAAC,OAAO,KAAR;GACE,YAAY,gBAAgB,KAAA,IAAY;GACxC,SAAQ;GACR,SAAS,iBAAiB,SAAS,UAAU;GAC7C,WAAU;GACV,OAAO;IACL,iBAAiB,OAAO,MAAM;IAC9B,gBAAgB;IAChB,oBAAoB;IACpB,QAAQ;IACT;aAVH;IAaE,oBAAC,OAAO,KAAR;KACE,UAAU;MACR,MAAM;OAAE,SAAS;OAAG,gBAAgB;OAAa;MACjD,OAAO;OAAE,SAAS;OAAG,gBAAgB;OAAa;MACnD;KACD,YAAY;MAAE,UAAU;MAAK,MAAM;MAAa;KAChD,WAAU;KACV,OAAO,EAAE,sBAAsB,aAAa;KAC5C,CAAA;IAEF,qBAAC,OAAO,KAAR;KACE,UAAU;MACR,MAAM,EAAE,QAAQ,QAAQ;MACxB,OAAO,EAAE,QAAQ,QAAQ;MAC1B;KACD,YAAY;MAAE,UAAU;MAAK,MAAM;MAAa;KAChD,WAAU;KACV,OAAO;MACL,UAAU;MACV,sBAAsB;MACtB,gBAAgB;MACjB;eAXH,CAaE,oBAAC,gBAAD;MAAuB;MAAiB;MAAgB;MAAY;MAAQ,CAAA,EAC5E,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,KAAD;OAAG,WAAU;iBAAoB;OAAgB,CAAA,EACjD,oBAAC,OAAD;OAAK,WAAU;iBAAqD;OAAW,CAAA,CAC3E;QACK;;IAEb,oBAAC,OAAD;KAAK,KAAK;KAAO,KAAK;KAAO,WAAU;KAAsB,CAAA;IAClD;;EACR,CAAA"}

package/dist/src/components/features-section-demo-1.d.mts

@@ -0,0 +1,22 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/features-section-demo-1.d.ts
+declare function FeaturesSectionDemo(): _$react_jsx_runtime0.JSX.Element;
+declare const Grid: ({
+  pattern,
+  size
+}: {
+  pattern?: number[][];
+  size?: number;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare function GridPattern({
+  width,
+  height,
+  x,
+  y,
+  squares,
+  ...props
+}: any): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Grid, GridPattern, FeaturesSectionDemo as default };
+//# sourceMappingURL=features-section-demo-1.d.mts.map

package/dist/src/components/features-section-demo-1.mjs

@@ -0,0 +1,125 @@
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/features-section-demo-1.tsx
+function FeaturesSectionDemo() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "py-20 lg:py-40",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 md:gap-2 max-w-7xl mx-auto",
+			children: grid.map((feature) => /* @__PURE__ */ jsxs("div", {
+				className: "relative bg-gradient-to-b dark:from-neutral-900 from-neutral-100 dark:to-neutral-950 to-white p-6 rounded-3xl overflow-hidden",
+				children: [
+					/* @__PURE__ */ jsx(Grid, { size: 20 }),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-base font-bold text-neutral-800 dark:text-white relative z-20",
+						children: feature.title
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-neutral-600 dark:text-neutral-400 mt-4 text-base font-normal relative z-20",
+						children: feature.description
+					})
+				]
+			}, feature.title))
+		})
+	});
+}
+const grid = [
+	{
+		title: "HIPAA and SOC2 Compliant",
+		description: "Our applications are HIPAA and SOC2 compliant, your data is safe with us, always."
+	},
+	{
+		title: "Automated Social Media Posting",
+		description: "Schedule and automate your social media posts across multiple platforms to save time and maintain a consistent online presence."
+	},
+	{
+		title: "Advanced Analytics",
+		description: "Gain insights into your social media performance with detailed analytics and reporting tools to measure engagement and ROI."
+	},
+	{
+		title: "Content Calendar",
+		description: "Plan and organize your social media content with an intuitive calendar view, ensuring you never miss a post."
+	},
+	{
+		title: "Audience Targeting",
+		description: "Reach the right audience with advanced targeting options, including demographics, interests, and behaviors."
+	},
+	{
+		title: "Social Listening",
+		description: "Monitor social media conversations and trends to stay informed about what your audience is saying and respond in real-time."
+	},
+	{
+		title: "Customizable Templates",
+		description: "Create stunning social media posts with our customizable templates, designed to fit your brand's unique style and voice."
+	},
+	{
+		title: "Collaboration Tools",
+		description: "Work seamlessly with your team using our collaboration tools, allowing you to assign tasks, share drafts, and provide feedback in real-time."
+	}
+];
+const Grid = ({ pattern, size }) => {
+	const p = pattern ?? [
+		[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
+		[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
+		[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
+		[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
+		[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1]
+	];
+	return /* @__PURE__ */ jsx("div", {
+		className: "pointer-events-none absolute left-1/2 top-0  -ml-20 -mt-2 h-full w-full [mask-image:linear-gradient(white,transparent)]",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "absolute inset-0 bg-gradient-to-r  [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-zinc-900/30 from-zinc-100/30 to-zinc-300/30 dark:to-zinc-900/30 opacity-100",
+			children: /* @__PURE__ */ jsx(GridPattern, {
+				width: size ?? 20,
+				height: size ?? 20,
+				x: "-12",
+				y: "4",
+				squares: p,
+				className: "absolute inset-0 h-full w-full  mix-blend-overlay dark:fill-white/10 dark:stroke-white/10 stroke-black/10 fill-black/10"
+			})
+		})
+	});
+};
+function GridPattern({ width, height, x, y, squares, ...props }) {
+	const patternId = useId();
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", {
+				id: patternId,
+				width,
+				height,
+				patternUnits: "userSpaceOnUse",
+				x,
+				y,
+				children: /* @__PURE__ */ jsx("path", {
+					d: `M.5 ${height}V.5H${width}`,
+					fill: "none"
+				})
+			}) }),
+			/* @__PURE__ */ jsx("rect", {
+				width: "100%",
+				height: "100%",
+				strokeWidth: 0,
+				fill: `url(#${patternId})`
+			}),
+			squares && /* @__PURE__ */ jsx("svg", {
+				x,
+				y,
+				className: "overflow-visible",
+				children: squares.map(([x, y]) => /* @__PURE__ */ jsx("rect", {
+					strokeWidth: "0",
+					width: width + 1,
+					height: height + 1,
+					x: x * width,
+					y: y * height
+				}, `${x}-${y}`))
+			})
+		]
+	});
+}
+//#endregion
+export { Grid, GridPattern, FeaturesSectionDemo as default };
+
+//# sourceMappingURL=features-section-demo-1.mjs.map

package/dist/src/components/features-section-demo-1.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"features-section-demo-1.mjs","names":[],"sources":["../../../src/components/features-section-demo-1.tsx"],"sourcesContent":["import { useId } from \"react\";\r\n\r\nexport default function FeaturesSectionDemo() {\r\n  return (\r\n    <div className=\"py-20 lg:py-40\">\r\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 md:gap-2 max-w-7xl mx-auto\">\r\n        {grid.map((feature) => (\r\n          <div\r\n            key={feature.title}\r\n            className=\"relative bg-gradient-to-b dark:from-neutral-900 from-neutral-100 dark:to-neutral-950 to-white p-6 rounded-3xl overflow-hidden\"\r\n          >\r\n            <Grid size={20} />\r\n            <p className=\"text-base font-bold text-neutral-800 dark:text-white relative z-20\">\r\n              {feature.title}\r\n            </p>\r\n            <p className=\"text-neutral-600 dark:text-neutral-400 mt-4 text-base font-normal relative z-20\">\r\n              {feature.description}\r\n            </p>\r\n          </div>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst grid = [\r\n  {\r\n    title: \"HIPAA and SOC2 Compliant\",\r\n    description:\r\n      \"Our applications are HIPAA and SOC2 compliant, your data is safe with us, always.\",\r\n  },\r\n  {\r\n    title: \"Automated Social Media Posting\",\r\n    description:\r\n      \"Schedule and automate your social media posts across multiple platforms to save time and maintain a consistent online presence.\",\r\n  },\r\n  {\r\n    title: \"Advanced Analytics\",\r\n    description:\r\n      \"Gain insights into your social media performance with detailed analytics and reporting tools to measure engagement and ROI.\",\r\n  },\r\n  {\r\n    title: \"Content Calendar\",\r\n    description:\r\n      \"Plan and organize your social media content with an intuitive calendar view, ensuring you never miss a post.\",\r\n  },\r\n  {\r\n    title: \"Audience Targeting\",\r\n    description:\r\n      \"Reach the right audience with advanced targeting options, including demographics, interests, and behaviors.\",\r\n  },\r\n  {\r\n    title: \"Social Listening\",\r\n    description:\r\n      \"Monitor social media conversations and trends to stay informed about what your audience is saying and respond in real-time.\",\r\n  },\r\n  {\r\n    title: \"Customizable Templates\",\r\n    description:\r\n      \"Create stunning social media posts with our customizable templates, designed to fit your brand's unique style and voice.\",\r\n  },\r\n  {\r\n    title: \"Collaboration Tools\",\r\n    description:\r\n      \"Work seamlessly with your team using our collaboration tools, allowing you to assign tasks, share drafts, and provide feedback in real-time.\",\r\n  },\r\n];\r\n\r\nexport const Grid = ({ pattern, size }: { pattern?: number[][]; size?: number }) => {\r\n  const p = pattern ?? [\r\n    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],\r\n    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],\r\n    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],\r\n    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],\r\n    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],\r\n  ];\r\n  return (\r\n    <div className=\"pointer-events-none absolute left-1/2 top-0  -ml-20 -mt-2 h-full w-full [mask-image:linear-gradient(white,transparent)]\">\r\n      <div className=\"absolute inset-0 bg-gradient-to-r  [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-zinc-900/30 from-zinc-100/30 to-zinc-300/30 dark:to-zinc-900/30 opacity-100\">\r\n        <GridPattern\r\n          width={size ?? 20}\r\n          height={size ?? 20}\r\n          x=\"-12\"\r\n          y=\"4\"\r\n          squares={p}\r\n          className=\"absolute inset-0 h-full w-full  mix-blend-overlay dark:fill-white/10 dark:stroke-white/10 stroke-black/10 fill-black/10\"\r\n        />\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport function GridPattern({ width, height, x, y, squares, ...props }: any) {\r\n  const patternId = useId();\r\n\r\n  return (\r\n    <svg aria-hidden=\"true\" {...props}>\r\n      <defs>\r\n        <pattern\r\n          id={patternId}\r\n          width={width}\r\n          height={height}\r\n          patternUnits=\"userSpaceOnUse\"\r\n          x={x}\r\n          y={y}\r\n        >\r\n          <path d={`M.5 ${height}V.5H${width}`} fill=\"none\" />\r\n        </pattern>\r\n      </defs>\r\n      <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${patternId})`} />\r\n      {squares && (\r\n        <svg x={x} y={y} className=\"overflow-visible\">\r\n          {squares.map(([x, y]: any) => (\r\n            <rect\r\n              strokeWidth=\"0\"\r\n              key={`${x}-${y}`}\r\n              width={width + 1}\r\n              height={height + 1}\r\n              x={x * width}\r\n              y={y * height}\r\n            />\r\n          ))}\r\n        </svg>\r\n      )}\r\n    </svg>\r\n  );\r\n}\r\n"],"mappings":";;;AAEA,SAAwB,sBAAsB;AAC5C,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACZ,KAAK,KAAK,YACT,qBAAC,OAAD;IAEE,WAAU;cAFZ;KAIE,oBAAC,MAAD,EAAM,MAAM,IAAM,CAAA;KAClB,oBAAC,KAAD;MAAG,WAAU;gBACV,QAAQ;MACP,CAAA;KACJ,oBAAC,KAAD;MAAG,WAAU;gBACV,QAAQ;MACP,CAAA;KACA;MAVC,QAAQ,MAUT,CACN;GACE,CAAA;EACF,CAAA;;AAIV,MAAM,OAAO;CACX;EACE,OAAO;EACP,aACE;EACH;CACD;EACE,OAAO;EACP,aACE;EACH;CACD;EACE,OAAO;EACP,aACE;EACH;CACD;EACE,OAAO;EACP,aACE;EACH;CACD;EACE,OAAO;EACP,aACE;EACH;CACD;EACE,OAAO;EACP,aACE;EACH;CACD;EACE,OAAO;EACP,aACE;EACH;CACD;EACE,OAAO;EACP,aACE;EACH;CACF;AAED,MAAa,QAAQ,EAAE,SAAS,WAAoD;CAClF,MAAM,IAAI,WAAW;EACnB,CAAC,KAAK,MAAM,KAAK,QAAQ,GAAG,EAAE,GAAG,GAAG,KAAK,MAAM,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE;EACtE,CAAC,KAAK,MAAM,KAAK,QAAQ,GAAG,EAAE,GAAG,GAAG,KAAK,MAAM,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE;EACtE,CAAC,KAAK,MAAM,KAAK,QAAQ,GAAG,EAAE,GAAG,GAAG,KAAK,MAAM,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE;EACtE,CAAC,KAAK,MAAM,KAAK,QAAQ,GAAG,EAAE,GAAG,GAAG,KAAK,MAAM,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE;EACtE,CAAC,KAAK,MAAM,KAAK,QAAQ,GAAG,EAAE,GAAG,GAAG,KAAK,MAAM,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE;EACvE;AACD,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,aAAD;IACE,OAAO,QAAQ;IACf,QAAQ,QAAQ;IAChB,GAAE;IACF,GAAE;IACF,SAAS;IACT,WAAU;IACV,CAAA;GACE,CAAA;EACF,CAAA;;AAIV,SAAgB,YAAY,EAAE,OAAO,QAAQ,GAAG,GAAG,SAAS,GAAG,SAAc;CAC3E,MAAM,YAAY,OAAO;AAEzB,QACE,qBAAC,OAAD;EAAK,eAAY;EAAO,GAAI;YAA5B;GACE,oBAAC,QAAD,EAAA,UACE,oBAAC,WAAD;IACE,IAAI;IACG;IACC;IACR,cAAa;IACV;IACA;cAEH,oBAAC,QAAD;KAAM,GAAG,OAAO,OAAO,MAAM;KAAS,MAAK;KAAS,CAAA;IAC5C,CAAA,EACL,CAAA;GACP,oBAAC,QAAD;IAAM,OAAM;IAAO,QAAO;IAAO,aAAa;IAAG,MAAM,QAAQ,UAAU;IAAM,CAAA;GAC9E,WACC,oBAAC,OAAD;IAAQ;IAAM;IAAG,WAAU;cACxB,QAAQ,KAAK,CAAC,GAAG,OAChB,oBAAC,QAAD;KACE,aAAY;KAEZ,OAAO,QAAQ;KACf,QAAQ,SAAS;KACjB,GAAG,IAAI;KACP,GAAG,IAAI;KACP,EALK,GAAG,EAAE,GAAG,IAKb,CACF;IACE,CAAA;GAEJ"}

package/dist/src/components/features-section-demo-2.d.mts

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

package/dist/src/components/features-section-demo-2.mjs

@@ -0,0 +1,82 @@
+import { cn } from "../lib/utils.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconBlocks, IconBooks, IconCode, IconMicroscope, IconRocket, IconSchool, IconUser, IconWriting } from "@tabler/icons-react";
+//#region src/components/features-section-demo-2.tsx
+function FeaturesSectionDemo() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4  relative z-10 py-20 max-w-7xl mx-auto",
+		children: [
+			{
+				title: "Founder",
+				description: "I turn zero into one. Sometimes into ten.",
+				icon: /* @__PURE__ */ jsx(IconBlocks, {})
+			},
+			{
+				title: "Entrepreneur",
+				description: "I chase opportunities, not job titles.",
+				icon: /* @__PURE__ */ jsx(IconRocket, {})
+			},
+			{
+				title: "Developer",
+				description: "I speak fluent JavaScript and problem-solving.",
+				icon: /* @__PURE__ */ jsx(IconCode, {})
+			},
+			{
+				title: "Mentor",
+				description: "Helping others skip the dumb mistakes I made.",
+				icon: /* @__PURE__ */ jsx(IconSchool, {})
+			},
+			{
+				title: "Researcher",
+				description: "Curious by default. I dig deep before I build.",
+				icon: /* @__PURE__ */ jsx(IconMicroscope, {})
+			},
+			{
+				title: "Thinker",
+				description: "Not everything I do ships — but it shapes what does.",
+				icon: /* @__PURE__ */ jsx(IconBooks, {})
+			},
+			{
+				title: "Writer",
+				description: "Sometimes code, sometimes essays, sometimes late-night rambles.",
+				icon: /* @__PURE__ */ jsx(IconWriting, {})
+			},
+			{
+				title: "Human",
+				description: "Imperfect. Learning. Figuring it out like the rest of us.",
+				icon: /* @__PURE__ */ jsx(IconUser, {})
+			}
+		].map((feature, index) => /* @__PURE__ */ jsx(Feature, {
+			...feature,
+			index
+		}, feature.title))
+	});
+}
+const Feature = ({ title, description, icon, index }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col lg:border-r  py-10 relative group/feature dark:border-neutral-800", (index === 0 || index === 4) && "lg:border-l dark:border-neutral-800", index < 4 && "lg:border-b dark:border-neutral-800"),
+		children: [
+			index < 4 && /* @__PURE__ */ jsx("div", { className: "opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-t from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" }),
+			index >= 4 && /* @__PURE__ */ jsx("div", { className: "opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-b from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" }),
+			/* @__PURE__ */ jsx("div", {
+				className: "mb-4 relative z-10 px-10 text-neutral-600 dark:text-neutral-400",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "text-lg font-bold mb-2 relative z-10 px-10",
+				children: [/* @__PURE__ */ jsx("div", { className: "absolute left-0 inset-y-0 h-6 group-hover/feature:h-8 w-1 rounded-tr-full rounded-br-full bg-neutral-300 dark:bg-neutral-700 group-hover/feature:bg-blue-500 transition-all duration-200 origin-center" }), /* @__PURE__ */ jsx("span", {
+					className: "group-hover/feature:translate-x-2 transition duration-200 inline-block text-neutral-800 dark:text-neutral-100",
+					children: title
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-sm text-neutral-600 dark:text-neutral-300 max-w-xs relative z-10 px-10",
+				children: description
+			})
+		]
+	});
+};
+//#endregion
+export { FeaturesSectionDemo as default };
+
+//# sourceMappingURL=features-section-demo-2.mjs.map

package/dist/src/components/features-section-demo-2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"features-section-demo-2.mjs","names":[],"sources":["../../../src/components/features-section-demo-2.tsx"],"sourcesContent":["import {\r\n  IconBlocks,\r\n  IconBooks,\r\n  IconCode,\r\n  IconMicroscope,\r\n  IconRocket,\r\n  IconSchool,\r\n  IconUser,\r\n  IconWriting,\r\n} from \"@tabler/icons-react\";\r\nimport { cn } from \"../lib/utils\";\r\n\r\nexport default function FeaturesSectionDemo() {\r\n  const features = [\r\n    {\r\n      title: \"Founder\",\r\n      description: \"I turn zero into one. Sometimes into ten.\",\r\n      icon: <IconBlocks />,\r\n    },\r\n    {\r\n      title: \"Entrepreneur\",\r\n      description: \"I chase opportunities, not job titles.\",\r\n      icon: <IconRocket />,\r\n    },\r\n    {\r\n      title: \"Developer\",\r\n      description: \"I speak fluent JavaScript and problem-solving.\",\r\n      icon: <IconCode />,\r\n    },\r\n    {\r\n      title: \"Mentor\",\r\n      description: \"Helping others skip the dumb mistakes I made.\",\r\n      icon: <IconSchool />,\r\n    },\r\n    {\r\n      title: \"Researcher\",\r\n      description: \"Curious by default. I dig deep before I build.\",\r\n      icon: <IconMicroscope />,\r\n    },\r\n    {\r\n      title: \"Thinker\",\r\n      description: \"Not everything I do ships — but it shapes what does.\",\r\n      icon: <IconBooks />,\r\n    },\r\n    {\r\n      title: \"Writer\",\r\n      description: \"Sometimes code, sometimes essays, sometimes late-night rambles.\",\r\n      icon: <IconWriting />,\r\n    },\r\n    {\r\n      title: \"Human\",\r\n      description: \"Imperfect. Learning. Figuring it out like the rest of us.\",\r\n      icon: <IconUser />,\r\n    },\r\n  ];\r\n  return (\r\n    <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4  relative z-10 py-20 max-w-7xl mx-auto\">\r\n      {features.map((feature, index) => (\r\n        <Feature key={feature.title} {...feature} index={index} />\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n\r\nconst Feature = ({\r\n  title,\r\n  description,\r\n  icon,\r\n  index,\r\n}: {\r\n  title: string;\r\n  description: string;\r\n  icon: React.ReactNode;\r\n  index: number;\r\n}) => {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"flex flex-col lg:border-r  py-10 relative group/feature dark:border-neutral-800\",\r\n        (index === 0 || index === 4) && \"lg:border-l dark:border-neutral-800\",\r\n        index < 4 && \"lg:border-b dark:border-neutral-800\"\r\n      )}\r\n    >\r\n      {index < 4 && (\r\n        <div className=\"opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-t from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none\" />\r\n      )}\r\n      {index >= 4 && (\r\n        <div className=\"opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-b from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none\" />\r\n      )}\r\n      <div className=\"mb-4 relative z-10 px-10 text-neutral-600 dark:text-neutral-400\">{icon}</div>\r\n      <div className=\"text-lg font-bold mb-2 relative z-10 px-10\">\r\n        <div className=\"absolute left-0 inset-y-0 h-6 group-hover/feature:h-8 w-1 rounded-tr-full rounded-br-full bg-neutral-300 dark:bg-neutral-700 group-hover/feature:bg-blue-500 transition-all duration-200 origin-center\" />\r\n        <span className=\"group-hover/feature:translate-x-2 transition duration-200 inline-block text-neutral-800 dark:text-neutral-100\">\r\n          {title}\r\n        </span>\r\n      </div>\r\n      <p className=\"text-sm text-neutral-600 dark:text-neutral-300 max-w-xs relative z-10 px-10\">\r\n        {description}\r\n      </p>\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":";;;;AAYA,SAAwB,sBAAsB;AA2C5C,QACE,oBAAC,OAAD;EAAK,WAAU;YA3CA;GACf;IACE,OAAO;IACP,aAAa;IACb,MAAM,oBAAC,YAAD,EAAc,CAAA;IACrB;GACD;IACE,OAAO;IACP,aAAa;IACb,MAAM,oBAAC,YAAD,EAAc,CAAA;IACrB;GACD;IACE,OAAO;IACP,aAAa;IACb,MAAM,oBAAC,UAAD,EAAY,CAAA;IACnB;GACD;IACE,OAAO;IACP,aAAa;IACb,MAAM,oBAAC,YAAD,EAAc,CAAA;IACrB;GACD;IACE,OAAO;IACP,aAAa;IACb,MAAM,oBAAC,gBAAD,EAAkB,CAAA;IACzB;GACD;IACE,OAAO;IACP,aAAa;IACb,MAAM,oBAAC,WAAD,EAAa,CAAA;IACpB;GACD;IACE,OAAO;IACP,aAAa;IACb,MAAM,oBAAC,aAAD,EAAe,CAAA;IACtB;GACD;IACE,OAAO;IACP,aAAa;IACb,MAAM,oBAAC,UAAD,EAAY,CAAA;IACnB;GACF,CAGa,KAAK,SAAS,UACtB,oBAAC,SAAD;GAA6B,GAAI;GAAgB;GAAS,EAA5C,QAAQ,MAAoC,CAC1D;EACE,CAAA;;AAIV,MAAM,WAAW,EACf,OACA,aACA,MACA,YAMI;AACJ,QACE,qBAAC,OAAD;EACE,WAAW,GACT,oFACC,UAAU,KAAK,UAAU,MAAM,uCAChC,QAAQ,KAAK,sCACd;YALH;GAOG,QAAQ,KACP,oBAAC,OAAD,EAAK,WAAU,+LAAgM,CAAA;GAEhN,SAAS,KACR,oBAAC,OAAD,EAAK,WAAU,+LAAgM,CAAA;GAEjN,oBAAC,OAAD;IAAK,WAAU;cAAmE;IAAW,CAAA;GAC7F,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD,EAAK,WAAU,0MAA2M,CAAA,EAC1N,oBAAC,QAAD;KAAM,WAAU;eACb;KACI,CAAA,CACH;;GACN,oBAAC,KAAD;IAAG,WAAU;cACV;IACC,CAAA;GACA"}

package/dist/src/components/features-section-demo-3.d.mts

@@ -0,0 +1,16 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/features-section-demo-3.d.ts
+declare function FeaturesSectionDemo(): _$react_jsx_runtime0.JSX.Element;
+declare const SkeletonOne: () => _$react_jsx_runtime0.JSX.Element;
+declare const SkeletonThree: () => _$react_jsx_runtime0.JSX.Element;
+declare const SkeletonTwo: () => _$react_jsx_runtime0.JSX.Element;
+declare const SkeletonFour: () => _$react_jsx_runtime0.JSX.Element;
+declare const Globe: ({
+  className
+}: {
+  className?: string;
+}) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Globe, SkeletonFour, SkeletonOne, SkeletonThree, SkeletonTwo, FeaturesSectionDemo as default };
+//# sourceMappingURL=features-section-demo-3.d.mts.map