Product Page Template for Astro

---
import ProductPage from '@templates/ProductPage.astro'

const layout = {
    seo: { ... } // Your SEO configuration
    menu: { ... } // Menu configuration
    footer: { ... } // Footer configuration
}
---

<ProductPage
    layout={layout}
    images={[ ... ]} {/* Your Carousel images */}
    carousel={{ ... }} {/* Optional Carousel configuration */}
    buttons={[ ... ]} {/* CTA buttons */}
    features={[ ... ]} {/* List of features under CTA */}
    recommended={{ ... }} {/* Recommended items */}
>
    <span>Your main content</span>
</ProductPage>

---
import ProductPage from '@templates/ProductPage.astro'

// Your layout, including menu and footer
const layout = {
    seo: {
        title: 'Product Page Template for Astro - Webcore',
        url: 'https://webcoreui.dev/previews/product-page',
        description: 'A customizable and easy to use template for products.',
        faviconUrl: '/img/favicon.ico'
    },
    menu: {
        logo: {
            html: logo
        },
        items: [
            { name: 'Latest', href: '/latest' }
        ]
    },
    footer: {
        logo: {
            html: logo
        },
        columns: [
            {
                title: 'Sitemap',
                items: [
                    { href: '/', name: 'Home' },
                    { href: '/templates', name: 'Templates' }
                ]
            }
        ],
        subText: `© ${new Date().getFullYear()} Webcore. All Rights Reserved.`
    }
}

// Your carousel images
const images = [{
    src: '/img/carousel1.png',
    alt: 'Carousel image',
    width: 1200,
    height: 250
}]

// Your carousel configuration
const carousel = {
    pagination: {
        type: 'dots' as PaginationProps['type']
    }
}

// Your list of recommended products
const recommended = [{
    href: '/dashboard-template',
    img: {
        src: '/img/recommended.png',
        alt: 'Recommended product',
        width: 500,
        height: 250,
        lazy: true
    },
    title: 'Recommended Card #1',
    text: 'You can also pass <b>HTML</b> tags to your recommended cards.'
}]

// Your CTA buttons
const buttons = [
    {
        text: 'Get Started ->',
        theme: 'success' as ButtonProps['theme'],
        href: '/templates/product-page',
    },
    { text: 'Demo', theme: 'secondary' as ButtonProps['theme'] }
]

// List of features under the CTA buttons
const features = [
    'Easily configure your menu and footer',
    'Add carousel for preview images',
    'Define your main content the way you want',
    'Customize your call to actions',
    'List features',
    'Add recommendations'
].map(feature => ({
    icon: 'circle-check',
    color: 'var(--w-color-success)',
    text: feature
}))
---

<ProductPage
    layout={layout}
    images={images}
    carousel={carousel}
    buttons={buttons}
    features={features}
    recommended={recommended}
>
    <span>Your main content</span>
</ProductPage>