You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
167 lines
9.0 KiB
167 lines
9.0 KiB
import Head from 'next/head'
|
|
import Link from 'next/link';
|
|
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'
|
|
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'
|
|
import trick from '../public/img/trick.png'
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div className={"page " + styles.index}>
|
|
<Head>
|
|
<title>{process.env.NEXT_PUBLIC_NAME} | {process.env.NEXT_PUBLIC_MOTTO}</title>
|
|
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
|
</Head>
|
|
|
|
<section className="container">
|
|
<section className={styles.banner}>
|
|
<h1>{process.env.NEXT_PUBLIC_MOTTO}</h1>
|
|
</section>
|
|
|
|
<article className={"content " + styles.indexanim}>
|
|
<h1 className={styles.description}>
|
|
{"DubbelNull is a small IT development team from The Netherlands. We make and design web-based applications of all kinds including; "}
|
|
{"back-end servers, front-end experiences, mobile apps, and PWA. "}
|
|
{"As long as it's based on web protocols, we can make it."}
|
|
</h1>
|
|
|
|
<hr />
|
|
|
|
<section className={styles.features}>
|
|
<div className={styles.block}>
|
|
<FontAwesomeIcon fixedWidth icon={faTractor} size="2x" style={{color: "var(--theme-color)"}} />
|
|
<div>
|
|
<h3>Crystal clear sense</h3>
|
|
<p>
|
|
{"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."}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.block}>
|
|
<FontAwesomeIcon fixedWidth icon={faHandshake} size="2x" style={{color: "var(--theme-color)"}} />
|
|
<div>
|
|
<h3>Service focused</h3>
|
|
<p>
|
|
{"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."}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.block}>
|
|
<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 className={styles.block}>
|
|
<FontAwesomeIcon fixedWidth icon={faStream} size="2x" style={{color: "var(--theme-color)"}} />
|
|
<div>
|
|
<h3>Flexible and versatile</h3>
|
|
<p>
|
|
{"We work with a large range of technologies, "}
|
|
{"but we're not afraid to try out new things if the situation calls for it either."}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr />
|
|
|
|
<section>
|
|
<h2>See what our customers say</h2>
|
|
|
|
<div className={styles.quote}>
|
|
<img src="/img/trick.png"/>
|
|
<div>
|
|
<p>
|
|
<FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
|
|
{" 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 were happy to change the things I wanted. "}
|
|
<FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "darkgray"}} />
|
|
</p>
|
|
<br/>
|
|
<i>— Trick @ <a href="https://trickthefox.com" target="_blank" rel="noreferrer">trickthefox.com</a></i>
|
|
</div>
|
|
</div>
|
|
|
|
<br/>
|
|
|
|
{/* <div className={styles.quote}>
|
|
<div>
|
|
<p>
|
|
<FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
|
|
{" Lorem ipsum sodor dolor amalet. "}
|
|
{"Lorem ipsum sodor dolor amalet. "}
|
|
{"Lorem ipsum sodor dolor amalet. "}
|
|
{"Lorem ipsum sodor dolor amalet. "}
|
|
{"Lorem ipsum sodor dolor amalet. "}
|
|
{"Lorem ipsum sodor dolor amalet. "}
|
|
{"Lorem ipsum sodor dolor amalet. "}
|
|
{"Lorem ipsum sodor dolor amalet. "}
|
|
{"Lorem ipsum sodor dolor amalet. "}
|
|
{"Lorem ipsum sodor dolor amalet. "}
|
|
{"Lorem ipsum sodor dolor amalet. "}
|
|
{"Lorem ipsum sodor dolor amalet. "}
|
|
<FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "darkgray"}} />
|
|
</p>
|
|
<br/>
|
|
<i>— Melvyn & Merete @ <a href="https://lifecentrelivingston.com" target="_blank" rel="noreferrer">lifecentrelivingston.com</a></i>
|
|
</div>
|
|
<div>
|
|
<FontAwesomeIcon icon={faQuoteLeft} size="6x" style={{color: "var(--theme-color)"}} />
|
|
</div>
|
|
</div> */}
|
|
</section>
|
|
|
|
<hr/>
|
|
|
|
<section>
|
|
<Buttons />
|
|
</section>
|
|
</article>
|
|
</section>
|
|
</div>
|
|
)
|
|
} |