---
// src/pages/projects/obsidian.astro
import BaseLayout from '../../layouts/BaseLayout.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';

const title = "Obsidian Templates | ArgoBox";
const description = "A collection of Obsidian templates for DevOps and IT professionals to better organize their technical knowledge.";
---

<BaseLayout title={title} description={description}>
  <Header slot="header" />
  
  <div class="container">
    <div class="page-header">
      <h1>Obsidian Templates</h1>
      <div class="header-accent"></div>
    </div>
    
    <div class="coming-soon-container">
      <div class="coming-soon-card">
        <div class="icon-container">
          <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
            <path d="M50 6.25L6.25 34.375V65.625L50 93.75L93.75 65.625V34.375L50 6.25Z" />
            <path d="M50 65.625L6.25 34.375" />
            <path d="M50 65.625L93.75 34.375" />
            <path d="M50 6.25V37.5" />
          </svg>
        </div>
        <h2>Obsidian Templates Coming Soon</h2>
        <p class="description">
          This section will feature curated Obsidian templates designed specifically for IT professionals, DevOps engineers, and tech enthusiasts. These templates will help you better organize your technical knowledge, document your infrastructure, and streamline your note-taking process.
        </p>
        
        <div class="template-cards">
          <div class="template-card">
            <div class="template-icon">📋</div>
            <h3>Project Documentation</h3>
            <p>Structured templates for documenting technical projects and infrastructure.</p>
          </div>
          
          <div class="template-card">
            <div class="template-icon">🔄</div>
            <h3>Runbooks & Procedures</h3>
            <p>Templates for creating operational runbooks and standard procedures.</p>
          </div>
          
          <div class="template-card">
            <div class="template-icon">🧠</div>
            <h3>Technical Notes</h3>
            <p>Organized formats for technical notes with code blocks and references.</p>
          </div>
          
          <div class="template-card">
            <div class="template-icon">📊</div>
            <h3>Dashboard Layouts</h3>
            <p>Custom dashboard layouts for monitoring your technical knowledge base.</p>
          </div>
        </div>
        
        <div class="cta-button-container">
          <button class="cta-button">
            <span class="button-text">Notify Me When Available</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="5" y1="12" x2="19" y2="12"></line>
              <polyline points="12 5 19 12 12 19"></polyline>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <Footer slot="footer" />
</BaseLayout>

<style>
  .page-header {
    margin: 3rem 0 4rem;
    position: relative;
  }
  
  h1 {
    font-size: var(--font-size-4xl);
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    margin-bottom: 0.5rem;
  }
  
  .header-accent {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary));
    border-radius: 2px;
  }
  
  .coming-soon-container {
    display: flex;
    justify-content: center;
    padding: 2rem 0 4rem;
  }
  
  .coming-soon-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 800px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
  }
  
  .coming-soon-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.1), transparent 70%);
    pointer-events: none;
  }
  
  .icon-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--accent-tertiary);
  }
  
  h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: var(--font-size-3xl);
    color: var(--text-primary);
  }
  
  .description {
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    line-height: 1.7;
  }
  
  .template-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }
  
  .template-card {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
  }
  
  .template-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(139, 92, 246, 0.1);
    border-color: var(--accent-tertiary);
  }
  
  .template-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  .template-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: 0.75rem;
    color: var(--text-primary);
  }
  
  .template-card p {
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
  }
  
  .cta-button-container {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
  }
  
  .cta-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary));
    color: var(--bg-primary);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: var(--font-size-md);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(139, 92, 246, 0.2);
  }
  
  .cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
  }
  
  .button-text {
    font-weight: 500;
  }
  
  @media (max-width: 768px) {
    .template-cards {
      grid-template-columns: 1fr;
    }
    
    .coming-soon-card {
      padding: 2rem 1.5rem;
    }
    
    h1 {
      font-size: var(--font-size-3xl);
    }
    
    h2 {
      font-size: var(--font-size-2xl);
    }
  }
</style>