99 lines
5.0 KiB
PHP
99 lines
5.0 KiB
PHP
<?php
|
|
/**
|
|
* Template Name: 品牌故事
|
|
*
|
|
* MING 明命完整品牌故事頁：完整理念、五大意象、因緣橫幅。
|
|
*
|
|
* @package MING
|
|
*/
|
|
|
|
get_header();
|
|
?>
|
|
|
|
<!-- 頁首 -->
|
|
<section class="page-hero">
|
|
<div class="wrap">
|
|
<p class="eyebrow reveal">BRAND STORY</p>
|
|
<h2 class="h2 reveal">MING 明命 · 品牌故事</h2>
|
|
<p class="page-hero-sub reveal">明亮生命，自然連結 —— 一枚標誌裡的五個信念</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 品牌理念（完整版） -->
|
|
<section class="section" id="philosophy">
|
|
<div class="wrap philo-grid">
|
|
<div class="philo-logo reveal">
|
|
<img src="<?php echo esc_url( get_template_directory_uri() . '/assets/img/' ); ?>logo.png" alt="MING 品牌標誌" width="847" height="811">
|
|
<p class="caption">MING — 取「明」與「命」之意</p>
|
|
</div>
|
|
<div class="philo-copy reveal">
|
|
<p class="eyebrow">BRAND PHILOSOPHY</p>
|
|
<h2 class="h2">MING，不止是名字，<br>而是對「明」與「命」的詮釋</h2>
|
|
<div class="divider"></div>
|
|
<p>外圓以時鐘與田地為意象，象徵時間的流轉與土地的循環，表達人與天地、時間與萬物之間持續而深刻的連結。</p>
|
|
<p>圓形之中以「三」為概念，延伸出生物與萬物的意象——三生萬物，萬物由自然孕育，也在自然之中生長、循環與延續。中心如同一輪太陽，象徵光、溫度與生命，代表希望與明亮。</p>
|
|
<p>「明」，是光明，是看見，是對美好生活的嚮往；「命」，是生命，是人與自然之間的連結，也是萬物生生不息的延續。</p>
|
|
<div class="keywords">
|
|
<div class="kw"><b>明</b><span>光明 · 看見</span></div>
|
|
<div class="kw"><b>命</b><span>生命 · 連結</span></div>
|
|
<div class="kw"><b>三</b><span>三生萬物</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 五大意象 -->
|
|
<section class="section symbols" id="symbols">
|
|
<div class="wrap">
|
|
<p class="eyebrow reveal">FIVE SYMBOLS</p>
|
|
<h2 class="h2 reveal">藏在一枚標誌裡的五個信念</h2>
|
|
<div class="symbol-row reveal">
|
|
<div class="symbol">
|
|
<svg viewBox="0 0 64 64"><circle cx="32" cy="32" r="22"/><line x1="32" y1="10" x2="32" y2="18"/><line x1="54" y1="32" x2="46" y2="32"/><line x1="32" y1="54" x2="32" y2="46"/><line x1="10" y1="32" x2="18" y2="32"/><circle cx="32" cy="32" r="2.4"/></svg>
|
|
<h3>時間</h3><p>時光流轉，<br>生生不息。</p>
|
|
</div>
|
|
<div class="symbol">
|
|
<svg viewBox="0 0 64 64"><path d="M12 26 q10 -8 20 0 q10 8 20 0"/><path d="M12 34 q10 -8 20 0 q10 8 20 0"/><path d="M12 42 q10 -8 20 0 q10 8 20 0"/></svg>
|
|
<h3>土地</h3><p>自然孕育，<br>萬物生長。</p>
|
|
</div>
|
|
<div class="symbol">
|
|
<svg viewBox="0 0 64 64"><line x1="16" y1="22" x2="48" y2="22"/><line x1="16" y1="32" x2="48" y2="32"/><line x1="16" y1="42" x2="48" y2="42"/></svg>
|
|
<h3>三生萬物</h3><p>生物萬象，<br>循環延續。</p>
|
|
</div>
|
|
<div class="symbol">
|
|
<svg viewBox="0 0 64 64"><circle cx="32" cy="32" r="13"/><line x1="32" y1="8" x2="32" y2="14"/><line x1="32" y1="50" x2="32" y2="56"/><line x1="8" y1="32" x2="14" y2="32"/><line x1="50" y1="32" x2="56" y2="32"/><line x1="15" y1="15" x2="19" y2="19"/><line x1="45" y1="45" x2="49" y2="49"/><line x1="49" y1="15" x2="45" y2="19"/><line x1="19" y1="45" x2="15" y2="49"/></svg>
|
|
<h3>太陽與光</h3><p>光明溫暖，<br>希望明亮。</p>
|
|
</div>
|
|
<div class="symbol">
|
|
<svg viewBox="0 0 64 64"><circle cx="32" cy="32" r="22"/><text x="32" y="28" text-anchor="middle" font-size="15" fill="var(--green)" stroke="none" font-family="'Noto Serif TC',serif">明</text><text x="32" y="48" text-anchor="middle" font-size="15" fill="var(--green)" stroke="none" font-family="'Noto Serif TC',serif">命</text></svg>
|
|
<h3>明・命</h3><p>生命因光而明，<br>萬物因自然而生。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 因緣橫幅 -->
|
|
<section class="fate-banner">
|
|
<img src="<?php echo esc_url( get_template_directory_uri() . '/assets/img/' ); ?>banner-fate.jpg" alt="山巒晨霧，光的意象">
|
|
<div class="veil"></div>
|
|
<div class="fate-copy">
|
|
<div class="inner reveal">
|
|
<p class="mark">FATE & CONNECTION</p>
|
|
<h2>命，還有因緣的意義</h2>
|
|
<p>「命」，不只是生命的起點與結束，更是無數因緣條件交織而成的軌跡。我們所遇見的一切人、事、物，都是因緣合和而來，彼此影響、相互成就。珍惜每一段相遇，善待每一個當下——讓每一件事物，都擁有屬於自己的光。</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 結語 -->
|
|
<section class="closing">
|
|
<div class="reveal">
|
|
<p class="q">讓每一件事物<br>都擁有屬於<em>自己的光</em></p>
|
|
<p class="sub">ENJOY YOUR DRINKING — MING</p>
|
|
<a class="cta" href="<?php echo esc_attr( ming_shop_url() ); ?>">逛逛我們的商品</a>
|
|
</div>
|
|
</section>
|
|
|
|
<?php
|
|
get_footer();
|