nextworks 0.2.0-alpha.7 → 0.2.0-alpha.8

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

@@ -1,99 +1,71 @@
-"use client";
-
-import React from "react";
-import { About as SharedAbout } from "@/components/sections/About";
-
-export function About() {
-  return (
-    <SharedAbout
-      // Content
-      aboutSubheadingText="About Us"
-      aboutHeadingText="Your Success Is Our Mission"
-      aboutContentText="With 50+ successful projects and 5 years of experience, we specialize in creating digital solutions that drive real business growth. Our team combines creative design with data-driven strategy."
-      aboutTextAlign="center"
-      // Stats
-      showStats={true}
-      animateStats={true}
-      aboutStats={[
-        { value: "2.5", suffix: "k+", label: "Leads Generated" },
-        { value: "4.8", suffix: "%", label: "Avg. CTR" },
-        { value: "92", suffix: "%", label: "Client Retention" },
-        { value: "12", suffix: "M", label: "Ad Spend Managed" },
-      ]}
-      // Slots / styling
-      section={{
-        className: "py-16 md:py-20 lg:py-24 bg-white dark:bg-gray-800",
-      }}
-      container={{
-        className: "max-w-7xl mx-auto px-6",
-      }}
-      inner={{
-        className: "flex flex-col gap-12",
-      }}
-      contentContainer={{
-        className: "max-w-4xl mx-auto",
-      }}
-      contentStack={{
-        className: "flex flex-col gap-6",
-      }}
-      subheading={{
-        className:
-          "text-sm font-semibold font-poppins uppercase tracking-wider text-[var(--about-accent)]",
-      }}
-      heading={{
-        className:
-          "text-4xl md:text-5xl lg:text-6xl font-bold leading-tight text-[var(--heading-fg)]",
-      }}
-      content={{
-        className:
-          "text-xl md:text-2xl max-w-3xl mx-auto leading-relaxed text-[var(--subheading-fg)]",
-      }}
-      statsSection={{
-        className:
-          "bg-card p-8 rounded-xl shadow-lg mx-auto max-w-5xl w-full border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)]",
-      }}
-      statsGrid={{
-        className: "grid grid-cols-2 md:grid-cols-4 gap-8 justify-items-center",
-      }}
-      statItem={{
-        className: "flex flex-col items-center gap-2",
-      }}
-      statNumber={{
-        className:
-          "text-4xl md:text-5xl font-bold font-poppins leading-none text-[var(--about-accent)]",
-      }}
-      statLabel={{
-        className:
-          "text-sm font-medium font-inter text-center text-[var(--card-muted-fg)]",
-      }}
-    />
-  );
-}
-
-// "use client";
-
-// import React from "react";
-// import { About as SharedAbout } from "@/components/sections/About";
-
-// export function About() {
-//   return (
-//     <SharedAbout
-//       aboutHeadingText="Your Success Is Our Mission"
-//       aboutContentText="With 50+ successful projects and 5 years of experience, we specialize in creating digital solutions that drive real business growth. Our team combines creative design with data-driven strategy."
-//       aboutTextAlign="center"
-//       showStats={true}
-//       section={{
-//         className: "py-16 md:py-20 lg:py-24 bg-white dark:bg-gray-800",
-//       }}
-//       heading={{
-//         className: "text-4xl md:text-5xl lg:text-6xl font-bold text-foreground",
-//       }}
-//       content={{
-//         className:
-//           "text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed",
-//       }}
-//     />
-//   );
-// }
-
-// export default About;
+"use client";
+
+import React from "react";
+import { About as SharedAbout } from "@/components/sections/About";
+
+export function About() {
+  return (
+    <SharedAbout
+      // Content
+      aboutSubheadingText="About Us"
+      aboutHeadingText="Your Success Is Our Mission"
+      aboutContentText="With 50+ successful projects and 5 years of experience, we specialize in creating digital solutions that drive real business growth. Our team combines creative design with data-driven strategy."
+      aboutTextAlign="center"
+      // Stats
+      showStats={true}
+      animateStats={true}
+      aboutStats={[
+        { value: "2.5", suffix: "k+", label: "Leads Generated" },
+        { value: "4.8", suffix: "%", label: "Avg. CTR" },
+        { value: "92", suffix: "%", label: "Client Retention" },
+        { value: "12", suffix: "M", label: "Ad Spend Managed" },
+      ]}
+      // Slots / styling
+      section={{
+        className: "py-16 md:py-20 lg:py-24 bg-white dark:bg-gray-800",
+      }}
+      container={{
+        className: "max-w-7xl mx-auto px-6",
+      }}
+      inner={{
+        className: "flex flex-col gap-12",
+      }}
+      contentContainer={{
+        className: "max-w-4xl mx-auto",
+      }}
+      contentStack={{
+        className: "flex flex-col gap-6",
+      }}
+      subheading={{
+        className:
+          "text-sm font-semibold font-poppins uppercase tracking-wider text-[var(--about-accent)]",
+      }}
+      heading={{
+        className:
+          "text-4xl md:text-5xl lg:text-6xl font-bold leading-tight text-[var(--heading-fg)]",
+      }}
+      content={{
+        className:
+          "text-xl md:text-2xl max-w-3xl mx-auto leading-relaxed text-[var(--subheading-fg)]",
+      }}
+      statsSection={{
+        className:
+          "bg-card p-8 rounded-xl shadow-lg mx-auto max-w-5xl w-full border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)]",
+      }}
+      statsGrid={{
+        className: "grid grid-cols-2 md:grid-cols-4 gap-8 justify-items-center",
+      }}
+      statItem={{
+        className: "flex flex-col items-center gap-2",
+      }}
+      statNumber={{
+        className:
+          "text-4xl md:text-5xl font-bold font-poppins leading-none text-[var(--about-accent)]",
+      }}
+      statLabel={{
+        className:
+          "text-sm font-medium font-inter text-center text-[var(--card-muted-fg)]",
+      }}
+    />
+  );
+}

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

@@ -1,74 +1,40 @@
-"use client";
-
-import React from "react";
-import { CTA as SharedCTA } from "@/components/sections/CTA";
-
-export function CTA() {
-  return (
-    <SharedCTA
-      // Background colors moved to the section slot
-      section={{
-        className:
-          "bg-sky-50 dark:bg-gray-900 text-foreground [--heading-fg:rgb(17,24,39)] dark:[--heading-fg:white] [--subheading-fg:rgba(17,24,39,0.8)] dark:[--subheading-fg:rgba(255,255,255,0.85)] [--description-fg:rgba(17,24,39,0.75)] dark:[--description-fg:rgba(255,255,255,0.75)]",
-      }}
-      // Layout/height/centering handled by the container slot
-      container={{
-        className:
-          "mx-auto flex h-[32vh] w-full max-w-6xl flex-col items-center justify-center overflow-hidden px-4 pb-8",
-      }}
-      // Heading mapped to the new headingText slot
-      headingText={{
-        text: "Ready To Transform Your Business?",
-        className:
-          "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins leading-tight",
-      }}
-      // Use actionsWrapper for spacing instead of margin on the button
-      actionsWrapper={{
-        className:
-          "mt-6 flex flex-col items-center gap-3 sm:flex-row [--btn-ring:rgba(192,38,211,0.35)] dark:[--btn-ring:rgba(192,38,211,0.45)]",
-      }}
-      // Primary CTA mapped to ctaButton + ctaButtonStyle
-      ctaButton={{ label: "Get Your Free Quote", href: "#contact" }}
-      ctaButtonStyle={{
-        variant: "default",
-        size: "lg",
-        className:
-          "font-poppins shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 [--btn-bg:#c026d3] dark:[--btn-bg:#c026d3] [--btn-hover-bg:#a21caf] dark:[--btn-hover-bg:#a21caf] [--btn-fg:#ffffff] dark:[--btn-fg:#ffffff] hover:[--btn-hover-fg:#ffffff] dark:hover:[--btn-hover-fg:#ffffff] [--btn-border:transparent]",
-      }}
-      // Preserve the previous top margin on the heading
-      spacing={{ topMargin: "mt-[8vh]" }}
-    />
-  );
-}
-
-// "use client";
-
-// import React from "react";
-// import { CTA as SharedCTA } from "@/components/sections/CTA";
-
-// export function CTA() {
-//   return (
-//     <SharedCTA
-//       heading={{
-//         text: "Ready To Transform Your Business?",
-//         className:
-//           "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins leading-tight",
-//       }}
-//       section={{
-//         className:
-//           "flex h-[32vh] flex-col items-center overflow-hidden bg-fuchsia-50 dark:bg-gray-900",
-//       }}
-//       button={{
-//         text: "Get Your Free Quote",
-//         href: "#contact",
-//         variant: "default",
-//         size: "lg",
-//         className:
-//           "mt-6 bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-poppins shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
-//       }}
-//       spacing={{ topMargin: "mt-[8vh]" }}
-//     />
-//   );
-// }
-
-// export default CTA;
+"use client";
+
+import React from "react";
+import { CTA as SharedCTA } from "@/components/sections/CTA";
+
+export function CTA() {
+  return (
+    <SharedCTA
+      // Background colors
+      section={{
+        className:
+          "bg-sky-50 dark:bg-gray-900 text-foreground [--heading-fg:rgb(17,24,39)] dark:[--heading-fg:white] [--subheading-fg:rgba(17,24,39,0.8)] dark:[--subheading-fg:rgba(255,255,255,0.85)] [--description-fg:rgba(17,24,39,0.75)] dark:[--description-fg:rgba(255,255,255,0.75)]",
+      }}
+      // Layout/height/centering handled by the container slot
+      container={{
+        className:
+          "mx-auto flex h-[32vh] w-full max-w-6xl flex-col items-center justify-center overflow-hidden px-4 pb-8",
+      }}
+      // Heading text
+      headingText={{
+        text: "Ready To Transform Your Business?",
+        className:
+          "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins leading-tight",
+      }}
+      // Use actionsWrapper for spacing instead of margin on the button
+      actionsWrapper={{
+        className:
+          "mt-6 flex flex-col items-center gap-3 sm:flex-row [--btn-ring:rgba(192,38,211,0.35)] dark:[--btn-ring:rgba(192,38,211,0.45)]",
+      }}
+      ctaButton={{ label: "Get Your Free Quote", href: "#contact" }}
+      ctaButtonStyle={{
+        variant: "default",
+        size: "lg",
+        className:
+          "font-poppins shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 [--btn-bg:#c026d3] dark:[--btn-bg:#c026d3] [--btn-hover-bg:#a21caf] dark:[--btn-hover-bg:#a21caf] [--btn-fg:#ffffff] dark:[--btn-fg:#ffffff] hover:[--btn-hover-fg:#ffffff] dark:hover:[--btn-hover-fg:#ffffff] [--btn-border:transparent]",
+      }}
+      spacing={{ topMargin: "mt-[8vh]" }}
+    />
+  );
+}

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

@@ -1,227 +1,123 @@
-// app/templates/digitalagency/componets/Contact.tsx
-
-"use client";
-
-import React from "react";
-import {
-  Contact as SharedContact,
-  ContactField,
-} from "@/components/sections/Contact";
-
-const agencyContactFormData: ContactField[] = [
-  {
-    id: "name",
-    label: "Your Full Name",
-    placeholder: "John Smith",
-    required: true,
-    type: "text",
-  },
-  {
-    id: "email",
-    label: "Email Address",
-    placeholder: "john@yourcompany.com",
-    required: true,
-    type: "email",
-  },
-  {
-    id: "phone",
-    label: "Phone Number",
-    placeholder: "+1 (555) 123-4567",
-    required: false,
-    type: "tel",
-  },
-  {
-    id: "company",
-    label: "Company Name",
-    placeholder: "Your Company LLC",
-    required: false,
-    type: "text",
-  },
-  {
-    id: "projectType",
-    label: "Service Interested In",
-    placeholder: "e.g. Web Design, SEO, E-commerce, Branding",
-    required: false,
-    type: "text",
-  },
-  {
-    id: "budget",
-    label: "Project Budget (Optional)",
-    placeholder: "e.g. $3,000 - $6,000",
-    required: false,
-    type: "text",
-  },
-  {
-    id: "message",
-    label: "Project Details",
-    placeholder:
-      "Tell us about your project goals, timeline, and any specific requirements...",
-    required: true,
-    type: "textarea",
-  },
-];
-
-export function Contact() {
-  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const data = Object.fromEntries(new FormData(e.currentTarget).entries());
-    console.log("Contact form submitted:", data);
-  };
-
-  return (
-    <SharedContact
-      id="contact"
-      fields={agencyContactFormData}
-      contactHeaderText="Let’s Talk Strategy"
-      contactSubHeaderText="We’re here to help you grow — tell us how!"
-      // Root and layout
-      className="w-full"
-      section={{ className: "py-16 px-4 bg-fuchsia-600 dark:bg-fuchsia-600" }}
-      container={{ className: "mx-auto max-w-4xl" }}
-      // Header slots (new)
-      headerWrapper={{ className: "mb-8 text-center" }}
-      headerText={{
-        className:
-          "text-4xl md:text-5xl font-bold font-poppins text-white tracking-tight",
-      }}
-      subheaderText={{
-        className:
-          "mt-3 text-lg md:text-xl font-inter text-white/90 px-4 md:px-14",
-      }}
-      // Form container
-      form={{
-        className:
-          "bg-card p-8 rounded-lg shadow-md border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)]",
-      }}
-      // Fields wrapper and field item (new)
-      fieldsWrapper={{ className: "space-y-4" }}
-      field={{ className: "space-y-2" }}
-      // Label + inputs (new)
-      label={{
-        className:
-          "text-card-foreground text-sm font-medium font-poppins block",
-      }}
-      input={{
-        className:
-          "w-full p-3 rounded-md font-inter border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-2 focus-visible:ring-[var(--input-focus-ring)] focus-visible:ring-offset-[var(--input-ring-offset)]",
-      }}
-      textarea={{
-        className:
-          "w-full p-3 rounded-md resize-vertical min-h-[120px] font-inter border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-2 focus-visible:ring-[var(--input-focus-ring)] focus-visible:ring-offset-[var(--input-ring-offset)]",
-      }}
-      // Submit button (new split between wrapper/style/text)
-      submitButtonWrapper={{ className: "pt-2" }}
-      submitButtonStyle={{
-        variant: "default",
-        size: "lg",
-        className:
-          "w-full bg-fuchsia-700 hover:bg-fuchsia-800 text-white font-poppins font-medium shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
-      }}
-      submitButtonText="Schedule Free Consultation"
-      onSubmit={handleFormSubmit}
-      ariaLabel="Agency contact section"
-    />
-  );
-}
-
-// "use client";
-
-// import React from "react";
-// import {
-//   Contact as SharedContact,
-//   ContactField,
-// } from "@/components/sections/Contact";
-
-// const agencyContactFormData: ContactField[] = [
-//   {
-//     id: "name",
-//     label: "Your Full Name",
-//     placeholder: "John Smith",
-//     required: true,
-//     type: "text",
-//   },
-//   {
-//     id: "email",
-//     label: "Email Address",
-//     placeholder: "john@yourcompany.com",
-//     required: true,
-//     type: "email",
-//   },
-//   {
-//     id: "phone",
-//     label: "Phone Number",
-//     placeholder: "+1 (555) 123-4567",
-//     required: false,
-//     type: "tel",
-//   },
-//   {
-//     id: "company",
-//     label: "Company Name",
-//     placeholder: "Your Company LLC",
-//     required: false,
-//     type: "text",
-//   },
-//   {
-//     id: "projectType",
-//     label: "Service Interested In",
-//     placeholder: "e.g. Web Design, SEO, E-commerce, Branding",
-//     required: false,
-//     type: "text",
-//   },
-//   {
-//     id: "budget",
-//     label: "Project Budget (Optional)",
-//     placeholder: "e.g. $3,000 - $6,000",
-//     required: false,
-//     type: "text",
-//   },
-//   {
-//     id: "message",
-//     label: "Project Details",
-//     placeholder:
-//       "Tell us about your project goals, timeline, and any specific requirements...",
-//     required: true,
-//     type: "textarea",
-//   },
-// ];
-
-// export function Contact() {
-//   const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-//     e.preventDefault();
-//     const data = Object.fromEntries(new FormData(e.currentTarget).entries());
-//     console.log("Contact form submitted:", data);
-//   };
-
-//   return (
-//     <section id="contact">
-//       <SharedContact
-//         fields={agencyContactFormData}
-//         contactHeaderText="Let’s Talk Strategy"
-//         contactSubHeaderText="We’re here to help you grow — tell us how!"
-//         section={{ className: "py-16 px-4 bg-fuchsia-600 dark:bg-fuchsia-600" }}
-//         container={{ className: "max-w-4xl mx-auto" }}
-//         header={{
-//           className:
-//             "text-4xl md:text-5xl font-bold text-white text-center mb-4",
-//         }}
-//         subheader={{
-//           className:
-//             "text-xl md:text-2xl font-inter text-white text-center mb-8 px-6",
-//         }}
-//         form={{
-//           className: "bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md",
-//         }}
-//         submitButton={{
-//           text: "Schedule Free Consultation",
-//           variant: "default",
-//           size: "lg",
-//           className:
-//             "w-full bg-fuchsia-700 hover:bg-fuchsia-800 text-white font-poppins font-medium shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
-//         }}
-//         onSubmit={handleFormSubmit}
-//       />
-//     </section>
-//   );
-// }
-
-// export default Contact;
+"use client";
+
+import React from "react";
+import {
+  Contact as SharedContact,
+  ContactField,
+} from "@/components/sections/Contact";
+
+const agencyContactFormData: ContactField[] = [
+  {
+    id: "name",
+    label: "Your Full Name",
+    placeholder: "John Smith",
+    required: true,
+    type: "text",
+  },
+  {
+    id: "email",
+    label: "Email Address",
+    placeholder: "john@yourcompany.com",
+    required: true,
+    type: "email",
+  },
+  {
+    id: "phone",
+    label: "Phone Number",
+    placeholder: "+1 (555) 123-4567",
+    required: false,
+    type: "tel",
+  },
+  {
+    id: "company",
+    label: "Company Name",
+    placeholder: "Your Company LLC",
+    required: false,
+    type: "text",
+  },
+  {
+    id: "projectType",
+    label: "Service Interested In",
+    placeholder: "e.g. Web Design, SEO, E-commerce, Branding",
+    required: false,
+    type: "text",
+  },
+  {
+    id: "budget",
+    label: "Project Budget (Optional)",
+    placeholder: "e.g. $3,000 - $6,000",
+    required: false,
+    type: "text",
+  },
+  {
+    id: "message",
+    label: "Project Details",
+    placeholder:
+      "Tell us about your project goals, timeline, and any specific requirements...",
+    required: true,
+    type: "textarea",
+  },
+];
+
+export function Contact() {
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const data = Object.fromEntries(new FormData(e.currentTarget).entries());
+    console.log("Contact form submitted:", data);
+  };
+
+  return (
+    <SharedContact
+      id="contact"
+      fields={agencyContactFormData}
+      contactHeaderText="Let’s Talk Strategy"
+      contactSubHeaderText="We’re here to help you grow — tell us how!"
+      // Root and layout
+      className="w-full"
+      section={{ className: "py-16 px-4 bg-fuchsia-600 dark:bg-fuchsia-600" }}
+      container={{ className: "mx-auto max-w-4xl" }}
+      // Header slots
+      headerWrapper={{ className: "mb-8 text-center" }}
+      headerText={{
+        className:
+          "text-4xl md:text-5xl font-bold font-poppins text-white tracking-tight",
+      }}
+      subheaderText={{
+        className:
+          "mt-3 text-lg md:text-xl font-inter text-white/90 px-4 md:px-14",
+      }}
+      // Form container
+      form={{
+        className:
+          "bg-card p-8 rounded-lg shadow-md border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)]",
+      }}
+      // Fields wrapper and field item
+      fieldsWrapper={{ className: "space-y-4" }}
+      field={{ className: "space-y-2" }}
+      // Label + inputs
+      label={{
+        className:
+          "text-card-foreground text-sm font-medium font-poppins block",
+      }}
+      input={{
+        className:
+          "w-full p-3 rounded-md font-inter border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-2 focus-visible:ring-[var(--input-focus-ring)] focus-visible:ring-offset-[var(--input-ring-offset)]",
+      }}
+      textarea={{
+        className:
+          "w-full p-3 rounded-md resize-vertical min-h-[120px] font-inter border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-2 focus-visible:ring-[var(--input-focus-ring)] focus-visible:ring-offset-[var(--input-ring-offset)]",
+      }}
+      // Submit button
+      submitButtonWrapper={{ className: "pt-2" }}
+      submitButtonStyle={{
+        variant: "default",
+        size: "lg",
+        className:
+          "w-full bg-fuchsia-700 hover:bg-fuchsia-800 text-white font-poppins font-medium shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
+      }}
+      submitButtonText="Schedule Free Consultation"
+      onSubmit={handleFormSubmit}
+      ariaLabel="Agency contact section"
+    />
+  );
+}