Detailed Prompt for Glassmorphism Website

Main Request

Create a modern website with glassmorphism effect using React, Tailwind CSS, and advanced UI components. The design must be visually stunning with a strong "wow factor" and smooth animations that make users stop scrolling.

Technical Specifications

Frameworks & Libraries

• React with hooks (useState, useEffect)
• Tailwind CSS for styling (core utility classes only)
• UI Components: shadcn/ui, Magic UI, Aceternity UI
• Icons: Lucide React
• Animations: CSS transitions and transforms

Design System

Glassmorphism Effect

• Semi-transparent backgrounds with backdrop-blur-lg or backdrop-blur-xl
• Subtle borders with border border-white/20 or border-white/10
• Soft shadows with shadow-xl and shadow-2xl
• Transparent gradients: bg-white/10, bg-gray-900/20
• Smooth hover effects with transitions

Color Palette

• Primary: Vibrant blue (#3B82F6, #2563EB)
• Secondary: Purple/Indigo (#6366F1, #8B5CF6)
• Accent: Cyan (#06B6D4)
• Background: Dark gradient (from #0F172A to #1E293B)
• Text: White with various opacities (text-white, text-white/80, text-white/60)

Typography

• Main heading: text-4xl md:text-6xl, font-bold, tracking-tight
• Subheadings: text-xl md:text-2xl, font-medium
• Body text: text-base md:text-lg, font-normal
• Font: Inter or system fonts

Layout & Structure

Header/Navigation

- Logo with glow effect
- Horizontal navigation menu with glass effect
- Prominent CTA button with gradient
- Theme/mode toggle icon
- Responsive burger menu for mobile

Hero Section

- Captivating main title with gradient text
- Descriptive subtitle
- Two CTA buttons (primary and secondary)
- Informative badge/chip above title
- Background with blurred geometric elements

Cards/Components with Glass Effect

- Floating cards with backdrop-blur
- Luminous borders with glow effect
- Hover animations (scale, glow, border color)
- Content with clear visual hierarchy
- Icons with hover effects

Advanced Visual Effects

Background Elements

• Multiple overlapping radial gradients
• Slow-moving blurred geometric shapes
• Animated light particles (optional)
• Vivid gradient mesh

Micro-animations

• Hover effects on all interactive elements
• Fade-in animations on load
• Loading states with skeleton or shimmer
• Smooth transitions between states

Glass-Specific Components

• Input fields with glass effect
• Transparent modals/dialogs
• Cards with reflections and shadows
• Buttons with depth effects

Components to Implement

Navigation

- Navbar with backdrop-blur-md
- Menu items with hover glow
- Logo with animated effects
- Mobile hamburger menu

Hero Section

- Large gradient text heading
- Animated background elements
- Glass effect CTA buttons
- Floating badge/chip

Feature Cards

- Grid of glass cards
- Icon with glow effects
- Smooth hover animations
- Semi-transparent backgrounds

Interactive Elements

- Glass buttons with ripple effects
- Input forms with glass styling
- Animated counters or statistics
- Progress bars with glow

Animation Requirements

Page Load Animations

• Staggered fade-in for elements
• Slide-up animations for cards
• Logo entrance animation
• Text reveal effects

Hover Interactions

• Scale transforms (hover:scale-105)
• Glow intensity changes
• Border color transitions
• Shadow depth increases

Background Motion

• Slow floating geometric shapes
• Subtle parallax effects
• Gradient position animations
• Particle movement (if implemented)

Responsive Design

Breakpoints

• Mobile: Full-width glass cards, stacked layout
• Tablet: Two-column grid, adjusted typography
• Desktop: Multi-column layout, enhanced effects

Glass Effect Adjustments

• Reduce blur intensity on mobile for performance
• Simplify animations on smaller screens
• Maintain readability across all devices

Performance Considerations

• Optimize backdrop-blur usage
• Use will-change property for animated elements
• Implement lazy loading for heavy animations
• Ensure smooth 60fps animations

Content Structure

Create a landing page for an AI workflow automation tool with:

• Hero section with compelling headline
• Feature showcase with glass cards
• Benefits section with animated counters
• CTA section with glass form
• Footer with glass styling

Key Design Principles

• Bold over safe: Use vivid colors and striking effects
• Interactive over static: Every element should respond to interaction
• Modern over traditional: Implement cutting-edge design trends
• Immersive over minimal: Create an engaging, premium experience

Implementation Notes

• Use single HTML artifact with embedded CSS and JavaScript
• No external dependencies except Tailwind CSS via CDN
• Store all state in JavaScript variables (no localStorage)
• Create functional, working demonstrations rather than placeholders
• Focus on creating a complete, polished experience

make it in react (next.js)