diff --git a/templates/phase_z2/families/bim_issues_quadrant_four.html b/templates/phase_z2/families/bim_issues_quadrant_four.html new file mode 100644 index 0000000..a13ea9b --- /dev/null +++ b/templates/phase_z2/families/bim_issues_quadrant_four.html @@ -0,0 +1,223 @@ + +{# +───────────────────────────────────────────────────────────────────────────── +Visual Provenance — figma_to_html_agent/blocks/1171281193/index.html +───────────────────────────────────────────────────────────────────────────── +PROMOTED (Figma 1:1 변환물 → 그대로 사용): + - card-bg gradient (TL/TR top→bottom) : line 49 → linear-gradient(180deg, #f2f2f2 0%, #ffffff 100%) + - card-bg gradient (BL/BR bottom→top) : line 53-54 → linear-gradient(0deg, #f2f2f2 0%, #ffffff 100%) + - header-ribbon (TL/BL — 갈색) : line 75, 79 → linear-gradient(270deg, rgba(165,161,150,0.5), #39321E 73%) + - header-ribbon (TR/BR — 청록) : line 83, 87 → linear-gradient(90deg, rgba(41,107,85,0.5), #032118) + - red headline color : line 127 → #ff0000 + - body-text color : line 136 → #000 + - center-quote (Rome wasn't Built in a day!) : line 233 (decorative, MDX 4-2.2 의 핵심 메시지로 대체 가능) + - bullet marker : line 241 → "•" + - card 모서리 radius : line 51-54 → 50px (top corners TL/TR, bottom corners BL/BR) + +NOT PROMOTED (Figma 데코지만 MDX 04-2.2 에 없는 콘텐츠): + - center-quote 의 영문 ("Rome wasn't Built in a day!") — slot_payload.center_quote 로 동적 (없으면 omit) + +ADAPTED (Figma px / native size 무시, zone-compatible): + - 2226×1766 inner + zoom 0.575 → CSS grid 2×2 (no zoom, no fixed inner) + - Figma 60px ribbon font / 55px headline / 42px body → token-fixed (zone-title 13 / sub-title 12 / body 11) + - 1080px card width / 119px ribbon height → grid 1fr 1fr / 22px ribbon + - 644×584 center 원 → 90px 원 (zone-fit) + - absolute positioning (4 quadrants) → grid-template-areas +───────────────────────────────────────────────────────────────────────────── +slots: title, center_quote (옵션), quadrant_{1,2,3,4}_{label, body} + - quadrant 1 = TL (정책 집행) + - quadrant 2 = TR (수행 개념) + - quadrant 3 = BL (근본 취지의 이해부족) + - quadrant 4 = BR (지속적 투자 의지 부재) + - body 형식 = text-line family 호환 HTML (text_lines list 또는 pre-rendered string) +#} + + + +
+ {% if slot_payload.title %} +
{{ slot_payload.title }}
+ {% endif %} + +
+ + {# Quadrant 1 (TL) — 정책 집행 (갈색 ribbon) #} +
+ {% if slot_payload.quadrant_1_label %} +
{{ slot_payload.quadrant_1_label | safe }}
+ {% endif %} + {% if slot_payload.quadrant_1_headline or slot_payload.quadrant_1_body %} +
+ {% if slot_payload.quadrant_1_headline %}
{{ slot_payload.quadrant_1_headline | safe }}
{% endif %} + {% for line in slot_payload.quadrant_1_body %}
{{ line.text | safe }}
{% endfor %} +
+ {% endif %} +
+ + {# Quadrant 2 (TR) — 수행 개념 (청록 ribbon) #} +
+ {% if slot_payload.quadrant_2_label %} +
{{ slot_payload.quadrant_2_label | safe }}
+ {% endif %} + {% if slot_payload.quadrant_2_headline or slot_payload.quadrant_2_body %} +
+ {% if slot_payload.quadrant_2_headline %}
{{ slot_payload.quadrant_2_headline | safe }}
{% endif %} + {% for line in slot_payload.quadrant_2_body %}
{{ line.text | safe }}
{% endfor %} +
+ {% endif %} +
+ + {# Quadrant 3 (BL) — 근본 취지의 이해부족 (갈색 ribbon) #} +
+ {% if slot_payload.quadrant_3_label %} +
{{ slot_payload.quadrant_3_label | safe }}
+ {% endif %} + {% if slot_payload.quadrant_3_headline or slot_payload.quadrant_3_body %} +
+ {% if slot_payload.quadrant_3_headline %}
{{ slot_payload.quadrant_3_headline | safe }}
{% endif %} + {% for line in slot_payload.quadrant_3_body %}
{{ line.text | safe }}
{% endfor %} +
+ {% endif %} +
+ + {# Quadrant 4 (BR) — 지속적 투자 의지 부재 (청록 ribbon) #} +
+ {% if slot_payload.quadrant_4_label %} +
{{ slot_payload.quadrant_4_label | safe }}
+ {% endif %} + {% if slot_payload.quadrant_4_headline or slot_payload.quadrant_4_body %} +
+ {% if slot_payload.quadrant_4_headline %}
{{ slot_payload.quadrant_4_headline | safe }}
{% endif %} + {% for line in slot_payload.quadrant_4_body %}
{{ line.text | safe }}
{% endfor %} +
+ {% endif %} +
+ + {# Center quote — 옵션 #} + {% if slot_payload.center_quote %} +
+
{{ slot_payload.center_quote | safe }}
+
+ {% endif %} + +
+
diff --git a/templates/phase_z2/families/process_product_two_way.html b/templates/phase_z2/families/process_product_two_way.html new file mode 100644 index 0000000..ab06f8c --- /dev/null +++ b/templates/phase_z2/families/process_product_two_way.html @@ -0,0 +1,286 @@ + +{# +───────────────────────────────────────────────────────────────────────────── +Visual Provenance — figma_to_html_agent/blocks/1171281210/index.html +───────────────────────────────────────────────────────────────────────────── +PROMOTED (Figma 1:1 변환물 → 그대로 사용): + - banner-left text gradient : lines 101-104 → linear-gradient(90deg, rgb(62,53,35), rgb(62,53,35)) on linear-gradient(180deg, rgb(41,107,85), rgb(18,51,40)) + - banner-right text gradient : lines 110-113 → linear-gradient(90deg, rgb(34,95,74), rgb(34,95,74)) on linear-gradient(180deg, rgb(41,107,85), rgb(18,51,40)) + - section-title-left color : line 125 → #5C3714 (갈) + - section-title-right color : line 126 → #084C56 (짙은 청록) + - bullets text : line 136 → 700 / #000 / list-disc + - banner SVG asset (left) : line 196 → assets/header_left_bg.svg (좌측 180° rotate) + - banner SVG asset (right) : line 197 → assets/header_right_bg.svg + - body bg SVG asset : line 193 → assets/body_bg.svg (3845×933 상단) + - arrow PNG asset : line 220 → assets/arrow.png (AS-IS → TO-BE) + - footnote (＊) inline : lines 144, 281-283 → 25.8px small + indent + +ADAPTED (Figma px / native 무시, zone flex 재구성): + - 3848×1388 inner + zoom 0.33270 → flex layout (no zoom, no fixed inner) + - 70px banner / 50px section / 40px body→ var(--font-sub-title) / 8-10px / var(--font-caption) + - absolute left/top px → flex grid (no absolute) + - banner heights 142px + body 933px → 비율 기반 flex (banner ~28%, body ~72%) + - assets 1921×142 / 3845×933 sizes → object-fit cover, 비율 유지 +───────────────────────────────────────────────────────────────────────────── +slots: title (omitted), banner_left, banner_right, + process.sections[3] (s[0]: AS-IS/TO-BE, s[1-2]: bullets), + product.sections[3] (bullets, optional footnote/sub_title) +#} + + + +
+ + {# H2 mid-heading — section.title 렌더 (frame 13 의 f13b__title 과 동일 위계) #} +
{{ slot_payload.title }}
+ + {# Banners (PROMOTED 구조 + assets line 196,197 + gradient lines 101-113) #} +
+
+ +
{{ slot_payload.banner_left }}
+
+
+ +
{{ slot_payload.banner_right }}
+
+
+ + {# Body — 6 cell grid (row-major: row 1 좌/우, row 2 좌/우, row 3 좌/우). + row 별 height = max(좌, 우) → divider Y 정렬 #} +
+ + +
+ + {# ───── Row 1: section 1 ───── #} + {% set s1 = slot_payload.process.sections[0] %} +
+ {% if s1.title %} +
{{ s1.title | safe }}
+ {% if s1.transforms %} +
+
+ AS-IS + + TO-BE +
+
+ {% for t in s1.transforms %} +
+
{{ t.from | safe }}
+
➜
+
{{ t.to | safe }}
+
+ {% endfor %} +
+
+ {% elif s1.text_lines %} + {% for line in s1.text_lines %}
{{ line.text | safe }}
{% endfor %} + {% endif %} + {% endif %} +
+ + {% set p1 = slot_payload.product.sections[0] %} +
+ {% if p1.title %} +
{{ p1.title | safe }}
+ {% for line in p1.text_lines %}
{{ line.text | safe }}
{% endfor %} + {% endif %} +
+ + {# ───── Row 2: section 2 ───── #} + {% set s2 = slot_payload.process.sections[1] %} +
+ {% if s2.title %} +
{{ s2.title | safe }}
+ {% for line in s2.text_lines %}
{{ line.text | safe }}
{% endfor %} + {% endif %} +
+ + {% set p2 = slot_payload.product.sections[1] %} +
+ {% if p2.title %} +
{{ p2.title | safe }}
+ {% for line in p2.text_lines %}
{{ line.text | safe }}
{% endfor %} + {% if p2.footnote %} +
＊ {{ p2.footnote | safe }}
+ {% endif %} + {% endif %} +
+ + {# ───── Row 3: section 3 ───── #} + {% set s3 = slot_payload.process.sections[2] %} +
+ {% if s3.title %} +
{{ s3.title | safe }}
+ {% for line in s3.text_lines %}
{{ line.text | safe }}
{% endfor %} + {% endif %} +
+ + {% set p3 = slot_payload.product.sections[2] %} +
+ {% if p3.title %} +
{{ p3.title | safe }}{% if p3.sub_title %}{{ p3.sub_title | safe }}{% endif %}
+ {% for line in p3.text_lines %}
{{ line.text | safe }}
{% endfor %} + {% endif %} +
+ +
+ +
+
diff --git a/templates/phase_z2/families/three_parallel_requirements.html b/templates/phase_z2/families/three_parallel_requirements.html new file mode 100644 index 0000000..506305a --- /dev/null +++ b/templates/phase_z2/families/three_parallel_requirements.html @@ -0,0 +1,158 @@ + +{# +───────────────────────────────────────────────────────────────────────────── +Visual Provenance — figma_to_html_agent/blocks/1171281190/index.html +───────────────────────────────────────────────────────────────────────────── +PROMOTED (Figma 1:1 변환물 → 그대로 사용): + - tech bar gradient : line 71 → linear-gradient(180deg, #0D78D0 0%, #023056 100%) + - people bar gradient : line 72 → linear-gradient(180deg, #FF9A23 0%, #CC5200 100%) + - nature bar gradient : line 73 → linear-gradient(180deg, #39BE49 21%, #23742C 100%) + - tech heading text : line 123 → linear-gradient(180deg, #0D78D0, #134D7F) + - people heading text : line 124 → linear-gradient(180deg, #FE900C, #D18B37) + - nature heading text : line 125 → linear-gradient(180deg, #3CA649, #23742C) + - title gradient : line 40 → linear-gradient(180deg, #000, #883700) + - desc color : line 118 → #3E3523 + - col 외곽 border : line 57 → 2px solid #000 (top + bottom) + - col-section divider : line 103 → 2px dashed #000 + +NOT PROMOTED (Figma 데코지만 MDX 에 없으므로 주입 X): + - 한자 (技/術 / 人/材 / 天/地) ← MDX 에 없는 content. Figma frame 의 visual 데코일 뿐. + +ADAPTED: + - Figma px / native size 무시, flex layout + - Figma 70/50/45/35px fonts → token-fixed (zone-title 13 / sub-title 12 / body 11 / caption 10) + - desc
-joined → nested