Landing Page Setup

export const appConfig = {
  metadata: {
    name: "Your App Name",                    // Change this
    description: "Your app description",       // Change this
    url: "https://yourapp.com",               // Change this
    images: {
      logoLight: "/logo-light.svg",           // Upload your light theme logo
      logoDark: "/logo-dark.svg",             // Upload your dark theme logo
      ogImage: "/og-image.png",               // Social sharing image
    },
  },
  // ... rest of config
}

pnpm dlx shadcn@latest add https://tweakcn.com/r/themes/claude.json

ui: {
  theme: {
    enabled: true,              // Enable theme toggle
    defaultMode: "system",      // "system" | "light" | "dark"
  },
}

{
  "hero": {
    "badge": "New Feature",
    "badgeText": "Introducing AI Model Support",
    "heading": "Build Your SaaS Product Faster",
    "subHeading": "Production-ready Next.js template with authentication, payments, and more",
    "buttons": {
      "getStarted": "Get Started",
      "seeDemo": "See Demo"
    }
  }
}

{
  "hero": {
    "badge": "新功能",
    "badgeText": "介绍全新的 AI 模型支持",
    "heading": "快速构建您的 SaaS 产品",
    "subHeading": "生产就绪的 Next.js 模板，包含认证、支付等功能",
    "buttons": {
      "getStarted": "开始使用",
      "seeDemo": "查看演示"
    }
  }
}

export function getHeroSectionConfig() {
  return {
    links: {
      badge: "/blog",                  // Badge click destination
      getStarted: "/#pricing",         // Primary CTA
      seeDemo: "/app/dashboard",       // Secondary CTA
    },
  };
}

{
  "featureSection": {
    "tabs": {
      "heading": "Powerful Feature Collection",
      "description": "Build perfect solutions",
      "items": {
        "tab-1": {
          "label": "Custom Themes",
          "content": {
            "badge": "Beautiful & Modern",
            "title": "Easily Customize Themes",
            "description": "Beautiful and modern styling with just a few lines of code to change colors, fonts, and layouts",
            "buttonText": "View Themes"
          }
        },
        "tab-2": {
          "label": "Authentication",
          "content": {
            "badge": "Secure & Flexible",
            "title": "Complete Auth System",
            "description": "Built-in authentication with social login, magic links, and email verification",
            "buttonText": "Learn More"
          }
        }
      }
    }
  }
}

import { Zap, Shield } from "lucide-react";

const featureTabs: FeatureTabItem[] = [
  {
    value: "tab-1",
    label: t("items.tab-1.label"),
    icon: Zap,                              // Lucide icon
    content: {
      // ... other content
      imageSrc: "/marketing/feature-themes.png",
      link: "/docs/themes",
    },
  },
  {
    value: "tab-2",
    label: t("items.tab-2.label"),
    icon: Shield,
    content: {
      imageSrc: "/marketing/feature-auth.png",
      link: "/docs/authentication",
    },
  },
];

{
  "featureSection": {
    "steps": {
      "title": "Quick Start",
      "items": {
        "step-1": {
          "step": "Step 1",
          "title": "Clone Template",
          "content": "Clone the Next.js starter template from GitHub"
        },
        "step-2": {
          "step": "Step 2",
          "title": "Configure Project",
          "content": "Set up environment variables and customize the template"
        },
        "step-3": {
          "step": "Step 3",
          "title": "Deploy",
          "content": "Deploy to Vercel, Cloudflare, or AWS in one click"
        }
      }
    }
  }
}

{
  "testimonials": {
    "title": "Trusted by Users Worldwide",
    "description": "Join thousands of satisfied users",
    "items": {
      "testimonial-1": {
        "author": {
          "name": "John Smith",
          "handle": "@johnsmith",
          "avatar": "https://example.com/avatar1.jpg"
        },
        "text": "This platform has completely transformed how we handle data. The speed and accuracy are impressive.",
        "href": "https://twitter.com/johnsmith"
      },
      "testimonial-2": {
        "author": {
          "name": "Sarah Chen",
          "handle": "@sarahchen",
          "avatar": "https://example.com/avatar2.jpg"
        },
        "text": "Best development experience I've had. Everything just works out of the box.",
        "href": "https://twitter.com/sarahchen"
      }
    }
  }
}

{
  "faq": {
    "heading": "Frequently Asked Questions",
    "description": "Everything you need to know about our product",
    "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 anytime during the trial period without being charged."
      },
      "faq-2": {
        "id": "faq-2",
        "question": "How do I cancel my subscription?",
        "answer": "You can cancel your subscription anytime in your account settings."
      },
      "faq-3": {
        "id": "faq-3",
        "question": "What payment methods do you accept?",
        "answer": "We accept all major credit cards and PayPal payments."
      }
    },
    "supportHeading": "Still have questions?",
    "supportDescription": "Can't find the answer you're looking for? Our support team is here to help.",
    "supportButtonText": "Contact Support"
  }
}

# For Stripe
STRIPE_SECRET_KEY="sk_test_your_key"
STRIPE_WEBHOOK_SECRET="whsec_your_secret"

# Price IDs
NEXT_PUBLIC_PRICE_ID_PRO_MONTHLY="price_xxx"
NEXT_PUBLIC_PRICE_ID_PRO_YEARLY="price_xxx"
NEXT_PUBLIC_PRICE_ID_LIFETIME="price_xxx"

payment: {
  provider: "stripe",              // or "creem"
  currency: "USD",
  yearlyDiscount: 20,              // 20% discount for yearly plans
  redirectAfterCheckout: "/app/dashboard",
  plans: {
    free: {
      id: "free",
      isFree: true,
    },
    pro: {
      id: "pro",
      prices: [
        {
          type: PaymentType.SUBSCRIPTION,
          priceId: process.env.NEXT_PUBLIC_PRICE_ID_PRO_MONTHLY as string,
          amount: 9.9,
          interval: PlanInterval.MONTH,
          trialPeriodDays: 7,
        },
        {
          type: PaymentType.SUBSCRIPTION,
          priceId: process.env.NEXT_PUBLIC_PRICE_ID_PRO_YEARLY as string,
          amount: 99,
          interval: PlanInterval.YEAR,
          trialPeriodDays: 30,
        },
      ],
      popular: true,
    },
    lifetime: {
      id: "lifetime",
      prices: [
        {
          type: PaymentType.ONE_TIME,
          priceId: process.env.NEXT_PUBLIC_PRICE_ID_LIFETIME as string,
          amount: 399,
        },
      ],
      isLifetime: true,
    },
  },
}

{
  "pricing": {
    "title": "Simple, Transparent Pricing",
    "subtitle": "Choose the plan that's right for you",
    "frequencies": {
      "monthly": "Monthly",
      "yearly": "Yearly"
    },
    "products": {
      "free": {
        "title": "Free",
        "description": "Perfect for trying out",
        "features": {
          "feature1": "Basic features",
          "feature2": "Up to 10 projects",
          "feature3": "Community support"
        }
      },
      "pro": {
        "title": "Pro",
        "description": "Best for professionals",
        "features": {
          "feature1": "All Free features",
          "feature2": "Unlimited projects",
          "feature3": "Priority support",
          "feature4": "Advanced analytics"
        }
      },
      "lifetime": {
        "title": "Lifetime",
        "description": "Pay once, use forever",
        "features": {
          "feature1": "All Pro features",
          "feature2": "Lifetime updates",
          "feature3": "No recurring fees"
        }
      }
    }
  }
}

{
  "navigation": {
    "products": {
      "label": "Products"
    },
    "blog": {
      "label": "Blog"
    },
    "docs": {
      "label": "Documentation"
    },
    "pricing": {
      "label": "Pricing"
    }
  }
}

export function getNavItems(): NavItem[] {
  const t = useTranslations("navigation");

  return [
    {
      id: 1,
      label: t("blog.label"),
      link: "/blog",
    },
    {
      id: 2,
      label: t("docs.label"),
      link: "/docs",
    },
    {
      id: 3,
      label: t("pricing.label"),
      link: "/pricing",
    },
  ];
}

export function getFooterData(): FooterData {
  const t = useTranslations("footer");
  
  return {
    newsletter: {
      title: t("newsletter.title"),
      description: t("newsletter.description"),
      inputPlaceholder: t("newsletter.inputPlaceholder"),
      submitAriaLabel: t("newsletter.submitAriaLabel"),
    },
    quickLinks: {
      title: t("quickLinks.title"),
      links: [
        { label: t("quickLinks.home"), href: "/#hero" },
        { label: t("quickLinks.features"), href: "/#feature-tabs" },
        { label: t("quickLinks.pricing"), href: "/pricing" },
      ],
    },
    resources: {
      title: t("resources.title"),
      links: [
        { label: t("resources.docs"), href: "/docs" },
        { label: t("resources.blog"), href: "/blog" },
        { label: t("resources.contact"), href: "/contact" },
      ],
    },
  };
}

{
  "footer": {
    "newsletter": {
      "title": "Subscribe to our newsletter",
      "description": "Get the latest updates and exclusive offers",
      "inputPlaceholder": "Enter your email",
      "submitAriaLabel": "Subscribe"
    },
    "quickLinks": {
      "title": "Quick Links",
      "home": "Home",
      "features": "Features",
      "pricing": "Pricing"
    },
    "resources": {
      "title": "Resources",
      "docs": "Documentation",
      "blog": "Blog",
      "contact": "Contact"
    },
    "copyright": "© 2025 Your Company. All rights reserved."
  }
}

import { SocialMediaIcons as Icons } from "@/components/icons/social-media";
import GitHub from "@/components/icons/social-media/github";

export function getSocialMediaData() {
  const t = useTranslations("footer");

  return {
    title: t("social.title"),
    media: [
      {
        name: "GitHub",
        href: "https://github.com/yourusername",
        icon: <GitHub className="h-4 w-4" />,
      },
      {
        name: "X",
        href: "https://x.com/yourusername",
        icon: <Icons.X className="h-4 w-4" />,
      },
      {
        name: "LinkedIn",
        href: "https://linkedin.com/company/yourcompany",
        icon: <Icons.LinkedIn className="h-4 w-4" />,
      },
    ],
  };
}