await import('/components/layout/hero.js');
await import('/components/actions/button.js');

const { tags, $ } = Lightview;
const { h1, p, Hero, Button } = tags;

const hero = Hero({ style: 'background-color: oklch(var(--b2)); min-height: 16rem; border-radius: 1rem;' },
    Hero.Content({ position: 'center' },
        h1({ style: 'font-size: 3rem; line-height: 1; font-weight: 800;' }, '🚀 Hello Lightview'),
        p({ style: 'padding: 1.5rem 0; max-width: 28rem;' }, 
            'Build reactive UIs with a lightweight, powerful library.'
        ),
        Button({ color: 'primary' }, 'Get Started')
    )
);

$('#example').content(hero);

await import('/components/layout/hero.js');
await import('/components/actions/button.js');
const { $, tags } = Lightview;
const { Hero, Button, h1, p } = tags;

const hero = {
    tag: Hero,
    attributes: { style: 'background-color: oklch(var(--b2)); min-height: 16rem; border-radius: 1rem;' },
    children: [
        {
            tag: Hero.Content,
            attributes: { position: 'center' },
            children: [
                { tag: h1, attributes: { style: 'font-size: 3rem; line-height: 1; font-weight: 800;' }, children: ['🚀 Hello Lightview'] },
                {
                    tag: p,
                    attributes: { style: 'padding: 1.5rem 0; max-width: 28rem' },
                    children: ['Build reactive UIs with a lightweight, powerful library.']
                },
                { tag: Button, attributes: { color: 'primary' }, children: ['Get Started'] }
            ]
        }
    ]
};

$('#example').content(hero);

await import('/components/layout/hero.js');
await import('/components/actions/button.js');
const { $ } = Lightview;

const hero = {
    Hero: {
        style: 'background-color: oklch(var(--b2)); min-height: 16rem; border-radius: 1rem;',
        children: [
            {
                'Hero.Content': {
                    position: 'center',
                    children: [
                        { h1: { style: 'font-size: 3rem; line-height: 1; font-weight: 800;', children: ['🚀 Hello Lightview'] } },
                        { p: { style: 'padding: 1.5rem 0; max-width: 28rem;', children: ['Build reactive UIs with a lightweight, powerful library.'] } },
                        { Button: { color: 'primary', children: ['Get Started'] } }
                    ]
                }
            }
        ]
    }
};

$('#example').content(hero);