+ {/* Hero Section */}
+
+
+ Interactive Demo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Feature Checklist
+
+ Try these features to experience the full power of the template
+
+
+
+
+
+
+
+ {/* CTA Section */}
+
+
+
+ Explore All Features
++ Try everything with our pre-configured demo accounts. All changes are safe to test and + reset automatically. +
+
+
+
+ Quick Start Guide
+Follow these simple steps to get started
+
+
+
+
+
+ Browse the demo categories below and pick what interests you most
+
+
+
+
+
+
+
+ Copy the demo credentials and login to explore authenticated features
+
+
+
+
+
+
+
+ Test all features - everything resets automatically, so experiment away!
+
+
+
+
+ Choose a Demo
+
+
+ 1
+
+
+ Use Credentials
+
+
+ 2
+
+
+ Explore Freely
+
+
+ 3
+
+
+
+
+ Demo Categories
+Explore different areas of the template
+
+ {demoCategories.map((category) => {
+ const Icon = category.icon;
+ return (
+
+
+ {category.title}
+ {category.description}
+
+
+ {/* Features List */}
+
+
+ );
+ })}
+
+
+
+ Login Required
+
+ )}
+
+
+
+ {category.credentials && (
+
+ {category.features.map((feature) => (
+
+
+ {/* Credentials */}
+ {category.credentials && (
+
+
+ ))}
+
+
+ )}
+
+ {/* CTA */}
+
+ + {category.credentials.role} Credentials: +
+{category.credentials.email}
+{category.credentials.password}
+
+
+
+ Suggested Exploration Paths
+Choose your adventure based on available time
+
+ {explorationPaths.map((path) => (
+
+
+ {path.title}
+
+
+
+
+ ))}
+
+
+ {path.steps.map((step, index) => {
+ const StepIcon = step.icon;
+ return (
+
+
+
+ {index + 1}
+
+
+
+
+ What to Try
++ Complete checklist of features to explore (for your reference) +
+
+ {checklist.map((item, index) => (
+
+
+
+ ))}
+
+ {item.completed &&
+
+ {item.label}
+
+
+
+ Ready to Start?
++ Pick a demo category above or jump right into the action +
+
+
+
+
+