Slides - Copy this React, Tailwind Component to your project

import React, { useState, useEffect } from "react"; import { FaExclamationTriangle } from "react-icons/fa"; import { AnimatePresence } from "framer-motion"; import Slide from "./components/Slide"; import './index.css'; const WebPresentation = () => { const [currentSlide, setCurrentSlide] = useState(0); const [error, setError] = useState(null); const [showDetail, setShowDetail] = useState(false); const slides = [ { id: 1, title: "Introduction", content: "Welcome to the Web Animation Presentation", image: "https://images.unsplash.com/photo-1551503766-ac63dfa6401c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80", icon: "FaBook", detail: "This presentation covers various aspects of web animation techniques and libraries." }, { id: 2, title: "The Importance of Web Animation", content: "Animations enhance user experience and engagement", image: "https://images.unsplash.com/photo-1507721999472-8ed4421c4af2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80", icon: "FaGraduationCap", detail: "Web animations can significantly improve user interaction and make websites more dynamic." }, { id: 3, title: "Types of Web Animation", content: "CSS, JavaScript, and SVG animations", image: "https://images.unsplash.com/photo-1555099962-4199c345e5dd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80", icon: "FaPencilAlt", detail: "There are various types of web animations, each with its own strengths and use cases." }, { id: 4, title: "Animation Techniques", content: "Keyframes, transitions, and transforms", image: "https://images.unsplash.com/photo-1553484771-371a605b060b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80", icon: "FaLaptopCode", detail: "Understanding different animation techniques is crucial for creating effective web animations." }, { id: 5, title: "GreenSock Animation Platform (GSAP)", content: "Professional-grade animation for the modern web", image: "https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80", icon: "FaChalkboardTeacher", detail: "GSAP is a powerful animation library that offers high performance and flexibility." }, { id: 6, title: "Anime.js", content: "A lightweight JavaScript animation library", image: "https://images.unsplash.com/photo-1558655146-d09347e92766?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80", icon: "FaUserGraduate", detail: "Anime.js is known for its simplicity and ease of use in creating web animations." }, { id: 7, title: "When to Use Animation Libraries", content: "Complex animations and cross-browser compatibility", image: "https://images.unsplash.com/photo-1556761175-4b46a572b786?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80", icon: "FaBrain", detail: "Choosing when to use animation libraries depends on project requirements and complexity." }, { id: 8, title: "Pros and Cons of Using Animation Libraries", content: "Performance vs. ease of use", image: "https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80", icon: "FaClipboardCheck", detail: "Weighing the advantages and disadvantages of animation libraries is important for project success." }, { id: 9, title: "Conclusion", content: "Animations are crucial for modern web experiences", image: "https://images.unsplash.com/photo-1559028012-481c04fa702d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80", icon: "FaLightbulb", detail: "Incorporating animations effectively can greatly enhance the overall user experience of a website." } ]; useEffect(() => { const handleKeyDown = (e) => { if (e.key === "ArrowLeft") { prevSlide(); } else if (e.key === "ArrowRight") { nextSlide(); } }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, []); const nextSlide = () => { setCurrentSlide((prev) => (prev + 1) % slides.length); setShowDetail(false); }; const prevSlide = () => { setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length); setShowDetail(false); }; const toggleDetail = () => { setShowDetail(!showDetail); }; return ( <div className="web-presentation h-screen bg-gray-100"> <div className="container mx-auto h-full"> <AnimatePresence initial={false}> <Slide key={currentSlide} slide={slides[currentSlide]} showDetail={showDetail} toggleDetail={toggleDetail} currentSlide={currentSlide} totalSlides={slides.length} nextSlide={nextSlide} prevSlide={prevSlide} /> </AnimatePresence> </div> {error && ( <div className="error-notification absolute bottom-4 left-4 bg-red-500 text-white p-2 rounded"> <FaExclamationTriangle className="inline mr-2" /> {error} </div> )} </div> ); }; export default WebPresentation;