Data Display Section.

<!-- Data Display Section -->
        <section class="section">
            <h2>Data Display</h2>

            <!-- Modern Table -->
            <div class="display-group">
                <h3>Modern Table</h3>
                <div class="table-container">
                    <table class="modern-table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Role</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>John Doe</td>
                                <td>[email protected]</td>
                                <td>Developer</td>
                                <td><span class="status-badge active">Active</span></td>
                            </tr>
                            <tr>
                                <td>Jane Smith</td>
                                <td>[email protected]</td>
                                <td>Designer</td>
                                <td><span class="status-badge">Offline</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Lists -->
            <div class="display-group">
                <h3>Interactive List</h3>
                <ul class="modern-list">
                    <li class="list-item">
                        <div class="list-content">
                            <i class="fas fa-file-alt"></i>
                            <span>Project Documentation</span>
                        </div>
                        <span class="list-action">View</span>
                    </li>
                    <li class="list-item">
                        <div class="list-content">
                            <i class="fas fa-code"></i>
                            <span>Source Code</span>
                        </div>
                        <span class="list-action">Edit</span>
                    </li>
                    <li class="list-item">
                        <div class="list-content">
                            <i class="fas fa-bug"></i>
                            <span>Bug Reports</span>
                        </div>
                        <span class="list-action">Fix</span>
                    </li>
                </ul>
            </div>

            <!-- Tree View -->
            <div class="display-group">
                <h3>Tree View</h3>
                <div class="tree-view">
                    <div class="tree-item">
                        <i class="fas fa-folder"></i>
                        <span>Project Root</span>
                        <div class="tree-children">
                            <div class="tree-item">
                                <i class="fas fa-folder"></i>
                                <span>src</span>
                                <div class="tree-children">
                                    <div class="tree-item">
                                        <i class="fas fa-file-code"></i>
                                        <span>index.js</span>
                                    </div>
                                    <div class="tree-item">
                                        <i class="fas fa-file-code"></i>
                                        <span>styles.css</span>
                                    </div>
                                </div>
                            </div>
                            <div class="tree-item">
                                <i class="fas fa-folder"></i>
                                <span>public</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Timeline -->
            <div class="display-group">
                <h3>Timeline</h3>
                <div class="timeline">
                    <div class="timeline-item">
                        <div class="timeline-dot"></div>
                        <div class="timeline-content">
                            <h4>Project Started</h4>
                            <p>Initial commit and repository setup</p>
                            <span class="timeline-date">2 hours ago</span>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-dot"></div>
                        <div class="timeline-content">
                            <h4>Feature Update</h4>
                            <p>Added new components and styles</p>
                            <span class="timeline-date">1 day ago</span>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-dot"></div>
                        <div class="timeline-content">
                            <h4>Version Release</h4>
                            <p>Released version 1.0.0</p>
                            <span class="timeline-date">1 week ago</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>