Add detailed service content and improve rendering

Expanded service descriptions in both English and Dutch i18n files, adding rich HTML content for all services. Updated service pages to render this content using dangerouslySetInnerHTML, ensuring proper display of formatted details. Adjusted SCSS selectors for improved styling of direct child elements and started styling for horizontal rules.

Author: mikeyfe6

src/i18n/en.js

@@ -27,6 +27,13 @@ const EmailTemplatePage = () => {
 
             <section className={servicesStyles.servicesDetail}>
                 <div className={servicesStyles.servicesContainer}>
+                    <div
+                        dangerouslySetInnerHTML={{
+                            __html: t("services.email.content"),
+                        }}
+                        className={servicesStyles.servicesContent}
+                    />
+
                     <div className={servicesStyles.servicesButtons}>
                         <Link to="/diensten/">
                             <FontAwesomeIcon icon={["fas", "angles-left"]} />{" "}

src/i18n/nl.js

@@ -21,12 +21,23 @@ const MaintenancePage = () => {
     return (
         <Layout>
             <section className="page-intro">
-                <h1>{t("services.maintenance.title")}</h1>
+                <h1
+                    dangerouslySetInnerHTML={{
+                        __html: t("services.maintenance.title"),
+                    }}
+                />
                 <h2>{t("services.maintenance.intro")}</h2>
             </section>
 
             <section className={servicesStyles.servicesDetail}>
                 <div className={servicesStyles.servicesContainer}>
+                    <div
+                        dangerouslySetInnerHTML={{
+                            __html: t("services.maintenance.content"),
+                        }}
+                        className={servicesStyles.servicesContent}
+                    />
+
                     <div className={servicesStyles.servicesButtons}>
                         <Link to="/diensten/">
                             <FontAwesomeIcon icon={["fas", "angles-left"]} />{" "}

src/pages/diensten/email-template-laten-maken.jsx

@@ -21,12 +21,23 @@ const OptimizationPage = () => {
     return (
         <Layout>
             <section className="page-intro">
-                <h1>{t("services.optimizations.title")}</h1>
+                <h1
+                    dangerouslySetInnerHTML={{
+                        __html: t("services.optimizations.title"),
+                    }}
+                />
                 <h2>{t("services.optimizations.intro")}</h2>
             </section>
 
             <section className={servicesStyles.servicesDetail}>
                 <div className={servicesStyles.servicesContainer}>
+                    <div
+                        dangerouslySetInnerHTML={{
+                            __html: t("services.optimizations.content"),
+                        }}
+                        className={servicesStyles.servicesContent}
+                    />
+
                     <div className={servicesStyles.servicesButtons}>
                         <Link to="/diensten/">
                             <FontAwesomeIcon icon={["fas", "angles-left"]} />{" "}

src/pages/diensten/onderhoud-updates-uitvoeren.jsx

@@ -26,7 +26,6 @@ const WebappPage = () => {
                         __html: t("services.webapps.title"),
                     }}
                 />
-
                 <h2>{t("services.webapps.intro")}</h2>
             </section>
 

src/pages/diensten/optimalisaties-laten-uitvoeren.jsx

@@ -21,12 +21,23 @@ const WebshopPage = () => {
     return (
         <Layout>
             <section className="page-intro">
-                <h1>{t("services.webshops.title")}</h1>
+                <h1
+                    dangerouslySetInnerHTML={{
+                        __html: t("services.webshops.title"),
+                    }}
+                />
                 <h2>{t("services.webshops.intro")}</h2>
             </section>
 
             <section className={servicesStyles.servicesDetail}>
                 <div className={servicesStyles.servicesContainer}>
+                    <div
+                        dangerouslySetInnerHTML={{
+                            __html: t("services.webshops.content"),
+                        }}
+                        className={servicesStyles.servicesContent}
+                    />
+
                     <div className={servicesStyles.servicesButtons}>
                         <Link to="/diensten/">
                             <FontAwesomeIcon icon={["fas", "angles-left"]} />{" "}

src/pages/diensten/webapplicatie-laten-maken.jsx

@@ -26,7 +26,6 @@ const WebsitePage = () => {
                         __html: t("services.websites.title"),
                     }}
                 />
-
                 <h2>{t("services.websites.intro")}</h2>
             </section>
 

src/pages/diensten/webshop-laten-maken.jsx

@@ -21,12 +21,23 @@ const SeoPage = () => {
     return (
         <Layout>
             <section className="page-intro">
-                <h1>{t("services.seo.title")}</h1>
+                <h1
+                    dangerouslySetInnerHTML={{
+                        __html: t("services.seo.title"),
+                    }}
+                />
                 <h2>{t("services.seo.intro")}</h2>
             </section>
 
             <section className={servicesStyles.servicesDetail}>
                 <div className={servicesStyles.servicesContainer}>
+                    <div
+                        dangerouslySetInnerHTML={{
+                            __html: t("services.seo.content"),
+                        }}
+                        className={servicesStyles.servicesContent}
+                    />
+
                     <div className={servicesStyles.servicesButtons}>
                         <Link to="/diensten/">
                             <FontAwesomeIcon icon={["fas", "angles-left"]} />{" "}

src/pages/diensten/website-laten-maken.jsx

@@ -78,7 +78,7 @@
                     @include fluid-typing(19, 22);
                 }
 
-                ol {
+                > ol {
                     text-decoration-color: $secondary-color;
                     list-style-type: decimal;
                     margin-inline-start: rem-calc(16);
@@ -89,7 +89,7 @@
                     }
                 }
 
-                ul {
+                > ul {
                     display: flex;
                     flex-direction: column;
                     gap: rem-calc(12);
@@ -106,6 +106,23 @@
                         }
                     }
                 }
+
+                > hr {
+                    margin: rem-calc(48 0);
+                    border: 0.5px solid $lightgrey-color;
+                }
+
+                > p {
+                    background: linear-gradient(
+                        145deg,
+                        $primary-color,
+                        $dark-color
+                    );
+                    color: $white-color;
+                    padding: rem-calc(12);
+                    outline: 2px solid $primary-color;
+                    border-radius: $medium-radius;
+                }
             }
 
             #{$services}-buttons {