feat: update landing page

This commit is contained in:
Wlad Meixner 2023-01-07 22:29:39 +01:00
parent 185166a5c1
commit 535a33f9f1
23 changed files with 384 additions and 76 deletions

View File

@ -32,7 +32,10 @@
"@bulatdashiev/svelte-slider": "^1.0.3",
"@poppanator/sveltekit-svg": "^2.0.2",
"@sveltejs/adapter-node": "^1.1.0",
"autoprefixer": "^10.4.13",
"open-props": "^1.5.3",
"postcss": "^8.4.21",
"postcss-jit-props": "^1.0.9",
"sass": "^1.57.1"
}
}

View File

@ -8,10 +8,13 @@ specifiers:
'@sveltejs/kit': ^1.0.0
'@typescript-eslint/eslint-plugin': ^5.45.0
'@typescript-eslint/parser': ^5.45.0
autoprefixer: ^10.4.13
eslint: ^8.28.0
eslint-config-prettier: ^8.5.0
eslint-plugin-svelte3: ^4.0.0
open-props: ^1.5.3
postcss: ^8.4.21
postcss-jit-props: ^1.0.9
prettier: ^2.8.0
prettier-plugin-svelte: ^2.8.1
sass: ^1.57.1
@ -25,7 +28,10 @@ dependencies:
'@bulatdashiev/svelte-slider': 1.0.3
'@poppanator/sveltekit-svg': 2.0.2_svelte@3.55.0+vite@4.0.4
'@sveltejs/adapter-node': 1.1.0_@sveltejs+kit@1.0.7
autoprefixer: 10.4.13_postcss@8.4.21
open-props: 1.5.3
postcss: 8.4.21
postcss-jit-props: 1.0.9_postcss@8.4.21
sass: 1.57.1
devDependencies:
@ -39,7 +45,7 @@ devDependencies:
prettier: 2.8.1
prettier-plugin-svelte: 2.9.0_ajxj753sv7dbwexjherrch25ta
svelte: 3.55.0
svelte-check: 2.10.3_sass@1.57.1+svelte@3.55.0
svelte-check: 2.10.3_yhetuckw724ua6smzvjvp7z3um
tslib: 2.4.1
typescript: 4.9.4
vite: 4.0.4_sass@1.57.1
@ -661,6 +667,22 @@ packages:
engines: {node: '>=8'}
dev: true
/autoprefixer/10.4.13_postcss@8.4.21:
resolution: {integrity: sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==}
engines: {node: ^10 || ^12 || >=14}
hasBin: true
peerDependencies:
postcss: ^8.1.0
dependencies:
browserslist: 4.21.4
caniuse-lite: 1.0.30001442
fraction.js: 4.2.0
normalize-range: 0.1.2
picocolors: 1.0.0
postcss: 8.4.21
postcss-value-parser: 4.2.0
dev: false
/balanced-match/1.0.2:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@ -691,6 +713,17 @@ packages:
dependencies:
fill-range: 7.0.1
/browserslist/4.21.4:
resolution: {integrity: sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==}
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
hasBin: true
dependencies:
caniuse-lite: 1.0.30001442
electron-to-chromium: 1.4.284
node-releases: 2.0.8
update-browserslist-db: 1.0.10_browserslist@4.21.4
dev: false
/buffer-crc32/0.2.13:
resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
dev: true
@ -711,6 +744,10 @@ packages:
engines: {node: '>=6'}
dev: true
/caniuse-lite/1.0.30001442:
resolution: {integrity: sha512-239m03Pqy0hwxYPYR5JwOIxRJfLTWtle9FV8zosfV5pHg+/51uD4nxcUlM8+mWWGfwKtt8lJNHnD3cWw9VZ6ow==}
dev: false
/chalk/4.1.2:
resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
engines: {node: '>=10'}
@ -868,6 +905,10 @@ packages:
domhandler: 4.3.1
dev: false
/electron-to-chromium/1.4.284:
resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
dev: false
/entities/2.2.0:
resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
dev: false
@ -905,6 +946,11 @@ packages:
'@esbuild/win32-ia32': 0.16.14
'@esbuild/win32-x64': 0.16.14
/escalade/3.1.1:
resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
engines: {node: '>=6'}
dev: false
/escape-string-regexp/4.0.0:
resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
engines: {node: '>=10'}
@ -1120,6 +1166,10 @@ packages:
resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
dev: true
/fraction.js/4.2.0:
resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
dev: false
/fs.realpath/1.0.0:
resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
@ -1433,10 +1483,19 @@ packages:
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
dev: true
/node-releases/2.0.8:
resolution: {integrity: sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==}
dev: false
/normalize-path/3.0.0:
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
engines: {node: '>=0.10.0'}
/normalize-range/0.1.2:
resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
engines: {node: '>=0.10.0'}
dev: false
/nth-check/2.1.1:
resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
dependencies:
@ -1515,8 +1574,22 @@ packages:
resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
engines: {node: '>=8.6'}
/postcss/8.4.20:
resolution: {integrity: sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==}
/postcss-jit-props/1.0.9_postcss@8.4.21:
resolution: {integrity: sha512-sMAo7eVF480LnEGG7G0uS+4L0wRZoXiLthxJePUqo4gHrzu17hU5obAdiscjp/aZag9TqokU6dpI1zHyDGxslA==}
engines: {node: '>=10.0.0'}
peerDependencies:
postcss: ^8.2.8
dependencies:
postcss: 8.4.21
tiny-glob: 0.2.9
dev: false
/postcss-value-parser/4.2.0:
resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
dev: false
/postcss/8.4.21:
resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
engines: {node: ^10 || ^12 || >=14}
dependencies:
nanoid: 3.3.4
@ -1732,7 +1805,7 @@ packages:
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
engines: {node: '>= 0.4'}
/svelte-check/2.10.3_sass@1.57.1+svelte@3.55.0:
/svelte-check/2.10.3_yhetuckw724ua6smzvjvp7z3um:
resolution: {integrity: sha512-Nt1aWHTOKFReBpmJ1vPug0aGysqPwJh2seM1OvICfM2oeyaA62mOiy5EvkXhltGfhCcIQcq2LoE0l1CwcWPjlw==}
hasBin: true
peerDependencies:
@ -1745,7 +1818,7 @@ packages:
picocolors: 1.0.0
sade: 1.8.1
svelte: 3.55.0
svelte-preprocess: 4.10.7_cfliyikhlimajcn5n7qvd3jsli
svelte-preprocess: 4.10.7_d234st6gzj3vy6xs53hyho7taa
typescript: 4.9.4
transitivePeerDependencies:
- '@babel/core'
@ -1768,7 +1841,7 @@ packages:
dependencies:
svelte: 3.55.0
/svelte-preprocess/4.10.7_cfliyikhlimajcn5n7qvd3jsli:
/svelte-preprocess/4.10.7_d234st6gzj3vy6xs53hyho7taa:
resolution: {integrity: sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==}
engines: {node: '>= 9.11.2'}
requiresBuild: true
@ -1813,6 +1886,7 @@ packages:
'@types/sass': 1.43.1
detect-indent: 6.1.0
magic-string: 0.25.9
postcss: 8.4.21
sass: 1.57.1
sorcery: 0.10.0
strip-indent: 3.0.0
@ -1900,6 +1974,17 @@ packages:
dependencies:
busboy: 1.6.0
/update-browserslist-db/1.0.10_browserslist@4.21.4:
resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==}
hasBin: true
peerDependencies:
browserslist: '>= 4.21.0'
dependencies:
browserslist: 4.21.4
escalade: 3.1.1
picocolors: 1.0.0
dev: false
/uri-js/4.4.1:
resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
dependencies:
@ -1932,7 +2017,7 @@ packages:
optional: true
dependencies:
esbuild: 0.16.14
postcss: 8.4.20
postcss: 8.4.21
resolve: 1.22.1
rollup: 3.9.1
sass: 1.57.1

View File

@ -13,8 +13,9 @@
display: flex;
align-items: center;
justify-content: space-between;
font-size: 1rem;
color: var(--color-background);
font-size: 1.25rem;
font-weight: bold;
color: rgba(var(--color-background-raw), 0.8);
outline: none;
border: none;
text-transform: uppercase;
@ -23,6 +24,8 @@
background-color: var(--color-primary);
transition: all 0.2s var(--easing-default);
text-shadow: none !important;
&:hover  {
background-color: rgba(var(--color-primary-raw), 0.5);
color: var(--color-light);

View File

@ -0,0 +1,17 @@
<div class="container"><slot /></div>
<style lang="scss" global>
@import './src/lib/style/app.scss';
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--size-10);
:global(> *) {
width: 100%;
max-width: $max-page-width;
}
}
</style>

View File

@ -0,0 +1,50 @@
<div class="footer-container">
<span class="legal">© ComplAI - {new Date().getFullYear()}</span>
<div class="menu">
<a href="/privacy">Privacy Policy</a>
<a href="/uses">Uses</a>
</div>
</div>
<style lang="scss">
@import './src/lib/style/app.scss';
.footer-container {
border-top: 1px solid var(--color-primary);
width: 100%;
max-width: $max-page-width;
display: flex;
flex-direction: column-reverse;
justify-content: center;
align-items: center;
padding: 1.5rem 0;
margin-bottom: 1.5rem;
padding-top: var(--size-10);
margin-top: var(--size-10);
@media (min-width: $breakpoint-small) {
flex-direction: row;
justify-content: space-between;
padding: 2rem 0;
}
}
.legal {
opacity: 0.5;
}
.menu {
padding-bottom: 1.5rem;
@media (min-width: $breakpoint-small) {
padding-bottom: 0;
}
a {
padding-left: 1.5rem;
&:first-child {
padding-left: 0;
}
}
}
</style>

View File

@ -3,6 +3,8 @@
import IconSun from '$lib/icons/sun.svg';
import IconHash from '$lib/icons/hash.svg';
import Button from './Button.svelte';
import HeaderIcon from '$lib/icons/logo-header.svg';
import Tag from './Tag.svelte';
const onToggleDarkMode = () => {
const isDarkMode = document.body.classList.contains('dark-mode');
@ -19,11 +21,15 @@
<header>
<div class="inner-head">
<a class="logo" href="/">
<img src="/logo.svg" width="150" />
</a>
<nav />
<nav class="right" />
<nav class="left">
<a class="logo" href="/">
<HeaderIcon width="180" />
</a>
</nav>
<div />
<nav class="right">
<Tag>BETA</Tag>
</nav>
</div>
</header>
@ -31,7 +37,9 @@
@import '$lib/style/app.scss';
header {
z-index: 2;
width: 100%;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
@ -41,8 +49,12 @@
border-bottom: 1px solid rgba(var(--color-foreground-raw), 0.1);
}
.left {
justify-self: flex-start;
}
.right {
align-items: flex-end;
justify-self: flex-end;
}
.inner-head {
@ -51,7 +63,7 @@
justify-content: space-between;
justify-items: center;
align-items: center;
padding: 1.5rem var(--default-pd) 1rem;
padding: 1rem 0;
width: 100%;
max-width: $max-page-width;
@ -83,7 +95,6 @@
align-items: center;
font-weight: normal;
padding: 0 $space-base * 4;
text-transform: uppercase;
color: var(--color-foreground);
cursor: pointer;
@ -133,12 +144,7 @@
a.logo {
:global(svg) {
fill: currentColor;
stroke: transparent;
transition: fill 0.2 var(--easing-default);
&:hover {
fill: var(--color-primary);
}
height: 2.8rem;
@media (min-width: $breakpoint-medium) {

View File

@ -30,6 +30,7 @@ Codepen: https://codepen.io/supah/
</div>
<style lang="scss">
@use 'sass:math';
$radius: 80px;
svg {
@ -49,8 +50,8 @@ Codepen: https://codepen.io/supah/
width: $radius;
height: $radius;
position: absolute;
top: calc(50% - #{$radius/2});
left: calc(50% - #{$radius/2});
top: calc(50% - math.div($radius, 2));
left: calc(50% - math.div($radius, 2));
&:before {
background: var(--color-primary);
@ -117,7 +118,7 @@ Codepen: https://codepen.io/supah/
@keyframes y-axis-lateral {
0% {
transform: translateY($radius/5);
transform: translateY(math.div($radius, 5));
}
100% {
transform: translateY(-$radius);

View File

@ -1,7 +1,7 @@
<script lang="ts">
export let stepCount: number = 4;
export let currentStep: number = 2;
export let enabledStep: number = 3;
export let currentStep: number = 4;
export let enabledStep: number = 4;
const onStepClick = (idx: number) => {
if (idx >= enabledStep) {

View File

@ -4,7 +4,7 @@
type TagType = 'primary' | 'secondary' | 'disabled';
export let kind: TagType = 'disabled';
export let kind: TagType = 'primary';
const colorForCategory = (type: TagType) => {
switch (type) {
@ -45,7 +45,8 @@
white-space: nowrap;
padding: 0.3rem 0.75rem;
padding: 0.3rem 0.75rem;
border-radius: 0.2rem;
border-radius: var(--size-2);
font-weight: bold;
color: rgba(255, 255, 255, 0.6);
margin-right: 0.75rem;

View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 266.65 74.73"><defs><style>.cls-1{fill:none;stroke:#53bc83;stroke-miterlimit:10;stroke-width:3px;}.cls-2{fill:#53bc83;}</style></defs><g id="Layer_1-2"><g><path class="cls-2" d="m85.33,26.93c1.56-1.07,3.52-1.6,5.87-1.6,2.66,0,4.82.68,6.48,2.04,1.66,1.36,2.81,3.21,3.45,5.57l3.97-1.05c-.89-3.14-2.52-5.64-4.88-7.5s-5.37-2.78-9.02-2.78c-3.14,0-5.81.69-8,2.08-2.19,1.39-3.86,3.32-5.01,5.79s-1.72,5.33-1.72,8.57.57,6.1,1.72,8.57,2.82,4.4,5.01,5.79c2.19,1.39,4.86,2.08,8,2.08,3.65,0,6.66-.93,9.02-2.78s3.99-4.35,4.88-7.5l-3.97-1.05c-.64,2.34-1.79,4.19-3.45,5.56-1.66,1.37-3.82,2.05-6.48,2.05-2.35,0-4.32-.54-5.9-1.61s-2.76-2.56-3.55-4.47c-.79-1.91-1.18-4.12-1.16-6.63.01-2.51.42-4.73,1.21-6.64s1.96-3.4,3.53-4.47Z"/><path class="cls-2" d="m126.12,31.09c-1.71-1.07-3.75-1.6-6.12-1.6s-4.32.52-6.03,1.57-3.03,2.51-3.97,4.38c-.94,1.88-1.4,4.05-1.4,6.52s.46,4.62,1.38,6.5c.92,1.88,2.23,3.35,3.93,4.42,1.7,1.07,3.73,1.6,6.08,1.6s4.38-.53,6.09-1.59,3.02-2.53,3.95-4.41c.92-1.88,1.38-4.05,1.38-6.52s-.46-4.59-1.37-6.47c-.91-1.87-2.23-3.34-3.93-4.41Zm-.65,17.23c-1.21,1.64-3.03,2.46-5.47,2.46s-4.19-.8-5.41-2.41-1.84-3.74-1.84-6.4c0-1.72.26-3.24.79-4.56.53-1.32,1.32-2.35,2.39-3.09,1.07-.75,2.43-1.12,4.08-1.12,2.43,0,4.24.8,5.46,2.39s1.82,3.72,1.82,6.38-.6,4.72-1.81,6.36Z"/><path class="cls-2" d="m160.51,29.54c-1.58,0-3,.35-4.25,1.05-1.23.68-2.2,1.64-2.91,2.86,0,0,0,0,0,0-.64-1.25-1.56-2.21-2.74-2.89-1.18-.68-2.57-1.02-4.16-1.02s-3.02.35-4.27,1.05c-.98.55-1.8,1.25-2.46,2.11v-2.54h-3.48v23.67h3.92v-15.04c0-1.72.47-3.12,1.42-4.18.95-1.06,2.19-1.59,3.73-1.59s2.79.52,3.73,1.56c.94,1.04,1.4,2.46,1.4,4.25l-.02,14.99h3.88l.02-15.04h0c0-1.33.25-2.42.75-3.27.5-.85,1.14-1.48,1.93-1.89.79-.41,1.62-.61,2.5-.61,1.5,0,2.73.5,3.67,1.5.94,1,1.41,2.39,1.41,4.15l-.02,15.15h3.9l.02-16c0-2.51-.71-4.52-2.13-6.03-1.42-1.5-3.36-2.26-5.83-2.26Z"/><path class="cls-2" d="m190.72,31.13c-1.58-1.09-3.47-1.63-5.67-1.63s-4.09.54-5.62,1.63c-.68.49-1.28,1.06-1.81,1.7v-2.68h-3.49v34.19h3.92v-12.74c.42.45.86.86,1.36,1.23,1.52,1.1,3.39,1.65,5.61,1.65s4.1-.55,5.69-1.64c1.59-1.1,2.8-2.59,3.65-4.48s1.27-4.02,1.27-6.39-.42-4.49-1.27-6.38-2.06-3.37-3.65-4.46Zm.01,15.39c-.51,1.35-1.28,2.42-2.31,3.21s-2.32,1.18-3.87,1.18-2.9-.38-3.92-1.15c-1.02-.77-1.78-1.83-2.27-3.18-.49-1.35-.73-2.89-.73-4.61s.25-3.28.75-4.62c.5-1.34,1.25-2.39,2.26-3.15,1.01-.75,2.28-1.13,3.81-1.13s2.93.39,3.97,1.18c1.04.79,1.81,1.86,2.32,3.2.51,1.34.77,2.85.77,4.51s-.26,3.2-.77,4.55Z"/><rect class="cls-2" x="200.9" y="21.6" width="3.9" height="32.22"/><g><polygon class="cls-2" points="225.71 42.78 236.74 42.78 231.2 26.37 225.71 42.78"/><path class="cls-2" d="m254.65,14.43h-32.81c-6.6,0-12,5.4-12,12v24.06c0,6.6,5.4,12,12,12h32.81c6.6,0,12-5.4,12-12v-24.06c0-6.6-5.4-12-12-12Zm-14.19,39.39l-2.49-7.39h-13.49l-2.47,7.39h-4.05l10.56-31.56h5.44l10.57,31.56h-4.05Zm12.34,0h-3.9v-31.56h3.9v31.56Z"/></g><g><g><polygon class="cls-1" points="1.5 19.55 1.5 55.18 32.25 72.99 62.99 55.18 62.99 19.55 32.25 1.73 1.5 19.55"/><polygon class="cls-1" points="11.13 25.13 11.13 49.6 32.25 61.84 53.37 49.6 53.37 25.13 32.25 12.89 11.13 25.13"/></g><line class="cls-1" x1="52.1" y1="24.46" x2="64" y2="19.48"/><line class="cls-1" x1="32.26" y1="12.51" x2="32.26" y2="2.56"/><line class="cls-1" x1="11.43" y1="25.45" x2="2.51" y2="19.48"/><line class="cls-1" x1="11.43" y1="49.34" x2="2.51" y2="55.32"/><line class="cls-1" x1="32.26" y1="61.29" x2="32.26" y2="72.24"/><line class="cls-1" x1="53.09" y1="49.34" x2="62.02" y2="54.32"/></g></g></g></svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -5,4 +5,4 @@ $breakpoint-large: 1600px;
$breakpoint-huge: 2200px;
$space-base: 0.25rem;
$max-page-width: 1200px;
$max-page-width: 980px;

View File

@ -1,5 +1,20 @@
@import 'https://unpkg.com/open-props';
@import 'app.scss';
/* the props */
/* optional imports that use the props */
@import 'open-props/normalize';
@import 'open-props/buttons';
/* just light or dark themes */
/* individual imports */
@import 'open-props/easings';
@import 'open-props/aspects';
@import 'open-props/borders';
@import 'open-props/animations';
@import 'open-props/sizes';
@import 'open-props/gradients';
/* see PropPacks for the full list */
html,
body {
@ -80,6 +95,12 @@ li {
a {
text-decoration: none;
&.styled {
text-decoration: underline;
text-underline-offset: var(--size-1);
text-decoration-color: var(--color-primary);
}
}
body {
@ -139,6 +160,8 @@ body {
@media screen and (min-width: $breakpoint-medium) {
--default-pd: 1.5rem;
}
background-color: var(--color-background);
}
body {
@ -156,6 +179,29 @@ h4 {
margin-bottom: var(--size-3);
}
h1 {
font-size: 3.5rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.75rem;
}
p {
font-size: 1.6rem;
line-height: 2.6rem;
font-weight: 400;
letter-spacing: 0.1rem;
b {
color: var(--color-primary);
}
}
input {
display: block;
width: 100%;
@ -176,9 +222,3 @@ input {
border-bottom-width: var(--size-1);
}
}
.container {
display: flex;
flex-direction: column;
gap: var(--size-7);
}

View File

@ -1,9 +1,11 @@
<script lang="ts">
import Header from '$lib/components/Header.svelte';
import 'open-props';
import '$lib/style/global.scss';
import Header from '$lib/components/Header.svelte';
import { fly } from 'svelte/transition';
import type { LayoutData } from './$types';
import Footer from '$lib/components/Footer.svelte';
export let data: LayoutData;
</script>
@ -22,6 +24,7 @@
</main>
{/key}
</div>
<Footer />
</div>
<style lang="scss">
@ -34,16 +37,17 @@
}
main {
max-width: $max-page-width;
width: 100%;
}
.transition-outer {
width: 100%;
/* display: grid;
grid-template: 1fr 1fr; */
}
.transition-inner {
/* grid-row: 1;
grid-column: 1; */
width: 100%;
}
</style>

View File

@ -1,51 +1,143 @@
<script>
import Button from '$lib/components/Button.svelte';
import Card from '$lib/components/Card.svelte';
import Container from '$lib/components/Container.svelte';
import Liquid from '$lib/components/Liquid.svelte';
</script>
<div class="bg" />
<div class="hero">
<div>
<h1>COMPLIANCE<br /> REVOLUTION</h1>
<a href="/register"><Button>Jetzt Loslegen</Button></a>
</div>
<Liquid />
</div>
<section class="hero">
<Container>
<div class="content">
<div>
<h1>LEGAL<br />COMPLIANCE<br /> REVOLUTION</h1>
<a href="/register"><Button>Jetzt Loslegen</Button></a>
</div>
<Liquid />
</div>
</Container>
</section>
<div class="spacer-m" />
<Container>
<section>
<h2>What we offer?</h2>
<p>
Introducing ComplAI, the innovative <b>AI-powered notification system</b> that helps
<b>your company stay up-to-date on legal changes</b> relevant to your business. With ComplAI, you'll
never miss an important update again, saving you time and ensuring compliance with the latest regulations.
</p>
</section>
<section>
<h2>How it works</h2>
<p>
ComplAI works by continuously ingesting the latest legal reforms and rulings into our advanced
AI model. Our system then uses this information to filter out updates that are specifically
relevant to your company, ensuring that you only receive notifications on the legal changes
that matter most to your business. This saves you time and effort by eliminating the need to
manually track and interpret legal updates, and helps ensure compliance with the latest
regulations. With ComplAI, you can trust that your company is always up-to-date and fully
informed on the legal landscape.
</p>
<br />
<Button>Download our presentation</Button>
</section>
<section>
<h2>Who we are</h2>
<div class="team-list">
<div class="team-member">
<div class="avatar">
<img src="/wlad.jpeg" />
</div>
</div>
<div class="team-member">
<div class="avatar">
<img src="/wlad.jpeg" />
</div>
</div>
<div class="team-member">
<div class="avatar">
<img src="/wlad.jpeg" />
</div>
</div>
<div class="team-member">
<div class="avatar">
<img src="/wlad.jpeg" />
</div>
</div>
<div class="team-member">
<div class="avatar">
<img src="/wlad.jpeg" />
</div>
<span>
<h3 class="name">Wlad Meixner</h3>
<span>Web Dev</span>
</span>
</div>
</div>
<br />
<p>
Our team at ComplAI is passionate about using technology to solve real-world problems, and
that's how we came together at the <a class="styled" href="https://legallovestech.de/"
><b>LegalLovesTech</b></a
> hackathon. We recognized the need for a more efficient and effective way for companies to stay
informed on legal changes, and we were determined to create a solution.
</p>
</section>
</Container>
<style lang="scss">
.bg {
height: 100vh;
width: 100vw;
position: absolute;
left: 0;
top: 0;
z-index: -1;
/* background-image: var(--gradient-10);
@media (--OSdark) {
background-image: var(--gradient-15);
} */
.spacer-m {
margin-bottom: var(--spacing-large);
}
.hero {
padding-top: var(--size-12);
display: flex;
gap: var(--size-10);
flex-direction: row;
align-items: center;
justify-content: center;
.team-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
justify-content: space-between;
gap: var(--size-9);
}
.image-container {
max-width: 500px;
.team-member {
.avatar {
aspect-ratio: var(--ratio-square);
overflow: hidden;
border-radius: var(--radius-round);
margin-bottom: var(--size-4);
}
.name {
color: var(--color-primary);
}
text-align: center;
img {
width: 100%;
}
}
h1 {
font-size: 4rem;
.hero {
width: 100%;
padding-top: var(--size-5) 0;
background-color: rgba(var(--color-primary-raw), 0.2);
h1 {
font-size: 5rem;
}
:global(.container) {
min-height: 80vh;
justify-content: center;
}
.content {
margin-top: var(--size-10);
display: flex;
gap: var(--size-12);
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
}
</style>

View File

@ -63,10 +63,8 @@
padding-top: var(--size-12);
}
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--size-10);
.container > {
width: 100%;
}
section {

View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 266.65 74.73"><defs><style>.cls-1{fill:none;stroke:#53bc83;stroke-miterlimit:10;stroke-width:3px;}.cls-2{fill:#53bc83;}</style></defs><g id="Layer_1-2"><g><path class="cls-2" d="m85.33,26.93c1.56-1.07,3.52-1.6,5.87-1.6,2.66,0,4.82.68,6.48,2.04,1.66,1.36,2.81,3.21,3.45,5.57l3.97-1.05c-.89-3.14-2.52-5.64-4.88-7.5s-5.37-2.78-9.02-2.78c-3.14,0-5.81.69-8,2.08-2.19,1.39-3.86,3.32-5.01,5.79s-1.72,5.33-1.72,8.57.57,6.1,1.72,8.57,2.82,4.4,5.01,5.79c2.19,1.39,4.86,2.08,8,2.08,3.65,0,6.66-.93,9.02-2.78s3.99-4.35,4.88-7.5l-3.97-1.05c-.64,2.34-1.79,4.19-3.45,5.56-1.66,1.37-3.82,2.05-6.48,2.05-2.35,0-4.32-.54-5.9-1.61s-2.76-2.56-3.55-4.47c-.79-1.91-1.18-4.12-1.16-6.63.01-2.51.42-4.73,1.21-6.64s1.96-3.4,3.53-4.47Z"/><path class="cls-2" d="m126.12,31.09c-1.71-1.07-3.75-1.6-6.12-1.6s-4.32.52-6.03,1.57-3.03,2.51-3.97,4.38c-.94,1.88-1.4,4.05-1.4,6.52s.46,4.62,1.38,6.5c.92,1.88,2.23,3.35,3.93,4.42,1.7,1.07,3.73,1.6,6.08,1.6s4.38-.53,6.09-1.59,3.02-2.53,3.95-4.41c.92-1.88,1.38-4.05,1.38-6.52s-.46-4.59-1.37-6.47c-.91-1.87-2.23-3.34-3.93-4.41Zm-.65,17.23c-1.21,1.64-3.03,2.46-5.47,2.46s-4.19-.8-5.41-2.41-1.84-3.74-1.84-6.4c0-1.72.26-3.24.79-4.56.53-1.32,1.32-2.35,2.39-3.09,1.07-.75,2.43-1.12,4.08-1.12,2.43,0,4.24.8,5.46,2.39s1.82,3.72,1.82,6.38-.6,4.72-1.81,6.36Z"/><path class="cls-2" d="m160.51,29.54c-1.58,0-3,.35-4.25,1.05-1.23.68-2.2,1.64-2.91,2.86,0,0,0,0,0,0-.64-1.25-1.56-2.21-2.74-2.89-1.18-.68-2.57-1.02-4.16-1.02s-3.02.35-4.27,1.05c-.98.55-1.8,1.25-2.46,2.11v-2.54h-3.48v23.67h3.92v-15.04c0-1.72.47-3.12,1.42-4.18.95-1.06,2.19-1.59,3.73-1.59s2.79.52,3.73,1.56c.94,1.04,1.4,2.46,1.4,4.25l-.02,14.99h3.88l.02-15.04h0c0-1.33.25-2.42.75-3.27.5-.85,1.14-1.48,1.93-1.89.79-.41,1.62-.61,2.5-.61,1.5,0,2.73.5,3.67,1.5.94,1,1.41,2.39,1.41,4.15l-.02,15.15h3.9l.02-16c0-2.51-.71-4.52-2.13-6.03-1.42-1.5-3.36-2.26-5.83-2.26Z"/><path class="cls-2" d="m190.72,31.13c-1.58-1.09-3.47-1.63-5.67-1.63s-4.09.54-5.62,1.63c-.68.49-1.28,1.06-1.81,1.7v-2.68h-3.49v34.19h3.92v-12.74c.42.45.86.86,1.36,1.23,1.52,1.1,3.39,1.65,5.61,1.65s4.1-.55,5.69-1.64c1.59-1.1,2.8-2.59,3.65-4.48s1.27-4.02,1.27-6.39-.42-4.49-1.27-6.38-2.06-3.37-3.65-4.46Zm.01,15.39c-.51,1.35-1.28,2.42-2.31,3.21s-2.32,1.18-3.87,1.18-2.9-.38-3.92-1.15c-1.02-.77-1.78-1.83-2.27-3.18-.49-1.35-.73-2.89-.73-4.61s.25-3.28.75-4.62c.5-1.34,1.25-2.39,2.26-3.15,1.01-.75,2.28-1.13,3.81-1.13s2.93.39,3.97,1.18c1.04.79,1.81,1.86,2.32,3.2.51,1.34.77,2.85.77,4.51s-.26,3.2-.77,4.55Z"/><rect class="cls-2" x="200.9" y="21.6" width="3.9" height="32.22"/><g><polygon class="cls-2" points="225.71 42.78 236.74 42.78 231.2 26.37 225.71 42.78"/><path class="cls-2" d="m254.65,14.43h-32.81c-6.6,0-12,5.4-12,12v24.06c0,6.6,5.4,12,12,12h32.81c6.6,0,12-5.4,12-12v-24.06c0-6.6-5.4-12-12-12Zm-14.19,39.39l-2.49-7.39h-13.49l-2.47,7.39h-4.05l10.56-31.56h5.44l10.57,31.56h-4.05Zm12.34,0h-3.9v-31.56h3.9v31.56Z"/></g><g><g><polygon class="cls-1" points="1.5 19.55 1.5 55.18 32.25 72.99 62.99 55.18 62.99 19.55 32.25 1.73 1.5 19.55"/><polygon class="cls-1" points="11.13 25.13 11.13 49.6 32.25 61.84 53.37 49.6 53.37 25.13 32.25 12.89 11.13 25.13"/></g><line class="cls-1" x1="52.1" y1="24.46" x2="64" y2="19.48"/><line class="cls-1" x1="32.26" y1="12.51" x2="32.26" y2="2.56"/><line class="cls-1" x1="11.43" y1="25.45" x2="2.51" y2="19.48"/><line class="cls-1" x1="11.43" y1="49.34" x2="2.51" y2="55.32"/><line class="cls-1" x1="32.26" y1="61.29" x2="32.26" y2="72.24"/><line class="cls-1" x1="53.09" y1="49.34" x2="62.02" y2="54.32"/></g></g></g></svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
frontend/static/wlad.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 199 KiB

View File

@ -1,11 +1,17 @@
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
import postcssJitProps from 'postcss-jit-props';
import OpenProps from 'open-props';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess({}),
preprocess: vitePreprocess({
postcss: {
plugins: [postcssJitProps(OpenProps)]
}
}),
kit: {
adapter: adapter()