added content

components/menu.tsx

@@ -3,8 +3,6 @@ import Image from 'next/image';
 import styles from '../styles/components/Menu.module.css';
 import Link from 'next/link';
 import logo from "../public/img/logoblue.png";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faMugHot } from '@fortawesome/free-solid-svg-icons'
 
 export default function Menu() {
     return (

pages/_app.tsx

@@ -4,6 +4,10 @@ import SiteLayout from '../layouts/global'
 import Menu from '../components/menu'
 import Footer from '../components/footer'
 
+import '@fortawesome/fontawesome-svg-core/styles.css';
+import { config } from '@fortawesome/fontawesome-svg-core';
+config.autoAddCss = false; /* eslint-disable import/first */
+
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <SiteLayout>

pages/index.tsx

@@ -1,6 +1,13 @@
 import Head from 'next/head'
 import Image from 'next/image'
 import styles from '../styles/Index.module.css'
+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'
 
 export default function Home() {
     return (
@@ -20,6 +27,62 @@ 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.
                     </h1>
+
+                    <hr />
+
+                    <div className={styles.features}>
+                        <div>
+                            <section>
+                                <FontAwesomeIcon fixedWidth icon={faTractor} size="2x" style={{color: "var(--theme-color)"}} />
+                                <div>
+                                    <h3>Crystal clear sense</h3>
+                                    <p>Farm based hosting</p>
+                                </div>
+                            </section>
+
+                            <section>
+                                <FontAwesomeIcon fixedWidth icon={faHandshake} size="2x" style={{color: "var(--theme-color)"}} />
+                                <div>
+                                    <h3>Service focused</h3>
+                                    <p>Need something we don't explicitly offer? We can always work something out.</p>
+                                </div>
+                            </section>
+
+                            <section>
+                                <FontAwesomeIcon fixedWidth icon={faForward} size="2x" style={{color: "var(--theme-color)"}} />
+                                <div>
+                                    <h3>Future proof</h3>
+                                    <p>Yes</p>
+                                </div>
+                            </section>
+                        </div>
+
+                        <div>
+                            <section>
+                                <FontAwesomeIcon fixedWidth icon={faBatteryFull} size="2x" style={{color: "var(--theme-color)"}} />
+                                <div>
+                                    <h3>Involved and committed</h3>
+                                    <p>Yes</p>
+                                </div>
+                            </section>
+
+                            <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>
                 </article>
             </section>
         </div>

styles/Index.module.css

@@ -22,6 +22,33 @@
     margin: auto;
 }
 
+.features {
+    display: flex;
+    justify-content: space-between;
+    gap: 50px;
+}
+
+.features > div {
+    width: 100%;
+    display: grid;
+    gap: 20px;
+}
+
+.features section {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+}
+
+.features section > div {
+    display: grid;
+    gap: 10px;
+}
+
+.features section * {
+    margin: unset;
+}
+
 
 /* animation */
 .indexanim {

styles/globals.css

@@ -27,10 +27,10 @@ hr {
   color: rgba(0,0,0,0.1);
 }
 
-
 /* variables */
 :root {
   --padding-large: 50px;
+  --theme-color: #2463EB;
 }