index.html

---
layout: default
title: Home
---
{% include video-bg.html %}
<div class="content">
    <div class="text-center px-6">
        <h1 class="text-6xl font-bold mb-4 glow-heading">The Kingdom of Code</h1>
        <p class="text-2xl mb-8">Exploring the Intersection of Faith and Technology</p>
        
        {% assign latest_post = site.posts.first %}
        {% if latest_post %}
        <div id="featured-post" class="max-w-2xl mx-auto bg-gray-900/80 backdrop-blur-sm p-6 rounded-lg border border-white/10 mb-8">
            <h1 class="text-4xl font-bold mb-2 text-indigo-400 glow-heading">
                <a href="#featured-post" class="hover:opacity-80">Featured Post</a>
            </h1>
            <h3 class="text-xl font-bold mb-4">{{ latest_post.title }}</h3>
            <p class="mb-4 text-gray-300">{{ latest_post.summary }}</p>
            <a href="{{ latest_post.url | relative_url }}" class="learn-more-btn inline-block">Read More</a>
        </div>
        {% endif %}

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            <div class="bg-gray-900/80 backdrop-blur-sm p-6 rounded-lg border border-white/10">
                <h2 class="text-2xl font-bold mb-4">About</h2>
                <p class="mb-4 text-gray-300">Learn more about The Kingdom of Code and its mission.</p>
                <a href="/about.html" class="learn-more-btn inline-block">Learn More</a>
            </div>
            <div class="bg-gray-900/80 backdrop-blur-sm p-6 rounded-lg border border-white/10">
                <h2 class="text-2xl font-bold mb-4">Podcast</h2>
                <p class="mb-4 text-gray-300">Check out our podcast series exploring faith and technology.</p>
                <a href="/podcast.html" class="learn-more-btn inline-block">Learn More</a>
            </div>
        </div>
    </div>
</div>