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'
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 (
< div className = { "page " + styles . index } >
< Head >
< title > { process . env . NEXT_PUBLIC_NAME } < / 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 making and designing web applications. " }
{ "We build with a variety of tools such as Laravel, NextJS, NestJS and Wordpress." }
< / 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, no matter what that might be." }
< / 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 so we can fit your needs. " }
{ "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 >
< 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 / >
{ / * < d i v c l a s s N a m e = { s t y l e s . q u o t e } >
< 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 >
< / section >
< / div >
)
}
