111 lines
3 KiB
Vue
111 lines
3 KiB
Vue
<template>
|
|
<div class="funnel-footer">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col d-flex justify-content-center justify-content-md-start">
|
|
<img class="skyline" src="~@/assets/img/skyline-van.svg" alt="" />
|
|
</div>
|
|
<div class="col d-none d-md-flex justify-content-end align-items-end">
|
|
<img class="neighborhood" src="~@/assets/img/neighborhood.svg" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-inner-wrapper">
|
|
<p class="mx-3 my-0 pb-1">© 2025 Safelite Group</p>
|
|
<textLink
|
|
linkType="newWindowLink"
|
|
text="Terms of service"
|
|
href="//www.safelite.com/terms-of-service"
|
|
target="_blank" />
|
|
<textLink
|
|
linkType="newWindowLink"
|
|
text="Your privacy choices"
|
|
href="//www.safelite.com/privacy-center"
|
|
target="_blank">
|
|
<template v-slot:after-text>
|
|
<img
|
|
class="ccpa-icon"
|
|
src="~@/assets/img/icons/ccpa-icon.svg"
|
|
alt="Your privacy choices" />
|
|
</template>
|
|
</textLink>
|
|
<textLink
|
|
linkType="navigation"
|
|
text="Cookie preferences"
|
|
href="javascript:OneTrust.ToggleInfoDisplay();" />
|
|
<textLink
|
|
linkType="newWindowLink"
|
|
text="Notice at collection"
|
|
href="https://www.safelite.com/ccpa-privacy-policy"
|
|
target="_blank" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import textLink from "@/ux-components/text-link/text-link";
|
|
|
|
export default {
|
|
name: "funnelFooter",
|
|
components: {
|
|
textLink,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.funnel-footer {
|
|
border-top: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
background: transparent;
|
|
align-items: end;
|
|
margin-top: auto;
|
|
|
|
.skyline {
|
|
height: 96px;
|
|
}
|
|
.neighborhood {
|
|
height: 48px;
|
|
}
|
|
|
|
.footer-inner-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-top: 1px solid $gray;
|
|
padding: 2rem 0;
|
|
width: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
p {
|
|
font-size: 0.875rem;
|
|
color: $black;
|
|
@include media-breakpoint-up(md) {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
:deep(a) {
|
|
text-decoration: none;
|
|
&.new-window-link {
|
|
margin: 0 0.75rem;
|
|
}
|
|
&.navigation-link {
|
|
margin: 0 0.75rem;
|
|
}
|
|
}
|
|
|
|
.ccpa-icon {
|
|
width: 2.0625rem;
|
|
height: 1rem;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
@include media-breakpoint-up(md) {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
}
|
|
</style>
|