[V0_FILE]typescriptreact:file="portfolio-carousel.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { ChevronLeft, ChevronRight, ExternalLink } from "lucide-react" import { Button } from "@/components/ui/button" import Image from "next/image" const projects = [ { id: "01", title: "Digital Artistry", subtitle: "Creative Design", description: "Exploring the intersection of technology and human creativity through immersive digital experiences.", image: "/placeholder.svg?height=400&width=600", category: "UI/UX Design", year: "2024", }, { id: "02", title: "Sound of Streets", subtitle: "Audio Experience", description: "Capturing the urban symphony through innovative sound design and interactive storytelling.", image: "/placeholder.svg?height=400&width=600", category: "Interactive Media", year: "2024", }, { id: "03", title: "Future Vision", subtitle: "Brand Identity", description: "Redefining visual communication for tomorrow's most innovative companies and startups.", image: "/placeholder.svg?height=400&width=600", category: "Branding", year: "2023", }, { id: "04", title: "Motion Poetry", subtitle: "Animation", description: "Bringing stories to life through fluid motion graphics and cinematic storytelling techniques.", image: "/placeholder.svg?height=400&width=600", category: "Motion Graphics", year: "2023", }, ] export default function PortfolioCarousel() { const [currentIndex, setCurrentIndex] = useState(0) const [isAnimating, setIsAnimating] = useState(false) const nextSlide = () => { if (isAnimating) return setIsAnimating(true) setCurrentIndex((prev) => (prev + 1) % projects.length) } const prevSlide = () => { if (isAnimating) return setIsAnimating(true) setCurrentIndex((prev) => (prev - 1 + projects.length) % projects.length) } const goToSlide = (index: number) => { if (isAnimating || index === currentIndex) return setIsAnimating(true) setCurrentIndex(index) } useEffect(() => { const timer = setTimeout(() => setIsAnimating(false), 800) return () => clearTimeout(timer) }, [currentIndex]) useEffect(() => { const interval = setInterval(nextSlide, 5000) return () => clearInterval(interval) }, []) const currentProject = projects[currentIndex] return (

{/* Header */}

mirror

{/* Main Carousel */}

{/* Background Number */}

{currentProject.id}

{/* Content Container */}

{/* Left Content */}

{currentProject.category} • {currentProject.year}

{currentProject.title}

{currentProject.subtitle}

{currentProject.description}

{/* Right Image */}

{/* Navigation Arrows */}

{/* Bottom Navigation */}

{/* Pagination Dots */}

{projects.map((_, index) => (

{/* Social Links */}

{["facebook", "dribbble", "instagram"].map((social) => ( ))}

{/* Progress Bar */}

) } [V0_FILE]typescriptreact:file="devclub-carousel.tsx" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { ChevronLeft, ChevronRight, Github, ExternalLink, Code, Zap, Users, Star } from "lucide-react" import { Button } from "@/components/ui/button" import Image from "next/image" const projects = [ { id: "01", title: "Neural Network Visualizer", subtitle: "AI/ML Platform", description: "Interactive deep learning visualization tool with real-time training metrics and neural architecture exploration.", image: "/placeholder.svg?height=500&width=700", category: "Machine Learning", tech: ["Python", "TensorFlow", "React", "D3.js"], github: "https://github.com/devclub/neural-viz", live: "https://neural-viz.devclub.dev", stats: { stars: 2847, forks: 394, contributors: 23 }, gradient: "from-purple-600 via-pink-600 to-blue-600", year: "2024", }, { id: "02", title: "Quantum Code Editor", subtitle: "Developer Tools", description: "Next-generation code editor with quantum computing syntax highlighting and collaborative debugging features.", image: "/placeholder.svg?height=500&width=700", category: "Developer Tools", tech: ["TypeScript", "Electron", "Monaco", "WebAssembly"], github: "https://github.com/devclub/quantum-editor", live: "https://editor.devclub.dev", stats: { stars: 5621, forks: 892, contributors: 45 }, gradient: "from-cyan-500 via-teal-500 to-green-500", year: "2024", }, { id: "03", title: "Blockchain Analytics", subtitle: "Web3 Platform", description: "Comprehensive blockchain data analysis platform with real-time transaction monitoring and DeFi insights.", image: "/placeholder.svg?height=500&width=700", category: "Blockchain", tech: ["Solidity", "Next.js", "GraphQL", "Ethereum"], github: "https://github.com/devclub/blockchain-analytics", live: "https://analytics.devclub.dev", stats: { stars: 3924, forks: 567, contributors: 31 }, gradient: "from-orange-500 via-red-500 to-pink-500", year: "2023", }, { id: "04", title: "Cloud Orchestrator", subtitle: "DevOps Suite", description: "Intelligent cloud infrastructure management with auto-scaling, monitoring, and deployment automation.", image: "/placeholder.svg?height=500&width=700", category: "DevOps", tech: ["Go", "Kubernetes", "Docker", "AWS"], github: "https://github.com/devclub/cloud-orchestrator", live: "https://orchestrator.devclub.dev", stats: { stars: 4156, forks: 723, contributors: 38 }, gradient: "from-indigo-500 via-purple-500 to-pink-500", year: "2023", }, ] export default function DevClubCarousel() { const [currentIndex, setCurrentIndex] = useState(0) const [isAnimating, setIsAnimating] = useState(false) const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) const containerRef = useRef(null) const nextSlide = () => { if (isAnimating) return setIsAnimating(true) setCurrentIndex((prev) => (prev + 1) % projects.length) } const prevSlide = () => { if (isAnimating) return setIsAnimating(true) setCurrentIndex((prev) => (prev - 1 + projects.length) % projects.length) } const goToSlide = (index: number) => { if (isAnimating || index === currentIndex) return setIsAnimating(true) setCurrentIndex(index) } useEffect(() => { const timer = setTimeout(() => setIsAnimating(false), 1000) return () => clearTimeout(timer) }, [currentIndex]) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (containerRef.current) { const rect = containerRef.current.getBoundingClientRect() setMousePosition({ x: (e.clientX - rect.left) / rect.width, y: (e.clientY - rect.top) / rect.height, }) } } const container = containerRef.current if (container) { container.addEventListener("mousemove", handleMouseMove) return () => container.removeEventListener("mousemove", handleMouseMove) } }, []) const currentProject = projects[currentIndex] return (

{/* Animated Background */}

{/* Floating Particles */}

{[...Array(20)].map((_, i) => (

))}

{/* Header */}


          
            
              DevClub
            
            Innovation Lab


        
          {["Projects", "Community", "Events", "Resources", "Join"].map((item) => (
            
          ))}



      {/* Main Carousel */}
      
        {/* Background Number with Glassmorphism */}
        
          
            
              {currentProject.id}
            
            
          
        

        {/* Content Container */}
        
          
            {/* Left Content */}
            
              
                {/* Category Badge */}
                
                  
                  {currentProject.category}
                  • {currentProject.year}
                

                {/* Title */}
                
                  
                    {currentProject.title}
                  
                

                {currentProject.subtitle}

                {currentProject.description}

                {/* Tech Stack */}
                
                  {currentProject.tech.map((tech) => (
                    
                      {tech}
                    
                  ))}
                

                {/* Stats */}
                
                  
                    
                    {currentProject.stats.stars.toLocaleString()}
                  
                  
                    
                    {currentProject.stats.forks}
                  
                  
                    
                    {currentProject.stats.contributors}
                  
                

                {/* Action Buttons */}
                
                  
                  
                
              
            

            {/* Right Image */}
            
              
                
                  {/* Glassmorphism Frame */}
                  

                  

                  {/* Gradient Overlay */}
                  

                  {/* Floating Elements */}
                  
                    {currentProject.category}
                  
                

                {/* Decorative Elements */}
                
                
              
            
          
        

        {/* Navigation Arrows */}
        

        
      

      {/* Bottom Navigation */}
      
        {/* Advanced Pagination */}
        
          
            {projects.map((project, index) => (
              
            ))}
          
          
            {String(currentIndex + 1).padStart(2, "0")} / {String(projects.length).padStart(2, "0")}
          
        

        {/* Social Links */}
        
          Connect with DevClub
          {["GitHub", "Discord", "Twitter"].map((social) => (
            
          ))}
        
      

      {/* Animated Progress Ring */}
      
        
          
          
            
          

        

      

    

  )
}
[V0_FILE]typescriptreact:file="dark-carousel.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { ChevronLeft, ChevronRight, ExternalLink, Github, Star, Eye, Sparkles } from "lucide-react"
import { Button } from "@/components/ui/button"
import Image from "next/image"

const projects = [
  {
    id: "01",
    title: "Neural Network Visualizer",
    subtitle: "AI/ML Platform",
    description:
      "Interactive deep learning visualization tool with real-time training metrics and neural architecture exploration.",
    image: "/placeholder.svg?height=500&width=700",
    category: "Machine Learning",
    tech: ["Python", "TensorFlow", "React", "D3.js"],
    stats: { stars: 2847, views: 15420 },
    color: "#8b5cf6",
  },
  {
    id: "02",
    title: "Quantum Code Editor",
    subtitle: "Developer Tools",
    description:
      "Next-generation code editor with quantum computing syntax highlighting and collaborative debugging features.",
    image: "/placeholder.svg?height=500&width=700",
    category: "Developer Tools",
    tech: ["TypeScript", "Electron", "Monaco", "WebAssembly"],
    stats: { stars: 5621, views: 28340 },
    color: "#06b6d4",
  },
  {
    id: "03",
    title: "Blockchain Analytics",
    subtitle: "Web3 Platform",
    description:
      "Comprehensive blockchain data analysis platform with real-time transaction monitoring and DeFi insights.",
    image: "/placeholder.svg?height=500&width=700",
    category: "Blockchain",
    tech: ["Solidity", "Next.js", "GraphQL", "Ethereum"],
    stats: { stars: 3924, views: 19680 },
    color: "#f59e0b",
  },
  {
    id: "04",
    title: "Cloud Orchestrator",
    subtitle: "DevOps Suite",
    description:
      "Intelligent cloud infrastructure management with auto-scaling, monitoring, and deployment automation.",
    image: "/placeholder.svg?height=500&width=700",
    category: "DevOps",
    tech: ["Go", "Kubernetes", "Docker", "AWS"],
    stats: { stars: 4156, views: 22150 },
    color: "#10b981",
  },
]

export default function DarkCarousel() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [isAnimating, setIsAnimating] = useState(false)
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
  const [hoveredTech, setHoveredTech] = useState(null)
  const [hoveredButton, setHoveredButton] = useState(null)
  const [displayedStars, setDisplayedStars] = useState(0)
  const [displayedViews, setDisplayedViews] = useState(0)
  const containerRef = useRef(null)
  const [particles, setParticles] = useState>([])
  const [sparkles, setSparkles] = useState>([])

  const nextSlide = () => {
    if (isAnimating) return
    setIsAnimating(true)
    setCurrentIndex((prev) => (prev + 1) % projects.length)
  }

  const prevSlide = () => {
    if (isAnimating) return
    setIsAnimating(true)
    setCurrentIndex((prev) => (prev - 1 + projects.length) % projects.length)
  }

  const goToSlide = (index: number) => {
    if (isAnimating || index === currentIndex) return
    setIsAnimating(true)
    setCurrentIndex(index)
  }

  useEffect(() => {
    const timer = setTimeout(() => setIsAnimating(false), 800)
    return () => clearTimeout(timer)
  }, [currentIndex])

  // Animated counter effect for stats
  useEffect(() => {
    const currentProject = projects[currentIndex]
    const animateCounter = (target: number, setter: (value: number) => void) => {
      let current = 0
      const increment = target / 50
      const timer = setInterval(() => {
        current += increment
        if (current >= target) {
          setter(target)
          clearInterval(timer)
        } else {
          setter(Math.floor(current))
        }
      }, 30)
    }

    const delay = setTimeout(() => {
      animateCounter(currentProject.stats.stars, setDisplayedStars)
      animateCounter(currentProject.stats.views, setDisplayedViews)
    }, 700)

    return () => clearTimeout(delay)
  }, [currentIndex])

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (containerRef.current) {
        const rect = containerRef.current.getBoundingClientRect()
        setMousePosition({
          x: (e.clientX - rect.left) / rect.width,
          y: (e.clientY - rect.top) / rect.height,
        })
      }
    }

    const container = containerRef.current
    if (container) {
      container.addEventListener("mousemove", handleMouseMove)
      return () => container.removeEventListener("mousemove", handleMouseMove)
    }
  }, [])

  // Generate floating particles
  useEffect(() => {
    const newParticles = Array.from({ length: 15 }, (_, i) => ({
      id: i,
      x: Math.random() * 100,
      y: Math.random() * 100,
      delay: Math.random() * 3,
    }))
    setParticles(newParticles)

    const newSparkles = Array.from({ length: 8 }, (_, i) => ({
      id: i,
      x: Math.random() * 100,
      y: Math.random() * 100,
      delay: Math.random() * 2,
    }))
    setSparkles(newSparkles)
  }, [])

  const currentProject = projects[currentIndex]

  return (
    
      {/* Animated Background Grid */}
      
        
      

      {/* Floating Particles */}
      
        {particles.map((particle) => (
          
        ))}
      

      {/* Sparkle Effects */}
      
        {sparkles.map((sparkle) => (
          
            
          
        ))}
      

      {/* Mouse Glow Effect */}
      

      {/* Main Carousel Container */}
      
        {/* Background Number with Creative Animation */}
        
          
            
              {currentProject.id}
            

            {/* Animated Border Around Number */}
            
          
        

        {/* Content Grid */}
        
          
            {/* Left Content */}
            
              {/* Category Badge with Micro Animation */}
              
                
                {currentProject.category}
                
                2024
              

              {/* Title with Staggered Animation */}
              
                
                  {currentProject.title.split(" ").map((word, index) => (
                    
                      {word}{" "}
                    
                  ))}
                

                
                  {currentProject.subtitle}
                
              

              {/* Description with Typewriter Effect */}
              
                {currentProject.description}
              

              {/* Tech Stack with Staggered Hover Animations */}
              
                {currentProject.tech.map((tech, index) => (
                   setHoveredTech(tech)}
                    onMouseLeave={() => setHoveredTech(null)}
                  >
                    {tech}
                  
                ))}
              

              {/* Stats with Animated Counters */}
              
                
                  
                  {displayedStars.toLocaleString()}
                  stars
                
                
                  
                  {displayedViews.toLocaleString()}
                  views
                
              

              {/* Action Buttons with Ripple Effects */}
              
                

                
              
            

            {/* Right Image */}
            
              
                {/* Main Image Container */}
                
                  {/* Animated Border */}
                  

                  {/* Inner Container */}
                  
                    

                    {/* Overlay with Micro Animations */}
                    

                    {/* Floating Action Button */}
                    
                      
                    

                    {/* Progress Bar Animation */}
                    
                      
                    
                  
                

                {/* Floating Decorative Elements with Breathing Animation */}
                
                

                {/* Orbiting Elements */}
                
                  
                  
                
              
            
          
        

        {/* Navigation Arrows with Enhanced Animations */}
        

        
      

      {/* Bottom Pagination with Enhanced Design */}
      
        {/* Pagination Dots */}
        
          {projects.map((project, index) => (
            
          ))}
        

        {/* Counter with Animation */}
        
          
            {String(currentIndex + 1).padStart(2, "0")}
          
          /
          {String(projects.length).padStart(2, "0")}
        
      

      {/* Custom CSS for Enhanced Animations */}
      
    
  )
}
[V0_FILE]typescriptreact:file="dark-carousel-v4.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { ChevronLeft, ChevronRight, ExternalLink, Github, Star, Eye } from "lucide-react"
import { Button } from "@/components/ui/button"
import Image from "next/image"

const projects = [
  {
    id: "1",
    title: "Neural Network Visualizer",
    subtitle: "AI/ML Platform",
    description:
      "Interactive deep learning visualization tool with real-time training metrics and neural architecture exploration.",
    image: "/placeholder.svg?height=500&width=700",
    category: "Machine Learning",
    tech: ["Python", "TensorFlow", "React", "D3.js"],
    stats: { stars: 2847, views: 15420 },
    color: "#8b5cf6",
  },
  {
    id: "2",
    title: "Quantum Code Editor",
    subtitle: "Developer Tools",
    description:
      "Next-generation code editor with quantum computing syntax highlighting and collaborative debugging features.",
    image: "/placeholder.svg?height=500&width=700",
    category: "Developer Tools",
    tech: ["TypeScript", "Electron", "Monaco", "WebAssembly"],
    stats: { stars: 5621, views: 28340 },
    color: "#06b6d4",
  },
  {
    id: "3",
    title: "Blockchain Analytics",
    subtitle: "Web3 Platform",
    description:
      "Comprehensive blockchain data analysis platform with real-time transaction monitoring and DeFi insights.",
    image: "/placeholder.svg?height=500&width=700",
    category: "Blockchain",
    tech: ["Solidity", "Next.js", "GraphQL", "Ethereum"],
    stats: { stars: 3924, views: 19680 },
    color: "#f59e0b",
  },
  {
    id: "4",
    title: "Cloud Orchestrator",
    subtitle: "DevOps Suite",
    description:
      "Intelligent cloud infrastructure management with auto-scaling, monitoring, and deployment automation.",
    image: "/placeholder.svg?height=500&width=700",
    category: "DevOps",
    tech: ["Go", "Kubernetes", "Docker", "AWS"],
    stats: { stars: 4156, views: 22150 },
    color: "#10b981",
  },
]

export default function DarkCarouselV4() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [isAnimating, setIsAnimating] = useState(false)
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
  const [hoveredTech, setHoveredTech] = useState(null)
  const [hoveredButton, setHoveredButton] = useState(null)
  const [displayedStars, setDisplayedStars] = useState(0)
  const [displayedViews, setDisplayedViews] = useState(0)
  const containerRef = useRef(null)
  const [particles, setParticles] = useState>([])
  const [stars, setStars] = useState<
    Array<{ id: number; x: number; y: number; size: number; delay: number; speed: number }>
  >([])

  const nextSlide = () => {
    if (isAnimating) return
    setIsAnimating(true)
    setCurrentIndex((prev) => (prev + 1) % projects.length)
  }

  const prevSlide = () => {
    if (isAnimating) return
    setIsAnimating(true)
    setCurrentIndex((prev) => (prev - 1 + projects.length) % projects.length)
  }

  const goToSlide = (index: number) => {
    if (isAnimating || index === currentIndex) return
    setIsAnimating(true)
    setCurrentIndex(index)
  }

  useEffect(() => {
    const timer = setTimeout(() => setIsAnimating(false), 1000)
    return () => clearTimeout(timer)
  }, [currentIndex])

  // Animated counter effect for stats
  useEffect(() => {
    const currentProject = projects[currentIndex]
    const animateCounter = (target: number, setter: (value: number) => void) => {
      let current = 0
      const increment = target / 50
      const timer = setInterval(() => {
        current += increment
        if (current >= target) {
          setter(target)
          clearInterval(timer)
        } else {
          setter(Math.floor(current))
        }
      }, 30)
    }

    const delay = setTimeout(() => {
      animateCounter(currentProject.stats.stars, setDisplayedStars)
      animateCounter(currentProject.stats.views, setDisplayedViews)
    }, 700)

    return () => clearTimeout(delay)
  }, [currentIndex])

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (containerRef.current) {
        const rect = containerRef.current.getBoundingClientRect()
        setMousePosition({
          x: (e.clientX - rect.left) / rect.width,
          y: (e.clientY - rect.top) / rect.height,
        })
      }
    }

    const container = containerRef.current
    if (container) {
      container.addEventListener("mousemove", handleMouseMove)
      return () => container.removeEventListener("mousemove", handleMouseMove)
    }
  }, [])

  // Generate minimal floating particles and very minimal stars
  useEffect(() => {
    const newParticles = Array.from({ length: 8 }, (_, i) => ({
      id: i,
      x: Math.random() * 100,
      y: Math.random() * 100,
      delay: Math.random() * 3,
    }))
    setParticles(newParticles)

    // Generate VERY minimal animated stars (reduced from 20 to 6)
    const newStars = Array.from({ length: 6 }, (_, i) => ({
      id: i,
      x: Math.random() * 100,
      y: Math.random() * 100,
      size: Math.random() * 1.5 + 0.5, // Smaller size range
      delay: Math.random() * 8, // Longer delays for more spacing
      speed: Math.random() * 4 + 3, // Slower animation
    }))
    setStars(newStars)
  }, [])

  // Animate stars when switching projects
  useEffect(() => {
    if (isAnimating) {
      // Create a burst effect for stars when switching
      setStars((prevStars) =>
        prevStars.map((star) => ({
          ...star,
          delay: Math.random() * 0.5, // Reset delays for burst effect
        })),
      )
    }
  }, [isAnimating])

  const currentProject = projects[currentIndex]

  return (
    
      {/* Animated Background Grid with Enhanced Shadows */}
      
        
      

      {/* Very Minimal Animated Stars Background */}
      
        {stars.map((star) => (
          
        ))}
      

      {/* Floating Particles with Enhanced Shadows */}
      
        {particles.map((particle) => (
          
        ))}
      

      {/* Mouse Glow Effect with Enhanced Shadow */}
      

      {/* Main Carousel Container */}
      
        {/* Background Number with Enhanced Animation */}
        
          
            {/* Previous number (exit animation) */}
            {isAnimating && (
              
                {projects[(currentIndex - 1 + projects.length) % projects.length].id}
              
            )}

            {/* Current number (enter animation) */}
            
              {currentProject.id}
            

            {/* Animated Border Around Number */}
            
          
        

        {/* Content Grid */}
        
          
            {/* Left Content */}
            
              {/* Category Badge with Enhanced Shadow */}
              
                
                {currentProject.category}
                
                2024
              

              {/* Title with Enhanced Shadows */}
              
                
                  {currentProject.title.split(" ").map((word, index) => (
                    
                      {word}{" "}
                    
                  ))}
                

                
                  {currentProject.subtitle}
                
              

              {/* Description */}
              
                {currentProject.description}
              

              {/* Tech Stack with Enhanced Shadows */}
              
                {currentProject.tech.map((tech, index) => (
                   setHoveredTech(tech)}
                    onMouseLeave={() => setHoveredTech(null)}
                  >
                    {tech}
                  
                ))}
              

              {/* Stats with Enhanced Shadows */}
              
                
                  
                  {displayedStars.toLocaleString()}
                  stars
                
                
                  
                  {displayedViews.toLocaleString()}
                  views
                
              

              {/* Action Buttons with Enhanced Shadows */}
              
                

                
              
            

            {/* Right Image with Enhanced Shadows */}
            
              
                {/* Main Image Container */}
                
                  {/* Animated Border */}
                  

                  {/* Inner Container */}
                  
                    

                    {/* Overlay with Micro Animations */}
                    

                    {/* Floating Action Button */}
                    
                      
                    

                    {/* Progress Bar Animation */}
                    
                      
                    
                  
                

                {/* Floating Decorative Elements with Enhanced Shadows */}
                
                

                {/* Orbiting Elements with Shadows */}
                
                  
                
              
            
          
        

        {/* Navigation Arrows with Enhanced Shadows */}
        

        
      

      {/* Bottom Pagination with Enhanced Shadows */}
      
        {/* Pagination Dots */}
        
          {projects.map((project, index) => (
            
          ))}
        

        {/* Counter with Shadow */}
        
          
            {String(currentIndex + 1)}
          
          /
          {String(projects.length)}
        
      

      {/* Custom CSS for Enhanced Animations */}
      
    
  )
}
[V0_FILE]png:file="public/images/wings-reference.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-07-01%20at%202.35.31%E2%80%AFAM-r5OFKgaN32JjREYNtrLxuQKRpuUpGJ.png" isMerged="true"
[V0_FILE]typescriptreact:file="wings-section.tsx" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { Code, Shield, Blocks, Smartphone, Brain, Palette } from "lucide-react"

const wings = [
  {
    id: "webdev",
    name: "Fullstack WebDev",
    shortName: "WebDev",
    description: "Building modern web applications with cutting-edge technologies and frameworks.",
    icon: Code,
    color: "#06b6d4",
    gradient: "from-cyan-500 to-blue-500",
    technologies: ["React", "Next.js", "Node.js", "TypeScript"],
    members: 45,
    projects: 23,
  },
  {
    id: "cybersecurity",
    name: "Cybersecurity",
    shortName: "CyberSec",
    description: "Protecting digital assets and building secure systems for the future.",
    icon: Shield,
    color: "#ef4444",
    gradient: "from-red-500 to-pink-500",
    technologies: ["Penetration Testing", "Cryptography", "Network Security", "Ethical Hacking"],
    members: 32,
    projects: 18,
  },
  {
    id: "blockchain",
    name: "Blockchain",
    shortName: "Blockchain",
    description: "Developing decentralized applications and exploring Web3 technologies.",
    icon: Blocks,
    color: "#f59e0b",
    gradient: "from-amber-500 to-orange-500",
    technologies: ["Solidity", "Ethereum", "Smart Contracts", "DeFi"],
    members: 28,
    projects: 15,
  },
  {
    id: "android",
    name: "Android Development",
    shortName: "Android",
    description: "Creating innovative mobile applications for the Android ecosystem.",
    icon: Smartphone,
    color: "#10b981",
    gradient: "from-green-500 to-emerald-500",
    technologies: ["Kotlin", "Java", "Flutter", "React Native"],
    members: 38,
    projects: 31,
  },
  {
    id: "ai",
    name: "Artificial Intelligence",
    shortName: "AI/ML",
    description: "Exploring machine learning and artificial intelligence to solve complex problems.",
    icon: Brain,
    color: "#8b5cf6",
    gradient: "from-purple-500 to-violet-500",
    technologies: ["Python", "TensorFlow", "PyTorch", "Computer Vision"],
    members: 41,
    projects: 19,
  },
  {
    id: "design",
    name: "UI/UX Design",
    shortName: "Design",
    description: "Crafting beautiful and intuitive user experiences through thoughtful design.",
    icon: Palette,
    color: "#ec4899",
    gradient: "from-pink-500 to-rose-500",
    technologies: ["Figma", "Adobe XD", "Prototyping", "User Research"],
    members: 25,
    projects: 42,
  },
]

export default function WingsSection() {
  const [activeWing, setActiveWing] = useState(wings[0])
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
  const [hoveredWing, setHoveredWing] = useState(null)
  const containerRef = useRef(null)
  const [displayedMembers, setDisplayedMembers] = useState(0)
  const [displayedProjects, setDisplayedProjects] = useState(0)

  // Animated counter effect
  useEffect(() => {
    const animateCounter = (target: number, setter: (value: number) => void) => {
      let current = 0
      const increment = target / 30
      const timer = setInterval(() => {
        current += increment
        if (current >= target) {
          setter(target)
          clearInterval(timer)
        } else {
          setter(Math.floor(current))
        }
      }, 50)
    }

    const delay = setTimeout(() => {
      animateCounter(activeWing.members, setDisplayedMembers)
      animateCounter(activeWing.projects, setDisplayedProjects)
    }, 300)

    return () => clearTimeout(delay)
  }, [activeWing])

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (containerRef.current) {
        const rect = containerRef.current.getBoundingClientRect()
        setMousePosition({
          x: (e.clientX - rect.left) / rect.width,
          y: (e.clientY - rect.top) / rect.height,
        })
      }
    }

    const container = containerRef.current
    if (container) {
      container.addEventListener("mousemove", handleMouseMove)
      return () => container.removeEventListener("mousemove", handleMouseMove)
    }
  }, [])

  const handleWingClick = (wing: (typeof wings)[0]) => {
    setActiveWing(wing)
  }

  return (
    
      {/* Background Elements */}
      
        
      

      {/* Mouse Glow Effect */}
      

      {/* Main Content */}
      
        {/* Header */}
        
          
            Our 
            
              Wings
            
          
          
            Discover the diverse domains where DevClub members innovate, learn, and build the future of technology.
          
        

        {/* Wings Display */}
        
          
            {/* Left Side - Wings List */}
            
              {wings.map((wing, index) => {
                const Icon = wing.icon
                const isActive = activeWing.id === wing.id
                const isHovered = hoveredWing === wing.id

                return (
                   handleWingClick(wing)}
                    onMouseEnter={() => setHoveredWing(wing.id)}
                    onMouseLeave={() => setHoveredWing(null)}
                  >
                    
                      
                        
                      

                      
                        
                          {wing.name}
                        
                        
                          {wing.members} members • {wing.projects} projects
                        
                      

                      
                    

                    {/* Active Wing Indicator */}
                    {isActive && (
                      
                    )}
                  
                )
              })}
            

            {/* Right Side - Active Wing Display */}
            
              
                {/* Background Pattern */}
                

                {/* Main Content */}
                
                  {/* Wing Icon */}
                  
                    
                  

                  {/* Wing Name */}
                  
                    {activeWing.shortName}
                  

                  {/* Description */}
                  {activeWing.description}

                  {/* Stats */}
                  
                    
                      
                        {displayedMembers}
                      
                      Members
                    
                    
                    
                      
                        {displayedProjects}
                      
                      Projects
                    
                  

                  {/* Technologies */}
                  
                    {activeWing.technologies.map((tech, index) => (
                      
                        {tech}
                      
                    ))}
                  
                

                {/* Decorative Elements */}
                
                
              
            
          
        
      

      {/* Custom CSS */}
      
    
  )
}
[V0_FILE]jpeg:file="public/images/slideshow-reference.jpeg" url="https://sjc.microlink.io/ZmAZURr6FUwUNdLCI1LBtcBxpWJnd1e1iRXjD-5Pev08GGnWtFamM_GS9HA8JTnBeqDnPrIGNhXk7cIfcL8lgg.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="wings-slideshow.tsx" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { Code, Shield, Blocks, Smartphone, Brain, Palette, ChevronLeft, ChevronRight } from "lucide-react"

const wings = [
  {
    id: "webdev",
    name: "Fullstack WebDev",
    shortName: "WebDev",
    description:
      "Building modern web applications with cutting-edge technologies and frameworks for the digital future.",
    icon: Code,
    color: "#06b6d4",
    gradient: "from-cyan-500 to-blue-500",
    technologies: ["React", "Next.js", "Node.js", "TypeScript", "MongoDB"],
    members: 45,
    projects: 23,
    established: "2020",
  },
  {
    id: "cybersecurity",
    name: "Cybersecurity",
    shortName: "CyberSec",
    description: "Protecting digital assets and building secure systems to safeguard the future of technology.",
    icon: Shield,
    color: "#ef4444",
    gradient: "from-red-500 to-pink-500",
    technologies: ["Penetration Testing", "Cryptography", "Network Security", "Ethical Hacking", "OSINT"],
    members: 32,
    projects: 18,
    established: "2021",
  },
  {
    id: "blockchain",
    name: "Blockchain",
    shortName: "Blockchain",
    description: "Developing decentralized applications and exploring Web3 technologies for a trustless future.",
    icon: Blocks,
    color: "#f59e0b",
    gradient: "from-amber-500 to-orange-500",
    technologies: ["Solidity", "Ethereum", "Smart Contracts", "DeFi", "NFTs"],
    members: 28,
    projects: 15,
    established: "2021",
  },
  {
    id: "android",
    name: "Android Development",
    shortName: "Android",
    description: "Creating innovative mobile applications for the Android ecosystem with modern development practices.",
    icon: Smartphone,
    color: "#10b981",
    gradient: "from-green-500 to-emerald-500",
    technologies: ["Kotlin", "Java", "Flutter", "React Native", "Firebase"],
    members: 38,
    projects: 31,
    established: "2020",
  },
  {
    id: "ai",
    name: "Artificial Intelligence",
    shortName: "AI/ML",
    description: "Exploring machine learning and artificial intelligence to solve complex real-world problems.",
    icon: Brain,
    color: "#8b5cf6",
    gradient: "from-purple-500 to-violet-500",
    technologies: ["Python", "TensorFlow", "PyTorch", "Computer Vision", "NLP"],
    members: 41,
    projects: 19,
    established: "2021",
  },
  {
    id: "design",
    name: "UI/UX Design",
    shortName: "Design",
    description: "Crafting beautiful and intuitive user experiences through thoughtful and user-centered design.",
    icon: Palette,
    color: "#ec4899",
    gradient: "from-pink-500 to-rose-500",
    technologies: ["Figma", "Adobe XD", "Prototyping", "User Research", "Design Systems"],
    members: 25,
    projects: 42,
    established: "2020",
  },
]

export default function WingsSlideshow() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [isAnimating, setIsAnimating] = useState(false)
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
  const containerRef = useRef(null)
  const [displayedMembers, setDisplayedMembers] = useState(0)
  const [displayedProjects, setDisplayedProjects] = useState(0)

  const currentWing = wings[currentIndex]

  const nextSlide = () => {
    if (isAnimating) return
    setIsAnimating(true)
    setCurrentIndex((prev) => (prev + 1) % wings.length)
  }

  const prevSlide = () => {
    if (isAnimating) return
    setIsAnimating(true)
    setCurrentIndex((prev) => (prev - 1 + wings.length) % wings.length)
  }

  const goToSlide = (index: number) => {
    if (isAnimating || index === currentIndex) return
    setIsAnimating(true)
    setCurrentIndex(index)
  }

  useEffect(() => {
    const timer = setTimeout(() => setIsAnimating(false), 1000)
    return () => clearTimeout(timer)
  }, [currentIndex])

  // Auto-advance slideshow
  useEffect(() => {
    const interval = setInterval(nextSlide, 6000)
    return () => clearInterval(interval)
  }, [])

  // Animated counter effect
  useEffect(() => {
    const animateCounter = (target: number, setter: (value: number) => void) => {
      let current = 0
      const increment = target / 40
      const timer = setInterval(() => {
        current += increment
        if (current >= target) {
          setter(target)
          clearInterval(timer)
        } else {
          setter(Math.floor(current))
        }
      }, 40)
    }

    const delay = setTimeout(() => {
      animateCounter(currentWing.members, setDisplayedMembers)
      animateCounter(currentWing.projects, setDisplayedProjects)
    }, 600)

    return () => clearTimeout(delay)
  }, [currentIndex])

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (containerRef.current) {
        const rect = containerRef.current.getBoundingClientRect()
        setMousePosition({
          x: (e.clientX - rect.left) / rect.width,
          y: (e.clientY - rect.top) / rect.height,
        })
      }
    }

    const container = containerRef.current
    if (container) {
      container.addEventListener("mousemove", handleMouseMove)
      return () => container.removeEventListener("mousemove", handleMouseMove)
    }
  }, [])

  return (
    
      {/* Background Elements */}
      
        
      

      {/* Dynamic Background Glow */}
      

      {/* Mouse Glow Effect */}
      

      {/* Main Content */}
      
        
          {/* Header */}
          
            
              Our 
              
                Wings
              
            
            
              Discover the diverse domains where DevClub members innovate, learn, and build the future of technology
              together.
            
          

          {/* Main Wing Display */}
          
            {/* Wing Icon */}
            
              
            

            {/* Wing Name */}
            
              {currentWing.shortName}
            

            {/* Full Name */}
            
              {currentWing.name}
            

            {/* Description */}
            
              {currentWing.description}
            

            {/* Stats */}
            
              
                
                  {displayedMembers}
                
                Members
              

              

              
                
                  {displayedProjects}
                
                Projects
              

              

              
                
                  {currentWing.established}
                
                Established
              
            

            {/* Technologies */}
            
              {currentWing.technologies.map((tech, index) => (
                
                  {tech}
                
              ))}
            
          

          {/* Navigation Dots */}
          
            {wings.map((wing, index) => (
              
            ))}
          

          {/* Wing Counter */}
          
            
              {String(currentIndex + 1).padStart(2, "0")}
            
            /
            {String(wings.length).padStart(2, "0")}
          
        

        {/* Navigation Arrows */}
        

        
      

      {/* Progress Bar */}
      
        
      

      {/* Custom CSS */}
      
    
  )
}
[V0_FILE]typescriptreact:file="events-carousel.tsx"
"use client"

import { useState, useEffect, useRef } from "react"
import { ChevronLeft, ChevronRight, ExternalLink, Calendar, Users, Heart, MapPin } from "lucide-react"
import { Button } from "@/components/ui/button"
import Image from "next/image"

const events = [
  {
    id: "E01",
    title: "AI Innovation Summit",
    subtitle: "Global Tech Conference",
    description:
      "Explore the forefront of artificial intelligence with expert talks, hands-on workshops, and real-world demos.",
    image: "/event-placeholder.svg?height=500&width=700",
    category: "Conference",
    tech: ["AI", "Deep Learning", "NLP", "Robotics"],
    stats: { attendees: 1200, interest: 8400 },
    color: "#ef4444",
    date: "March 15-17, 2024",
    location: "Tech Hub Convention Center",
  },
  {
    id: "E02",
    title: "Hack The Future",
    subtitle: "48-Hour Hackathon",
    description:
      "Competitive coding and building marathon focused on sustainability, fintech, and health-tech solutions.",
    image: "/event-placeholder.svg?height=500&width=700",
    category: "Hackathon",
    tech: ["React", "Node.js", "Firebase", "Figma"],
    stats: { attendees: 500, interest: 6200 },
    color: "#6366f1",
    date: "April 22-24, 2024",
    location: "Innovation Campus",
  },
  {
    id: "E03",
    title: "Web3 Bootcamp",
    subtitle: "Blockchain Developer Workshop",
    description: "Hands-on bootcamp covering smart contracts, DApps, and NFT deployment with expert-led sessions.",
    image: "/event-placeholder.svg?height=500&width=700",
    category: "Workshop",
    tech: ["Solidity", "Ethereum", "Metamask", "Hardhat"],
    stats: { attendees: 300, interest: 4200 },
    color: "#f97316",
    date: "May 10-12, 2024",
    location: "Blockchain Academy",
  },
  {
    id: "E04",
    title: "DevOps Day Out",
    subtitle: "Tech Talk & Live Demo",
    description:
      "An immersive day with CI/CD experts discussing real-time monitoring, containerization, and scalable infrastructure.",
    image: "/event-placeholder.svg?height=500&width=700",
    category: "Tech Talk",
    tech: ["Docker", "Kubernetes", "Jenkins", "Terraform"],
    stats: { attendees: 650, interest: 5100 },
    color: "#14b8a6",
    date: "June 5, 2024",
    location: "DevOps Center",
  },
]

export default function EventsCarousel() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [isAnimating, setIsAnimating] = useState(false)
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
  const [hoveredTech, setHoveredTech] = useState(null)
  const [hoveredButton, setHoveredButton] = useState(null)
  const [displayedAttendees, setDisplayedAttendees] = useState(0)
  const [displayedInterest, setDisplayedInterest] = useState(0)
  const containerRef = useRef(null)
  const [particles, setParticles] = useState>([])
  const [stars, setStars] = useState<
    Array<{ id: number; x: number; y: number; size: number; delay: number; speed: number }>
  >([])

  const nextSlide = () => {
    if (isAnimating) return
    setIsAnimating(true)
    setCurrentIndex((prev) => (prev + 1) % events.length)
  }

  const prevSlide = () => {
    if (isAnimating) return
    setIsAnimating(true)
    setCurrentIndex((prev) => (prev - 1 + events.length) % events.length)
  }

  const goToSlide = (index: number) => {
    if (isAnimating || index === currentIndex) return
    setIsAnimating(true)
    setCurrentIndex(index)
  }

  useEffect(() => {
    const timer = setTimeout(() => setIsAnimating(false), 1000)
    return () => clearTimeout(timer)
  }, [currentIndex])

  // Animated counter effect for stats
  useEffect(() => {
    const currentEvent = events[currentIndex]
    const animateCounter = (target: number, setter: (value: number) => void) => {
      let current = 0
      const increment = target / 50
      const timer = setInterval(() => {
        current += increment
        if (current >= target) {
          setter(target)
          clearInterval(timer)
        } else {
          setter(Math.floor(current))
        }
      }, 30)
    }

    const delay = setTimeout(() => {
      animateCounter(currentEvent.stats.attendees, setDisplayedAttendees)
      animateCounter(currentEvent.stats.interest, setDisplayedInterest)
    }, 700)

    return () => clearTimeout(delay)
  }, [currentIndex])

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (containerRef.current) {
        const rect = containerRef.current.getBoundingClientRect()
        setMousePosition({
          x: (e.clientX - rect.left) / rect.width,
          y: (e.clientY - rect.top) / rect.height,
        })
      }
    }

    const container = containerRef.current
    if (container) {
      container.addEventListener("mousemove", handleMouseMove)
      return () => container.removeEventListener("mousemove", handleMouseMove)
    }
  }, [])

  // Generate minimal floating particles and very minimal stars
  useEffect(() => {
    const newParticles = Array.from({ length: 8 }, (_, i) => ({
      id: i,
      x: Math.random() * 100,
      y: Math.random() * 100,
      delay: Math.random() * 3,
    }))
    setParticles(newParticles)

    // Generate VERY minimal animated stars (reduced from 20 to 6)
    const newStars = Array.from({ length: 6 }, (_, i) => ({
      id: i,
      x: Math.random() * 100,
      y: Math.random() * 100,
      size: Math.random() * 1.5 + 0.5, // Smaller size range
      delay: Math.random() * 8, // Longer delays for more spacing
      speed: Math.random() * 4 + 3, // Slower animation
    }))
    setStars(newStars)
  }, [])

  // Animate stars when switching events
  useEffect(() => {
    if (isAnimating) {
      // Create a burst effect for stars when switching
      setStars((prevStars) =>
        prevStars.map((star) => ({
          ...star,
          delay: Math.random() * 0.5, // Reset delays for burst effect
        })),
      )
    }
  }, [isAnimating])

  const currentEvent = events[currentIndex]

  return (
    
      {/* Animated Background Grid with Enhanced Shadows */}
      
        
      

      {/* Very Minimal Animated Stars Background */}
      
        {stars.map((star) => (
          
        ))}
      

      {/* Floating Particles with Enhanced Shadows */}
      
        {particles.map((particle) => (
          
        ))}
      

      {/* Mouse Glow Effect with Enhanced Shadow */}
      

      {/* Main Carousel Container */}
      
        {/* Background Number with Enhanced Animation */}
        
          
            {/* Previous number (exit animation) */}
            {isAnimating && (
              
                {events[(currentIndex - 1 + events.length) % events.length].id.replace("E", "")}
              
            )}

            {/* Current number (enter animation) */}
            
              {currentEvent.id.replace("E", "")}
            

            {/* Animated Border Around Number */}
            
          
        

        {/* Content Grid */}
        
          
            {/* Left Content */}
            
              {/* Category Badge with Enhanced Shadow */}
              
                
                {currentEvent.category}
                
                2024
              

              {/* Title with Enhanced Shadows */}
              
                
                  {currentEvent.title.split(" ").map((word, index) => (
                    
                      {word}{" "}
                    
                  ))}
                

                
                  {currentEvent.subtitle}
                
              

              {/* Event Details */}
              
                
                  
                  {currentEvent.date}
                
                
                  
                  {currentEvent.location}
                
              

              {/* Description */}
              
                {currentEvent.description}
              

              {/* Tech Stack with Enhanced Shadows */}
              
                {currentEvent.tech.map((tech, index) => (
                   setHoveredTech(tech)}
                    onMouseLeave={() => setHoveredTech(null)}
                  >
                    {tech}
                  
                ))}
              

              {/* Stats with Enhanced Shadows */}
              
                
                  
                  {displayedAttendees.toLocaleString()}
                  attendees
                
                
                  
                  {displayedInterest.toLocaleString()}
                  interested
                
              

              {/* Action Buttons with Enhanced Shadows */}
              
                

                
              
            

            {/* Right Image with Enhanced Shadows */}
            
              
                {/* Main Image Container */}
                
                  {/* Animated Border */}
                  

                  {/* Inner Container */}
                  
                    

                    {/* Overlay with Micro Animations */}
                    

                    {/* Floating Action Button */}
                    
                      
                    

                    {/* Progress Bar Animation */}
                    
                      
                    
                  
                

                {/* Floating Decorative Elements with Enhanced Shadows */}
                
                

                {/* Orbiting Elements with Shadows */}
                
                  
                
              
            
          
        

        {/* Navigation Arrows with Enhanced Shadows */}
        

        
      

      {/* Bottom Pagination with Enhanced Shadows */}
      
        {/* Pagination Dots */}
        
          {events.map((event, index) => (
            
          ))}
        

        {/* Counter with Shadow */}
        
          
            {String(currentIndex + 1)}
          
          /
          {String(events.length)}
        
      

      {/* Custom CSS for Enhanced Animations */}
      
    
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
"use client"

import DarkCarouselV4 from "../dark-carousel-v4"
import WingsSlideshow from "../wings-slideshow"
import EventsCarousel from "../events-carousel"

export default function Page() {
  return (
    
      
      
      
    
  )
}

{currentProject.title}

{currentProject.subtitle}

{currentProject.title}

{currentProject.subtitle}

{currentProject.title.split(" ").map((word, index) => ( {word}{" "} ))}

{currentProject.subtitle}

{currentProject.title.split(" ").map((word, index) => ( {word}{" "} ))}

{currentProject.subtitle}

Our Wings

{wing.name}

{activeWing.shortName}

Our Wings

{currentWing.shortName}

{currentWing.name}

{currentEvent.title.split(" ").map((word, index) => ( {word}{" "} ))}

{currentEvent.subtitle}