import React from 'react'; import { IconType } from 'react-icons'; import { FaStar, FaHeart, FaMagic, FaRocket, FaRegLightbulb } from 'react-icons/fa'; // Content configuration const config = { heading: "Our Magical Journey", subheading: "Follow our path of creating delightful experiences and spreading joy through design! ✨", ctaTitle: "Join Our Adventure", ctaText: "Start Creating", ctaLink: "/add-your-link-here", milestones: [ { icon: FaRegLightbulb, iconBg: 'bg-yellow-200', cardBg: 'bg-gradient-to-r from-yellow-50 to-pink-50', accentColor: 'yellow', title: 'The Spark of Inspiration', year: '2020', description: 'Our journey began with a simple idea: to make the digital world more delightful and accessible to everyone.', }, { icon: FaHeart, iconBg: 'bg-pink-200', cardBg: 'bg-gradient-to-r from-pink-50 to-purple-50', accentColor: 'pink', title: 'Growing Community', year: '2021', description: 'Our community grew as more creators joined us in our mission to spread joy through design.', }, { icon: FaMagic, iconBg: 'bg-purple-200', cardBg: 'bg-gradient-to-r from-purple-50 to-blue-50', accentColor: 'purple', title: 'Magic in Every Pixel', year: '2022', description: 'We launched our suite of creative tools, empowering designers to add that special touch of magic.', }, { icon: FaRocket, iconBg: 'bg-blue-200', cardBg: 'bg-gradient-to-r from-blue-50 to-green-50', accentColor: 'blue', title: 'Reaching New Heights', year: '2023', description: 'Our platform evolved into a complete ecosystem for creating joyful digital experiences.', }, ], }; interface Milestone { icon: IconType; iconBg: string; cardBg: string; accentColor: string; title: string; year: string; description: string; } const BackgroundBubbles = () => { return (

); }; const Milestone = ({ milestone, index }: { milestone: Milestone; index: number }) => { const IconComponent = milestone.icon; const isEven = index % 2 === 0; return (

{/* Decorative circles */}

{milestone.title}

{milestone.year}

{milestone.description}

); }; const BubblegumTimeline = () => { return (

{config.heading}

{config.subheading}

{/* Timeline line */}

{/* Timeline dots with group hover */}

{/* Milestones */}

{config.milestones.map((milestone, index) => (

))}

{/* CTA Section */}

{config.ctaTitle}

{config.ctaText}

); }; export default BubblegumTimeline;

Colorful Components

Bubblegum Timeline