Marketing Configuration

NEXTDEVKIT provides comprehensive marketing configuration for your landing page components. All marketing configurations are located in the src/config/marketing/ directory and control how your marketing pages appear to visitors.

📁 Marketing Configuration Structure

The marketing configuration is organized into several modules:

// Marketing configuration modules
src/config/marketing/
├── pricing.ts          // Pricing plans and display
├── faq.ts              // Frequently asked questions
├── feature-tabs.ts     // Feature tabs component
├── feature-steps.ts    // Feature steps component  
├── hero-section.ts     // Hero section content
├── testimonials.ts     // Customer testimonials
├── animated-tool-tip.ts // Animated tooltips
└── blog.ts            // Blog configuration

💰 Pricing Configuration

Configure pricing plans display and content:

export interface PricingConfig {
  title: string;
  subtitle: string;
  plans: PricePlan[];
}

export async function getPricingConfig(): Promise<PricingConfig> {
  const t = await getTranslations("pricing");
  const priceConfig = appConfig.payment;
  const plans: PricePlan[] = [];

  if (priceConfig.plans.nextjs) {
    plans.push({
      ...priceConfig.plans.nextjs,
      name: t("products.nextjs.title"),
      description: t("products.nextjs.description"),
      features: [
        t("products.nextjs.features.feature1"),
        t("products.nextjs.features.feature2"),
        // ... more features
      ],
    });
  }
  
  return {
    title: t("title"),
    subtitle: t("subtitle"),
    plans,
  };
}

Pricing Plan Structure

Property	Type	Description
`title`	`string`	Pricing section title
`subtitle`	`string`	Pricing section subtitle
`plans`	`PricePlan[]`	Array of pricing plans

❓ FAQ Configuration

Configure frequently asked questions:

export interface FaqItem {
  id: string;
  question: string;
  answer: string;
}

export interface FaqConfig {
  heading: string;
  description: string;
  items: FaqItem[];
  supportHeading: string;
  supportDescription: string;
  supportButtonText: string;
  supportButtonUrl: string;
  avatars: {
    src: string;
    alt: string;
  }[];
}

export function getFaqConfig(): FaqConfig {
  const t = useTranslations("faq");

  const faqItems: FaqItem[] = [
    {
      id: t("items.faq-1.id"),
      question: t("items.faq-1.question"),
      answer: t("items.faq-1.answer"),
    },
    // ... more FAQ items
  ];

  return {
    heading: t("heading"),
    description: t("description"),
    items: faqItems,
    avatars: [
      {
        src: "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8YXZhdGFyfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60",
        alt: "Avatar 1",
      },
      // ... more avatars
    ],
    supportHeading: t("supportHeading"),
    supportDescription: t("supportDescription"),
    supportButtonText: t("supportButtonText"),
    supportButtonUrl: "/contact",
  };
}

FAQ Configuration Structure

Property	Type	Description
`heading`	`string`	FAQ section heading
`description`	`string`	FAQ section description
`items`	`FaqItem[]`	Array of FAQ items
`supportHeading`	`string`	Support section heading
`supportDescription`	`string`	Support section description
`supportButtonText`	`string`	Support button text
`supportButtonUrl`	`string`	Support button URL
`avatars`	`object[]`	Array of avatar images

FAQ Item Structure

Property	Type	Description
`id`	`string`	Unique identifier for the FAQ item
`question`	`string`	The question text
`answer`	`string`	The answer text (supports markdown)

🎯 Feature Tabs Configuration

Configure the feature tabs component:

import { Layout, Pointer, Zap } from "lucide-react";
import type { LucideIcon } from "lucide-react";

export interface FeatureTabItem {
  value: string;
  label: string;
  icon: LucideIcon;
  content: {
    badge: string;
    title: string;
    description: string;
    buttonText: string;
    imageSrc: string;
    imageAlt: string; 
    link: string;
  };
}

export interface FeatureTabsConfig {
  heading: string;
  description: string;
  tabs: FeatureTabItem[];
}

export function getFeatureTabsConfig(): FeatureTabsConfig {
  const t = useTranslations("featureSection.tabs");

  const featureTabs: FeatureTabItem[] = [
    {
      value: "tab-1",
      label: t("items.tab-1.label"),
      icon: Zap,
      content: {
        badge: t("items.tab-1.content.badge"),
        title: t("items.tab-1.content.title"),
        description: t("items.tab-1.content.description"),
        buttonText: t("items.tab-1.content.buttonText"),
        imageSrc: "/marketing/feature-themes.png",
        imageAlt: "Customize themes with minimal code changes",
        link: "/docs/themes",
      },
    },
    // ... more tabs
  ];

  return {
    heading: t("heading"),
    description: t("description"),
    tabs: featureTabs,
  };
}

Feature Tab Structure

Property	Type	Description
`value`	`string`	Unique tab identifier
`label`	`string`	Tab label text
`icon`	`LucideIcon`	Lucide icon component
`content`	`object`	Tab content configuration
`content.badge`	`string`	Badge text
`content.title`	`string`	Content title
`content.description`	`string`	Content description
`content.buttonText`	`string`	Button text
`content.imageSrc`	`string`	Image source path
`content.imageAlt`	`string`	Image alt text
`content.link`	`string`	Button link URL

📈 Feature Steps Configuration

Configure the feature steps component:

export interface FeatureStepItem {
  step: string;
  title: string;
  content: string;
  image: string;
}

export interface FeatureStepsConfig {
  title: string;
  steps: FeatureStepItem[];
}

export function getFeatureStepsConfig(): FeatureStepsConfig {
  const t = useTranslations("featureSection.steps");

  const featureSteps: FeatureStepItem[] = [
    {
      step: t("items.step-1.step"),
      title: t("items.step-1.title"),
      content: t("items.step-1.content"),
      image: "https://images.unsplash.com/photo-1723958929247-ef054b525153?q=80&w=2070&auto=format&fit=crop",
    },
    {
      step: t("items.step-2.step"),
      title: t("items.step-2.title"),
      content: t("items.step-2.content"),
      image: "https://images.unsplash.com/photo-1723931464622-b7df7c71e380?q=80&w=2070&auto=format&fit=crop",
    },
    // ... more steps
  ];

  return {
    title: t("title"),
    steps: featureSteps,
  };
}

Feature Step Structure

Property	Type	Description
`step`	`string`	Step number or identifier
`title`	`string`	Step title
`content`	`string`	Step description content
`image`	`string`	Step image URL

🦸 Hero Section Configuration

Configure the main hero section:

export interface HeroSectionConfig {
  badge: string;
  badgeText: string;
  heading: string;
  highlightHeading: string;
  subHeading: string;
  animatedTooltipTitle: string;
  buttons: {
    getStarted: string;
    seeDemo: string;
  };
  images: {
    dark: {
      src: string;
      alt: string;
      width: number;
      height: number;
    };
    light: {
      src: string;
      alt: string;
      width: number;
      height: number;
    };
  };
  links: {
    badge: string;
    getStarted: string;
    seeDemo: string;
  };
}

export function getHeroSectionConfig(): HeroSectionConfig {
  const t = useTranslations("hero");

  return {
    badge: t("badge"),
    badgeText: t("badgeText"),
    heading: t("heading"),
    highlightHeading: t("highlightHeading"),
    subHeading: t("subHeading"),
    animatedTooltipTitle: t("AnimatedTooltipTitle"),
    buttons: {
      getStarted: t("buttons.getStarted"),
      seeDemo: t("buttons.seeDemo"),
    },
    images: {
      dark: {
        src: "/marketing/hero-section-dark.webp",
        alt: "app screen",
        width: 3812,
        height: 1842,
      },
      light: {
        src: "/marketing/hero-section-light.webp",
        alt: "app screen",
        width: 3812,
        height: 1842,
      },
    },
    links: {
      badge: "/blog",
      getStarted: "/#pricing",
      seeDemo: "/",
    },
  };
}

Hero Section Structure

Property	Type	Description
`badge`	`string`	Badge text
`badgeText`	`string`	Badge description text
`heading`	`string`	Main heading text
`highlightHeading`	`string`	Highlighted heading text
`subHeading`	`string`	Subheading text
`animatedTooltipTitle`	`string`	Animated tooltip title
`buttons`	`object`	Button texts
`buttons.getStarted`	`string`	Get started button text
`buttons.seeDemo`	`string`	See demo button text
`images`	`object`	Hero images configuration
`images.dark`	`object`	Dark theme image
`images.light`	`object`	Light theme image
`links`	`object`	Link URLs
`links.badge`	`string`	Badge link URL
`links.getStarted`	`string`	Get started link URL
`links.seeDemo`	`string`	See demo link URL

💬 Testimonials Configuration

Configure customer testimonials:

export interface TestimonialAuthor {
  name: string;
  handle: string;
  avatar: string;
}

export interface TestimonialItem {
  author: TestimonialAuthor;
  text: string;
  href?: string;
}

export interface TestimonialsConfig {
  title: string;
  description: string;
  testimonials: TestimonialItem[];
}

export function getTestimonialsConfig(): TestimonialsConfig {
  const t = useTranslations("testimonials");

  const testimonials: TestimonialItem[] = [
    {
      author: {
        name: t("items.testimonial-1.author.name"),
        handle: t("items.testimonial-1.author.handle"),
        avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop&crop=face",
      },
      text: t("items.testimonial-1.text"),
      href: "https://twitter.com/emmaai",
    },
    // ... more testimonials
  ];

  return {
    title: t("title"),
    description: t("description"),
    testimonials,
  };
}

Testimonial Structure

Property	Type	Description
`author`	`TestimonialAuthor`	Testimonial author information
`author.name`	`string`	Author name
`author.handle`	`string`	Author handle/username
`author.avatar`	`string`	Author avatar URL
`text`	`string`	Testimonial text
`href`	`string`	Optional link to testimonial source

Configure animated tooltips for marketingeting:

export interface AnimatedTooltipItem {
  id: number;
  name: string;
  designation: string;
  image: string;
}

export const animatedTooltipItems: AnimatedTooltipItem[] = [
  {
		id: 1,
		name: "John Doe",
		designation: "Software Engineer",
		image:
			"https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3387&q=80",
	},
	{
		id: 2,
		name: "Robert Johnson",
		designation: "Product Manager",
		image:
			"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YXZhdGFyfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60",
	},
	{
		id: 3,
		name: "Jane Smith",
		designation: "Data Scientist",
		image:
			"https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8YXZhdGFyfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60",
	},
  // ... more items
];

Property	Type	Description
`id`	`number`	Unique identifier
`name`	`string`	Name
`designation`	`string`	Designation
`image`	`string`	Path to image

📝 Blog Configuration

Configure blog settings:

export interface BlogConfig {
  title: string;
  description: string;
  placeholderImage: string;
}

export async function getBlogConfig(): Promise<BlogConfig> {
  const t = await getTranslations("blog");

  return {
    title: t("title"),
    description: t("description"),
    placeholderImage: "/marketing/feature-techstacks.png",
  };
}

Blog Config Structure

Property	Type	Description
`title`	`string`	Blog section title
`description`	`string`	Blog section description
`placeholderImage`	`string`	Default placeholder image for blog posts

🎯 Usage Examples

Accessing Marketing Configuration

import { getPricingConfig } from "@/config/marketing/pricing";
import { getFaqConfig } from "@/config/marketing/faq";
import { getHeroSectionConfig } from "@/config/marketing/hero-section";

// Use in your components
export default function PricingSection() {
  const pricingData = await getPricingConfig();
  
  return (
    <section>
      <h2>{pricingData.title}</h2>
      <p>{pricingData.subtitle}</p>
      {/* Render pricing plans */}
    </section>
  );
}

Internationalization Support

All marketing configurations support internationalization:

// Each config function uses useTranslations or getTranslations
const t = useTranslations("pricing");
// or for server components
const t = await getTranslations("pricing");

// This allows for multiple languages
const title = t("title"); // "Pricing" in English
                          // "价格" in Chinese

📝 Configuration Examples

Adding New FAQ Items

To add new FAQ items, update your translation files:

// messages/en.json
{
  "faq": {
    "items": {
      "faq-15": {
        "id": "faq-15",
        "question": "How do I customize the theme?",
        "answer": "You can customize themes by editing the CSS variables in your global styles or using the theme configuration."
      }
    }
  }
}

Adding New Feature Tabs

To add new feature tabs:

import { Settings } from "lucide-react";

const featureTabs: FeatureTabItem[] = [
  // ... existing tabs
  {
    value: "tab-4",
    label: t("items.tab-4.label"),
    icon: Settings,
    content: {
      badge: t("items.tab-4.content.badge"),
      title: t("items.tab-4.content.title"),
      description: t("items.tab-4.content.description"),
      buttonText: t("items.tab-4.content.buttonText"),
      imageSrc: "/marketing/feature-example.png",
      imageAlt: "Example feature description",
      link: "/docs/example",
    },
  },
];

Adding New Testimonials

To add new testimonials:

const testimonials: TestimonialItem[] = [
  // ... existing testimonials
  {
    author: {
      name: t("items.testimonial-4.author.name"),
      handle: t("items.testimonial-4.author.handle"),
      avatar: "https://example.com/avatar.jpg",
    },
    text: t("items.testimonial-4.text"),
    href: "https://twitter.com/example",
  },
];

Your NEXTDEVKIT marketing configuration is now fully documented and ready for customization! 🚀