feat: add partnership proposal + Partners page with tiers and contact form

- PARTNERSHIP-PROPOSAL.md: full partnership document with 3 tiers
- Partners.svelte: live Partners page on moslem03.falahos.my
- Updated Support page with partnership link
- Added Partners tab (16) to App.svelte
- Tiers: Bank Trustee (RM15-25K/mo), eWallet Distributor (RM50-100K/yr), UK Bank (£3-5K/mo)
- Each tier: what partner gets, what they give, pricing, target list
This commit is contained in:
2026-08-08 18:57:32 +08:00
parent 310249a018
commit d5929528a2
4 changed files with 742 additions and 2 deletions
+259
View File
@@ -0,0 +1,259 @@
# Nur Falah — Partnership Proposal
## The Sadaqah Jariyah App × Bank Trustee Model
**App:** https://moslem03.falahos.my
**Code:** https://git.falahos.my/hermes-macbookair/nur-falah
**Contact:** wanjauhari@gmail.com
---
## 1. What Is Nur Falah?
Nur Falah is a **free Muslim companion PWA** used by Muslims daily for prayer times, Quran, qibla, zakat calculation, and now — **perpetual charitable giving** through the Bir Nur (Well of Light) waqf system.
| Metric | Current |
|---|---|
| Features | 16 (Prayer · Qibla · Quran · Hijri · Tasbih · 99 Names · Food · Scan · ZakatCalc · Events · Mosques · Dua · Hifdh · Track · **Bir Nur Waqf** · Support) |
| Platform | PWA (no app store needed) |
| Deployment | Docker Swarm + Traefik + Let's Encrypt |
| Monthly Active Users | Growing organically |
**Core philosophy:** The app is **sadaqah jariyah** — ongoing charity. Free forever. Funded by:
1. **User giving** (zakat, sadaqah, waqf) flowing through a regulated bank trustee
2. **Bank/eWallet sponsorships** (co-branding and white-label partnerships)
---
## 2. The Win-Win Model
```
┌──────────────────────────┐
│ NUR FALAH APP │
│ Free · 16 features │
│ 5× daily engagement │
└──────────┬───────────────┘
┌────────────────────┼────────────────────┐
│ │ │
▼ ▼ ▼
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ BANK AS │ │ eWALLET AS │ │ SPONSOR │
│ TRUSTEE │ │ DISTRIBUTOR │ │ BRAND │
│ │ │ │ │ │
│ Holds waqf │ │ Embed app │ │ Co-branded │
│ Manages │ │ in wallet │ │ white-label │
│ investments │ │ Add sadaqah │ │ PWA │
│ Distributes │ │ tx flow │ │ │
│ Reports │ │ │ │ │
└──────────────┘ └──────────────┘ └──────────────┘
```
### What Each Partner Gets
| Partner Type | Value from Nur Falah | What They Give |
|---|---|---|
| **Islamic Bank** (Trustee) | • 5× daily brand engagement<br>• New account openings (CPA)<br>• Waqf pool growth (AUM)<br>• CSR/ESG metrics<br>• Muslim customer acquisition | • Monthly sponsorship fee<br>• Waqf management infrastructure<br>• Shariah committee approval<br>• Customer base marketing |
| **eWallet** (Distributor) | • Prayer times in-app = daily opens<br>• Sadaqah tx volume<br>• Halal positioning<br>• User retention | • Integration fee<br>• Revenue share on tx<br>• Marketing campaigns |
| **Sponsor Brand** | • White-label PWA<br>• Full brand control<br>• Dedicated user base | • Monthly SaaS fee<br>• CPA per conversion |
---
## 3. Partnership Tiers
### Tier 1 — Bank Trustee (Flagship)
**Best for:** Maybank Islamic, Bank Muamalat, Al Rajhi Malaysia, Tabung Haji
The bank becomes the official **Nazir/Mutawalli** (trustee) for all zakat, sadaqah, and waqf funds flowing through Nur Falah.
#### Bank's Role
| Responsibility | Detail |
|---|---|
| **Fund custody** | All user donations flow directly to the bank's Shariah-compliant account |
| **Waqf investment** | Pool cash waqf into Shariah assets (sukuk, Islamic REITs, agri-funds) |
| **Distribution** | Channel returns to verified asnaf/charity partners |
| **Reporting** | Provide per-user dashboard data: principal, growth, distributions |
| **Shariah audit** | Annual Shariah compliance certificate |
| **Marketing** | Promote the app to the bank's Islamic banking customer base |
#### What the Bank Gets
| Asset | Detail |
|---|---|
| **5× daily brand engagement** | 5 prayer notifications = 5 branded touchpoints per user per day |
| **New account pipeline** | ZakatCalc → "Open an account to pay zakat" conversion funnel |
| **Waqf AUM growth** | Pooled cash waqf managed by the bank = fee-generating assets under management |
| **CSR/ESG metrics** | "RM X in charitable giving distributed through our waqf program" |
| **Digital leadership** | "Malaysia's first waqf-enabled digital lifestyle app" positioning |
| **Co-branded PWA** | `prayer.[bank].com.my` — fully branded version |
#### Pricing
| Component | Amount | Notes |
|---|---|---|
| Monthly sponsorship | RM 15,000 25,000 | Covers dev, hosting, updates |
| CPA per account opened | RM 50 150 | New Islamic savings/current accounts |
| Waqf management fee share | 10 20% of bank's fee | On the bank's waqf management fee |
| Annual minimum | RM 180,000 300,000 | 12-month commitment |
#### Success Metrics (Year 1)
| Metric | Conservative | Target |
|---|---|---|
| App MAU | 20,000 | 50,000 |
| New bank accounts via app | 500 | 2,000 |
| Waqf pool collected | RM 100K | RM 500K |
| Zakat/sadaqah flowing through bank | RM 500K | RM 2M |
---
### Tier 2 — eWallet Integration
**Best for:** Touch 'n Go eWallet (30M users), GrabPay (20M users), ShopeePay (25M users), Boost (10M users)
The eWallet embeds prayer times + qibla as a mini-app, with integrated sadaqah giving.
#### eWallet's Role
| Responsibility | Detail |
|---|---|
| **Integration** | Embed the PWA as a mini-app in the eWallet |
| **Sadaqah flow** | Users donate via eWallet balance → flows to bank trustee |
| **Marketing** | Promote "Muslim Companion by [eWallet]" to user base |
| **Halal merchant tagging** | Identify halal merchants for integrated payments |
#### What the eWallet Gets
| Asset | Detail |
|---|---|
| **5× daily opens** | Prayer reminders = daily engagement boost |
| **Sadaqah tx volume** | Micro-donations = payment volume |
| **Halal positioning** | "The Muslim-friendly eWallet" brand differentiation |
| **User retention** | Companion features reduce churn |
#### Pricing
| Component | Amount | Notes |
|---|---|---|
| Annual sponsorship | RM 50,000 100,000 | Fixed fee, no volume dependency |
| Revenue share | 0.5 1% | On sadaqah/waqf transaction volume |
| Co-marketing budget | RM 20,000 50,000 | Joint campaigns (Ramadan, Eid, Hajj) |
---
### Tier 3 — UK Islamic Bank (Al Rayyan / Gatehouse)
**Best for:** Al Rayyan Bank (London), Gatehouse Bank, BLME
UK version with local prayer times, GBP zakat calculator, and UK-regulated waqf/charity account.
#### UK-Specific Features
| Feature | Detail |
|---|---|
| Prayer times | London, Birmingham, Manchester, Bradford, Glasgow |
| Zakat calculator | GBP (£), UK nisab (BoE gold/silver prices), HMRC tax relief |
| Cash waqf | GBP-denominated, invested in UK Shariah assets (UK Sukuk, Islamic REITs) |
| Sadaqah | Donate to UK-registered Islamic charities vetted by the bank |
| Hibah | UK inheritance tax planning (IHT) + Islamic will |
#### Pricing
| Component | Amount |
|---|---|
| Monthly sponsorship | £3,000 5,000 |
| CPA per charity account opened | £5 10 |
| Waqf management fee share | 10 15% |
---
## 4. Targeted Pitches
### Maybank Islamic
> *"You have 5M Islamic banking customers who open MAE 3× a month. We offer 5× daily engagement inside a Muslim companion that we give away for free as sadaqah. Your existing waqf product (Mutiara Waqf / Sadaqah House) needs a digital front-end. Nur Falah IS that front-end. Your customers can: calculate zakat → pay through Maybank → get tax receipt. Endow a waqf → Maybank manages → user watches their 'well' grow. All inside an app they already check 5× a day."*
**Best entry point:** Maybank Islamic Marketing / Digital Banking team
---
### Bank Muamalat ATLAS
> *"Your ATLAS digital bank launched in June 2025 as Malaysia's first faith-aligned digital bank. Faith without giving is incomplete. Make ATLAS the first digital bank where users can waqf, zakat, and sadaqah with full transparency. Nur Falah is your lifestyle front-end. You are the waqafa (trustee). Together: Malaysia's first waqf-enabled digital bank."*
**Best entry point:** ATLAS product team (most receptive — actively building ecosystem)
---
### Al Rajhi Bank Malaysia
> *"You proved this model works when you partnered with TheNoor in 2023. Now deepen it. Instead of just ads, let your users give zakat and endow waqf through the app with you as the trustee. Rize digital bank + Nur Falah = daily engagement + charitable fund flow through your banking system. TheNoor gave you 2.8M users. We give you daily engagement PLUS actual charitable assets under management."*
**Best entry point:** Partnership / Business Development team (existing precedent)
---
### Tabung Haji
> *"Your depositors already pray 5× a day. Give them a companion app that connects their prayer time to their hajj savings. And Bir Nur: let them endow part of their savings as waqf — perpetual benefit, continuous reward. The app is free. We only need your sponsorship and your trust as the waqf manager."*
**Best entry point:** THiJARI digital team
---
### Touch 'n Go eWallet
> *"30 million users. Zero Muslim companion features. Add prayer times + sadaqah as a TNG mini-app. Users check prayer times 5× a day = TNG opens 5× a day. One-tap sadaqah from TNG balance = micro-donation volume. No development cost — we provide the PWA. You provide the distribution."*
**Best entry point:** Partnership team / New Initiatives
---
### Al Rayyan Bank (UK)
> *"4 million British Muslims. Zero Muslim companion apps with embedded Islamic banking. You already have an Islamic Charity Account product. Give British Muslims a free app with London prayer times, zakat calculation in GBP, and Bir Nur waqf in pounds — managed by you, Shariah-audited by you, creating perpetual benefit for UK Muslim communities. The app is free. You sponsor it, you trustee it, you own the charitable relationship."*
**Best entry point:** Retail Banking / Marketing team
---
## 5. Technical Integration Effort
| Partner Type | Effort | Timeline | Nur Falah Work | Partner Work |
|---|---|---|---|---|
| **Bank Trustee** (full integration) | 4-8 weeks | Month 1-2 | Build payment API, waqf dashboard API, zakat receipt, Hibah legal docs | Provide API endpoints, Shariah approval, legal framework, customer marketing |
| **Bank Trustee** (lite — Polar.sh redirect) | 1-2 weeks | Immediate | Add "Pay via [Bank]" button → Polar.sh checkout with bank flag | Provide branding, marketing approval |
| **eWallet mini-app** | 2-4 weeks | Month 2-3 | PWA embed code, sadaqah API, iframe/popup | Provide SDK, integration review, marketing campaign |
| **UK Bank** | 6-10 weeks | Month 3-5 | UK-specific features, GBP, local APIs, tax relief forms | UK banking license, FCA compliance, Shariah board approval |
---
## 6. The Urgency (Why Now)
| Factor | Detail |
|---|---|
| **Bank Muamalat ATLAS** | Launched June 2025 — actively seeking ecosystem partners. Window closes as they mature. |
| **Al Rajhi precedent** | TheNoor deal in 2023 proved the model. Renewal opportunity for Al Rajhi. |
| **First-mover in waqf** | No Muslim app offers transparent, bank-trusteed cash waqf. First to market wins. |
| **Ramadan 2027** | 7 months away. Peak giving season. Partners who sign now benefit from Ramadan campaign. |
| **No technical risk** | PWA is built, tested, deployed. No app store. Instant onboarding. |
---
## 7. Appendix: The Bir Nur Dashboard (Live Demo)
See the live experience at **https://moslem03.falahos.my** (tab: ⛲ WAQF)
The end-to-end flow is fully functional:
1. User opens Bir Nur → reads the story of Uthman's Well and Abdur Rahman bin Auf
2. Clicks "Configure Your Well" → names their waqf, selects well type (Date Palm / Water / Knowledge / Healing / Shelter / General)
3. Sets amount → allocates returns across causes (Orphans, Education, Healthcare, etc.)
4. Enters email → registers interest
5. Sees preview dashboard: well bar (principal intact), water bar (returns flowing), per-cause breakdown
6. Receives confirmation: "Your well is registered. Your reward continues forever."
The only missing piece is the bank's payment API and actual waqf management backend.
+5 -2
View File
@@ -15,9 +15,10 @@
import WorshipTracker from './lib/WorshipTracker.svelte'; import WorshipTracker from './lib/WorshipTracker.svelte';
import Support, { getSupportStats } from './lib/Support.svelte'; import Support, { getSupportStats } from './lib/Support.svelte';
import BirNur from './lib/BirNur.svelte'; import BirNur from './lib/BirNur.svelte';
import Partners from './lib/Partners.svelte';
const tabs = ['Prayer', 'Qibla', 'Quran', 'Hijri', 'Tasbih', 'Names', 'Food', 'Scan', 'Zakat', 'Events', 'Mosques', 'Dua', 'Hifdh', 'Track', 'Waqf', 'Support']; const tabs = ['Prayer', 'Qibla', 'Quran', 'Hijri', 'Tasbih', 'Names', 'Food', 'Scan', 'Zakat', 'Events', 'Mosques', 'Dua', 'Hifdh', 'Track', 'Waqf', 'Support', 'Partners'];
const icons = ['🕌', '🧭', '📖', '📅', '📿', '💚', '🍽️', '🔍', '💰', '🗓️', '🕌', '🤲', '📖', '📊', '⛲', '🤲']; const icons = ['🕌', '🧭', '📖', '📅', '📿', '💚', '🍽️', '🔍', '💰', '🗓️', '🕌', '🤲', '📖', '📊', '⛲', '🤲', '🤝'];
const premiumTabs = new Set([6, 7]); const premiumTabs = new Set([6, 7]);
let activeTab = $state(0); let activeTab = $state(0);
@@ -97,6 +98,8 @@
<BirNur /> <BirNur />
{:else if activeTab === 15} {:else if activeTab === 15}
<Support /> <Support />
{:else if activeTab === 16}
<Partners />
{/if} {/if}
</main> </main>
</div> </div>
+475
View File
@@ -0,0 +1,475 @@
<script>
let activeSection = $state('overview');
let showContact = $state(false);
let contactForm = $state({ name: '', email: '', org: '', interest: '' });
const tiers = [
{
id: 'trustee',
icon: '🏛️',
title: 'Bank Trustee',
subtitle: 'Flagship · Nazir / Mutawalli',
price: 'RM 15K 25K /mo',
audience: 'Islamic Banks',
color: '#C9A84C',
points: [
'Official waqf trustee for all user giving',
'Co-branded PWA: prayer.[bank].my',
'5× daily brand engagement per user',
'New account pipeline via ZakatCalc',
'Waqf AUM growth + management fees',
'Shariah audit & transparent reporting',
'CSR / ESG metrics for annual report'
],
targets: ['Maybank Islamic', 'Bank Muamalat ATLAS', 'Al Rajhi Malaysia', 'Tabung Haji']
},
{
id: 'ewallet',
icon: '💳',
title: 'eWallet Distributor',
subtitle: 'Mass reach · Daily opens',
price: 'RM 50K 100K /yr',
audience: 'eWallets & Fintech',
color: '#2ECC71',
points: [
'Prayer mini-app inside your wallet',
'5× daily user engagement boost',
'Sadaqah tx volume from micro-giving',
'Halal merchant integration',
'User retention through companion features',
'Ramadan campaign partnership',
'0 dev cost — we provide the PWA'
],
targets: ['Touch \'n Go eWallet', 'GrabPay', 'ShopeePay', 'Boost']
},
{
id: 'uk',
icon: '🇬🇧',
title: 'UK Islamic Bank',
subtitle: '4M British Muslims · Untapped',
price: '£3K 5K /mo',
audience: 'UK Islamic Banks',
color: '#3B82F6',
points: [
'London/Birmingham/Manchester prayer times',
'GBP zakat calculator with HMRC relief',
'UK Charity Account integration',
'GBP-denominated cash waqf',
'IHT & Islamic will (Hibah) planning',
'FCA-regulated trustee framework',
'First Muslim companion app in UK market'
],
targets: ['Al Rayyan Bank', 'Gatehouse Bank', 'BLME']
}
];
// FAQ data
const faqs = [
{
q: 'How does the app stay free?',
a: 'Nur Falah is sadaqah jariyah — ongoing charity. It is funded entirely by bank/eWallet sponsorships and a share of waqf management fees. Users never pay.'
},
{
q: 'Does Nur Falah handle user donations?',
a: 'No. All donations flow directly from user to bank trustee. Nur Falah never touches the money — only provides the interface and dashboard.'
},
{
q: 'What Shariah compliance is needed?',
a: 'The bank\'s existing Shariah committee approves waqf products and investment structures. Nur Falah as a platform requires no separate Shariah board — the bank provides compliance.'
},
{
q: 'What is the minimum commitment?',
a: '12-month initial term for bank trustee partnerships. eWallet sponsorships are annual. UK partnerships negotiable.'
},
{
q: 'How quickly can we launch?',
a: 'Lite integration (co-branded PWA, Polar.sh redirect): 1-2 weeks. Full API integration (waqf dashboard, payment, reporting): 4-8 weeks.'
},
{
q: 'Do we get exclusive category rights?',
a: 'Yes. Platinum sponsors get exclusive category rights (e.g., only one Islamic bank as trustee). Gold sponsors share category.'
}
];
function submitInquiry() {
const mailto = `mailto:wanjauhari@gmail.com?subject=Nur Falah Partnership Inquiry - ${contactForm.org || 'General'}&body=Name: ${contactForm.name}%0AEmail: ${contactForm.email}%0AOrganization: ${contactForm.org}%0AInterest: ${contactForm.interest}`;
window.open(mailto, '_blank');
showContact = false;
}
</script>
<div class="partners">
<!-- Hero -->
<div class="hero">
<div class="hero-badge">🤝 PARTNERSHIP</div>
<h1>The Sadaqah Jariyah App</h1>
<p class="hero-sub">Nur Falah is free forever — funded entirely by<br>sponsors who believe in perpetual giving.</p>
<div class="hero-metrics">
<div class="metric"><span class="metric-num">16</span><span class="metric-label">Features</span></div>
<div class="metric"><span class="metric-num">5×</span><span class="metric-label">Daily Engagement</span></div>
<div class="metric"><span class="metric-num">PWA</span><span class="metric-label">No App Store</span></div>
<div class="metric"><span class="metric-num">RM 0</span><span class="metric-label">Free for Users</span></div>
</div>
</div>
<!-- The Model -->
<div class="model-section">
<h2>The Win-Win</h2>
<div class="model-grid">
<div class="model-card">
<div class="model-icon">👤</div>
<h3>User</h3>
<p>Free Muslim companion app with prayer, Quran, zakat, and waqf. Give with confidence through a trusted bank trustee.</p>
</div>
<div class="model-arrow"></div>
<div class="model-card">
<div class="model-icon">🏛️</div>
<h3>Bank / Sponsor</h3>
<p>5× daily engagement with self-qualifying Muslim users. New account pipeline. Waqf AUM. CSR metrics.</p>
</div>
<div class="model-arrow"></div>
<div class="model-card">
<div class="model-icon">🤲</div>
<h3>Society</h3>
<p>Orphans fed, students educated, communities watered — perpetually. The Well of Light never runs dry.</p>
</div>
</div>
</div>
<!-- Tiers -->
<h2>Partnership Tiers</h2>
<div class="tier-nav">
{#each tiers as tier}
<button
class="tier-tab"
class:active={activeSection === tier.id}
style="--tier-color: {tier.color}"
onclick={() => activeSection = tier.id}
>
<span class="tier-tab-icon">{tier.icon}</span>
<span class="tier-tab-title">{tier.title}</span>
</button>
{/each}
</div>
{#each tiers as tier}
{#if activeSection === tier.id}
<div class="tier-card" style="border-color: {tier.color}">
<div class="tier-header">
<span class="tier-icon" style="color: {tier.color}">{tier.icon}</span>
<div>
<h3>{tier.title}</h3>
<span class="tier-subtitle">{tier.subtitle}</span>
</div>
<span class="tier-price" style="background: {tier.color}; color: #070A0D">{tier.price}</span>
</div>
<p class="tier-audience">For: {tier.audience}</p>
<div class="tier-points">
{#each tier.points as pt}
<div class="tier-point">{pt}</div>
{/each}
</div>
<div class="tier-targets">
<span class="target-label">Target partners:</span>
{#each tier.targets as t}
<span class="target-chip">{t}</span>
{/each}
</div>
<button class="inquire-btn" style="border-color: {tier.color}; color: {tier.color}" onclick={() => showContact = true}>Inquire About This Tier →</button>
</div>
{/if}
{/each}
<!-- Why Nur Falah -->
<div class="why-section">
<h2>Why Nur Falah?</h2>
<div class="why-grid">
<div class="why-card">
<div class="why-num">1</div>
<h3>No App Store Dependency</h3>
<p>PWA means instant onboarding via SMS or QR. No Apple/Google review delays. Bank can send SMS → tap → app in 3 seconds.</p>
</div>
<div class="why-card">
<div class="why-num">2</div>
<h3>Zero User Friction</h3>
<p>Users already check prayer times. Giving is one extra tap — not a separate app or website. The prayer habit IS the giving habit.</p>
</div>
<div class="why-card">
<div class="why-num">3</div>
<h3>First-Mover in Waqf</h3>
<p>No Muslim app offers transparent, bank-trusteed cash waqf with per-user dashboards. Whoever partners first owns this category.</p>
</div>
<div class="why-card">
<div class="why-num">4</div>
<h3>Ramadan 2027 — 7 Months Away</h3>
<p>Peak giving season. Partners who sign now benefit from Ramadan campaign built on a ready platform.</p>
</div>
</div>
</div>
<!-- FAQ -->
<div class="faq-section">
<h2>Frequently Asked Questions</h2>
{#each faqs as faq, i}
<details class="faq-item">
<summary class="faq-q">{faq.q}</summary>
<p class="faq-a">{faq.a}</p>
</details>
{/each}
</div>
<!-- Contact Form -->
{#if showContact}
<div class="contact-overlay" onclick={() => showContact = false} onkeydown={(e) => e.key === 'Enter' && (showContact = false)} role="button" tabindex="0"></div>
<div class="contact-modal">
<button class="close-modal" onclick={() => showContact = false}>✕</button>
<h2>📩 Partnership Inquiry</h2>
<p class="modal-sub">We'll get back to you within 48 hours.</p>
<input type="text" placeholder="Your name" bind:value={contactForm.name} class="contact-input" />
<input type="email" placeholder="Your email" bind:value={contactForm.email} class="contact-input" />
<input type="text" placeholder="Organization" bind:value={contactForm.org} class="contact-input" />
<textarea placeholder="Tell us about your interest..." bind:value={contactForm.interest} class="contact-textarea" rows="4"></textarea>
<button class="primary submit-btn" disabled={!contactForm.email || !contactForm.name} onclick={submitInquiry}>
Send Inquiry ✉️
</button>
<p class="form-note">Or email us directly: wanjauhari@gmail.com</p>
</div>
{/if}
<!-- Footer -->
<div class="partner-footer">
<p>Nur Falah — Free forever. Sadaqah jariyah.</p>
<p class="footer-ref">Inspired by the waqf of Uthman ibn Affan (Bir Rumah) and Abdur Rahman bin Auf ﷺ</p>
</div>
</div>
<style>
.partners { padding: 8px 0 20px; }
.hero { text-align: center; padding: 20px 0; }
.hero-badge {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 0.6rem;
letter-spacing: 2px;
color: #C9A84C;
border: 1px solid rgba(201,168,76,0.3);
padding: 4px 12px;
margin-bottom: 12px;
}
.hero h1 {
font-family: 'Cinzel', serif;
font-size: 1.4rem;
color: #E8E4DC;
margin-bottom: 6px;
}
.hero-sub {
font-size: 0.8rem;
color: rgba(232,228,220,0.5);
line-height: 1.5;
}
.hero-metrics {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 16px;
}
.metric { display: flex; flex-direction: column; align-items: center; }
.metric-num { font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 700; color: #C9A84C; }
.metric-label { font-size: 0.55rem; color: rgba(232,228,220,0.35); text-transform: uppercase; letter-spacing: 1px; }
.model-section { margin-bottom: 20px; }
.model-section h2 { font-family: 'Cinzel', serif; font-size: 1rem; color: #C9A84C; text-align: center; margin-bottom: 12px; }
.model-grid { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.model-card {
background: #141C24;
border: 1px solid rgba(201,168,76,0.12);
border-radius: 12px;
padding: 14px;
text-align: center;
width: 100%;
}
.model-icon { font-size: 1.8rem; }
.model-card h3 { font-family: 'Cinzel', serif; font-size: 0.85rem; color: #E8E4DC; margin: 4px 0; }
.model-card p { font-size: 0.7rem; color: rgba(232,228,220,0.55); line-height: 1.5; }
.model-arrow { color: rgba(201,168,76,0.3); font-size: 1rem; }
h2 { font-family: 'Cinzel', serif; font-size: 1rem; color: #C9A84C; margin-bottom: 10px; }
.tier-nav {
display: flex;
gap: 4px;
margin-bottom: 12px;
}
.tier-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 10px 4px;
border: 1px solid rgba(232,228,220,0.1);
border-radius: 10px;
background: #111820;
cursor: pointer;
transition: all 0.2s;
}
.tier-tab.active {
border-color: var(--tier-color);
background: rgba(from var(--tier-color) r g b / 0.08);
}
.tier-tab-icon { font-size: 1.2rem; }
.tier-tab-title { font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; color: rgba(232,228,220,0.5); text-transform: uppercase; }
.tier-card {
background: #141C24;
border: 1px solid;
border-radius: 14px;
padding: 16px;
margin-bottom: 16px;
}
.tier-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tier-icon { font-size: 2rem; }
.tier-header h3 { font-family: 'Cinzel', serif; font-size: 1rem; color: #E8E4DC; margin: 0; }
.tier-subtitle { font-size: 0.65rem; color: rgba(232,228,220,0.35); }
.tier-price {
margin-left: auto;
font-family: 'JetBrains Mono', monospace;
font-size: 0.6rem;
font-weight: 600;
padding: 4px 8px;
border-radius: 6px;
white-space: nowrap;
}
.tier-audience { font-size: 0.7rem; color: rgba(232,228,220,0.45); margin-bottom: 10px; }
.tier-points { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.tier-point { font-size: 0.72rem; color: rgba(232,228,220,0.7); padding: 4px 0; }
.tier-targets { margin-bottom: 12px; }
.target-label { font-size: 0.6rem; color: rgba(232,228,220,0.35); display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; }
.target-chip {
display: inline-block;
font-size: 0.65rem;
background: rgba(201,168,76,0.08);
border: 1px solid rgba(201,168,76,0.2);
padding: 3px 8px;
border-radius: 12px;
margin: 2px 4px 2px 0;
color: rgba(232,228,220,0.6);
}
.inquire-btn {
width: 100%;
padding: 10px;
border: 1px solid;
border-radius: 10px;
background: transparent;
font-family: 'JetBrains Mono', monospace;
font-size: 0.72rem;
cursor: pointer;
transition: all 0.2s;
}
.why-section { margin-bottom: 20px; }
.why-grid { display: flex; flex-direction: column; gap: 6px; }
.why-card {
background: #111820;
border: 1px solid rgba(201,168,76,0.08);
border-radius: 10px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 2px;
}
.why-num {
width: 24px; height: 24px;
background: rgba(201,168,76,0.12);
color: #C9A84C;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
font-family: 'Cinzel', serif;
font-size: 0.72rem;
font-weight: 700;
}
.why-card h3 { font-family: 'Cinzel', serif; font-size: 0.8rem; color: #E8E4DC; }
.why-card p { font-size: 0.7rem; color: rgba(232,228,220,0.5); line-height: 1.5; }
.faq-section { margin-bottom: 20px; }
.faq-item {
background: #141C24;
border: 1px solid rgba(201,168,76,0.1);
border-radius: 10px;
margin-bottom: 6px;
overflow: hidden;
}
.faq-q {
padding: 12px 14px;
font-family: 'DM Sans', sans-serif;
font-size: 0.78rem;
color: #E8E4DC;
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: '+'; color: #C9A84C; font-size: 1.1rem; }
details[open] .faq-q::after { content: ''; }
.faq-a {
padding: 0 14px 12px;
font-size: 0.72rem;
color: rgba(232,228,220,0.55);
line-height: 1.6;
}
.contact-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
z-index: 100;
}
.contact-modal {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: #141C24;
border: 1px solid rgba(201,168,76,0.2);
border-radius: 16px;
padding: 24px;
width: 90%;
max-width: 400px;
z-index: 101;
display: flex;
flex-direction: column;
gap: 8px;
}
.close-modal {
align-self: flex-end;
background: none;
border: none;
color: rgba(232,228,220,0.4);
font-size: 1.2rem;
cursor: pointer;
}
.contact-modal h2 { font-family: 'Cinzel', serif; font-size: 1rem; color: #C9A84C; }
.modal-sub { font-size: 0.72rem; color: rgba(232,228,220,0.45); }
.contact-input, .contact-textarea {
width: 100%;
box-sizing: border-box;
}
.submit-btn { width: 100%; }
.submit-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.form-note { font-size: 0.6rem; color: rgba(232,228,220,0.3); text-align: center; }
.partner-footer {
text-align: center;
padding: 16px 0;
border-top: 1px solid rgba(201,168,76,0.1);
font-size: 0.7rem;
color: rgba(232,228,220,0.35);
}
.footer-ref {
font-size: 0.6rem;
color: rgba(232,228,220,0.2);
margin-top: 4px;
}
</style>
+3
View File
@@ -290,6 +290,9 @@
<div class="bank-trustee-note"> <div class="bank-trustee-note">
<p>🙏 <em>Nur Falah is free forever as sadaqah jariyah. If you'd like to give zakat or set up a perpetual waqf, use the <button class="link-btn" onclick={() => activeTab = 'bank-trustee'}>Give Through Our Trustee</button> tab above.</em></p> <p>🙏 <em>Nur Falah is free forever as sadaqah jariyah. If you'd like to give zakat or set up a perpetual waqf, use the <button class="link-btn" onclick={() => activeTab = 'bank-trustee'}>Give Through Our Trustee</button> tab above.</em></p>
</div> </div>
<div class="partner-link">
<p>🏛️ Represent a bank or eWallet? <button class="link-btn" onclick={() => window.dispatchEvent(new CustomEvent('switch-tab', { detail: 16 }))}>View Partnership Opportunities →</button></p>
</div>
</div> </div>
{/if} {/if}
{/if} {/if}