diff --git a/components/SpeakerSlideshow.tsx b/components/SpeakerSlideshow.tsx new file mode 100644 index 0000000..5ab441f --- /dev/null +++ b/components/SpeakerSlideshow.tsx @@ -0,0 +1,354 @@ +'use client' +import React, { useState, useEffect, useRef } from 'react' +import { motion, AnimatePresence } from 'framer-motion' +import { ChevronLeft, ChevronRight, MessageSquare, ChevronDown } from 'lucide-react' + +interface SpeakerMessage { + id: number + name: string + designation: string + institution: string + image: string + paragraphs: React.ReactNode[] +} + +const speakers: SpeakerMessage[] = [ + { + id: 1, + name: 'Prof. Dr.-Ing. Martin Versen', + designation: '', + institution: 'Technische Hochschule Rosenheim, Germany', + image: '/speakers/foreign/Martin_Versen.png', + paragraphs: [ + To the IEEE CSITSS Organizers and Participants,, + + From the Faculty of Engineering at Technische Hochschule Rosenheim — and especially from our Fluorescence Measurement Technology lab — we send our warmest regards. + , + + We develop real-time AI systems to classify subtle optical signals — a field deeply aligned with your themes of{' '} + Sustainable Environment and Circular Economy,{' '} + Artificial Intelligence Systems, and{' '} + Data Analytics and Intelligent Decision Systems. We're excited to exchange ideas, learn from your innovations, and build global connections that turn research into impact. + , + + Looking forward to connecting, collaborating, and co-creating the future — together. + + ] + }, + { + id: 2, + name: 'Andreas Doleschel', + designation: 'Dean of the Faculty of Engineering and Management', + institution: 'Technische Hochschule Rosenheim, Germany', + image: '/speakers/foreign/Andreas_Doleschel.png', + paragraphs: [ + The 2026 edition of CSITSS,, + Dear organising team, dear participants, dear researchers,, + + CSITSS is an outstanding event that brings together a wide range of stakeholders. The spirit of{' '} + collaboration, the exchange of{' '} + cutting-edge research results, insights into ongoing activities, and the valuable interactions beyond the formal presentations are essential for driving innovation and progress. + , + + In today's increasingly complex world, collaboration is more important than ever. Bringing together researchers and industry partners, combining{' '} + academic ideas with practical applications and innovative products, is a powerful driver for growth and{' '} + technological advancement. + , + + I am delighted to be part of this community and to share ideas and experiences with you. + + ] + } +] + +export default function SpeakerSlideshow() { + const [currentIndex, setCurrentIndex] = useState(0) + const [direction, setDirection] = useState(1) // 1 = next, -1 = prev + const [isHovered, setIsHovered] = useState(false) + const [isMounted, setIsMounted] = useState(false) + const [hasMoreContent, setHasMoreContent] = useState(false) + const textContainerRef = useRef(null) + const bottomRowRef = useRef(null) + + // Avoid hydration mismatch by waiting for mount + useEffect(() => { + setIsMounted(true) + }, []) + + // Auto-play interval (6 seconds) + useEffect(() => { + if (!isMounted || isHovered) return + + const timer = setInterval(() => { + handleNext() + }, 6000) + + return () => clearInterval(timer) + }, [currentIndex, isHovered, isMounted]) + + const handleNext = () => { + setDirection(1) + setCurrentIndex((prev) => (prev + 1) % speakers.length) + } + + const handlePrev = () => { + setDirection(-1) + setCurrentIndex((prev) => (prev - 1 + speakers.length) % speakers.length) + } + + const handleDotClick = (index: number) => { + setDirection(index > currentIndex ? 1 : -1) + setCurrentIndex(index) + } + + const checkScroll = () => { + const isMobile = typeof window !== 'undefined' && window.innerWidth < 768 + const container = isMobile ? bottomRowRef.current : textContainerRef.current + if (container) { + const hasMore = container.scrollHeight > container.clientHeight + const isAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 10 + setHasMoreContent(hasMore && !isAtBottom) + } + } + + // Check scrolling availability on slide change or mount + useEffect(() => { + if (!isMounted) return + + const timer = setTimeout(checkScroll, 200) + window.addEventListener('resize', checkScroll) + return () => { + clearTimeout(timer) + window.removeEventListener('resize', checkScroll) + } + }, [currentIndex, isMounted]) + + const handleScroll = (e: React.UIEvent) => { + const container = e.currentTarget + const hasMore = container.scrollHeight > container.clientHeight + const isAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 10 + setHasMoreContent(hasMore && !isAtBottom) + } + + // Render static loader or placeholder during SSR to prevent hydration issues + if (!isMounted) { + const defaultSpeaker = speakers[0] + return ( +
+ {/* Background glows */} +
+
+ + {/* Top: Name + affiliation */} +
+
+ + Message from Speaker +
+
+

{defaultSpeaker.name}

+ {defaultSpeaker.designation && ( +

{defaultSpeaker.designation}

+ )} +

{defaultSpeaker.institution}

+
+
+ + {/* Bottom: photo + message side-by-side */} +
+
+ {defaultSpeaker.name} +
+
+
+
+ + + + {defaultSpeaker.paragraphs.map((p, idx) => ( +

+ {p} +

+ ))} +
+
+
+ {/* Scroll Fade Overlay */} +
+
+ ) + } + + const activeSpeaker = speakers[currentIndex] + + // Slide/Fade variants + const variants = { + enter: (dir: number) => ({ + opacity: 0, + x: dir > 0 ? 30 : -30, + y: 0, + }), + center: { + opacity: 1, + x: 0, + y: 0, + transition: { + opacity: { duration: 0.4, ease: 'easeOut' as const }, + x: { duration: 0.4, ease: 'easeOut' as const }, + } + }, + exit: (dir: number) => ({ + opacity: 0, + x: dir > 0 ? -30 : 30, + y: 0, + transition: { + opacity: { duration: 0.3, ease: 'easeIn' as const }, + x: { duration: 0.3, ease: 'easeIn' as const }, + } + }) + } + + return ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + data-lenis-prevent + > + {/* Background glows */} +
+
+ + {/* Main animated area */} +
+ + + {/* Top: Name + affiliation (Full width inside transition) */} +
+ {/* Badge */} +
+ + Message from Speaker +
+
+

{activeSpeaker.name}

+ {activeSpeaker.designation && ( +

{activeSpeaker.designation}

+ )} +

{activeSpeaker.institution}

+
+
+ + {/* Bottom: photo + message side-by-side */} +
+ {/* Left: Speaker photo */} +
+ {activeSpeaker.name} + {/* gradient overlay blending into card */} +
+
+ + {/* Right: message */} +
+ {/* Quote — small icon, full message */} +
+ {/* Tiny decorative quote mark */} + + + + {activeSpeaker.paragraphs.map((p, idx) => ( +

+ {p} +

+ ))} +
+
+ +
+ + +
+ + {/* Manual Navigation Arrows (fade in on hover of card) */} + + + + {/* Pinned Scroll Fade Overlay & Down Arrow */} + {hasMoreContent && ( + <> +
+
+ +
+ + )} + + {/* Navigation Dot Indicators */} +
+ {speakers.map((_, index) => ( +
+ + +
+ ) +} diff --git a/pages/index.tsx b/pages/index.tsx index f00f0d4..fb7131f 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -7,6 +7,7 @@ import ConferenceThemes from '../components/ConferenceThemes' import Table from '../components/table' import { FileText, Award, Calendar, MapPin, Download, Send, ChevronRight, Earth } from 'lucide-react' import Link from 'next/link' +import SpeakerSlideshow from '../components/SpeakerSlideshow' export default function Index() { return ( @@ -204,70 +205,7 @@ export default function Index() {
{/* ── Speaker Message card ── */} -
- - {/* Background glows */} -
-
- - {/* Top: Name + affiliation (Full width) */} -
- {/* Badge */} -
- - - - Message from Speaker -
-
-

Prof. Dr.-Ing. Martin Versen

-

Technische Hochschule Rosenheim, Germany

-
-
- - {/* Bottom: photo + message side-by-side */} -
- - {/* Left: Speaker photo */} -
- Prof. Dr.-Ing. Martin Versen - {/* gradient overlay blending into card */} -
-
- - {/* Right: message */} -
- {/* Quote — small icon, full message */} -
- {/* Tiny decorative quote mark */} - - - -

- To the IEEE CSITSS Organizers and Participants, -

-

- From the Faculty of Engineering at Technische Hochschule Rosenheim — and especially from our Fluorescence Measurement Technology lab — we send our warmest regards. -

-

- We develop real-time AI systems to classify subtle optical signals — a field deeply aligned with your themes of{' '} - Sustainable Environment and Circular Economy,{' '} - Artificial Intelligence Systems, and{' '} - Data Analytics and Intelligent Decision Systems. We're excited to exchange ideas, learn from your innovations, and build global connections that turn research into impact. -

-

- Looking forward to connecting, collaborating, and co-creating the future — together. -

-
-
-
- - -
+
diff --git a/public/speakers/foreign/Andreas_Doleschel.png b/public/speakers/foreign/Andreas_Doleschel.png new file mode 100644 index 0000000..427fb85 Binary files /dev/null and b/public/speakers/foreign/Andreas_Doleschel.png differ