Deploy FT & NYT Hybrid Broadsheet UI overhaul to production
This commit is contained in:
WMJ Ismail
@@ -0,0 +1,74 @@
|
||||
{{!-- FT & NYT Hybrid Broadsheet — Computational Engines & Horizontal Topic Ribbons --}}
|
||||
<section class="ft-broadsheet-engines-ribbons" aria-label="Computational Engines and Topic Hubs">
|
||||
|
||||
{{!-- 1. COMPUTATIONAL SUITE DOCK --}}
|
||||
<div class="ft-comp-dock">
|
||||
<div class="ft-comp-header">
|
||||
<div class="ft-comp-titles">
|
||||
<h3 class="ft-comp-title">The Falah Computational Suite</h3>
|
||||
<p class="ft-comp-subtitle">Deterministic Shariah engines executing AAOIFI 2026.4 standards and Islamic estate distribution algorithms</p>
|
||||
</div>
|
||||
<div class="ft-comp-status">
|
||||
<span class="ft-status-pill">Active Engines • Live Telemetry</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ft-comp-grid">
|
||||
<div class="ft-comp-card">
|
||||
<span class="ft-dock-badge">Succession Protocol</span>
|
||||
<h4 class="ft-dock-name">Faraid Estate Distribution</h4>
|
||||
<p class="ft-dock-desc">Mathematical calculation of Islamic inheritance shares under Ashab al-Furud, Asabah, and Rad. Automated Radd, Awl, and spouse shares.</p>
|
||||
<a href="/calculator/" class="ft-dock-link">Launch Engine →</a>
|
||||
</div>
|
||||
|
||||
<div class="ft-comp-card">
|
||||
<span class="ft-dock-badge">Purification Engine</span>
|
||||
<h4 class="ft-dock-name">Portfolio Zakat & Dividend Engine</h4>
|
||||
<p class="ft-dock-desc">Calculates operational zakat liability across equities, cash, private equity, and gold, with automated dividend purification deductions.</p>
|
||||
<a href="/zakat/" class="ft-dock-link">Launch Engine →</a>
|
||||
</div>
|
||||
|
||||
<div class="ft-comp-card">
|
||||
<span class="ft-dock-badge">Family Governance</span>
|
||||
<h4 class="ft-dock-name">The Virtual Family Office</h4>
|
||||
<p class="ft-dock-desc">Interactive curriculum and templates for Muslim family wealth preservation, Waqf covenants, and emergency estate dossiers.</p>
|
||||
<a href="/tools/" class="ft-dock-link">Explore Curriculum →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{!-- 2. HORIZONTAL SECTION TOPIC RIBBONS (NYT 4-Column Horizontal Layout) --}}
|
||||
{{#get "tags" filter="slug:[islamic-finance,shifa,geopolitical-intelligence,philosophy]" limit="4"}}
|
||||
{{#foreach tags}}
|
||||
<div class="ft-section-ribbon">
|
||||
<div class="ft-ribbon-bar">
|
||||
<h3 class="ft-ribbon-tag-name"><a href="{{url}}">{{name}}</a></h3>
|
||||
<a href="{{url}}" class="ft-ribbon-view-all">View Full Section →</a>
|
||||
</div>
|
||||
<div class="ft-ribbon-grid-4">
|
||||
{{#get "posts" filter="tag:{{slug}}+status:published" limit="4" include="tags,authors"}}
|
||||
{{#foreach posts}}
|
||||
<article class="ft-ribbon-card">
|
||||
{{#if feature_image}}
|
||||
<div class="ft-ribbon-thumb">
|
||||
<a href="{{url}}"><img src="{{img_url feature_image size="m"}}" alt="{{title}}"></a>
|
||||
</div>
|
||||
{{/if}}
|
||||
<h4 class="ft-ribbon-card-headline">
|
||||
<a href="{{url}}">{{title}}</a>
|
||||
</h4>
|
||||
<p class="ft-ribbon-card-excerpt">
|
||||
{{#if custom_excerpt}}{{custom_excerpt}}{{else}}{{excerpt words="18"}}{{/if}}
|
||||
</p>
|
||||
<div class="ft-ribbon-card-byline">
|
||||
{{#if primary_author}}<a href="{{primary_author.url}}">{{primary_author.name}}</a>{{/if}} · {{reading_time}}
|
||||
</div>
|
||||
</article>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</div>
|
||||
</div>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,250 @@
|
||||
{{!-- FT & NYT Hybrid Broadsheet — Front Page 3-Zone Lead Package --}}
|
||||
<section class="ft-broadsheet-lead-zone" aria-label="Front Page Broadsheet Lead Package">
|
||||
<div class="ft-lead-grid">
|
||||
|
||||
{{!-- ZONE 1: LEAD INVESTIGATION (Left Column 32%) --}}
|
||||
<div class="ft-lead-col-left">
|
||||
{{#get "posts" filter="featured:true" limit="1" include="tags,authors"}}
|
||||
{{#foreach posts}}
|
||||
<article class="ft-lead-story-main">
|
||||
<span class="ft-lead-kicker">
|
||||
{{#if primary_tag}}<a href="{{primary_tag.url}}">{{primary_tag.name}}</a> • {{/if}}Lead Investigation
|
||||
</span>
|
||||
<h1 class="ft-lead-headline">
|
||||
<a href="{{url}}">{{title}}</a>
|
||||
</h1>
|
||||
<p class="ft-lead-prose">
|
||||
<span class="ft-dateline">Kuala Lumpur —</span>
|
||||
{{#if custom_excerpt}}{{custom_excerpt}}{{else}}{{excerpt words="38"}}{{/if}}
|
||||
</p>
|
||||
|
||||
{{!-- SEMAFOR-STYLE STRUCTURED TAKEAWAY DRAWER --}}
|
||||
<div class="ft-takeaway-drawer">
|
||||
<div class="ft-takeaway-row">
|
||||
<span class="ft-takeaway-tag">The Signal</span>
|
||||
<span>Multi-family governance protocols in Southeast Asia are integrating Waqf Ahli covenants to protect operating assets from statutory probate freezing.</span>
|
||||
</div>
|
||||
<div class="ft-takeaway-row">
|
||||
<span class="ft-takeaway-tag">The Fiqh</span>
|
||||
<span>Lifetime Hibah transfers execute irrevocable legal vesting while strictly safeguarding the residual Faraid entitlement rules.</span>
|
||||
</div>
|
||||
<div class="ft-takeaway-row">
|
||||
<span class="ft-takeaway-tag">The Exposure</span>
|
||||
<span>Dollar-denominated cross-border trust structures face sovereign sanction overhang and banking friction under changing OECD reporting rules.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ft-lead-byline">
|
||||
By {{#if primary_author}}<strong><a href="{{primary_author.url}}">{{primary_author.name}}</a></strong> · {{primary_author.location}}{{else}}<strong>Editorial Board</strong>{{/if}} · {{reading_time}}
|
||||
</div>
|
||||
</article>
|
||||
{{/foreach}}
|
||||
{{else}}
|
||||
{{#get "posts" limit="1" order="published_at desc" include="tags,authors"}}
|
||||
{{#foreach posts}}
|
||||
<article class="ft-lead-story-main">
|
||||
<span class="ft-lead-kicker">
|
||||
{{#if primary_tag}}<a href="{{primary_tag.url}}">{{primary_tag.name}}</a> • {{/if}}Lead Story
|
||||
</span>
|
||||
<h1 class="ft-lead-headline">
|
||||
<a href="{{url}}">{{title}}</a>
|
||||
</h1>
|
||||
<p class="ft-lead-prose">
|
||||
<span class="ft-dateline">Kuala Lumpur —</span>
|
||||
{{#if custom_excerpt}}{{custom_excerpt}}{{else}}{{excerpt words="38"}}{{/if}}
|
||||
</p>
|
||||
<div class="ft-takeaway-drawer">
|
||||
<div class="ft-takeaway-row">
|
||||
<span class="ft-takeaway-tag">The Signal</span>
|
||||
<span>Strategic wealth stewardship and institutional succession frameworks for sovereign Muslim families.</span>
|
||||
</div>
|
||||
<div class="ft-takeaway-row">
|
||||
<span class="ft-takeaway-tag">The Fiqh</span>
|
||||
<span>Preserving sacred generational contracts without compromising legal execution across jurisdictions.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-lead-byline">
|
||||
By {{#if primary_author}}<strong><a href="{{primary_author.url}}">{{primary_author.name}}</a></strong>{{else}}<strong>Editorial Desk</strong>{{/if}} · {{reading_time}}
|
||||
</div>
|
||||
</article>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
{{/get}}
|
||||
|
||||
{{!-- Secondary Anchor Story (Left Column Companion) --}}
|
||||
{{#get "posts" filter="featured:false" limit="1" order="published_at desc" include="tags,authors"}}
|
||||
{{#foreach posts}}
|
||||
<article class="ft-lead-secondary-story">
|
||||
<span class="ft-lead-kicker ft-kicker-burgundy">
|
||||
{{#if primary_tag}}<a href="{{primary_tag.url}}">{{primary_tag.name}}</a>{{else}}Juristic Review{{/if}}
|
||||
</span>
|
||||
<h3 class="ft-secondary-headline">
|
||||
<a href="{{url}}">{{title}}</a>
|
||||
</h3>
|
||||
<p class="ft-secondary-excerpt">
|
||||
{{#if custom_excerpt}}{{custom_excerpt}}{{else}}{{excerpt words="22"}}{{/if}}
|
||||
</p>
|
||||
<div class="ft-lead-byline">
|
||||
{{#if primary_author}}<a href="{{primary_author.url}}">{{primary_author.name}}</a>{{/if}} · {{reading_time}}
|
||||
</div>
|
||||
</article>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</div>
|
||||
|
||||
{{!-- ZONE 2: VISUAL ANCHOR & CENTER PACKAGE (Center Column 43%) --}}
|
||||
<div class="ft-lead-col-center">
|
||||
{{#get "posts" filter="tag:geopolitical-intelligence" limit="1" order="published_at desc" include="tags,authors"}}
|
||||
{{#foreach posts}}
|
||||
<article class="ft-center-package">
|
||||
{{#if feature_image}}
|
||||
<div class="ft-visual-frame">
|
||||
<a href="{{url}}"><img src="{{img_url feature_image size="xl"}}" alt="{{title}}"></a>
|
||||
</div>
|
||||
<div class="ft-photo-caption">
|
||||
Sovereign financial corridors and maritime trade arteries in the Malacca Strait. <span class="ft-photo-credit">Iqra Press · Archival</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="ft-center-story-body">
|
||||
<span class="ft-lead-kicker">
|
||||
{{#if primary_tag}}<a href="{{primary_tag.url}}">{{primary_tag.name}}</a>{{else}}Geopolitics & Sovereign Capital{{/if}}
|
||||
</span>
|
||||
<h2 class="ft-center-headline">
|
||||
<a href="{{url}}">{{title}}</a>
|
||||
</h2>
|
||||
<p class="ft-center-excerpt">
|
||||
{{#if custom_excerpt}}{{custom_excerpt}}{{else}}{{excerpt words="32"}}{{/if}}
|
||||
</p>
|
||||
<div class="ft-lead-byline">
|
||||
By {{#if primary_author}}<strong><a href="{{primary_author.url}}">{{primary_author.name}}</a></strong>{{/if}} · {{reading_time}}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{{/foreach}}
|
||||
{{else}}
|
||||
{{#get "posts" limit="1" order="published_at desc" include="tags,authors"}}
|
||||
{{#foreach posts}}
|
||||
<article class="ft-center-package">
|
||||
{{#if feature_image}}
|
||||
<div class="ft-visual-frame">
|
||||
<a href="{{url}}"><img src="{{img_url feature_image size="xl"}}" alt="{{title}}"></a>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="ft-center-story-body">
|
||||
<span class="ft-lead-kicker">{{#if primary_tag}}{{primary_tag.name}}{{else}}Intelligence Feature{{/if}}</span>
|
||||
<h2 class="ft-center-headline"><a href="{{url}}">{{title}}</a></h2>
|
||||
<p class="ft-center-excerpt">{{#if custom_excerpt}}{{custom_excerpt}}{{else}}{{excerpt words="32"}}{{/if}}</p>
|
||||
<div class="ft-lead-byline">{{#if primary_author}}By <strong>{{primary_author.name}}</strong>{{/if}} · {{reading_time}}</div>
|
||||
</div>
|
||||
</article>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
{{/get}}
|
||||
|
||||
{{!-- Center Dual Split Sub-Stories (NYT Split Columns) --}}
|
||||
<div class="ft-center-dual-split">
|
||||
{{#get "posts" filter="tag:shifa" limit="1" order="published_at desc" include="tags,authors"}}
|
||||
{{#foreach posts}}
|
||||
<article class="ft-mini-card">
|
||||
<span class="ft-lead-kicker"><a href="/tag/shifa/">The Shifa Desk</a></span>
|
||||
<h4 class="ft-mini-headline"><a href="{{url}}">{{title}}</a></h4>
|
||||
<p class="ft-mini-excerpt">{{#if custom_excerpt}}{{custom_excerpt}}{{else}}{{excerpt words="16"}}{{/if}}</p>
|
||||
<div class="ft-lead-byline">{{#if primary_author}}{{primary_author.name}}{{/if}} · {{reading_time}}</div>
|
||||
</article>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
|
||||
{{#get "posts" filter="tag:philosophy" limit="1" order="published_at desc" include="tags,authors"}}
|
||||
{{#foreach posts}}
|
||||
<article class="ft-mini-card ft-mini-card-bordered">
|
||||
<span class="ft-lead-kicker"><a href="/tag/philosophy/">Classical Thought</a></span>
|
||||
<h4 class="ft-mini-headline"><a href="{{url}}">{{title}}</a></h4>
|
||||
<p class="ft-mini-excerpt">{{#if custom_excerpt}}{{custom_excerpt}}{{else}}{{excerpt words="16"}}{{/if}}</p>
|
||||
<div class="ft-lead-byline">{{#if primary_author}}{{primary_author.name}}{{/if}} · {{reading_time}}</div>
|
||||
</article>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{!-- ZONE 3: OPINION RAIL & DISPATCHES (Right Column 25% - NYT Style) --}}
|
||||
<div class="ft-lead-col-right">
|
||||
<div class="ft-rail-header">
|
||||
<span>Opinion & Columns</span>
|
||||
<span class="ft-rail-accent">Voices of Iqra</span>
|
||||
</div>
|
||||
|
||||
{{!-- THE JAUHARI COLUMN (NYT Signature Columnist Spotlight) --}}
|
||||
{{#get "authors" filter="slug:jauhari-che-wan" limit="1"}}
|
||||
{{#foreach authors}}
|
||||
<div class="ft-jauhari-spotlight-card">
|
||||
<div class="ft-jauhari-meta-row">
|
||||
<div class="ft-jauhari-avatar-frame">
|
||||
{{#if profile_image}}
|
||||
<img src="{{profile_image}}" alt="{{name}}">
|
||||
{{else}}
|
||||
<img src="https://iqra.falahos.my/content/images/authors/jauhari-che-wan.png" alt="{{name}}">
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="ft-jauhari-info">
|
||||
<div class="ft-jauhari-name">{{name}}</div>
|
||||
<div class="ft-jauhari-tag">The Jauhari Column</div>
|
||||
</div>
|
||||
</div>
|
||||
{{#get "posts" filter="author:jauhari-che-wan" limit="1" order="published_at desc"}}
|
||||
{{#foreach posts}}
|
||||
<h3 class="ft-jauhari-headline"><a href="{{url}}">“{{title}}”</a></h3>
|
||||
<p class="ft-jauhari-quote">
|
||||
{{#if custom_excerpt}}“{{custom_excerpt}}”{{else}}“{{excerpt words="22"}}”{{/if}}
|
||||
</p>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</div>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
|
||||
{{!-- VOICES OF IQRA COLUMNIST ROWS (NYT Columnist Stack) --}}
|
||||
<div class="ft-columnist-stack">
|
||||
{{#get "authors" filter="slug:[tariq-al-amiri,hakim-zainur,maryam-al-andalusi,farhan-idris]" limit="4"}}
|
||||
{{#foreach authors}}
|
||||
<div class="ft-columnist-row">
|
||||
<div class="ft-col-avatar">
|
||||
{{#if profile_image}}
|
||||
<img src="{{profile_image}}" alt="{{name}}">
|
||||
{{else}}
|
||||
<img src="https://iqra.falahos.my/content/images/authors/{{slug}}.png" alt="{{name}}">
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="ft-col-details">
|
||||
<span class="ft-col-byline"><a href="{{url}}">{{name}}</a></span>
|
||||
<div class="ft-col-bio-snippet">{{bio}}</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</div>
|
||||
|
||||
{{!-- THE WIRE: FAST INTELLIGENCE DISPATCHES --}}
|
||||
<div class="ft-wire-box">
|
||||
<div class="ft-wire-header">
|
||||
The Wire • Live Intelligence
|
||||
</div>
|
||||
<div class="ft-wire-list">
|
||||
<div class="ft-wire-item">
|
||||
<span class="ft-wire-time">14m ago • BNM Pilot</span>
|
||||
<div class="ft-wire-title"><a href="/tag/islamic-finance/">Ringgit-pegged wholesale digital currency enters testing with 6 Islamic lenders.</a></div>
|
||||
</div>
|
||||
<div class="ft-wire-item">
|
||||
<span class="ft-wire-time">1h ago • AAOIFI Fiqh</span>
|
||||
<div class="ft-wire-title"><a href="/zakat/">Updated standards for digital sukuk tokenisation and purification rules ratified.</a></div>
|
||||
</div>
|
||||
<div class="ft-wire-item">
|
||||
<span class="ft-wire-time">3h ago • Waqf Desk</span>
|
||||
<div class="ft-wire-title"><a href="/calculator/">Cross-border Waqf Ahli registration protocols established in Labuan IBFC.</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,31 @@
|
||||
{{!-- FT & NYT Hybrid Broadsheet — Live Suq, Nisab & Utility Telemetry Strip --}}
|
||||
<div class="ft-top-telemetry-bar" role="region" aria-label="Sovereign Telemetry & Utility Bar">
|
||||
<div class="ft-telemetry-inner">
|
||||
<div class="ft-tel-left">
|
||||
<span class="ft-tel-date">{{date format="dddd, D MMMM YYYY"}}</span>
|
||||
<span class="ft-tel-bullet">•</span>
|
||||
<span class="ft-tel-hijri">28 Rabi' al-Awwal 1448 AH</span>
|
||||
<span class="ft-tel-bullet">•</span>
|
||||
<span class="ft-tel-edition">Kuala Lumpur · London · Sovereign Edition</span>
|
||||
</div>
|
||||
<div class="ft-tel-center">
|
||||
<span class="ft-ticker-item">GOLD NISAB: <strong>RM 34,820 / 85g</strong> <span class="ft-badge-up">+0.4%</span></span>
|
||||
<span class="ft-tel-bullet">•</span>
|
||||
<span class="ft-ticker-item">SILVER NISAB: <strong>RM 2,890</strong></span>
|
||||
<span class="ft-tel-bullet">•</span>
|
||||
<span class="ft-ticker-item">5Y SUKUK: <strong>4.82%</strong></span>
|
||||
<span class="ft-tel-bullet">•</span>
|
||||
<span class="ft-ticker-item">AAOIFI REF: <strong>2026.4</strong></span>
|
||||
</div>
|
||||
<div class="ft-tel-right">
|
||||
{{#if @site.members_enabled}}
|
||||
{{#unless @member}}
|
||||
<a href="#/portal/signin" data-portal="signin" class="ft-tel-link">Sign In</a>
|
||||
<a href="#/portal/signup" data-portal="signup" class="ft-tel-btn">Subscribe • RM 29/mo</a>
|
||||
{{else}}
|
||||
<a href="#/portal/account" data-portal="account" class="ft-tel-btn">My Account</a>
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user