389 lines
20 KiB
Plaintext
389 lines
20 KiB
Plaintext
---
|
|
import MainLayout from '../../layouts/MainLayout.astro';
|
|
import { getChurchName } from '../../lib/bindings.js';
|
|
|
|
let churchName = 'Church';
|
|
try {
|
|
churchName = getChurchName();
|
|
} catch (e) {
|
|
console.error('Failed to get church name:', e);
|
|
}
|
|
---
|
|
|
|
<MainLayout title={`Second Angel's Message - ${churchName}`} description="Babylon is fallen! Explore the second angel's message and God's call to come out of false religious systems.">
|
|
|
|
<!-- Navigation Breadcrumb -->
|
|
<section class="py-4 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<nav class="flex items-center space-x-2 text-sm">
|
|
<a href="/" class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">Home</a>
|
|
<i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i>
|
|
<a href="/three-angels" class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">Three Angels</a>
|
|
<i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i>
|
|
<span class="text-orange-600 dark:text-orange-400 font-medium">Second Angel</span>
|
|
</nav>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="py-20 bg-gradient-to-br from-orange-900 via-orange-800 to-red-900 text-white relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Cpath d="M30 30c0 16.569-13.431 30-30 30s-30-13.431-30-30 13.431-30 30-30 30 13.431 30 30z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-30"></div>
|
|
|
|
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center">
|
|
<div class="w-24 h-24 bg-gradient-to-br from-orange-400 to-orange-600 rounded-3xl flex items-center justify-center mx-auto mb-8 shadow-2xl">
|
|
<span class="text-4xl font-bold text-white">2</span>
|
|
</div>
|
|
|
|
<h1 class="text-5xl lg:text-7xl font-bold mb-6">
|
|
The Second Angel
|
|
</h1>
|
|
|
|
<p class="text-xl lg:text-2xl text-orange-100 max-w-4xl mx-auto leading-relaxed">
|
|
"Babylon is fallen, is fallen, that great city, because she has made all nations
|
|
drink of the wine of the wrath of her fornication."
|
|
</p>
|
|
|
|
<cite class="block mt-6 text-orange-300 font-semibold text-lg">— Revelation 14:8</cite>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Core Message -->
|
|
<section class="py-16 bg-white dark:bg-gray-900">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
|
|
|
<!-- Content -->
|
|
<div>
|
|
<h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-6">
|
|
Babylon is Fallen
|
|
</h2>
|
|
|
|
<p class="text-lg text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
|
|
The second angel announces the spiritual fall of <span class="text-orange-600 dark:text-orange-400 font-semibold">Babylon</span> -
|
|
representing all false religious systems that have departed from biblical truth and embraced human traditions
|
|
over God's commandments.
|
|
</p>
|
|
|
|
<p class="text-lg text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
|
|
This message reveals how religious organizations have given the world the
|
|
<span class="text-orange-600 dark:text-orange-400 font-semibold">"wine of Babylon"</span> -
|
|
false doctrines that intoxicate people with error, leading them away from pure biblical worship.
|
|
</p>
|
|
|
|
<div class="bg-gradient-to-br from-orange-50 to-red-50 dark:from-gray-800 dark:to-gray-700 rounded-2xl p-6 border border-orange-100 dark:border-gray-600">
|
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">Prophetic Connection</h3>
|
|
<blockquote class="text-orange-700 dark:text-orange-300 italic">
|
|
"Come out of her, my people, lest you share in her sins, and lest you receive of her plagues."
|
|
</blockquote>
|
|
<cite class="text-sm text-gray-600 dark:text-gray-400 mt-2 block">Revelation 18:4</cite>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Visual Element -->
|
|
<div class="relative">
|
|
<div class="bg-gradient-to-br from-orange-100 to-red-100 dark:from-gray-800 dark:to-gray-700 rounded-3xl p-8 lg:p-12">
|
|
<div class="text-center">
|
|
<div class="w-32 h-32 bg-gradient-to-br from-orange-500 to-orange-600 rounded-full flex items-center justify-center mx-auto mb-6 shadow-xl">
|
|
<i data-lucide="building" class="w-16 h-16 text-white"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Spiritual Babylon</h3>
|
|
<p class="text-gray-600 dark:text-gray-300">
|
|
All religious systems that teach contrary to God's Word and His commandments.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- What is Babylon -->
|
|
<section class="py-20 bg-gray-50 dark:bg-gray-800">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
|
|
Understanding Modern Babylon
|
|
</h2>
|
|
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
|
Babylon represents more than one church - it's a system of false worship that spans denominations
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
|
|
<!-- False Doctrines -->
|
|
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center mx-auto mb-6">
|
|
<i data-lucide="scroll" class="w-8 h-8 text-white"></i>
|
|
</div>
|
|
|
|
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 text-center">False Doctrines</h3>
|
|
|
|
<ul class="space-y-3 text-sm text-gray-600 dark:text-gray-300">
|
|
<li class="flex items-center space-x-3">
|
|
<i data-lucide="x" class="w-4 h-4 text-red-500 flex-shrink-0"></i>
|
|
<span>Sunday worship instead of Sabbath</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3">
|
|
<i data-lucide="x" class="w-4 h-4 text-red-500 flex-shrink-0"></i>
|
|
<span>Immortality of the soul</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3">
|
|
<i data-lucide="x" class="w-4 h-4 text-red-500 flex-shrink-0"></i>
|
|
<span>Eternal torment in hell</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3">
|
|
<i data-lucide="x" class="w-4 h-4 text-red-500 flex-shrink-0"></i>
|
|
<span>Infant baptism</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Human Traditions -->
|
|
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center mx-auto mb-6">
|
|
<i data-lucide="users" class="w-8 h-8 text-white"></i>
|
|
</div>
|
|
|
|
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 text-center">Human Traditions</h3>
|
|
|
|
<ul class="space-y-3 text-sm text-gray-600 dark:text-gray-300">
|
|
<li class="flex items-center space-x-3">
|
|
<i data-lucide="x" class="w-4 h-4 text-orange-500 flex-shrink-0"></i>
|
|
<span>Christmas and Easter celebrations</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3">
|
|
<i data-lucide="x" class="w-4 h-4 text-orange-500 flex-shrink-0"></i>
|
|
<span>Tradition over Scripture</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3">
|
|
<i data-lucide="x" class="w-4 h-4 text-orange-500 flex-shrink-0"></i>
|
|
<span>Papal authority over Bible</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3">
|
|
<i data-lucide="x" class="w-4 h-4 text-orange-500 flex-shrink-0"></i>
|
|
<span>Mary worship and saint intercession</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Worldly Compromise -->
|
|
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center mx-auto mb-6">
|
|
<i data-lucide="globe" class="w-8 h-8 text-white"></i>
|
|
</div>
|
|
|
|
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 text-center">Worldly Compromise</h3>
|
|
|
|
<ul class="space-y-3 text-sm text-gray-600 dark:text-gray-300">
|
|
<li class="flex items-center space-x-3">
|
|
<i data-lucide="x" class="w-4 h-4 text-purple-500 flex-shrink-0"></i>
|
|
<span>Political alliances and power</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3">
|
|
<i data-lucide="x" class="w-4 h-4 text-purple-500 flex-shrink-0"></i>
|
|
<span>Materialism and wealth focus</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3">
|
|
<i data-lucide="x" class="w-4 h-4 text-purple-500 flex-shrink-0"></i>
|
|
<span>Entertainment over worship</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3">
|
|
<i data-lucide="x" class="w-4 h-4 text-purple-500 flex-shrink-0"></i>
|
|
<span>Compromise with sin</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- The Wine of Babylon -->
|
|
<section class="py-16 bg-white dark:bg-gray-900">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
|
|
|
<!-- Visual -->
|
|
<div class="relative order-2 lg:order-1">
|
|
<div class="bg-gradient-to-br from-red-100 to-purple-100 dark:from-gray-800 dark:to-gray-700 rounded-3xl p-8 lg:p-12">
|
|
<div class="text-center">
|
|
<div class="w-32 h-32 bg-gradient-to-br from-red-500 to-red-600 rounded-full flex items-center justify-center mx-auto mb-6 shadow-xl">
|
|
<i data-lucide="wine" class="w-16 h-16 text-white"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">The Wine of Wrath</h3>
|
|
<p class="text-gray-600 dark:text-gray-300">
|
|
False doctrines that intoxicate the mind and lead people away from God's truth.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="order-1 lg:order-2">
|
|
<h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-6">
|
|
The Wine of Babylon
|
|
</h2>
|
|
|
|
<p class="text-lg text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
|
|
The <span class="text-orange-600 dark:text-orange-400 font-semibold">"wine"</span> represents false teachings
|
|
that intoxicate people's minds, making them unable to think clearly about spiritual truth.
|
|
Just as alcohol impairs judgment, these doctrines impair spiritual discernment.
|
|
</p>
|
|
|
|
<p class="text-lg text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
|
|
When churches teach traditions over Scripture, when they change God's law, when they offer
|
|
easy salvation without true repentance - this is the wine that makes "all nations" spiritually drunk.
|
|
</p>
|
|
|
|
<div class="bg-gradient-to-br from-red-50 to-orange-50 dark:from-gray-800 dark:to-gray-700 rounded-2xl p-6 border border-red-100 dark:border-gray-600">
|
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">The Great Deception</h3>
|
|
<blockquote class="text-red-700 dark:text-red-300 italic">
|
|
"For false christs and false prophets will rise and show great signs and wonders to deceive,
|
|
if possible, even the elect."
|
|
</blockquote>
|
|
<cite class="text-sm text-gray-600 dark:text-gray-400 mt-2 block">Matthew 24:24</cite>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Come Out Call -->
|
|
<section class="py-20 bg-orange-50 dark:bg-gray-800">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-6">
|
|
"Come Out of Her, My People"
|
|
</h2>
|
|
|
|
<p class="text-xl text-gray-600 dark:text-gray-300 mb-12 leading-relaxed">
|
|
God's loving call to leave false religious systems and return to biblical truth
|
|
</p>
|
|
|
|
<div class="grid md:grid-cols-2 gap-8 text-left">
|
|
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg">
|
|
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Why Come Out?</h3>
|
|
<ul class="space-y-4 text-gray-600 dark:text-gray-300">
|
|
<li class="flex items-center space-x-3">
|
|
<i data-lucide="heart" class="w-5 h-5 text-orange-500 flex-shrink-0"></i>
|
|
<span>God loves His people in every denomination</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3">
|
|
<i data-lucide="shield" class="w-5 h-5 text-orange-500 flex-shrink-0"></i>
|
|
<span>Protect yourself from receiving Babylon's plagues</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3">
|
|
<i data-lucide="book" class="w-5 h-5 text-orange-500 flex-shrink-0"></i>
|
|
<span>Follow the Bible alone as your guide</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3">
|
|
<i data-lucide="star" class="w-5 h-5 text-orange-500 flex-shrink-0"></i>
|
|
<span>Prepare for Christ's second coming</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg">
|
|
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">How to Come Out</h3>
|
|
<ul class="space-y-4 text-gray-600 dark:text-gray-300">
|
|
<li class="flex items-center space-x-3">
|
|
<i data-lucide="search" class="w-5 h-5 text-orange-500 flex-shrink-0"></i>
|
|
<span>Study Scripture for yourself (Acts 17:11)</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3">
|
|
<i data-lucide="praying-hands" class="w-5 h-5 text-orange-500 flex-shrink-0"></i>
|
|
<span>Pray for wisdom and guidance</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3">
|
|
<i data-lucide="users" class="w-5 h-5 text-orange-500 flex-shrink-0"></i>
|
|
<span>Find fellowship with commandment-keeping believers</span>
|
|
</li>
|
|
<li class="flex items-center space-x-3">
|
|
<i data-lucide="heart-handshake" class="w-5 h-5 text-orange-500 flex-shrink-0"></i>
|
|
<span>Love others while standing for truth</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Historical Fulfillment -->
|
|
<section class="py-16 bg-white dark:bg-gray-900">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-6">Historical Fulfillment</h2>
|
|
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
|
This message began fulfillment during the Protestant Reformation and continues today
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-3 gap-8">
|
|
<div class="bg-gradient-to-br from-orange-50 to-red-50 dark:from-gray-800 dark:to-gray-700 rounded-2xl p-8 text-center">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center mx-auto mb-6">
|
|
<i data-lucide="scroll" class="w-8 h-8 text-white"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">Reformation Era</h3>
|
|
<p class="text-gray-600 dark:text-gray-300 text-sm">
|
|
Luther, Calvin, and other reformers began exposing papal errors and calling people back to Scripture.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-gradient-to-br from-orange-50 to-red-50 dark:from-gray-800 dark:to-gray-700 rounded-2xl p-8 text-center">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center mx-auto mb-6">
|
|
<i data-lucide="calendar" class="w-8 h-8 text-white"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">1844 Onward</h3>
|
|
<p class="text-gray-600 dark:text-gray-300 text-sm">
|
|
As the judgment hour message went forth, the second angel's message gained new urgency and clarity.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-gradient-to-br from-orange-50 to-red-50 dark:from-gray-800 dark:to-gray-700 rounded-2xl p-8 text-center">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center mx-auto mb-6">
|
|
<i data-lucide="clock" class="w-8 h-8 text-white"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">Final Crisis</h3>
|
|
<p class="text-gray-600 dark:text-gray-300 text-sm">
|
|
Before Christ returns, this message will reach its climax as Babylon's true nature is fully revealed.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Navigation to Other Angels -->
|
|
<section class="py-16 bg-gray-50 dark:bg-gray-800">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">Continue the Journey</h2>
|
|
<p class="text-lg text-gray-600 dark:text-gray-300">Explore the complete Three Angels' Message</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<a href="/three-angels/first" class="group bg-gradient-to-br from-primary-50 to-blue-50 dark:from-gray-800 dark:to-gray-700 rounded-2xl p-8 text-center hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
|
|
<span class="text-xl font-bold text-white">1</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">First Angel</h3>
|
|
<p class="text-gray-600 dark:text-gray-300">Fear God and give glory</p>
|
|
</a>
|
|
|
|
<a href="/three-angels" class="group bg-gradient-to-br from-gray-50 to-blue-50 dark:from-gray-800 dark:to-gray-700 rounded-2xl p-8 text-center hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
|
<i data-lucide="users" class="w-12 h-12 text-primary-500 mx-auto mb-4 group-hover:scale-110 transition-transform"></i>
|
|
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Overview</h3>
|
|
<p class="text-gray-600 dark:text-gray-300">See all three messages together</p>
|
|
</a>
|
|
|
|
<a href="/three-angels/third" class="group bg-gradient-to-br from-red-50 to-pink-50 dark:from-gray-800 dark:to-gray-700 rounded-2xl p-8 text-center hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
|
|
<span class="text-xl font-bold text-white">3</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Third Angel</h3>
|
|
<p class="text-gray-600 dark:text-gray-300">Mark of the beast</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</MainLayout> |