I've created a React component that adds a 3D mascot viewer section to your existing landing page. Here's what it includes:

Key Features:

• Uses the <model-viewer> web component with all requested attributes
• Auto-rotating 3D model with camera controls
• Shadow intensity set to 1 for realistic lighting
• Responsive design with proper width/height (100% width, 400px height)
• Matches your existing design aesthetic with glass-morphism styling

Design Elements:

• Centered layout with responsive padding
• Gradient text effect matching your brand colors
• Glass-morphism container with backdrop blur
• Descriptive caption explaining interactivity
• Consistent spacing and typography with your landing page

Technical Details:

• Dynamically imports the model-viewer library to avoid SSR issues
• TypeScript declarations for the web component
• Uses your uploaded GLB file from the public directory
• Fully responsive with Tailwind CSS classes

You can easily insert this component anywhere in your existing landing page by importing and using <MascotViewer />. The component is self-contained and will blend seamlessly with your current vibrant, futuristic design theme!

Perfect! I've inserted the MascotViewer component into your homepage in the ideal location - right after the features section and before the final call-to-action. This placement:

✅ Creates a natural flow - Users learn about the features, then get to interact with the 3D mascot, building excitement before the final CTA

✅ Breaks up the content - Provides an engaging interactive element between text-heavy sections

✅ Maintains visual hierarchy - The 3D viewer serves as a compelling visual break that keeps users engaged

✅ Enhances the hologram theme - The interactive 3D mascot perfectly reinforces your product's holographic technology

The component will now appear seamlessly integrated into your landing page with consistent styling and spacing that matches your existing vibrant, futuristic design!