Skip to content

Commit f2b3a0a

Browse files
carwackcarwack
authored
feat[90]: Clean up duplicate content on landings page (#91)
* feat: clean up duplicate content on landings page * refactor: change namecasing * fix: add some more margin to be in line with other elements
1 parent 965ac96 commit f2b3a0a

File tree

4 files changed

+61
-61
lines changed

4 files changed

+61
-61
lines changed

‎components/home/component-api.server.vue renamed to ‎components/home/ComponentApi.server.vue

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,59 @@
1+
<script setup lang="ts">
2+
import { chakra, useColorModeValue } from '@chakra-ui/vue-next';
3+
import AccessibilityIcon from '../icons/accessibility-icon';
4+
import ComposableIcon from '../icons/composable-icon';
5+
import ThemeIcon from '../icons/theme-icon';
6+
import StateMachineIcon from '../icons/state-machine-icon';
7+
8+
const features = [
9+
{
10+
icon: AccessibilityIcon,
11+
title: 'Accessibility',
12+
description:
13+
'Chakra UI strictly follows WAI-ARIA standards for all components.'
14+
},
15+
{
16+
icon: ThemeIcon,
17+
title: 'Design System friendly',
18+
description:
19+
'Customize any part of our components to match your design needs.'
20+
},
21+
{
22+
icon: StateMachineIcon,
23+
title: 'State Machine Driven',
24+
description:
25+
'Built with UI state machines for predictable and reliable UI. Powered by Zag.js'
26+
},
27+
{
28+
icon: ComposableIcon,
29+
title: 'Composable',
30+
description:
31+
'Designed with composition in mind. Compose new components with ease.'
32+
}
33+
];
34+
</script>
35+
136
<template>
2-
<c-container max-w="8xl" my="20">
3-
<c-grid :template-columns="{ base: '1fr', sm: '1.5fr 1fr' }" max-w="50%">
4-
<c-stack spacing="5">
37+
<CContainer max-w="8xl" mt="10" mb="20">
38+
<CGrid :template-columns="{ base: '1fr', sm: '1.5fr 1fr' }" max-w="50%">
39+
<CStack spacing="5">
540
<chakra.p
641
:color="useColorModeValue('emerald.600', 'emerald.50').value"
742
font-weight="bold"
843
>Powerful Developer Experience</chakra.p
944
>
10-
<c-heading> Develop with an open, extendable API </c-heading>
45+
<CHeading> Develop with an open, extendable API </CHeading>
1146
<chakra.p>
1247
Chakra UI Vue components can be customized at any level - whether it's
1348
at the component level, or the theme level. You can also extend the
1449
components to add new features, or override existing ones.
1550
</chakra.p>
16-
<c-grid
51+
<CGrid
1752
gap="4"
1853
:w="{ base: 'full', sm: 'fit-content' }"
1954
:template-columns="{ base: 'repeat(1, 1fr)', sm: 'repeat(4, auto)' }"
2055
>
21-
<c-stack
56+
<CStack
2257
v-for="(feature, i) in features"
2358
:key="i"
2459
:border="
@@ -57,45 +92,10 @@
5792
<chakra.p>
5893
{{ feature.description }}
5994
</chakra.p>
60-
</c-stack>
61-
</c-grid>
62-
</c-stack>
63-
<c-center />
64-
</c-grid>
65-
</c-container>
95+
</CStack>
96+
</CGrid>
97+
</CStack>
98+
<CCenter />
99+
</CGrid>
100+
</CContainer>
66101
</template>
67-
68-
<script setup lang="ts">
69-
import { chakra, useColorModeValue } from '@chakra-ui/vue-next';
70-
import AccessibilityIcon from '../icons/accessibility-icon';
71-
import ComposableIcon from '../icons/composable-icon';
72-
import ThemeIcon from '../icons/theme-icon';
73-
import StateMachineIcon from '../icons/state-machine-icon';
74-
75-
const features = [
76-
{
77-
icon: AccessibilityIcon,
78-
title: 'Accessibility',
79-
description:
80-
'Chakra UI strictly follows WAI-ARIA standards for all components.'
81-
},
82-
{
83-
icon: ThemeIcon,
84-
title: 'Design System friendly',
85-
description:
86-
'Customize any part of our components to match your design needs.'
87-
},
88-
{
89-
icon: StateMachineIcon,
90-
title: 'State Machine Driven',
91-
description:
92-
'Built with UI state machines for predictable and reliable UI. Powered by Zag.js'
93-
},
94-
{
95-
icon: ComposableIcon,
96-
title: 'Composable',
97-
description:
98-
'Designed with composition in mind. Compose new components with ease.'
99-
}
100-
];
101-
</script>

‎components/home/DiscordHero.server.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { chakra, CBox, CButton, CFlex, CIcon } from '@chakra-ui/vue-next';
1212
color="white"
1313
bg="discord.accessible"
1414
:h="['auto', 'auto', 'auto', 40]"
15-
:px="[4, 10, 12]"
15+
:px="[8, 20, 24]"
1616
:mt="[4, 10, 10]"
1717
>
1818
<CFlex
@@ -52,6 +52,9 @@ import { chakra, CBox, CButton, CFlex, CIcon } from '@chakra-ui/vue-next';
5252
bg="white"
5353
shadow="lg"
5454
:w="{ base: '100%', lg: 'auto' }"
55+
:_hover="{
56+
backgroundColor: 'whiteAlpha.900'
57+
}"
5558
>
5659
Join the #Chakra Discord!
5760
</CButton>

‎layouts/default.vue

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,20 @@ const color = useColorModeValue('gray.700', 'white');
1414
<TopNavigation />
1515
<chakra.div max-w="8xl" mx="auto" d="flex">
1616
<!-- Sidebar Navigation -->
17-
<chakra.div :display="{ base: 'none', lg: 'block' }" position="fixed" z-index="30" bottom="0" top="6rem"
17+
<chakra.div
18+
:display="{ base: 'none', lg: 'block' }" position="fixed" z-index="30" bottom="0" top="6rem"
1819
left="max(0px, calc(50% - 45rem))" right="auto" width="19.5rem" pb="10" px="8" overflow-y="auto"
1920
overscroll-behavior="contain">
20-
<sidebar />
21+
<Sidebar />
2122
</chakra.div>
2223
<chakra.main :pl="{ base: 4, lg: '19.5rem' }" pt="4" pb="24" :pr="{ base: 4, xl: 16 }" class="chakra-prose">
2324
<chakra.div :mr="{ xl: '15.5rem' }" :pl="{ base: 2, lg: '1rem' }">
2425
<slot />
2526

26-
<c-h-stack align-items="center" mt="6">
27-
<c-icon name="info" />
27+
<CHStack align-items="center" mt="6">
28+
<CIcon name="info" />
2829
<p>Edit this page on GitHub</p>
29-
</c-h-stack>
30+
</CHStack>
3031
</chakra.div>
3132
<!-- <table-of-contents /> -->
3233
</chakra.main>

‎pages/index.vue

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,16 @@
22
import { chakra } from '@chakra-ui/vue-next';
33
import StartHero from '../components/home/StartHero.server.vue';
44
import { siteDescription, siteName } from '~/config/site-config';
5+
6+
const ComponentApi = defineAsyncComponent(
7+
() => import('../components/home/ComponentApi.server.vue')
8+
);
59
const DiscordHero = defineAsyncComponent(
610
() => import('../components/home/DiscordHero.server.vue')
711
);
812
const Footer = defineAsyncComponent(
913
() => import('../components/home/Footer.server.vue')
1014
);
11-
const HomeFeatures = defineAsyncComponent(
12-
() => import('../components/home/features.server.vue')
13-
);
14-
15-
const ComponentApi = defineAsyncComponent(
16-
() => import('../components/home/component-api.server.vue')
17-
);
1815
1916
definePageMeta({
2017
layout: 'home'
@@ -34,7 +31,6 @@ useHead({
3431
<template>
3532
<chakra.main :min-h="['auto', 'auto', '100vh']" w="100%">
3633
<StartHero />
37-
<HomeFeatures />
3834
<ComponentApi />
3935
<DiscordHero />
4036
<Footer />

0 commit comments

Comments
 (0)