Advanced 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 */}

    {/* Additions to the free product page template: */}
    breadcrumbs={{ ... }} {/* Breadcrumb configuration */}
    faq={{ ... }} {/* FAQs */}
    reviewSection={{ ... }} {/* Customer reviews */}
    showStickyCta={true}
    stickyCta={{ ... }} {/* Sticky CTA configuration */}
    price="$7.99"
    pricePeriod="/month"
    pricingInfo={
      text: 'This product supports purchasing power parity...',
      theme: 'info'
    }
>
    <span>Your main content</span>
</ProductPage>

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

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

// Your carousel images
const images = [{
    src: '/img/product.webp',
    alt: 'Product image',
    width: 1200,
    height: 250
}]

// Additional carousel configurations, such as pagination
const carousel = {
    pagination: {
        type: 'dots'
    }
}

// List of recommended products after the main content
const recommended = {
    items: [{
        href: '/recommendation',
        img: {
            src: '/img/recommended-product.webp',
            alt: 'Product image',
            width: 500,
            height: 250
        },
        title: 'Recommended Card',
        text: 'You can also pass <b>HTML</b> tags to your recommended cards.'
    }]
}

// CTA buttons shown under pricing
const buttons = [
    { text: 'Get Started ->', theme: 'success', href: '/register' },
    { text: 'Demo', theme: 'secondary', href: '/demo' }
]

// List of features under the CTA buttons
const features = [
    'Create breadcrumbs',
    'Add a sticky CTA',
    'Provide FAQs below your main content',
    'Display pricing details'
].map(feature => ({
    icon: circleCheck,
    color: 'var(--w-color-success)',
    text: feature
}))

// Breadcrumbs right below your menu
const breadcrumbs = {
    items: [
        { icon: 'home', href: '/' },
        { label: 'Templates', href: '/templates' },
        { label: 'Product Page' }
    ]
}

// Product pricing information above CTA buttons
const price = '$7.99'
const pricePeriod = '/month'
const pricingInfo = {
    text: 'This product supports purchasing power parity...',
    theme: 'info'
}

// FAQ listed under the main content
const faq = {
    title: 'FAQ',
    icon: 'plus',
    reverse: true,
    items: [{
        title: 'Create FAQs',
        content: 'Use the <code>faq</code> prop to define FAQs under your main content.'
    }]
}

// Your review section with reviews and summary
const reviewSection = {
    reviews: [{
        name: 'Jonathan Doe',
        date: '2025. 02. 15.',
        description: 'Absolutely fantastic product!',
        rating: {
            score: 5,
            color: 'var(--w-color-warning)',
            emptyColor: 'var(--w-color-primary-30)',
            outline: false
        },
        avatar: {
            img: '/img/avatar.png',
            alt: 'Avatar'
        },
        ratedFor: 'Rated for <b>Product Quality</b>',
        positives: [
            'Excellent build quality',
            'Fast shipping',
            'Great customer service'
        ],
        negatives: [
            'None'
        ]
    }],
    summary: {
        subText: 'Based on {0} reviews',
        description: 'Help users make informed decisions.',
        rating: {
            color: 'var(--w-color-warning)',
            emptyColor: 'var(--w-color-primary-30)',
            outline: false
        },
        colors: [
            'var(--w-color-alert)',
            'var(--w-color-alert)',
            'var(--w-color-warning)',
            'var(--w-color-success)',
            'var(--w-color-success)'
        ],
        cta: {
            text: 'Write a review'
        }
    },
    reviewButtons: [{
        icon: replyIcon,
        text: 'Reply',
        theme: 'flat'
    }, {
        icon: flagIcon,
        text: 'Report',
        theme: 'flat'
    }, {
        icon: likeIcon,
        text: 'Helpful',
        theme: 'flat'
    }],
    reviewCountTitle: 'Showing {0} reviews',
    verifiedText: 'Verified review'
}

// Sticky CTA configuration that enters the viewport after the main CTA leaves it
const showStickyCta = true
const stickyCta = {
    text: 'Customizable and easy to setup template for your products'
}
---

<ProductPage
    layout={layout}
    images={images}
    carousel={carousel}
    buttons={buttons}
    features={features}
    recommended={recommended}
    breadcrumbs={breadcrumbs}
    price={price}
    pricePeriod={pricePeriod}
    pricingInfo={pricingInfo}
    faq={faq}
    reviewSection={reviewSection}
    showStickyCta={showStickyCta}
    stickyCta={stickyCta}
/>

type ProductPageProps = {
    layout: LayoutProps
    images?: {
        src: string
        alt: string
        width: number
        height: number
        lazy?: boolean
    }[]
    carousel?: Omit<CarouselProps, 'items'>
    buttons?: ({
        text: string
        icon?: IconProps['type'] | string
    } & ButtonProps)[]
    features?: IconListProps['items']
    recommended?: {
        title?: string
        items: BlogCardProps[]
    }
    breadcrumbs?: BreadcrumbProps
    price?: string
    pricePeriod?: string
    pricingInfo?: {
        text: string
    } & AlertProps
    faq?: FAQProps
    reviewSection?: {
        title?: string
    } & ReviewsProps
    showStickyCta?: boolean
    stickyCta?: {
        text: string
        cta?: ({
            text: string
            icon?: IconProps['type'] | string
        } & ButtonProps)
    } & Omit<StickyCtaProps, 'showBefore'
        | 'showAfter'
        | 'showAfterEnter'
        | 'cta'
    >
    [key: string]: any
}