nextworks 0.2.0-alpha.13 → 0.2.0-alpha.15

package/dist/kits/blocks/components/sections/HeroProductDemo.tsx

@@ -43,6 +43,7 @@ export interface HeroProductDemoSlots {
   textContainer?: { className?: string };
   demoContainer?: { className?: string };
   buttonsContainer?: { className?: string };
+  demoBelowText?: boolean;
 }
 
 export interface HeroProductDemoProps extends HeroProductDemoSlots {
@@ -86,6 +87,7 @@ export function HeroProductDemo({
   textContainer,
   demoContainer,
   buttonsContainer,
+  demoBelowText = false,
   ariaLabel = "Product demo hero section",
   enableMotion = true,
 }: HeroProductDemoProps) {
@@ -98,7 +100,7 @@ export function HeroProductDemo({
   const defaultSubheading = {
     text: "Pair clear positioning with a layered product demo that makes the workflow feel real before anyone clicks.",
     className:
-      "mt-6 max-w-2xl text-base text-muted-foreground sm:text-lg lg:text-xl",
+      "mt-4 max-w-2xl text-sm text-muted-foreground sm:text-base lg:text-lg",
   };
 
   const normalizedHeading = normalizeTextContent(heading, defaultHeading);
@@ -141,11 +143,68 @@ export function HeroProductDemo({
       }
     : undefined;
 
+  const renderButtons = (
+    <div
+      className={cn(
+        "mt-4 flex flex-col items-start gap-4 sm:flex-row sm:items-center",
+
+        buttonsContainer?.className,
+      )}
+    >
+      {mergedCta1.label && (
+        <Button
+          asChild
+          variant={mergedCta1.variant}
+          size={mergedCta1.size}
+          className={mergedCta1.className}
+          unstyled={mergedCta1.unstyled}
+          style={mergedCta1.style}
+        >
+          <Link href={mergedCta1.href || "#"} aria-label={mergedCta1.label}>
+            {mergedCta1.label}
+          </Link>
+        </Button>
+      )}
+
+      {mergedCta2?.label && (
+        <Button
+          asChild
+          variant={mergedCta2.variant}
+          size={mergedCta2.size}
+          className={mergedCta2.className}
+          unstyled={mergedCta2.unstyled}
+          style={mergedCta2.style}
+        >
+          <Link href={mergedCta2.href || "#"} aria-label={mergedCta2.label}>
+            {mergedCta2.label}
+          </Link>
+        </Button>
+      )}
+    </div>
+  );
+
+  const renderDemo = (
+    <div className={cn("relative", demoContainer?.className)}>
+      {demo ?? (
+        <DemoStage
+          scenarios={stage?.scenarios}
+          initialScenarioIndex={stage?.initialScenarioIndex}
+          activeScenarioKey={stage?.activeScenarioKey}
+          autoCycle={stage?.autoCycle}
+          cycleIntervalMs={stage?.cycleIntervalMs}
+          className={stage?.className}
+          enableMotion={enableMotion}
+          ariaLabel="Layered product demo"
+        />
+      )}
+    </div>
+  );
+
   return (
     <section
       id={id}
       className={cn(
-        "relative overflow-hidden px-6 py-16 sm:px-8 lg:px-10 lg:py-24",
+        "relative overflow-hidden px-6 py-12 sm:px-8 lg:px-10 lg:py-18",
         section?.className,
         className,
       )}
@@ -153,8 +212,9 @@ export function HeroProductDemo({
     >
       <div
         className={cn(
-          "mx-auto grid max-w-7xl items-center gap-12 lg:grid-cols-[minmax(0,0.84fr)_minmax(0,1.16fr)] lg:gap-12 xl:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]",
-
+          demoBelowText
+            ? "mx-auto flex max-w-7xl flex-col gap-6"
+            : "mx-auto grid max-w-7xl items-center gap-12 lg:grid-cols-[minmax(0,0.84fr)_minmax(0,1.16fr)] lg:gap-12 xl:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]",
           container?.className,
         )}
       >
@@ -168,68 +228,18 @@ export function HeroProductDemo({
             {normalizedHeading.text}
           </h1>
 
-          <p className={cn(normalizedSubheading.className)}>
-            {normalizedSubheading.text}
-          </p>
-
-          <div
-            className={cn(
-              "mt-8 flex flex-col items-start gap-4 sm:flex-row sm:items-center",
-              buttonsContainer?.className,
-            )}
-          >
-            {mergedCta1.label && (
-              <Button
-                asChild
-                variant={mergedCta1.variant}
-                size={mergedCta1.size}
-                className={mergedCta1.className}
-                unstyled={mergedCta1.unstyled}
-                style={mergedCta1.style}
-              >
-                <Link
-                  href={mergedCta1.href || "#"}
-                  aria-label={mergedCta1.label}
-                >
-                  {mergedCta1.label}
-                </Link>
-              </Button>
-            )}
-
-            {mergedCta2?.label && (
-              <Button
-                asChild
-                variant={mergedCta2.variant}
-                size={mergedCta2.size}
-                className={mergedCta2.className}
-                unstyled={mergedCta2.unstyled}
-                style={mergedCta2.style}
-              >
-                <Link
-                  href={mergedCta2.href || "#"}
-                  aria-label={mergedCta2.label}
-                >
-                  {mergedCta2.label}
-                </Link>
-              </Button>
-            )}
-          </div>
-        </div>
+          {normalizedSubheading.text ? (
+            <p className={cn(normalizedSubheading.className)}>
+              {normalizedSubheading.text}
+            </p>
+          ) : null}
 
-        <div className={cn("relative", demoContainer?.className)}>
-          {demo ?? (
-            <DemoStage
-              scenarios={stage?.scenarios}
-              initialScenarioIndex={stage?.initialScenarioIndex}
-              activeScenarioKey={stage?.activeScenarioKey}
-              autoCycle={stage?.autoCycle}
-              cycleIntervalMs={stage?.cycleIntervalMs}
-              className={stage?.className}
-              enableMotion={enableMotion}
-              ariaLabel="Layered product demo"
-            />
-          )}
+          {!demoBelowText ? renderButtons : null}
         </div>
+
+        {renderDemo}
+
+        {demoBelowText ? renderButtons : null}
       </div>
     </section>
   );

package/dist/kits/blocks/components/sections/Navbar.tsx

@@ -255,6 +255,7 @@ export function Navbar({
                 "rounded-md px-2 py-2 transition-colors duration-200 lg:px-4",
                 "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-none",
                 "focus-visible:ring-[var(--navbar-ring)]",
+
                 links.className,
               )}
             >
@@ -312,6 +313,7 @@ export function Navbar({
                   mobileLinks.className,
                   "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-none",
                   "focus-visible:ring-[var(--navbar-ring)]",
+
                   links.className,
                 )}
                 onClick={() => setIsMobileMenuOpen(false)}

package/dist/kits/blocks/components/sections/product-demo/ApprovalInboxPanel.tsx

@@ -10,13 +10,15 @@ export interface ApprovalInboxPanelProps {
 }
 
 const STATUS_TONE_CLASSES: Record<ProductDemoStatusTone, string> = {
-  neutral: "border-border/60 bg-muted/55 text-muted-foreground",
-  info: "border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-300",
+  neutral:
+    "border-[var(--demo-border)] bg-[var(--demo-panel-bg)] text-[var(--demo-muted-fg)]",
+  info: "border-[var(--demo-info-border)] bg-[var(--demo-info-soft-bg)] text-[var(--demo-info)]",
   success:
-    "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-300",
+    "border-[var(--demo-success-border)] bg-[var(--demo-success-soft-bg)] text-[var(--demo-success)]",
   warning:
-    "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
-  danger: "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-300",
+    "border-[var(--demo-warning-border)] bg-[var(--demo-warning-soft-bg)] text-[var(--demo-warning)]",
+  danger:
+    "border-[var(--demo-danger-border)] bg-[var(--demo-danger-soft-bg)] text-[var(--demo-danger)]",
 };
 
 function getStatusClass(tone: ProductDemoStatusTone = "neutral") {
@@ -25,15 +27,15 @@ function getStatusClass(tone: ProductDemoStatusTone = "neutral") {
 
 export function ApprovalInboxPanel({ state }: ApprovalInboxPanelProps) {
   return (
-    <div className="flex h-full flex-col gap-4">
+    <div className="flex h-full flex-col gap-4 text-[var(--demo-fg)]">
       <div className="space-y-1.5">
         {state.title && (
-          <h4 className="text-sm font-semibold text-card-foreground">
+          <h4 className="text-sm font-semibold text-[var(--demo-fg)]">
             {state.title}
           </h4>
         )}
         {state.subtitle && (
-          <p className="text-xs leading-relaxed text-muted-foreground">
+          <p className="text-xs leading-relaxed text-[var(--demo-muted-fg)]">
             {state.subtitle}
           </p>
         )}
@@ -66,17 +68,18 @@ export function ApprovalInboxPanel({ state }: ApprovalInboxPanelProps) {
             <div
               key={item.id}
               className={cn(
-                "rounded-2xl border border-border/60 bg-background/80 p-3",
-                isActive && "border-primary/45 bg-primary/6 shadow-sm",
+                "rounded-2xl border border-[var(--demo-border)] bg-[var(--demo-panel-bg)] p-3",
+                isActive &&
+                  "border-[var(--demo-info-border)] bg-[var(--demo-info-soft-bg)] shadow-sm",
               )}
             >
               <div className="flex items-start justify-between gap-3">
                 <div>
-                  <div className="text-sm font-semibold text-card-foreground">
+                  <div className="text-sm font-semibold text-[var(--demo-fg)]">
                     {item.title}
                   </div>
                   {item.description && (
-                    <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
+                    <p className="mt-1 text-xs leading-relaxed text-[var(--demo-muted-fg)]">
                       {item.description}
                     </p>
                   )}
@@ -94,7 +97,7 @@ export function ApprovalInboxPanel({ state }: ApprovalInboxPanelProps) {
               </div>
 
               {(item.requester || item.priorityLabel || item.dueLabel) && (
-                <div className="mt-3 flex flex-wrap gap-2 text-[11px] text-muted-foreground">
+                <div className="mt-3 flex flex-wrap gap-2 text-[11px] text-[var(--demo-muted-fg)]">
                   {item.requester && <span>By {item.requester}</span>}
                   {item.priorityLabel && <span>{item.priorityLabel}</span>}
                   {item.dueLabel && <span>{item.dueLabel}</span>}