Internship Program - Copy this React, Tailwind Component to your project

Import React from "react"; import { motion } from "framer motion"; import "tailwindcss/tailwind.css"; const InternshipProgram = () => { const fadeIn = { hidden: { opacity: 0, y: 50 }, visible: { opacity: 1, y: 0, transition: { duration: 0.8 } }, }; const staggerContainer = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.3, }, }, }; const features = [ { title: "Real World Projects", description: "Work on real world tasks that contribute to portfolios and industry relevance.", icon: "💻", }, { title: "Expert Mentorship", description: "Receive personalized guidance from professionals passionate about teaching.", icon: "🌟", }, { title: "Skill Development", description: "Learn in demand skills through hands on workshops and curated training.", icon: "📚", }, { title: "Transparency & Accountability", description: "Access detailed project outlines, mentor bios, and real testimonials.", icon: "🔍", }, { title: "Community & Networking", description: "Engage with peers and build a network for ongoing career support.", icon: "🤝", }, { title: "Value Based Pricing", description: "Affordable plans with scholarships, free sessions, and a satisfaction guarantee.", icon: "💰", }, ]; return ( <div className="bg gradient to r from blue 50 to blue 100 min h screen py 10 font sans"> <div className="container mx auto px 6"> {/* Header Section */} <motion.div variants={fadeIn} initial="hidden" animate="visible" className="text center mb 16" > <h1 className="text 5xl font extrabold text blue 700 mb 6 tracking wide"> Empowering Careers with Meaningful Internships </h1> <p className="text lg text gray 700 max w 2xl mx auto leading relaxed"> A pathway to real world skills, impactful projects, and career growth designed just for you. </p> </motion.div> {/* Features Section */} <motion.div variants={staggerContainer} initial="hidden" animate="visible" className="grid grid cols 1 md:grid cols 2 lg:grid cols 3 gap 10" > {features.map((feature, index) => ( <motion.div key={index} variants={fadeIn} className="bg white shadow lg rounded xl p 8 text center hover:scale 105 transform transition transform duration 300 hover:shadow 2xl" > <div className="text 5xl mb 4 animate bounce text blue 500"> {feature.icon} </div> <h3 className="text 2xl font semibold text gray 800 mb 4"> {feature.title} </h3> <p className="text gray 600 leading relaxed"> {feature.description} </p> </motion.div> ))} </motion.div> {/* Transparency Section */} <motion.div variants={fadeIn} initial="hidden" animate="visible" className="mt 20 text center" > <h2 className="text 4xl font bold text blue 700 mb 6"> Why Choose Us? </h2> <p className="text lg text gray 700 max w 4xl mx auto leading relaxed"> We prioritize transparency by offering detailed project outlines, showcasing mentor bios, and sharing real testimonials. Our goal is to provide a trustworthy and enriching internship experience that focuses on your growth. </p> </motion.div> {/* Call to Action */} <motion.div variants={fadeIn} initial="hidden" animate="visible" className="mt 16 text center" > <button className="bg gradient to r from blue 600 to green 500 text white px 10 py 4 rounded full text lg font medium shadow lg hover:from blue 800 hover:to green 700 transition all duration 300 transform hover:scale 110"> Apply Now </button> <p className="mt 4 text gray 600 text sm"> Limited slots available. Enroll now to secure your spot! </p> </motion.div> {/* Animated Footer */} <motion.div variants={fadeIn} initial="hidden" animate="visible" className="mt 20 text center text gray 700" > <p className="text lg italic"> "Transforming Internships into Career Launchpads" </p> </motion.div> </div> </div> ); }; export default InternshipProgram;