[V0_FILE]typescriptreact:file="types/event.ts" isMerged="true" // TypeScript Interface for Event Data Structure export interface Event { id: string title: string description: string date: string time: string venue: string category: "workshop" | "talk" | "orientation" | "bootcamp" status: "upcoming" | "past" | "ongoing" imageUrl: string registrationUrl?: string keyPoints?: string[] organizers?: string[] targetAudience?: string } export interface EventFilters { status?: Event["status"] category?: Event["category"] searchTerm?: string } [V0_FILE]typescriptreact:file="utils/event-filters.ts" isMerged="true" import type { Event, EventFilters } from "@/types/event" // Utility Functions for Event Filtering export const filterEvents = (events: Event[], filters: EventFilters): Event[] => { return events.filter((event) => { // Filter by status if (filters.status && event.status !== filters.status) { return false } // Filter by category if (filters.category && event.category !== filters.category) { return false } // Filter by search term if (filters.searchTerm) { const searchLower = filters.searchTerm.toLowerCase() return ( event.title.toLowerCase().includes(searchLower) || event.description.toLowerCase().includes(searchLower) || event.keyPoints?.some((point) => point.toLowerCase().includes(searchLower)) ) } return true }) } export const getUpcomingEvents = (events: Event[]): Event[] => { return filterEvents(events, { status: "upcoming" }) } export const getPastEvents = (events: Event[]): Event[] => { return filterEvents(events, { status: "past" }) } export const getEventsByCategory = (events: Event[], category: Event["category"]): Event[] => { return filterEvents(events, { category }) } export const sortEventsByDate = (events: Event[], ascending = true): Event[] => { return [...events].sort((a, b) => { const dateA = new Date(a.date) const dateB = new Date(b.date) return ascending ? dateA.getTime() - dateB.getTime() : dateB.getTime() - dateA.getTime() }) } [V0_FILE]typescriptreact:file="components/events-carousel.tsx" isMerged="true" "use client" import { useState } from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import EventCard from "./event-card" import type { Event } from "@/types/event" interface EventsCarouselProps { events: Event[] title: string } export default function EventsCarousel({ events, title }: EventsCarouselProps) { const [currentIndex, setCurrentIndex] = useState(0) const eventsPerPage = 3 const totalPages = Math.ceil(events.length / eventsPerPage) const nextSlide = () => { setCurrentIndex((prev) => (prev + 1) % totalPages) } const prevSlide = () => { setCurrentIndex((prev) => (prev - 1 + totalPages) % totalPages) } const currentEvents = events.slice(currentIndex * eventsPerPage, (currentIndex + 1) * eventsPerPage) return (

{title}

{/* Navigation Buttons */} {/* Events Grid */}

{currentEvents.map((event) => ( ))}

{/* Pagination Dots */} {totalPages > 1 && (

{Array.from({ length: totalPages }).map((_, index) => (

)}

{/* Know More Button */}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import { Instagram, Twitter, Linkedin } from "lucide-react" export default function Footer() { return ( ) } [V0_FILE]javascript:file="next.config.mjs" isFixed="true" isQuickEdit="true" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { domains: [ 'localhost', 'i.imgur.com', 'images.unsplash.com', 'via.placeholder.com' ], formats: ['image/webp', 'image/avif'], deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840], imageSizes: [16, 32, 48, 64, 96, 128, 256, 384], unoptimized: true, }, experimental: { optimizePackageImports: ['lucide-react'], }, }; export default nextConfig; [V0_FILE]typescript:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { navy: { 50: "#f0f1f7", 100: "#e0e3ef", 200: "#c1c7df", 300: "#a2abcf", 400: "#838fbf", 500: "#6473af", 600: "#4a5a8c", 700: "#394469", 800: "#282e46", 900: "#1a1f3a", // Primary navy color }, orange: { 50: "#fff7ed", 100: "#ffedd5", 200: "#fed7aa", 300: "#fdba74", 400: "#fb923c", 500: "#ff6b35", // Primary orange color 600: "#ea580c", 700: "#c2410c", 800: "#9a3412", 900: "#7c2d12", }, background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", chart: { "1": "hsl(var(--chart-1))", "2": "hsl(var(--chart-2))", "3": "hsl(var(--chart-3))", "4": "hsl(var(--chart-4))", "5": "hsl(var(--chart-5))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, fontFamily: { sans: ["Inter", "system-ui", "sans-serif"], mono: ["Fira Code", "monospace"], }, spacing: { "18": "4.5rem", "88": "22rem", }, animation: { "fade-in-up": "fadeInUp 0.6s ease-out", "slide-in-left": "slideInLeft 0.6s ease-out", "slide-in-right": "slideInRight 0.6s ease-out", "pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite", }, backdropBlur: { xs: "2px", }, boxShadow: { glow: "0 0 20px rgba(255, 107, 53, 0.3)", "glow-lg": "0 0 40px rgba(255, 107, 53, 0.4)", }, }, }, plugins: [require("tailwindcss-animate")], } export default config [V0_FILE]typescriptreact:file="components/enhanced-carousel.tsx" isMerged="true" "use client" import { useState, useEffect, useCallback } from "react" import { ChevronLeft, ChevronRight, Play, Pause } from "lucide-react" import EventCard from "./event-card" import type { Event } from "@/types/event" interface EnhancedCarouselProps { events: Event[] title: string autoPlay?: boolean autoPlayInterval?: number itemsPerView?: { mobile: number tablet: number desktop: number } } export default function EnhancedCarousel({ events, title, autoPlay = false, autoPlayInterval = 5000, itemsPerView = { mobile: 1, tablet: 2, desktop: 3 }, }: EnhancedCarouselProps) { const [currentIndex, setCurrentIndex] = useState(0) const [isPlaying, setIsPlaying] = useState(autoPlay) const [itemsToShow, setItemsToShow] = useState(itemsPerView.desktop) const [isTransitioning, setIsTransitioning] = useState(false) // Responsive items calculation useEffect(() => { const handleResize = () => { const width = window.innerWidth if (width < 768) { setItemsToShow(itemsPerView.mobile) } else if (width < 1024) { setItemsToShow(itemsPerView.tablet) } else { setItemsToShow(itemsPerView.desktop) } } handleResize() window.addEventListener("resize", handleResize) return () => window.removeEventListener("resize", handleResize) }, [itemsPerView]) const totalSlides = Math.max(0, events.length - itemsToShow + 1) const canGoNext = currentIndex < totalSlides - 1 const canGoPrev = currentIndex > 0 // Auto-play functionality useEffect(() => { if (!isPlaying || totalSlides <= 1) return const interval = setInterval(() => { setCurrentIndex((prev) => { if (prev >= totalSlides - 1) { return 0 // Loop back to start } return prev + 1 }) }, autoPlayInterval) return () => clearInterval(interval) }, [isPlaying, totalSlides, autoPlayInterval]) const goToSlide = useCallback( (index: number) => { if (isTransitioning) return setIsTransitioning(true) setCurrentIndex(Math.max(0, Math.min(index, totalSlides - 1))) setTimeout(() => setIsTransitioning(false), 300) }, [totalSlides, isTransitioning], ) const nextSlide = useCallback(() => { if (canGoNext && !isTransitioning) { goToSlide(currentIndex + 1) } }, [currentIndex, canGoNext, goToSlide, isTransitioning]) const prevSlide = useCallback(() => { if (canGoPrev && !isTransitioning) { goToSlide(currentIndex - 1) } }, [currentIndex, canGoPrev, goToSlide, isTransitioning]) const toggleAutoPlay = () => { setIsPlaying(!isPlaying) } if (events.length === 0) { return (

{title}

No events to display

) } return (

{/* Header with controls */}

{title}

{/* Auto-play control */} {autoPlay && totalSlides > 1 && ( )}

{/* Navigation Buttons */} {/* Carousel Container */}

{events.map((event, index) => (

))}

{/* Progress Bar */} {totalSlides > 1 && (

)} {/* Pagination Dots */} {totalSlides > 1 && totalSlides <= 10 && (

{Array.from({ length: totalSlides }).map((_, index) => (

)} {/* Slide Counter */}

{currentIndex + 1} of {totalSlides} • Showing {Math.min(itemsToShow, events.length)} events

{/* Know More Button */}

) } [V0_FILE]typescriptreact:file="components/scope-logo.tsx" isMerged="true" interface ScopeLogoProps { size?: number showText?: boolean className?: string } export default function ScopeLogo({ size = 48, showText = false, className = "" }: ScopeLogoProps) { return (

{showText && (

SCOPE

Reva University

)}

) } [V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import ScopeLogo from "./scope-logo" export default function Header() { const navItems = ["Home", "Events", "About Us", "Team", "FAQ"] return (

{/* Logo */} {/* Navigation */} {/* Mobile Menu Button */}

) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom Navy Blue Color */ @layer utilities { .bg-navy-900 { background-color: #1a1f3a; } .text-navy-900 { color: #1a1f3a; } .border-navy-900 { border-color: #1a1f3a; } } /* Hover Effects and Animations */ @layer components { .event-card-hover { @apply transition-all duration-300 ease-in-out; @apply hover:scale-105 hover:shadow-2xl; @apply hover:bg-gradient-to-br hover:from-orange-500 hover:to-orange-600; } .nav-link-hover { @apply relative transition-colors duration-200; } .nav-link-hover::after { @apply absolute bottom-0 left-0 w-0 h-0.5 bg-orange-500 transition-all duration-300; content: ""; } .nav-link-hover:hover::after { @apply w-full; } .button-primary { @apply bg-orange-500 hover:bg-orange-600 text-white px-6 py-3 rounded-lg font-medium; @apply transition-all duration-200 transform hover:scale-105 active:scale-95; @apply shadow-lg hover:shadow-xl; } .button-secondary { @apply bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium; @apply transition-all duration-200 transform hover:scale-105 active:scale-95; @apply shadow-lg hover:shadow-xl; } /* Enhanced Carousel Styles */ .carousel-container { @apply relative overflow-hidden; scroll-behavior: smooth; } .carousel-track { @apply flex transition-transform duration-300 ease-in-out; will-change: transform; } .carousel-item { @apply flex-shrink-0; backface-visibility: hidden; transform: translateZ(0); } .carousel-nav-button { @apply absolute top-1/2 -translate-y-1/2 z-10; @apply bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-full p-3; @apply transition-all duration-200 hover:scale-110; @apply disabled:opacity-50 disabled:cursor-not-allowed; @apply focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-50; } .carousel-dot { @apply w-3 h-3 rounded-full transition-all duration-200 hover:scale-125; @apply focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-50; } .carousel-dot-active { @apply bg-orange-500 scale-125; } .carousel-dot-inactive { @apply bg-white/30 hover:bg-white/50; } } /* Responsive Design Utilities */ @layer utilities { .container-responsive { @apply container mx-auto px-4 sm:px-6 lg:px-8; } .grid-responsive { @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8; } .text-responsive { @apply text-sm sm:text-base lg:text-lg; } .heading-responsive { @apply text-2xl sm:text-3xl lg:text-4xl xl:text-5xl; } /* Performance optimizations */ .gpu-accelerated { transform: translateZ(0); backface-visibility: hidden; perspective: 1000px; } .smooth-scroll { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } } /* Animation Keyframes */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } .animate-fade-in-up { animation: fadeInUp 0.6s ease-out; } .animate-slide-in-left { animation: slideInLeft 0.6s ease-out; } .animate-slide-in-right { animation: slideInRight 0.6s ease-out; } /* Line Clamp Utility */ .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } [V0_FILE]typescriptreact:file="hooks/use-carousel.ts" isMerged="true" "use client" import { useState, useEffect, useCallback } from "react" interface UseCarouselProps { totalItems: number itemsPerView: number autoPlay?: boolean autoPlayInterval?: number loop?: boolean } export function useCarousel({ totalItems, itemsPerView, autoPlay = false, autoPlayInterval = 5000, loop = true, }: UseCarouselProps) { const [currentIndex, setCurrentIndex] = useState(0) const [isPlaying, setIsPlaying] = useState(autoPlay) const [isTransitioning, setIsTransitioning] = useState(false) const maxIndex = Math.max(0, totalItems - itemsPerView) const canGoNext = loop || currentIndex < maxIndex const canGoPrev = loop || currentIndex > 0 const goToSlide = useCallback( (index: number) => { if (isTransitioning) return setIsTransitioning(true) if (loop) { if (index < 0) { setCurrentIndex(maxIndex) } else if (index > maxIndex) { setCurrentIndex(0) } else { setCurrentIndex(index) } } else { setCurrentIndex(Math.max(0, Math.min(index, maxIndex))) } setTimeout(() => setIsTransitioning(false), 300) }, [maxIndex, loop, isTransitioning], ) const next = useCallback(() => { if (canGoNext && !isTransitioning) { goToSlide(currentIndex + 1) } }, [currentIndex, canGoNext, goToSlide, isTransitioning]) const prev = useCallback(() => { if (canGoPrev && !isTransitioning) { goToSlide(currentIndex - 1) } }, [currentIndex, canGoPrev, goToSlide, isTransitioning]) const toggleAutoPlay = useCallback(() => { setIsPlaying(!isPlaying) }, [isPlaying]) // Auto-play effect useEffect(() => { if (!isPlaying || totalItems <= itemsPerView) return const interval = setInterval(() => { next() }, autoPlayInterval) return () => clearInterval(interval) }, [isPlaying, totalItems, itemsPerView, autoPlayInterval, next]) return { currentIndex, isPlaying, isTransitioning, canGoNext, canGoPrev, next, prev, goToSlide, toggleAutoPlay, totalSlides: maxIndex + 1, } } [V0_FILE]typescriptreact:file="data/events.ts" isEdit="true" isQuickEdit="true" import type { Event } from "@/types/event" // Mock Data for Five Distinct Events export const eventsData: Event[] = [ // Existing upcoming events { id: "current-basics-workshop", title: "Current Basics Workshop", description: "Understanding and Modeling Components - A comprehensive workshop covering fundamental concepts of electrical current, circuit analysis, and component modeling techniques.", date: "15th, 17th April 2025", time: "2:00 PM - 5:00 PM", venue: "Electronics Lab, Block A", category: "workshop", status: "upcoming", imageUrl: "/placeholder.svg?height=300&width=400&text=Current+Basics+Workshop", registrationUrl: "#register", keyPoints: [ "Current flow fundamentals", "Component modeling techniques", "Circuit analysis methods", "Hands-on practical sessions", ], targetAudience: "Only for 2nd semester students", }, { id: "web-dev-bootcamp", title: "Web Development Bootcamp", description: "Intensive bootcamp covering modern web development technologies including React, Next.js, and full-stack development practices.", date: "20th May 2025", time: "9:00 AM - 6:00 PM", venue: "IT Lab, Block C", category: "bootcamp", status: "upcoming", imageUrl: "/placeholder.svg?height=300&width=400&text=Web+Development+Bootcamp", keyPoints: ["React fundamentals", "Next.js framework", "Database integration", "Deployment strategies"], }, { id: "ai-ml-workshop", title: "AI/ML Workshop", description: "Comprehensive workshop on Artificial Intelligence and Machine Learning concepts, algorithms, and practical implementations using Python.", date: "15th June 2025", time: "10:00 AM - 5:00 PM", venue: "AI Lab, Block D", category: "workshop", status: "upcoming", imageUrl: "/placeholder.svg?height=300&width=400&text=AI+ML+Workshop", keyPoints: [ "Machine learning algorithms", "Python for AI/ML", "Model training and evaluation", "Real-world case studies", ], }, // Past events with comprehensive details { id: "matlab-orientation-2024", title: "MATLAB Orientation", description: "Unlock MATLAB: Learn, Analyze, Innovate - An intensive orientation program designed to introduce students to MATLAB programming and its applications in engineering analysis and simulation.", date: "10th March 2024", time: "10:00 AM - 4:00 PM", venue: "Computer Lab, Block B", category: "orientation", status: "past", imageUrl: "/placeholder.svg?height=300&width=400&text=MATLAB+Orientation", keyPoints: [ "MATLAB basics and interface navigation", "Programming fundamentals and syntax", "Data analysis and visualization techniques", "Engineering applications and simulations", "Toolbox exploration and usage", ], organizers: ["Dr. Rajesh Kumar", "Prof. Anita Sharma", "Mr. Vikash Patel"], targetAudience: "All engineering students", }, { id: "tech-talk-hands-on-2024", title: "Tech Talk & Hands On", description: "Interactive technology session combining theoretical insights with practical implementation. Explore cutting-edge technologies including IoT, blockchain, and cloud computing with industry experts.", date: "5th February 2024", time: "1:00 PM - 6:00 PM", venue: "Auditorium, Main Block", category: "talk", status: "past", imageUrl: "/placeholder.svg?height=300&width=400&text=Tech+Talk+Hands+On", keyPoints: [ "Industry expert presentations on emerging technologies", "Hands-on demonstrations with real-world projects", "Interactive Q&A sessions with professionals", "Networking opportunities with industry leaders", "Career guidance and internship opportunities", ], organizers: ["Tech Mahindra", "Infosys", "Microsoft"], targetAudience: "Final year students and faculty", }, { id: "robotics-workshop-2024", title: "Robotics & Automation Workshop", description: "Comprehensive workshop on robotics fundamentals, automation systems, and hands-on robot building. Learn about sensors, actuators, programming, and control systems in modern robotics.", date: "18th January 2024", time: "9:00 AM - 5:00 PM", venue: "Robotics Lab, Block E", category: "workshop", status: "past", imageUrl: "/placeholder.svg?height=300&width=400&text=Robotics+Workshop", keyPoints: [ "Robot design and construction principles", "Sensor integration and data processing", "Programming with Arduino and Raspberry Pi", "Automation in industrial applications", "Future trends in robotics and AI integration", ], organizers: ["IEEE Robotics Society", "Dr. Priya Nair", "Robotics Club"], targetAudience: "ECE and Mechanical Engineering students", }, { id: "cybersecurity-seminar-2023", title: "Cybersecurity Awareness Seminar", description: "Essential cybersecurity seminar covering threat landscape, protection strategies, ethical hacking basics, and digital privacy. Learn to protect yourself and organizations from cyber threats.", date: "12th December 2023", time: "2:00 PM - 5:30 PM", venue: "Conference Hall, Block A", category: "talk", status: "past", imageUrl: "/placeholder.svg?height=300&width=400&text=Cybersecurity+Seminar", keyPoints: [ "Current cybersecurity threat landscape", "Personal and organizational security practices", "Introduction to ethical hacking methodologies", "Digital privacy and data protection laws", "Incident response and recovery strategies", ], organizers: ["CyberSafe India", "Prof. Amit Singh", "IT Security Team"], targetAudience: "All students and faculty members", }, { id: "data-science-bootcamp-2023", title: "Data Science & Analytics Bootcamp", description: "Intensive 2-day bootcamp covering data science fundamentals, statistical analysis, machine learning basics, and data visualization using Python and R programming languages.", date: "25th-26th November 2023", time: "9:00 AM - 6:00 PM", venue: "Data Science Lab, Block C", category: "bootcamp", status: "past", imageUrl: "/placeholder.svg?height=300&width=400&text=Data+Science+Bootcamp", keyPoints: [ "Python and R programming for data analysis", "Statistical methods and hypothesis testing", "Data cleaning and preprocessing techniques", "Machine learning algorithms implementation", "Data visualization with matplotlib and ggplot2", "Real-world project development", ], organizers: ["Analytics India Magazine", "Dr. Sneha Reddy", "Data Science Club"], targetAudience: "CSE, IT, and Mathematics students", }, { id: "iot-innovation-workshop-2023", title: "IoT Innovation Workshop", description: "Hands-on workshop exploring Internet of Things (IoT) ecosystem, sensor networks, cloud connectivity, and smart device development. Build your own IoT projects from scratch.", date: "8th October 2023", time: "10:00 AM - 4:00 PM", venue: "IoT Lab, Block D", category: "workshop", status: "past", imageUrl: "/placeholder.svg?height=300&width=400&text=IoT+Innovation+Workshop", keyPoints: [ "IoT architecture and communication protocols", "Sensor integration and data collection", "Cloud platforms and data storage solutions", "Mobile app development for IoT control", "Security considerations in IoT systems", "Industry applications and case studies", ], organizers: ["Intel IoT", "Prof. Karthik Rao", "Innovation Cell"], targetAudience: "ECE, CSE, and IT students", }, { id: "blockchain-fundamentals-2023", title: "Blockchain Fundamentals & Applications", description: "Comprehensive session on blockchain technology, cryptocurrency basics, smart contracts, and decentralized applications. Understand the revolutionary potential of distributed ledger technology.", date: "15th September 2023", time: "1:00 PM - 5:00 PM", venue: "Seminar Hall, Block B", category: "talk", status: "past", imageUrl: "/placeholder.svg?height=300&width=400&text=Blockchain+Fundamentals", keyPoints: [ "Blockchain architecture and consensus mechanisms", "Cryptocurrency and digital wallet management", "Smart contract development with Solidity", "Decentralized application (DApp) creation", "Real-world blockchain implementations", "Future of decentralized finance (DeFi)", ], organizers: ["Blockchain Council", "Dr. Arjun Mehta", "Crypto Club"], targetAudience: "All engineering students and faculty", }, { id: "mobile-app-development-2023", title: "Mobile App Development Workshop", description: "Practical workshop on mobile application development using React Native and Flutter. Learn cross-platform development, UI/UX design principles, and app deployment strategies.", date: "22nd August 2023", time: "9:30 AM - 5:30 PM", venue: "Mobile Dev Lab, Block C", category: "workshop", status: "past", imageUrl: "/placeholder.svg?height=300&width=400&text=Mobile+App+Development", keyPoints: [ "React Native and Flutter framework comparison", "Cross-platform development best practices", "UI/UX design principles for mobile apps", "API integration and data management", "App store deployment and optimization", "Monetization strategies and analytics", ], organizers: ["Google Developers", "Prof. Neha Gupta", "Mobile Dev Society"], targetAudience: "CSE, IT, and design students", }, ] [V0_FILE]typescriptreact:file="utils/event-helpers.ts" import type { Event } from "@/types/event" // Helper function to format event dates for display export const formatEventDate = (dateString: string): string => { // Handle date ranges like "25th-26th November 2023" if (dateString.includes("-")) { return dateString } // Handle single dates like "10th March 2024" return dateString } // Helper function to get event status badge color export const getStatusBadgeColor = (status: Event["status"]): string => { switch (status) { case "upcoming": return "bg-green-500 text-white" case "ongoing": return "bg-blue-500 text-white" case "past": return "bg-gray-500 text-white" default: return "bg-gray-400 text-white" } } // Helper function to get category badge color export const getCategoryBadgeColor = (category: Event["category"]): string => { switch (category) { case "workshop": return "bg-purple-500 text-white" case "talk": return "bg-blue-500 text-white" case "orientation": return "bg-green-500 text-white" case "bootcamp": return "bg-orange-500 text-white" default: return "bg-gray-500 text-white" } } // Helper function to truncate text export const truncateText = (text: string, maxLength: number): string => { if (text.length <= maxLength) return text return text.substring(0, maxLength).trim() + "..." } // Helper function to get event duration export const getEventDuration = (time: string): string => { const timePattern = /(\d{1,2}:\d{2}\s*(?:AM|PM))\s*-\s*(\d{1,2}:\d{2}\s*(?:AM|PM))/i const match = time.match(timePattern) if (match) { const startTime = match[1] const endTime = match[2] // Calculate duration (simplified) const start = parseTime(startTime) const end = parseTime(endTime) const durationMinutes = end - start const hours = Math.floor(durationMinutes / 60) const minutes = durationMinutes % 60 if (hours > 0 && minutes > 0) { return `${hours}h ${minutes}m` } else if (hours > 0) { return `${hours}h` } else { return `${minutes}m` } } return "Duration varies" } // Helper function to parse time string to minutes const parseTime = (timeStr: string): number => { const [time, period] = timeStr.split(/\s*(AM|PM)/i) const [hours, minutes] = time.split(":").map(Number) let totalMinutes = hours * 60 + (minutes || 0) if (period.toUpperCase() === "PM" && hours !== 12) { totalMinutes += 12 * 60 } else if (period.toUpperCase() === "AM" && hours === 12) { totalMinutes -= 12 * 60 } return totalMinutes } // Helper function to get events by year export const getEventsByYear = (events: Event[]): Record => { return events.reduce( (acc, event) => { const year = event.date.match(/\d{4}/)?.[0] || "Unknown" if (!acc[year]) { acc[year] = [] } acc[year].push(event) return acc }, {} as Record, ) } // Helper function to get recent events (last 6 months) export const getRecentEvents = (events: Event[], months = 6): Event[] => { const cutoffDate = new Date() cutoffDate.setMonth(cutoffDate.getMonth() - months) return events.filter((event) => { // Simple date parsing - in a real app, you'd want more robust date handling const eventYear = event.date.match(/\d{4}/)?.[0] const eventMonth = event.date.match( /(January|February|March|April|May|June|July|August|September|October|November|December)/i, )?.[0] if (eventYear && eventMonth) { const eventDate = new Date(`${eventMonth} 1, ${eventYear}`) return eventDate >= cutoffDate } return false }) } [V0_FILE]typescriptreact:file="components/event-card.tsx" isEdit="true" isQuickEdit="true" import Image from "next/image" import type { Event } from "@/types/event" import { Calendar, Clock, MapPin, Users, User } from "lucide-react" import { formatEventDate, getStatusBadgeColor, getCategoryBadgeColor, getEventDuration, truncateText, } from "@/utils/event-helpers" interface EventCardProps { event: Event variant?: "default" | "featured" showFullDescription?: boolean } export default function EventCard({ event, variant = "default", showFullDescription = false }: EventCardProps) { const isFeatured = variant === "featured" return (

{/* Event Image */}

{/* Status and Category Badges */}

{event.status.toUpperCase()} {event.category.toUpperCase()}

{/* Event Content */}

{event.title}

{showFullDescription ? event.description : truncateText(event.description, 120)}

{/* Event Details */}

{formatEventDate(event.date)}

{event.time} {getEventDuration(event.time)}

{event.venue}

{event.targetAudience && (

{event.targetAudience}

)} {event.organizers && event.organizers.length > 0 && (

{event.organizers.slice(0, 2).join(", ")} {event.organizers.length > 2 ? "..." : ""}

)}

{/* Key Points */} {event.keyPoints && isFeatured && (

Key Highlights:

{point}
+{event.keyPoints.length - 4} more highlights

)} {/* Registration Button or Learn More */}

{event.status === "upcoming" && event.registrationUrl ? ( ) : ( )}

) } [V0_FILE]typescriptreact:file="components/event-stats.tsx" import { eventsData } from "@/data/events" import { getUpcomingEvents, getPastEvents, getEventsByCategory } from "@/utils/event-filters" import { Calendar, Users, Award, Clock } from "lucide-react" export default function EventStats() { const upcomingEvents = getUpcomingEvents(eventsData) const pastEvents = getPastEvents(eventsData) const workshops = getEventsByCategory(eventsData, "workshop") const talks = getEventsByCategory(eventsData, "talk") const stats = [ { icon: Calendar, label: "Total Events", value: eventsData.length, color: "text-blue-400", }, { icon: Clock, label: "Upcoming Events", value: upcomingEvents.length, color: "text-green-400", }, { icon: Award, label: "Past Events", value: pastEvents.length, color: "text-orange-400", }, { icon: Users, label: "Workshops Conducted", value: workshops.length, color: "text-purple-400", }, ] return (

{stats.map((stat, index) => (

{stat.value}

{stat.label}

))}

) } [V0_FILE]typescriptreact:file="components/event-categories.tsx" "use client" import { useState } from "react" import { eventsData } from "@/data/events" import { filterEvents } from "@/utils/event-filters" import EventCard from "./event-card" import type { Event } from "@/types/event" const categories: { value: Event["category"]; label: string; icon: string }[] = [ { value: "workshop", label: "Workshops", icon: "🔧" }, { value: "talk", label: "Tech Talks", icon: "💬" }, { value: "orientation", label: "Orientations", icon: "🎯" }, { value: "bootcamp", label: "Bootcamps", icon: "⚡" }, ] export default function EventCategories() { const [selectedCategory, setSelectedCategory] = useState("all") const filteredEvents = selectedCategory === "all" ? eventsData : filterEvents(eventsData, { category: selectedCategory }) return (

Event Categories

{/* Category Filter */}

{categories.map((category) => { const count = filterEvents(eventsData, { category: category.value }).length return ( ) })}

{/* Events Grid */}

{filteredEvents.slice(0, 6).map((event) => ( ))}

{filteredEvents.length > 6 && (

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" import Header from "@/components/header" import Footer from "@/components/footer" import EventCard from "@/components/event-card" import EnhancedCarousel from "@/components/enhanced-carousel" import EventStats from "@/components/event-stats" import EventCategories from "@/components/event-categories" import { eventsData } from "@/data/events" import { getUpcomingEvents, getPastEvents } from "@/utils/event-filters" export default function HomePage() { const upcomingEvents = getUpcomingEvents(eventsData) const pastEvents = getPastEvents(eventsData) const featuredEvent = upcomingEvents[0] // Current Basics Workshop return (

{/* Upcoming Events Section */}

UPCOMING EVENTS

{/* Event Description */}

SCOPE at Reva University is hosting a IEEE Lab Orientation for 2nd-semester ECE students. This session covers key concepts, lab equipment, safety, and hands-on experiments, guided by expert mentors to build a strong foundation in electronics.

Key Ambitions

lab instruments: intro to essential equipment
basic circuits: hands-on experience
safety practices: key guidelines
practical skills: experiment confidently

{/* Featured Event Card */}

{featuredEvent && }

{/* Event Statistics */} {/* Past Events Carousel */} {/* Event Categories Section */}

) }