finished home page

main
Midnight 3 years ago
parent 51ed02a2cd
commit f8dfa7f590

@ -0,0 +1,17 @@
import styles from '../styles/components/Buttons.module.css';
export default function Footer() {
return (
<section className={styles.section}>
<h2>Learn more</h2>
<div>
<a href="/about">About</a>
<a href="/contact">Contact</a>
<a href="https://twitter.com/DubbelNull" target="_blank">Twitter</a>
<a href="https://gitlab.com/dubbelnull" target="_blank">GitLab</a>
<a href="https://discord.gg/976Xskh8Dd" target="_blank">Discord</a>
<a href="https://status.dubbelnull.com" target="_blank">Statuspage</a>
</div>
</section>
)
}

@ -8,7 +8,8 @@ export default function Footer() {
return ( return (
<footer className={styles.footer}> <footer className={styles.footer}>
<div className="container"> <div className="container">
<p>© 2021 DubbelNull vof Kvk nr. 81343493</p> <p>Copyright © 2021 DubbelNull vof <br/> Kvk 81343493 -- The Netherlands</p>
<p>Built by Pascal with NextJS, Netlify & Airtable <br/> Dutch language option coming soon</p>
</div> </div>
</footer> </footer>
) )

@ -16,20 +16,12 @@ export default function Menu() {
</Link> </Link>
<div> <div>
<Link href="">About</Link>
<Link href="">Blog</Link>
<Link href="">Showcase</Link>
<Link href="">Services</Link>
<Link href="">Contact</Link>
</div>
{/* <div>
<Link href="/about">About</Link> <Link href="/about">About</Link>
<Link href="/about">Blog</Link> <div className={styles.disabled}><Link href="">Blog</Link></div>
<Link href="/about">Showcase</Link> <div className={styles.disabled}><Link href="">Showcase</Link></div>
<Link href="/about">Services</Link> <div className={styles.disabled}><Link href="">Services</Link></div>
<Link href="/about">Contact</Link> <div className={styles.disabled}><Link href="">Contact</Link></div>
</div> */} </div>
</div> </div>
</menu> </menu>
) )

@ -0,0 +1,15 @@
import Head from 'next/head'
import styles from "../styles/Index.module.css"
export default function PageLayout(props: any) {
return (
<section className="container">
<section className={styles.banner}>
<h1>{process.env.NEXT_PUBLIC_MOTTO}</h1>
</section>
<article>
{props.children}
</article>
</section>
)
}

@ -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 (
<div className={"page " + styles.about}>
</div>
)
}

@ -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 (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation &rarr;</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn &rarr;</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/master/examples"
className={styles.card}
>
<h2>Examples &rarr;</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy &rarr;</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}

@ -1,6 +1,8 @@
import Head from 'next/head' import Head from 'next/head'
import Image from 'next/image' import Image from 'next/image'
import styles from '../styles/Index.module.css' import styles from '../styles/Index.module.css'
import Buttons from '../components/buttons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTractor } from '@fortawesome/free-solid-svg-icons' import { faTractor } from '@fortawesome/free-solid-svg-icons'
import { faBatteryFull } 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 { faMoneyBillWave } from '@fortawesome/free-solid-svg-icons'
import { faForward } from '@fortawesome/free-solid-svg-icons' import { faForward } from '@fortawesome/free-solid-svg-icons'
import { faStream } 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() { export default function Home() {
return ( return (
<div className="page"> <div className={"page " + styles.index}>
<Head> <Head>
<title>{process.env.NEXT_PUBLIC_NAME}</title> <title>{process.env.NEXT_PUBLIC_NAME}</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" /> <meta name="viewport" content="initial-scale=1.0, width=device-width" />
@ -24,65 +30,124 @@ export default function Home() {
<article className={"content " + styles.indexanim}> <article className={"content " + styles.indexanim}>
<h1 className={styles.description}> <h1 className={styles.description}>
DubbelNull is a small 2-man startup from The Netherlands developing and designing web applications. {"DubbelNull is a small IT development team from The Netherlands making and designing web applications. "}
We make all kinds of things with a range of technologies like Laravel, NextJS and Wordpress. {"We build with a variety of tools such as Laravel, NextJS, NestJS and Wordpress."}
</h1> </h1>
<hr /> <hr />
<div className={styles.features}> <section className={styles.features}>
<div> <div className={styles.block}>
<section> <FontAwesomeIcon fixedWidth icon={faTractor} size="2x" style={{color: "var(--theme-color)"}} />
<FontAwesomeIcon fixedWidth icon={faTractor} size="2x" style={{color: "var(--theme-color)"}} /> <div>
<div> <h3>Crystal clear sense</h3>
<h3>Crystal clear sense</h3> <p>
<p>Farm based hosting</p> {"We understand the struggle of long meetings only to still have misunderstandings. "}
</div> {"We are straight to the point and will inform you of your options upfront."}
</section> </p>
</div>
<section> </div>
<FontAwesomeIcon fixedWidth icon={faHandshake} size="2x" style={{color: "var(--theme-color)"}} />
<div> <div className={styles.block}>
<h3>Service focused</h3> <FontAwesomeIcon fixedWidth icon={faHandshake} size="2x" style={{color: "var(--theme-color)"}} />
<p>{"Need something we don't explicitly offer? We can always work something out."}</p> <div>
</div> <h3>Service focused</h3>
</section> <p>
{"We can always work something out, even if what you need is not technically in our range of offerings. "}
<section> {"Our mission is to help make you succeed and own the IT space, no matter what that might be."}
<FontAwesomeIcon fixedWidth icon={faForward} size="2x" style={{color: "var(--theme-color)"}} /> </p>
<div> </div>
<h3>Future proof</h3> </div>
<p>Yes</p>
</div> <div className={styles.block}>
</section> <FontAwesomeIcon fixedWidth icon={faForward} size="2x" style={{color: "var(--theme-color)"}} />
<div>
<h3>Future proof</h3>
<p>
{"We work with the newest technologies and use agnostic systems to ensure they will keep working even if an individual piece gets outdated."}
</p>
</div>
</div>
<div className={styles.block}>
<FontAwesomeIcon fixedWidth icon={faBatteryFull} size="2x" style={{color: "var(--theme-color)"}} />
<div>
<h3>Involved and committed</h3>
<p>
{"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. "}
</p>
</div>
</div>
<div className={styles.block}>
<FontAwesomeIcon fixedWidth icon={faMoneyBillWave} size="2x" style={{color: "var(--theme-color)"}} />
<div>
<h3>Price minded</h3>
<p>
{"We are a small startup with very little background costs. "}
{"Those cost savings are directly forwarded to you, the client."}
</p>
</div>
</div> </div>
<div> <div className={styles.block}>
<section> <FontAwesomeIcon fixedWidth icon={faStream} size="2x" style={{color: "var(--theme-color)"}} />
<FontAwesomeIcon fixedWidth icon={faBatteryFull} size="2x" style={{color: "var(--theme-color)"}} /> <div>
<div> <h3>Flexible and versatile</h3>
<h3>Involved and committed</h3> <p>
<p>Yes</p> {"We work with a large range of technologies so we can fit your needs. "}
</div> {"We're not afraid to try out new things if the situation calls for it either."}
</section> </p>
</div>
<section>
<FontAwesomeIcon fixedWidth icon={faMoneyBillWave} size="2x" style={{color: "var(--theme-color)"}} />
<div>
<h3>Price minded</h3>
<p>{"Take advantage of the small scale of a startup's cost advantage"}</p>
</div>
</section>
<section>
<FontAwesomeIcon fixedWidth icon={faStream} size="2x" style={{color: "var(--theme-color)"}} />
<div>
<h3>Flexible and versatile</h3>
<p>Yes</p>
</div>
</section>
</div> </div>
</div> </section>
<hr />
<section>
<h2>See what our customers say</h2>
<br/>
<div className={styles.quote}>
<div>
<FontAwesomeIcon icon={faQuoteRight} size="6x" style={{color: "var(--theme-color)"}} />
</div>
<div>
<p>
<FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "gray"}} />
{" 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. "}
<FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "gray"}} />
</p>
<i> Trick @ <a href="https://trickthefox.com" target="_blank">trickthefox.com</a></i>
</div>
</div>
<br/>
{/* <div className={styles.quote}>
<div>
<p>
<FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "gray"}} />
{" 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. "}
<FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "gray"}} />
</p>
<i> Merete & Melvyn @ <a href="https://lifecentrelivingston.com" target="_blank">lifecentrelivingston.com</a></i>
</div>
<div>
<FontAwesomeIcon icon={faQuoteRight} size="6x" style={{color: "var(--theme-color)"}} />
</div>
</div> */}
</section>
<hr/>
<section>
<Buttons />
</section>
</article> </article>
</section> </section>
</div> </div>

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

@ -8,7 +8,7 @@
} }
.banner h1 { .banner h1 {
margin-top: -5rem; margin-top: -7rem;
font-size: 3em; font-size: 3em;
font-weight: 500; font-weight: 500;
} }
@ -23,32 +23,55 @@
} }
.features { .features {
display: flex; display: grid;
grid-template-columns: auto auto;
justify-content: space-between; justify-content: space-between;
gap: 50px; gap: 50px;
}
.features > div {
width: 100%; width: 100%;
display: grid;
gap: 20px;
} }
.features section { .block {
display: flex; display: flex;
gap: 20px; gap: 20px;
align-items: center; align-items: flex-start;
}
.block p {
font-size: 1rem;
} }
.features section > div { .block > div {
display: grid; display: grid;
gap: 10px; gap: 10px;
} }
.features section * { .block * {
margin: unset; 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 */ /* animation */
.indexanim { .indexanim {

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

@ -1,8 +1,17 @@
.footer { .footer {
padding: var(--padding-large) 0; margin-top: 50px;
} }
.footer > div { .footer > div {
padding: 0 10px;
display: flex; display: flex;
justify-content: center; justify-content: space-between;
}
.footer > div > *:last-child {
text-align: right;
}
.footer * {
font-size: 0.9em;
} }

@ -1,11 +1,9 @@
/* menu layout */ /* menu layout */
.menu { .menu {
position: absolute;
top: 0;
left: 0;
padding: 10px 0; padding: 10px 0;
margin: unset; margin: unset;
width: 100%; width: 100%;
background-color: var(--background-color);
} }
.menu > div { .menu > div {
@ -48,10 +46,16 @@
border-radius: 8px; border-radius: 8px;
} }
.menu > div > *:last-child a { .menu .disabled a {
cursor: no-drop; cursor: no-drop;
} }
.menu a:hover { .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;
} }

@ -6,7 +6,7 @@ body {
padding: 0; padding: 0;
margin: 0; margin: 0;
font-family: 'Red Hat Text'; font-family: 'Red Hat Text';
font-size: 1.1em; font-size: 1.1rem;
} }
h1, h2, h3, h4, h5 { h1, h2, h3, h4, h5 {
@ -18,6 +18,10 @@ a {
text-decoration: none; text-decoration: none;
} }
a:hover {
text-decoration: underline;
}
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
@ -29,8 +33,19 @@ hr {
/* variables */ /* variables */
:root { :root {
--padding-large: 50px;
--theme-color: #2463EB; --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 { .content {
border-radius: 1em; border-radius: 1em;
background-color: #F3F4F6; background-color: var(--background-color);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); box-shadow: var(--box-shadow);
padding: 50px; padding: var(--padding-xl);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--padding-large); gap: var(--padding-lg);
} }

Loading…
Cancel
Save