From f8dfa7f5905490832e390a47ce96f5349ce072e5 Mon Sep 17 00:00:00 2001 From: midblep Date: Sun, 4 Jul 2021 17:02:02 +0200 Subject: [PATCH] finished home page --- .env => .env.example | 0 components/buttons.tsx | 17 +++ components/footer.tsx | 3 +- components/menu.tsx | 18 +-- layouts/page.tsx | 15 +++ pages/about.tsx | 12 ++ pages/home.tsx | 69 ----------- pages/index.tsx | 171 ++++++++++++++++++--------- styles/About.module.css | 0 styles/Home.module.css | 121 ------------------- styles/Index.module.css | 45 +++++-- styles/components/Buttons.module.css | 30 +++++ styles/components/Footer.module.css | 13 +- styles/components/Menu.module.css | 14 ++- styles/globals.css | 27 ++++- 15 files changed, 274 insertions(+), 281 deletions(-) rename .env => .env.example (100%) create mode 100644 components/buttons.tsx create mode 100644 layouts/page.tsx create mode 100644 pages/about.tsx delete mode 100644 pages/home.tsx create mode 100644 styles/About.module.css delete mode 100644 styles/Home.module.css create mode 100644 styles/components/Buttons.module.css diff --git a/.env b/.env.example similarity index 100% rename from .env rename to .env.example diff --git a/components/buttons.tsx b/components/buttons.tsx new file mode 100644 index 0000000..d780045 --- /dev/null +++ b/components/buttons.tsx @@ -0,0 +1,17 @@ +import styles from '../styles/components/Buttons.module.css'; + +export default function Footer() { + return ( +
+

Learn more

+
+ About + Contact + Twitter + GitLab + Discord + Statuspage +
+
+ ) +} \ No newline at end of file diff --git a/components/footer.tsx b/components/footer.tsx index 94061d7..5ed3bb8 100644 --- a/components/footer.tsx +++ b/components/footer.tsx @@ -8,7 +8,8 @@ export default function Footer() { return ( ) diff --git a/components/menu.tsx b/components/menu.tsx index 9c3972d..0a0aae8 100644 --- a/components/menu.tsx +++ b/components/menu.tsx @@ -16,20 +16,12 @@ export default function Menu() {
- About - Blog - Showcase - Services - Contact -
- - {/*
About - Blog - Showcase - Services - Contact -
*/} +
Blog
+
Showcase
+
Services
+
Contact
+ ) diff --git a/layouts/page.tsx b/layouts/page.tsx new file mode 100644 index 0000000..c17070b --- /dev/null +++ b/layouts/page.tsx @@ -0,0 +1,15 @@ +import Head from 'next/head' +import styles from "../styles/Index.module.css" + +export default function PageLayout(props: any) { + return ( +
+
+

{process.env.NEXT_PUBLIC_MOTTO}

+
+
+ {props.children} +
+
+ ) +} \ No newline at end of file diff --git a/pages/about.tsx b/pages/about.tsx new file mode 100644 index 0000000..bc96396 --- /dev/null +++ b/pages/about.tsx @@ -0,0 +1,12 @@ +import Head from 'next/head'; +import Image from 'next/image'; +import styles from '../styles/About.module.css'; +import Link from 'next/link'; + +export default function Menu() { + return ( +
+ +
+ ) +} \ No newline at end of file diff --git a/pages/home.tsx b/pages/home.tsx deleted file mode 100644 index 08145bb..0000000 --- a/pages/home.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import Head from 'next/head' -import Image from 'next/image' -import styles from '../styles/Home.module.css' - -export default function Home() { - return ( -
- - Create Next App - - - - -
-

- Welcome to Next.js! -

- -

- Get started by editing{' '} - pages/index.js -

- -
- -

Documentation →

-

Find in-depth information about Next.js features and API.

- - - -

Learn →

-

Learn about Next.js in an interactive course with quizzes!

- - - -

Examples →

-

Discover and deploy boilerplate example Next.js projects.

- - - -

Deploy →

-

- Instantly deploy your Next.js site to a public URL with Vercel. -

- -
-
- - -
- ) -} diff --git a/pages/index.tsx b/pages/index.tsx index df194f7..eedb2a4 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,6 +1,8 @@ import Head from 'next/head' import Image from 'next/image' import styles from '../styles/Index.module.css' +import Buttons from '../components/buttons' + import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faTractor } from '@fortawesome/free-solid-svg-icons' import { faBatteryFull } from '@fortawesome/free-solid-svg-icons' @@ -8,10 +10,14 @@ import { faHandshake } from '@fortawesome/free-solid-svg-icons' import { faMoneyBillWave } from '@fortawesome/free-solid-svg-icons' import { faForward } from '@fortawesome/free-solid-svg-icons' import { faStream } from '@fortawesome/free-solid-svg-icons' +import { faQuoteLeft } from '@fortawesome/free-solid-svg-icons' +import { faQuoteRight } from '@fortawesome/free-solid-svg-icons' + +import logo from '../public/img/logoblue.png' export default function Home() { return ( -
+
{process.env.NEXT_PUBLIC_NAME} @@ -24,65 +30,124 @@ export default function Home() {

- DubbelNull is a small 2-man startup from The Netherlands developing and designing web applications. - We make all kinds of things with a range of technologies like Laravel, NextJS and Wordpress. + {"DubbelNull is a small IT development team from The Netherlands making and designing web applications. "} + {"We build with a variety of tools such as Laravel, NextJS, NestJS and Wordpress."}

-
-
-
- -
-

Crystal clear sense

-

Farm based hosting

-
-
- -
- -
-

Service focused

-

{"Need something we don't explicitly offer? We can always work something out."}

-
-
- -
- -
-

Future proof

-

Yes

-
-
+
+
+ +
+

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); }