web-app-starter/views/index.php

<?php include_css('marketing.css') ?>

<?= component('components/example/hero-section', [
    'title' => 'Stunning Apps',
    'subtitle' => 'Experience the power of super bloated PHP development with our gigantic and truly unwieldy component-based framework. 
		Seriously though this page only serves as an example repository of
        different styles and blocks.',
    'cta_text' => 'Get Started Free(mium)',
    'cta_link' => '#features'
]) ?>

<?= component('components/example/features-grid') ?>

<?= component('components/example/stats-section', [
    'stats' => [
        ['number' => '10K+', 'label' => 'Happy Vibe Coders'],
        ['number' => '<1s', 'label' => 'Page Load Time'],
        ['number' => '99.9%', 'label' => 'Uptime'],
        ['number' => '24/7', 'label' => 'Support']
    ]
]) ?>

<?= component('components/example/brands-showcase') ?>

<?= component('components/example/testimonials') ?>

<?= component('components/example/pricing-table') ?>

<div class="demo-section">
    <div class="demo-container">
        <h2>Demo</h2>
        <p>Try our UNBELIEVABLE components in action</p>
        
        <div class="demo-grid">
            <div class="demo-card">
                <h3>Modern Forms</h3>
                <form class="demo-form">
                    <div>
                        <label>Full Name</label>
                        <input type="text" placeholder="Enter your name" />
                    </div>
                    <div>
                        <label>Email Address</label>
                        <input type="email" placeholder="you@example.com" />
                    </div>
                    <div>
                        <label>Message</label>
                        <textarea placeholder="Tell us what you think..." rows="4"></textarea>
                    </div>
                    <button type="submit">Send Message</button>
                </form>
            </div>
            
            <div class="demo-card">
                <h3>Button Variations</h3>
                <div class="button-showcase">
                    <button class="btn">Primary Button</button>
                    <button class="btn btn-secondary">Secondary</button>
                    <button class="btn btn-outline">Outline</button>
                    <button class="btn btn-large">Large Button</button>
                </div>
                
                <div class="notification-demo">
                    <div class="banner success">✓ Success message example</div>
                    <div class="banner warning">⚠ Warning message example</div>
                    <div class="banner error">✗ Error message example</div>
                </div>
            </div>
        </div>
    </div>
</div>

<?= component('components/example/cta-section', [
    'title' => 'Ready to Transform Your Development?',
    'subtitle' => 'Join thousands of developers who have already modernized their workflow with our framework.',
    'cta_text' => 'Start Your Project',
    'secondary_text' => 'View GitHub'
]) ?>

<div class="card">
<h2>Component Development Guidelines</h2>
<div class="guidelines-grid">
    <div class="guideline-item" style="border-left-color: var(--primary);">
        <span class="guideline-icon">🏷️</span>
        <span>Use semantic HTML5 elements</span>
    </div>
    <div class="guideline-item" style="border-left-color: var(--secondary);">
        <span class="guideline-icon">🎨</span>
        <span>Implement CSS custom properties for theming</span>
    </div>
    <div class="guideline-item" style="border-left-color: var(--accent);">
        <span class="guideline-icon">📱</span>
        <span>Add responsive design with mobile-first approach</span>
    </div>
    <div class="guideline-item" style="border-left-color: var(--success);">
        <span class="guideline-icon">♿</span>
        <span>Include accessibility attributes (ARIA, alt text)</span>
    </div>
    <div class="guideline-item" style="border-left-color: var(--warning);">
        <span class="guideline-icon">⚡</span>
        <span>Use progressive enhancement for JavaScript features</span>
    </div>
</div>
</div>

<div class="card">
<h2>Simple Data Table (ag-Grid)</h2>
<p>Basic data table with auto-generated columns, sorting, and filtering:</p>
<?= component('components/data/table', [
    'items' => [
        ['name' => 'John Doe', 'age' => 25, 'gender' => 'male', 'department' => 'Engineering', 'salary' => 75000, 'active' => true],
        ['name' => 'Jane Smith', 'age' => 30, 'gender' => 'female', 'department' => 'Design', 'salary' => 82000, 'active' => true],
        ['name' => 'Bob Johnson', 'age' => 35, 'gender' => 'male', 'department' => 'Marketing', 'salary' => 68000, 'active' => false],
        ['name' => 'Alice Brown', 'age' => 40, 'gender' => 'female', 'department' => 'Engineering', 'salary' => 95000, 'active' => true],
        ['name' => 'Dave Wilson', 'age' => 45, 'gender' => 'male', 'department' => 'Sales', 'salary' => 72000, 'active' => true],
        ['name' => 'Eve Davis', 'age' => 50, 'gender' => 'non-binary', 'department' => 'Management', 'salary' => 110000, 'active' => true],
        ['name' => 'Charlie Miller', 'age' => 28, 'gender' => 'male', 'department' => 'Engineering', 'salary' => 78000, 'active' => true],
        ['name' => 'Sarah Taylor', 'age' => 33, 'gender' => 'female', 'department' => 'Design', 'salary' => 85000, 'active' => false],
    ],
    'height' => '350px'
]) ?>
</div>