Manual da Marca

<!-- Botão Primário InfoJoias -->
<button class="px-6 py-3 bg-infojoias-orange-500 hover:bg-infojoias-orange-600 text-white rounded-xl font-semibold transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl">
  Cadastrar Agora
</button>

<!-- Card Luxury InfoJoias -->
<div class="bg-white dark:bg-infojoias-blue-950 border border-infojoias-light-200 dark:border-infojoias-blue-800 rounded-3xl p-8 shadow-sm hover:shadow-lg transition-all duration-300 hover:scale-105">
  <div class="flex items-center gap-4 mb-6">
    <div class="bg-infojoias-orange-500 p-3 rounded-xl">
      <svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 24 24">
        <!-- Ícone aqui -->
      </svg>
    </div>
    <h3 class="text-2xl font-bold text-infojoias-blue-800 dark:text-white font-display">
      Título do Card
    </h3>
  </div>
  
  <p class="text-infojoias-blue-600 dark:text-infojoias-light-300 leading-relaxed mb-6">
    Conteúdo do card com texto responsivo e acessível.
  </p>
  
  <button class="text-infojoias-orange-500 hover:text-infojoias-orange-600 font-semibold transition-colors flex items-center gap-2">
    Ver mais
    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
    </svg>
  </button>
</div>

<!-- Container com Gradiente -->
<div class="bg-gradient-to-br from-infojoias-orange-500 to-infojoias-orange-600 rounded-3xl p-8 lg:p-12 text-white">
  <div class="max-w-4xl mx-auto text-center">
    <h2 class="text-4xl lg:text-5xl font-bold font-display mb-6">
      Título com Gradiente
    </h2>
    <p class="text-xl lg:text-2xl opacity-90 mb-8">
      Descrição elegante sobre joias e gemologia.
    </p>
    <button class="bg-white text-infojoias-orange-600 px-8 py-4 rounded-xl font-semibold hover:bg-infojoias-light-50 transition-all duration-300 hover:scale-105">
      Descobrir Mais
    </button>
  </div>
</div>

<!-- Grid Responsivo InfoJoias -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
  <div class="text-center mb-12">
    <h2 class="text-4xl font-bold text-infojoias-blue-800 dark:text-white font-display mb-4">
      Nossos Serviços
    </h2>
    <p class="text-xl text-infojoias-blue-600 dark:text-infojoias-light-300">
      Expertise em joias e gemologia
    </p>
  </div>
  
  <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
    <div class="bg-white dark:bg-infojoias-blue-950 rounded-2xl p-6 border border-infojoias-light-200 dark:border-infojoias-blue-800 hover:shadow-lg transition-all duration-300">
      <!-- Conteúdo do card -->
    </div>
    <!-- Mais cards... -->
  </div>
</div>

/* Classes Utilitárias InfoJoias */
.hero-title {
  @apply text-5xl lg:text-6xl font-bold font-display text-infojoias-blue-800 dark:text-white mb-6 leading-tight;
}

.hero-subtitle {
  @apply text-xl lg:text-2xl text-infojoias-blue-600 dark:text-infojoias-light-300 mb-8 leading-relaxed;
}

.section-padding {
  @apply py-16 lg:py-24 px-4 sm:px-6 lg:px-8;
}

.card-luxury {
  @apply bg-white dark:bg-infojoias-blue-950 border border-infojoias-light-200 dark:border-infojoias-blue-800 rounded-3xl p-8 shadow-sm hover:shadow-lg transition-all duration-300;
}

.btn-primary {
  @apply px-6 py-3 bg-infojoias-orange-500 hover:bg-infojoias-orange-600 text-white rounded-xl font-semibold transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl;
}

.text-balance {
  @apply text-infojoias-blue-700 dark:text-infojoias-light-300 leading-relaxed;
}

/* Animações InfoJoias */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(234, 91, 27, 0.2);
  }
  50% {
    box-shadow: 0 0 25px rgba(234, 91, 27, 0.4);
  }
}

@keyframes gentle-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-4px);
  }
}

.float {
  animation: float 3s ease-in-out infinite;
}

.glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

.gentle-bounce {
  animation: gentle-bounce 2s ease-in-out infinite;
}

/* Gradientes InfoJoias */
.bg-gradient-primary {
  background: linear-gradient(135deg, #ea5b1b 0%, #fb923c 100%);
}

.bg-gradient-primary-hover {
  background: linear-gradient(135deg, #dc2626 0%, #ea5b1b 100%);
}

.bg-gradient-soft {
  background: linear-gradient(135deg, #fdefe8 0%, #d6f6ff 100%);
}

.bg-gradient-dark {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

.bg-gradient-blue {
  background: linear-gradient(135deg, #343452 0%, #475569 100%);
}

/* Gradientes com texto */
.text-gradient-primary {
  background: linear-gradient(135deg, #ea5b1b 0%, #fb923c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Responsividade InfoJoias */
/* Mobile First Approach */
.responsive-container {
  @apply px-4 py-8;
}

@media (min-width: 640px) {
  .responsive-container {
    @apply px-6 py-12;
  }
}

@media (min-width: 1024px) {
  .responsive-container {
    @apply px-8 py-16;
  }
}

/* Typography Responsiva */
.responsive-heading {
  @apply text-3xl font-bold;
}

@media (min-width: 768px) {
  .responsive-heading {
    @apply text-4xl;
  }
}

@media (min-width: 1024px) {
  .responsive-heading {
    @apply text-5xl;
  }
}

/* Grid Responsivo */
.responsive-grid {
  @apply grid gap-6 grid-cols-1;
}

@media (min-width: 768px) {
  .responsive-grid {
    @apply grid-cols-2 gap-8;
  }
}

@media (min-width: 1024px) {
  .responsive-grid {
    @apply grid-cols-3 gap-8;
  }
}

// Theme Toggle InfoJoias
function initThemeToggle() {
  const theme = localStorage.getItem('theme') || 'light';
  document.documentElement.classList.toggle('dark', theme === 'dark');
  
  const toggleBtn = document.querySelector('[data-theme-toggle]');
  toggleBtn?.addEventListener('click', () => {
    const isDark = document.documentElement.classList.contains('dark');
    const newTheme = isDark ? 'light' : 'dark';
    
    document.documentElement.classList.toggle('dark', newTheme === 'dark');
    localStorage.setItem('theme', newTheme);
    
    // Animação suave na transição
    document.documentElement.style.transition = 'all 0.3s ease';
    setTimeout(() => {
      document.documentElement.style.transition = '';
    }, 300);
  });
}

// Inicializar ao carregar a página
document.addEventListener('DOMContentLoaded', initThemeToggle);

// Scroll Animations InfoJoias
function initScrollAnimations() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('animate-in');
      }
    });
  }, {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  });

  // Elementos para animar
  const animateElements = document.querySelectorAll('[data-animate]');
  animateElements.forEach((el) => observer.observe(el));
}

// CSS correspondente
const scrollAnimationStyles = `
  [data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  
  [data-animate].animate-in {
    opacity: 1;
    transform: translateY(0);
  }
  
  [data-animate="fade-up"] {
    transform: translateY(50px);
  }
  
  [data-animate="fade-left"] {
    transform: translateX(-50px);
  }
  
  [data-animate="scale"] {
    transform: scale(0.9);
  }
`;

// Adicionar estilos
const styleSheet = document.createElement('style');
styleSheet.textContent = scrollAnimationStyles;
document.head.appendChild(styleSheet);

initScrollAnimations();