Files
nur-falah/deploy/partners-landing.html
T

485 lines
19 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nur Falah — Partnership Opportunities</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--navy: #0A1628;
--light-navy: #132A41;
--gold: #C9A84C;
--gold-dim: rgba(201,168,76,0.12);
--white: #E8E4DC;
--off-white: #F5F3EE;
--muted: #8899AA;
--body: rgba(232,228,220,0.55);
--radius: 14px;
}
html { scroll-behavior: smooth; }
body {
font-family: 'DM Sans', sans-serif;
background: var(--navy);
color: var(--white);
overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: 'Cinzel', serif; font-weight: 700; }
.mono { font-family: 'JetBrains Mono', monospace; }
/* ── NAV ── */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
padding: 16px 24px;
display: flex; align-items: center; justify-content: space-between;
background: rgba(10,22,40,0.85);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(201,168,76,0.08);
}
nav .logo { font-family: 'Cinzel', serif; font-size: 1.1rem; color: var(--gold); font-weight: 700; }
nav .tagline { font-size: 0.7rem; color: var(--muted); }
nav .nav-links { display: flex; gap: 20px; }
nav .nav-links a {
color: var(--body); text-decoration: none;
font-size: 0.8rem; transition: color 0.2s;
}
nav .nav-links a:hover { color: var(--gold); }
.cta-nav {
background: var(--gold); color: var(--navy);
padding: 8px 20px; border-radius: 8px;
font-weight: 700; font-size: 0.75rem;
text-decoration: none; transition: all 0.2s;
}
.cta-nav:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(201,168,76,0.3); }
/* ── HERO ── */
.hero {
min-height: 100vh;
display: flex; flex-direction: column; justify-content: center;
padding: 120px 24px 80px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute; top: -50%; right: -30%;
width: 800px; height: 800px;
background: radial-gradient(circle, rgba(201,168,76,0.04) 0%, transparent 70%);
pointer-events: none;
}
.hero-badge {
display: inline-flex; align-items: center; gap: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.65rem; letter-spacing: 2px;
color: var(--gold);
border: 1px solid rgba(201,168,76,0.25);
padding: 6px 14px; border-radius: 20px;
margin-bottom: 24px;
width: fit-content;
}
.hero h1 {
font-size: 3rem; line-height: 1.1;
max-width: 700px; margin-bottom: 16px;
}
.hero h1 .highlight { color: var(--gold); }
.hero p {
font-size: 1.1rem; color: var(--muted);
max-width: 550px; line-height: 1.6;
margin-bottom: 32px;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-ctas .primary {
background: var(--gold); color: var(--navy);
padding: 14px 32px; border-radius: 10px;
font-weight: 700; font-size: 0.9rem;
text-decoration: none; transition: all 0.2s;
}
.hero-ctas .primary:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(201,168,76,0.35); }
.hero-ctas .secondary {
border: 1px solid rgba(232,228,220,0.15); color: var(--white);
padding: 14px 32px; border-radius: 10px;
font-size: 0.9rem; text-decoration: none; transition: all 0.2s;
}
.hero-ctas .secondary:hover { border-color: var(--gold); color: var(--gold); }
.hero-metrics {
display: flex; gap: 40px; margin-top: 48px;
padding-top: 32px; border-top: 1px solid rgba(201,168,76,0.08);
}
.hero-metrics .metric-num { font-family: 'Cinzel', serif; font-size: 2rem; color: var(--gold); font-weight: 700; display: block; }
.hero-metrics .metric-label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
/* ── SECTIONS ── */
section { padding: 80px 24px; max-width: 1100px; margin: 0 auto; }
.section-label {
font-family: 'JetBrains Mono', monospace;
font-size: 0.6rem; letter-spacing: 3px;
color: var(--gold); text-transform: uppercase;
margin-bottom: 12px;
}
section h2 {
font-size: 2rem; margin-bottom: 16px;
max-width: 600px;
}
section h2 .highlight { color: var(--gold); }
section > p {
font-size: 0.95rem; color: var(--muted);
line-height: 1.6; max-width: 600px;
margin-bottom: 40px;
}
/* ── MODEL ── */
.model-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 16px; margin-bottom: 48px;
}
.model-card {
background: var(--light-navy);
border: 1px solid rgba(201,168,76,0.08);
border-radius: var(--radius);
padding: 28px 24px; text-align: center;
position: relative;
}
.model-card .icon { font-size: 2.5rem; margin-bottom: 12px; }
.model-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.model-card p { font-size: 0.8rem; color: var(--body); line-height: 1.5; }
.model-arrow {
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem; color: rgba(201,168,76,0.3);
}
/* ── TIERS ── */
.tier-grid { display: grid; gap: 20px; }
.tier-card {
background: var(--light-navy);
border: 1px solid rgba(201,168,76,0.12);
border-radius: var(--radius);
padding: 32px;
display: grid; grid-template-columns: auto 1fr auto;
gap: 20px; align-items: start;
}
.tier-icon { font-size: 2.8rem; }
.tier-content h3 { font-size: 1.3rem; margin-bottom: 4px; }
.tier-content h3 .sub { font-size: 0.8rem; color: var(--muted); font-family: 'DM Sans', sans-serif; }
.tier-content .price {
font-family: 'JetBrains Mono', monospace;
font-size: 1rem; color: var(--gold); font-weight: 600;
margin: 8px 0 12px;
}
.tier-content .audience {
font-size: 0.75rem; color: var(--muted);
margin-bottom: 12px;
}
.tier-points { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tier-point {
background: rgba(201,168,76,0.06);
border: 1px solid rgba(201,168,76,0.1);
padding: 4px 10px; border-radius: 6px;
font-size: 0.72rem; color: rgba(232,228,220,0.6);
}
.tier-targets { display: flex; flex-wrap: wrap; gap: 6px; }
.tier-target {
background: rgba(255,255,255,0.04);
padding: 4px 12px; border-radius: 14px;
font-size: 0.7rem; color: var(--gold);
}
.tier-cta {
align-self: center;
background: var(--gold); color: var(--navy);
padding: 10px 20px; border-radius: 8px;
text-decoration: none; font-weight: 600;
font-size: 0.8rem; white-space: nowrap;
transition: all 0.2s;
}
.tier-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(201,168,76,0.3); }
/* ── WHY ── */
.why-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.why-card {
background: var(--light-navy);
border: 1px solid rgba(201,168,76,0.06);
border-radius: var(--radius);
padding: 24px;
}
.why-num {
width: 32px; height: 32px;
background: rgba(201,168,76,0.1);
color: var(--gold); border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-family: 'Cinzel', serif; font-weight: 700;
margin-bottom: 12px;
}
.why-card h3 { font-size: 1rem; margin-bottom: 6px; }
.why-card p { font-size: 0.8rem; color: var(--body); line-height: 1.5; }
/* ── PRECEDENT ── */
.precedent-stats { display: flex; gap: 48px; margin-bottom: 32px; }
.precedent-stats .stat { text-align: center; }
.precedent-stats .num { font-family: 'Cinzel', serif; font-size: 2.2rem; color: var(--gold); font-weight: 700; display: block; }
.precedent-stats .lbl { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.precedent-lessons {
background: var(--light-navy);
border-radius: var(--radius); padding: 24px;
}
.precedent-lessons h3 { font-size: 1rem; margin-bottom: 12px; }
.precedent-lessons li {
list-style: none; padding: 6px 0;
font-size: 0.85rem; color: var(--body);
line-height: 1.4;
}
.precedent-lessons li::before { content: '▸ '; color: var(--gold); }
/* ── FOOTER CTA ── */
.cta-section {
background: linear-gradient(135deg, var(--navy) 0%, var(--light-navy) 100%);
text-align: center; padding: 80px 24px;
}
.cta-section h2 { font-size: 2.2rem; margin-bottom: 12px; }
.cta-section p { color: var(--muted); margin-bottom: 28px; font-size: 1rem; }
.cta-section .cta-big {
display: inline-block;
background: var(--gold); color: var(--navy);
padding: 16px 40px; border-radius: 10px;
font-weight: 700; font-size: 1rem;
text-decoration: none; transition: all 0.2s;
}
.cta-section .cta-big:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(201,168,76,0.35);
}
.cta-section .email { font-size: 0.85rem; color: var(--muted); margin-top: 16px; }
.cta-section .email a { color: var(--gold); text-decoration: none; }
footer {
text-align: center; padding: 24px;
font-size: 0.7rem; color: rgba(232,228,220,0.2);
border-top: 1px solid rgba(201,168,76,0.06);
}
@media (max-width: 768px) {
.hero h1 { font-size: 2rem; }
.hero-metrics { gap: 24px; flex-wrap: wrap; }
.hero-metrics .metric-num { font-size: 1.5rem; }
.model-grid { grid-template-columns: 1fr; }
.model-arrow { transform: rotate(90deg); }
.tier-card { grid-template-columns: 1fr; }
.why-grid { grid-template-columns: 1fr; }
.precedent-stats { gap: 24px; flex-wrap: wrap; }
nav .nav-links { display: none; }
}
</style>
</head>
<body>
<nav>
<div>
<div class="logo">NUR FALAH</div>
<div class="tagline">Sadaqah Jariyah App</div>
</div>
<div class="nav-links">
<a href="#model">Model</a>
<a href="#tiers">Tiers</a>
<a href="#why">Why Us</a>
<a href="#precedent">Proven</a>
</div>
<a href="#contact" class="cta-nav">Start Partnership →</a>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-badge">🤝 PARTNERSHIP OPPORTUNITY</div>
<h1>A Free Muslim Companion App<br><span class="highlight">Funded by Sponsors</span></h1>
<p>Nur Falah is sadaqah jariyah — free forever. Bank and eWallet partners sponsor it. Users give zakat and waqf through a regulated bank trustee. Everyone benefits. Perpetually.</p>
<div class="hero-ctas">
<a href="#tiers" class="primary">View Partnership Tiers →</a>
<a href="#contact" class="secondary">Contact Us</a>
</div>
<div class="hero-metrics">
<div><span class="metric-num">16</span><span class="metric-label">Features</span></div>
<div><span class="metric-num">5×</span><span class="metric-label">Daily Engagements</span></div>
<div><span class="metric-num">PWA</span><span class="metric-label">No App Store</span></div>
<div><span class="metric-num">RM 0</span><span class="metric-label">Free for Users</span></div>
</div>
</section>
<!-- MODEL -->
<section id="model">
<div class="section-label">The Win-Win</div>
<h2>How It Works: <span class="highlight">Three-Sided Value</span></h2>
<p>Nur Falah creates value for users, partners, and society simultaneously — funded entirely by sponsorship, not user fees.</p>
<div class="model-grid">
<div class="model-card">
<div class="icon">👤</div>
<h3>Users</h3>
<p>A free Muslim companion with prayer, Quran, zakat calculation, and perpetual waqf giving through a trusted bank trustee.</p>
</div>
<div class="model-arrow"></div>
<div class="model-card">
<div class="icon">🏛️</div>
<h3>Partners</h3>
<p>5× daily engagement with self-qualifying Muslim users. New account pipeline. Waqf AUM. CSR metrics. First-mover brand advantage.</p>
</div>
<div class="model-arrow"></div>
<div class="model-card">
<div class="icon">🤲</div>
<h3>Society</h3>
<p>Orphans fed. Students educated. Communities watered. Healthcare funded. The Well of Light never runs dry — perpetual sadaqah jariyah.</p>
</div>
</div>
</section>
<!-- TIERS -->
<section id="tiers">
<div class="section-label">Partnership Tiers</div>
<h2>Choose Your <span class="highlight">Partnership Level</span></h2>
<p>Three tiers designed for different partner types — from full bank trustee integration to eWallet distribution to UK market entry.</p>
<div class="tier-grid">
<div class="tier-card">
<div class="tier-icon">🏛️</div>
<div class="tier-content">
<h3>Bank Trustee <span class="sub">Flagship · Nazir / Mutawalli</span></h3>
<div class="price">RM 15K 25K / month</div>
<div class="audience">For: Islamic Banks — Maybank Islamic, Bank Muamalat, Al Rajhi, Tabung Haji</div>
<div class="tier-points">
<span class="tier-point">Official waqf trustee for all user giving</span>
<span class="tier-point">Co-branded PWA: prayer.yourbank.my</span>
<span class="tier-point">5× daily brand engagement per user</span>
<span class="tier-point">New account pipeline via ZakatCalc</span>
<span class="tier-point">Waqf AUM growth + management fees</span>
<span class="tier-point">Shariah audit & transparent reporting</span>
<span class="tier-point">CSR / ESG metrics for annual report</span>
</div>
<div class="tier-targets">
<span class="tier-target">Maybank Islamic</span>
<span class="tier-target">Bank Muamalat ATLAS</span>
<span class="tier-target">Al Rajhi Malaysia</span>
<span class="tier-target">Tabung Haji</span>
</div>
</div>
<a href="#contact" class="tier-cta">Inquire →</a>
</div>
<div class="tier-card">
<div class="tier-icon">💳</div>
<div class="tier-content">
<h3>eWallet Distributor <span class="sub">Mass Reach · Daily Opens</span></h3>
<div class="price">RM 50K 100K / year</div>
<div class="audience">For: eWallets — Touch 'n Go, GrabPay, ShopeePay, Boost</div>
<div class="tier-points">
<span class="tier-point">Prayer mini-app embedded in your wallet</span>
<span class="tier-point">5× daily user engagement boost</span>
<span class="tier-point">Sadaqah transaction volume from micro-giving</span>
<span class="tier-point">Halal merchant integration opportunity</span>
<span class="tier-point">User retention through companion features</span>
<span class="tier-point">Ramadan campaign partnership</span>
<span class="tier-point">Zero dev cost — we provide the PWA</span>
</div>
<div class="tier-targets">
<span class="tier-target">Touch 'n Go eWallet</span>
<span class="tier-target">GrabPay</span>
<span class="tier-target">ShopeePay</span>
<span class="tier-target">Boost</span>
</div>
</div>
<a href="#contact" class="tier-cta">Inquire →</a>
</div>
<div class="tier-card">
<div class="tier-icon">🇬🇧</div>
<div class="tier-content">
<h3>UK Islamic Bank <span class="sub">4M British Muslims · Untapped</span></h3>
<div class="price">£3K 5K / month</div>
<div class="audience">For: Al Rayyan Bank, Gatehouse Bank, BLME</div>
<div class="tier-points">
<span class="tier-point">London/Birmingham/Manchester prayer times</span>
<span class="tier-point">GBP zakat calculator with HMRC tax relief</span>
<span class="tier-point">UK Charity Account integration</span>
<span class="tier-point">GBP-denominated cash waqf</span>
<span class="tier-point">IHT & Islamic will (Hibah) planning</span>
<span class="tier-point">FCA-regulated trustee framework</span>
<span class="tier-point">First Muslim companion app in UK market</span>
</div>
<div class="tier-targets">
<span class="tier-target">Al Rayyan Bank</span>
<span class="tier-target">Gatehouse Bank</span>
<span class="tier-target">BLME</span>
</div>
</div>
<a href="#contact" class="tier-cta">Inquire →</a>
</div>
</div>
</section>
<!-- WHY -->
<section id="why">
<div class="section-label">Why Nur Falah</div>
<h2>What Makes This <span class="highlight">Different</span></h2>
<p>Four reasons why Nur Falah's partnership model is unique in the market — and why timing matters.</p>
<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. Send a link → user taps → 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 5× daily. 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. The partner who signs 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 a full Ramadan campaign built on a ready, tested platform.</p>
</div>
</div>
</section>
<!-- PRECEDENT -->
<section id="precedent">
<div class="section-label">Proven Precedent</div>
<h2>Al Rajhi Bank × <span class="highlight">TheNoor</span> (2023)</h2>
<p>This model works. Al Rajhi Bank partnered with TheNoor — a Muslim companion app — and proved the bank-lifestyle-app model at scale.</p>
<div class="precedent-stats">
<div class="stat"><span class="num">2.8M</span><span class="lbl">Registered Users</span></div>
<div class="stat"><span class="num">197</span><span class="lbl">Countries</span></div>
<div class="stat"><span class="num">2023</span><span class="lbl">Launch Year</span></div>
</div>
<div class="precedent-lessons">
<h3>What We Learned</h3>
<ul>
<li>Banks will sponsor lifestyle apps that drive daily engagement with self-qualifying Muslim users</li>
<li>2.8M users in under 2 years proves demand — organic distribution, not paid ads</li>
<li>TheNoor is ad-based only. Nur Falah goes deeper: charitable giving through the bank as trustee</li>
<li>Al Rajhi promoted TheNoor to its 2M+ customers — customer base = distribution engine</li>
<li>Nur Falah's model is bank + bank: deeper integration, recurring revenue, waqf AUM, not just ads</li>
</ul>
</div>
</section>
<!-- CTA -->
<section id="contact" class="cta-section">
<h2>Let's Build <span class="highlight">Something Perpetual</span></h2>
<p>Contact us to start the conversation. We'll send the full partnership deck and schedule a demo.</p>
<a href="mailto:jauhari.chewan@falah-consultancy.ltd?subject=Nur%20Falah%20Partnership%20Inquiry" class="cta-big">📧 Email Us →</a>
<div class="email">📞 WhatsApp: <a href="https://wa.me/60132250691">+60 13-225 0691</a> · ✉️ <a href="mailto:jauhari.chewan@falah-consultancy.ltd">jauhari.chewan@falah-consultancy.ltd</a></div>
</section>
<footer>
Nur Falah · Free forever · Sadaqah Jariyah<br>
Inspired by the waqf of Uthman ibn Affan (Bir Rumah) and Abdur Rahman bin Auf ﷺ
</footer>
</body>
</html>