|
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="500" viewBox="0 0 1200 500"> |
|
<!-- Background --> |
|
<rect width="1200" height="500" fill="#f8fffe"/> |
|
|
|
<!-- Left Content --> |
|
<text x="80" y="120" font-family="Arial, sans-serif" font-size="48" font-weight="bold" fill="#005047"> |
|
線上線下 |
|
</text> |
|
<text x="80" y="180" font-family="Arial, sans-serif" font-size="48" font-weight="bold" fill="#005047"> |
|
無縫接軌 |
|
</text> |
|
|
|
<text x="80" y="260" font-family="Arial, sans-serif" font-size="22" fill="#666"> |
|
義工用手機報名 |
|
</text> |
|
<text x="80" y="295" font-family="Arial, sans-serif" font-size="22" fill="#666"> |
|
團隊用後台管理 |
|
</text> |
|
<text x="80" y="330" font-family="Arial, sans-serif" font-size="22" fill="#666"> |
|
實時同步，零延遲 |
|
</text> |
|
|
|
<!-- Feature Pills --> |
|
<rect x="80" y="370" width="130" height="36" rx="18" fill="#e8f5f3"/> |
|
<text x="145" y="396" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#005047">📱 手機報名</text> |
|
|
|
<rect x="230" y="370" width="130" height="36" rx="18" fill="#e8f5f3"/> |
|
<text x="295" y="396" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#005047">💻 後台管理</text> |
|
|
|
<rect x="380" y="370" width="130" height="36" rx="18" fill="#e8f5f3"/> |
|
<text x="445" y="396" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#005047">⚡ 實時同步</text> |
|
|
|
<!-- Right - Phone Mockup --> |
|
<rect x="720" y="60" width="140" height="280" rx="20" fill="#333"/> |
|
<rect x="730" y="70" width="120" height="260" rx="15" fill="url(#phoneGrad)"/> |
|
<defs> |
|
<linearGradient id="phoneGrad" x1="0%" y1="0%" x2="100%" y2="100%"> |
|
<stop offset="0%" style="stop-color:#005047"/> |
|
<stop offset="100%" style="stop-color:#00897B"/> |
|
</linearGradient> |
|
</defs> |
|
<text x="790" y="210" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="white">📱 報名頁面</text> |
|
|
|
<!-- Right - Laptop Mockup --> |
|
<rect x="900" y="120" width="240" height="160" rx="8" fill="#333"/> |
|
<rect x="910" y="130" width="220" height="140" fill="white"/> |
|
<rect x="900" y="280" width="270" height="12" rx="6" fill="#444"/> |
|
|
|
<!-- Screen content --> |
|
<rect x="920" y="145" width="200" height="15" rx="3" fill="#e0e0e0"/> |
|
<rect x="920" y="170" width="150" height="15" rx="3" fill="#005047"/> |
|
<rect x="920" y="195" width="180" height="10" rx="2" fill="#e0e0e0"/> |
|
<rect x="920" y="215" width="180" height="10" rx="2" fill="#e0e0e0"/> |
|
<rect x="920" y="235" width="100" height="25" rx="4" fill="#FF6B35"/> |
|
</svg> |
