php-flasher/docs/_layouts/symfony.html

---
layout: default
---

<div class="max-w-7xl mx-auto">
  <!-- Hero Section with Animated Elements -->
  <div class="relative overflow-hidden rounded-xl bg-gradient-to-r from-white to-slate-50 border border-slate-200 mb-8 shadow-sm">
    <!-- Subtle background pattern -->
    <div class="absolute inset-0 opacity-[0.03] bg-[radial-gradient(#3b82f6_1px,transparent_1px)] [background-size:16px_16px] pointer-events-none"></div>

    <!-- Symfony logo with glow effect -->
    <div class="absolute -right-5 -top-5 w-32 h-32 bg-white/10 rounded-full blur-3xl"></div>

    <div class="relative px-6 py-10 md:py-16 md:px-10 flex flex-col md:flex-row items-center">
      <div class="md:w-3/5 z-10">
        <h1 class="text-3xl md:text-4xl font-bold text-slate-800 mb-2">
          {{ page.title }} <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">Integration</span>
        </h1>
        <p class="text-lg text-slate-600 mb-6 max-w-xl">{{ page.description }}</p>
        <div class="flex flex-wrap gap-3 animate-fade-in">
          <a href="#installation" class="flex items-center bg-gradient-to-r from-indigo-600 to-indigo-700 text-white px-5 py-2.5 rounded-full shadow-md hover:shadow-lg transition-all group">
            <span>Get Started</span>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
          </a>
          <a href="https://github.com/php-flasher/php-flasher" target="_blank" class="flex items-center bg-white text-slate-800 px-5 py-2.5 rounded-full border border-slate-200 hover:bg-slate-50 transition-colors">
            <i class="fa-brands fa-github mr-2"></i>
            <span>Star on GitHub</span>
          </a>
        </div>
      </div>

      <div class="md:w-2/5 mt-6 md:mt-0 z-10 animate-float">
        <div class="relative aspect-square w-44 mx-auto">
          <!-- Symfony Logo -->
          <div class="absolute inset-0 flex items-center justify-center">
            <i class="fa-brands fa-symfony text-black text-7xl"></i>
          </div>
          <!-- Animated orbit -->
          <div class="absolute inset-0 rounded-full border-4 border-dashed border-slate-200 animate-spin-slow"></div>
          <!-- PHPFlasher notification dots -->
          <div class="absolute top-0 right-0 w-8 h-8 bg-blue-500 rounded-full animate-pulse-slow"></div>
          <div class="absolute bottom-0 left-5 w-6 h-6 bg-green-500 rounded-full animate-pulse-delayed"></div>
          <div class="absolute left-0 top-10 w-4 h-4 bg-red-500 rounded-full animate-pulse"></div>
        </div>
      </div>
    </div>

    <!-- Feature pills -->
    <div class="bg-white border-t border-slate-100 px-6 py-4 flex gap-2 overflow-x-auto no-scrollbar">
      <div class="bg-slate-50 text-slate-700 text-sm px-3 py-1 rounded-full border border-slate-200 flex items-center whitespace-nowrap">
        <i class="fa-solid fa-bolt text-amber-500 mr-1.5"></i> Quick Setup
      </div>
      <div class="bg-slate-50 text-slate-700 text-sm px-3 py-1 rounded-full border border-slate-200 flex items-center whitespace-nowrap">
        <i class="fa-solid fa-wand-magic-sparkles text-purple-500 mr-1.5"></i> Multiple Themes
      </div>
      <div class="bg-slate-50 text-slate-700 text-sm px-3 py-1 rounded-full border border-slate-200 flex items-center whitespace-nowrap">
        <i class="fa-solid fa-language text-blue-500 mr-1.5"></i> RTL Support
      </div>
      <div class="bg-slate-50 text-slate-700 text-sm px-3 py-1 rounded-full border border-slate-200 flex items-center whitespace-nowrap">
        <i class="fa-solid fa-universal-access text-green-500 mr-1.5"></i> Accessible
      </div>
    </div>
  </div>

  <!-- Main Content with Styled Sections -->
  <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
    <!-- Table of contents - Desktop -->
    <div class="border-b border-slate-100">
      <div class="px-6 py-4 flex items-center gap-4 overflow-x-auto no-scrollbar">
        <a href="#requirements" class="text-sm font-medium text-slate-700 hover:text-indigo-600 whitespace-nowrap transition-colors">
          <i class="fa-solid fa-list-check mr-1.5 text-indigo-500"></i> Requirements
        </a>
        <span class="text-slate-300">|</span>
        <a href="#installation" class="text-sm font-medium text-slate-700 hover:text-indigo-600 whitespace-nowrap transition-colors">
          <i class="fa-solid fa-download mr-1.5 text-indigo-500"></i> Installation
        </a>
        <span class="text-slate-300">|</span>
        <a href="#usage" class="text-sm font-medium text-slate-700 hover:text-indigo-600 whitespace-nowrap transition-colors">
          <i class="fa-solid fa-code mr-1.5 text-indigo-500"></i> Usage
        </a>
        <span class="text-slate-300">|</span>
        <a href="#configuration" class="text-sm font-medium text-slate-700 hover:text-indigo-600 whitespace-nowrap transition-colors">
          <i class="fa-solid fa-gear mr-1.5 text-indigo-500"></i> Configuration
        </a>
        <span class="text-slate-300">|</span>
        <a href="#presets" class="text-sm font-medium text-slate-700 hover:text-indigo-600 whitespace-nowrap transition-colors">
          <i class="fa-solid fa-sliders mr-1.5 text-indigo-500"></i> Presets
        </a>
      </div>
    </div>

    <!-- Content area with custom styling -->
    <div class="prose prose-slate max-w-none p-6 md:p-8">
      {{ content }}
    </div>
  </div>

  <!-- Footer CTA -->
  <div class="mt-8 mb-12">
    <div class="bg-gradient-to-r from-indigo-50 to-indigo-100 rounded-xl p-6 md:p-8 border border-indigo-200/50 shadow-sm">
      <div class="flex flex-col md:flex-row md:items-center">
        <div class="md:w-3/4">
          <h3 class="text-2xl font-bold text-indigo-900 mb-2">Ready to improve your user experience?</h3>
          <p class="text-indigo-700 mb-6 md:mb-0">Start using PHPFlasher today and give your users beautiful notifications in minutes!</p>
        </div>
        <div class="md:w-1/4 md:text-right">
          <a href="#installation" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white font-medium px-6 py-3 rounded-lg transition-colors">
            Get Started Now
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  .animate-spin-slow {
    animation: spin 20s linear infinite;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .animate-pulse-delayed {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) 1s infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  .animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
</style>