-
-
-
-
-
Crystal clear sense
-
Farm based hosting
-
-
-
-
-
-
Service focused
-
{"Need something we don't explicitly offer? We can always work something out."}
-
-
-
+
+
+
+
+
Crystal clear sense
+
+ {"We understand the struggle of long meetings only to still have misunderstandings. "}
+ {"We are straight to the point and will inform you of your options upfront."}
+
+
+
+
+
+
Service focused
+
+ {"We can always work something out, even if what you need is not technically in our range of offerings. "}
+ {"Our mission is to help make you succeed and own the IT space, no matter what that might be."}
+
+
+
+
+
+
Future proof
+
+ {"We work with the newest technologies and use agnostic systems to ensure they will keep working even if an individual piece gets outdated."}
+
+
+
+
+
+
Involved and committed
+
+ {"Our job resulted from our hobby as IT enthusiasts. Our enjoyment is to see your product succeed, so everything we do is geared towards that goal. "}
+
+
+
+
+
+
Price minded
+
+ {"We are a small startup with very little background costs. "}
+ {"Those cost savings are directly forwarded to you, the client."}
+
+
-
-
-
-
Involved and committed
-
Yes
-
-
-
-
-
-
Price minded
-
{"Take advantage of the small scale of a startup's cost advantage"}
-
-
-
-
-
-
Flexible and versatile
-
Yes
-
+
+
+
+
Flexible and versatile
+
+ {"We work with a large range of technologies so we can fit your needs. "}
+ {"We're not afraid to try out new things if the situation calls for it either."}
+
+
-
+
+
+
+
+ See what our customers say
+
+
+
+
+
+
+
+
+
+
+ {" The site is amazing, the work that went into this is incredible. "}
+ {" The look and small details make it so amazing. "}
+ {" I highly recommend getting yourself a sight made by DubbelNull, their talent is outstanding and the customer service was amazing. "}
+ {" They were always there to answer any questions I had and was happy to change the things I wanted. "}
+
+
+
— Trick @ trickthefox.com
+
+
+
+ {/*
+
+
+
+ {" Wheter it is PHP Laravel, NodeJS Nextjs or even Wordpress, we can do it. Wheter it is PHP Laravel, NodeJS Nextjs or even Wordpress, we can do it. Wheter it is PHP Laravel, NodeJS Nextjs or even Wordpress, we can do it. "}
+
+
+
— Merete & Melvyn @ lifecentrelivingston.com
+
+
+
+
+
+
+
+
+
diff --git a/styles/About.module.css b/styles/About.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/styles/Home.module.css b/styles/Home.module.css
deleted file mode 100644
index 35454bb..0000000
--- a/styles/Home.module.css
+++ /dev/null
@@ -1,121 +0,0 @@
-.container {
- min-height: 100vh;
- padding: 0 0.5rem;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- height: 100vh;
-}
-
-.main {
- padding: 5rem 0;
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-
-.footer {
- width: 100%;
- height: 100px;
- border-top: 1px solid #eaeaea;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.footer a {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-grow: 1;
-}
-
-.title a {
- color: #0070f3;
- text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
- text-decoration: underline;
-}
-
-.title {
- margin: 0;
- line-height: 1.15;
- font-size: 4rem;
-}
-
-.title,
-.description {
- text-align: center;
-}
-
-.description {
- line-height: 1.5;
- font-size: 1.5rem;
-}
-
-.code {
- background: #fafafa;
- border-radius: 5px;
- padding: 0.75rem;
- font-size: 1.1rem;
- font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
- Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.grid {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-wrap: wrap;
- max-width: 800px;
- margin-top: 3rem;
-}
-
-.card {
- margin: 1rem;
- padding: 1.5rem;
- text-align: left;
- color: inherit;
- text-decoration: none;
- border: 1px solid #eaeaea;
- border-radius: 10px;
- transition: color 0.15s ease, border-color 0.15s ease;
- width: 45%;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
- color: #0070f3;
- border-color: #0070f3;
-}
-
-.card h2 {
- margin: 0 0 1rem 0;
- font-size: 1.5rem;
-}
-
-.card p {
- margin: 0;
- font-size: 1.25rem;
- line-height: 1.5;
-}
-
-.logo {
- height: 1em;
- margin-left: 0.5rem;
-}
-
-@media (max-width: 600px) {
- .grid {
- width: 100%;
- flex-direction: column;
- }
-}
diff --git a/styles/Index.module.css b/styles/Index.module.css
index 8cf8616..8866a1f 100644
--- a/styles/Index.module.css
+++ b/styles/Index.module.css
@@ -8,7 +8,7 @@
}
.banner h1 {
- margin-top: -5rem;
+ margin-top: -7rem;
font-size: 3em;
font-weight: 500;
}
@@ -23,32 +23,55 @@
}
.features {
- display: flex;
+ display: grid;
+ grid-template-columns: auto auto;
justify-content: space-between;
gap: 50px;
-}
-
-.features > div {
width: 100%;
- display: grid;
- gap: 20px;
}
-.features section {
+.block {
display: flex;
gap: 20px;
- align-items: center;
+ align-items: flex-start;
+}
+
+.block p {
+ font-size: 1rem;
}
-.features section > div {
+.block > div {
display: grid;
gap: 10px;
}
-.features section * {
+.block * {
margin: unset;
}
+.index h2 {
+ text-align: center;
+}
+
+.quote {
+ display: flex;
+ gap: 50px;
+ align-items: center;
+}
+
+.quote i {
+ font-size: 0.9rem;
+ color: grey;
+}
+
+.block .show {
+ width: 100%;
+}
+
+.block .show img {
+ max-width: 100%;
+}
+
/* animation */
.indexanim {
diff --git a/styles/components/Buttons.module.css b/styles/components/Buttons.module.css
new file mode 100644
index 0000000..dae8a9f
--- /dev/null
+++ b/styles/components/Buttons.module.css
@@ -0,0 +1,30 @@
+.section {
+ text-align: center;
+}
+
+.section * {
+ margin-top: unset;
+}
+
+.section a {
+ font-family: "Red Hat Display";
+ display: inline-flex;
+ align-items: center;
+ padding: 0.4em 1em;
+ font-family: "Red Hat Display";
+ font-weight: 500;
+ font-size: 1.1em;
+ border-radius: 8px;
+ background-color: var(--background-color-dark);
+}
+
+.section div {
+ display: flex;
+ gap: 10px;
+ justify-content: center;
+}
+
+.section a:hover {
+ background-color: var(--theme-color-500);
+ text-decoration: none;
+}
\ No newline at end of file
diff --git a/styles/components/Footer.module.css b/styles/components/Footer.module.css
index 524b657..8c31d51 100644
--- a/styles/components/Footer.module.css
+++ b/styles/components/Footer.module.css
@@ -1,8 +1,17 @@
.footer {
- padding: var(--padding-large) 0;
+ margin-top: 50px;
}
.footer > div {
+ padding: 0 10px;
display: flex;
- justify-content: center;
+ justify-content: space-between;
+}
+
+.footer > div > *:last-child {
+ text-align: right;
+}
+
+.footer * {
+ font-size: 0.9em;
}
\ No newline at end of file
diff --git a/styles/components/Menu.module.css b/styles/components/Menu.module.css
index e93145c..e0d075d 100644
--- a/styles/components/Menu.module.css
+++ b/styles/components/Menu.module.css
@@ -1,11 +1,9 @@
/* menu layout */
.menu {
- position: absolute;
- top: 0;
- left: 0;
padding: 10px 0;
margin: unset;
width: 100%;
+ background-color: var(--background-color);
}
.menu > div {
@@ -48,10 +46,16 @@
border-radius: 8px;
}
-.menu > div > *:last-child a {
+.menu .disabled a {
cursor: no-drop;
}
.menu a:hover {
- background-color: rgba(36, 99, 235, 0.1);
+ background-color: var(--theme-color-dilluted);
+ text-decoration: none;
+}
+
+.menu .disabled {
+ display: flex;
+ align-items: stretch;
}
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index d95ea75..804b631 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -6,7 +6,7 @@ body {
padding: 0;
margin: 0;
font-family: 'Red Hat Text';
- font-size: 1.1em;
+ font-size: 1.1rem;
}
h1, h2, h3, h4, h5 {
@@ -18,6 +18,10 @@ a {
text-decoration: none;
}
+a:hover {
+ text-decoration: underline;
+}
+
* {
box-sizing: border-box;
}
@@ -29,8 +33,19 @@ hr {
/* variables */
:root {
- --padding-large: 50px;
--theme-color: #2463EB;
+ --theme-color-dilluted: rgba(36, 99, 235, 0.1);
+ --theme-color-500: rgba(36, 99, 235, 0.5);
+
+ --box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
+
+ --background-color: #F3F4F6;
+ --background-color-light: #1044b427;
+ --background-color-dark: #E5E7EB;
+
+ --padding: 20px;
+ --padding-lg: 50px;
+ --padding-xl: 100px;
}
@@ -46,10 +61,10 @@ hr {
.content {
border-radius: 1em;
- background-color: #F3F4F6;
- box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
- padding: 50px;
+ background-color: var(--background-color);
+ box-shadow: var(--box-shadow);
+ padding: var(--padding-xl);
display: flex;
flex-direction: column;
- gap: var(--padding-large);
+ gap: var(--padding-lg);
}