rtik007's picture
Create a clean, modern mobile app screen visualizing a four-step analytics lifecycle. Use soft gradients, rounded cards, simple line icons, and a minimal professional color palette (blues, greys, and soft oranges). Arrange each step vertically as elegant cards with small icons on the left and text on the right. Include subtle shadows, smooth spacing, and a dashboard-style aesthetic.
172cff4 verified
document.addEventListener('DOMContentLoaded', () => {
// Initialize tooltips
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
// Animate elements when they come into view
const animateOnScroll = () => {
const elements = document.querySelectorAll('.fade-in');
elements.forEach(element => {
const elementPosition = element.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
if (elementPosition < windowHeight - 100) {
element.classList.add('animate-fadeIn');
}
});
};
window.addEventListener('scroll', animateOnScroll);
animateOnScroll(); // Run once on load
});
// Sample data for demonstration
const promptCategories = [
{ name: "Creative Writing", count: 1245, icon: "edit-3" },
{ name: "Code Generation", count: 982, icon: "code" },
{ name: "Business Ideas", count: 756, icon: "briefcase" },
{ name: "Academic Research", count: 632, icon: "book" },
{ name: "Marketing Copy", count: 541, icon: "megaphone" },
{ name: "Personal Growth", count: 498, icon: "user" }
];