@erosnicolau/animated-text
Version:
Advanced React animated text component with comprehensive animation effects
6 lines (5 loc) • 2 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const CreativeInspirationPanel = () => {
return (_jsxs("div", { className: "mt-8 p-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200", children: [_jsx("h4", { className: "text-lg font-semibold mb-4 text-blue-900", children: "\uD83C\uDFA8 Creative Inspiration" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 text-sm", children: [_jsxs("div", { children: [_jsx("h5", { className: "font-medium text-blue-800 mb-2", children: "Design Principles:" }), _jsxs("ul", { className: "space-y-1 text-blue-700", children: [_jsxs("li", { children: ["\u2022 ", _jsx("strong", { children: "Emotional storytelling" }), " through typography"] }), _jsxs("li", { children: ["\u2022 ", _jsx("strong", { children: "Progressive disclosure" }), " of information"] }), _jsxs("li", { children: ["\u2022 ", _jsx("strong", { children: "Rhythm and timing" }), " create anticipation"] }), _jsxs("li", { children: ["\u2022 ", _jsx("strong", { children: "Color psychology" }), " enhances messaging"] }), _jsxs("li", { children: ["\u2022 ", _jsx("strong", { children: "Scale hierarchy" }), " guides attention"] })] })] }), _jsxs("div", { children: [_jsx("h5", { className: "font-medium text-blue-800 mb-2", children: "Technical Combinations:" }), _jsxs("ul", { className: "space-y-1 text-blue-700", children: [_jsxs("li", { children: ["\u2022 ", _jsx("strong", { children: "Multiple effects" }), " work in harmony"] }), _jsxs("li", { children: ["\u2022 ", _jsx("strong", { children: "Staggered timing" }), " creates flow"] }), _jsxs("li", { children: ["\u2022 ", _jsx("strong", { children: "Easing functions" }), " add personality"] }), _jsxs("li", { children: ["\u2022 ", _jsx("strong", { children: "Transform origins" }), " control motion"] }), _jsxs("li", { children: ["\u2022 ", _jsx("strong", { children: "Shadow & glow" }), " add depth"] })] })] })] })] }));
};
export default CreativeInspirationPanel;