MDX Content Migration Plan — Additional Static Pages

apps/frontend/
├── mdx-components.tsx                            # MODIFY — add custom MDX components
├── next.config.mts                                # VERIFY — ensure .mdx in pageExtensions
├── components/
│   └── features/
│       └── sections/
│           ├── page-mdx.tsx                      # CREATE — general page wrapper (PageHero + prose)
│           └── accordions/
│               └── faq-accordion.tsx              # CREATE — Accordion MDX component
└── app/
    └── [locale]/
        ├── faq/
        │   └── page.tsx → page.mdx                # REPLACE (Task 1)
        ├── contact/
        │   └── page.tsx → page.mdx                # REPLACE (Task 2)
        ├── host-an-event/
        │   └── page.tsx → page.mdx                # REPLACE (Task 3)
        ├── private-events/
        │   └── page.tsx → page.mdx                # REPLACE (Task 4)
        └── experiences/
            ├── our-evening/
            │   └── page.tsx → page.mdx            # REPLACE (Task 5)
            ├── dinner-theater/
            │   └── page.tsx → page.mdx             # REPLACE (Task 6)
            └── creative-workshop/
                └── page.tsx → page.mdx             # REPLACE (Task 7)

pageExtensions: ["ts", "tsx", "mdx"],

git add apps/frontend/next.config.mts
git commit -m "feat(mdx): add .mdx to pageExtensions for content pages"

// ipsoc checked: 2026-05-05
// SoC: Pure UI layout wrapper for MDX content pages
 
import type { Metadata } from "next";
import { PageHero } from "~/components/features/sections/page-hero";
 
type PageMDXProps = {
  title: string;
  subtitle?: string;
  backgroundImage?: string;
  ctaText?: string;
  ctaHref?: string;
  children: React.ReactNode;
};
 
export function PageMDX({
  title,
  subtitle,
  backgroundImage,
  ctaText,
  ctaHref,
  children,
}: PageMDXProps) {
  return (
    <main className="min-h-screen bg-background text-foreground">
      {backgroundImage && (
        <PageHero
          title={title}
          subtitle={subtitle}
          backgroundImage={backgroundImage}
          ctaText={ctaText}
          ctaHref={ctaHref}
        />
      )}
 
      <section className="py-16 px-4">
        <div className="container mx-auto">
          {!backgroundImage && (
            <h1 className="text-4xl font-bold mb-8">{title}</h1>
          )}
          <div className="prose prose-invert max-w-none">{children}</div>
        </div>
      </section>
    </main>
  );
}

git add apps/frontend/components/features/sections/page-mdx.tsx
git commit -m "feat(mdx): add PageMDX wrapper component for content pages"

// ipsoc checked: 2026-05-05
// SoC: Pure UI — accordion for FAQ MDX pages
 
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "~/components/ui/accordion";
 
type FaqAccordionProps = {
  question: string;
  answer: string | string[];
};
 
export function FaqAccordion({ question, answer }: FaqAccordionProps) {
  return (
    <AccordionItem
      value={question}
      className="border-b border-border bg-surface rounded-lg px-4"
    >
      <AccordionTrigger className="text-left text-white hover:text-accent py-4">
        {question}
      </AccordionTrigger>
      <AccordionContent className="text-muted-foreground pb-4">
        {Array.isArray(answer) ? (
          <div className="space-y-2">
            {answer.map((paragraph, idx) => (
              <p key={idx}>{paragraph}</p>
            ))}
          </div>
        ) : (
          <p>{answer}</p>
        )}
      </AccordionContent>
    </AccordionItem>
  );
}

// This file is required for MDX support in Next.js App Router.
// It exports default components that MDX files can use without importing them.
import type { MDXComponents } from "mdx/types";
import { FaqAccordion } from "~/components/features/sections/accordions/faq-accordion";
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
    FaqAccordion,
  };
}

git add apps/frontend/components/features/sections/accordions/faq-accordion.tsx apps/frontend/mdx-components.tsx
git commit -m "feat(mdx): add FaqAccordion custom MDX component"

cat apps/frontend/app/\[locale\]/faq/page.tsx

---
title: "Frequently Asked Questions"
subtitle: "Find answers to common questions about the House of Legends experience."
backgroundImage: "/images/about-hol-hero-banner.jpg"
ctaText: "Book the Experience"
ctaHref: "/booking"
---
 
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "~/components/ui/accordion";
import { ContactInfoBlock } from "~/components/ui/contact-info-block";
 
## General
 
<AccordionItem
  value="q1"
  className="border-b border-border bg-surface rounded-lg px-4"
>
  <AccordionTrigger className="text-left text-white hover:text-accent py-4">
    Question here
  </AccordionTrigger>
  <AccordionContent className="text-muted-foreground pb-4">
    Answer here
  </AccordionContent>
</AccordionItem>
 
{/* ... more FAQ items ... */}
 
## Still have questions?
 
If you have any questions about performances, bookings or events, our team will be happy to assist you.
 
**Phone number:** +84 37 793 4387
**Email:** admin@houseoflegends.vn
**Operating hours:** 8 a.m - 5 p.m

rm apps/frontend/app/\[locale\]/faq/page.tsx

git add apps/frontend/app/\[locale\]/faq/
git commit -m "feat(mdx): migrate faq to MDX"

cat apps/frontend/app/\[locale\]/contact/page.tsx

---
title: "Contact Us"
subtitle: "Get in touch with House of Legends"
backgroundImage: "/images/contact-hero.jpg"
---
 
import { ContactForm } from "~/components/features/forms/contact-form";
import Image from "next/image";
 
## Get in Touch
 
House of Legends is located in Da Nang, Vietnam. We welcome visitors, performers, and event organizers to reach out to us.
 
**Address:** [actual address from page.tsx]
 
**Phone:** [actual phone from page.tsx]
 
**Email:** [actual email from page.tsx]
 
## Opening Hours
 
[Hours from page.tsx]
 
## Location
 
[Map or location description from page.tsx]
 
<ContactForm />

rm apps/frontend/app/\[locale\]/contact/page.tsx

git add apps/frontend/app/\[locale\]/contact/
git commit -m "feat(mdx): migrate contact to MDX"

git add apps/frontend/app/\[locale\]/host-an-event/
git commit -m "feat(mdx): migrate host-an-event to MDX"

git add apps/frontend/app/\[locale\]/private-events/
git commit -m "feat(mdx): migrate private-events to MDX"

git add apps/frontend/app/\[locale\]/experiences/our-evening/
git commit -m "feat(mdx): migrate our-evening to MDX"

git add apps/frontend/app/\[locale\]/experiences/dinner-theater/
git commit -m "feat(mdx): migrate dinner-theater to MDX"

git add apps/frontend/app/\[locale\]/experiences/creative-workshop/
git commit -m "feat(mdx): migrate creative-workshop to MDX"