Career Page Template for Astro

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

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

const buttons = [ ... ] // CTA buttons, such as "Apply now" or "See all positions"
const requirements = { ... } // List of position requirements, displayed under the CTA
---

<Career
    layout={layout}
    role="Astro Developer"
    caption="Frontend · Remote or London Office"
    summary="Help us build high-performance websites..."
    location="London / Remote (EU timezone preferred)"
    contract="Full-time · Mid-Senior level"
    publishDate="2025-01-15"
    buttons={buttons}
    requirements={requirements}
>
    Main content
</Career>

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

// Your layout with SEO, including menu and footer
const layout: CareerProps['layout'] = {
    seo: {
        title: 'Career Page Template - Webcore',
        url: 'https://webcoreui.dev/',
        description: 'A customizable and easy to use template for job posting.',
        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.`
    }
}

// Role of the career, inserted into h1
const role = 'Astro Developer'

// Caption, shown above the role
const caption = 'Frontend · Remote or London Office'

// A short summary about the position, right below the h1
const summary = 'Help us build high-performance websites.'

// Additional location info, displayed under summary
const location = 'London / Remote (EU timezone preferred)'

// Additional contract info, displayed under summary
const contract = 'Full-time · Mid-Senior level'

// Additional post date, displayed under summary
const publishDate = '2025-01-15'

// CTA buttons displayed at the top of a sidebar
const buttons: CareerProps['buttons'] = [{
    text: 'Apply now ->',
    href: '#',
    theme: 'info'
}]

// List of position requirements, displayed under the CTA
const requirements: CareerProps['requirements'] = {
    title: 'What we expect',
    items: [{
        icon: 'circle-check',
        text: 'Strong experience with Astro',
        color: 'var(--w-color-success)'
    }]
}
---

<Career
    layout={layout}
    role={role}
    caption={caption}
    summary={summary}
    location={location}
    contract={contract}
    publishDate={publishDate}
    buttons={buttons}
    requirements={requirements}
>
    Main content
</Career>

type CareerProps = {
    layout: LayoutProps
    role: string
    caption?: string
    summary?: string
    location?: string
    contract?: string
    publishDate?: string
    buttons: ({
        text: string
        icon?: IconProps['type'] | string
    } & ButtonProps)[]
    requirements?: {
        title?: string
        items: IconListProps['items']
    }
}