@kuckit/landing-module 4.0.4 → 5.0.0

package/dist/client/components/faq.js

@@ -0,0 +1,170 @@
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/faq.tsx
+const faqItems = [
+	{
+		id: "seller-1",
+		category: "seller",
+		question: "Can I develop and sell my own Kuckit modules?",
+		answer: "Yes. You can develop complete, production-ready modules extending Kuckit functionality. Set your own pricing and publish them to the Kuckit marketplace."
+	},
+	{
+		id: "seller-2",
+		category: "seller",
+		question: "What pricing models are available for my module?",
+		answer: "You have full control over your pricing strategy. Choose between one-time payments (pay once, own forever) or subscription models (recurring billing). Each module can use a different model."
+	},
+	{
+		id: "seller-3",
+		category: "seller",
+		question: "How does the partnership program work?",
+		answer: "If you want to partner with Kuckit, your module can be integrated into the core platform. As a partner, you receive revenue share benefits whenever Kuckit generates sales, giving you passive income from the platform's growth."
+	},
+	{
+		id: "seller-4",
+		category: "seller",
+		question: "What are the requirements for marketplace publishing?",
+		answer: "Modules must follow Kuckit's Clean Architecture patterns, include proper documentation, and pass quality checks. Review our module development guide for detailed requirements."
+	},
+	{
+		id: "seller-5",
+		category: "seller",
+		question: "Can I update my module after publishing?",
+		answer: "Absolutely. You can release new versions anytime. Existing customers are notified of updates, and you control version management and backwards compatibility."
+	},
+	{
+		id: "general-1",
+		category: "general",
+		question: "What is Kuckit?",
+		answer: "Kuckit is a full-stack, modular platform built on Clean Architecture and Dependency Injection. It provides a professional foundation for building scalable applications with a plugin-based module system."
+	},
+	{
+		id: "general-2",
+		category: "general",
+		question: "What is the Kuckit business model?",
+		answer: "Kuckit provides a foundation platform for building applications. Module creators can publish to the marketplace with flexible pricing (one-time or subscription), and partners can integrate modules into core for revenue sharing benefits."
+	},
+	{
+		id: "general-3",
+		category: "general",
+		question: "What technology stack does Kuckit use?",
+		answer: "Kuckit is built with TypeScript, React (frontend), Express (backend), Drizzle ORM, and features comprehensive tooling. The modular architecture lets you swap implementations as needed."
+	}
+];
+function FAQ() {
+	const [expandedId, setExpandedId] = useState(null);
+	const sellerFaqs = faqItems.filter((item) => item.category === "seller");
+	const generalFaqs = faqItems.filter((item) => item.category === "general");
+	return /* @__PURE__ */ jsxs("section", {
+		className: "relative border-t border-border",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "max-w-7xl mx-auto px-8 py-16 border-b border-border",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-4 mb-4",
+					children: [/* @__PURE__ */ jsx("div", { className: "h-px w-12 bg-primary" }), /* @__PURE__ */ jsx("span", {
+						className: "text-xs text-primary tracking-[0.25em] uppercase font-medium",
+						children: "FAQ"
+					})]
+				}),
+				/* @__PURE__ */ jsx("h2", {
+					className: "text-4xl md:text-5xl font-light text-foreground tracking-[-0.03em] mb-4",
+					children: "Frequently Asked Questions"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-lg text-muted-foreground max-w-2xl",
+					children: "Everything you need to know about developing, selling, and partnering with Kuckit"
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "max-w-7xl mx-auto",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "grid lg:grid-cols-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "border-b lg:border-b-0 lg:border-r border-border",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "px-8 py-6 border-b border-border bg-card",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-xs text-muted-foreground tracking-[0.15em] uppercase",
+								children: "01"
+							}), /* @__PURE__ */ jsx("span", {
+								className: "font-medium text-foreground",
+								children: "For Module Sellers"
+							})]
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "divide-y divide-border",
+						children: sellerFaqs.map((item, index) => /* @__PURE__ */ jsx(FAQItemComponent, {
+							item,
+							index,
+							isExpanded: expandedId === item.id,
+							onToggle: () => setExpandedId(expandedId === item.id ? null : item.id)
+						}, item.id))
+					})]
+				}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+					className: "px-8 py-6 border-b border-border bg-card",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-xs text-muted-foreground tracking-[0.15em] uppercase",
+							children: "02"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "font-medium text-foreground",
+							children: "General"
+						})]
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "divide-y divide-border",
+					children: generalFaqs.map((item, index) => /* @__PURE__ */ jsx(FAQItemComponent, {
+						item,
+						index,
+						isExpanded: expandedId === item.id,
+						onToggle: () => setExpandedId(expandedId === item.id ? null : item.id)
+					}, item.id))
+				})] })]
+			})
+		})]
+	});
+}
+function FAQItemComponent({ item, index, isExpanded, onToggle }) {
+	return /* @__PURE__ */ jsx("button", {
+		onClick: onToggle,
+		className: "w-full text-left p-6 hover:bg-card/50 transition-colors",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-4",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-xs text-muted-foreground font-mono shrink-0 pt-1",
+				children: String(index + 1).padStart(2, "0")
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex-1",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-start justify-between gap-4",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-foreground font-medium leading-relaxed",
+						children: item.question
+					}), /* @__PURE__ */ jsx("svg", {
+						className: `w-4 h-4 text-muted-foreground shrink-0 mt-1 transition-transform duration-200 ${isExpanded ? "rotate-45" : ""}`,
+						fill: "none",
+						stroke: "currentColor",
+						viewBox: "0 0 24 24",
+						children: /* @__PURE__ */ jsx("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M12 4v16m8-8H4"
+						})
+					})]
+				}), isExpanded && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-sm leading-relaxed mt-4 pr-8",
+					children: item.answer
+				})]
+			})]
+		})
+	});
+}
+
+//#endregion
+export { FAQ };