11<script setup lang="ts">
22import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
3-
4- // import backgroundImage from '../../assets/images/background-features.jpg'
3+ import screenshotExpenses1 from '../../../public/expenses.png'
54import screenshotExpenses from '../../assets/images/screenshots/expenses.png'
65import screenshotPayroll from '../../assets/images/screenshots/payroll.png'
76import screenshotReporting from '../../assets/images/screenshots/reporting.png'
87import screenshotVatReturns from '../../assets/images/screenshots/vat-returns.png'
8+ // import backgroundImage from '../../assets/images/background-features.jpg'
99
1010const features = [
1111 {
1212 title: 'Frontend',
13- description: 'Keep track of everyone’s salaries and whether or not they’ve been paid. Direct deposit not supported.',
14- image: screenshotPayroll,
13+ description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora in cum blanditiis? Qui omnis unde.',
14+ // image: screenshotPayroll,
15+ image: 'https://salient.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpayroll.517af4e7.png&w=1920&q=75',
1516 },
1617 {
1718 title: 'Backend',
18- description: 'All of your receipts organized into one place, as long as you don’t mind typing in the data by hand .',
19- image: screenshotExpenses ,
19+ description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora in cum blanditiis? Qui omnis unde .',
20+ image: 'https://salient.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpayroll.517af4e7.png&w=1920&q=75' ,
2021 },
2122 {
2223 title: 'Cloud',
23- description: 'We only sell our software to companies who don’t deal with VAT at all, so technically we do all the VAT stuff they need .',
24- image: screenshotVatReturns ,
24+ description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora in cum blanditiis? Qui omnis unde .',
25+ image: 'https://salient.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpayroll.517af4e7.png&w=1920&q=75' ,
2526 },
2627 {
2728 title: 'DX',
28- description: 'Easily export your data into an Excel spreadsheet where you can do whatever the hell you want with it .',
29- image: screenshotReporting ,
29+ description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora in cum blanditiis? Qui omnis unde .',
30+ image: 'https://salient.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpayroll.517af4e7.png&w=1920&q=75' ,
3031 },
3132]
3233
3334const tabIndex = ref(0)
34- const tabOrientation = ref('horizontal')
35- const selectedIndex = computed(() => tabIndex.value)
36- const featureIndex = computed(() => {
37- if (selectedIndex.value === 0) return 0
38- if (selectedIndex.value === 1) return 1
39- if (selectedIndex.value === 2) return 2
40- if (selectedIndex.value === 3) return 3
41- })
35+ const tabOrientation = ref('vertical')
36+
37+ const onMediaQueryChange = (event) => {
38+ tabOrientation.value = event.matches ? 'vertical' : 'horizontal'
39+ }
4240
4341onMounted(() => {
4442 const lgMediaQuery = window.matchMedia('(min-width: 1024px)')
4543
46- const onMediaQueryChange = (event) => {
47- tabOrientation.value = event.matches ? 'vertical' : 'horizontal'
48- }
49-
5044 onMediaQueryChange(lgMediaQuery)
5145 lgMediaQuery.addEventListener('change', onMediaQueryChange)
46+ })
5247
53- onUnmounted(() => {
54- lgMediaQuery.removeEventListener('change', onMediaQueryChange)
55- })
48+ onUnmounted(() => {
49+ lgMediaQuery.removeEventListener('change', onMediaQueryChange)
5650})
5751</script>
5852
@@ -61,21 +55,22 @@ onMounted(() => {
6155 <Container class="relative">
6256 <div class="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
6357 <h2 class="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
64- Everything you need to run your books .
58+ Build. Ship. Grow .
6559 </h2>
6660 <p class="mt-6 text-lg tracking-tight text-blue-100">
67- Well everything you need if you aren’t that picky about minor details like tax compliance.
61+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
62+ necessitatibus incidunt ut officiis explicabo inventore.
6863 </p>
6964 </div>
7065
7166 <TabGroup
7267 v-model="tabIndex"
7368 as="div"
7469 class="mt-16 grid grid-cols-1 items-center gap-y-2 pt-10 sm:gap-y-6 md:mt-20 lg:grid-cols-12 lg:pt-0"
75- : vertical="tabOrientation === 'vertical'"
70+ vertical
7671 >
7772 <TabList
78- class="-mx-4 flex overflow-x-auto pb-4 sm:mx-0 sm:overflow-visible sm:pb-0 lg:col-span-5"
73+ class="mt-16 -mx-4 flex overflow-x-auto pb-4 sm:mx-0 sm:overflow-visible sm:pb-0 lg:col-span-5"
7974 :class="selectedIndex === featureIndex
8075 ? 'bg-white lg:bg-white/10 lg:ring-1 lg:ring-inset lg:ring-white/10'
8176 : 'hover:bg-white/10 lg:hover:bg-white/5'"
@@ -147,7 +142,9 @@ onMounted(() => {
147142 </p>
148143 </div>
149144 <div class="mt-10 w-[45rem] overflow-hidden rounded-xl bg-slate-50 shadow-xl shadow-blue-900/20 sm:w-auto lg:mt-0 lg:w-[67.8125rem]">
150- <img :src="features[0].image" alt="" class="w-full">
145+ {{ screenshotExpenses }}
146+ <!-- <img src="/expenses.png" alt="" class="w-full"> -->
147+ <img src="https://salient.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpayroll.517af4e7.png&w=1920&q=75" alt="" class="w-full">
151148 </div>
152149 </TabPanel>
153150
0 commit comments