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

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

@@ -1,157 +1,157 @@
-"use client";
-
-import React from "react";
-import {
-  PortfolioSimple,
-  PortfolioProject,
-} from "@/components/sections/PortfolioSimple";
-
-// Default portfolio data without images - Digital Marketing Agency focused
-const defaultProjects: PortfolioProject[] = [
-  {
-    id: 1,
-    title: "TechStartup Growth Campaign",
-    category: "Digital Marketing",
-    industry: "Technology",
-    result: "+300% Leads",
-    description:
-      "Comprehensive digital marketing campaign that increased qualified leads by 300% through targeted SEO, social media marketing, and conversion optimization strategies.",
-    tags: ["SEO", "Social Media", "PPC", "Analytics"],
-    color: "blue",
-    url: "#",
-  },
-  {
-    id: 2,
-    title: "E-Commerce Brand Launch",
-    category: "Brand Marketing",
-    industry: "Retail",
-    result: "+250% Revenue",
-    description:
-      "Complete brand launch and digital marketing strategy for a new e-commerce platform, resulting in 250% revenue growth within the first 6 months.",
-    tags: ["Brand Strategy", "Content Marketing", "Influencer", "Email"],
-    color: "green",
-    url: "#",
-  },
-  {
-    id: 3,
-    title: "Healthcare Practice Expansion",
-    category: "Local Marketing",
-    industry: "Healthcare",
-    result: "+180% Patients",
-    description:
-      "Local SEO and digital marketing campaign that helped a healthcare practice expand to three new locations and increase patient acquisition by 180%.",
-    tags: ["Local SEO", "Google Ads", "Reputation", "Content"],
-    color: "purple",
-    url: "#",
-  },
-  {
-    id: 4,
-    title: "SaaS Product Launch",
-    category: "B2B Marketing",
-    industry: "Software",
-    result: "+400% Signups",
-    description:
-      "Strategic B2B marketing campaign for a SaaS product launch, achieving 400% increase in trial signups through targeted content marketing and account-based marketing.",
-    tags: ["B2B Strategy", "Content", "LinkedIn Ads", "Webinars"],
-    color: "indigo",
-    url: "#",
-  },
-  {
-    id: 5,
-    title: "Restaurant Chain Rebrand",
-    category: "Brand Marketing",
-    industry: "Food & Beverage",
-    result: "+220% Foot Traffic",
-    description:
-      "Complete rebrand and digital marketing transformation for a restaurant chain, resulting in 220% increase in foot traffic and 150% growth in online orders.",
-    tags: ["Rebranding", "Social Media", "Local SEO", "Delivery"],
-    color: "red",
-    url: "#",
-  },
-  {
-    id: 6,
-    title: "Fitness App User Acquisition",
-    category: "Mobile Marketing",
-    industry: "Health & Fitness",
-    result: "+500% Downloads",
-    description:
-      "Mobile-first marketing campaign that achieved 500% increase in app downloads through app store optimization, influencer partnerships, and targeted social media advertising.",
-    tags: ["ASO", "Influencer", "Social Ads", "Retention"],
-    color: "yellow",
-    url: "#",
-  },
-];
-
-const defaultFilters = [
-  "All Projects",
-  "Digital Marketing",
-  "Brand Marketing",
-  "B2B Marketing",
-  "Local Marketing",
-  "Mobile Marketing",
-];
-
-// Upgraded Portfolio Preset Component
-export function Portfolio() {
-  return (
-    <section id="portfolio">
-      <PortfolioSimple
-        enableMotion={true}
-        projects={defaultProjects}
-        filters={defaultFilters}
-        sectionTitle="Our Portfolio"
-        sectionSubtitle="Discover our successful projects that have transformed businesses across various industries with innovative digital solutions."
-        ctaTitle="Ready to Start Your Project?"
-        ctaDescription="Let's work together to create something amazing that drives real results for your business."
-        section={{
-          className: "py-16 md:py-24 bg-background",
-        }}
-        title={{
-          className:
-            "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-[var(--heading-fg)]",
-        }}
-        subtitle={{
-          className:
-            "text-xl md:text-2xl font-inter text-[var(--subheading-fg)] max-w-2xl mx-auto leading-relaxed",
-        }}
-        ctaTitleStyle={{
-          className: "text-2xl md:text-3xl font-bold text-[var(--heading-fg)]",
-        }}
-        ctaDescriptionStyle={{
-          className:
-            "text-lg md:text-xl text-[var(--subheading-fg)] max-w-md mx-auto",
-        }}
-        tagStyle={{
-          className:
-            "px-2 py-1 text-xs rounded-full border-[var(--badge-border)] text-[var(--badge-fg)] bg-[var(--badge-bg)]",
-        }}
-        ctaSection={{
-          className:
-            "space-y-6 text-center mt-16 pt-12 border-t border-[var(--footer-border)]",
-        }}
-        cta1Label="Start Your Project"
-        cta1Href="#contact"
-        cta2Label="View All Projects"
-        cta2Href="#portfolio"
-        cta1Button={{
-          className:
-            "h-10 px-6 flex items-center justify-center font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5 [--btn-bg:theme(colors.fuchsia.600)] hover:[--btn-hover-bg:theme(colors.fuchsia.700)] [--btn-fg:theme(colors.white)] hover:[--btn-hover-fg:theme(colors.white)]",
-        }}
-        cta2Button={{
-          className:
-            "h-10 px-6 flex items-center justify-center font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5 border-2 [--btn-bg:transparent] [--btn-fg:theme(colors.fuchsia.700)] [--btn-border:theme(colors.fuchsia.600)] hover:[--btn-hover-bg:theme(colors.fuchsia.600)] hover:[--btn-hover-fg:theme(colors.white)] dark:[--btn-fg:theme(colors.fuchsia.400)] dark:[--btn-border:theme(colors.fuchsia.500)] dark:hover:[--btn-hover-bg:theme(colors.fuchsia.500)] dark:hover:[--btn-hover-fg:theme(colors.white)]",
-        }}
-        onProjectClick={(project) => {
-          console.log("Project clicked:", project);
-        }}
-        onPrimaryCtaClick={() => {
-          console.log("CTA 1 clicked:");
-        }}
-        onSecondaryCtaClick={() => {
-          console.log("CTA 2 clicked:");
-        }}
-        ariaLabel="Portfolio showcase section"
-      />
-    </section>
-  );
-}
+"use client";
+
+import React from "react";
+import {
+  PortfolioSimple,
+  PortfolioProject,
+} from "@/components/sections/PortfolioSimple";
+
+// Default portfolio data without images - Digital Marketing Agency focused
+const defaultProjects: PortfolioProject[] = [
+  {
+    id: 1,
+    title: "TechStartup Growth Campaign",
+    category: "Digital Marketing",
+    industry: "Technology",
+    result: "+300% Leads",
+    description:
+      "Comprehensive digital marketing campaign that increased qualified leads by 300% through targeted SEO, social media marketing, and conversion optimization strategies.",
+    tags: ["SEO", "Social Media", "PPC", "Analytics"],
+    color: "blue",
+    url: "#",
+  },
+  {
+    id: 2,
+    title: "E-Commerce Brand Launch",
+    category: "Brand Marketing",
+    industry: "Retail",
+    result: "+250% Revenue",
+    description:
+      "Complete brand launch and digital marketing strategy for a new e-commerce platform, resulting in 250% revenue growth within the first 6 months.",
+    tags: ["Brand Strategy", "Content Marketing", "Influencer", "Email"],
+    color: "green",
+    url: "#",
+  },
+  {
+    id: 3,
+    title: "Healthcare Practice Expansion",
+    category: "Local Marketing",
+    industry: "Healthcare",
+    result: "+180% Patients",
+    description:
+      "Local SEO and digital marketing campaign that helped a healthcare practice expand to three new locations and increase patient acquisition by 180%.",
+    tags: ["Local SEO", "Google Ads", "Reputation", "Content"],
+    color: "purple",
+    url: "#",
+  },
+  {
+    id: 4,
+    title: "SaaS Product Launch",
+    category: "B2B Marketing",
+    industry: "Software",
+    result: "+400% Signups",
+    description:
+      "Strategic B2B marketing campaign for a SaaS product launch, achieving 400% increase in trial signups through targeted content marketing and account-based marketing.",
+    tags: ["B2B Strategy", "Content", "LinkedIn Ads", "Webinars"],
+    color: "indigo",
+    url: "#",
+  },
+  {
+    id: 5,
+    title: "Restaurant Chain Rebrand",
+    category: "Brand Marketing",
+    industry: "Food & Beverage",
+    result: "+220% Foot Traffic",
+    description:
+      "Complete rebrand and digital marketing transformation for a restaurant chain, resulting in 220% increase in foot traffic and 150% growth in online orders.",
+    tags: ["Rebranding", "Social Media", "Local SEO", "Delivery"],
+    color: "red",
+    url: "#",
+  },
+  {
+    id: 6,
+    title: "Fitness App User Acquisition",
+    category: "Mobile Marketing",
+    industry: "Health & Fitness",
+    result: "+500% Downloads",
+    description:
+      "Mobile-first marketing campaign that achieved 500% increase in app downloads through app store optimization, influencer partnerships, and targeted social media advertising.",
+    tags: ["ASO", "Influencer", "Social Ads", "Retention"],
+    color: "yellow",
+    url: "#",
+  },
+];
+
+const defaultFilters = [
+  "All Projects",
+  "Digital Marketing",
+  "Brand Marketing",
+  "B2B Marketing",
+  "Local Marketing",
+  "Mobile Marketing",
+];
+
+// Portfolio Preset Component
+export function Portfolio() {
+  return (
+    <section id="portfolio">
+      <PortfolioSimple
+        enableMotion={true}
+        projects={defaultProjects}
+        filters={defaultFilters}
+        sectionTitle="Our Portfolio"
+        sectionSubtitle="Discover our successful projects that have transformed businesses across various industries with innovative digital solutions."
+        ctaTitle="Ready to Start Your Project?"
+        ctaDescription="Let's work together to create something amazing that drives real results for your business."
+        section={{
+          className: "py-16 md:py-24 bg-background",
+        }}
+        title={{
+          className:
+            "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-[var(--heading-fg)]",
+        }}
+        subtitle={{
+          className:
+            "text-xl md:text-2xl font-inter text-[var(--subheading-fg)] max-w-2xl mx-auto leading-relaxed",
+        }}
+        ctaTitleStyle={{
+          className: "text-2xl md:text-3xl font-bold text-[var(--heading-fg)]",
+        }}
+        ctaDescriptionStyle={{
+          className:
+            "text-lg md:text-xl text-[var(--subheading-fg)] max-w-md mx-auto",
+        }}
+        tagStyle={{
+          className:
+            "px-2 py-1 text-xs rounded-full border-[var(--badge-border)] text-[var(--badge-fg)] bg-[var(--badge-bg)]",
+        }}
+        ctaSection={{
+          className:
+            "space-y-6 text-center mt-16 pt-12 border-t border-[var(--footer-border)]",
+        }}
+        cta1Label="Start Your Project"
+        cta1Href="#contact"
+        cta2Label="View All Projects"
+        cta2Href="#portfolio"
+        cta1Button={{
+          className:
+            "h-10 px-6 flex items-center justify-center font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5 [--btn-bg:theme(colors.fuchsia.600)] hover:[--btn-hover-bg:theme(colors.fuchsia.700)] [--btn-fg:theme(colors.white)] hover:[--btn-hover-fg:theme(colors.white)]",
+        }}
+        cta2Button={{
+          className:
+            "h-10 px-6 flex items-center justify-center font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5 border-2 [--btn-bg:transparent] [--btn-fg:theme(colors.fuchsia.700)] [--btn-border:theme(colors.fuchsia.600)] hover:[--btn-hover-bg:theme(colors.fuchsia.600)] hover:[--btn-hover-fg:theme(colors.white)] dark:[--btn-fg:theme(colors.fuchsia.400)] dark:[--btn-border:theme(colors.fuchsia.500)] dark:hover:[--btn-hover-bg:theme(colors.fuchsia.500)] dark:hover:[--btn-hover-fg:theme(colors.white)]",
+        }}
+        onProjectClick={(project) => {
+          console.log("Project clicked:", project);
+        }}
+        onPrimaryCtaClick={() => {
+          console.log("CTA 1 clicked:");
+        }}
+        onSecondaryCtaClick={() => {
+          console.log("CTA 2 clicked:");
+        }}
+        ariaLabel="Portfolio showcase section"
+      />
+    </section>
+  );
+}

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

@@ -1,114 +1,114 @@
-"use client";
-
-import React from "react";
-import { Pricing as SharedPricing } from "@/components/sections/Pricing";
-
-const AgencyPricingData = [
-  {
-    pricingPlanHeaderText: "Starter",
-    pricingPlanPrice: "$2,999",
-    pricingPlanFeatures: [
-      "5-page custom website",
-      "Mobile-responsive design",
-      "Basic SEO optimization",
-      "Contact form integration",
-      "2 rounds of revisions",
-      "1 month post-launch support",
-    ],
-    pricingPlanCTALabel: "Get Started",
-    pricingPlanCTAHref: "#contact",
-  },
-  {
-    pricingPlanHeaderText: "Professional",
-    pricingPlanPrice: "$5,999",
-    pricingPlanFeatures: [
-      "10-page custom website",
-      "Advanced responsive design",
-      "Comprehensive SEO setup",
-      "CMS integration",
-      "Analytics & tracking setup",
-      "Social media integration",
-      "3 rounds of revisions",
-      "3 months ongoing support",
-    ],
-    pricingPlanCTALabel: "Most Popular",
-    pricingPlanCTAHref: "#contact",
-    isPopular: true,
-  },
-  {
-    pricingPlanHeaderText: "Enterprise",
-    pricingPlanPrice: "Custom Quote",
-    pricingPlanFeatures: [
-      "Unlimited pages",
-      "Custom functionality",
-      "E-commerce integration",
-      "Advanced SEO strategy",
-      "Performance optimization",
-      "Third-party integrations",
-      "Priority support",
-      "Dedicated project manager",
-      "6 months ongoing support",
-    ],
-    pricingPlanCTALabel: "Contact Sales",
-    pricingPlanCTAHref: "#contact",
-  },
-];
-
-export function Pricing() {
-  return (
-    <section id="pricing">
-      <SharedPricing
-        pricingPlans={AgencyPricingData}
-        pricingHeadingText="Choose Your Plan"
-        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",
-        }}
-        heading={{
-          className:
-            "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-center text-gray-800 dark:text-white mb-8",
-        }}
-        grid={{
-          className:
-            "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-8",
-        }}
-        card={{
-          className:
-            "relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200",
-        }}
-        header={{
-          className:
-            "p-6 text-center border-b border-gray-200 dark:border-gray-700",
-        }}
-        title={{
-          className:
-            "text-xl font-bold font-poppins text-gray-800 dark:text-white mb-2",
-        }}
-        price={{
-          className:
-            "text-3xl font-bold font-poppins text-fuchsia-600 dark:text-fuchsia-400 mb-4",
-        }}
-        features={{
-          className: "p-6 space-y-3 font-inter",
-        }}
-        featureItem={{
-          className:
-            "flex items-center text-gray-600 dark:text-gray-300 text-sm",
-        }}
-        cta={{
-          variant: "default",
-          size: "lg",
-          className:
-            "w-full bg-fuchsia-600 hover:bg-fuchsia-700 dark:bg-fuchsia-600 dark:hover:bg-fuchsia-700 text-white hover:text-white font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5",
-        }}
-        popularBadge={{
-          className:
-            "absolute -top-3 left-1/2 transform -translate-x-1/2 bg-fuchsia-600 text-white px-4 py-1 rounded-full text-sm font-medium",
-        }}
-        ariaLabel="Pricing section"
-      />
-    </section>
-  );
-}
+"use client";
+
+import React from "react";
+import { Pricing as SharedPricing } from "@/components/sections/Pricing";
+
+const AgencyPricingData = [
+  {
+    pricingPlanHeaderText: "Starter",
+    pricingPlanPrice: "$2,999",
+    pricingPlanFeatures: [
+      "5-page custom website",
+      "Mobile-responsive design",
+      "Basic SEO optimization",
+      "Contact form integration",
+      "2 rounds of revisions",
+      "1 month post-launch support",
+    ],
+    pricingPlanCTALabel: "Get Started",
+    pricingPlanCTAHref: "#contact",
+  },
+  {
+    pricingPlanHeaderText: "Professional",
+    pricingPlanPrice: "$5,999",
+    pricingPlanFeatures: [
+      "10-page custom website",
+      "Advanced responsive design",
+      "Comprehensive SEO setup",
+      "CMS integration",
+      "Analytics & tracking setup",
+      "Social media integration",
+      "3 rounds of revisions",
+      "3 months ongoing support",
+    ],
+    pricingPlanCTALabel: "Most Popular",
+    pricingPlanCTAHref: "#contact",
+    isPopular: true,
+  },
+  {
+    pricingPlanHeaderText: "Enterprise",
+    pricingPlanPrice: "Custom Quote",
+    pricingPlanFeatures: [
+      "Unlimited pages",
+      "Custom functionality",
+      "E-commerce integration",
+      "Advanced SEO strategy",
+      "Performance optimization",
+      "Third-party integrations",
+      "Priority support",
+      "Dedicated project manager",
+      "6 months ongoing support",
+    ],
+    pricingPlanCTALabel: "Contact Sales",
+    pricingPlanCTAHref: "#contact",
+  },
+];
+
+export function Pricing() {
+  return (
+    <section id="pricing">
+      <SharedPricing
+        pricingPlans={AgencyPricingData}
+        pricingHeadingText="Choose Your Plan"
+        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",
+        }}
+        heading={{
+          className:
+            "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-center text-gray-800 dark:text-white mb-8",
+        }}
+        grid={{
+          className:
+            "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-8",
+        }}
+        card={{
+          className:
+            "relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200",
+        }}
+        header={{
+          className:
+            "p-6 text-center border-b border-gray-200 dark:border-gray-700",
+        }}
+        title={{
+          className:
+            "text-xl font-bold font-poppins text-gray-800 dark:text-white mb-2",
+        }}
+        price={{
+          className:
+            "text-3xl font-bold font-poppins text-fuchsia-600 dark:text-fuchsia-400 mb-4",
+        }}
+        features={{
+          className: "p-6 space-y-3 font-inter",
+        }}
+        featureItem={{
+          className:
+            "flex items-center text-gray-600 dark:text-gray-300 text-sm",
+        }}
+        cta={{
+          variant: "default",
+          size: "lg",
+          className:
+            "w-full bg-fuchsia-600 hover:bg-fuchsia-700 dark:bg-fuchsia-600 dark:hover:bg-fuchsia-700 text-white hover:text-white font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5",
+        }}
+        popularBadge={{
+          className:
+            "absolute -top-3 left-1/2 transform -translate-x-1/2 bg-fuchsia-600 text-white px-4 py-1 rounded-full text-sm font-medium",
+        }}
+        ariaLabel="Pricing section"
+      />
+    </section>
+  );
+}

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

@@ -1,59 +1,59 @@
-"use client";
-
-import React from "react";
-import { ProcessTimeline } from "@/components/sections/ProcessTimeline";
-
-const agencySteps = [
-  {
-    stepNumber: 1,
-    title: "Discovery Call",
-    description: "Understanding your goals and requirements",
-    icon: "🔍",
-  },
-  {
-    stepNumber: 2,
-    title: "Strategy & Design",
-    description: "Custom mockups and project roadmap",
-    icon: "🎨",
-  },
-  {
-    stepNumber: 3,
-    title: "Development",
-    description: "Building your site with regular updates",
-    icon: "⚡",
-  },
-  {
-    stepNumber: 4,
-    title: "Launch & Support",
-    description: "Going live with ongoing maintenance",
-    icon: "🚀",
-  },
-];
-
-export function Process() {
-  return (
-    <section id="process">
-      <ProcessTimeline
-        steps={agencySteps}
-        heading="How We Work"
-        subheading="Our proven 4-step process ensures your project delivers real results, on time and within budget."
-        section={{
-          className:
-            "py-16 md:py-20 bg-fuchsia-50 dark:bg-gray-900 [--process-step-bg:theme(colors.fuchsia.600)] [--process-step-fg:theme(colors.white)] [--process-connector:theme(colors.gray.300)] dark:[--process-connector:theme(colors.gray.600)]",
-        }}
-        container={{ className: "max-w-6xl mx-auto px-6" }}
-        headingStyle={{
-          className:
-            "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-gray-800 dark:text-white leading-tight",
-        }}
-        subheadingStyle={{
-          className:
-            "text-xl md:text-2xl font-inter text-gray-600 dark:text-gray-300 max-w-2xl mx-auto leading-relaxed",
-        }}
-        connectingLine={undefined}
-        stepCircle={undefined}
-        ariaLabel="Process timeline section"
-      />
-    </section>
-  );
-}
+"use client";
+
+import React from "react";
+import { ProcessTimeline } from "@/components/sections/ProcessTimeline";
+
+const agencySteps = [
+  {
+    stepNumber: 1,
+    title: "Discovery Call",
+    description: "Understanding your goals and requirements",
+    icon: "🔍",
+  },
+  {
+    stepNumber: 2,
+    title: "Strategy & Design",
+    description: "Custom mockups and project roadmap",
+    icon: "🎨",
+  },
+  {
+    stepNumber: 3,
+    title: "Development",
+    description: "Building your site with regular updates",
+    icon: "⚡",
+  },
+  {
+    stepNumber: 4,
+    title: "Launch & Support",
+    description: "Going live with ongoing maintenance",
+    icon: "🚀",
+  },
+];
+
+export function Process() {
+  return (
+    <section id="process">
+      <ProcessTimeline
+        steps={agencySteps}
+        heading="How We Work"
+        subheading="Our proven 4-step process ensures your project delivers real results, on time and within budget."
+        section={{
+          className:
+            "py-16 md:py-20 bg-fuchsia-50 dark:bg-gray-900 [--process-step-bg:theme(colors.fuchsia.600)] [--process-step-fg:theme(colors.white)] [--process-connector:theme(colors.gray.300)] dark:[--process-connector:theme(colors.gray.600)]",
+        }}
+        container={{ className: "max-w-6xl mx-auto px-6" }}
+        headingStyle={{
+          className:
+            "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-gray-800 dark:text-white leading-tight",
+        }}
+        subheadingStyle={{
+          className:
+            "text-xl md:text-2xl font-inter text-gray-600 dark:text-gray-300 max-w-2xl mx-auto leading-relaxed",
+        }}
+        connectingLine={undefined}
+        stepCircle={undefined}
+        ariaLabel="Process timeline section"
+      />
+    </section>
+  );
+}