nextworks 0.2.0-alpha.2 → 0.2.0-alpha.21

package/dist/kits/blocks/app/templates/digitalagency/components/Services.tsx

@@ -1,55 +1,55 @@
-"use client";
-
-import React from "react";
-import { ServicesGrid } from "@/components/sections/ServicesGrid";
-
-const defaultServicesData = [
-  {
-    icon: "💻",
-    title: "Web Design & Development",
-    description:
-      "Custom websites that capture your brand and convert visitors into customers",
-  },
-  {
-    icon: "📈",
-    title: "SEO & Digital Marketing",
-    description:
-      "Get found on Google and drive qualified traffic to your website",
-  },
-  {
-    icon: "🛒",
-    title: "E-commerce Solutions",
-    description: "Online stores that maximize sales and customer experience",
-  },
-  {
-    icon: "🎨",
-    title: "Brand Identity & Design",
-    description: "Logo, branding, and visual identity that makes you stand out",
-  },
-];
-
-export function Services() {
-  return (
-    <section id="services">
-      <ServicesGrid
-        enableMotion={true}
-        section={{
-          className: "py-16 md:py-20 lg:py-24 bg-fuchsia-50 dark:bg-gray-900",
-        }}
-        container={{ className: "max-w-6xl mx-auto px-6" }}
-        heading={{
-          className:
-            "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-gray-800 dark:text-white text-center mb-8 md:mb-12",
-        }}
-        grid={{ className: "grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8" }}
-        card={{
-          className:
-            "bg-white dark:bg-gray-800 p-6 md:p-8 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300",
-        }}
-        servicesData={defaultServicesData}
-        sectionHeading="Our Services"
-        ariaLabel="Services section"
-      />
-    </section>
-  );
-}
+"use client";
+
+import React from "react";
+import { ServicesGrid } from "@/components/sections/ServicesGrid";
+
+const defaultServicesData = [
+  {
+    icon: "💻",
+    title: "Web Design & Development",
+    description:
+      "Custom websites that capture your brand and convert visitors into customers",
+  },
+  {
+    icon: "📈",
+    title: "SEO & Digital Marketing",
+    description:
+      "Get found on Google and drive qualified traffic to your website",
+  },
+  {
+    icon: "🛒",
+    title: "E-commerce Solutions",
+    description: "Online stores that maximize sales and customer experience",
+  },
+  {
+    icon: "🎨",
+    title: "Brand Identity & Design",
+    description: "Logo, branding, and visual identity that makes you stand out",
+  },
+];
+
+export function Services() {
+  return (
+    <section id="services">
+      <ServicesGrid
+        enableMotion={true}
+        section={{
+          className: "py-16 md:py-20 lg:py-24 bg-fuchsia-50 dark:bg-gray-900",
+        }}
+        container={{ className: "max-w-6xl mx-auto px-6" }}
+        heading={{
+          className:
+            "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-gray-800 dark:text-white text-center mb-8 md:mb-12",
+        }}
+        grid={{ className: "grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8" }}
+        card={{
+          className:
+            "bg-white dark:bg-gray-800 p-6 md:p-8 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300",
+        }}
+        servicesData={defaultServicesData}
+        sectionHeading="Our Services"
+        ariaLabel="Services section"
+      />
+    </section>
+  );
+}

package/dist/kits/blocks/app/templates/digitalagency/components/Team.tsx

@@ -1,28 +1,28 @@
-"use client";
-
-import React from "react";
-import { Team as SharedTeam } from "@/components/sections/Team";
-
-export function Team() {
-  return (
-    <SharedTeam
-      section={{
-        className: "py-16 md:py-20 lg:py-24 bg-fuchsia-50 dark:bg-gray-900",
-      }}
-      card={{ className: "dark:bg-gray-800" }}
-      heading={{
-        className:
-          "text-4xl md:text-5xl lg:text-6xl font-bold text-[var(--heading-fg)]",
-      }}
-      subheading={{
-        className:
-          "text-xl md:text-2xl text-[var(--subheading-fg)] max-w-2xl mx-auto leading-relaxed",
-      }}
-      role={{
-        className:
-          "text-md font-semibold font-poppins text-fuchsia-600 dark:text-fuchsia-400",
-      }}
-      ariaLabel="Team section"
-    />
-  );
-}
+"use client";
+
+import React from "react";
+import { Team as SharedTeam } from "@/components/sections/Team";
+
+export function Team() {
+  return (
+    <SharedTeam
+      section={{
+        className: "py-16 md:py-20 lg:py-24 bg-fuchsia-50 dark:bg-gray-900",
+      }}
+      card={{ className: "dark:bg-gray-800" }}
+      heading={{
+        className:
+          "text-4xl md:text-5xl lg:text-6xl font-bold text-[var(--heading-fg)]",
+      }}
+      subheading={{
+        className:
+          "text-xl md:text-2xl text-[var(--subheading-fg)] max-w-2xl mx-auto leading-relaxed",
+      }}
+      role={{
+        className:
+          "text-md font-semibold font-poppins text-fuchsia-600 dark:text-fuchsia-400",
+      }}
+      ariaLabel="Team section"
+    />
+  );
+}

package/dist/kits/blocks/app/templates/digitalagency/components/Testimonials.tsx

@@ -1,65 +1,65 @@
-"use client";
-
-import React from "react";
-import { Testimonials as SharedTestimonials } from "@/components/sections/Testimonials";
-
-export function Testimonials() {
-  return (
-    <section id="testimonials">
-      <SharedTestimonials
-        testimonialSectionHeader="What Our Customers Say"
-        section={{
-          className: "py-16 md:py-20 lg:py-24 bg-fuchsia-50 dark:bg-gray-800",
-        }}
-        container={{ className: "max-w-7xl mx-auto px-6" }}
-        header={{ className: "text-center mb-12 md:mb-16" }}
-        heading={{
-          className:
-            "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-gray-800 dark:text-white",
-        }}
-        grid={{
-          className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8",
-        }}
-        card={{
-          className:
-            "bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md transition-transform duration-200 hover:-translate-y-1 border border-fuchsia-200/60 dark:border-fuchsia-800/40",
-        }}
-        text={{
-          className:
-            "text-gray-700 dark:text-gray-300 text-base leading-relaxed italic font-inter",
-        }}
-        author={{
-          className:
-            "text-gray-600 dark:text-gray-400 text-sm font-medium font-poppins",
-        }}
-        avatar={{
-          className:
-            "w-12 h-12 bg-fuchsia-600 text-white rounded-full flex items-center justify-center text-lg font-bold",
-        }}
-        avatarText={{
-          className: "text-white font-bold",
-        }}
-        testimonials={[
-          {
-            testimonialText:
-              "Nexus Digital transformed our online presence completely.",
-            testimonialAuthor: "- Sarah Chen, CEO of TechFlow",
-            testimonialAuthorInitials: "SC",
-          },
-          {
-            testimonialText: "The team delivered beyond expectations.",
-            testimonialAuthor: "- Marcus Rodriguez, GreenLeaf Wellness",
-            testimonialAuthorInitials: "MR",
-          },
-          {
-            testimonialText:
-              "Professional, fast, and results-driven. They understood our vision and brought it to life perfectly.",
-            testimonialAuthor: "- Jennifer Walsh, UrbanFit",
-            testimonialAuthorInitials: "JW",
-          },
-        ]}
-        ariaLabel="Testimonials section"
-      />
-    </section>
-  );
-}
+"use client";
+
+import React from "react";
+import { Testimonials as SharedTestimonials } from "@/components/sections/Testimonials";
+
+export function Testimonials() {
+  return (
+    <section id="testimonials">
+      <SharedTestimonials
+        testimonialSectionHeader="What Our Customers Say"
+        section={{
+          className: "py-16 md:py-20 lg:py-24 bg-fuchsia-50 dark:bg-gray-800",
+        }}
+        container={{ className: "max-w-7xl mx-auto px-6" }}
+        header={{ className: "text-center mb-12 md:mb-16" }}
+        heading={{
+          className:
+            "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-gray-800 dark:text-white",
+        }}
+        grid={{
+          className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8",
+        }}
+        card={{
+          className:
+            "bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md transition-transform duration-200 hover:-translate-y-1 border border-fuchsia-200/60 dark:border-fuchsia-800/40",
+        }}
+        text={{
+          className:
+            "text-gray-700 dark:text-gray-300 text-base leading-relaxed italic font-inter",
+        }}
+        author={{
+          className:
+            "text-gray-600 dark:text-gray-400 text-sm font-medium font-poppins",
+        }}
+        avatar={{
+          className:
+            "w-12 h-12 bg-fuchsia-600 text-white rounded-full flex items-center justify-center text-lg font-bold",
+        }}
+        avatarText={{
+          className: "text-white font-bold",
+        }}
+        testimonials={[
+          {
+            testimonialText:
+              "Nexus Digital transformed our online presence completely.",
+            testimonialAuthor: "- Sarah Chen, CEO of TechFlow",
+            testimonialAuthorInitials: "SC",
+          },
+          {
+            testimonialText: "The team delivered beyond expectations.",
+            testimonialAuthor: "- Marcus Rodriguez, GreenLeaf Wellness",
+            testimonialAuthorInitials: "MR",
+          },
+          {
+            testimonialText:
+              "Professional, fast, and results-driven. They understood our vision and brought it to life perfectly.",
+            testimonialAuthor: "- Jennifer Walsh, UrbanFit",
+            testimonialAuthorInitials: "JW",
+          },
+        ]}
+        ariaLabel="Testimonials section"
+      />
+    </section>
+  );
+}

package/dist/kits/blocks/app/templates/digitalagency/page.tsx

@@ -1,38 +1,38 @@
-"use client";
-
-import React from "react";
-import { Navbar } from "./components/Navbar";
-import { Hero } from "./components/Hero";
-import { Services } from "./components/Services";
-import { Testimonials } from "./components/Testimonials";
-import { Process } from "./components/Process";
-import { Portfolio } from "./components/Portfolio";
-import { About } from "./components/About";
-import { Team } from "./components/Team";
-import { Pricing } from "./components/Pricing";
-import { CTA } from "./components/CTA";
-import { Contact } from "./components/Contact";
-import { Footer } from "./components/Footer";
-
-import { PresetThemeVars } from "./PresetThemeVars";
-
-export default function Page() {
-  return (
-    <PresetThemeVars>
-      <main>
-        <Navbar />
-        <Hero />
-        <Services />
-        <Portfolio />
-        <Testimonials />
-        <Process />
-        <About />
-        <Team />
-        <Pricing />
-        <CTA />
-        <Contact />
-        <Footer />
-      </main>
-    </PresetThemeVars>
-  );
-}
+"use client";
+
+import React from "react";
+import { Navbar } from "./components/Navbar";
+import { Hero } from "./components/Hero";
+import { Services } from "./components/Services";
+import { Testimonials } from "./components/Testimonials";
+import { Process } from "./components/Process";
+import { Portfolio } from "./components/Portfolio";
+import { About } from "./components/About";
+import { Team } from "./components/Team";
+import { Pricing } from "./components/Pricing";
+import { CTA } from "./components/CTA";
+import { Contact } from "./components/Contact";
+import { Footer } from "./components/Footer";
+
+import { PresetThemeVars } from "./PresetThemeVars";
+
+export default function Page() {
+  return (
+    <PresetThemeVars>
+      <main>
+        <Navbar />
+        <Hero />
+        <Services />
+        <Portfolio />
+        <Testimonials />
+        <Process />
+        <About />
+        <Team />
+        <Pricing />
+        <CTA />
+        <Contact />
+        <Footer />
+      </main>
+    </PresetThemeVars>
+  );
+}

package/dist/kits/blocks/app/templates/gallery/PresetThemeVars.tsx

@@ -1,85 +1,130 @@
-import React from "react";
-import { cn } from "@/lib/utils";
-
-type Props = React.PropsWithChildren<{ className?: string }>;
-
-/**
- * Gallery template token-bridge wrapper.
- *
- * Maps component-level CSS variables (btn, input, card, etc.) to the
- * EnhancedThemeProvider token variables applied on :root (e.g., --primary,
- * --foreground, --card, --ring). This preserves the original Gallery behavior:
- * colors are driven by the selected Color Theme, not a fixed preset palette.
- */
-export function PresetThemeVars({ className, children }: Props) {
-  return (
-    <div
-      className={cn(
-        // Buttons (leave bg/fg unset by default so tokenized variants can apply; set ring here)
-        "[--btn-ring:var(--ring)]",
-
-        // Inputs
-        "[--input-bg:var(--background)]",
-        "[--input-fg:var(--foreground)]",
-        "[--input-placeholder:var(--muted-foreground)]",
-        "[--input-border:var(--input)]",
-        "[--input-focus-ring:var(--ring)]",
-        "[--input-ring-offset:var(--background)]",
-
-        // Cards
-        "[--card-bg:var(--card)]",
-        "[--card-fg:var(--card-foreground)]",
-        "[--card-title-fg:var(--foreground)]",
-        "[--card-muted-fg:var(--muted-foreground)]",
-        "[--card-border:var(--border)]",
-        "[--card-shadow:0_6px_20px_rgba(0,0,0,0.06)]",
-
-        // Badges/Chips (align to accent; active uses primary)
-        "[--badge-bg:var(--accent)]",
-        "[--badge-fg:var(--accent-foreground)]",
-        "[--badge-border:var(--border)]",
-        "[--badge-active-bg:var(--primary)]",
-        "[--badge-active-fg:var(--primary-foreground)]",
-        "[--badge-active-border:var(--primary)]",
-
-        // Typography helpers
-        "[--heading-fg:var(--foreground)]",
-        "[--subheading-fg:var(--muted-foreground)]",
-        "[--description-fg:var(--foreground)]",
-
-        // Process timeline
-        "[--process-step-bg:var(--primary)]",
-        "[--process-step-fg:var(--primary-foreground)]",
-        "[--process-connector:var(--border)]",
-
-        // Footer
-        "[--footer-bg:transparent]",
-        "[--footer-fg:var(--foreground)]",
-        "[--footer-heading-fg:var(--foreground)]",
-        "[--footer-link-fg:var(--muted-foreground)]",
-        "[--footer-link-hover-fg:var(--primary)]",
-        "[--footer-link-hover-bg:color-mix(in oklab, var(--primary) 12%, transparent)]",
-        "[--footer-muted-fg:var(--muted-foreground)]",
-        "[--footer-border:var(--border)]",
-
-        // Table (optional)
-        "[--table-fg:inherit]",
-        "[--table-muted-fg:var(--muted-foreground)]",
-        "[--table-head-fg:var(--foreground)]",
-        "[--table-border:var(--border)]",
-        "[--table-row-hover-bg:var(--muted)]",
-
-        // Navbar
-        "[--navbar-toggle-bg:var(--background)]",
-        "[--navbar-hover-bg:color-mix(in oklab, var(--primary) 12%, transparent)]",
-        "[--navbar-ring:var(--ring)]",
-        "[--navbar-border:var(--border)]",
-        "[--navbar-accent:var(--foreground)]",
-
-        className,
-      )}
-    >
-      {children}
-    </div>
-  );
-}
+import React from "react";
+import { cn } from "@/lib/utils";
+
+type Props = React.PropsWithChildren<{ className?: string }>;
+
+/**
+ * Gallery template token-bridge wrapper.
+ *
+ * Maps component-level CSS variables (btn, input, card, etc.) to the
+ * EnhancedThemeProvider token variables applied on :root (e.g., --primary,
+ * --foreground, --card, --ring). Colors are driven by the selected Color Theme, not a fixed preset palette.
+ */
+export function PresetThemeVars({ className, children }: Props) {
+  return (
+    <div
+      className={cn(
+        // Buttons (leave bg/fg unset by default so tokenized variants can apply; set ring here)
+        "[--btn-ring:var(--ring)]",
+
+        // Inputs
+        "[--input-bg:var(--background)]",
+        "[--input-fg:var(--foreground)]",
+        "[--input-placeholder:var(--muted-foreground)]",
+        "[--input-border:var(--input)]",
+        "[--input-focus-ring:var(--ring)]",
+        "[--input-ring-offset:var(--background)]",
+
+        // Cards
+        "[--card-bg:var(--card)]",
+        "[--card-fg:var(--card-foreground)]",
+        "[--card-title-fg:var(--foreground)]",
+        "[--card-muted-fg:var(--muted-foreground)]",
+        "[--card-border:var(--border)]",
+        "[--card-shadow:0_6px_20px_rgba(0,0,0,0.06)]",
+
+        // Badges/Chips (align to accent; active uses primary)
+        "[--badge-bg:var(--accent)]",
+        "[--badge-fg:var(--accent-foreground)]",
+        "[--badge-border:var(--border)]",
+        "[--badge-active-bg:var(--primary)]",
+        "[--badge-active-fg:var(--primary-foreground)]",
+        "[--badge-active-border:var(--primary)]",
+
+        // Typography helpers
+        "[--heading-fg:var(--foreground)]",
+        "[--subheading-fg:var(--muted-foreground)]",
+        "[--description-fg:var(--foreground)]",
+
+        // Hero product demo
+        "[--hero-cta-primary-bg:var(--primary)]",
+        "[--hero-cta-primary-fg:var(--primary-foreground)]",
+        "[--hero-cta-primary-hover-bg:var(--primary-foreground)]",
+        "[--hero-cta-primary-hover-fg:var(--primary)]]",
+
+        "[--hero-cta-secondary-bg:transparent]",
+        "[--hero-cta-secondary-fg:var(--primary)]",
+        "[--hero-cta-secondary-border:color-mix(in oklab, var(--primary) 38%, var(--border))]",
+        "[--hero-cta-secondary-hover-bg:color-mix(in oklab, var(--primary) 10%, var(--background))]",
+        "[--hero-cta-secondary-hover-fg:var(--primary)]",
+
+        "[--demo-shell-bg:var(--background)]",
+        "[--demo-shell-muted-bg:color-mix(in oklab, var(--background) 88%, var(--muted))]",
+        "[--demo-shell-strong-bg:var(--card)]",
+        "[--demo-panel-bg:var(--card)]",
+        "[--demo-panel-muted-bg:color-mix(in oklab, var(--card) 92%, var(--background))]",
+        "[--demo-panel-subtle-bg:color-mix(in oklab, var(--muted) 84%, var(--background))]",
+        "[--demo-panel-strong-bg:color-mix(in oklab, var(--card) 88%, var(--primary) 12%)]",
+        "[--demo-code-bg:color-mix(in oklab, var(--card) 96%, var(--background))]",
+        "[--demo-code-gutter-bg:color-mix(in oklab, var(--muted) 86%, var(--background))]",
+        "[--demo-border:var(--border)]",
+        "[--demo-border-strong:var(--primary)]",
+        "[--demo-fg:var(--foreground)]",
+        "[--demo-muted-fg:var(--muted-foreground)]",
+        "[--demo-subtle-fg:color-mix(in oklab, var(--muted-foreground) 78%, var(--foreground))]",
+        "[--demo-accent:var(--primary)]",
+        "[--demo-accent-soft-bg:color-mix(in oklab, var(--primary) 12%, var(--background))]",
+        "[--demo-info:var(--primary)]",
+        "[--demo-info-border:color-mix(in oklab, var(--primary) 30%, var(--border))]",
+        "[--demo-info-soft-bg:color-mix(in oklab, var(--primary) 10%, var(--background))]",
+        "[--demo-success:var(--chart-2)]",
+        "[--demo-success-border:color-mix(in oklab, var(--chart-2) 30%, var(--border))]",
+        "[--demo-success-soft-bg:color-mix(in oklab, var(--chart-2) 10%, var(--background))]",
+        "[--demo-warning:var(--chart-4)]",
+        "[--demo-warning-border:color-mix(in oklab, var(--chart-4) 30%, var(--border))]",
+        "[--demo-warning-soft-bg:color-mix(in oklab, var(--chart-4) 10%, var(--background))]",
+        "[--demo-danger:var(--chart-5)]",
+        "[--demo-danger-border:color-mix(in oklab, var(--chart-5) 30%, var(--border))]",
+        "[--demo-danger-soft-bg:color-mix(in oklab, var(--chart-5) 10%, var(--background))]",
+        "[--demo-scroll-track:color-mix(in oklab, var(--border) 70%, transparent)]",
+        "[--demo-scroll-thumb:linear-gradient(180deg, var(--primary), var(--accent))]",
+        "[--demo-shell-shadow:0_24px_80px_-44px_rgba(15,23,42,0.24)]",
+        "[--demo-shell-ring:color-mix(in oklab, var(--primary) 18%, transparent)]",
+
+        // Process timeline
+
+        "[--process-step-bg:var(--primary)]",
+        "[--process-step-fg:var(--primary-foreground)]",
+        "[--process-connector:var(--border)]",
+
+        // Footer
+        "[--footer-bg:transparent]",
+        "[--footer-fg:var(--foreground)]",
+        "[--footer-heading-fg:var(--foreground)]",
+        "[--footer-link-fg:var(--muted-foreground)]",
+        "[--footer-link-hover-fg:var(--primary)]",
+        "[--footer-link-hover-bg:color-mix(in oklab, var(--primary) 12%, transparent)]",
+        "[--footer-muted-fg:var(--muted-foreground)]",
+        "[--footer-border:var(--border)]",
+
+        // Table (optional)
+        "[--table-fg:inherit]",
+        "[--table-muted-fg:var(--muted-foreground)]",
+        "[--table-head-fg:var(--foreground)]",
+        "[--table-border:var(--border)]",
+        "[--table-row-hover-bg:var(--muted)]",
+
+        // Navbar
+        "[--navbar-toggle-bg:var(--background)]",
+        "[--navbar-hover-bg:color-mix(in oklab, var(--primary) 12%, transparent)]",
+        "[--navbar-ring:var(--ring)]",
+        "[--navbar-border:var(--border)]",
+        "[--navbar-accent:var(--foreground)]",
+
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}