{% extends "layout.html" %}

{% block content %}
<section class="section-2025" style="background: var(--gradient-primary); color: white; text-align: center;">
  <div class="container-2025">
    <div class="section-header scroll-reveal">
      <h1 class="section-title serif" style="color: white;">Welcome to {{ church_name }}</h1>
      <p class="section-subtitle" style="color: rgba(255,255,255,0.9);">{{ about_text }}</p>
      <div style="margin-top: 2rem;">
        <a href="/events" class="btn-2025 btn-primary">Join Us This Sabbath</a>
        <a href="/sermons" class="btn-2025 btn-outline">Watch Online</a>
      </div>
    </div>
  </div>
</section>

<section class="section-2025">
  <div class="container-2025">
    <div class="section-header scroll-reveal">
      <h2 class="section-title">Our Core Beliefs</h2>
      <p class="section-subtitle">As Seventh-day Adventists, we accept the Bible as our only creed.</p>
    </div>
    
    <div class="cards-grid">
      <div class="card-2025 scroll-reveal stagger-1">
        <div class="card-icon-2025">
          <i class="fas fa-bible"></i>
        </div>
        <h4 class="card-title">The Holy Scriptures</h4>
        <p class="card-text">The Holy Scriptures are the infallible revelation of God's will.</p>
      </div>
      
      <div class="card-2025 scroll-reveal stagger-2">
        <div class="card-icon-2025">
          <i class="fas fa-cross"></i>
        </div>
        <h4 class="card-title">The Trinity</h4>
        <p class="card-text">There is one God: Father, Son, and Holy Spirit.</p>
      </div>
      
      <div class="card-2025 scroll-reveal stagger-3">
        <div class="card-icon-2025">
          <i class="fas fa-calendar-week"></i>
        </div>
        <h4 class="card-title">The Sabbath</h4>
        <p class="card-text">The seventh day is the Sabbath of the Lord our God.</p>
      </div>
    </div>
  </div>
</section>
{% endblock %}