Skip to content

Instantly share code, notes, and snippets.

@PandaWhoCodes

PandaWhoCodes/faithtech-impact.html

Created April 14, 2026 17:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save PandaWhoCodes/d41aa1c49de1517a05b1341a1039f811 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save PandaWhoCodes/d41aa1c49de1517a05b1341a1039f811 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
faithtech-impact.html
<!DOCTYPE html>
<html lang en>
<head>
<meta charset utf-8>
<meta name=viewport content=width=device-width, initial-scale=1>
<title>FaithTech — Global Impact Report</title>
<script src=https://cdn.tailwindcss.com></script>
<link rel=preconnect href=https://fonts.googleapis.com>
<link href=https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap rel=stylesheet>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: { sans: ['Inter', 'system-ui', 'sans'] },
colors: {
brand: { 50:'#eef2ff',100:'#dbe4ff',200:'#bac8ff',300:'#91a7ff',400:'#748ffc',500:'#5c7cfa',600:'#4c6ef5',700:'#4263eb',800:'#3b5bdb',900:'#364fc7' }
}
}
}
}
</script>
<style>
html { scroll-behavior: smooth; }
.gradient-hero { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); }
.gradient-card { background: linear-gradient(145deg, #ffffff 0%, #f8faff 100%); }
.text-gradient { background: linear-gradient(90deg, #748ffc, #91a7ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.glow { box-shadow: 0 0 60px rgba(92,124,250,0.15); }
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(92,124,250,0.12); }
.project-card:hover { transform: translateY(-3px); }
.cycle-step:hover .cycle-icon { transform: scale(1.1); box-shadow: 0 0 20px rgba(92,124,250,0.4); }
@keyframes float { 0%,100%{ transform:translateY(0px); } 50%{ transform:translateY(-8px); } }
.float { animation: float 4s ease-in-out infinite; }
@keyframes pulse-ring { 0%{ transform:scale(0.95); opacity:1; } 100%{ transform:scale(1.3); opacity:0; } }
.pulse-ring::before { content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid #5c7cfa; animation:pulse-ring 2s ease-out infinite; }
</style>
</head>
<body class=\"font-sans bg-slate-50 text-slate-900 antialiased\">
<!-- HERO -->
<section class=\"gradient-hero text-white relative overflow-hidden\">
<div class=\"absolute inset-0 opacity-10\">
<div class=\"absolute top-20 left-10 w-72 h-72 bg-blue-500 rounded-full blur-3xl\"></div>
<div class=\"absolute bottom-10 right-20 w-96 h-96 bg-indigo-500 rounded-full blur-3xl\"></div>
</div>
<div class=\"relative max-w-6xl mx-auto px-6 py-24 text-center\">
<div class=\"inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm rounded-full px-4 py-1.5 mb-8 text-sm\">
<span class=\"w-2 h-2 bg-green-400 rounded-full animate-pulse\"></span>
Live Impact Report · 2024
</div>
<h1 class=\"text-5xl md:text-7xl font-black mb-4 tracking-tight\">FaithTech</h1>
<p class=\"text-2xl md:text-3xl font-light text-blue-200 mb-6\">Global Impact Report</p>
<p class=\"text-slate-300 text-lg max-w-2xl mx-auto leading-relaxed\">
A worldwide community of technologists, designers, and mission-driven builders
using technology to serve the Kingdom.
</p>
<div class=\"mt-12 flex justify-center gap-8 flex-wrap\">
<div class=\"text-center\">
<div class=\"text-4xl font-black text-gradient\">52</div>
<div class=\"text-slate-400 text-sm mt-1\">Communities</div>
</div>
<div class=\"text-center\">
<div class=\"text-4xl font-black text-gradient\">17</div>
<div class=\"text-slate-400 text-sm mt-1\">Countries</div>
</div>
<div class=\"text-center\">
<div class=\"text-4xl font-black text-gradient\">10.6K+</div>
<div class=\"text-slate-400 text-sm mt-1\">Subscribers</div>
</div>
<div class=\"text-center\">
<div class=\"text-4xl font-black text-gradient\">178</div>
<div class=\"text-slate-400 text-sm mt-1\">Events</div>
</div>
</div>
</div>
</section>
<!-- GLOBAL REACH -->
<section class=\"max-w-6xl mx-auto px-6 py-20\">
<div class=\"text-center mb-14\">
<span class=\"text-brand-600 font-semibold text-sm uppercase tracking-widest\">Worldwide</span>
<h2 class=\"text-4xl font-bold mt-2 mb-4\">Global Reach</h2>
<p class=\"text-slate-500 max-w-xl mx-auto\">52FaithTech communities spanning 17 countries, connecting thousands of builders worldwide.</p>
</div>
<div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">
<div class=\"stat-card bg-white rounded-2xl p-8 text-center border border-slate-100 transition-all duration-300 glow\">
<div class=\"w-16 h-16 bg-brand-50 rounded-2xl flex items-center justify-center mx-auto mb-5\">
<svg class=\"w-8 h-8 text-brand-600\" fill=none stroke=currentColor viewBox=\"0 0 24 24\"><circle cx=12 cy=12 r=10></circle><path d=\"M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"></path></svg>
</div>
<div class=\"text-5xl font-black text-slate-900 mb-2\">52</div>
<div class=\"text-brand-600 font-semibold mb-1\">Communities</div>
<div class=\"text-slate-400 text-sm\">Across the globe</div>
</div>
<div class=\"stat-card bg-white rounded-2xl p-8 text-center border border-slate-100 transition-all duration-300 glow\">
<div class=\"w-16 h-16 bg-emerald-50 rounded-2xl flex items-center justify-center mx-auto mb-5\">
<svg class=\"w-8 h-8 text-emerald-600\" fill=none stroke=currentColor viewBox=\"0 0 24 24\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"></path></svg>
</div>
<div class=\"text-5xl font-black text-slate-900 mb-2\">17</div>
<div class=\"text-emerald-600 font-semibold mb-1\">Countries</div>
<div class=\"text-slate-400 text-sm\">Nations reached</div>
</div>
<div class=\"stat-card bg-white rounded-2xl p-8 text-center border border-slate-100 transition-all duration-300 glow\">
<div class=\"w-16 h-16 bg-violet-50 rounded-2xl flex items-center justify-center mx-auto mb-5\">
<svg class=\"w-8 h-8 text-violet-600\" fill=none stroke=currentColor viewBox=\"0 0 24 24\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"></path><circle cx=9 cy=7 r=4></circle><path d=\"M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75\"></path></svg>
</div>
<div class=\"text-5xl font-black text-slate-900 mb-2\">5,098</div>
<div class=\"text-violet-600 font-semibold mb-1\">Event Registrations</div>
<div class=\"text-slate-400 text-sm\">Across 178 events</div>
</div>
</div>
<div class=\"mt-8 bg-white rounded-2xl p-8 border border-slate-100 text-center\">
<div class=\"flex flex-col md:flex-row items-center justify-center gap-8\">
<div class=\"flex items-center gap-3\">
<span class=\"text-4xl font-black text-slate-900\">10,620+</span>
<div class=\"text-left\">
<div class=\"font-semibold text-slate-700\">Subscribers</div>
<div class=\"text-slate-400 text-sm\">receiving updates</div>
</div>
</div>
<div class=\"hidden md:block w-px h-12 bg-slate-100\"></div>
<div class=\"flex items-center gap-3\">
<span class=\"text-4xl font-black text-slate-900\">178</span>
<div class=\"text-left\">
<div class=\"font-semibold text-slate-700\">Events Hosted</div>
<div class=\"text-slate-400 text-sm\">in 2024 alone</div>
</div>
</div>
<div class=\"hidden md:block w-px h-12 bg-slate-100\"></div>
<div class=\"flex items-center gap-3\">
<span class=\"text-4xl font-black text-slate-900\">5,098</span>
<div class=\"text-left\">
<div class=\"font-semibold text-slate-700\">Registrations</div>
<div class=\"text-slate-400 text-sm\">community driven</div>
</div>
</div>
</div>
</div>
</section>
<!-- FINANCIALS -->
<section class=\"bg-white border-y border-slate-100\">
<div class=\"max-w-6xl mx-auto px-6 py-20\">
<div class=\"text-center mb-14\">
<span class=\"text-brand-600 font-semibold text-sm uppercase tracking-widest\">2024 financials</span>
<h2 class=\"text-4xl font-bold mt-2 mb-4\">Financial Stewardship</h2>
<p class=\"text-slate-500 max-w-xl mx-auto\">Transparent, faithful management of resources to maximize Kingdom impact.</p>
</div>
<div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">
<!-- Revenue highlight -->
<div class=\"bg-gradient-to-br from-slate-900 to-slate-800 text-white rounded-3xl p-10 relative overflow-hidden\">
<div class=\"absolute top-0 right-0 w-64 h-64 bg-brand-500 rounded-full blur-3xl opacity-10\"></div>
<div class=\"relative\">
<div class=\"text-slate-400 text-sm font-medium uppercase tracking-wider mb-3\">Total Revenue 2024</div>
<div class=\"text-6xl font-black mb-6\">$1.36M</div>
<div class=\"flex items-center gap-2 mb-8\">
<div class=\"flex-1 bg-white/10 rounded-full h-3\">
<div class=\"bg-brand-400 h-3 rounded-full\" style=\"width:87.5%\"></div>
</div>
<span class=\"text-brand-300 font-bold\">87.5%</span>
</div>
<p class=\"text-slate-300 leading-relaxed\">of every dollar goes directly to programs and staff — living out our commitment to faithful stewardship.</p>
</div>
</div>
<!-- Key metrics -->
<div class=\"grid grid-cols-2 gap-5\">
<div class=\"bg-slate-50 rounded-2xl p-6 text-center border border-slate-100\">
<div class=\"text-3xl font-black text-slate-900 mb-1\">55</div>
<div class=\"text-slate-500 text-sm font-medium\">Active Projects</div>
</div>
<div class=\"bg-slate-50 rounded-2xl p-6 text-center border border-slate-100\">
<div class=\"text-3xl font-black text-slate-900 mb-1\">28</div>
<div class=\"text-slate-500 text-sm font-medium\">Deployed Products</div>
</div>
<div class=\"bg-slate-50 rounded-2xl p-6 text-center border border-slate-100\">
<div class=\"text-3xl font-black text-slate-900 mb-1\">442</div>
<div class=\"text-slate-500 text-sm font-medium\">Active Builders</div>
</div>
<div class=\"bg-slate-50 rounded-2xl p-6 text-center border border-slate-100\">
<div class=\"text-3xl font-black text-slate-900 mb-1\">87.5%</div>
<div class=\"text-slate-500 text-sm font-medium\">Programs & Staff</div>
</div>
</div>
</div>
</div>
</section>
<!-- PROJECTS & LABS -->
<section class=\"max-w-6xl mx-auto px-6 py-20\">
<div class=\"text-center mb-14\">
<span class=\"text-brand-600 font-semibold text-sm uppercase tracking-widest\">Innovation Labs</span>
<h2 class=\"text-4xl font-bold mt-2 mb-4\">Projects & Labs</h2>
<p class=\"text-slate-500 max-w-xl mx-auto\">Real technology solving real Kingdom problems across the globe.</p>
</div>
<div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">
<!-- Akashi -->
<div class=\"project-card bg-white rounded-2xl border border-slate-100 overflow-hidden transition-all duration-300 hover:shadow-xl\">
<div class=\"h-40 bg-gradient-to-br from-rose-400 to-pink-600 flex items-center justify-center relative\">
<div class=\"absolute inset-0 bg-black/10\"></div>
<div class=\"relative text-white text-center\">
<div class=\"text-5xl mb-2\">🏯</div>
<div class=\"font-bold text-lg\">Tokyo, Japan</div>
</div>
</div>
<div class=\"p-7\">
<div class=\"flex items-center gap-2 mb-3\">
<span class=\"bg-rose-100 text-rose-700 text-xs font-bold px-2.5 py-1 rounded-full\">Mobile App</span>
</div>
<h3 class=\"text-xl font-bold mb-2\">Akashi</h3>
<p class=\"text-slate-500 leading-relaxed\">A mobile application for sharing personal testimonies — helping believers document and share how God is moving in their lives.</p>
</div>
</div>
<!-- Banda Health -->
<div class=\"project-card bg-white rounded-2xl border border-slate-100 overflow-hidden transition-all duration-300 hover:shadow-xl\">
<div class=\"h-40 bg-gradient-to-br from-emerald-400 to-teal-600 flex items-center justify-center relative\">
<div class=\"absolute inset-0 bg-black/10\"></div>
<div class=\"relative text-white text-center\">
<div class=\"text-5xl mb-2\">🏥</div>
<div class=\"font-bold text-lg\">Kenya</div>
</div>
</div>
<div class=\"p-7\">
<div class=\"flex items-center gap-2 mb-3\">
<span class=\"bg-emerald-100 text-emerald-700 text-xs font-bold px-2.5 py-1 rounded-full\">Health Tech</span>
</div>
<h3 class=\"text-xl font-bold mb-2\">Banda Health</h3>
<p class=\"text-slate-500 leading-relaxed\">Clinic management software serving <strong>104 clinics</strong> and <strong>550,000 patients</strong> annually — transforming healthcare delivery across Kenya.</p>
</div>
</div>
<!-- Searching for Hope -->
<div class=\"project-card bg-white rounded-2xl border border-slate-100 overflow-hidden transition-all duration-300 hover:shadow-xl\">
<div class=\"h-40 bg-gradient-to-br from-amber-400 to-orange-600 flex items-center justify-center relative\">
<div class=\"absolute inset-0 bg-black/10\"></div>
<div class=\"relative text-white text-center\">
<div class=\"text-5xl mb-2\">🔍</div>
<div class=\"font-bold text-lg\">Global</div>
</div>
</div>
<div class=\"p-7\">
<div class=\"flex items-center gap-2 mb-3\">
<span class=\"bg-amber-100 text-amber-700 text-xs font-bold px-2.5 py-1 rounded-full\">Web Platform</span>
</div>
<h3 class=\"text-xl font-bold mb-2\">Searching for Hope</h3>
<p class=\"text-slate-500 leading-relaxed\">Redirects harmful domain searches to Gospel resources — reaching approximately <strong>16,000 monthly visitors</strong> with hope.</p>
</div>
</div>
</div>
</section>
<!-- 4D CYCLE -->
<section class=\"bg-slate-900 text-white\">
<div class=\"max-w-6xl mx-auto px-6 py-20\">
<div class=\"text-center mb-16\">
<span class=\"text-brand-400 font-semibold text-sm uppercase tracking-widest\">Methodology</span>
<h2 class=\"text-4xl font-bold mt-2 mb-4\">The 4D Cycle</h2>
<p class=\"text-slate-400 max-w-xl mx-auto\">FaithTech's framework for building technology that truly serves the Kingdom.</p>
</div>
<div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">
<!-- Discover -->
<div class=\"cycle-step text-center group\">
<div class=\"relative inline-flex mb-6\">
<div class=\"cycle-icon w-20 h-20 bg-brand-500 rounded-2xl flex items-center justify-center text-3xl transition-all duration-300 shadow-lg shadow-brand-500/30\">1️⃣</div>
</div>
<h3 class=\"text-xl font-bold mb-2 text-brand-300\">Discover</h3>
<div class=\"text-white font-semibold mb-2\">See the Problem</div>
<p class=\"text-slate-400 text-sm leading-relaxed\">Lament & Empathy — entering into others' pain to truly understand the challenge before building anything.</p>
</div>
<!-- Discern -->
<div class=\"cycle-step text-center group\">
<div class=\"relative inline-flex mb-6\">
<div class=\"cycle-icon w-20 h-20 bg-violet-500 rounded-2xl flex items-center justify-center text-3xl transition-all duration-300 shadow-lg shadow-violet-500/30\">2️⃣</div>
</div>
<h3 class=\"text-xl font-bold mb-2 text-violet-300\">Discern</h3>
<div class=\"text-white font-semibold mb-2\">Seek the Solution</div>
<p class=\"text-slate-400 text-sm leading-relaxed\">Wisdom & Prayer — listening for God's direction before committing to any solution path.</p>
</div>
<!-- Develop -->
<div class=\"cycle-step text-center group\">
<div class=\"relative inline-flex mb-6\">
<div class=\"cycle-icon w-20 h-20 bg-emerald-500 rounded-2xl flex items-center justify-center text-3xl transition-all duration-300 shadow-lg shadow-emerald-500/30\">3️⃣</div>
</div>
<h3 class=\"text-xl font-bold mb-2 text-emerald-300\">Develop</h3>
<div class=\"text-white font-semibold mb-2\">Build the Tool</div>
<p class=\"text-slate-400 text-sm leading-relaxed\">Co-creation with the Spirit — building with prayer, humility, and dependence on the Author of all good things.</p>
</div>
<!-- Demonstrate -->
<div class=\"cycle-step text-center group\">
<div class=\"relative inline-flex mb-6\">
<div class=\"cycle-icon w-20 h-20 bg-rose-500 rounded-2xl flex items-center justify-center text-3xl transition-all duration-300 shadow-lg shadow-rose-500/30\">4️⃣</div>
</div>
<h3 class=\"text-xl font-bold mb-2 text-rose-300\">Demonstrate</h3>
<div class=\"text-white font-semibold mb-2\">Measure the Impact</div>
<p class=\"text-slate-400 text-sm leading-relaxed\">Redemptive Love & Friendship — evaluating outcomes through the lens of relational transformation.</p>
</div>
</div>
</div>
</section>
<!-- CHENNAI -->
<section class=\"max-w-6xl mx-auto px-6 py-20\">
<div class=\"text-center mb-14\">
<span class=\"text-brand-600 font-semibold text-sm uppercase tracking-widest\">City Spotlight</span>
<h2 class=\"text-4xl font-bold mt-2 mb-4\">Chennai, India</h2>
<p class=\"text-slate-500 max-w-xl mx-auto\">An active FaithTech community on the ground in South India.</p>
</div>
<div class=\"max-w-3xl mx-auto\">
<div class=\"bg-white rounded-3xl border border-slate-100 overflow-hidden shadow-lg\">
<div class=\"h-32 bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600\"></div>
<div class=\"px-10 pb-10 -mt-12 relative\">
<div class=\"w-24 h-24 bg-white rounded-2xl flex items-center justify-center text-4xl mb-6 shadow-lg mx-auto\">🇮🇳</div>
<div class=\"text-center\">
<h3 class=\"text-2xl font-bold mb-1\">FaithTech Chennai</h3>
<p class=\"text-slate-400 mb-8\">South India's tech-for-kingdom community</p>
</div>
<div class=\"grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8\">
<div class=\"bg-slate-50 rounded-xl p-5\">
<div class=\"text-slate-400 text-xs font-semibold uppercase tracking-wider mb-2\">City Lead</div>
<div class=\"font-bold text-slate-900\">Ebenezer Elias</div>
</div>
<div class=\"bg-slate-50 rounded-xl p-5\">
<div class=\"text-slate-400 text-xs font-semibold uppercase tracking-wider mb-2\">Meetup Lead</div>
<div class=\"font-bold text-slate-900\">Michael Jerome</div>
</div>
</div>
<div class=\"bg-slate-50 rounded-xl p-5 mb-8\">
<div class=\"text-slate-400 text-xs font-semibold uppercase tracking-wider mb-2\">Recent Project</div>
<div class=\"font-bold text-slate-900 text-lg\">Faith Network</div>
<div class=\"text-slate-500 text-sm mt-1\">An app for biblical mentorship — connecting believers for intentional spiritual growth and discipleship.</div>
</div>
<div class=\"flex flex-col sm:flex-row items-center justify-center gap-4\">
<a href=\"https://instagram.com/faithtech_chn\" target=\"_blank\" class=\"inline-flex items-center gap-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold px-6 py-3 rounded-xl hover:opacity-90 transition-opacity\">
<svg class=\"w-5 h-5\" fill=currentColor viewBox=\"0 0 24 24\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z\"></path></svg>
@faithtech_chn
</a>
<span class=\"text-slate-400 text-sm\">Follow our journey</span>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class=\"bg-slate-900 text-slate-400 py-10\">
<div class=\"max-w-6xl mx-auto px-6 text-center\">
<div class=\"text-white font-bold text-xl mb-2\">FaithTech</div>
<p class=\"text-sm\">Building technology for the Kingdom · 2024 Impact Report</p>
<div class=\"mt-6 flex justify-center gap-6 text-sm\">
<span>52 Communities</span>
<span>·</span>
<span>17 Countries</span>
<span>·</span>
<span>$1.36M Revenue</span>
<span>·</span>
<span>442 Builders</span>
</div>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment