Astra Vitae Coleção de Componentes

      
        // Instalação
import SmartNavButtons from './SmartNavButtons/index.esm.js';
import './SmartNavButtons/index.css';

// Uso Básico
function App() {
  return (
    <div>
      {/* Seu conteúdo da página */}
      <SmartNavButtons />
    </div>
  );
}

// Configuração Avançada
<SmartNavButtons
  scrollLockMode={false}       // Habilitar/desabilitar bloqueio de rolagem
  autoHideDelay={3000}         // Auto-ocultar após 3 segundos
  animationDuration={400}      // Duração da rolagem suave
  showPulseAnimation={true}    // Orientação visual
  keyboardNavigation={true}    // Suporte a teclas de seta
  mobileOptimized={true}       // Dimensionamento amigável ao toque
/>

// Interface TypeScript
interface SmartNavButtonsProps {
  scrollLockMode?: boolean;
  autoHideDelay?: number;
  animationDuration?: number;
  showPulseAnimation?: boolean;
  keyboardNavigation?: boolean;
  mobileOptimized?: boolean;
  className?: string;
  customStyles?: React.CSSProperties;
}
      
    

      
        // Importar MediaBundle completo
import { 
  CommonImage, 
  CommonVideo, 
  ImageCarousel
} from './MediaBundle/index.esm.js';
import './MediaBundle/index.css'; // Arquivo CSS único!

// Cada componente tem seu lightbox especializado
function App() {
  return (
    <div>
      {/* Cada componente usa seu lightbox especializado automaticamente */}
      <CommonImage 
        src="/images/hero.webp"
        displayMode="inline"
        enableLightbox={true}
        {/* Usa ImageLightbox especializado para imagens estáticas */}
      />
      
      <CommonVideo 
        source="youtube"
        videoId="dQw4w9WgXcQ"
        enableLightbox={true}
        {/* Usa VideoLightbox especializado para reprodução de vídeo */}
      />
      
      <ImageCarousel 
        images={imageArray}
        enableLightbox={true}
        autoPlay={true}
      />
    </div>
  );
}

// Exemplo de Galeria de Mídia Mista
const MixedGallery = () => {
  const mediaItems = [
    { type: 'image', src: '/photo1.webp', title: 'Foto 1' },
    { type: 'video', source: 'youtube', id: 'abc123' },
    { type: 'image', src: '/photo2.webp', title: 'Foto 2' },
    { type: 'video', source: 'local', src: '/video.webm' }
  ];
  
  return (
    <div className="media-gallery">
      {mediaItems.map((item, index) => (
        item.type === 'image' ? (
          <CommonImage key={index} {...item} />
        ) : (
          <CommonVideo key={index} {...item} />
        )
      ))}
      <UnifiedLightbox /> {/* Lightbox único para tudo! */}
    </div>
  );
};
      
    

      
        // Exemplos CommonVideo Multi-Fonte

// Vídeo YouTube
<CommonVideo
  source="youtube"
  videoId="dQw4w9WgXcQ"
  autoplay={true}
  muted={true}
  thumbnail="/thumbnails/video.webp"
  enableLightbox={true}
/>

// Vídeo Google Drive
<CommonVideo
  source="googledrive"
  videoId="1BxZlEb3K5mN8QPRo9TYZ"
  aspectRatio="16:9"
  controls={true}
/>

// Vídeo Local com Fallbacks
<CommonVideo
  source="local"
  src="/videos/intro.webm"
  fallbackSrc="/videos/intro.webm"
  poster="/images/video-poster.webp"
  loop={true}
  playbackRate={1.0}
/>

// Modo Background de Vídeo
<CommonVideo
  source="local"
  src="/videos/background.webm"
  displayMode="background"
  autoplay={true}
  muted={true}
  loop={true}
  className="absolute inset-0"
/>
      
    

      
        // Implementação ImageCarousel

const images = [
  { src: '/img1.webp', alt: 'Imagem 1', caption: 'Pôr do sol lindo' },
  { src: '/img2.webp', alt: 'Imagem 2', caption: 'Vista da montanha' },
  { src: '/img3.webp', alt: 'Imagem 3', caption: 'Ondas do oceano' }
];

// Carrossel Completo
<ImageCarousel
  images={images}
  autoPlay={true}
  autoPlayInterval={5000}
  showThumbnails={true}
  showIndicators={true}
  enableLightbox={true}
  transitionType="fade"
  transitionDuration={500}
  pauseOnHover={true}
  infiniteLoop={true}
  showArrows={true}
  swipeable={true}
  keyboardNavigation={true}
  lazyLoad={true}
  className="rounded-lg overflow-hidden"
/>

// Carrossel Mínimo
<ImageCarousel
  images={images}
  showIndicators={true}
  swipeable={true}
/>

// Modo Galeria com Miniaturas
<ImageCarousel
  images={images}
  showThumbnails={true}
  thumbnailPosition="bottom"
  thumbnailWidth={80}
  enableLightbox={true}
/>
      
    

      
        // Implementação Testimonials

const testimonials = [
  {
    id: 1,
    name: "Sarah Johnson",
    role: "CEO",
    company: "TechCorp",
    avatar: "/avatars/sarah.webp",
    rating: 5,
    text: "Qualidade excepcional de componentes! O MediaBundle transformou nossas galerias de produtos.",
    verified: true,
    date: "2024-01-15"
  },
  {
    id: 2,
    name: "Mike Chen",
    role: "Desenvolvedor Líder",
    company: "StartupXYZ",
    avatar: "/avatars/mike.webp",
    rating: 5,
    text: "SmartNavButtons é revolucionário. Nossos usuários adoram a navegação intuitiva.",
    verified: true,
    date: "2024-01-20"
  }
];

// Testimonials Completo
<TestimonialsCarousel
  testimonials={testimonials}
  autoPlay={true}
  interval={6000}
  showNavigation={true}
  showIndicators={true}
  displayMode="carousel"
  cardsPerView={1}
  showRatings={true}
  showVerifiedBadge={true}
  showCompanyInfo={true}
  animationType="fade"
  pauseOnHover={true}
/>

// Modo Layout Grid
<TestimonialsCarousel
  testimonials={testimonials}
  displayMode="grid"
  columns={3}
  showRatings={true}
  className="gap-6"
/>
      
    

      
        :root {
  /* Cores Primárias */
  --media-primary-purple: #e6b3ff;
  --media-primary-gold: #d4af37;
  
  /* Efeitos */
  --media-glow-purple: 0 0 3px #e6b3ff;
  --media-glow-gold: 0 0 8px #d4af37;
  
  /* Animações */
  --media-duration-fast: 150ms;
  --media-duration-normal: 300ms;
}