md / home / studio-trips.bridge.plan.md
Molino⺢Pro

studio-trips.bridge.plan

Master Codebase Guidebook
Markdown + HTML Dev-Docs Renderer - Frontend Client Module

Default Index
Open README.md
Root: README.mdhome
Milestones
⬆ Parent folder📁 archive📁 project-branding📁 projects📁 sheet-index📁 users📝 README📝 studio-trips.bridge.plan
H1NAVIGATION SYSTEM — IMPLEMENTATION SLICE (PLUGGABLE)

version: 2026.1.exec

scope: navigation / routing / trips-surface / studio-bridge

status: ready-to-implement

---

H11\. ROUTE TREE (FINAL)

```txt

/studio

/skills

/practice

/experience

/travel

/trips

/new

/featured

/[tripId]

/[tripId]/schedule

/professionals

RULES:

  • NO /travel or /trips in main nav
  • /trips = standalone root (commercial surface)

  • /studio/* = authored layer only

H12\. TOP NAV COMPONENT
H2/components/navigation/MainNav.tsx

"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"

const links = [
{ href: "/studio", label: "Home" },
{ href: "/studio/skills", label: "Skills" },
{ href: "/studio/practice", label: "Practice" },
{ href: "/studio/experience", label: "Experience" },
]

export function MainNav() {
const pathname = usePathname()

return (  
  \<nav className="flex gap-6 text-sm"\>  
    {links.map((l) \=\> {  
      const active \= pathname.startsWith(l.href)  
      return (  
        \<Link  
          key={l.href}  
          href={l.href}  
          className={\`transition-opacity ${  
            active ? "opacity-100 underline" : "opacity-60 hover:opacity-100"  
          }\`}  
        \>  
          {l.label}  
        \</Link\>  
      )  
    })}  
  \</nav\>  
)

}

H13\. EXPERIENCE → TRAVEL EXIT (STRICT)
H2/app/(studio)/experience/components/ExperienceExit.tsx

import Link from "next/link"

export function ExperienceExit() {
return (
<div className="grid gap-4 md:grid-cols-3 mt-12">
<Link href="/studio/travel" className="card">
Travel
</Link>

    \<Link href="/trips" className="card"\>  
      Trips  
    \</Link\>  

    \<Link href="/trips/professionals" className="card"\>  
      Collaborations  
    \</Link\>  
  \</div\>  
)

}

ENFORCED:

  • max 3 exits

  • no additional branching

H14\. TRAVEL BRIDGE PAGE
H2/app/(studio)/travel/page.tsx

import Link from "next/link"

export default function TravelPage() {
return (
<div className="max-w-3xl mx-auto py-20">
<h1 className="text-3xl font-semibold mb-6">
Travel as Structure
</h1>

    \<p className="mb-10 opacity-80"\>  
      Routes, rhythms, and formats. This is where journeys take shape  
      before becoming trips.  
    \</p\>  

    \<div className="grid gap-6"\>  
      \<Link href="/trips/featured" className="card"\>  
        Join Featured Trips  
      \</Link\>  

      \<Link href="/trips/new" className="card"\>  
        Plan Your Trip  
      \</Link\>  

      \<Link href="/trips/professionals" className="card"\>  
        Work With Us  
      \</Link\>  
    \</div\>  
  \</div\>  
)

}

H15\. TRIPS LANDING — 4 LANES
H2/app/(pages)/trips/page.tsx

import Link from "next/link"
import { TripsStudioBridge } from "./components/TripsStudioBridge"

export default function TripsPage() {
return (
<div className="max-w-5xl mx-auto py-20">
<h1 className="text-4xl font-semibold mb-10">
Al-Andalus Experience
</h1>

    \<div className="grid gap-6 md:grid-cols-2"\>  
      \<Link href="/trips/new" className="card"\>  
        Plan Flexible Trip  
      \</Link\>  

      \<Link href="/trips/featured" className="card"\>  
        Join Featured Trip  
      \</Link\>  

      \<Link href="/trips" className="card"\>  
        Book City Tours  
      \</Link\>  

      \<Link href="/trips/professionals" className="card"\>  
        Collaborations  
      \</Link\>  
    \</div\>  

    \<TripsStudioBridge /\>  
  \</div\>  
)

}

H16\. FOOTER BRIDGE
H2/app/(pages)/trips/components/TripsStudioBridge.tsx

import Link from "next/link"

export function TripsStudioBridge() {
return (
<div className="text-center text-sm opacity-70 py-16">
<p>
Developed by{" "}
<Link href="/studio" className="underline">
Molino Practice
</Link>
</p>

    \<p className="mt-2"\>  
      From the wider studio — writing, skills, practice, and cultural travel  
    \</p\>  

    \<div className="mt-4 flex justify-center gap-4 text-xs"\>  
      \<Link href="/studio"\>Studio\</Link\>  
      \<Link href="/studio/skills"\>Skills\</Link\>  
      \<Link href="/studio/practice"\>Practice\</Link\>  
      \<Link href="/studio/experience"\>Experience\</Link\>  
    \</div\>  
  \</div\>  
)

}

H17\. CTA ENFORCEMENT (GLOBAL)
H2/lib/navigation/ctaMap.ts

export const CTA_MAP = {
planTrip: "/trips/new",
joinTrip: "/trips/featured",
partners: "/trips/professionals",
}

RULE:

  • all CTAs must use this map

  • no freeform hrefs in UI

H18\. HARD GUARDS
  • NO generic forms anywhere
  • NO ambiguous CTA text
  • NO /travel or /trips in top nav
  • /trips = ONLY commercial surface
  • /studio = NEVER commercial

  • /studio/travel = explanation only (no mutation)

H19\. VERIFICATION CHECKLIST
  • top nav = 4 items only
  • /studio/experience shows exactly 3 exits
  • /studio/travel exists and routes correctly
  • /trips shows 4 lanes
  • all CTAs use CTA_MAP
  • footer bridge present in /trips
  • reverse links to /studio/* exist

  • no mutations outside actions

H110\. POSITION IN SYSTEM

This navigation layer sits above:

  • Trips module (commercial engine)
  • Offer → Order pipeline
  • Projection system (Docs / Calendar)

It controls entry and intent routing, not execution.

H1SUMMARY (NON-SOLUTION)
  • Navigation enforces domain separation: Studio vs Trips
  • Experience = constrained gateway (3 exits only)
  • Travel = explanation bridge (no logic)
  • Trips = execution + commerce surface
  • CTA system must map directly to real flows (planner, featured, partners)
  • Footer bridge is required to reconnect commercial surface to authored layer