Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit a9dbdda

Browse files
carwackcarwack
committed
feat: fix width issue and make pilershero component
1 parent 0991c1b commit a9dbdda

File tree

5 files changed

+113
-84
lines changed

5 files changed

+113
-84
lines changed

‎website/src/components/Navbar.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<chakra.nav
33
h="60px"
4-
w="100vw"
4+
w="100%"
55
px="4"
66
d="flex"
77
position="fixed"

‎website/src/components/home/Hero.vue

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
<template>
22
<chakra.header
33
pos="relative"
4-
:min-h="{ base: 'auto', sm: '100vh' }"
4+
bg="white"
5+
:min-h="{ base: 'auto', sm: '90vh' }"
56
:pt="{ base: '3rem', sm: '150px' }"
7+
:px="[4, 10, 12]"
8+
:pb="{ base: '3rem', sm: '0' }"
9+
borderBottom="1px solid"
610
>
711
<chakra.div>
812
<chakra.h1
@@ -15,7 +19,7 @@
1519
lineHeight="1.2"
1620
>
1721
Build accessible Vue apps
18-
<chakra.span color="green.500"> with speed </chakra.span>
22+
<chakra.span color="#35845E" px="5px">with speed </chakra.span>
1923
</chakra.h1>
2024
</chakra.div>
2125
<chakra.p
@@ -28,7 +32,10 @@
2832
Chakra UI Vue Next is a simple modular and accessible component library
2933
that gives you the building blocks to build Vue applications with speed.
3034
</chakra.p>
31-
<CFlex flex-dir="row">
35+
<CFlex
36+
flex-dir="row"
37+
:justify-content="{ base: 'center', sm: 'flex-start' }"
38+
>
3239
<CButton
3340
as="a"
3441
text-decoration="none"
@@ -37,6 +44,7 @@
3744
target="_blank"
3845
rel="noopener noreferrer"
3946
color-scheme="green"
47+
bg="#35845E"
4048
>
4149
Get started
4250
</CButton>
@@ -51,6 +59,7 @@
5159
variant="outline"
5260
color-scheme="green"
5361
size="lg"
62+
color="#35845E"
5463
>
5564
Github
5665
</CButton>

‎website/src/components/home/PilersHero.vue

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<template>
2+
<CFlex
3+
as="section"
4+
:flex-dir="['column', 'column', 'row']"
5+
font-family="body"
6+
bg="green.50"
7+
:pl="[4, 10, 12]"
8+
:py="[4, 10, 10]"
9+
>
10+
<chakra.div
11+
d="grid"
12+
:grid-template-columns="['auto', 'auto', 'repeat(3, 1fr)']"
13+
:style="{ gap: '1.5rem' }"
14+
border="1px solid"
15+
bg="white"
16+
>
17+
<CBox m="3">
18+
<CFlex align-items="center" mb="5">
19+
<CFlex
20+
justify-content="center"
21+
align-items="center"
22+
mr="5"
23+
bg="vue.400"
24+
w="50px"
25+
h="50px"
26+
rounded="full"
27+
>
28+
<IconAccessibilityAlt />
29+
</CFlex>
30+
<chakra.h2 font-size="md"> Accessible </chakra.h2>
31+
</CFlex>
32+
Chakra UI strictly follows WAI-ARIA standards. All components come with
33+
proper attributes and keyboard interactions out of the box.
34+
</CBox>
35+
<CBox m="3">
36+
<CFlex align-items="center" mb="5">
37+
<CFlex
38+
justify-content="center"
39+
align-items="center"
40+
mr="5"
41+
bg="vue.400"
42+
w="50px"
43+
h="50px"
44+
rounded="full"
45+
>
46+
<ColorPalette />
47+
</CFlex>
48+
<chakra.h2 font-size="md"> Themeable </chakra.h2>
49+
</CFlex>
50+
Quickly and easily reference values from your theme throughout your
51+
entire application, on any component.
52+
</CBox>
53+
<CBox m="3">
54+
<CFlex align-items="center" mb="5">
55+
<CFlex
56+
justify-content="center"
57+
align-items="center"
58+
mr="5"
59+
bg="vue.400"
60+
w="50px"
61+
h="50px"
62+
rounded="full"
63+
>
64+
<Cube />
65+
</CFlex>
66+
<chakra.h2 font-size="md"> Composable </chakra.h2>
67+
</CFlex>
68+
Components were built with composition in mind. You can leverage any
69+
component to create new things.
70+
</CBox>
71+
</chakra.div>
72+
</CFlex>
73+
</template>
74+
75+
<script lang="ts">
76+
import { defineComponent } from 'vue'
77+
import { CFlex, CBox } from '@chakra-ui/vue-next'
78+
79+
import IconAccessibilityAlt from '/@vite-icons/carbon/accessibility-alt'
80+
import ColorPalette from '/@vite-icons/carbon/color-palette'
81+
import Cube from '/@vite-icons/carbon/cube'
82+
83+
export default defineComponent({
84+
name: 'PilersHero',
85+
components: {
86+
CFlex,
87+
CBox,
88+
IconAccessibilityAlt,
89+
ColorPalette,
90+
Cube,
91+
},
92+
})
93+
</script>

‎website/src/pages/index.vue

Lines changed: 6 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -2,101 +2,28 @@
22
<Navbar />
33
<chakra.main
44
:min-h="['auto', 'auto', '100vh']"
5-
w="100vw"
6-
:px="[4, 10, 12]"
5+
w="100%"
76
pt="60px"
7+
bg="green.50"
8+
display="block"
89
>
910
<Hero />
10-
<CFlex
11-
as="section"
12-
py="10"
13-
:flex-dir="['column', 'column', 'row']"
14-
font-family="body"
15-
>
16-
<chakra.div
17-
d="grid"
18-
:grid-template-columns="['auto', 'auto', 'repeat(3, 1fr)']"
19-
:style="{ gap: '1.5rem' }"
20-
>
21-
<CBox m="3">
22-
<CFlex align-items="center" mb="5">
23-
<CFlex
24-
justify-content="center"
25-
align-items="center"
26-
mr="5"
27-
bg="vue.400"
28-
w="50px"
29-
h="50px"
30-
rounded="full"
31-
>
32-
<IconAccessibilityAlt />
33-
</CFlex>
34-
<chakra.h2 font-size="md"> Accessible </chakra.h2>
35-
</CFlex>
36-
Chakra UI strictly follows WAI-ARIA standards. All components come
37-
with proper attributes and keyboard interactions out of the box.
38-
</CBox>
39-
<CBox m="3">
40-
<CFlex align-items="center" mb="5">
41-
<CFlex
42-
justify-content="center"
43-
align-items="center"
44-
mr="5"
45-
bg="vue.400"
46-
w="50px"
47-
h="50px"
48-
rounded="full"
49-
>
50-
<ColorPalette />
51-
</CFlex>
52-
<chakra.h2 font-size="md"> Themeable </chakra.h2>
53-
</CFlex>
54-
Quickly and easily reference values from your theme throughout your
55-
entire application, on any component.
56-
</CBox>
57-
<CBox m="3">
58-
<CFlex align-items="center" mb="5">
59-
<CFlex
60-
justify-content="center"
61-
align-items="center"
62-
mr="5"
63-
bg="vue.400"
64-
w="50px"
65-
h="50px"
66-
rounded="full"
67-
>
68-
<Cube />
69-
</CFlex>
70-
<chakra.h2 font-size="md"> Composable </chakra.h2>
71-
</CFlex>
72-
Components were built with composition in mind. You can leverage any
73-
component to create new things.
74-
</CBox>
75-
</chakra.div>
76-
</CFlex>
11+
<PilersHero />
7712
</chakra.main>
7813
</template>
7914

8015
<script lang="ts">
8116
import { defineComponent } from 'vue'
82-
import { CFlex, CBox } from '@chakra-ui/vue-next'
8317
import Hero from '../components/home/Hero.vue'
18+
import PilersHero from '../components/home/PilersHero.vue'
8419
import Navbar from '../components/Navbar.vue'
8520
86-
import IconAccessibilityAlt from '/@vite-icons/carbon/accessibility-alt'
87-
import ColorPalette from '/@vite-icons/carbon/color-palette'
88-
import Cube from '/@vite-icons/carbon/cube'
89-
9021
export default defineComponent({
9122
name: 'Index',
9223
components: {
9324
Hero,
25+
PilersHero,
9426
Navbar,
95-
CFlex,
96-
CBox,
97-
IconAccessibilityAlt,
98-
ColorPalette,
99-
Cube,
10027
},
10128
})
10229
</script>

‎website/src/styles/main.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import './markdown.css';
22

3-
3+
body { overflow-y: scroll; }
44
h1,
55
h2,
66
h3,

0 commit comments

Comments
 (0)