Marketing Configuration

// 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
└── changelog.ts       // Changelog entries and updates

export async function getPricingConfig(): Promise<PricingConfig> {
  const t = await getTranslations("pricing");
  const priceConfig = appConfig.payment;
  
  return {
    title: t("title"),        // "Pricing"
    subtitle: t("subtitle"),  // "Choose the best plan for your needs"
    plans,
  };
}

{
  "pricing": {
    "title": "Pricing",
    "subtitle": "Choose the best plan for your needs",
    "frequencies": {
      "monthly": "Monthly",
      "yearly": "Yearly"
    },
    "popularBadge": "Most Popular",
    "products": {
      "free": {
        "title": "Starter",
        "description": "For your hobby projects",
        "features": {
          "feature1": "Up to 5 projects",
          "feature2": "Basic analytics",
          "feature3": "Community support"
        }
      },
      "pro": {
        "title": "Pro",
        "description": "Great for small businesses",
        "features": {
          "feature1": "Unlimited projects",
          "feature2": "Advanced analytics",
          "feature3": "Priority support"
        }
      }
    }
  }
}

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

  const faqItems: FaqItem[] = [
    {
      id: t("items.faq-1.id"),           // "faq-1"
      question: t("items.faq-1.question"), // "Do you offer a free trial?"
      answer: t("items.faq-1.answer"),     // "Yes, we offer a 14-day free trial..."
    },
    // ... more FAQ items
  ];

  return {
    heading: t("heading"),                    // "Frequently asked questions"
    description: t("description"),           // "Everything you need to know..."
    items: faqItems,
    supportHeading: t("supportHeading"),     // "Still have questions?"
    supportDescription: t("supportDescription"), // "Can't find the answer..."
    supportButtonText: t("supportButtonText"),   // "Contact Support"
    supportButtonUrl: "/contact",
  };
}

{
  "faq": {
    "heading": "Frequently asked questions",
    "description": "Everything you need to know about our Next.js starter template. Can't find the answer you're looking for? Feel free to contact our support team.",
    "items": {
      "faq-1": {
        "id": "faq-1",
        "question": "Do you offer a free trial?",
        "answer": "Yes, we offer a 14-day free trial. You can cancel at any time during the trial period and you won't be charged."
      },
      "faq-2": {
        "id": "faq-2",
        "question": "Can I cancel my subscription?",
        "answer": "You can cancel your subscription at any time. You can do this from your account settings."
      },
      "faq-3": {
        "id": "faq-3",
        "question": "What payment methods do you accept?",
        "answer": "We accept all major credit cards and PayPal."
      }
    },
    "supportHeading": "Still have questions?",
    "supportDescription": "Can't find the answer you're looking for? Our support team is here to help with any technical questions or concerns.",
    "supportButtonText": "Contact Support"
  }
}

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

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

  return {
    heading: t("heading"),        // "A Collection of Components..."
    description: t("description"), // "Join us to build flawless web solutions."
    tabs: featureTabs,
  };
}

{
  "featureSection": {
    "tabs": {
      "heading": "A Collection of Components Built With Shadcn & Tailwind",
      "description": "Join us to build flawless web solutions.",
      "items": {
        "tab-1": {
          "label": "Customizable Themes",
          "content": {
            "badge": "Beautiful & Modern",
            "title": "Customize themes with minimal code changes.",
            "description": "Beautiful and modern styling that can be easily customized to match your brand. Change colors, fonts, and layouts with just a few lines of code.",
            "buttonText": "View Themes"
          }
        },
        "tab-2": {
          "label": "Multi-Platform Deploy",
          "content": {
            "badge": "Deploy Anywhere",
            "title": "Deploy to any platform natively.",
            "description": "Native support for deployment to Cloudflare, AWS, Vercel, and other major platforms. Deploy everywhere with optimized configurations.",
            "buttonText": "View Deployments"
          }
        }
      }
    },
    "steps": {
      "title": "How to get started",
      "items": {
        "step-1": {
          "step": "Step 1",
          "title": "Clone the Template",
          "content": "Clone or download the Next.js starter template from GitHub"
        },
        "step-2": {
          "step": "Step 2", 
          "title": "Configure Your Project",
          "content": "Set up your environment variables, and customize the template to match your project needs."
        }
      }
    }
  }
}

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

  const featureSteps: FeatureStepItem[] = [
    {
      step: t("items.step-1.step"),      // "Step 1"
      title: t("items.step-1.title"),    // "Clone the Template"
      content: t("items.step-1.content"), // "Clone or download the Next.js starter template from GitHub"
      image: "https://images.unsplash.com/photo-1723958929247-ef054b525153?q=80&w=2070&auto=format&fit=crop",
    },
    {
      step: t("items.step-2.step"),      // "Step 2"
      title: t("items.step-2.title"),    // "Configure Your Project"
      content: t("items.step-2.content"), // "Set up your environment variables..."
      image: "https://images.unsplash.com/photo-1723931464622-b7df7c71e380?q=80&w=2070&auto=format&fit=crop",
    },
    // ... more steps
  ];

  return {
    title: t("title"),  // "How to get started"
    steps: featureSteps,
  };
}

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

  return {
    badge: t("badge"),                          // "New"
    badgeText: t("badgeText"),                 // "Introducing Support for AI Models"
    heading: t("heading"),                     // "The Ultimate Next.js Starter Kit..."
    highlightHeading: t("highlightHeading"),   // "Next.js Starter Kit"
    subHeading: t("subHeading"),              // "Build and Ship faster..."
    animatedTooltipTitle: t("AnimatedTooltipTitle"), // "LOVED BY DEVELOPERS WORLDWIDE"
    buttons: {
      getStarted: t("buttons.getStarted"),     // "Get Started"
      seeDemo: t("buttons.seeDemo"),          // "See Demo"
    },
    links: {
      badge: "/blog",
      getStarted: "/#pricing",
      seeDemo: "/",
    },
  };
}

{
  "hero": {
    "badge": "New",
    "badgeText": "Introducing Support for AI Models",
    "heading": "The Ultimate Next.js Starter Kit for Your Next Project",
    "highlightHeading": "Next.js Starter Kit",
    "subHeading": "Build and Ship faster with the Next.js Starter Kit. Ship in days, not months.",
    "buttons": {
      "getStarted": "Get Started",
      "seeDemo": "See Demo"
    },
    "AnimatedTooltipTitle": "LOVED BY DEVELOPERS WORLDWIDE"
  }
}

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

  const testimonials: TestimonialItem[] = [
    {
      author: {
        name: t("items.testimonial-1.author.name"),     // "Emma Thompson"
        handle: t("items.testimonial-1.author.handle"), // "@emmaai"
        avatar: t("items.testimonial-1.author.avatar"), // "https://images.unsplash.com/..."
      },
      text: t("items.testimonial-1.text"),              // "Using this AI platform..."
      href: t("items.testimonial-1.href"),             // "https://twitter.com/emmaai"
    },
    // ... more testimonials
  ];

  return {
    title: t("title"),           // "Trusted by developers worldwide"
    description: t("description"), // "Join thousands of developers..."
    testimonials,
  };
}

{
  "testimonials": {
    "title": "Trusted by developers worldwide",
    "description": "Join thousands of developers who are already building the future with our AI platform",
    "items": {
      "testimonial-1": {
        "author": {
          "name": "Emma Thompson",
          "handle": "@emmaai",
          "avatar": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop&crop=face"
        },
        "text": "Using this AI platform has transformed how we handle data analysis. The speed and accuracy are unprecedented.",
        "href": "https://twitter.com/emmaai"
      },
      "testimonial-2": {
        "author": {
          "name": "David Park",
          "handle": "@davidtech",
          "avatar": "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face"
        },
        "text": "The API integration is flawless. We've reduced our development time by 60% since implementing this solution.",
        "href": "https://twitter.com/davidtech"
      }
    }
  }
}

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
];

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",
  };
}

export function getChangelogConfig(): ChangelogConfig {
  const t = useTranslations("changelog");

  const entries: ChangelogEntry[] = [
    {
      version: t("entries.v1_3_0.version"),      // "Version 1.3.0"
      date: t("entries.v1_3_0.date"),           // "31 July 2025"
      title: t("entries.v1_3_0.title"),         // "Enhanced Documentation and Changelog"
      description: t("entries.v1_3_0.description"), // "We've support for Chinese documentation..."
      items: [
        t("entries.v1_3_0.items.item1"),        // "Add new documentation translation: Chinese"
        t("entries.v1_3_0.items.item2"),        // "Add changelog page"
      ],
    },
    // ... more entries
  ];

  return {
    title: t("title"),           // "Changelog"
    description: t("description"), // "Get the latest updates and improvements..."
    entries,
  };
}

{
  "changelog": {
    "title": "Changelog",
    "description": "Get the latest updates and improvements to our platform.",
    "keywords": "changelog, updates, improvements, releases, features, bug fixes, version history",
    "button": {
      "text": "Learn more"
    },
    "entries": {
      "v1_3_0": {
        "version": "Version 1.3.0",
        "date": "31 July 2025",
        "title": "Enhanced Documentation and Changelog",
        "description": "We've support for Chinese documentation and changelog. You can now read the documentation in Chinese and add the changelog page.",
        "items": {
          "item1": "Add new documentation translation: Chinese",
          "item2": "Add changelog page"
        }
      },
      "v1_2_0": {
        "version": "Version 1.2.0", 
        "date": "21 July 2025",
        "title": "Enhanced Payments and Affiliate System",
        "description": "We've added a new payments(creem.io) and affiliate(Affonso) to our template. You can now easily manage your payments and affiliates.",
        "items": {
          "item1": "Add new payment provider: Creem.io",
          "item2": "Add new affiliate provider: Affonso"
        }
      }
    }
  }
}

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>
  );
}

// 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

// 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."
      }
    }
  }
}

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",
    },
  },
];

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",
  },
];

// messages/en.json
{
  "changelog": {
    "entries": {
      "v1_4_0": {
        "version": "v1.4.0",
        "date": "January 15, 2024",
        "title": "New Feature Release",
        "description": "Introducing exciting new features and improvements.",
        "items": {
          "item1": "Added dark mode support",
          "item2": "Improved performance by 30%",
          "item3": "Fixed critical bugs"
        }
      }
    }
  }
}

const entries: ChangelogEntry[] = [
  {
    version: t("entries.v1_4_0.version"),
    date: t("entries.v1_4_0.date"),
    title: t("entries.v1_4_0.title"),
    description: t("entries.v1_4_0.description"),
    items: [
      t("entries.v1_4_0.items.item1"),
      t("entries.v1_4_0.items.item2"),
      t("entries.v1_4_0.items.item3"),
    ],
    image: "/marketing/feature-update.png", // Optional
    button: { // Optional
      url: "/blog/v1-4-0-release",
      text: t("button.text"),
    },
  },
  // ... existing entries
];