@@ -69,6 +83,12 @@ css({
backgroundColor: '{elements.backdrop.background}',
height: '{docus.header.height}',
+ '&.is-index.on-top': {
+ background: 'transparent',
+ borderColor: 'transparent',
+ backdropFilter: 'none',
+ },
+
'.container': {
display: 'grid',
height: '100%',
diff --git a/components/app/Ellipsis.vue b/components/app/Ellipsis.vue
deleted file mode 100644
index 4005225c4..000000000
--- a/components/app/Ellipsis.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-
-
-
-
-
-
-
diff --git a/components/landing/BlockHero.vue b/components/landing/BlockHero.vue
new file mode 100644
index 000000000..96bf36c80
--- /dev/null
+++ b/components/landing/BlockHero.vue
@@ -0,0 +1,177 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Hero Title
+
+
+
+
+
+ Hero default description.
+
+
+
+
+
+
+
+
+
+ {{ cta[0] }}
+
+
+ {{ secondary[0] }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/landing/Card.vue b/components/landing/Card.vue
new file mode 100644
index 000000000..cd13ec7ac
--- /dev/null
+++ b/components/landing/Card.vue
@@ -0,0 +1,188 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Card title
+
+
+
+
+ Card description
+
+
+
+
+
+
+
diff --git a/components/landing/CardGrid.vue b/components/landing/CardGrid.vue
new file mode 100644
index 000000000..efe0f848f
--- /dev/null
+++ b/components/landing/CardGrid.vue
@@ -0,0 +1,83 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/nuxt.config.ts b/nuxt.config.ts
index f14922d6d..c7249bdab 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -50,6 +50,11 @@ export default defineNuxtConfig({
prefix: '',
path: resolve('./components/docs'),
global: true
+ },
+ {
+ prefix: '',
+ path: resolve('./components/landing'),
+ global: true
}
],
pinceau: {
diff --git a/tokens.config.ts b/tokens.config.ts
index a19d369d6..ad8e9c16b 100644
--- a/tokens.config.ts
+++ b/tokens.config.ts
@@ -21,10 +21,10 @@ export default defineTheme({
}
},
color: {
- primary: theme.color.lightblue,
+ primary: theme.color.orange,
shadow: {
- initial: '{color.gray.300}',
- dark: 'black'
+ initial: '{color.gray.400}',
+ dark: '{color.black}'
}
// black: '14, 13, 13',
// gray: {
@@ -59,7 +59,7 @@ export default defineTheme({
body: {
backgroundColor: {
initial: '{color.gray.50}',
- dark: '{color.black}'
+ dark: '{color.gray.900}'
},
color: {
initial: '{color.gray.800}',
@@ -151,6 +151,118 @@ export default defineTheme({
color: '{color.gray.500}'
}
}
+ },
+ landing: {
+ blockHero: {
+ padding: {
+ initial: '{space.20} 0',
+ sm: '{space.24} 0',
+ lg: '{space.32} 0'
+ },
+ layout: {
+ gap: {
+ initial: '{space.16}',
+ xl: '{space.4}'
+ },
+ gridTemplateColumns: {
+ initial: 'none',
+ xl: 'repeat(12, minmax(0, 1fr))'
+ }
+ },
+ content: {
+ gridColumn: {
+ initial: 'auto',
+ xl: 'span 7 / span 7'
+ },
+ announce: {
+ textAlign: {
+ initial: 'center',
+ xl: 'start'
+ },
+ marginBottom: '{space.2}'
+ },
+ title: {
+ fontSize: {
+ initial: '{text.4xl.fontSize}',
+ sm: '{text.5xl.fontSize}',
+ lg: '{text.6xl.fontSize}'
+ },
+ lineHeight: {
+ initial: '{text.4xl.lineHeight}',
+ sm: '{text.5xl.lineHeight}',
+ lg: '{text.6xl.lineHeight}'
+ },
+ color: '{elements.text.primary.color.static}',
+ fontWeight: '{fontWeight.semibold}',
+ letterSpacing: '{letterSpacing.tight}',
+ paddingX: {
+ initial: '{space.8}',
+ xl: '{space.0}'
+ },
+ textAlign: {
+ initial: 'center',
+ xl: 'start'
+ },
+ marginBottom: '{space.8}',
+ gradientText: {
+ initial: 'linear-gradient(114deg, {color.gray.900} 10%, {color.gray.600} 54%, {color.gray.500})',
+ dark: 'linear-gradient(114deg, {color.gray.600} 10%, {color.gray.200} 54%, {color.gray.50})'
+ },
+ mixBlendMode: 'normal'
+ },
+ description: {
+ textAlign: {
+ initial: 'center',
+ xl: 'start'
+ },
+ marginBottom: '{space.12}',
+ fontSize: {
+ initial: '{text.lg.fontSize}',
+ lg: '{text.xl.fontSize}'
+ },
+ lineHeight: {
+ initial: '{text.lg.lineHeight}',
+ lg: '{text.xl.lineHeight}'
+ },
+ color: '{elements.text.secondary.color.static}',
+ paddingX: '{space.2}',
+ mixBlendMode: {
+ initial: 'multiply',
+ dark: 'hard-light'
+ }
+ },
+ extra: {
+ justifyContent: {
+ initial: 'center',
+ xl: 'flex-start'
+ },
+ marginBottom: '{space.16}'
+ },
+ actions: {
+ flexDirection: {
+ initial: 'column',
+ sm: 'row'
+ },
+ gap: {
+ initial: '{space.2}',
+ sm: '{space.3}'
+ },
+ justifyContent: {
+ initial: 'center',
+ xl: 'flex-start'
+ },
+ cta: {
+ marginBottom: '0px'
+ }
+ }
+ },
+ support: {
+ gridColumn: {
+ initial: 'auto',
+ xl: 'span 5 / span 5'
+ }
+ }
+ }
}
},
typography: {
@@ -193,10 +305,114 @@ export default defineTheme({
},
background: {
initial: 'rgba({temp.color.gray.50}, 0.8)',
- dark: 'rgba({temp.color.black}, 0.8)'
+ dark: 'rgba({temp.color.gray.900}, 0.8)'
}
- }
+ },
// border
// surface
+ terminal: {
+ backgroundColor: {
+ initial: 'rgba({temp.color.gray.200}, 0.7)',
+ dark: 'rgba({temp.color.gray.900}, 0.7)'
+ },
+ boxShadow: 'inset 0px 0px 0px 1px rgba({temp.color.gray.600}, 0.3), {shadow.2xl}',
+ borderWidth: '0px',
+ header: {
+ borderBottomWidth: '0px',
+ boxShadow: 'inset 0px -1px 0px 0px rgba({temp.color.gray.600}, 0.3)'
+ },
+ window: {
+ mixBlendMode: {
+ initial: 'normal',
+ dark: 'difference'
+ }
+ }
+ },
+ card: {
+ padding: '{space.8}',
+ borderRadius: '{radii.xl}',
+ borderWidth: '0px',
+ borderStyle: 'solid',
+ borderColor: '{color.gray.700}',
+ backgroundColor: {
+ initial: 'rgba({temp.color.gray.50}, 0.2)',
+ dark: 'rgba({temp.color.gray.900}, 0.2)'
+ },
+ backgroundImage: 'none',
+ backdropFilter: '{elements.backdrop.filter}',
+ boxShadow: 'inset 0.25px 0.5px 0px hsla(0,0%,100%,.1), inset -0.25px 0px 0px hsla(0,0%,100%,.1), {shadow.xs}',
+ wrapper: {
+ backgroundColor: 'transparent',
+ backgroundImage: {
+ initial: 'linear-gradient(180deg, rgba({temp.color.gray.50}, 0.2) 50%, rgba({temp.color.gray.100}, 0.9) 100%)',
+ dark: 'linear-gradient(180deg, rgba({temp.color.black}, 0.5) 50%, rgba({temp.color.gray.900}, 0.9) 100%)'
+ }
+ },
+ noise: {
+ opacity: {
+ initial: '0.3',
+ dark: '0.2'
+ }
+ },
+ icon: {
+ marginBottom: '{space.4}',
+ width: '{space.6}',
+ height: '{space.6}',
+ padding: '{space.3}',
+ borderRadius: '{radii.xs}',
+ backgroundColor: {
+ initial: 'rgba({temp.color.gray.100}, 0.5)',
+ dark: 'rgba({temp.color.gray.900}, 0.2)'
+ },
+ boxShadow: 'inset -0.5px 0.5px 0px hsla(0,0%,100%,.1), inset 0.5px 0px 0px hsla(0,0%,100%,.1)'
+ },
+ title: {
+ marginBottom: '{space.2}',
+ fontSize: '{text.2xl.fontSize}',
+ lineHeight: '{text.2xl.lineHeight}',
+ fontWeight: '{fontWeight.medium}',
+ letterSpacing: '{letterSpacing.tight}',
+ color: '{elements.text.primary.color.static}'
+ },
+ description: {
+ fontSize: '{text.sm.fontSize}',
+ lineHeight: '{text.sm.lineHeight}',
+ fontWeight: '{fontWeight.medium}',
+ color: '{elements.text.secondary.color.static}'
+ }
+ },
+ cardGrid: {
+ paddingBottom: {
+ initial: '{space.20}',
+ sm: '{space.24}',
+ md: '{space.32}'
+ },
+ margin: '{space.24} 0',
+ title: {
+ fontSize: {
+ initial: '{text.3xl.fontSize}',
+ sm: '{text.4xl.fontSize}'
+ },
+ lineHeight: {
+ initial: '{text.3xl.lineHeight}',
+ sm: '{text.4xl.lineHeight}'
+ },
+ marginBottom: '{space.8}',
+ fontWeight: '{fontWeight.bold}',
+ letterSpacing: '{letterSpacing.tight}',
+ color: '{elements.text.primary.color.static}'
+ },
+ layout: {
+ gridTemplateColumns: {
+ initial: 'none',
+ sm: 'repeat(2, minmax(0, 1fr))',
+ lg: 'repeat(3, minmax(0, 1fr))'
+ },
+ gap: {
+ initial: '{space.4}',
+ '2xl': '{space.6}'
+ }
+ }
+ }
}
})