feat: update landing page
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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);
|
||||
|
||||
17
frontend/src/lib/components/Container.svelte
Normal 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>
|
||||
50
frontend/src/lib/components/Footer.svelte
Normal 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>
|
||||
@ -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) {
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
|
||||
1
frontend/src/lib/icons/logo-header.svg
Normal 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 |
@ -5,4 +5,4 @@ $breakpoint-large: 1600px;
|
||||
$breakpoint-huge: 2200px;
|
||||
|
||||
$space-base: 0.25rem;
|
||||
$max-page-width: 1200px;
|
||||
$max-page-width: 980px;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
1
frontend/static/logo-header.svg
Normal 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 |
BIN
frontend/static/logo-header@2x.png
Normal file
|
After Width: | Height: | Size: 7.8 KiB |
BIN
frontend/static/logo-header@3x.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 7.6 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
BIN
frontend/static/wlad.jpeg
Normal file
|
After Width: | Height: | Size: 199 KiB |
@ -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()
|
||||
|
||||