116 lines
2.9 KiB
Vue
116 lines
2.9 KiB
Vue
<template>
|
|
<router-view></router-view>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col my-3 d-flex justify-content-center">
|
|
<vehicleImage/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="text-center text-secondary fs-5 mb-4">Select a year to get started</p>
|
|
<p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<buttonFunnel/>
|
|
<confetti/>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-5">
|
|
<imageButton
|
|
btnText="windshield-damage.svg"
|
|
altText="Windshield"
|
|
damageTitle="Windshield"
|
|
ariaLabel="Windshield"
|
|
/>
|
|
<imageButton
|
|
btnText="side-window-damage.svg"
|
|
altText="Side Window"
|
|
damageTitle="Side door"
|
|
ariaLabel="Side door"
|
|
/>
|
|
<imageButton
|
|
btnText="back-glass-damage.svg"
|
|
altText="Back Glass"
|
|
damageTitle="Back glass"
|
|
ariaLabel="Back glass"
|
|
/>
|
|
</div>
|
|
<div class="row mt-5">
|
|
<radioCard
|
|
radioLabel="Windshield"
|
|
radioImage="windshield-damage.svg"
|
|
altText="Windshield"
|
|
groupName="damageKey"
|
|
radioID="windshield"
|
|
/>
|
|
<radioCard
|
|
radioLabel="Side Window"
|
|
radioImage="side-window-damage.svg"
|
|
altText="Side Window"
|
|
groupName="damageKey"
|
|
radioID="sidewindow"
|
|
/>
|
|
<radioCard
|
|
radioLabel="Back Glass"
|
|
radioImage="back-glass-damage.svg"
|
|
altText="Back Glass"
|
|
groupName="damageKey"
|
|
radioID="backglass"
|
|
/>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col my-3 d-flex align-items-center">
|
|
<buttonPrimary
|
|
buttonText="Primary"
|
|
buttonType="btn-primary"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col my-3 d-flex align-items-center">
|
|
<buttonPrimary
|
|
buttonText="Primary Focus"
|
|
buttonType="btn-primary-focus"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col my-3 d-flex align-items-center">
|
|
<buttonPrimary
|
|
buttonText="Disabled"
|
|
buttonType="disabled"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col my-3 d-flex align-items-center">
|
|
<a href="#">Text Link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import buttonFunnel from './components/buttons/buttonFunnel';
|
|
import vehicleImage from './components/vehicleImage';
|
|
import imageButton from './components/imageButton';
|
|
import confetti from './components/confetti';
|
|
import buttonPrimary from './components/buttons/buttonPrimary';
|
|
import radioCard from './components/forms/radioCard';
|
|
|
|
|
|
export default {
|
|
name: 'App',
|
|
components: {
|
|
buttonFunnel,
|
|
vehicleImage,
|
|
imageButton,
|
|
confetti,
|
|
buttonPrimary,
|
|
radioCard
|
|
}
|
|
}
|
|
</script>
|