ADD: Pricing charts layout
Added column based pricing chart layout, add nuxt/fonts
This commit is contained in:
parent
f263a5574a
commit
84a295f011
11 changed files with 1310 additions and 352 deletions
|
|
@ -1,5 +1,6 @@
|
|||
.Button {
|
||||
all: unset;
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
transition: 250ms;
|
||||
cursor: pointer;
|
||||
padding: 1rem 1.5rem;
|
||||
|
|
@ -9,7 +10,6 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
font-weight: bold;
|
||||
|
||||
&.default {
|
||||
background: var(--color-orange);
|
||||
|
|
@ -49,49 +49,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.DualButton {
|
||||
--size: 2.2rem;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
& .divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--color-black);
|
||||
color: var(--color-white);
|
||||
border-radius: 9999px;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
padding: var(--size);
|
||||
font-size: 1.2rem;
|
||||
z-index: 1;
|
||||
margin-left: calc(var(--size) * -1 - 25px);
|
||||
border: 2px solid var(--color-black);
|
||||
}
|
||||
|
||||
.Button {
|
||||
border: 2px solid currentColor;
|
||||
}
|
||||
|
||||
& .Button:hover {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
background-color: var(--color-black);
|
||||
color: var(--color-white);
|
||||
border-color: var(--color-orange);
|
||||
}
|
||||
|
||||
& .Button:first-child {
|
||||
padding-right: calc(var(--size) * 2);
|
||||
}
|
||||
|
||||
& .Button:last-child {
|
||||
padding-left: calc(var(--size) * 2);
|
||||
margin-left: calc(var(--size) * -1 - 25px);
|
||||
}
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
border-radius: 99999px;
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-stretch: 100%;
|
||||
font-display: swap;
|
||||
src: url('/fonts/opensans.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto Condensed';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: url('/fonts/roboto_con_reg.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto Condensed';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('/fonts/roboto_con_bold.woff2') format('woff2');
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
}
|
||||
|
||||
.Header {
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
padding: 15px calc(15vw - 30px);
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
|
|
@ -31,7 +32,6 @@
|
|||
}
|
||||
|
||||
& strong {
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
font-size: 1.5rem;
|
||||
flex: 1.5;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,91 +1,45 @@
|
|||
.Pricing {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr max-content;
|
||||
border-radius: 20px;
|
||||
|
||||
& article:first-child {
|
||||
border-radius: 20px 20px 0 0;
|
||||
|
||||
& header,
|
||||
& main,
|
||||
& footer {
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
& header {
|
||||
background-color: var(--color-orange-dark);
|
||||
color: var(--color-white);
|
||||
|
||||
& .bg-icon {
|
||||
top: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
& .cols {
|
||||
& li .value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& article:last-child {
|
||||
border-radius: 0 0 20px 20px;
|
||||
|
||||
& header,
|
||||
& main,
|
||||
& footer {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
& header {
|
||||
background-color: var(--color-orange-dark);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
& .cols {
|
||||
& li .value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& article:nth-child(2) {
|
||||
width: 105%;
|
||||
margin-left: -2.5%;
|
||||
margin-right: -2.5%;
|
||||
border-radius: 20px;
|
||||
z-index: 2;
|
||||
|
||||
& header {
|
||||
--size-difference: 7rem;
|
||||
width: calc(100% - 2rem);
|
||||
padding-top: var(--size-difference);
|
||||
padding-bottom: var(--size-difference);
|
||||
background-color: var(--color-orange);
|
||||
color: var(--color-black);
|
||||
|
||||
& .bg-icon {
|
||||
right: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
& ul {
|
||||
& li .value {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
grid-template-rows: 150px auto auto auto 1fr;
|
||||
|
||||
& article {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
grid-template-rows: subgrid;
|
||||
grid-row: 1 / -1;
|
||||
background-color: var(--color-orange-black);
|
||||
overflow: hidden;
|
||||
|
||||
&:nth-child(2) {
|
||||
border-top-left-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
z-index: 100;
|
||||
scale: 1.05;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
& .value {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
|
||||
&.fat {
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
&.odd {
|
||||
background: var(--color-black);
|
||||
}
|
||||
}
|
||||
|
||||
& header,
|
||||
& main,
|
||||
& footer {
|
||||
|
|
@ -106,15 +60,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
& main {
|
||||
background-color: var(--color-orange-black);
|
||||
z-index: 1;
|
||||
&:nth-child(3) header {
|
||||
background: var(--color-orange);
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
&:not(:nth-child(3)) header {
|
||||
background: var(--color-orange-dark);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
& header {
|
||||
position: relative;
|
||||
padding-right: 8rem;
|
||||
width: calc(100% + 8rem);
|
||||
width: 100%;
|
||||
|
||||
& strong {
|
||||
font-size: 2rem;
|
||||
|
|
@ -124,49 +82,11 @@
|
|||
& .bg-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 40%;
|
||||
right: 25%;
|
||||
translate: 50% -50%;
|
||||
font-size: 6rem;
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
|
||||
& li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
& .list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .5rem;
|
||||
|
||||
& .point-icon {
|
||||
color: var(--color-orange);
|
||||
}
|
||||
}
|
||||
|
||||
& .list-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
& .cols {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
gap: 1rem;
|
||||
|
||||
& li {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
& .color-icon {
|
||||
color: var(--color-orange);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,14 @@
|
|||
Hier gibt's die <span class="highlight">Entwickler-Flat</span> für planbare Kosten und On-Demand-Entwicklung.</p>
|
||||
|
||||
<div class="Pricing margin-top">
|
||||
<article v-for="(service, index) in flatrate" :class="{ 'z-3-all': index === 1, 'z-2-all': index !== 1}">
|
||||
<article>
|
||||
<div style="place-self: end; height: 1px;"/>
|
||||
<p class="fat value">Gleichzeitige Tickets</p>
|
||||
<p class="fat value odd">Erreichbarkeit</p>
|
||||
<p class="fat value">Monatlicher Preis</p>
|
||||
<div />
|
||||
</article>
|
||||
<article v-for="(service, index) in flatrate" :class=" { 'z-2' : index === 1, 'z-1' : index !== 1 }">
|
||||
<header>
|
||||
<strong>{{service.title}}</strong>
|
||||
<p>{{service.smallClaim}}</p>
|
||||
|
|
@ -15,14 +22,7 @@
|
|||
<Icon :name="`ph:${service.icon}-thin`" size="1.5em" mode="svg" />
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<ul class="cols">
|
||||
<li v-for="point in service.list">
|
||||
<span class="value">{{ typeof point.value === 'number' ? intl.format(point.value) : point.value }}</span>
|
||||
<span class="label">{{ point.label }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</main>
|
||||
<p v-for="(point, pIndex) in service.list" class="value" :class="{ odd: pIndex === 1}">{{ typeof point === 'number' ? intl.format(point) : point }}</p>
|
||||
<footer>
|
||||
<!-- <span class="price">{{intl.format(service.price)}}</span>-->
|
||||
<div class="button-wrapper z-2">
|
||||
|
|
@ -43,10 +43,7 @@ type Service = {
|
|||
icon: string
|
||||
button: string
|
||||
link: string
|
||||
list: {
|
||||
label: string
|
||||
value: string | number
|
||||
}[]
|
||||
list: (string | number)[]
|
||||
}
|
||||
|
||||
const intl = new Intl.NumberFormat(
|
||||
|
|
@ -68,18 +65,9 @@ const flatrate : Service[] =
|
|||
button: 'Jetzt klar machen',
|
||||
link: 'https://tidycal.com/webfussel/flatrate-casual',
|
||||
list: [
|
||||
{
|
||||
label: 'Ticket gleichzeitig',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: 'Erreichbarkeit',
|
||||
value: 'Ganz okay',
|
||||
},
|
||||
{
|
||||
label: 'Monatlich',
|
||||
value: 2950,
|
||||
},
|
||||
'1',
|
||||
'E-Mail',
|
||||
2950,
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -89,18 +77,9 @@ const flatrate : Service[] =
|
|||
button: 'Jetzt Gold schürfen',
|
||||
link: 'https://tidycal.com/webfussel/flatrate-gold-fussel',
|
||||
list: [
|
||||
{
|
||||
label: 'Tickets gleichzeitig',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
label: 'Erreichbarkeit',
|
||||
value: 'Mo - Fr',
|
||||
},
|
||||
{
|
||||
label: 'Monatlich',
|
||||
value: 4950,
|
||||
},
|
||||
'2',
|
||||
'E-Mail, Instant-Messaging',
|
||||
4950,
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -110,18 +89,9 @@ const flatrate : Service[] =
|
|||
button: 'Jetzt Fett trimmen',
|
||||
link: 'https://tidycal.com/webfussel/flatrate-big-chonker',
|
||||
list: [
|
||||
{
|
||||
label: 'Tickets gleichzeitig',
|
||||
value: '3',
|
||||
},
|
||||
{
|
||||
label: 'Erreichbarkeit',
|
||||
value: 'Ja.',
|
||||
},
|
||||
{
|
||||
label: 'Monatlich',
|
||||
value: 8950,
|
||||
},
|
||||
'3',
|
||||
'E-Mail, Instant-Messaging, Video-Chat',
|
||||
8950,
|
||||
],
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ export default defineNuxtConfig({
|
|||
},
|
||||
|
||||
css: [
|
||||
'~/assets/css/fonts.css',
|
||||
'~/assets/css/global.css',
|
||||
'~/assets/css/header.css',
|
||||
'~/assets/css/intro.css',
|
||||
|
|
@ -49,9 +48,6 @@ export default defineNuxtConfig({
|
|||
link: [
|
||||
{ rel: 'preload', as: 'image', href: '/img/profile_big.webp', type: 'image/webp' },
|
||||
{ rel: 'preload', as: 'image', href: '/img/profile_small.webp', type: 'image/webp' },
|
||||
{ rel: 'preload', crossorigin: 'anonymous', as: 'font', href: '/fonts/opensans.woff2', type: 'font/woff2' },
|
||||
{ rel: 'preload', crossorigin: 'anonymous', as: 'font', href: '/fonts/roboto_con_bold.woff2', type: 'font/woff2' },
|
||||
{ rel: 'preload', crossorigin: 'anonymous', as: 'font', href: '/fonts/roboto_con_reg.woff2', type: 'font/woff2' },
|
||||
],
|
||||
}
|
||||
},
|
||||
|
|
|
|||
1350
package-lock.json
generated
1350
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -16,6 +16,7 @@
|
|||
"devDependencies": {
|
||||
"@iconify-json/material-symbols": "^1.2.14",
|
||||
"@iconify-json/ri": "^1.2.5",
|
||||
"@nuxt/fonts": "^0.11.4",
|
||||
"@nuxt/icon": "^1.10.3",
|
||||
"nuxt": "^3.15.3",
|
||||
"postcss-nesting": "^13.0.0"
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Add table
Add a link
Reference in a new issue