Now I'll create a floating 3D element component and integrate it into the layout. Let me first create the floating element component:

Now I'll update the globals.css to add additional 3D animation effects:

Now I'll update the layout.tsx to include the floating element:

Now I'll update the page.tsx to ensure proper z-index layering and improve the main content wrapper:

Perfect! I've successfully integrated a persistent, dynamic 3D floating element that moves across and over the entire website. Here's what was implemented:

Floating 3D Element Features:

• Interactive mouse-responsive 3D transformations that rotate based on cursor position
• Smooth scroll-synchronized floating motion with wave patterns and orbital movements
• Multiple layered geometric shapes with gradient effects and glowing shadows
• Rotating inner ring and floating particle system for depth
• Set to pointer-events-none and positioned at z-index: 0 to ensure it floats behind content without interfering with interactions

Integration & Visual Design:

• Added advanced 3D animation keyframes (float3D, waveMotion, orbitalFloat) for complex motion patterns
• Proper z-index layering ensures the floating element stays behind all interactive content
• The element uses perspective transforms and 3D translate effects for authentic depth perception
• Color scheme matches the existing dark theme with indigo and purple gradients

User Experience Preservation:

• All content remains fully interactive (pointer-events properly managed)
• Smooth animations that enhance rather than distract from the core experience
• The floating effect creates visual interest while maintaining the minimalist aesthetic of the original design

Now I'll create the floating hackathon image component and the chatbot component with registration functionality:

Now I'll create the chatbot component with registration interface:

Now I'll update the layout to include both the floating image and chatbot components:

Perfect! I've successfully added the new 3D visual elements without altering the existing design:

Floating Hackathon Image:

• Small circular floating image (128x128px) positioned on the left side of the screen
• Features a custom SVG design with code brackets, rocket, and trophy symbols representing hackathon essence
• Smoothly floats following scroll position with subtle rotation and scale effects
• Has a glowing shadow effect and hovers above content at z-index 20
• Responsive to scroll with wave motion and scaling animations

Chatbot Component:

• Fixed button in the bottom-right corner with gradient accent colors
• Opens interactive modal with welcoming message
• Two-step interface: welcome screen → registration form
• Registration form collects: name, email, phone, university, branch, year, event interest, and team size
• Form validation ensures all fields are filled before submission
• Success message displayed after submission with 3-second auto-close
• Uses claymorphic styling matching the existing design aesthetic
• Completely non-intrusive and doesn't interfere with any existing functionality

Both components are positioned with high z-index values and use pointer-events-none where appropriate to ensure they don't block user interactions with the main content.