import React, { useState, useEffect } from 'react'; import { Zap } from 'lucide-react'; const MinimalHero = () => { const [currentCard, setCurrentCard] = useState(0); const cardConfigs = [ { bgColor: 'bg-green-400', content: { greeting: 'Hi again, James. How can I help you?', subtitle: 'What else do you want to know?' } }, { bgColor: 'bg-blue-400', content: { type: 'analytics', greeting: 'Performance Analytics', subtitle: 'AI Usage This Month' } }, { bgColor: 'bg-purple-400', content: { type: 'projects', title: 'Active Projects', subtitle: 'Your AI Workflows' } }, { bgColor: 'bg-yellow-300', content: { type: 'chat-history' } } ]; useEffect(() => { const interval = setInterval(() => { setCurrentCard((prev) => (prev + 1) % cardConfigs.length); }, 3000); return () => clearInterval(interval); }, []); const currentConfig = cardConfigs[currentCard]; return (

{/* Floating Navigation */ } < div className = "absolute top-6 left-1/2 transform -translate-x-1/2 z-50" >

AI Workflow < /h3> < div className = "w-12 h-1 bg-white/60 rounded-full" >

Usage Analytics < /h3> < div className = "w-12 h-1 bg-white/60 rounded-full" >

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build

Flux Card Hero

Created by

Installation

How to use

Dependencies

Flux Card Hero

Created by

Installation

How to use

Dependencies