MDX Migration Plan — Legal Pages + About

apps/frontend/
├── app/
│   ├── globals.css                              # MODIFY — add @plugin for typography
│   └── [locale]/
│       ├── about/
│       │   ├── page.tsx                         # MODIFY — thin wrapper, imports MDX
│       │   └── about-content.mdx                # CREATE — markdown content
│       └── legal/
│           ├── terms-of-use/
│           │   └── page.tsx → page.mdx          # REPLACE
│           ├── privacy-policy/
│           │   └── page.tsx → page.mdx          # REPLACE
│           ├── payment-policy/
│           │   └── page.tsx → page.mdx          # REPLACE
│           ├── return-policy/
│           │   └── page.tsx → page.mdx          # REPLACE
│           ├── shipping-policy/
│           │   └── page.tsx → page.mdx          # REPLACE
│           ├── complaint/
│           │   └── page.tsx → page.mdx          # REPLACE
│           ├── consumer-protection/
│           │   └── page.tsx → page.mdx          # REPLACE
│           └── dispute-resolution/
│               └── page.tsx → page.mdx           # REPLACE
└── components/ui/legal-page.tsx                  # VERIFY — LegalPage component props

@import "tailwindcss";
@plugin "@tailwindcss/typography";

git add apps/frontend/app/globals.css
git commit -m "feat(mdx): add @tailwindcss/typography plugin for prose styling"

---
title: "Terms of Use"
description: "House of Legends terms of use"
lastUpdated: "May 2, 2025"
---
 
import { LegalPage } from "@/components/ui/legal-page";
 
export const metadata = {
  title: "Terms of Use",
  description: "House of Legends terms of use",
};
 
<LegalPage title={metadata.title} lastUpdated={metadata.lastUpdated}>
 
## 1. Acceptance of Terms
 
By accessing and using The House of Legends website and services, you agree to be bound by these Terms of Use.
 
## 2. Booking and Reservations
 
When making a booking with us:
 
- You must provide accurate and complete information
- You are responsible for maintaining the confidentiality of your account
- We reserve the right to refuse service to anyone
- Cancellation policies apply as stated during booking
 
## 3. User Conduct
 
You agree not to:
 
- Use our services for any illegal purpose
- Attempt to gain unauthorized access to our systems
- Interfere with the proper functioning of our website
- Harass or abuse our staff or other customers
 
## 4. Intellectual Property
 
All content on our website, including text, graphics, logos, and images, is the property of The House of Legends and is protected by copyright laws.
 
## 5. Limitation of Liability
 
The House of Legends is not liable for any indirect, incidental, or consequential damages arising from your use of our services.
 
## 6. Changes to Terms
 
We reserve the right to modify these terms at any time. Continued use of our services constitutes acceptance of modified terms.
 
## 7. Contact Information
 
For questions about these Terms of Use, please contact us at:
 
**Email:** hamza@houseoflegends.vn
**Phone:** +84392649144
 
</LegalPage>

rm apps/frontend/app/\[locale\]/legal/terms-of-use/page.tsx

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

cat apps/frontend/app/\[locale\]/legal/privacy-policy/page.tsx

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

cat apps/frontend/app/\[locale\]/legal/payment-policy/page.tsx

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

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

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

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

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

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

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

---
title: "About House of Legends"
description: "A cultural theatre space in Da Nang dedicated to performance, storytelling and creative collaboration."
---
 
## Our Story
 
House of Legends was created by a couple who chose to build their life in Da Nang. Originally from Saigon, we came to this city with a shared passion for culture, performance and creative spaces.
 
During our travels and artistic experiences, we often found inspiration in intimate venues where artists and audiences could connect closely. We dreamed of creating a place that would bring together theatre, storytelling, music and cultural expression in a unique environment.
 
**That vision became House of Legends.**
 
## A Place for Culture & Creativity
 
House of Legends is designed as an intimate theatre space where performances, cultural experiences and artistic collaborations can take place in a close and immersive atmosphere.
 
With only 32 seats, the venue allows audiences to experience performances in a way that feels personal and authentic.
 
The project also celebrates Vietnamese culture through storytelling, performance and culinary experiences inspired by local traditions.
 
## Supporting the Creative Community
 
House of Legends is more than a theatre venue. It is also a platform that welcomes artists, performers and creative professionals who wish to share their work with audiences in Da Nang.
 
Through performances, workshops and collaborations, we aim to contribute to the growth of a vibrant artistic community and create opportunities for cultural exchange.
 
## Our Vision
 
Our vision is to create a space where art, culture and hospitality come together.
 
A place where visitors can discover Vietnamese stories and creative expression, and where artists can present meaningful performances in an intimate setting.

// ipsoc checked: 2026-04-27
// SoC: Static presentation page - data inline (migration artifact), no business logic
 
/**
 * About — migrated from WordPress about-hol.php
 * Source: apps/frontend/raw/about-hol.php
 * Source lines: 145-260 (content sections)
 *
 * Migration notes:
 *   - Content extracted to about-content.mdx (2026-05-04)
 *   - Image paths corrected to migrated assets in /images/
 *   - "Perform at House of Legends" CTA links to artist-performances page
 *   - Vision section with background image preserved
 *   - Static content (no CMS integration)
 */
 
import type { Metadata } from "next";
import Image from "next/image";
import { LocaleLink } from "@/components/ui/locale-link";
import { PageHero } from "@/components/ui/page-hero";
import { Button } from "@/components/ui/button";
import { AboutContent } from "./about-content";
 
export const metadata: Metadata = {
  title: "About House of Legends | House of Legends",
  description:
    "A cultural theatre space in Da Nang dedicated to performance, storytelling and creative collaboration.",
};
 
const storyImage = "/images/about-hol-1.jpg";
const cultureImage = "/images/about-hol-2.jpg";
const communityImage = "/images/about-hol-3.jpg";
const visionImage = "/images/about-hol-hero-banner.jpg";
 
export default function AboutPage() {
  return (
    <main className="min-h-screen bg-background text-foreground">
      <PageHero
        title="About House of Legends"
        subtitle="A cultural theatre space in Da Nang dedicated to performance, storytelling and creative collaboration."
        backgroundImage="/images/about-hol-hero-banner.jpg"
      />
 
      {/* Our Story */}
      <section className="py-20 px-4">
        <div className="container mx-auto">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <AboutContent section="story" />
            </div>
            <div className="relative aspect-[4/3] rounded-lg overflow-hidden">
              <Image
                src={storyImage}
                alt="House of Legends interior"
                fill
                className="object-cover"
              />
            </div>
          </div>
        </div>
      </section>
 
      {/* Culture & Creativity */}
      <section className="py-20 px-4 bg-surface">
        <div className="container mx-auto">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="order-2 md:order-1 relative aspect-[4/3] rounded-lg overflow-hidden">
              <Image
                src={cultureImage}
                alt="Performance at House of Legends"
                fill
                className="object-cover"
              />
            </div>
            <div className="order-1 md:order-2">
              <AboutContent section="culture" />
            </div>
          </div>
        </div>
      </section>
 
      {/* Supporting the Creative Community */}
      <section className="py-20 px-4">
        <div className="container mx-auto">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <AboutContent section="community" />
              <div className="mt-8">
                <Button
                  asChild
                  className="bg-accent hover:bg-accent-hover text-accent-foreground"
                >
                  <LocaleLink href="/experiences/artist-performances">
                    Perform at House of Legends
                  </LocaleLink>
                </Button>
              </div>
            </div>
            <div className="relative aspect-[4/3] rounded-lg overflow-hidden">
              <Image
                src={communityImage}
                alt="Creative community at House of Legends"
                fill
                className="object-cover"
              />
            </div>
          </div>
        </div>
      </section>
 
      {/* Vision */}
      <section className="py-20 px-4">
        <div className="container mx-auto">
          <div className="relative rounded-lg overflow-hidden">
            <div className="absolute inset-0">
              <Image
                src={visionImage}
                alt="House of Legends vision"
                fill
                className="object-cover"
              />
              <div className="absolute inset-0 bg-black/70" />
            </div>
            <div className="relative z-10 py-20 px-8 text-center">
              <AboutContent section="vision" />
            </div>
          </div>
        </div>
      </section>
 
      {/* Visit CTA */}
      <section className="py-20 px-4">
        <div className="container mx-auto text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
            Visit House of Legends
          </h2>
          <p className="text-foreground text-lg mb-8">
            Experience Vietnamese theatre, cuisine and cocktails in an intimate
            setting.
          </p>
          <Button
            asChild
            size="lg"
            className="bg-accent hover:bg-accent-hover text-accent-foreground"
          >
            <LocaleLink href="/booking">Book the Experience</LocaleLink>
          </Button>
        </div>
      </section>
    </main>
  );
}

---
title: "About House of Legends"
description: "A cultural theatre space in Da Nang dedicated to performance, storytelling and creative collaboration."
---
 
import { LocaleLink } from "@/components/ui/locale-link";
import { Button } from "@/components/ui/button";
 
export const metadata = {
  title: "About House of Legends | House of Legends",
  description:
    "A cultural theatre space in Da Nang dedicated to performance, storytelling and creative collaboration.",
};
 
## Our Story
 
House of Legends was created by a couple who chose to build their life in Da Nang. Originally from Saigon, we came to this city with a shared passion for culture, performance and creative spaces.
 
During our travels and artistic experiences, we often found inspiration in intimate venues where artists and audiences could connect closely. We dreamed of creating a place that would bring together theatre, storytelling, music and cultural expression in a unique environment.
 
**That vision became House of Legends.**
 
## A Place for Culture & Creativity
 
House of Legends is designed as an intimate theatre space where performances, cultural experiences and artistic collaborations can take place in a close and immersive atmosphere.
 
With only 32 seats, the venue allows audiences to experience performances in a way that feels personal and authentic.
 
The project also celebrates Vietnamese culture through storytelling, performance and culinary experiences inspired by local traditions.
 
## Supporting the Creative Community
 
House of Legends is more than a theatre venue. It is also a platform that welcomes artists, performers and creative professionals who wish to share their work with audiences in Da Nang.
 
Through performances, workshops and collaborations, we aim to contribute to the growth of a vibrant artistic community and create opportunities for cultural exchange.
 
## Our Vision
 
Our vision is to create a space where art, culture and hospitality come together.
 
A place where visitors can discover Vietnamese stories and creative expression, and where artists can present meaningful performances in an intimate setting.

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