From 6a1dd4a0578c093113cd32fd94ad3eb6e8b1f50e Mon Sep 17 00:00:00 2001
From: nicknijenhuis <n.nijenhuis@action.nl>
Date: Sun, 8 Dec 2024 11:17:16 +0100
Subject: [PATCH] feat: add services

---
 src/app/page.tsx            | 24 ++++++-----
 src/components/Services.tsx | 84 +++++++++++++++++++++++++++++++++++++
 2 files changed, 98 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Services.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3c28451..586e799 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -16,6 +16,7 @@ import {
 import ArrowLink from '@/components/links/ArrowLink';
 import ButtonLink from '@/components/links/ButtonLink';
 import Projects from '@/components/Projects';
+import Services from '@/components/Services';
 
 /**
  * SVGR Support
@@ -39,16 +40,6 @@ export default function HomePage() {
           <p className='hidden mt-4 text-white'>
             Create better software together
           </p>
-          <p className='mt-2 text-sm text-gray-200 max-w-3xl'>
-            Novana helpt teamprocessen te vereenvoudigen en het resultaat te
-            verhogen door gebruik te maken van de combinatie tussen
-            softwarekennis én kennis van het proces. We laten teams van
-            binnenuit groeien door gebruik van gezond verstand en creatieve
-            ideeën. Bovendien bieden we gespecialiseerde diensten op het gebied
-            van softwareontwikkeling en softwarearchitectuur, waardoor we
-            diverse oplossingen kunnen bieden. Neem gerust contact op als je
-            ideeën wilt opdoen of over mogelijkheden wilt praten.
-          </p>
 
           <section className='bg-dark text-white'>
             <div className='py-6 text-center space-y-2 mt-2 text-gray-200'>
@@ -105,8 +96,21 @@ export default function HomePage() {
             </div>
           </section>
 
+          <Services />
+
           <Projects />
 
+          <p className='mt-2 text-sm text-gray-200 max-w-3xl'>
+            Novana helpt teamprocessen te vereenvoudigen en het resultaat te
+            verhogen door gebruik te maken van de combinatie tussen
+            softwarekennis én kennis van het proces. We laten teams van
+            binnenuit groeien door gebruik van gezond verstand en creatieve
+            ideeën. Bovendien bieden we gespecialiseerde diensten op het gebied
+            van softwareontwikkeling en softwarearchitectuur, waardoor we
+            diverse oplossingen kunnen bieden. Neem gerust contact op als je
+            ideeën wilt opdoen of over mogelijkheden wilt praten.
+          </p>
+
           <ButtonLink
             className='mt-6'
             href='https://www.linkedin.com/in/nicknijenhuis/'
diff --git a/src/components/Services.tsx b/src/components/Services.tsx
new file mode 100644
index 0000000..317e77f
--- /dev/null
+++ b/src/components/Services.tsx
@@ -0,0 +1,84 @@
+import * as React from 'react';
+import {
+  FaCode,
+  FaCogs,
+  FaEnvelope,
+  FaLightbulb,
+  FaServer,
+  FaShoppingCart,
+} from 'react-icons/fa';
+
+const ServiceCard = ({
+  title,
+  description,
+  icon: Icon,
+}: {
+  title: string;
+  description: string;
+  icon: React.ComponentType<{ className?: string }>;
+}) => (
+  <div className='p-6 bg-gray-800 rounded-lg'>
+    <div className='flex items-center justify-between mb-2'>
+      <Icon className='w-6 h-6 text-primary-400' />
+      <h3 className='flex-1 text-xl font-bold text-white text-center'>
+        {title}
+      </h3>
+      <div className='w-6'></div>
+    </div>
+    <p className='text-gray-300'>{description}</p>
+  </div>
+);
+
+export default function Services() {
+  const services = [
+    {
+      title: 'Webontwikkeling',
+      description:
+        'Moderne en schaalbare webapplicaties met React, Next.js en TypeScript. Focus op prestaties, toegankelijkheid en gebruiksvriendelijkheid.',
+      icon: FaCode,
+    },
+    {
+      title: 'Software architectuur',
+      description:
+        'Ontwerp van robuuste, onderhoudbare systemen. Expertise in microservices, cloud-native architectuur en gedistribueerde systemen.',
+      icon: FaServer,
+    },
+    {
+      title: 'Backend ontwikkeling',
+      description:
+        'Krachtige en veilige backend systemen met C# (.NET) en Go. Specialisatie in API ontwikkeling, optimalisatie en high-performance applicaties.',
+      icon: FaCogs,
+    },
+    {
+      title: 'IT Advies',
+      description:
+        'Strategisch advies voor digitale zaken. Optimalisatie van ontwikkelprocessen en technische workflows voor maximale efficiëntie.',
+      icon: FaLightbulb,
+    },
+    {
+      title: 'E-commerce',
+      description:
+        'Technisch advies voor e-commerce platforms. Expertise in payment integraties, API koppelingen, performance optimalisatie en security vraagstukken.',
+      icon: FaShoppingCart,
+    },
+    {
+      title: 'Email verbeteringen',
+      description:
+        'Verbetering van email aflevering en engagement. Implementatie van DMARC, SPF en DKIM. Optimalisatie van verzendreputatie.',
+      icon: FaEnvelope,
+    },
+  ];
+
+  return (
+    <section className='mt-6 w-full max-w-5xl'>
+      <h2 className='text-3xl font-bold text-white mb-8 text-center'>
+        Onze diensten
+      </h2>
+      <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
+        {services.map((service) => (
+          <ServiceCard key={service.title} {...service} />
+        ))}
+      </div>
+    </section>
+  );
+}