[V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter, Poppins } from "next/font/google" import "./globals.css" import Navbar from "@/components/navbar" import Footer from "@/components/footer" import { ThemeProvider } from "@/components/theme-provider" import JoinButton from "@/components/join-button" import NewsletterPopup from "@/components/newsletter-popup" const inter = Inter({ subsets: ["latin"], variable: "--font-inter", }) const poppins = Poppins({ subsets: ["latin"], weight: ["400", "500", "600", "700"], variable: "--font-poppins", }) export const metadata: Metadata = { title: "IEEE SB ASIET - Student Branch at Adi Shankara Institute of Engineering and Technology", description: "Official website of IEEE Student Branch at Adi Shankara Institute of Engineering and Technology", keywords: "IEEE, ASIET, student branch, engineering, technology, Adi Shankara", icons: { icon: "/favicon.ico", }, } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/page.tsx" import Hero from "@/components/hero" import FeaturedEvents from "@/components/featured-events" import Announcements from "@/components/announcements" import Achievements from "@/components/achievements" import IeeeFamilySection from "@/components/ieee-family-section" import StudentAchievements from "@/components/student-achievements" import ProjectsSection from "@/components/projects-section" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/about/page.tsx" import type { Metadata } from "next" import PageHeader from "@/components/page-header" import MissionVision from "@/components/mission-vision" import TeamSection from "@/components/team-section" import IeeeBackground from "@/components/ieee-background" export const metadata: Metadata = { title: "About - IEEE SB ASIET", description: "Learn about IEEE Student Branch at Adi Shankara Institute of Engineering and Technology", } export default function AboutPage() { return (

) } [V0_FILE]typescriptreact:file="app/events/page.tsx" import type { Metadata } from "next" import PageHeader from "@/components/page-header" import EventsFilter from "@/components/events-filter" import EventsList from "@/components/events-list" export const metadata: Metadata = { title: "Events - IEEE SB ASIET", description: "Explore upcoming and past events organized by IEEE Student Branch at ASIET", } export default function EventsPage() { return (

) } [V0_FILE]typescriptreact:file="app/resources/page.tsx" import type { Metadata } from "next" import PageHeader from "@/components/page-header" import ResourceCategories from "@/components/resource-categories" import ResourcesList from "@/components/resources-list" export const metadata: Metadata = { title: "Resources - IEEE SB ASIET", description: "Access publications, newsletters, and resources from IEEE Student Branch at ASIET", } export default function ResourcesPage() { return (

) } [V0_FILE]typescriptreact:file="app/workshops/page.tsx" import type { Metadata } from "next" import PageHeader from "@/components/page-header" import WorkshopsTimeline from "@/components/workshops-timeline" import SpeakersGrid from "@/components/speakers-grid" export const metadata: Metadata = { title: "Workshops & Seminars - IEEE SB ASIET", description: "Explore technical workshops and seminars organized by IEEE Student Branch at ASIET", } export default function WorkshopsPage() { return (

) } [V0_FILE]typescriptreact:file="app/gallery/page.tsx" import type { Metadata } from "next" import PageHeader from "@/components/page-header" import GalleryGrid from "@/components/gallery-grid" export const metadata: Metadata = { title: "Gallery - IEEE SB ASIET", description: "View photos and videos from IEEE Student Branch at ASIET events and activities", } export default function GalleryPage() { return (

) } [V0_FILE]typescriptreact:file="app/join/page.tsx" import type { Metadata } from "next" import PageHeader from "@/components/page-header" import MembershipBenefits from "@/components/membership-benefits" import JoinForm from "@/components/join-form" export const metadata: Metadata = { title: "Join Us - IEEE SB ASIET", description: "Learn about membership benefits and join IEEE Student Branch at ASIET", } export default function JoinPage() { return (

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" import type { Metadata } from "next" import PageHeader from "@/components/page-header" import ContactForm from "@/components/contact-form" import ContactInfo from "@/components/contact-info" import ContactMap from "@/components/contact-map" export const metadata: Metadata = { title: "Contact - IEEE SB ASIET", description: "Get in touch with IEEE Student Branch at ASIET", } export default function ContactPage() { return (

) } [V0_FILE]typescriptreact:file="app/globals.css" @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: 214 100% 30%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --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: 214 100% 30%; --radius: 0.5rem; /* IEEE Colors */ --ieee-blue: 214 100% 30%; --ieee-light-blue: 214 100% 50%; --ieee-teal: 180 100% 30%; --ieee-orange: 30 100% 50%; --ieee-purple: 270 100% 40%; } .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: 214 100% 50%; --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: 214 100% 50%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; } h1, h2, h3, h4, h5, h6 { @apply font-poppins font-bold; } } @layer components { .animate-fade-up { animation: fadeUp 0.8s ease forwards; opacity: 0; transform: translateY(20px); } .animate-fade-in { animation: fadeIn 0.8s ease forwards; opacity: 0; } .animate-scale { transition: transform 0.3s ease; } .animate-scale:hover { transform: scale(1.03); } .animate-glow:hover { box-shadow: 0 0 15px theme("colors.primary.DEFAULT"); } .animate-underline { position: relative; } .animate-underline::after { content: ""; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0; background-color: currentColor; transition: width 0.3s ease; } .animate-underline:hover::after { width: 100%; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .font-poppins { font-family: var(--font-poppins); } .font-inter { font-family: var(--font-inter); } [V0_FILE]typescriptreact:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, ieee: { blue: "hsl(var(--ieee-blue))", "light-blue": "hsl(var(--ieee-light-blue))", teal: "hsl(var(--ieee-teal))", orange: "hsl(var(--ieee-orange))", purple: "hsl(var(--ieee-purple))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, fontFamily: { sans: ["var(--font-inter)"], poppins: ["var(--font-poppins)"], }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/navbar.tsx" "use client" import { useState, useEffect } from "react" import Link from "next/link" import Image from "next/image" import { usePathname } from "next/navigation" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Menu, X, Search } from "lucide-react" import { ThemeToggle } from "@/components/theme-toggle" const navItems = [ { name: "Home", href: "/" }, { name: "About", href: "/about" }, { name: "Events", href: "/events" }, { name: "Resources", href: "/resources" }, { name: "Workshops", href: "/workshops" }, { name: "Gallery", href: "/gallery" }, { name: "Join Us", href: "/join" }, { name: "Contact", href: "/contact" }, ] export default function Navbar() { const [isOpen, setIsOpen] = useState(false) const [scrolled, setScrolled] = useState(false) const pathname = usePathname() useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 20) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) return (

IEEE SB ASIET Adi Shankara Institute of Engineering & Technology

{/* Mobile menu */} {isOpen && (

)}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { Facebook, Instagram, Linkedin, Twitter, Youtube, Mail } from "lucide-react" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/hero.tsx" "use client" import { useEffect, useRef } from "react" import Image from "next/image" import Link from "next/link" import { Button } from "@/components/ui/button" import { gsap } from "gsap" export default function Hero() { const heroRef = useRef(null) useEffect(() => { if (!heroRef.current) return const tl = gsap.timeline() tl.from(".hero-title", { y: 50, opacity: 0, duration: 0.8, ease: "power3.out", }) .from( ".hero-description", { y: 30, opacity: 0, duration: 0.8, ease: "power3.out", }, "-=0.4", ) .from( ".hero-buttons", { y: 30, opacity: 0, duration: 0.8, ease: "power3.out", }, "-=0.4", ) .from( ".hero-image", { scale: 0.9, opacity: 0, duration: 1, ease: "power3.out", }, "-=0.6", ) }, []) return (

IEEE Student Branch

Empowering Innovation Through Technology

IEEE Student Branch at ASIET fosters technical innovation, professional growth, and leadership development through workshops, projects, and networking opportunities.

IEEE SB ASIET

A vibrant community of future engineers and technologists

) } [V0_FILE]typescriptreact:file="components/featured-events.tsx" "use client" import { useEffect, useRef } from "react" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Calendar, MapPin, Clock } from "lucide-react" import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" gsap.registerPlugin(ScrollTrigger) const featuredEvents = [ { id: 1, title: "DigiTech 2023: AI & ML Workshop", date: "2023-09-15", time: "10:00 AM - 4:00 PM", location: "Main Auditorium, ASIET", image: "/placeholder.svg?height=400&width=600", slug: "/events/digitech-2023", }, { id: 2, title: "Management Skills for Engineers", date: "2023-10-05", time: "2:00 PM - 5:00 PM", location: "Seminar Hall, ASIET", image: "/placeholder.svg?height=400&width=600", slug: "/events/management-skills", }, { id: 3, title: "IEEE Day Celebration 2023", date: "2023-10-10", time: "9:00 AM - 6:00 PM", location: "College Campus", image: "/placeholder.svg?height=400&width=600", slug: "/events/ieee-day-2023", }, ] export default function FeaturedEvents() { const sectionRef = useRef(null) useEffect(() => { if (!sectionRef.current) return const cards = gsap.utils.toArray(".event-card") cards.forEach((card, i) => { gsap.from(card, { y: 50, opacity: 0, duration: 0.8, ease: "power3.out", scrollTrigger: { trigger: card, start: "top bottom-=100", toggleActions: "play none none none", }, delay: i * 0.2, }) }) return () => { ScrollTrigger.getAll().forEach((t) => t.kill()) } }, []) return (

Upcoming Events

Join us for these exciting events designed to enhance your technical skills and expand your professional network.

{featuredEvents.map((event) => (

{event.title}

{new Date(event.date).toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric", })}

{event.time}

{event.location}

))}

) } [V0_FILE]typescriptreact:file="components/announcements.tsx" "use client" import { useEffect, useRef } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" gsap.registerPlugin(ScrollTrigger) const announcements = [ { id: 1, title: "IEEE SB ASIET is scheduled to be the host for Event Finals", date: "2023-09-01", content: "IEEE SB ASIET has been selected to host the finals of the prestigious IEEE Kerala Section Student Congress 2023.", link: "#", }, { id: 2, title: "Registration for IEEE Xtreme 16.0 is open now", date: "2023-08-25", content: "IEEE Xtreme is a global challenge in which teams of IEEE Student members compete in a 24-hour online programming competition.", link: "#", }, { id: 3, title: "Call for volunteers for upcoming IEEE Day celebrations", date: "2023-08-20", content: "We are looking for enthusiastic volunteers to help organize and manage the upcoming IEEE Day celebrations at our campus.", link: "#", }, ] export default function Announcements() { const sectionRef = useRef(null) useEffect(() => { if (!sectionRef.current) return gsap.from(".announcements-title", { y: 30, opacity: 0, duration: 0.8, scrollTrigger: { trigger: sectionRef.current, start: "top bottom-=100", }, }) const items = gsap.utils.toArray(".announcement-item") items.forEach((item, i) => { gsap.from(item, { y: 30, opacity: 0, duration: 0.6, delay: 0.2 + i * 0.15, scrollTrigger: { trigger: sectionRef.current, start: "top bottom-=100", }, }) }) return () => { ScrollTrigger.getAll().forEach((t) => t.kill()) } }, []) return (

Announcements

{announcements.map((announcement) => (

{announcement.title}

{new Date(announcement.date).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", })}

{announcement.content}

))}

) } [V0_FILE]typescriptreact:file="components/ieee-family-section.tsx" "use client" import { useEffect, useRef } from "react" import Image from "next/image" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" gsap.registerPlugin(ScrollTrigger) const ieeeChapters = [ { id: 1, name: "IEEE Computer Society", logo: "/placeholder.svg?height=100&width=100", }, { id: 2, name: "IEEE Power & Energy Society", logo: "/placeholder.svg?height=100&width=100", }, { id: 3, name: "IEEE Women in Engineering", logo: "/placeholder.svg?height=100&width=100", }, { id: 4, name: "IEEE Robotics & Automation Society", logo: "/placeholder.svg?height=100&width=100", }, { id: 5, name: "IEEE Communications Society", logo: "/placeholder.svg?height=100&width=100", }, { id: 6, name: "IEEE Signal Processing Society", logo: "/placeholder.svg?height=100&width=100", }, ] export default function IeeeFamilySection() { const sectionRef = useRef(null) useEffect(() => { if (!sectionRef.current) return gsap.from(".family-title", { y: 30, opacity: 0, duration: 0.8, scrollTrigger: { trigger: sectionRef.current, start: "top bottom-=100", }, }) const items = gsap.utils.toArray(".chapter-item") items.forEach((item, i) => { gsap.from(item, { scale: 0.9, opacity: 0, duration: 0.6, delay: 0.2 + i * 0.1, scrollTrigger: { trigger: sectionRef.current, start: "top bottom-=100", }, }) }) return () => { ScrollTrigger.getAll().forEach((t) => t.kill()) } }, []) return (

Our IEEE Family

{ieeeChapters.map((chapter) => (

{chapter.name}

))}

) } [V0_FILE]typescriptreact:file="components/achievements.tsx" "use client" import { useEffect, useRef } from "react" import Image from "next/image" import { Card, CardContent } from "@/components/ui/card" import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" gsap.registerPlugin(ScrollTrigger) const achievements = [ { id: 1, title: "IEEE Regional Exemplary Student Branch Award 2021", image: "/placeholder.svg?height=300&width=400", description: "Awarded for outstanding activities and contributions to the IEEE community.", }, { id: 2, title: "IEEE Kerala Section Student Branch Award 2022", image: "/placeholder.svg?height=300&width=400", description: "Recognized for exceptional performance among student branches in Kerala Section.", }, { id: 3, title: "Outstanding Funding Achievement", image: "/placeholder.svg?height=300&width=400", description: "Secured $3216 in project funding through various IEEE initiatives.", }, { id: 4, title: "IEEE Young Professionals Funding", image: "/placeholder.svg?height=300&width=400", description: "Received $500 funding for professional development activities.", }, ] export default function Achievements() { const sectionRef = useRef(null) useEffect(() => { if (!sectionRef.current) return gsap.from(".achievements-title", { y: 50, opacity: 0, duration: 0.8, scrollTrigger: { trigger: ".achievements-title", start: "top bottom-=100", }, }) const cards = gsap.utils.toArray(".achievement-card") cards.forEach((card, i) => { gsap.from(card, { y: 50, opacity: 0, duration: 0.8, scrollTrigger: { trigger: card, start: "top bottom-=50", }, delay: i * 0.2, }) }) return () => { ScrollTrigger.getAll().forEach((t) => t.kill()) } }, []) return (

SB Achievements

Recognizing our commitment to excellence and innovation in IEEE activities

{achievements.map((achievement) => (

{achievement.title}

{achievement.description}

))}

) } [V0_FILE]typescriptreact:file="components/student-achievements.tsx" "use client" import { useEffect, useRef, useState } from "react" import Image from "next/image" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ChevronLeft, ChevronRight } from "lucide-react" import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" gsap.registerPlugin(ScrollTrigger) const studentAchievements = [ { id: 1, name: "Aisha Patel", achievement: "First Prize in IEEE Kerala Section Hackathon", image: "/placeholder.svg?height=400&width=400", }, { id: 2, name: "Rahul Sharma", achievement: "Best Paper Award at IEEE International Conference on Computing", image: "/placeholder.svg?height=400&width=400", }, { id: 3, name: "Priya Nair", achievement: "Selected for IEEE Women in Engineering Leadership Summit", image: "/placeholder.svg?height=400&width=400", }, { id: 4, name: "Arjun Menon", achievement: "Winner of IEEE Region 10 Student Paper Contest", image: "/placeholder.svg?height=400&width=400", }, { id: 5, name: "Sneha Varghese", achievement: "Recipient of IEEE Power & Energy Society Scholarship", image: "/placeholder.svg?height=400&width=400", }, { id: 6, name: "Vikram Pillai", achievement: "Selected for IEEE Young Professionals Program", image: "/placeholder.svg?height=400&width=400", }, ] export default function StudentAchievements() { const sectionRef = useRef(null) const [currentSlide, setCurrentSlide] = useState(0) const slidesPerView = 3 const totalSlides = Math.ceil(studentAchievements.length / slidesPerView) const nextSlide = () => { setCurrentSlide((prev) => (prev + 1) % totalSlides) } const prevSlide = () => { setCurrentSlide((prev) => (prev - 1 + totalSlides) % totalSlides) } useEffect(() => { if (!sectionRef.current) return gsap.from(".student-achievements-title", { y: 50, opacity: 0, duration: 0.8, scrollTrigger: { trigger: ".student-achievements-title", start: "top bottom-=100", }, }) return () => { ScrollTrigger.getAll().forEach((t) => t.kill()) } }, []) return (

Student's Achievements

Celebrating the outstanding accomplishments of our student members

{studentAchievements.map((achievement) => (

{achievement.name}

{achievement.achievement}

))}

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

) } [V0_FILE]typescriptreact:file="components/projects-section.tsx" "use client" import { useEffect, useRef } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" gsap.registerPlugin(ScrollTrigger) export default function ProjectsSection() { const sectionRef = useRef(null) useEffect(() => { if (!sectionRef.current) return gsap.from(".projects-title", { y: 50, opacity: 0, duration: 0.8, scrollTrigger: { trigger: ".projects-title", start: "top bottom-=100", }, }) gsap.from(".projects-description", { y: 30, opacity: 0, duration: 0.8, delay: 0.2, scrollTrigger: { trigger: ".projects-title", start: "top bottom-=100", }, }) gsap.from(".project-card", { y: 50, opacity: 0, duration: 0.8, delay: 0.4, scrollTrigger: { trigger: ".project-card", start: "top bottom-=50", }, }) return () => { ScrollTrigger.getAll().forEach((t) => t.kill()) } }, []) return (

Featured Projects

Innovative projects developed by our IEEE student members

Library Advancement and Revitalization for Collaborative Learning (LARCL)

The Library Advancement and Revitalization for Collaborative Learning (LARCL) project led by IEEE SB ASIET aims to transform the traditional library into a modern educational and community hub, launched under the IEEE Special Interest Group on Humanitarian Technology (SIGHT).

This initiative focuses on establishing effective leadership and financial management while creating a welcoming space for local youth through innovative digital tools and personalized learning experiences.

Project Highlights

Digital Transformation: Implemented modern digital tools and resources
Community Impact: Created a welcoming space for local youth
Collaborative Learning: Fostered collaborative learning environment

) } [V0_FILE]typescriptreact:file="components/join-button.tsx" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Users } from "lucide-react" export default function JoinButton() { const [isVisible, setIsVisible] = useState(false) useEffect(() => { const handleScroll = () => { setIsVisible(window.scrollY > 300) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) if (!isVisible) return null return (

) } [V0_FILE]typescriptreact:file="components/newsletter-popup.tsx" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { X, Mail } from "lucide-react" export default function NewsletterPopup() { const [isVisible, setIsVisible] = useState(false) const [email, setEmail] = useState("") useEffect(() => { const timer = setTimeout(() => { const hasSeenPopup = localStorage.getItem("newsletter-popup-seen") if (!hasSeenPopup) { setIsVisible(true) } }, 10000) // Show after 10 seconds return () => clearTimeout(timer) }, []) const handleClose = () => { setIsVisible(false) localStorage.setItem("newsletter-popup-seen", "true") } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle newsletter subscription console.log("Newsletter subscription:", email) handleClose() } if (!isVisible) return null return (

Stay Updated!

Subscribe to our newsletter for the latest IEEE SB ASIET updates, events, and opportunities.

We respect your privacy. Unsubscribe at any time.

) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" export function ThemeToggle() { const { setTheme, theme } = useTheme() return ( ) } [V0_FILE]typescriptreact:file="components/page-header.tsx" interface PageHeaderProps { title: string description?: string } export default function PageHeader({ title, description }: PageHeaderProps) { return (

{title}

{description &&

{description}

}

) } [V0_FILE]typescriptreact:file="components/mission-vision.tsx" "use client" import { useEffect, useRef } from "react" import { Card, CardContent } from "@/components/ui/card" import { Target, Eye, Heart } from "lucide-react" import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" gsap.registerPlugin(ScrollTrigger) export default function MissionVision() { const sectionRef = useRef(null) useEffect(() => { if (!sectionRef.current) return const cards = gsap.utils.toArray(".mission-card") cards.forEach((card, i) => { gsap.from(card, { y: 50, opacity: 0, duration: 0.8, scrollTrigger: { trigger: card, start: "top bottom-=100", }, delay: i * 0.2, }) }) return () => { ScrollTrigger.getAll().forEach((t) => t.kill()) } }, []) return (

Mission

To foster technological innovation and excellence among students through IEEE activities, promoting professional development and advancing technology for humanity.

Vision

To be a leading IEEE Student Branch that inspires and empowers the next generation of engineers and technologists to create innovative solutions for global challenges.

Values

Excellence, Innovation, Integrity, and Collaboration. We believe in fostering an inclusive environment that encourages learning, growth, and meaningful contributions to society.

) } [V0_FILE]typescriptreact:file="components/team-section.tsx" "use client" import { useEffect, useRef } from "react" import Image from "next/image" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Linkedin, Mail } from "lucide-react" import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" gsap.registerPlugin(ScrollTrigger) const teamMembers = [ { id: 1, name: "Dr. Rajesh Kumar", position: "Faculty Advisor", image: "/placeholder.svg?height=300&width=300", email: "rajesh.kumar@adishankara.ac.in", linkedin: "#", }, { id: 2, name: "Arjun Nair", position: "Chairperson", image: "/placeholder.svg?height=300&width=300", email: "arjun.nair@ieee.org", linkedin: "#", }, { id: 3, name: "Priya Menon", position: "Vice Chairperson", image: "/placeholder.svg?height=300&width=300", email: "priya.menon@ieee.org", linkedin: "#", }, { id: 4, name: "Rahul Sharma", position: "Secretary", image: "/placeholder.svg?height=300&width=300", email: "rahul.sharma@ieee.org", linkedin: "#", }, { id: 5, name: "Sneha Varghese", position: "Treasurer", image: "/placeholder.svg?height=300&width=300", email: "sneha.varghese@ieee.org", linkedin: "#", }, { id: 6, name: "Vikram Pillai", position: "Membership Development Officer", image: "/placeholder.svg?height=300&width=300", email: "vikram.pillai@ieee.org", linkedin: "#", }, ] export default function TeamSection() { const sectionRef = useRef(null) useEffect(() => { if (!sectionRef.current) return gsap.from(".team-title", { y: 50, opacity: 0, duration: 0.8, scrollTrigger: { trigger: ".team-title", start: "top bottom-=100", }, }) const cards = gsap.utils.toArray(".team-card") cards.forEach((card, i) => { gsap.from(card, { y: 50, opacity: 0, duration: 0.8, scrollTrigger: { trigger: card, start: "top bottom-=50", }, delay: i * 0.1, }) }) return () => { ScrollTrigger.getAll().forEach((t) => t.kill()) } }, []) return (

Our Team

Meet the dedicated team members who drive IEEE SB ASIET forward

{teamMembers.map((member) => (

{member.name}

{member.position}

))}

) } [V0_FILE]typescriptreact:file="components/ieee-background.tsx" "use client" import { useEffect, useRef } from "react" import { Card, CardContent } from "@/components/ui/card" import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" gsap.registerPlugin(ScrollTrigger) export default function IeeeBackground() { const sectionRef = useRef(null) useEffect(() => { if (!sectionRef.current) return gsap.from(".ieee-bg-card", { y: 50, opacity: 0, duration: 0.8, scrollTrigger: { trigger: ".ieee-bg-card", start: "top bottom-=100", }, }) return () => { ScrollTrigger.getAll().forEach((t) => t.kill()) } }, []) return (

About IEEE

IEEE (Institute of Electrical and Electronics Engineers) is the world's largest technical professional organization dedicated to advancing technology for the benefit of humanity.

With over 400,000 members in more than 160 countries, IEEE is a leading authority on a wide variety of areas ranging from aerospace systems, computers, and telecommunications to biomedical engineering, electric power, and consumer electronics.

IEEE Student Branches provide opportunities for students to meet and learn from peers with similar interests, to develop leadership and professional skills, and to make important contacts for their future careers.

IEEE by Numbers

400K+

Members Worldwide

160+

Countries

Technical Societies

3000+

Student Branches

) } [V0_FILE]typescriptreact:file="components/events-filter.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Search } from "lucide-react" export default function EventsFilter() { const [searchTerm, setSearchTerm] = useState("") const [selectedYear, setSelectedYear] = useState("") const [selectedType, setSelectedType] = useState("") return (

Filter Events

setSearchTerm(e.target.value)} className="pl-10" />

) } [V0_FILE]typescriptreact:file="components/events-list.tsx" "use client" import { useEffect, useRef } from "react" import Image from "next/image" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Calendar, MapPin, Clock, Users } from "lucide-react" import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" gsap.registerPlugin(ScrollTrigger) const events = [ { id: 1, title: "DigiTech 2023: AI & ML Workshop", description: "Comprehensive workshop on Artificial Intelligence and Machine Learning fundamentals and applications.", date: "2023-09-15", time: "10:00 AM - 4:00 PM", location: "Main Auditorium, ASIET", type: "workshop", attendees: 150, image: "/placeholder.svg?height=300&width=400", status: "upcoming", }, { id: 2, title: "Management Skills for Engineers", description: "Professional development seminar focusing on leadership and management skills for engineering students.", date: "2023-10-05", time: "2:00 PM - 5:00 PM", location: "Seminar Hall, ASIET", type: "seminar", attendees: 80, image: "/placeholder.svg?height=300&width=400", status: "upcoming", }, { id: 3, title: "IEEE Day Celebration 2023", description: "Annual IEEE Day celebration with technical exhibitions, competitions, and networking sessions.", date: "2023-10-10", time: "9:00 AM - 6:00 PM", location: "College Campus", type: "celebration", attendees: 300, image: "/placeholder.svg?height=300&width=400", status: "upcoming", }, { id: 4, title: "Robotics and Automation Workshop", description: "Hands-on workshop on robotics fundamentals and automation technologies.", date: "2023-08-20", time: "10:00 AM - 4:00 PM", location: "Robotics Lab, ASIET", type: "workshop", attendees: 60, image: "/placeholder.svg?height=300&width=400", status: "completed", }, { id: 5, title: "Cybersecurity Awareness Seminar", description: "Educational seminar on cybersecurity best practices and emerging threats.", date: "2023-07-15", time: "2:00 PM - 4:00 PM", location: "Computer Lab, ASIET", type: "seminar", attendees: 100, image: "/placeholder.svg?height=300&width=400", status: "completed", }, { id: 6, title: "IEEE Student Paper Contest", description: "Annual student paper presentation contest showcasing innovative research projects.", date: "2023-06-10", time: "9:00 AM - 5:00 PM", location: "Conference Hall, ASIET", type: "competition", attendees: 120, image: "/placeholder.svg?height=300&width=400", status: "completed", }, ] export default function EventsList() { const sectionRef = useRef(null) useEffect(() => { if (!sectionRef.current) return const cards = gsap.utils.toArray(".event-item") cards.forEach((card, i) => { gsap.from(card, { y: 50, opacity: 0, duration: 0.8, scrollTrigger: { trigger: card, start: "top bottom-=50", }, delay: i * 0.1, }) }) return () => { ScrollTrigger.getAll().forEach((t) => t.kill()) } }, []) const getStatusColor = (status: string) => { switch (status) { case "upcoming": return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300" case "completed": return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300" default: return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300" } } const getTypeColor = (type: string) => { switch (type) { case "workshop": return "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300" case "seminar": return "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300" case "competition": return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300" case "celebration": return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300" default: return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300" } } return (

{events.map((event) => (

{event.status} {event.type}

{event.title}

{event.description}

{new Date(event.date).toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric", })}

{event.time}

{event.location}

{event.attendees} attendees

))}

) } [V0_FILE]typescriptreact:file="components/resource-categories.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { FileText, BookOpen, Presentation, Download } from "lucide-react" const categories = [ { id: "all", name: "All Resources", icon: FileText }, { id: "publications", name: "Publications", icon: BookOpen }, { id: "newsletters", name: "Newsletters", icon: FileText }, { id: "presentations", name: "Presentations", icon: Presentation }, { id: "documents", name: "Documents", icon: Download }, ] export default function ResourceCategories() { const [activeCategory, setActiveCategory] = useState("all") return (

{resource.title}

{resource.type}

{resource.description}

{new Date(resource.date).toLocaleDateString()}

Size: {resource.size} {resource.downloads} downloads

))}

) } [V0_FILE]typescriptreact:file="components/workshops-timeline.tsx" "use client" import { useEffect, useRef } from "react" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Calendar, Clock, MapPin, Users } from "lucide-react" import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" gsap.registerPlugin(ScrollTrigger) const workshops = [ { id: 1, title: "Advanced Machine Learning Techniques", date: "2023-10-15", time: "10:00 AM - 4:00 PM", location: "AI Lab, ASIET", attendees: 50, status: "upcoming", description: "Deep dive into advanced ML algorithms including neural networks, deep learning, and reinforcement learning.", }, { id: 2, title: "IoT and Smart Systems Workshop", date: "2023-09-20", time: "2:00 PM - 6:00 PM", location: "Electronics Lab, ASIET", attendees: 40, status: "completed", description: "Hands-on workshop on Internet of Things, sensor integration, and smart system development.", }, { id: 3, title: "Cybersecurity Fundamentals", date: "2023-08-25", time: "9:00 AM - 5:00 PM", location: "Computer Lab, ASIET", attendees: 60, status: "completed", description: "Comprehensive workshop covering cybersecurity principles, ethical hacking, and security best practices.", }, { id: 4, title: "Blockchain Technology and Applications", date: "2023-07-30", time: "10:00 AM - 3:00 PM", location: "Seminar Hall, ASIET", attendees: 35, status: "completed", description: "Introduction to blockchain technology, cryptocurrency, and decentralized applications development.", }, ] export default function WorkshopsTimeline() { const sectionRef = useRef(null) useEffect(() => { if (!sectionRef.current) return const items = gsap.utils.toArray(".timeline-item") items.forEach((item, i) => { gsap.from(item, { x: i % 2 === 0 ? -50 : 50, opacity: 0, duration: 0.8, scrollTrigger: { trigger: item, start: "top bottom-=100", }, delay: i * 0.2, }) }) return () => { ScrollTrigger.getAll().forEach((t) => t.kill()) } }, []) const getStatusColor = (status: string) => { switch (status) { case "upcoming": return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300" case "completed": return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300" default: return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300" } } return (

Workshops Timeline

Explore our technical workshops and seminars designed to enhance your skills

{/* Timeline line */}

{workshops.map((workshop, index) => (

{workshop.status} {new Date(workshop.date).toLocaleDateString()}

{workshop.title}

{workshop.description}

{new Date(workshop.date).toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric", })}

{workshop.time}

{workshop.location}

{workshop.attendees} attendees

{/* Timeline dot */}

))}

) } [V0_FILE]typescriptreact:file="components/speakers-grid.tsx" "use client" import { useEffect, useRef } from "react" import Image from "next/image" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" gsap.registerPlugin(ScrollTrigger) const speakers = [ { id: 1, name: "Dr. Priya Sharma", title: "AI Research Scientist", company: "Google Research", expertise: ["Machine Learning", "Neural Networks"], image: "/placeholder.svg?height=300&width=300", bio: "Leading researcher in artificial intelligence with 10+ years of experience in machine learning and neural network architectures.", }, { id: 2, name: "Prof. Rajesh Kumar", title: "Professor of Computer Science", company: "IIT Bombay", expertise: ["Cybersecurity", "Blockchain"], image: "/placeholder.svg?height=300&width=300", bio: "Renowned expert in cybersecurity and blockchain technology with numerous publications in top-tier conferences.", }, { id: 3, name: "Ms. Anita Nair", title: "Senior IoT Engineer", company: "Microsoft", expertise: ["IoT", "Cloud Computing"], image: "/placeholder.svg?height=300&width=300", bio: "IoT specialist with extensive experience in developing smart systems and cloud-based solutions for enterprise clients.", }, { id: 4, name: "Dr. Vikram Menon", title: "Blockchain Architect", company: "Ethereum Foundation", expertise: ["Blockchain", "DeFi"], image: "/placeholder.svg?height=300&width=300", bio: "Blockchain architect and cryptocurrency expert, contributing to major blockchain protocols and decentralized finance platforms.", }, ] export default function SpeakersGrid() { const sectionRef = useRef(null) useEffect(() => { if (!sectionRef.current) return gsap.from(".speakers-title", { y: 50, opacity: 0, duration: 0.8, scrollTrigger: { trigger: ".speakers-title", start: "top bottom-=100", }, }) const cards = gsap.utils.toArray(".speaker-card") cards.forEach((card, i) => { gsap.from(card, { y: 50, opacity: 0, duration: 0.8, scrollTrigger: { trigger: card, start: "top bottom-=50", }, delay: i * 0.2, }) }) return () => { ScrollTrigger.getAll().forEach((t) => t.kill()) } }, []) return (

Featured Speakers

Learn from industry experts and renowned academics who have shared their knowledge at our workshops

{speakers.map((speaker) => (

{speaker.name}

{speaker.title}

{speaker.company}

{speaker.expertise.map((skill) => ( {skill} ))}

{speaker.bio}

))}

) } [V0_FILE]typescriptreact:file="components/gallery-grid.tsx" "use client" import { useState, useEffect, useRef } from "react" import Image from "next/image" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { X, ChevronLeft, ChevronRight, Play } from "lucide-react" import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" gsap.registerPlugin(ScrollTrigger) const galleryItems = [ { id: 1, type: "image", src: "/placeholder.svg?height=400&width=600", title: "IEEE Day Celebration 2023", category: "events", date: "2023-10-10", }, { id: 2, type: "image", src: "/placeholder.svg?height=400&width=600", title: "AI Workshop Group Photo", category: "workshops", date: "2023-09-15", }, { id: 3, type: "video", src: "/placeholder.svg?height=400&width=600", title: "Robotics Competition Highlights", category: "competitions", date: "2023-08-20", }, { id: 4, type: "image", src: "/placeholder.svg?height=400&width=600", title: "Award Ceremony", category: "achievements", date: "2023-07-30", }, { id: 5, type: "image", src: "/placeholder.svg?height=400&width=600", title: "Technical Seminar", category: "seminars", date: "2023-06-25", }, { id: 6, type: "video", src: "/placeholder.svg?height=400&width=600", title: "Student Project Showcase", category: "projects", date: "2023-05-15", }, { id: 7, type: "image", src: "/placeholder.svg?height=400&width=600", title: "Industry Visit", category: "visits", date: "2023-04-10", }, { id: 8, type: "image", src: "/placeholder.svg?height=400&width=600", title: "Team Building Activity", category: "activities", date: "2023-03-20", }, ] const categories = [ "all", "events", "workshops", "competitions", "achievements", "seminars", "projects", "visits", "activities", ] export default function GalleryGrid() { const [selectedCategory, setSelectedCategory] = useState("all") const [lightboxOpen, setLightboxOpen] = useState(false) const [currentItem, setCurrentItem] = useState(0) const sectionRef = useRef(null) const filteredItems = selectedCategory === "all" ? galleryItems : galleryItems.filter((item) => item.category === selectedCategory) useEffect(() => { if (!sectionRef.current) return gsap.from(".gallery-title", { y: 50, opacity: 0, duration: 0.8, scrollTrigger: { trigger: ".gallery-title", start: "top bottom-=100", }, }) const items = gsap.utils.toArray(".gallery-item") items.forEach((item, i) => { gsap.from(item, { scale: 0.9, opacity: 0, duration: 0.6, scrollTrigger: { trigger: item, start: "top bottom-=50", }, delay: i * 0.1, }) }) return () => { ScrollTrigger.getAll().forEach((t) => t.kill()) } }, [selectedCategory]) const openLightbox = (index: number) => { setCurrentItem(index) setLightboxOpen(true) } const closeLightbox = () => { setLightboxOpen(false) } const nextItem = () => { setCurrentItem((prev) => (prev + 1) % filteredItems.length) } const prevItem = () => { setCurrentItem((prev) => (prev - 1 + filteredItems.length) % filteredItems.length) } const getCategoryColor = (category: string) => { const colors = { events: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300", workshops: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300", competitions: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300", achievements: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300", seminars: "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300", projects: "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300", visits: "bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-300", activities: "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300", } return colors[category as keyof typeof colors] || "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300" } return (

Gallery

Explore photos and videos from our events, workshops, and activities

{/* Category filters */}

{categories.map((category) => ( ))}

{/* Gallery grid */}

{filteredItems.map((item, index) => ( openLightbox(index)} >

{item.type === "video" && (

)}

{item.category}

{item.title}

{new Date(item.date).toLocaleDateString()}

))}

{/* Lightbox */} {lightboxOpen && (

{filteredItems[currentItem]?.title}

{new Date(filteredItems[currentItem]?.date || "").toLocaleDateString()}

)}

) } [V0_FILE]typescriptreact:file="components/membership-benefits.tsx" isTerminated="true" "use client" import { useEffect, useRef } from "react" import { BookOpen, Users, Award, Globe, Briefcase, GraduationCap, Network, Zap } from "lucide-react" import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" gsap.registerPlugin(ScrollTrigger) const benefits = [ { id: 1, icon: BookOpen, title: "Access to IEEE Xplore", description: "Free access to the world's largest technical library with over 5 million documents", category: "Resources", }, { id: 2, icon: Users, title: "Professional Networking", description: "Connect with 400,000+ IEEE members worldwide and build valuable professional relationships", category: "Networking", }, { id: 3, icon: Award, title: "Scholarships & Awards", description: "Opportunities for scholarships, grants, and recognition through various IEEE programs", category: "Financial", }, { id: 4, icon: Globe, title: "Global Conferences", description: "Discounted registration for IEEE conferences and access to cutting-edge research", category: "Events", }, { id: 5, icon: Briefcase, title: "Career Development", description: "Resume review, job placement assistance, and career guidance from industry experts", category: "Career", }, { id: 6, icon: GraduationCap, title: "Continuing Education", description: "Access to online courses, webinars, and professional development programs", category: "Education", }, { id: 7, icon: Network, title: "Technical Communities", description: "Join 39 technical societies and participate in specialized technical groups", category: "Technical", }, { id: 8, icon: Zap, title: "Innovation Opportunities", description: "Participate in hackathons, competitions, and innovation challenges", category: "Innovation", }, ] export default function MembershipBenefits() { const sectionRef = useRef(null) useEffect(() => { if (!sectionRef.current) return gsap.from(".benefits-title", { y: 50, opacity: 0, duration: 0.8, scrollTrigger: { trigger: ".benefits-title", start: "top bottom-=100", } }) const cards = gsap.utils.toArray(".benefit-card") cards.forEach((card, i) => { gsap.from(card, { y: 50, opacity: 0, duration: 0.8, scrollTrigger: { trigger: card, start: "top bottom-=50", }, delay: i * 0.1 }) }) return () => { ScrollTrigger.getAll().forEach(t => t.kill()) } }, []) const getCategoryColor = (category: string) => { const colors = { Resources: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",\ Networking: "bg-green-100 text-green-800 dark:bg-green