Astra Vitae Component Collection

      
        // Installation
import SmartNavButtons from './SmartNavButtons/index.esm.js';
import './SmartNavButtons/index.css';

// Basic Usage
function App() {
  return (
    <div>
      {/* Your page content */}
      <SmartNavButtons />
    </div>
  );
}

// Advanced Configuration
<SmartNavButtons
  scrollLockMode={false}       // Enable/disable scroll lock
  autoHideDelay={3000}         // Auto-hide after 3 seconds
  animationDuration={400}      // Smooth scroll duration
  showPulseAnimation={true}    // Visual guidance
  keyboardNavigation={true}    // Arrow key support
  mobileOptimized={true}       // Touch-friendly sizing
/>

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

      
        // Import complete MediaBundle
import { 
  CommonImage, 
  CommonVideo, 
  ImageCarousel
} from './MediaBundle/index.esm.js';
import './MediaBundle/index.css'; // Single CSS file!

// Each component has its specialized lightbox
function App() {
  return (
    <div>
      {/* Each component uses its specialized lightbox automatically */}
      <CommonImage 
        src="/images/hero.webp"
        displayMode="inline"
        enableLightbox={true}
        {/* Uses ImageLightbox specialized for static images */}
      />
      
      <CommonVideo 
        source="youtube"
        videoId="dQw4w9WgXcQ"
        enableLightbox={true}
        {/* Uses VideoLightbox specialized for video playback */}
      />
      
      <ImageCarousel 
        images={imageArray}
        enableLightbox={true}
        autoPlay={true}
      />
    </div>
  );
}

// Mixed Media Gallery Example
const MixedGallery = () => {
  const mediaItems = [
    { type: 'image', src: '/photo1.webp', title: 'Photo 1' },
    { type: 'video', source: 'youtube', id: 'abc123' },
    { type: 'image', src: '/photo2.webp', title: 'Photo 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 /> {/* Single lightbox for all! */}
    </div>
  );
};
      
    

      
        // CommonVideo Multi-Source Examples

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

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

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

// Background Video Mode
<CommonVideo
  source="local"
  src="/videos/background.webm"
  displayMode="background"
  autoplay={true}
  muted={true}
  loop={true}
  className="absolute inset-0"
/>
      
    

      
        // ImageCarousel Implementation

const images = [
  { src: '/img1.webp', alt: 'Image 1', caption: 'Beautiful sunset' },
  { src: '/img2.webp', alt: 'Image 2', caption: 'Mountain view' },
  { src: '/img3.webp', alt: 'Image 3', caption: 'Ocean waves' }
];

// Full-Featured Carousel
<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"
/>

// Minimal Carousel
<ImageCarousel
  images={images}
  showIndicators={true}
  swipeable={true}
/>

// Gallery Mode with Thumbnails
<ImageCarousel
  images={images}
  showThumbnails={true}
  thumbnailPosition="bottom"
  thumbnailWidth={80}
  enableLightbox={true}
/>
      
    

      
        // Testimonials Implementation

const testimonials = [
  {
    id: 1,
    name: "Sarah Johnson",
    role: "CEO",
    company: "TechCorp",
    avatar: "/avatars/sarah.webp",
    rating: 5,
    text: "Outstanding component quality! The MediaBundle has transformed our product galleries.",
    verified: true,
    date: "2024-01-15"
  },
  {
    id: 2,
    name: "Mike Chen",
    role: "Lead Developer",
    company: "StartupXYZ",
    avatar: "/avatars/mike.webp",
    rating: 5,
    text: "SmartNavButtons is a game-changer. Our users love the intuitive navigation.",
    verified: true,
    date: "2024-01-20"
  }
];

// Full-Featured Testimonials
<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}
/>

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

      
        :root {
  /* Primary Colors */
  --media-primary-purple: #e6b3ff;
  --media-primary-gold: #d4af37;
  
  /* Effects */
  --media-glow-purple: 0 0 3px #e6b3ff;
  --media-glow-gold: 0 0 8px #d4af37;
  
  /* Animations */
  --media-duration-fast: 150ms;
  --media-duration-normal: 300ms;
}