<template>
    <div class="page-container">
        <div class="page-header">
            <h1 class="page-title">{{ $t('get-our-solutions') }}</h1>
            <el-breadcrumb class="breadcrumb">
                <el-breadcrumb-item class="text-md opacity-50">
                    <NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
                </el-breadcrumb-item>
                <el-breadcrumb-item class="text-md opacity-50">
                    <NuxtLink :to="$localePath('/solutions')">{{ $t('navigation.solutions') }}</NuxtLink>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </div>
</template>

<style scoped>
.page-container {
    padding: 2rem 1rem;
}

.page-header {
    display: flex;
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--el-color-primary);
}

.breadcrumb {
    margin-left: auto;
}
</style>