diff --git a/package.json b/package.json
index 2d49ab0da..b76620577 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@hookform/resolvers": "^4.0.0",
     "@mdx-js/loader": "^3.1.0",
+    "@radix-ui/react-accordion": "^1.2.3",
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.1.7",
     "@radix-ui/react-navigation-menu": "^1.2.3",
diff --git a/public/static/images/partners/aws.svg b/public/static/images/partners/aws.svg
new file mode 100644
index 000000000..f6c9b36ec
--- /dev/null
+++ b/public/static/images/partners/aws.svg
@@ -0,0 +1,120 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   viewBox="0 0 580 217.5"
+   height="217.5"
+   width="580"
+   xml:space="preserve"
+   version="1.1"
+   id="svg2"><metadata
+     id="metadata8"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs6" /><g
+     transform="matrix(1.25,0,0,-1.25,0,217.5)"
+     id="g10"><g
+       transform="scale(0.1,0.1)"
+       id="g12"><path
+         id="path14"
+         style="fill:#f68d11;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 1289.67,1140 -269.67,90 0,390 270,-80 -0.33,-400" /><path
+         id="path16"
+         style="fill:#f68d11;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 1360,1540 270,80 -0.94,-389.73 L 1360,1140 l 0,400" /><path
+         id="path18"
+         style="fill:#f68d11;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="M 1575,1662.23 1323.36,1740 1075,1662.23 l 248.72,-66.67 251.28,66.67" /><path
+         id="path20"
+         style="fill:#f68d11;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 1969.67,1140 -269.67,90 0,390 270,-80 -0.33,-400" /><path
+         id="path22"
+         style="fill:#f68d11;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 2040,1540 270,80 -0.94,-389.73 L 2040,1140 l 0,400" /><path
+         id="path24"
+         style="fill:#f68d11;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="M 2255,1662.23 2003.36,1740 1755,1662.23 l 248.72,-66.67 251.28,66.67" /><path
+         id="path26"
+         style="fill:#f68d11;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="M 270,970 0,1050 0,660 269.672,570 270,970" /><path
+         id="path28"
+         style="fill:#f68d11;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="M 340,970 610,1050 609.063,660.262 340,570 l 0,400" /><path
+         id="path30"
+         style="fill:#f68d11;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="M 555,1092.23 303.359,1170 55,1092.23 303.723,1025.56 555,1092.23" /><path
+         id="path32"
+         style="fill:#f68d11;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="M 949.672,570 680,660 l 0,390 270,-80 -0.328,-400" /><path
+         id="path34"
+         style="fill:#f68d11;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 1020,970 270,80 -0.94,-389.738 L 1020,570 l 0,400" /><path
+         id="path36"
+         style="fill:#f68d11;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="M 1235,1092.23 983.359,1170 735,1092.23 983.723,1025.56 1235,1092.23" /><path
+         id="path38"
+         style="fill:#f68d11;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="M 609.672,0 340,90 340,480 610,400 609.672,0" /><path
+         id="path40"
+         style="fill:#f68d11;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="M 680,400 950,480 949.063,90.2617 680,0 l 0,400" /><path
+         id="path42"
+         style="fill:#f68d11;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="M 895,522.23 643.359,600 395,522.23 643.723,455.559 895,522.23" /><path
+         id="path44"
+         style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 1803.9,344.75 -19.84,-0.07 c -7.28,0 -16.56,-4.918 -18.84,-12.891 l -60.19,-212.051 -59.53,211.59 c -1.79,6.633 -8.04,13.352 -16.54,13.352 l -23.49,0 c -8.46,0 -14.63,-6.809 -16.34,-13.489 l -55.38,-209.39 -57.22,210.039 c -2.26,7.68 -11.77,12.84 -19.23,12.84 l -28.55,0.05 c -6.1,0 -11.77,-2.621 -14.81,-6.839 -2.06,-2.86 -2.63,-6.102 -1.68,-8.922 l 88.4,-312.9573 c 1.95,-6.58201 7.65,-13.21092 15.99,-13.21092 l 28.39,0 c 7.67,0 14.39,5.58985 16.33,13.51952 l 54.41,208.4687 59.21,-208.707 c 1.78,-6.39059 7.51,-13.28122 15.89,-13.28122 l 27.93,0 c 7.77,0 14.31,5.39844 16.23,13.30862 l 85.09,312.7306 c 1,3.012 0.42,6.359 -1.61,9.18 -2.99,4.152 -8.59,6.73 -14.62,6.73" /><path
+         id="path46"
+         style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 2049.38,211.879 -149.98,0 c 3.45,42.09 30.78,85.73 77.08,87.41 49.27,-1.609 71.81,-44.25 72.9,-87.41 z m -73.01,135.109 c -101.31,0 -147.45,-89.566 -147.45,-172.777 0,-103.8516 57.36,-170.94928 146.13,-170.94928 63.53,0 111.96,32.09768 132.88,88.17968 1.12,3.207 0.77,6.6875 -0.98,9.8086 -2.13,3.789 -6.17,6.648 -10.95,7.699 l -28.12,5.379 c -7.55,1.184 -16.2,-3.289 -19.06,-9.777 -13.66,-31.1604 -38.56,-48.8401 -69.81,-49.7619 -30.07,0.9297 -57.68,18.7929 -70.33,45.4809 -10.28,21.8 -11.8,43.289 -11.97,65.14 l 203.61,0.07 c 4.27,0 8.69,1.879 11.81,5.04 2.61,2.621 4.03,5.878 4,9.14 -0.5,80.899 -37.47,167.328 -139.76,167.328" /><path
+         id="path48"
+         style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 2366.62,173.711 c 0,-19.16 -3.47,-114.8321 -71.44,-117.2813 -22.78,0.8711 -45.8,14.2617 -58.66,34.0586 -9.47,14.9727 -15,35.6717 -16.42,61.2817 l 0,56.289 c 1.11,43.121 31.46,90.441 74.86,92.273 68.2,-2.691 71.66,-105.941 71.66,-126.621 z m -60.78,176.18 -5.39,0 c -33.63,0 -60.06,-13.969 -80.35,-42.602 l -0.03,131.93 c 0,7.41 -7.65,14.16 -16.1,14.16 l -29.28,0 c -7.65,0 -16.21,-6.059 -16.23,-14.16 l 0,-411.8401 c 0.03,-7.4805 7.68,-14.2773 16.12,-14.2773 l 8.6,0.0468 c 8.12,0 13.9,6.543 15.85,12.6211 l 9.16,29.0703 c 21.28,-30.2187 53.33,-47.96871 87.63,-47.96871 l 5.25,0 c 90.35,0 130.79,87.87891 130.79,174.96891 0,43.351 -10.69,84.801 -29.32,113.719 -21.53,33.511 -58.59,54.332 -96.7,54.332" /><path
+         id="path50"
+         style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 2752.47,182.98 c -19.04,13.68 -41.93,18.25 -64.86,22.829 l -43.97,8.152 c -31.55,5.187 -49.81,13.648 -49.81,41.488 0,29.43 30.5,40.68 56.36,41.379 31.58,-0.797 55.33,-14.887 66.86,-39.668 2.74,-5.84 8.81,-9.769 15.12,-9.769 1.08,0 2.18,0.121 3.22,0.347 l 27.44,6.063 c 4.48,0.988 8.66,4.058 10.9,8.051 1.79,3.168 2.18,6.628 1.11,9.718 -16.79,48.91 -59.42,74.758 -123.91,74.758 -58.27,-0.129 -120.54,-26.039 -120.54,-98.406 0,-49.461 31.08,-80.871 92.44,-93.371 l 49.22,-9.379 c 27.02,-5.172 54.65,-14.371 54.65,-43.383 0,-42.9492 -49.98,-47.3281 -65.09,-47.6406 -33.9,0.7305 -72.28,15.8516 -81.6,47.8716 -1.87,7.039 -10.73,12.019 -18.5,10.402 l -28.7,-5.922 c -4.32,-0.91 -8.27,-3.719 -10.57,-7.5117 -1.93,-3.1602 -2.48,-6.6992 -1.59,-9.9297 14.81,-53.1289 66.1,-85.16797 137.2,-85.70704 l 1.58,-0.01172 c 63.5,0 131.35,27.19146 131.35,103.46916 0,31.05 -13.97,58.812 -38.31,76.171" /><path
+         id="path52"
+         style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 3042.75,211.57 -150.02,0 c 3.43,42.129 30.76,85.789 77.06,87.391 49.25,-1.563 71.82,-44.199 72.96,-87.391 z m -73.04,135.129 c -101.33,0 -147.48,-89.57 -147.48,-172.777 0,-103.8439 57.37,-170.93372 146.15,-170.93372 63.54,0 111.97,32.10152 132.91,88.17192 1.11,3.2109 0.76,6.6992 -1,9.8278 -2.13,3.793 -6.18,6.653 -10.95,7.684 l -28.16,5.379 c -6.59,1.07 -15.78,-2.34 -19.02,-9.789 -13.67,-31.1409 -38.58,-48.8206 -69.8,-49.7815 -30.1,0.9609 -57.7,18.8203 -70.3,45.5 -10.3,21.7495 -11.83,43.2575 -11.98,65.1605 l 203.59,0.05 c 4.24,0 8.63,1.868 11.75,5.008 2.62,2.633 4.04,5.891 4.01,9.172 -0.47,80.891 -37.41,167.328 -139.72,167.328" /><path
+         id="path54"
+         style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 3301.69,342.891 c -3.97,0.437 -7.79,0.648 -11.5,0.648 -34.17,0 -61.92,-18.578 -81.18,-54.07 l 0.07,31.082 c -0.03,7.527 -7.54,14.14 -16.07,14.14 l -25.43,0 c -8.34,0 -15.7,-6.64 -15.76,-14.261 L 3151.78,18.5 c 0,-7.5781 7.36,-14.23047 15.76,-14.23047 l 29.67,0.01172 c 7.72,0 16.41,6.05855 16.48,14.21875 l 0.02,152.219 c 0,25.101 2.34,44.011 14.33,66.383 17.13,31.867 41.05,47.5 73.13,47.75 8.04,0.058 15.1,7.078 15.1,15.027 l 0,28.242 c 0,7.391 -6.41,13.879 -14.58,14.77" /><path
+         id="path56"
+         style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 3613.2,348.82 -23.43,-0.011 c -7.34,0 -16.75,-5.27 -19.03,-13 L 3494.79,97.1016 3417.23,335.57 c -2.29,7.918 -11.72,13.239 -19.1,13.239 l -33.46,0.031 c -6.14,0 -12.08,-2.738 -15.12,-6.969 -2.04,-2.832 -2.6,-6.043 -1.59,-9.039 L 3454.11,17.9414 c 2.04,-6.2305 7.45,-13.51171 16.01,-13.51171 l 40.49,0 c 7.43,0 13.52,5.05859 16.31,13.53911 L 3629.88,332.73 c 1.03,2.989 0.48,6.211 -1.55,9.051 -3.06,4.27 -8.99,7.039 -15.13,7.039" /><path
+         id="path58"
+         style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 3690.18,469.859 c -21.58,0 -39.13,-17.597 -39.13,-39.25 0,-21.648 17.55,-39.238 39.13,-39.238 21.59,0 39.16,17.59 39.16,39.238 0,21.653 -17.57,39.25 -39.16,39.25" /><path
+         id="path60"
+         style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 3706.29,350.738 -32.13,0.032 c -8.74,0 -16.7,-7.071 -16.7,-14.821 L 3657.3,15.3594 c 0,-3.8789 2,-7.73049 5.46,-10.58987 3.17,-2.59765 7.22,-4.097655 11.29,-4.097655 l 32.36,-0.050781 0.02,0 c 8.87,0.078125 16.66,6.957036 16.66,14.718706 l 0,320.6092 c 0,7.879 -7.86,14.789 -16.8,14.789" /><path
+         id="path62"
+         style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 4006.56,133.34 -26.83,-0.102 c -7.49,0 -13.77,-4.5 -16.56,-12.316 -9.8,-42.2814 -32,-64.1915 -65.66,-65.1603 -65.56,1.9492 -70.65,93.3283 -70.65,121.2893 0,55.758 19.31,115.929 73.22,117.519 32.54,-1 56.21,-24.332 63.31,-62.351 1.34,-7.758 7.3,-13.629 15.44,-14.649 l 28.71,-0.281 c 8.58,0.93 15.31,7.422 15.25,15.473 -10.16,68.707 -57.77,113.117 -121.4,113.117 l -2.2,-0.059 -2.49,0.059 c -92.54,0 -133.97,-86.367 -133.97,-171.957 0,-78.4728 34.93,-170.10169 133.45,-170.10169 l 4.72,0 c 62.04,0 108.87,43.48829 122.28,113.99969 0.3,3.36 -0.86,6.719 -3.24,9.45 -3.08,3.539 -7.99,5.808 -13.38,6.07" /><path
+         id="path64"
+         style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 4271.54,211.57 -150.04,0 c 3.43,42.141 30.77,85.789 77.1,87.391 49.26,-1.563 71.82,-44.199 72.94,-87.391 z m -73.04,135.129 c -101.32,0 -147.46,-89.57 -147.46,-172.777 0,-103.8439 57.37,-170.93372 146.15,-170.93372 63.51,0 111.92,32.08202 132.88,88.16012 1.09,3.2305 0.73,6.7305 -1.02,9.8396 -2.16,3.821 -6.09,6.614 -10.94,7.684 l -28.12,5.379 c -6.62,1.07 -15.78,-2.34 -19.02,-9.789 -13.71,-31.1409 -38.63,-48.8206 -69.84,-49.7932 -30.09,0.9726 -57.68,18.832 -70.28,45.5117 -10.31,21.7815 -11.84,43.2895 -12,65.1605 l 203.61,0.031 c 4.28,0 8.7,1.887 11.83,5.058 2.6,2.649 4,5.911 3.95,9.141 -0.47,80.891 -37.42,167.328 -139.74,167.328" /><path
+         id="path66"
+         style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 4593.31,182.98 c -19.07,13.692 -41.99,18.258 -64.88,22.829 l -43.97,8.152 c -31.52,5.187 -49.77,13.648 -49.77,41.488 0,37.961 47.11,41.133 56.3,41.379 31.61,-0.797 55.36,-14.887 66.87,-39.68 2.76,-5.839 8.85,-9.757 15.17,-9.757 1.09,0 2.18,0.121 3.24,0.347 l 27.42,6.063 c 4.48,0.988 8.65,4.07 10.89,8.058 1.78,3.172 2.17,6.621 1.1,9.711 -16.77,48.91 -59.41,74.758 -123.93,74.758 -58.25,-0.129 -120.5,-26.039 -120.5,-98.406 0,-49.473 31.07,-80.883 92.42,-93.371 l 49.24,-9.379 c 27.02,-5.172 54.65,-14.371 54.65,-43.383 0,-42.9492 -49.98,-47.3281 -65.09,-47.6406 -31.43,0.6719 -71.66,13.6524 -81.59,47.8316 -1.82,7.079 -10.67,12.051 -18.58,10.442 l -28.65,-5.922 c -4.34,-0.922 -8.3,-3.75 -10.6,-7.5508 -1.91,-3.1679 -2.46,-6.6797 -1.56,-9.8906 14.77,-53.1289 66.05,-85.16797 137.16,-85.70704 l 1.58,-0.01172 c 63.51,0 131.37,27.19146 131.37,103.46916 0,31.07 -13.96,58.839 -38.29,76.171" /><path
+         id="path68"
+         style="fill:#100f0d;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         d="m 3287.15,967.98 0,72.8 c 0.04,11.04 8.42,18.45 18.48,18.44 l 326.15,0.01 c 10.41,0 18.81,-7.59 18.81,-18.37 l 0,-62.43 c -0.1,-10.45 -8.93,-24.114 -24.57,-45.813 L 3457.09,691.41 c 62.68,1.488 129.04,-7.898 186,-39.922 12.87,-7.218 16.29,-17.929 17.34,-28.386 l 0,-77.68 c 0,-10.711 -11.72,-23.09 -24.02,-16.641 -100.39,52.598 -233.62,58.34 -344.65,-0.609 -11.33,-6.051 -23.21,6.137 -23.21,16.848 l 0,73.812 c 0,11.777 0.24,32.008 12.13,50.027 l 195.75,280.782 -170.41,0.039 c -10.43,0 -18.77,7.422 -18.87,18.3" /><path
+         id="path70"
+         style="fill:#100f0d;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         d="m 2097.45,513.461 -99.25,0 c -9.43,0.617 -16.98,7.73 -17.73,16.801 l 0.07,509.278 c 0,10.19 8.58,18.33 19.14,18.33 l 92.41,0.05 c 9.68,-0.54 17.42,-7.84 18.08,-17.1 l 0,-66.543 1.84,0 c 24.06,64.333 69.45,94.293 130.57,94.293 62.05,0 100.96,-29.96 128.75,-94.293 24.1,64.333 78.73,94.293 137.13,94.293 41.68,0 87.01,-17.12 114.8,-55.68 31.49,-42.89 25,-105.007 25,-159.687 l -0.06,-321.394 c 0,-10.161 -8.57,-18.348 -19.12,-18.348 l -99.1,0 c -9.98,0.617 -17.83,8.578 -17.83,18.301 l 0,270.008 c 0,21.421 1.83,75.027 -2.79,95.371 -7.43,34.324 -29.67,43.914 -58.34,43.914 -24.11,0 -49.13,-16.075 -59.32,-41.739 -10.18,-25.761 -9.24,-68.625 -9.24,-97.546 l 0,-269.961 c 0,-10.161 -8.57,-18.348 -19.14,-18.348 l -99.12,0 c -9.93,0.617 -17.8,8.578 -17.8,18.301 l -0.13,270.008 c 0,56.804 9.29,140.359 -61.09,140.359 -71.32,0 -68.54,-81.426 -68.54,-140.359 l -0.06,-269.961 c 0.04,-10.161 -8.54,-18.348 -19.13,-18.348" /><path
+         id="path72"
+         style="fill:#100f0d;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         d="m 3932.29,964.656 c -73.21,0 -77.82,-99.656 -77.82,-161.836 0,-62.144 -0.92,-195.019 76.92,-195.019 76.89,0 80.58,107.168 80.58,172.531 0,42.859 -1.83,94.285 -14.8,135.012 -11.15,35.379 -33.36,49.312 -64.88,49.312 z m -0.9,103.914 c 147.26,0 226.93,-126.441 226.93,-287.132 0,-155.426 -88.03,-278.676 -226.93,-278.676 -144.51,0 -223.26,126.476 -223.26,284.008 0,158.601 79.64,281.8 223.26,281.8" /><path
+         id="path74"
+         style="fill:#100f0d;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         d="m 4349.32,513.461 -98.87,0 c -9.96,0.617 -17.81,8.578 -17.81,18.301 l -0.14,509.508 c 0.82,9.28 9.06,16.6 19.02,16.6 l 92.07,0.05 c 8.68,-0.48 15.8,-6.38 17.62,-14.27 l 0,-77.927 1.88,0 c 27.75,69.667 66.68,102.847 135.19,102.847 44.47,0 88.03,-16.03 115.8,-59.98 C 4640,967.883 4640,899.316 4640,850.012 l 0,-320.492 c -1.11,-9.032 -9.16,-16.059 -18.96,-16.059 l -99.52,0 c -9.18,0.598 -16.56,7.379 -17.67,16.059 l 0,276.535 c 0,55.722 6.5,137.187 -62.07,137.187 -24.07,0 -46.27,-16.113 -57.4,-40.73 -13.91,-31.067 -15.75,-62.141 -15.75,-96.457 l 0,-274.246 c -0.17,-10.161 -8.75,-18.348 -19.31,-18.348" /><path
+         id="path76"
+         style="fill:#100f0d;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         d="m 3127.19,514.75 c -6.58,-5.871 -16,-6.262 -23.42,-2.309 -32.95,27.391 -38.87,40.09 -56.88,66.141 -54.47,-55.48 -93.04,-72.121 -163.57,-72.121 -83.57,0 -148.53,51.559 -148.53,154.66 0,80.527 43.61,135.305 105.8,162.172 53.84,23.633 129.04,27.937 186.58,34.402 l 0,12.871 c 0,23.614 1.85,51.551 -12.09,71.946 -12.03,18.258 -35.24,25.758 -55.69,25.758 -37.85,0 -71.48,-19.403 -79.76,-59.598 -1.68,-8.926 -8.24,-17.793 -17.23,-18.223 l -96.15,10.418 c -8.14,1.828 -17.15,8.321 -14.8,20.715 22.1,116.698 127.46,151.958 221.89,151.958 48.24,0 111.39,-12.88 149.45,-49.39 48.25,-45.127 43.6,-105.263 43.6,-170.783 l 0,-154.586 c 0,-46.5 19.33,-66.91 37.5,-91.972 6.29,-9.039 7.71,-19.75 -0.37,-26.379 -20.26,-16.981 -56.27,-48.231 -76.06,-65.899 l -0.27,0.219 z m -100.02,241.961 c 0,-38.672 0.92,-70.922 -18.58,-105.262 -15.78,-27.949 -40.86,-45.117 -68.71,-45.117 -38.02,0 -60.29,28.988 -60.29,71.969 0,84.492 75.82,99.875 147.58,99.875 l 0,-21.465" /><path
+         id="path78"
+         style="fill:#100f0d;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         d="m 1826.45,514.75 c -6.56,-5.871 -16.05,-6.262 -23.47,-2.309 -32.95,27.391 -38.85,40.09 -56.88,66.141 -54.44,-55.48 -93.03,-72.121 -163.6,-72.121 -83.54,0 -148.52,51.559 -148.52,154.66 0,80.527 43.65,135.305 105.84,162.172 53.85,23.633 129.04,27.937 186.58,34.402 l 0,12.871 c 0,23.614 1.87,51.551 -12.07,71.946 -12.06,18.258 -35.29,25.758 -55.68,25.758 -37.85,0 -71.52,-19.403 -79.77,-59.598 -1.72,-8.926 -8.25,-17.793 -17.23,-18.223 l -96.19,10.418 c -8.12,1.828 -17.14,8.321 -14.81,20.715 22.1,116.698 127.47,151.958 221.89,151.958 48.3,0 111.4,-12.88 149.47,-49.39 48.27,-45.127 43.61,-105.263 43.61,-170.783 l 0,-154.586 c 0,-46.5 19.34,-66.91 37.46,-91.972 6.32,-9.039 7.75,-19.75 -0.31,-26.379 -20.28,-16.981 -56.31,-48.231 -76.09,-65.899 l -0.23,0.219 z M 1726.4,756.711 c 0,-38.672 0.91,-70.922 -18.55,-105.262 -15.77,-27.949 -40.87,-45.117 -68.68,-45.117 -38.1,0 -60.36,28.988 -60.36,71.969 0,84.492 75.8,99.875 147.59,99.875 l 0,-21.465" /></g></g></svg>
\ No newline at end of file
diff --git a/public/static/images/partners/google-cloud.svg b/public/static/images/partners/google-cloud.svg
new file mode 100644
index 000000000..ae6d94748
--- /dev/null
+++ b/public/static/images/partners/google-cloud.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 181 28"><defs><style>.cls-1{fill:#ea4335;}.cls-2{fill:#4285f4;}.cls-3{fill:#34a853;}.cls-4{fill:#fbbc05;}.cls-5{fill:#5f6368;}</style></defs><path class="cls-1" d="M21.85,7.41l1,0,2.85-2.85.14-1.21A12.81,12.81,0,0,0,5,9.6a1.55,1.55,0,0,1,1-.06l5.7-.94s.29-.48.44-.45a7.11,7.11,0,0,1,9.73-.74Z"/><path class="cls-2" d="M29.76,9.6a12.84,12.84,0,0,0-3.87-6.24l-4,4A7.11,7.11,0,0,1,24.5,13v.71a3.56,3.56,0,1,1,0,7.12H17.38l-.71.72v4.27l.71.71H24.5A9.26,9.26,0,0,0,29.76,9.6Z"/><path class="cls-3" d="M10.25,26.49h7.12v-5.7H10.25a3.54,3.54,0,0,1-1.47-.32l-1,.31L4.91,23.63l-.25,1A9.21,9.21,0,0,0,10.25,26.49Z"/><path class="cls-4" d="M10.25,8A9.26,9.26,0,0,0,4.66,24.6l4.13-4.13a3.56,3.56,0,1,1,4.71-4.71l4.13-4.13A9.25,9.25,0,0,0,10.25,8Z"/><path class="cls-5" d="M52.79,22.51a9.11,9.11,0,0,1-6.6-2.71,8.8,8.8,0,0,1-2.77-6.52,8.81,8.81,0,0,1,2.77-6.52A9.11,9.11,0,0,1,52.79,4a8.84,8.84,0,0,1,6.33,2.55L57.34,8.36a6.41,6.41,0,0,0-4.55-1.8,6.34,6.34,0,0,0-4.7,2,6.53,6.53,0,0,0-1.93,4.75A6.53,6.53,0,0,0,48.09,18a6.71,6.71,0,0,0,9.36.11A5.32,5.32,0,0,0,58.82,15h-6V12.44h8.49A8.12,8.12,0,0,1,61.41,14a8,8,0,0,1-2.19,5.9A8.51,8.51,0,0,1,52.79,22.51Zm19.74-1.7a6.12,6.12,0,0,1-8.47,0,5.7,5.7,0,0,1-1.73-4.25,5.71,5.71,0,0,1,1.73-4.25,6.13,6.13,0,0,1,8.47,0,5.71,5.71,0,0,1,1.73,4.25A5.7,5.7,0,0,1,72.52,20.81Zm-6.6-1.67a3.24,3.24,0,0,0,4.73,0,3.56,3.56,0,0,0,1-2.58,3.57,3.57,0,0,0-1-2.59,3.29,3.29,0,0,0-4.75,0,3.57,3.57,0,0,0-1,2.59A3.56,3.56,0,0,0,65.92,19.14Zm19.62,1.67a6.12,6.12,0,0,1-8.47,0,5.7,5.7,0,0,1-1.73-4.25,5.71,5.71,0,0,1,1.73-4.25,6.12,6.12,0,0,1,8.47,0,5.71,5.71,0,0,1,1.73,4.25A5.7,5.7,0,0,1,85.55,20.81Zm-6.6-1.67a3.24,3.24,0,0,0,4.73,0,3.56,3.56,0,0,0,1-2.58,3.57,3.57,0,0,0-1-2.59,3.29,3.29,0,0,0-4.75,0,3.57,3.57,0,0,0-1,2.59A3.56,3.56,0,0,0,78.94,19.14Zm15.16,8.71a5.24,5.24,0,0,1-3.33-1.06,6.13,6.13,0,0,1-1.94-2.46l2.28-.95a3.84,3.84,0,0,0,1.13,1.49,2.85,2.85,0,0,0,1.87.63,3,3,0,0,0,2.33-.9A3.65,3.65,0,0,0,97.28,22v-.86h-.09a3.81,3.81,0,0,1-3.13,1.35,5.43,5.43,0,0,1-4-1.74,5.75,5.75,0,0,1-1.71-4.19,5.81,5.81,0,0,1,1.71-4.22,5.42,5.42,0,0,1,4-1.75A4.3,4.3,0,0,1,95.9,11a3.7,3.7,0,0,1,1.3.95h.09V11h2.48V21.65a6.21,6.21,0,0,1-1.59,4.65A5.6,5.6,0,0,1,94.11,27.85Zm.18-7.68a2.91,2.91,0,0,0,2.26-1,3.7,3.7,0,0,0,.91-2.56A3.78,3.78,0,0,0,96.55,14a2.9,2.9,0,0,0-2.26-1,3.09,3.09,0,0,0-2.34,1,3.65,3.65,0,0,0-1,2.59,3.58,3.58,0,0,0,1,2.56A3.1,3.1,0,0,0,94.29,20.17Zm9.89-15.5V22.15h-2.61V4.67Zm7.16,17.84a5.68,5.68,0,0,1-4.21-1.71,5.79,5.79,0,0,1-1.69-4.24,5.86,5.86,0,0,1,1.63-4.28,5.36,5.36,0,0,1,4-1.67,5.05,5.05,0,0,1,2,.39,4.71,4.71,0,0,1,1.53,1,7,7,0,0,1,1,1.21,7.15,7.15,0,0,1,.59,1.17l.27.68-8,3.29a3,3,0,0,0,2.88,1.8,3.41,3.41,0,0,0,2.93-1.65l2,1.35a6.59,6.59,0,0,1-1.92,1.82A5.44,5.44,0,0,1,111.34,22.51ZM108,16.38l5.32-2.21a1.84,1.84,0,0,0-.83-.91,2.71,2.71,0,0,0-1.37-.35,3.09,3.09,0,0,0-2.15.95A3.17,3.17,0,0,0,108,16.38Z"/><path class="cls-5" d="M130.13,22.51a8.24,8.24,0,0,1-8.38-8.43,8.24,8.24,0,0,1,8.38-8.43,7.46,7.46,0,0,1,5.93,2.64l-1.44,1.4a5.44,5.44,0,0,0-4.48-2.05,6.11,6.11,0,0,0-4.45,1.78,6.24,6.24,0,0,0-1.81,4.66,6.24,6.24,0,0,0,1.81,4.66,6.11,6.11,0,0,0,4.45,1.78,6.36,6.36,0,0,0,5-2.34l1.44,1.44a7.86,7.86,0,0,1-2.77,2.11A8.48,8.48,0,0,1,130.13,22.51Z"/><path class="cls-5" d="M140.45,22.15h-2.07V6h2.07Z"/><path class="cls-5" d="M143.83,12.43a5.79,5.79,0,0,1,8.16,0,5.85,5.85,0,0,1,1.6,4.2,5.85,5.85,0,0,1-1.6,4.2,5.79,5.79,0,0,1-8.16,0,5.85,5.85,0,0,1-1.6-4.2A5.85,5.85,0,0,1,143.83,12.43Zm1.54,7.1a3.49,3.49,0,0,0,5.07,0,4,4,0,0,0,1.07-2.9,4,4,0,0,0-1.07-2.9,3.49,3.49,0,0,0-5.07,0,4,4,0,0,0-1.07,2.9A4,4,0,0,0,145.38,19.52Z"/><path class="cls-5" d="M165.06,22.15h-2V20.62H163A3.85,3.85,0,0,1,161.54,22a4.08,4.08,0,0,1-2.05.55,3.89,3.89,0,0,1-3.14-1.26,5,5,0,0,1-1.07-3.38V11.11h2.07v6.42q0,3.09,2.73,3.09a2.54,2.54,0,0,0,2.1-1,3.77,3.77,0,0,0,.81-2.39V11.11h2.07Z"/><path class="cls-5" d="M172.09,22.51a4.86,4.86,0,0,1-3.7-1.69,6,6,0,0,1-1.55-4.19,6,6,0,0,1,1.55-4.19,4.86,4.86,0,0,1,3.7-1.69,4.69,4.69,0,0,1,2.26.54,3.83,3.83,0,0,1,1.5,1.35h.09l-.09-1.53V6h2.07V22.15h-2V20.62h-.09a3.83,3.83,0,0,1-1.5,1.35A4.69,4.69,0,0,1,172.09,22.51Zm.34-1.89a3.3,3.3,0,0,0,2.49-1.08,4.05,4.05,0,0,0,1-2.91,4.05,4.05,0,0,0-1-2.91,3.38,3.38,0,0,0-5,0,4,4,0,0,0-1,2.9,4,4,0,0,0,1,2.9A3.3,3.3,0,0,0,172.43,20.62Z"/></svg>
\ No newline at end of file
diff --git a/public/static/images/partners/shopify.svg b/public/static/images/partners/shopify.svg
new file mode 100644
index 000000000..b81e58f49
--- /dev/null
+++ b/public/static/images/partners/shopify.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 302.1 612 192"><path fill="#95BF47" d="M131.5 341.9c-.1-.9-.9-1.3-1.5-1.3s-13.7-1-13.7-1-9.1-9.1-10.2-10c-1-1-2.9-.7-3.7-.5-.1 0-2 .6-5.1 1.6-3.1-8.9-8.4-17-17.9-17h-.9c-2.6-3.4-6-5-8.8-5-22 0-32.6 27.5-35.9 41.5-8.6 2.7-14.7 4.5-15.4 4.8-4.8 1.5-4.9 1.6-5.5 6.1-.5 3.4-13 100.1-13 100.1l97.3 18.2L150 468c.1-.2-18.4-125.2-18.5-126.1zm-39.6-9.8c-2.4.7-5.3 1.6-8.2 2.6v-1.8c0-5.4-.7-9.8-2-13.3 5 .6 8.1 6.1 10.2 12.5zm-16.3-11.4c1.3 3.4 2.2 8.2 2.2 14.8v1c-5.4 1.7-11.1 3.4-17 5.3 3.3-12.6 9.6-18.8 14.8-21.1zm-6.4-6.2c1 0 2 .4 2.8 1-7.1 3.3-14.6 11.6-17.7 28.4-4.7 1.5-9.2 2.8-13.5 4.2 3.6-12.8 12.6-33.6 28.4-33.6z"/><path fill="#5E8E3E" d="M130 340.4c-.6 0-13.7-1-13.7-1s-9.1-9.1-10.2-10c-.4-.4-.9-.6-1.3-.6l-7.3 150.6 52.8-11.4s-18.5-125.2-18.6-126.1c-.4-.9-1.1-1.3-1.7-1.5z"/><path fill="#FFF" d="M79.4 369.6L73 388.9s-5.8-3.1-12.7-3.1c-10.3 0-10.8 6.5-10.8 8.1 0 8.8 23 12.2 23 32.9 0 16.3-10.3 26.8-24.2 26.8-16.8 0-25.2-10.4-25.2-10.4l4.5-14.8s8.8 7.6 16.2 7.6c4.9 0 6.9-3.8 6.9-6.6 0-11.5-18.8-12-18.8-31 0-15.9 11.4-31.3 34.5-31.3 8.6-.1 13 2.5 13 2.5z"/><path d="M211.6 405.9c-5.3-2.8-8-5.3-8-8.6 0-4.2 3.8-6.9 9.7-6.9 6.9 0 13 2.8 13 2.8l4.8-14.7s-4.4-3.4-17.4-3.4c-18.1 0-30.7 10.4-30.7 25 0 8.3 5.9 14.6 13.7 19.1 6.4 3.5 8.6 6.1 8.6 9.9 0 3.9-3.2 7.1-9.1 7.1-8.7 0-17-4.5-17-4.5l-5.1 14.7s7.6 5.1 20.4 5.1c18.6 0 32.1-9.2 32.1-25.7-.2-9-6.9-15.2-15-19.9zM285.8 374.9c-9.2 0-16.4 4.4-21.9 11l-.2-.1 8-41.6H251l-20.2 106h20.7l6.9-36.2c2.7-13.7 9.8-22.2 16.4-22.2 4.7 0 6.5 3.2 6.5 7.7 0 2.8-.2 6.4-.9 9.2l-7.8 41.5h20.7l8.1-42.8c.9-4.5 1.5-9.9 1.5-13.6-.1-11.9-6.2-18.9-17.1-18.9zM349.7 374.9c-25 0-41.5 22.5-41.5 47.6 0 16 9.9 29 28.5 29 24.5 0 41-21.9 41-47.6.1-14.9-8.5-29-28-29zm-10.2 60.8c-7.1 0-10-6-10-13.6 0-11.9 6.1-31.2 17.4-31.2 7.3 0 9.8 6.4 9.8 12.5 0 12.7-6.3 32.3-17.2 32.3zM430.8 374.9c-14 0-21.9 12.4-21.9 12.4h-.2l1.2-11.1h-18.4c-.9 7.5-2.6 19-4.2 27.5L373 479.6h20.7l5.8-30.7h.5s4.3 2.7 12.1 2.7c24.4 0 40.3-25 40.3-50.2-.1-14-6.4-26.5-21.6-26.5zm-19.8 61c-5.4 0-8.6-3.1-8.6-3.1l3.4-19.3c2.4-13 9.2-21.5 16.4-21.5 6.4 0 8.3 5.9 8.3 11.4.1 13.4-7.9 32.5-19.5 32.5zM481.9 345.2c-6.6 0-11.9 5.3-11.9 12 0 6.1 3.9 10.4 9.8 10.4h.2c6.5 0 12-4.4 12.1-12 .1-6.1-4-10.4-10.2-10.4zM452.9 450.1h20.7l14-73.6h-20.8M540.4 376.4H526l.7-3.4c1.2-7.1 5.4-13.3 12.4-13.3 3.7 0 6.6 1.1 6.6 1.1l4-16.3s-3.5-1.8-11.3-1.8c-7.3 0-14.7 2.1-20.3 6.9-7.1 6-10.4 14.7-12 23.5l-.6 3.4h-9.7l-3.1 15.7h9.7l-11 58h20.7l11-58h14.3l3-15.8zM590.3 376.5s-13 32.7-18.7 50.6h-.2c-.4-5.8-5.1-50.6-5.1-50.6h-21.8l12.5 67.4c.2 1.5.1 2.4-.5 3.4-2.4 4.7-6.5 9.2-11.3 12.5-3.9 2.8-8.3 4.7-11.8 5.9l5.8 17.6c4.2-.9 13-4.4 20.3-11.3 9.4-8.8 18.2-22.5 27.2-41.1l25.3-54.5h-21.7z"/></svg>
\ No newline at end of file
diff --git a/public/static/images/services/back-end/api-restful/api-hero.webp b/public/static/images/services/back-end/api-restful/api-hero.webp
new file mode 100644
index 000000000..08607afd2
Binary files /dev/null and b/public/static/images/services/back-end/api-restful/api-hero.webp differ
diff --git a/public/static/images/services/back-end/api-restful/api-robuste.webp b/public/static/images/services/back-end/api-restful/api-robuste.webp
new file mode 100644
index 000000000..028afd7a7
Binary files /dev/null and b/public/static/images/services/back-end/api-restful/api-robuste.webp differ
diff --git a/public/static/images/services/back-end/api-restful/excellence-api.webp b/public/static/images/services/back-end/api-restful/excellence-api.webp
new file mode 100644
index 000000000..dbb682021
Binary files /dev/null and b/public/static/images/services/back-end/api-restful/excellence-api.webp differ
diff --git a/public/static/images/services/back-end/api-restful/service-complementaire.webp b/public/static/images/services/back-end/api-restful/service-complementaire.webp
new file mode 100644
index 000000000..b7c87aae0
Binary files /dev/null and b/public/static/images/services/back-end/api-restful/service-complementaire.webp differ
diff --git a/public/static/images/services/back-end/back-expert.webp b/public/static/images/services/back-end/back-expert.webp
new file mode 100644
index 000000000..d28d35fac
Binary files /dev/null and b/public/static/images/services/back-end/back-expert.webp differ
diff --git "a/public/static/images/services/back-end/bases-de-donn\303\251es/database-hero.webp" "b/public/static/images/services/back-end/bases-de-donn\303\251es/database-hero.webp"
new file mode 100644
index 000000000..e7517d26e
Binary files /dev/null and "b/public/static/images/services/back-end/bases-de-donn\303\251es/database-hero.webp" differ
diff --git "a/public/static/images/services/back-end/bases-de-donn\303\251es/excellence-database.webp" "b/public/static/images/services/back-end/bases-de-donn\303\251es/excellence-database.webp"
new file mode 100644
index 000000000..7079ae969
Binary files /dev/null and "b/public/static/images/services/back-end/bases-de-donn\303\251es/excellence-database.webp" differ
diff --git "a/public/static/images/services/back-end/bases-de-donn\303\251es/service-complementaire.webp" "b/public/static/images/services/back-end/bases-de-donn\303\251es/service-complementaire.webp"
new file mode 100644
index 000000000..4e44fa37e
Binary files /dev/null and "b/public/static/images/services/back-end/bases-de-donn\303\251es/service-complementaire.webp" differ
diff --git "a/public/static/images/services/back-end/bases-de-donn\303\251es/solution-moderne.webp" "b/public/static/images/services/back-end/bases-de-donn\303\251es/solution-moderne.webp"
new file mode 100644
index 000000000..359ca6cbd
Binary files /dev/null and "b/public/static/images/services/back-end/bases-de-donn\303\251es/solution-moderne.webp" differ
diff --git a/public/static/images/services/back-end/bots/bot-intelligent.webp b/public/static/images/services/back-end/bots/bot-intelligent.webp
new file mode 100644
index 000000000..af031cb66
Binary files /dev/null and b/public/static/images/services/back-end/bots/bot-intelligent.webp differ
diff --git a/public/static/images/services/back-end/bots/bots-hero.webp b/public/static/images/services/back-end/bots/bots-hero.webp
new file mode 100644
index 000000000..7ee6e444e
Binary files /dev/null and b/public/static/images/services/back-end/bots/bots-hero.webp differ
diff --git a/public/static/images/services/back-end/bots/excellence-developpement.webp b/public/static/images/services/back-end/bots/excellence-developpement.webp
new file mode 100644
index 000000000..dfa76df70
Binary files /dev/null and b/public/static/images/services/back-end/bots/excellence-developpement.webp differ
diff --git a/public/static/images/services/back-end/bots/service-complementaire.webp b/public/static/images/services/back-end/bots/service-complementaire.webp
new file mode 100644
index 000000000..35be17eb1
Binary files /dev/null and b/public/static/images/services/back-end/bots/service-complementaire.webp differ
diff --git a/public/static/images/services/back-end/dev-back-hero.webp b/public/static/images/services/back-end/dev-back-hero.webp
new file mode 100644
index 000000000..1da473e3c
Binary files /dev/null and b/public/static/images/services/back-end/dev-back-hero.webp differ
diff --git a/public/static/images/services/back-end/microservices/architecture-hero.webp b/public/static/images/services/back-end/microservices/architecture-hero.webp
new file mode 100644
index 000000000..df3054fa2
Binary files /dev/null and b/public/static/images/services/back-end/microservices/architecture-hero.webp differ
diff --git a/public/static/images/services/back-end/microservices/excellence-microservice.webp b/public/static/images/services/back-end/microservices/excellence-microservice.webp
new file mode 100644
index 000000000..7af05eef7
Binary files /dev/null and b/public/static/images/services/back-end/microservices/excellence-microservice.webp differ
diff --git a/public/static/images/services/back-end/microservices/moderne-flexible.webp b/public/static/images/services/back-end/microservices/moderne-flexible.webp
new file mode 100644
index 000000000..74d5098d2
Binary files /dev/null and b/public/static/images/services/back-end/microservices/moderne-flexible.webp differ
diff --git a/public/static/images/services/back-end/microservices/service-complementaire.webp b/public/static/images/services/back-end/microservices/service-complementaire.webp
new file mode 100644
index 000000000..c9709d0dc
Binary files /dev/null and b/public/static/images/services/back-end/microservices/service-complementaire.webp differ
diff --git a/public/static/images/services/back-end/solutions-cloud/cloud-hero.webp b/public/static/images/services/back-end/solutions-cloud/cloud-hero.webp
new file mode 100644
index 000000000..619ee5aac
Binary files /dev/null and b/public/static/images/services/back-end/solutions-cloud/cloud-hero.webp differ
diff --git a/public/static/images/services/back-end/solutions-cloud/infrastructure-modern.webp b/public/static/images/services/back-end/solutions-cloud/infrastructure-modern.webp
new file mode 100644
index 000000000..bb917a30c
Binary files /dev/null and b/public/static/images/services/back-end/solutions-cloud/infrastructure-modern.webp differ
diff --git a/public/static/images/services/back-end/solutions-cloud/multi-cloud.webp b/public/static/images/services/back-end/solutions-cloud/multi-cloud.webp
new file mode 100644
index 000000000..244f6ea8b
Binary files /dev/null and b/public/static/images/services/back-end/solutions-cloud/multi-cloud.webp differ
diff --git a/public/static/images/services/back-end/solutions-cloud/service-complementaire.webp b/public/static/images/services/back-end/solutions-cloud/service-complementaire.webp
new file mode 100644
index 000000000..082421179
Binary files /dev/null and b/public/static/images/services/back-end/solutions-cloud/service-complementaire.webp differ
diff --git a/public/static/images/services/design/audit-ui/analyse-ui-ux.webp b/public/static/images/services/design/audit-ui/analyse-ui-ux.webp
new file mode 100644
index 000000000..e73b653f8
Binary files /dev/null and b/public/static/images/services/design/audit-ui/analyse-ui-ux.webp differ
diff --git a/public/static/images/services/design/audit-ui/audit-hero.webp b/public/static/images/services/design/audit-ui/audit-hero.webp
new file mode 100644
index 000000000..5367ce7f4
Binary files /dev/null and b/public/static/images/services/design/audit-ui/audit-hero.webp differ
diff --git a/public/static/images/services/design/audit-ui/optimisation-donnees.webp b/public/static/images/services/design/audit-ui/optimisation-donnees.webp
new file mode 100644
index 000000000..4b9ce1a7e
Binary files /dev/null and b/public/static/images/services/design/audit-ui/optimisation-donnees.webp differ
diff --git a/public/static/images/services/design/audit-ui/service-complementaire.webp b/public/static/images/services/design/audit-ui/service-complementaire.webp
new file mode 100644
index 000000000..0523e51df
Binary files /dev/null and b/public/static/images/services/design/audit-ui/service-complementaire.webp differ
diff --git a/public/static/images/services/design/charte-graphique/charte-graphique-hero.webp b/public/static/images/services/design/charte-graphique/charte-graphique-hero.webp
new file mode 100644
index 000000000..47b7c7045
Binary files /dev/null and b/public/static/images/services/design/charte-graphique/charte-graphique-hero.webp differ
diff --git a/public/static/images/services/design/charte-graphique/excellence-branding.webp b/public/static/images/services/design/charte-graphique/excellence-branding.webp
new file mode 100644
index 000000000..9699243e3
Binary files /dev/null and b/public/static/images/services/design/charte-graphique/excellence-branding.webp differ
diff --git a/public/static/images/services/design/charte-graphique/identite-distinctive.webp b/public/static/images/services/design/charte-graphique/identite-distinctive.webp
new file mode 100644
index 000000000..7f1da469d
Binary files /dev/null and b/public/static/images/services/design/charte-graphique/identite-distinctive.webp differ
diff --git a/public/static/images/services/design/charte-graphique/service-complementaire.webp b/public/static/images/services/design/charte-graphique/service-complementaire.webp
new file mode 100644
index 000000000..8b37bb190
Binary files /dev/null and b/public/static/images/services/design/charte-graphique/service-complementaire.webp differ
diff --git a/public/static/images/services/design/hero-design.webp b/public/static/images/services/design/hero-design.webp
new file mode 100644
index 000000000..8b60f1676
Binary files /dev/null and b/public/static/images/services/design/hero-design.webp differ
diff --git a/public/static/images/services/design/maquettage-ui/design-ui-professionnel.webp b/public/static/images/services/design/maquettage-ui/design-ui-professionnel.webp
new file mode 100644
index 000000000..29890d233
Binary files /dev/null and b/public/static/images/services/design/maquettage-ui/design-ui-professionnel.webp differ
diff --git a/public/static/images/services/design/maquettage-ui/excellence-design-ui.webp b/public/static/images/services/design/maquettage-ui/excellence-design-ui.webp
new file mode 100644
index 000000000..0438efbca
Binary files /dev/null and b/public/static/images/services/design/maquettage-ui/excellence-design-ui.webp differ
diff --git a/public/static/images/services/design/maquettage-ui/hero-ui.webp b/public/static/images/services/design/maquettage-ui/hero-ui.webp
new file mode 100644
index 000000000..8ed01e519
Binary files /dev/null and b/public/static/images/services/design/maquettage-ui/hero-ui.webp differ
diff --git a/public/static/images/services/design/moodboard/direction-artistique.webp b/public/static/images/services/design/moodboard/direction-artistique.webp
new file mode 100644
index 000000000..92d3c6c12
Binary files /dev/null and b/public/static/images/services/design/moodboard/direction-artistique.webp differ
diff --git a/public/static/images/services/design/moodboard/hero-moodboard.jpg b/public/static/images/services/design/moodboard/hero-moodboard.jpg
new file mode 100644
index 000000000..72e96da8a
Binary files /dev/null and b/public/static/images/services/design/moodboard/hero-moodboard.jpg differ
diff --git a/public/static/images/services/design/moodboard/services-supplementaires.webp b/public/static/images/services/design/moodboard/services-supplementaires.webp
new file mode 100644
index 000000000..828fc797d
Binary files /dev/null and b/public/static/images/services/design/moodboard/services-supplementaires.webp differ
diff --git a/public/static/images/services/design/moodboard/vision-claire.webp b/public/static/images/services/design/moodboard/vision-claire.webp
new file mode 100644
index 000000000..cff2d4d1a
Binary files /dev/null and b/public/static/images/services/design/moodboard/vision-claire.webp differ
diff --git a/public/static/images/services/design/showcase-design.webp b/public/static/images/services/design/showcase-design.webp
new file mode 100644
index 000000000..84da80a39
Binary files /dev/null and b/public/static/images/services/design/showcase-design.webp differ
diff --git a/public/static/images/services/design/wireframes/design-structure.webp b/public/static/images/services/design/wireframes/design-structure.webp
new file mode 100644
index 000000000..1b0965b10
Binary files /dev/null and b/public/static/images/services/design/wireframes/design-structure.webp differ
diff --git a/public/static/images/services/design/wireframes/excellence-conception-ux.webp b/public/static/images/services/design/wireframes/excellence-conception-ux.webp
new file mode 100644
index 000000000..b7a505c0c
Binary files /dev/null and b/public/static/images/services/design/wireframes/excellence-conception-ux.webp differ
diff --git a/public/static/images/services/design/wireframes/hero-wireframes.webp b/public/static/images/services/design/wireframes/hero-wireframes.webp
new file mode 100644
index 000000000..bff71ee6b
Binary files /dev/null and b/public/static/images/services/design/wireframes/hero-wireframes.webp differ
diff --git a/public/static/images/services/frontend/desktop/frontend-app.webp b/public/static/images/services/frontend/desktop/frontend-app.webp
new file mode 100644
index 000000000..2d2d04f7b
Binary files /dev/null and b/public/static/images/services/frontend/desktop/frontend-app.webp differ
diff --git a/public/static/images/services/frontend/desktop/frontend-complementaire.webp b/public/static/images/services/frontend/desktop/frontend-complementaire.webp
new file mode 100644
index 000000000..7d0744b12
Binary files /dev/null and b/public/static/images/services/frontend/desktop/frontend-complementaire.webp differ
diff --git a/public/static/images/services/frontend/desktop/frontend-developpement.webp b/public/static/images/services/frontend/desktop/frontend-developpement.webp
new file mode 100644
index 000000000..88cb3bfb4
Binary files /dev/null and b/public/static/images/services/frontend/desktop/frontend-developpement.webp differ
diff --git a/public/static/images/services/frontend/desktop/frontend-systeme.webp b/public/static/images/services/frontend/desktop/frontend-systeme.webp
new file mode 100644
index 000000000..fc9ee308e
Binary files /dev/null and b/public/static/images/services/frontend/desktop/frontend-systeme.webp differ
diff --git a/public/static/images/services/frontend/frontend-avantages.webp b/public/static/images/services/frontend/frontend-avantages.webp
new file mode 100644
index 000000000..e69e531a3
Binary files /dev/null and b/public/static/images/services/frontend/frontend-avantages.webp differ
diff --git a/public/static/images/services/frontend/frontend-developpement.webp b/public/static/images/services/frontend/frontend-developpement.webp
new file mode 100644
index 000000000..bce4cff3d
Binary files /dev/null and b/public/static/images/services/frontend/frontend-developpement.webp differ
diff --git a/public/static/images/services/frontend/frontend-expertise.webp b/public/static/images/services/frontend/frontend-expertise.webp
new file mode 100644
index 000000000..2e782294d
Binary files /dev/null and b/public/static/images/services/frontend/frontend-expertise.webp differ
diff --git a/public/static/images/services/frontend/mobile/frontend-complementaire.webp b/public/static/images/services/frontend/mobile/frontend-complementaire.webp
new file mode 100644
index 000000000..690b141eb
Binary files /dev/null and b/public/static/images/services/frontend/mobile/frontend-complementaire.webp differ
diff --git a/public/static/images/services/frontend/mobile/frontend-multiplatforme.webp b/public/static/images/services/frontend/mobile/frontend-multiplatforme.webp
new file mode 100644
index 000000000..152d2cd17
Binary files /dev/null and b/public/static/images/services/frontend/mobile/frontend-multiplatforme.webp differ
diff --git a/public/static/images/services/frontend/mobile/frontend-react.webp b/public/static/images/services/frontend/mobile/frontend-react.webp
new file mode 100644
index 000000000..73bdcfcc7
Binary files /dev/null and b/public/static/images/services/frontend/mobile/frontend-react.webp differ
diff --git a/public/static/images/services/frontend/mobile/frontend-ux.webp b/public/static/images/services/frontend/mobile/frontend-ux.webp
new file mode 100644
index 000000000..203c9fd8e
Binary files /dev/null and b/public/static/images/services/frontend/mobile/frontend-ux.webp differ
diff --git a/public/static/images/services/frontend/pwa/frontend-mobile.webp b/public/static/images/services/frontend/pwa/frontend-mobile.webp
new file mode 100644
index 000000000..577f9899d
Binary files /dev/null and b/public/static/images/services/frontend/pwa/frontend-mobile.webp differ
diff --git a/public/static/images/services/frontend/pwa/frontend-nowifi.webp b/public/static/images/services/frontend/pwa/frontend-nowifi.webp
new file mode 100644
index 000000000..4e4fefc6f
Binary files /dev/null and b/public/static/images/services/frontend/pwa/frontend-nowifi.webp differ
diff --git a/public/static/images/services/frontend/pwa/frontend-pwa.webp b/public/static/images/services/frontend/pwa/frontend-pwa.webp
new file mode 100644
index 000000000..1c464456b
Binary files /dev/null and b/public/static/images/services/frontend/pwa/frontend-pwa.webp differ
diff --git a/public/static/images/services/frontend/pwa/frontend-seo.webp b/public/static/images/services/frontend/pwa/frontend-seo.webp
new file mode 100644
index 000000000..8d7a783da
Binary files /dev/null and b/public/static/images/services/frontend/pwa/frontend-seo.webp differ
diff --git a/public/static/images/services/frontend/web/frontend-design.webp b/public/static/images/services/frontend/web/frontend-design.webp
new file mode 100644
index 000000000..1b64d9640
Binary files /dev/null and b/public/static/images/services/frontend/web/frontend-design.webp differ
diff --git a/public/static/images/services/frontend/web/frontend-techniques.webp b/public/static/images/services/frontend/web/frontend-techniques.webp
new file mode 100644
index 000000000..94937ebf5
Binary files /dev/null and b/public/static/images/services/frontend/web/frontend-techniques.webp differ
diff --git a/public/static/images/services/frontend/web/frontend-technologie.webp b/public/static/images/services/frontend/web/frontend-technologie.webp
new file mode 100644
index 000000000..3196d2cbb
Binary files /dev/null and b/public/static/images/services/frontend/web/frontend-technologie.webp differ
diff --git a/public/static/images/services/frontend/web/frontend-web.webp b/public/static/images/services/frontend/web/frontend-web.webp
new file mode 100644
index 000000000..663eca629
Binary files /dev/null and b/public/static/images/services/frontend/web/frontend-web.webp differ
diff --git a/public/static/images/services/integration/integration-ecommerce.webp b/public/static/images/services/integration/integration-ecommerce.webp
new file mode 100644
index 000000000..a0d9cebda
Binary files /dev/null and b/public/static/images/services/integration/integration-ecommerce.webp differ
diff --git a/public/static/images/services/integration/integration-team.webp b/public/static/images/services/integration/integration-team.webp
new file mode 100644
index 000000000..67ad8b9bc
Binary files /dev/null and b/public/static/images/services/integration/integration-team.webp differ
diff --git a/public/static/images/services/integration/prestashop-buy.webp b/public/static/images/services/integration/prestashop-buy.webp
new file mode 100644
index 000000000..3f34cb669
Binary files /dev/null and b/public/static/images/services/integration/prestashop-buy.webp differ
diff --git a/public/static/images/services/integration/prestashop-complementaire.webp b/public/static/images/services/integration/prestashop-complementaire.webp
new file mode 100644
index 000000000..773d84e64
Binary files /dev/null and b/public/static/images/services/integration/prestashop-complementaire.webp differ
diff --git a/public/static/images/services/integration/prestashop-control.webp b/public/static/images/services/integration/prestashop-control.webp
new file mode 100644
index 000000000..11fb0aabb
Binary files /dev/null and b/public/static/images/services/integration/prestashop-control.webp differ
diff --git a/public/static/images/services/integration/prestashop-shop.webp b/public/static/images/services/integration/prestashop-shop.webp
new file mode 100644
index 000000000..f06df0af4
Binary files /dev/null and b/public/static/images/services/integration/prestashop-shop.webp differ
diff --git a/public/static/images/services/integration/shopify-buy.webp b/public/static/images/services/integration/shopify-buy.webp
new file mode 100644
index 000000000..2a8ac464a
Binary files /dev/null and b/public/static/images/services/integration/shopify-buy.webp differ
diff --git a/public/static/images/services/integration/shopify-complementaire.webp b/public/static/images/services/integration/shopify-complementaire.webp
new file mode 100644
index 000000000..bdff8700e
Binary files /dev/null and b/public/static/images/services/integration/shopify-complementaire.webp differ
diff --git a/public/static/images/services/integration/shopify-mobile.webp b/public/static/images/services/integration/shopify-mobile.webp
new file mode 100644
index 000000000..bbc246f31
Binary files /dev/null and b/public/static/images/services/integration/shopify-mobile.webp differ
diff --git a/public/static/images/services/integration/squarespace-complementaire.webp b/public/static/images/services/integration/squarespace-complementaire.webp
new file mode 100644
index 000000000..58f4df8f7
Binary files /dev/null and b/public/static/images/services/integration/squarespace-complementaire.webp differ
diff --git a/public/static/images/services/integration/squarespace-design.webp b/public/static/images/services/integration/squarespace-design.webp
new file mode 100644
index 000000000..a060c692c
Binary files /dev/null and b/public/static/images/services/integration/squarespace-design.webp differ
diff --git a/public/static/images/services/integration/squarespace-marketing.webp b/public/static/images/services/integration/squarespace-marketing.webp
new file mode 100644
index 000000000..561fc09a7
Binary files /dev/null and b/public/static/images/services/integration/squarespace-marketing.webp differ
diff --git a/public/static/images/services/integration/squarespace.webp b/public/static/images/services/integration/squarespace.webp
new file mode 100644
index 000000000..29c622915
Binary files /dev/null and b/public/static/images/services/integration/squarespace.webp differ
diff --git a/public/static/images/services/integration/strapi-cms.webp b/public/static/images/services/integration/strapi-cms.webp
new file mode 100644
index 000000000..6e2b7b1b3
Binary files /dev/null and b/public/static/images/services/integration/strapi-cms.webp differ
diff --git a/public/static/images/services/integration/strapi-complementaire.webp b/public/static/images/services/integration/strapi-complementaire.webp
new file mode 100644
index 000000000..82ef694c5
Binary files /dev/null and b/public/static/images/services/integration/strapi-complementaire.webp differ
diff --git a/public/static/images/services/integration/strapi-security.webp b/public/static/images/services/integration/strapi-security.webp
new file mode 100644
index 000000000..fb8a90de2
Binary files /dev/null and b/public/static/images/services/integration/strapi-security.webp differ
diff --git a/public/static/images/services/integration/strapi.webp b/public/static/images/services/integration/strapi.webp
new file mode 100644
index 000000000..cabf3fd76
Binary files /dev/null and b/public/static/images/services/integration/strapi.webp differ
diff --git a/public/static/images/services/integration/webflow-complementaire.webp b/public/static/images/services/integration/webflow-complementaire.webp
new file mode 100644
index 000000000..dcd3e0309
Binary files /dev/null and b/public/static/images/services/integration/webflow-complementaire.webp differ
diff --git a/public/static/images/services/integration/webflow-nocode.webp b/public/static/images/services/integration/webflow-nocode.webp
new file mode 100644
index 000000000..7775be624
Binary files /dev/null and b/public/static/images/services/integration/webflow-nocode.webp differ
diff --git a/public/static/images/services/integration/webflow-responsive.webp b/public/static/images/services/integration/webflow-responsive.webp
new file mode 100644
index 000000000..5e69a46c4
Binary files /dev/null and b/public/static/images/services/integration/webflow-responsive.webp differ
diff --git a/public/static/images/services/integration/webflow.webp b/public/static/images/services/integration/webflow.webp
new file mode 100644
index 000000000..eeaafed51
Binary files /dev/null and b/public/static/images/services/integration/webflow.webp differ
diff --git a/public/static/images/services/integration/wordpress-complementaire.webp b/public/static/images/services/integration/wordpress-complementaire.webp
new file mode 100644
index 000000000..7d5d4fc7e
Binary files /dev/null and b/public/static/images/services/integration/wordpress-complementaire.webp differ
diff --git a/public/static/images/services/integration/wordpress-seo.webp b/public/static/images/services/integration/wordpress-seo.webp
new file mode 100644
index 000000000..bc052f0f6
Binary files /dev/null and b/public/static/images/services/integration/wordpress-seo.webp differ
diff --git a/public/static/images/services/integration/wordpress-solution.webp b/public/static/images/services/integration/wordpress-solution.webp
new file mode 100644
index 000000000..0da6c82a3
Binary files /dev/null and b/public/static/images/services/integration/wordpress-solution.webp differ
diff --git a/public/static/images/services/integration/wordpress.webp b/public/static/images/services/integration/wordpress.webp
new file mode 100644
index 000000000..62640f17b
Binary files /dev/null and b/public/static/images/services/integration/wordpress.webp differ
diff --git a/public/static/images/services/shopify-hero.jpg b/public/static/images/services/shopify-hero.jpg
new file mode 100644
index 000000000..dafb62251
Binary files /dev/null and b/public/static/images/services/shopify-hero.jpg differ
diff --git a/src/app/services/backend/api/page.tsx b/src/app/services/backend/api/page.tsx
new file mode 100644
index 000000000..97cb006ad
--- /dev/null
+++ b/src/app/services/backend/api/page.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import FeatureSection from '@/components/marketing/services/feature-section';
+import TestimonialsSection from '@/components/marketing/services/testimonials-section';
+import FAQSection from '@/components/marketing/services/faq-section';
+import { 
+  Rocket, 
+  Code,
+  Shield,
+  Zap,
+  Database,
+  LineChart,
+  Cloud,
+  GitBranch,
+  FileJson,
+  Layers,
+  BarChart,
+} from 'lucide-react';
+
+export const metadata = {
+  title: "Développement d'APIs | onRuntime Studio",
+  description: "Créez des APIs robustes, sécurisées et performantes. Notre expertise en développement backend vous garantit des APIs fiables et évolutives pour vos applications.",
+};
+
+const APIServicePage = () => {
+  return (
+    <ServiceLayout
+      title={metadata.title}
+      description={metadata.description}
+      heroTitle="APIs RESTful & GraphQL"
+      heroDescription="Développez des APIs modernes, sécurisées et performantes pour vos applications. Notre expertise vous garantit des interfaces robustes et évolutives qui répondent à vos besoins spécifiques."
+      heroImage="/static/images/services/back-end/api-restful/api-hero.webp"
+    >
+      {/* Caractéristiques principales */}
+      <FeatureSection
+        title="Excellence en développement d'APIs"
+        description="Notre expertise en développement d'APIs vous garantit des interfaces fiables et performantes."
+        features={[
+          {
+            title: "REST & GraphQL",
+            description: "Développement d'APIs modernes avec les standards de l'industrie.",
+            icon: Code
+          },
+          {
+            title: "Sécurité avancée",
+            description: "Protection robuste contre les vulnérabilités et les attaques.",
+            icon: Shield
+          },
+          {
+            title: "Performance optimale",
+            description: "Architecture optimisée pour des temps de réponse minimaux.",
+            icon: Rocket
+          },
+          {
+            title: "Documentation complète",
+            description: "Documentation claire et interactive pour une intégration facile.",
+            icon: FileJson
+          }
+        ]}
+        image="/static/images/services/back-end/api-restful/excellence-api.webp"
+      />
+
+      {/* Avantages des APIs modernes */}
+      <FeatureSection
+        title="APIs robustes et évolutives"
+        description="Découvrez les avantages des APIs modernes pour vos applications."
+        features={[
+          {
+            title: "Haute disponibilité",
+            description: "Infrastructure redondante pour une disponibilité maximale.",
+            icon: Cloud
+          },
+          {
+            title: "Scalabilité",
+            description: "Architecture conçue pour supporter la croissance.",
+            icon: GitBranch
+          },
+          {
+            title: "Monitoring avancé",
+            description: "Suivi en temps réel des performances et de la santé.",
+            icon: LineChart
+          },
+          {
+            title: "Cache intelligent",
+            description: "Optimisation des performances avec mise en cache avancée.",
+            icon: Zap
+          }
+        ]}
+        image="/static/images/services/back-end/api-restful/api-robuste.webp"
+        reversed
+      />
+
+      {/* Témoignages */}
+      <TestimonialsSection
+        title="Ils nous font confiance"
+        description="Découvrez les retours de nos clients sur leurs APIs"
+        testimonials={[
+          {
+            content: "Une API robuste qui nous permet de gérer des millions de requêtes quotidiennes en toute sérénité.",
+            author: {
+              name: "Alexandre Martin",
+              role: "CTO",
+              company: "DataFlow",
+              image: "/static/images/testimonials/alexandre-martin.jpg"
+            }
+          },
+          {
+            content: "La qualité de la documentation et le support technique sont exceptionnels.",
+            author: {
+              name: "Sarah Dubois",
+              role: "Lead Developer",
+              company: "TechPro",
+              image: "/static/images/testimonials/sarah-dubois.jpg"
+            }
+          },
+          {
+            content: "Une architecture API qui nous a permis de multiplier notre croissance par 10.",
+            author: {
+              name: "Marc Lambert",
+              role: "Product Director",
+              company: "ScaleUp",
+              image: "/static/images/testimonials/marc-lambert.jpg"
+            }
+          }
+        ]}
+      />
+
+      {/* FAQ */}
+      <FAQSection
+        title="Questions fréquentes"
+        description="Tout ce que vous devez savoir sur notre service de développement d'APIs"
+        items={[
+          {
+            question: "Quelle est la différence entre REST et GraphQL ?",
+            answer: "REST est une architecture traditionnelle où chaque endpoint correspond à une ressource spécifique, tandis que GraphQL permet aux clients de demander exactement les données dont ils ont besoin. Nous vous conseillons la meilleure approche selon vos besoins spécifiques et vos cas d'usage."
+          },
+          {
+            question: "Comment assurez-vous la sécurité des APIs ?",
+            answer: "Nous implémentons plusieurs niveaux de sécurité : authentification JWT, chiffrement SSL/TLS, rate limiting, validation des données, protection contre les injections et les attaques CSRF. Nous suivons également les recommandations OWASP pour la sécurité des APIs."
+          },
+          {
+            question: "Comment gérez-vous la montée en charge ?",
+            answer: "Nous concevons des APIs scalables horizontalement, avec load balancing, mise en cache distribuée, et optimisation des requêtes. L'architecture est pensée pour supporter une croissance importante du trafic."
+          },
+          {
+            question: "Quelle documentation fournissez-vous ?",
+            answer: "Nous fournissons une documentation complète : documentation technique OpenAPI/Swagger, guides d'intégration, exemples de code, et environnement de test. La documentation est maintenue à jour avec chaque évolution de l'API."
+          },
+          {
+            question: "Proposez-vous un support après le déploiement ?",
+            answer: "Oui, nous proposons plusieurs formules de maintenance incluant : monitoring 24/7, support technique, optimisation continue des performances, mises à jour de sécurité et évolutions fonctionnelles."
+          }
+        ]}
+      />
+
+      {/* Services complémentaires */}
+      <FeatureSection
+        title="Services complémentaires"
+        description="Optimisez vos APIs avec nos services additionnels"
+        features={[
+          {
+            title: "Analytics avancés",
+            description: "Analyse détaillée de l'utilisation et des performances.",
+            icon: BarChart
+          },
+          {
+            title: "Migration de données",
+            description: "Migration depuis vos systèmes existants.",
+            icon: Database
+          },
+          {
+            title: "Intégration",
+            description: "Support pour l'intégration avec vos applications.",
+            icon: Layers
+          }
+        ]}
+        image="/static/images/services/back-end/api-restful/service-complementaire.webp"
+      />
+    </ServiceLayout>
+  );
+};
+
+export default APIServicePage;
\ No newline at end of file
diff --git a/src/app/services/backend/bots/page.tsx b/src/app/services/backend/bots/page.tsx
new file mode 100644
index 000000000..8400c34c4
--- /dev/null
+++ b/src/app/services/backend/bots/page.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import FeatureSection from '@/components/marketing/services/feature-section';
+import TestimonialsSection from '@/components/marketing/services/testimonials-section';
+import FAQSection from '@/components/marketing/services/faq-section';
+import {
+  Zap,
+  MessageSquare,
+  Settings,
+  Command,
+  Bell,
+  Users,
+  Shield,
+  LineChart,
+  Heart,
+  BarChart,
+  Clock
+} from 'lucide-react';
+
+export const metadata = {
+  title: "Développement de Bots Discord & Slack | onRuntime Studio",
+  description: "Créez des bots intelligents et des automatisations pour Discord, Slack et autres plateformes. Notre expertise vous garantit des bots performants et fiables.",
+};
+
+const BotsServicePage = () => {
+  return (
+    <ServiceLayout
+      title={metadata.title}
+      description={metadata.description}
+      heroTitle="Bots & Automatisations"
+      heroDescription="Développez des bots intelligents et des automatisations pour améliorer l'engagement et la productivité de votre communauté. Notre expertise vous garantit des bots fiables et performants pour Discord, Slack et autres plateformes."
+      heroImage="/static/images/services/back-end/bots/bots-hero.webp"
+    >
+      {/* Caractéristiques principales */}
+      <FeatureSection
+        title="Excellence en développement de bots"
+        description="Notre expertise en développement de bots vous garantit des solutions intelligentes et performantes."
+        features={[
+          {
+            title: "Discord & Slack",
+            description: "Bots personnalisés pour les principales plateformes de communication.",
+            icon: MessageSquare
+          },
+          {
+            title: "Commandes avancées",
+            description: "Interface intuitive avec commandes personnalisables.",
+            icon: Command
+          },
+          {
+            title: "Performance optimale",
+            description: "Architecture optimisée pour une réactivité maximale.",
+            icon: Zap
+          },
+          {
+            title: "Intégrations",
+            description: "Connection avec vos outils et services existants.",
+            icon: Settings
+          }
+        ]}
+        image="/static/images/services/back-end/bots/excellence-developpement.webp"
+      />
+
+      {/* Avantages des bots modernes */}
+      <FeatureSection
+        title="Bots intelligents et réactifs"
+        description="Découvrez les avantages des bots modernes pour votre communauté."
+        features={[
+          {
+            title: "Modération intelligente",
+            description: "Gestion automatisée de votre communauté et modération.",
+            icon: Shield
+          },
+          {
+            title: "Notifications",
+            description: "Alertes personnalisées et mises à jour automatiques.",
+            icon: Bell
+          },
+          {
+            title: "Engagement",
+            description: "Fonctionnalités interactives pour animer votre communauté.",
+            icon: Users
+          },
+          {
+            title: "Statistiques",
+            description: "Suivi détaillé de l'activité et des interactions.",
+            icon: LineChart
+          }
+        ]}
+        image="/static/images/services/back-end/bots/bot-intelligent.webp"
+        reversed
+      />
+
+      {/* Témoignages */}
+      <TestimonialsSection
+        title="Ils nous font confiance"
+        description="Découvrez les retours de nos clients sur leurs bots"
+        testimonials={[
+          {
+            content: "Notre bot Discord a transformé la gestion de notre communauté gaming.",
+            author: {
+              name: "Lucas Bernard",
+              role: "Community Manager",
+              company: "GamersWorld",
+              image: "/static/images/testimonials/lucas-bernard.jpg"
+            }
+          },
+          {
+            content: "L'automatisation Slack a boosté la productivité de notre équipe.",
+            author: {
+              name: "Marie Dubois",
+              role: "Product Owner",
+              company: "TechFlow",
+              image: "/static/images/testimonials/marie-dubois.jpg"
+            }
+          },
+          {
+            content: "Un bot fiable qui gère parfaitement notre support client 24/7.",
+            author: {
+              name: "Antoine Martin",
+              role: "Support Lead",
+              company: "CustomerFirst",
+              image: "/static/images/testimonials/antoine-martin.jpg"
+            }
+          }
+        ]}
+      />
+
+      {/* FAQ */}
+      <FAQSection
+        title="Questions fréquentes"
+        description="Tout ce que vous devez savoir sur notre service de développement de bots"
+        items={[
+          {
+            question: "Quels types de bots pouvez-vous développer ?",
+            answer: "Nous développons des bots pour diverses plateformes (Discord, Slack, Telegram) avec différentes fonctionnalités : modération, support client, automatisation de tâches, statistiques, jeux et animations communautaires. Chaque bot est personnalisé selon vos besoins spécifiques."
+          },
+          {
+            question: "Comment assurez-vous la fiabilité des bots ?",
+            answer: "Nous implémentons plusieurs mécanismes : monitoring 24/7, redémarrage automatique en cas de problème, logs détaillés, et alertes en temps réel. Nous effectuons également des tests approfondis avant chaque déploiement."
+          },
+          {
+            question: "Peut-on personnaliser les commandes et fonctionnalités ?",
+            answer: "Oui, tous nos bots sont entièrement personnalisables : commandes, réponses, permissions, intégrations. Nous adaptons chaque fonctionnalité à vos besoins et votre charte de modération."
+          },
+          {
+            question: "Comment gérez-vous la sécurité ?",
+            answer: "La sécurité est une priorité : authentification sécurisée, permissions granulaires, validation des entrées, protection contre le spam et les abus. Nous suivons les meilleures pratiques de chaque plateforme."
+          },
+          {
+            question: "Proposez-vous un support après le déploiement ?",
+            answer: "Oui, nous proposons plusieurs formules de maintenance incluant : surveillance 24/7, mises à jour régulières, support technique, et évolutions fonctionnelles selon vos besoins."
+          }
+        ]}
+      />
+
+      {/* Services complémentaires */}
+      <FeatureSection
+        title="Services complémentaires"
+        description="Optimisez votre bot avec nos services additionnels"
+        features={[
+          {
+            title: "Analytics",
+            description: "Suivi détaillé de l'utilisation et des interactions.",
+            icon: BarChart
+          },
+          {
+            title: "Support 24/7",
+            description: "Surveillance continue et intervention rapide.",
+            icon: Clock
+          },
+          {
+            title: "Évolutions",
+            description: "Ajout régulier de nouvelles fonctionnalités.",
+            icon: Heart
+          }
+        ]}
+        image="/static/images/services/back-end/bots/service-complementaire.webp"
+      />
+    </ServiceLayout>
+  );
+};
+
+export default BotsServicePage;
\ No newline at end of file
diff --git a/src/app/services/backend/cloud/page.tsx b/src/app/services/backend/cloud/page.tsx
new file mode 100644
index 000000000..bde8f71be
--- /dev/null
+++ b/src/app/services/backend/cloud/page.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import FeatureSection from '@/components/marketing/services/feature-section';
+import TestimonialsSection from '@/components/marketing/services/testimonials-section';
+import FAQSection from '@/components/marketing/services/faq-section';
+import { 
+  Cloud,
+  Shield,
+  Zap,
+  Scale,
+  LineChart,
+  Server,
+  Database,
+  Lock,
+  GitBranch,
+  Globe,
+  Timer,
+} from 'lucide-react';
+
+export const metadata = {
+  title: "Solutions Cloud | onRuntime Studio",
+  description: "Déployez et gérez vos applications dans le cloud avec expertise. Notre savoir-faire en cloud computing vous garantit une infrastructure flexible, sécurisée et performante.",
+};
+
+const CloudServicePage = () => {
+  return (
+    <ServiceLayout
+      title={metadata.title}
+      description={metadata.description}
+      heroTitle="Solutions Cloud"
+      heroDescription="Optimisez votre infrastructure avec des solutions cloud modernes et évolutives. Notre expertise vous garantit un déploiement sécurisé et performant sur les principales plateformes cloud."
+      heroImage="/static/images/services/back-end/solutions-cloud/cloud-hero.webp"
+    >
+      {/* Caractéristiques principales */}
+      <FeatureSection
+        title="Excellence en cloud computing"
+        description="Notre expertise en solutions cloud vous garantit une infrastructure moderne et performante."
+        features={[
+          {
+            title: "Multi-cloud",
+            description: "Support des principales plateformes (AWS, GCP, Azure).",
+            icon: Cloud
+          },
+          {
+            title: "Sécurité avancée",
+            description: "Protection robuste de vos données et applications.",
+            icon: Shield
+          },
+          {
+            title: "Performance optimale",
+            description: "Architecture optimisée pour des performances maximales.",
+            icon: Zap
+          },
+          {
+            title: "Scalabilité automatique",
+            description: "Adaptation dynamique aux besoins de charge.",
+            icon: Scale
+          }
+        ]}
+        image="/static/images/services/back-end/solutions-cloud/multi-cloud.webp"
+      />
+
+      {/* Avantages du cloud */}
+      <FeatureSection
+        title="Infrastructure cloud moderne"
+        description="Découvrez les avantages d'une infrastructure cloud optimisée."
+        features={[
+          {
+            title: "Haute disponibilité",
+            description: "Infrastructure redondante et résiliente.",
+            icon: Server
+          },
+          {
+            title: "Stockage élastique",
+            description: "Gestion flexible et sécurisée des données.",
+            icon: Database
+          },
+          {
+            title: "Monitoring avancé",
+            description: "Surveillance en temps réel de votre infrastructure.",
+            icon: LineChart
+          },
+          {
+            title: "Sécurité renforcée",
+            description: "Protection multicouche de vos ressources.",
+            icon: Lock
+          }
+        ]}
+        image="/static/images/services/back-end/solutions-cloud/infrastructure-modern.webp"
+        reversed
+      />
+
+      {/* Témoignages */}
+      <TestimonialsSection
+        title="Ils nous font confiance"
+        description="Découvrez les retours de nos clients sur leurs solutions cloud"
+        testimonials={[
+          {
+            content: "La migration vers le cloud nous a permis de réduire nos coûts d'infrastructure de 40%.",
+            author: {
+              name: "David Martin",
+              role: "CTO",
+              company: "CloudScale",
+              image: "/static/images/testimonials/david-martin.jpg"
+            }
+          },
+          {
+            content: "Une expertise qui nous a permis de migrer sans interruption de service.",
+            author: {
+              name: "Claire Dubois",
+              role: "DevOps Lead",
+              company: "TechFlow",
+              image: "/static/images/testimonials/claire-dubois.jpg"
+            }
+          },
+          {
+            content: "Notre infrastructure cloud nous offre enfin la flexibilité dont nous avions besoin.",
+            author: {
+              name: "Marc Lambert",
+              role: "IT Director",
+              company: "DataFirst",
+              image: "/static/images/testimonials/marc-lambert.jpg"
+            }
+          }
+        ]}
+      />
+
+      {/* FAQ */}
+      <FAQSection
+        title="Questions fréquentes"
+        description="Tout ce que vous devez savoir sur nos solutions cloud"
+        items={[
+          {
+            question: "Quelle plateforme cloud choisir ?",
+            answer: "Le choix dépend de vos besoins spécifiques : AWS excelle en variété de services, Google Cloud en machine learning, et Azure en intégration Microsoft. Nous vous guidons vers la meilleure solution en fonction de vos objectifs, contraintes techniques et budget."
+          },
+          {
+            question: "Comment gérez-vous la sécurité dans le cloud ?",
+            answer: "Nous implémentons une sécurité multicouche : chiffrement des données au repos et en transit, contrôle d'accès IAM, réseaux privés virtuels (VPC), pare-feu applicatifs (WAF), et surveillance continue des menaces. Nous suivons les meilleures pratiques de chaque plateforme."
+          },
+          {
+            question: "Comment optimisez-vous les coûts ?",
+            answer: "Nous utilisons plusieurs stratégies : instances réservées, scaling automatique, optimisation des ressources, suppression des ressources inutilisées, et monitoring des coûts. Nous effectuons des audits réguliers pour identifier les opportunités d'économies."
+          },
+          {
+            question: "Comment assurez-vous la haute disponibilité ?",
+            answer: "Nous déployons votre infrastructure sur plusieurs zones de disponibilité, avec réplication des données, load balancing, et failover automatique. Nous mettons également en place des plans de reprise d'activité (DRP) robustes."
+          },
+          {
+            question: "Proposez-vous un support 24/7 ?",
+            answer: "Oui, nous proposons plusieurs niveaux de support incluant : monitoring 24/7, alerting automatique, intervention rapide en cas d'incident, maintenance préventive, et support technique dédié."
+          }
+        ]}
+      />
+
+      {/* Services complémentaires */}
+      <FeatureSection
+        title="Services complémentaires"
+        description="Optimisez votre infrastructure cloud avec nos services additionnels"
+        features={[
+          {
+            title: "Migration cloud",
+            description: "Transition en douceur vers le cloud.",
+            icon: GitBranch
+          },
+          {
+            title: "Multi-région",
+            description: "Déploiement global de vos applications.",
+            icon: Globe
+          },
+          {
+            title: "DevOps",
+            description: "Automatisation et CI/CD dans le cloud.",
+            icon: Timer
+          }
+        ]}
+        image="/static/images/services/back-end/solutions-cloud/service-complementaire.webp"
+      />
+    </ServiceLayout>
+  );
+};
+
+export default CloudServicePage;
\ No newline at end of file
diff --git a/src/app/services/backend/database/page.tsx b/src/app/services/backend/database/page.tsx
new file mode 100644
index 000000000..c04fa2641
--- /dev/null
+++ b/src/app/services/backend/database/page.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import FeatureSection from '@/components/marketing/services/feature-section';
+import TestimonialsSection from '@/components/marketing/services/testimonials-section';
+import FAQSection from '@/components/marketing/services/faq-section';
+import { 
+  Database,
+  Shield,
+  Zap,
+  History,
+  Share2,
+  Search,
+  LineChart,
+  Cloud,
+  GitBranch,
+  BarChart,
+  Timer
+} from 'lucide-react';
+
+export const metadata = {
+  title: "Architecture et Optimisation de Bases de Données | onRuntime Studio",
+  description: "Concevez et optimisez vos bases de données pour des performances maximales. Notre expertise en bases de données vous garantit une architecture robuste et évolutive.",
+};
+
+const DatabaseServicePage = () => {
+  return (
+    <ServiceLayout
+      title={metadata.title}
+      description={metadata.description}
+      heroTitle="Architecture de Bases de Données"
+      heroDescription="Concevez et optimisez vos bases de données pour des performances optimales et une scalabilité maximale. Notre expertise vous garantit une architecture robuste qui répond à vos besoins actuels et futurs."
+      heroImage="/static/images/services/back-end/bases-de-données/database-hero.webp"
+    >
+      {/* Caractéristiques principales */}
+      <FeatureSection
+        title="Excellence en bases de données"
+        description="Notre expertise en bases de données vous garantit une architecture optimale et performante."
+        features={[
+          {
+            title: "Architecture optimisée",
+            description: "Conception intelligente des schémas et des relations pour des performances optimales.",
+            icon: Database
+          },
+          {
+            title: "Sécurité renforcée",
+            description: "Protection robuste des données sensibles et conformité aux normes.",
+            icon: Shield
+          },
+          {
+            title: "Haute performance",
+            description: "Optimisation des requêtes et des index pour des temps de réponse minimaux.",
+            icon: Zap
+          },
+          {
+            title: "Backup & Recovery",
+            description: "Stratégies de sauvegarde et de restauration fiables.",
+            icon: History
+          }
+        ]}
+        image="/static/images/services/back-end/bases-de-données/excellence-database.webp"
+      />
+
+      {/* Avantages des bases de données modernes */}
+      <FeatureSection
+        title="Solutions de bases de données modernes"
+        description="Découvrez les avantages des architectures de bases de données modernes."
+        features={[
+          {
+            title: "Scalabilité horizontale",
+            description: "Architecture conçue pour la croissance et la montée en charge.",
+            icon: GitBranch
+          },
+          {
+            title: "Réplication",
+            description: "Haute disponibilité et répartition géographique des données.",
+            icon: Share2
+          },
+          {
+            title: "Monitoring avancé",
+            description: "Suivi en temps réel des performances et de la santé.",
+            icon: LineChart
+          },
+          {
+            title: "Recherche optimisée",
+            description: "Indexation intelligente pour des recherches rapides.",
+            icon: Search
+          }
+        ]}
+        image="/static/images/services/back-end/bases-de-données/solution-moderne.webp"
+        reversed
+      />
+
+      {/* Témoignages */}
+      <TestimonialsSection
+        title="Ils nous font confiance"
+        description="Découvrez les retours de nos clients sur leurs bases de données"
+        testimonials={[
+          {
+            content: "L'optimisation de notre base de données a réduit nos temps de réponse de 80%.",
+            author: {
+              name: "Thomas Weber",
+              role: "Lead DBA",
+              company: "DataScale",
+              image: "/static/images/testimonials/thomas-weber.jpg"
+            }
+          },
+          {
+            content: "Une architecture qui nous permet de gérer des millions d'enregistrements sans effort.",
+            author: {
+              name: "Julie Martin",
+              role: "CTO",
+              company: "BigData Solutions",
+              image: "/static/images/testimonials/julie-martin.jpg"
+            }
+          },
+          {
+            content: "La migration de notre base de données s'est déroulée sans aucune interruption de service.",
+            author: {
+              name: "Pierre Dubois",
+              role: "Directeur Technique",
+              company: "TechFlow",
+              image: "/static/images/testimonials/pierre-dubois.jpg"
+            }
+          }
+        ]}
+      />
+
+      {/* FAQ */}
+      <FAQSection
+        title="Questions fréquentes"
+        description="Tout ce que vous devez savoir sur notre service de bases de données"
+        items={[
+          {
+            question: "Comment choisir entre SQL et NoSQL ?",
+            answer: "Le choix dépend de vos besoins spécifiques. Les bases SQL sont idéales pour les données structurées avec des relations complexes, tandis que NoSQL excelle dans la gestion de données non structurées et la scalabilité horizontale. Nous vous guidons vers la meilleure solution selon vos cas d'usage."
+          },
+          {
+            question: "Comment gérez-vous la sécurité des données ?",
+            answer: "Nous implémentons plusieurs niveaux de sécurité : chiffrement des données sensibles, contrôle d'accès granulaire, audit des accès, backups réguliers, et conformité aux normes de sécurité (RGPD, etc.). Nous effectuons également des tests de sécurité réguliers."
+          },
+          {
+            question: "Comment optimisez-vous les performances ?",
+            answer: "Nous utilisons plusieurs techniques : optimisation des schémas et des requêtes, indexation intelligente, mise en cache, partitionnement des données, et monitoring continu. Nous analysons régulièrement les performances pour identifier les opportunités d'optimisation."
+          },
+          {
+            question: "Proposez-vous des services de migration ?",
+            answer: "Oui, nous gérons les migrations de bases de données de bout en bout : analyse de l'existant, planification, tests, migration des données avec minimum d'interruption, et validation post-migration. Nous assurons la cohérence et l'intégrité des données."
+          },
+          {
+            question: "Comment assurez-vous la disponibilité des données ?",
+            answer: "Nous mettons en place des architectures hautement disponibles avec réplication, clustering, et plans de reprise d'activité. Nous effectuons des sauvegardes régulières et testons les procédures de restauration."
+          }
+        ]}
+      />
+
+      {/* Services complémentaires */}
+      <FeatureSection
+        title="Services complémentaires"
+        description="Optimisez vos bases de données avec nos services additionnels"
+        features={[
+          {
+            title: "Migration de données",
+            description: "Transfer sécurisé depuis vos systèmes existants.",
+            icon: Cloud
+          },
+          {
+            title: "Audit & Optimisation",
+            description: "Analyse des performances et recommandations.",
+            icon: BarChart
+          },
+          {
+            title: "Monitoring 24/7",
+            description: "Surveillance continue et alertes en temps réel.",
+            icon: Timer
+          }
+        ]}
+        image="/static/images/services/back-end/bases-de-données/service-complementaire.webp"
+      />
+    </ServiceLayout>
+  );
+};
+
+export default DatabaseServicePage;
\ No newline at end of file
diff --git a/src/app/services/backend/microservices/page.tsx b/src/app/services/backend/microservices/page.tsx
new file mode 100644
index 000000000..d9196b72b
--- /dev/null
+++ b/src/app/services/backend/microservices/page.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import FeatureSection from '@/components/marketing/services/feature-section';
+import TestimonialsSection from '@/components/marketing/services/testimonials-section';
+import FAQSection from '@/components/marketing/services/faq-section';
+import { 
+  Boxes,
+  GitBranch,
+  Zap,
+  Shield,
+  Cloud,
+  LineChart,
+  Scale,
+  CircuitBoard,
+  Gauge,
+  Timer,
+  Workflow
+} from 'lucide-react';
+
+export const metadata = {
+  title: "Architecture Microservices | onRuntime Studio",
+  description: "Développez des applications scalables et résilientes avec une architecture microservices. Notre expertise vous garantit une infrastructure moderne et performante.",
+};
+
+const MicroservicesServicePage = () => {
+  return (
+    <ServiceLayout
+      title={metadata.title}
+      description={metadata.description}
+      heroTitle="Architecture Microservices"
+      heroDescription="Transformez vos applications monolithiques en architectures microservices modernes et scalables. Notre expertise vous garantit une infrastructure flexible, résiliente et performante."
+      heroImage="/static/images/services/back-end/microservices/architecture-hero.webp"
+    >
+      {/* Caractéristiques principales */}
+      <FeatureSection
+        title="Excellence en microservices"
+        description="Notre expertise en architecture microservices vous garantit une infrastructure moderne et évolutive."
+        features={[
+          {
+            title: "Architecture évolutive",
+            description: "Conception modulaire pour une scalabilité optimale.",
+            icon: Boxes
+          },
+          {
+            title: "Déploiement continu",
+            description: "Pipeline CI/CD pour des mises à jour fluides.",
+            icon: GitBranch
+          },
+          {
+            title: "Performance optimale",
+            description: "Services indépendants pour une meilleure réactivité.",
+            icon: Zap
+          },
+          {
+            title: "Haute disponibilité",
+            description: "Architecture résiliente avec redondance.",
+            icon: Shield
+          }
+        ]}
+        image="/static/images/services/back-end/microservices/excellence-microservice.webp"
+      />
+
+      {/* Avantages des microservices */}
+      <FeatureSection
+        title="Architecture moderne et flexible"
+        description="Découvrez les avantages d'une architecture microservices."
+        features={[
+          {
+            title: "Scalabilité granulaire",
+            description: "Mise à l'échelle indépendante de chaque service.",
+            icon: Scale
+          },
+          {
+            title: "Déploiement flexible",
+            description: "Mises à jour sans interruption de service.",
+            icon: Cloud
+          },
+          {
+            title: "Isolation des pannes",
+            description: "Résilience accrue grâce à l'isolation des services.",
+            icon: CircuitBoard
+          },
+          {
+            title: "Monitoring avancé",
+            description: "Surveillance détaillée de chaque composant.",
+            icon: LineChart
+          }
+        ]}
+        image="/static/images/services/back-end/microservices/moderne-flexible.webp"
+        reversed
+      />
+
+      {/* Témoignages */}
+      <TestimonialsSection
+        title="Ils nous font confiance"
+        description="Découvrez les retours de nos clients sur leurs architectures microservices"
+        testimonials={[
+          {
+            content: "La transition vers les microservices nous a permis de multiplier notre capacité de traitement par 10.",
+            author: {
+              name: "Philippe Laurent",
+              role: "CTO",
+              company: "ScaleOps",
+              image: "/static/images/testimonials/philippe-laurent.jpg"
+            }
+          },
+          {
+            content: "Une architecture qui nous permet d'évoluer sereinement avec notre croissance.",
+            author: {
+              name: "Sophie Martin",
+              role: "Lead Architect",
+              company: "CloudScale",
+              image: "/static/images/testimonials/sophie-martin.jpg"
+            }
+          },
+          {
+            content: "La modularité des microservices a transformé notre façon de développer.",
+            author: {
+              name: "Thomas Durand",
+              role: "VP Engineering",
+              company: "TechFlow",
+              image: "/static/images/testimonials/thomas-durand.jpg"
+            }
+          }
+        ]}
+      />
+
+      {/* FAQ */}
+      <FAQSection
+        title="Questions fréquentes"
+        description="Tout ce que vous devez savoir sur notre service d'architecture microservices"
+        items={[
+          {
+            question: "Quand adopter une architecture microservices ?",
+            answer: "L'architecture microservices est particulièrement adaptée aux applications complexes nécessitant une grande scalabilité, une mise à l'échelle indépendante des composants, et une évolution rapide. Nous évaluons avec vous si cette architecture correspond à vos besoins spécifiques."
+          },
+          {
+            question: "Comment gérez-vous la communication entre services ?",
+            answer: "Nous implémentons des patterns de communication robustes : API Gateway, message brokers (Kafka, RabbitMQ), communication synchrone (REST, gRPC) et asynchrone. Chaque méthode est choisie selon les besoins spécifiques de performance et de fiabilité."
+          },
+          {
+            question: "Comment assurez-vous la cohérence des données ?",
+            answer: "Nous utilisons plusieurs stratégies : Saga pattern pour les transactions distribuées, Event Sourcing pour la traçabilité, et CQRS pour la séparation des opérations de lecture et d'écriture. La cohérence éventuelle est gérée de manière appropriée."
+          },
+          {
+            question: "Comment surveillez-vous l'infrastructure ?",
+            answer: "Nous mettons en place un monitoring complet : métriques de performance, tracing distribué, logs centralisés, et alerting intelligent. Des dashboards personnalisés permettent de visualiser la santé de chaque service."
+          },
+          {
+            question: "Proposez-vous de la formation pour les équipes ?",
+            answer: "Oui, nous proposons des formations complètes pour vos équipes : principes des microservices, bonnes pratiques de développement, monitoring et troubleshooting, et utilisation des outils DevOps."
+          }
+        ]}
+      />
+
+      {/* Services complémentaires */}
+      <FeatureSection
+        title="Services complémentaires"
+        description="Optimisez votre architecture microservices avec nos services additionnels"
+        features={[
+          {
+            title: "DevOps & CI/CD",
+            description: "Automatisation complète du déploiement.",
+            icon: Workflow
+          },
+          {
+            title: "Monitoring 24/7",
+            description: "Surveillance continue et alertes en temps réel.",
+            icon: Timer
+          },
+          {
+            title: "Optimisation",
+            description: "Amélioration continue des performances.",
+            icon: Gauge
+          }
+        ]}
+        image="/static/images/services/back-end/microservices/service-complementaire.webp"
+      />
+    </ServiceLayout>
+  );
+};
+
+export default MicroservicesServicePage;
\ No newline at end of file
diff --git a/src/app/services/backend/page.tsx b/src/app/services/backend/page.tsx
new file mode 100644
index 000000000..1a31b491c
--- /dev/null
+++ b/src/app/services/backend/page.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import Services from '@/constants/services';
+import ServiceOverviewPage from '@/components/marketing/services/service-overview';
+import { ServiceCategory } from '@/types/service';
+import type { Metadata } from "next";
+import { Database, Server, Shield, Scale } from 'lucide-react';
+
+export const metadata: Metadata = {
+  title: "Développement Backend | onRuntime Studio",
+  description: "Création d'APIs et de systèmes backend robustes, sécurisés et évolutifs. Notre expertise garantit des solutions techniques performantes pour vos applications.",
+};
+
+const BackendServicePage = () => {
+  const backendService = Services.find(service => service.id === ServiceCategory.BACKEND);
+
+  if (!backendService) {
+    return null;
+  }
+
+  const benefits = [
+    {
+      title: "Architecture scalable",
+      description: "Systèmes conçus pour évoluer avec votre croissance, utilisant des architectures modernes et distribuées.",
+      icon: Scale
+    },
+    {
+      title: "Base de données optimisée",
+      description: "Conception et optimisation des bases de données pour des performances maximales et une intégrité des données.",
+      icon: Database
+    },
+    {
+      title: "Infrastructure robuste",
+      description: "Déploiement sur des infrastructures cloud modernes avec haute disponibilité et résilience.",
+      icon: Server
+    },
+    {
+      title: "Sécurité avancée",
+      description: "Implémentation des meilleures pratiques de sécurité et de protection des données sensibles.",
+      icon: Shield
+    }
+  ];
+
+  const processList = [
+    {
+      title: "Analyse des besoins",
+      description: "Étude approfondie des besoins techniques, définition de l'architecture et des choix technologiques.",
+      services: ["Architecture", "Conseil technique"]
+    },
+    {
+      title: "Conception système",
+      description: "Design de l'architecture backend, modélisation des données et définition des APIs.",
+      services: ["Architecture", "Database Design"]
+    },
+    {
+      title: "Développement API",
+      description: "Implémentation des APIs RESTful ou GraphQL avec documentation complète.",
+      services: ["API Development", "Documentation"]
+    },
+    {
+      title: "Base de données",
+      description: "Mise en place et optimisation des bases de données avec focus sur la performance et la scalabilité.",
+      services: ["Database", "Optimisation"]
+    },
+    {
+      title: "Tests et sécurité",
+      description: "Implémentation des tests automatisés et des mesures de sécurité avancées.",
+      services: ["Tests", "Security"]
+    },
+    {
+      title: "Déploiement et monitoring",
+      description: "Mise en place de l'infrastructure cloud, du monitoring et des alertes.",
+      services: ["DevOps", "Monitoring"]
+    }
+  ];
+
+  return (
+    <ServiceOverviewPage
+      service={backendService}
+      heroImage="/static/images/services/back-end/dev-back-hero.webp"
+      showCaseImage="/static/images/services/back-end/back-expert.webp"
+      benefits={benefits}
+      processList={processList}
+    />
+  );
+};
+
+export default BackendServicePage;
\ No newline at end of file
diff --git a/src/app/services/design/audit/page.tsx b/src/app/services/design/audit/page.tsx
new file mode 100644
index 000000000..0cdb7d5da
--- /dev/null
+++ b/src/app/services/design/audit/page.tsx
@@ -0,0 +1,181 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import FeatureSection from '@/components/marketing/services/feature-section';
+import TestimonialsSection from '@/components/marketing/services/testimonials-section';
+import FAQSection from '@/components/marketing/services/faq-section';
+import { 
+  Search,
+  LineChart,
+  Users,
+  Eye,
+  BarChart,
+  Target,
+  MousePointer,
+  Zap,
+  MessageSquare,
+} from 'lucide-react';
+
+export const metadata = {
+  title: "Audit UX/UI | onRuntime Studio",
+  description: "Optimisez vos interfaces avec un audit UX/UI professionnel. Notre expertise vous garantit une analyse approfondie et des recommandations concrètes pour améliorer l'expérience utilisateur.",
+};
+
+const AuditServicePage = () => {
+  return (
+    <ServiceLayout
+      title={metadata.title}
+      description={metadata.description}
+      heroTitle="Audit UX/UI & Optimisation"
+      heroDescription="Améliorez l'expérience utilisateur de vos interfaces grâce à un audit professionnel. Notre expertise vous garantit une analyse approfondie et des recommandations concrètes pour optimiser vos interfaces."
+      heroImage="/static/images/services/design/audit-ui/audit-hero.webp"
+    >
+      {/* Caractéristiques principales */}
+      <FeatureSection
+        title="Excellence en analyse UX/UI"
+        description="Notre expertise en audit vous garantit une analyse approfondie et des recommandations actionnables."
+        features={[
+          {
+            title: "Analyse heuristique",
+            description: "Évaluation experte basée sur les principes UX.",
+            icon: Search
+          },
+          {
+            title: "Tests utilisateurs",
+            description: "Observation et analyse des comportements réels.",
+            icon: Users
+          },
+          {
+            title: "Analytics",
+            description: "Analyse des données d'utilisation.",
+            icon: LineChart
+          },
+          {
+            title: "Accessibilité",
+            description: "Vérification des standards d'accessibilité.",
+            icon: Eye
+          }
+        ]}
+        image="/static/images/services/design/audit-ui/analyse-ui-ux.webp"
+      />
+
+      {/* Avantages de l'audit */}
+      <FeatureSection
+        title="Optimisation basée sur les données"
+        description="Découvrez les avantages d'un audit UX/UI professionnel."
+        features={[
+          {
+            title: "Conversion",
+            description: "Identification des freins à la conversion.",
+            icon: Target
+          },
+          {
+            title: "Performance",
+            description: "Analyse des métriques de performance.",
+            icon: Zap
+          },
+          {
+            title: "Satisfaction",
+            description: "Mesure de la satisfaction utilisateur.",
+            icon: BarChart
+          },
+          {
+            title: "Parcours",
+            description: "Optimisation des parcours utilisateurs.",
+            icon: MousePointer
+          }
+        ]}
+        image="/static/images/services/design/audit-ui/optimisation-donnees.webp"
+        reversed
+      />
+
+      {/* Témoignages */}
+      <TestimonialsSection
+        title="Ils nous font confiance"
+        description="Découvrez les retours de nos clients sur leurs audits UX/UI"
+        testimonials={[
+          {
+            content: "L'audit a révélé des problèmes critiques que nous n'avions pas identifiés et nous a permis d'augmenter nos conversions de 45%.",
+            author: {
+              name: "Thomas Leroux",
+              role: "Product Owner",
+              company: "E-Commerce Plus",
+              image: "/static/images/testimonials/thomas-leroux.webp"
+            }
+          },
+          {
+            content: "Les recommandations concrètes nous ont permis d'améliorer significativement l'expérience de nos utilisateurs.",
+            author: {
+              name: "Sophie Martin",
+              role: "UX Designer",
+              company: "AppSolution",
+              image: "/static/images/testimonials/sophie-martin.webp"
+            }
+          },
+          {
+            content: "Un audit complet qui nous a fourni une feuille de route claire pour nos améliorations.",
+            author: {
+              name: "Laurent Dubois",
+              role: "Directeur Digital",
+              company: "WebAgency",
+              image: "/static/images/testimonials/laurent-dubois.webp"
+            }
+          }
+        ]}
+      />
+
+      {/* FAQ */}
+      <FAQSection
+        title="Questions fréquentes"
+        description="Tout ce que vous devez savoir sur notre service d'audit UX/UI"
+        items={[
+          {
+            question: "Que comprend un audit UX/UI complet ?",
+            answer: "Un audit complet inclut : analyse heuristique basée sur les principes UX, tests utilisateurs, analyse des données analytics, évaluation de l'accessibilité, benchmark concurrentiel, et recommandations détaillées. Nous fournissons un rapport complet avec des solutions concrètes."
+          },
+          {
+            question: "Comment se déroule le processus d'audit ?",
+            answer: "Le processus commence par une phase de découverte pour comprendre vos objectifs et KPIs. Nous réalisons ensuite les différentes analyses (heuristique, données, tests), synthétisons les résultats, et préparons un rapport détaillé avec des recommandations priorisées."
+          },
+          {
+            question: "Quels livrables sont fournis ?",
+            answer: "Vous recevez un rapport d'audit complet incluant : synthèse exécutive, analyses détaillées, visualisations des données, problèmes identifiés avec leur niveau de gravité, recommandations priorisées, et plan d'action suggéré."
+          },
+          {
+            question: "Comment mesurez-vous l'impact des recommandations ?",
+            answer: "Nous définissons des KPIs spécifiques pour chaque recommandation et mettons en place un suivi des métriques clés (taux de conversion, satisfaction utilisateur, temps de complétion des tâches, etc.) pour mesurer l'impact des améliorations."
+          },
+          {
+            question: "Proposez-vous un accompagnement post-audit ?",
+            answer: "Oui, nous proposons un accompagnement pour la mise en œuvre des recommandations, incluant : priorisation des actions, support dans l'implémentation, et mesure des résultats. Nous pouvons également réaliser des audits de suivi."
+          }
+        ]}
+      />
+
+      {/* Services complémentaires */}
+      <FeatureSection
+        title="Services complémentaires"
+        description="Optimisez davantage vos interfaces avec nos services additionnels"
+        features={[
+          {
+            title: "Tests utilisateurs",
+            description: "Sessions de tests approfondis avec vos utilisateurs.",
+            icon: Users
+          },
+          {
+            title: "Analytics avancés",
+            description: "Mise en place de tracking et analyse approfondie.",
+            icon: BarChart
+          },
+          {
+            title: "Formation UX",
+            description: "Formation de vos équipes aux bonnes pratiques.",
+            icon: MessageSquare
+          }
+        ]}
+        image="/static/images/services/design/audit-ui/service-complementaire.webp"
+      />
+    </ServiceLayout>
+  );
+};
+
+export default AuditServicePage;
\ No newline at end of file
diff --git a/src/app/services/design/branding/page.tsx b/src/app/services/design/branding/page.tsx
new file mode 100644
index 000000000..7a7612f34
--- /dev/null
+++ b/src/app/services/design/branding/page.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import FeatureSection from '@/components/marketing/services/feature-section';
+import TestimonialsSection from '@/components/marketing/services/testimonials-section';
+import FAQSection from '@/components/marketing/services/faq-section';
+import { 
+  Palette,
+  Heart,
+  Book,
+  PenTool,
+  Layout,
+  Target,
+  Users,
+  Globe,
+  FileImage,
+  Megaphone,
+  Share2,
+} from 'lucide-react';
+
+export const metadata = {
+  title: "Branding & Identité Visuelle | onRuntime Studio",
+  description: "Créez une identité de marque mémorable et cohérente. Notre expertise en branding vous garantit une identité visuelle qui reflète vos valeurs et capte votre audience.",
+};
+
+const BrandingServicePage = () => {
+  return (
+    <ServiceLayout
+      title={metadata.title}
+      description={metadata.description}
+      heroTitle="Branding & Identité de Marque"
+      heroDescription="Donnez vie à votre marque avec une identité visuelle distinctive et mémorable. Notre expertise en branding vous aide à créer une image de marque qui résonne avec votre audience et reflète vos valeurs."
+      heroImage="/static/images/services/design/charte-graphique/charte-graphique-hero.webp"
+    >
+      {/* Caractéristiques principales */}
+      <FeatureSection
+        title="Excellence en branding"
+        description="Notre expertise en identité de marque vous garantit une image cohérente et impactante."
+        features={[
+          {
+            title: "Identité visuelle",
+            description: "Création d'une identité unique et mémorable.",
+            icon: Palette
+          },
+          {
+            title: "Valeurs de marque",
+            description: "Expression visuelle de votre ADN et vos valeurs.",
+            icon: Heart
+          },
+          {
+            title: "Charte graphique",
+            description: "Documentation complète de votre identité.",
+            icon: Book
+          },
+          {
+            title: "Design system",
+            description: "Éléments visuels cohérents et réutilisables.",
+            icon: PenTool
+          }
+        ]}
+        image="/static/images/services/design/charte-graphique/excellence-branding.webp"
+      />
+
+      {/* Avantages du branding */}
+      <FeatureSection
+        title="Identité de marque distinctive"
+        description="Découvrez les avantages d'une identité de marque professionnelle."
+        features={[
+          {
+            title: "Reconnaissance",
+            description: "Image de marque mémorable et distinctive.",
+            icon: Target
+          },
+          {
+            title: "Cohérence",
+            description: "Communication visuelle unifiée sur tous les supports.",
+            icon: Layout
+          },
+          {
+            title: "Confiance",
+            description: "Crédibilité renforcée auprès de votre audience.",
+            icon: Users
+          },
+          {
+            title: "Portée",
+            description: "Impact visuel fort sur tous les canaux.",
+            icon: Globe
+          }
+        ]}
+        image="/static/images/services/design/charte-graphique/identite-distinctive.webp"
+        reversed
+      />
+
+      {/* Témoignages */}
+      <TestimonialsSection
+        title="Ils nous font confiance"
+        description="Découvrez les retours de nos clients sur leur identité de marque"
+        testimonials={[
+          {
+            content: "Notre nouvelle identité visuelle a transformé la perception de notre marque sur le marché.",
+            author: {
+              name: "Émilie Robert",
+              role: "Directrice Marketing",
+              company: "BrandNew",
+              image: "/static/images/testimonials/emilie-robert.webp"
+            }
+          },
+          {
+            content: "Une identité qui reflète parfaitement nos valeurs et résonne avec notre audience.",
+            author: {
+              name: "Lucas Dupont",
+              role: "Fondateur",
+              company: "StartupVision",
+              image: "/static/images/testimonials/lucas-dupont.webp"
+            }
+          },
+          {
+            content: "La cohérence de notre marque a considérablement renforcé notre crédibilité.",
+            author: {
+              name: "Marie Lambert",
+              role: "Directrice Communication",
+              company: "InnoGroup",
+              image: "/static/images/testimonials/marie-lambert.webp"
+            }
+          }
+        ]}
+      />
+
+      {/* FAQ */}
+      <FAQSection
+        title="Questions fréquentes"
+        description="Tout ce que vous devez savoir sur notre service de branding"
+        items={[
+          {
+            question: "Que comprend une identité de marque complète ?",
+            answer: "Une identité de marque complète inclut le logo, la palette de couleurs, la typographie, les éléments graphiques, le ton de voix, et les règles d'utilisation. Nous fournissons une charte graphique détaillée qui documente tous ces éléments et guide leur utilisation cohérente."
+          },
+          {
+            question: "Comment se déroule le processus de création ?",
+            answer: "Le processus commence par une phase de découverte pour comprendre votre marque, vos valeurs et votre audience. Nous développons ensuite des concepts créatifs, créons les éléments visuels, et itérons selon vos retours. Le processus se termine par la livraison d'une charte graphique complète."
+          },
+          {
+            question: "Quels livrables sont fournis ?",
+            answer: "Vous recevez un package complet incluant : logos (différentes versions), palette de couleurs, typographies, éléments graphiques, modèles de documents, guides d'utilisation, et fichiers sources dans tous les formats nécessaires."
+          },
+          {
+            question: "Comment garantissez-vous l'unicité de l'identité ?",
+            answer: "Nous effectuons une recherche approfondie de votre marché et de la concurrence pour créer une identité distinctive. Nous vérifions également la disponibilité des éléments visuels pour éviter tout conflit avec des marques existantes."
+          },
+          {
+            question: "Comment gérez-vous la transition vers la nouvelle identité ?",
+            answer: "Nous fournissons un plan de déploiement progressif qui guide la transition vers la nouvelle identité. Cela inclut des recommandations pour la communication interne et externe, et un calendrier de mise en œuvre."
+          }
+        ]}
+      />
+
+      {/* Services complémentaires */}
+      <FeatureSection
+        title="Services complémentaires"
+        description="Renforcez votre identité de marque avec nos services additionnels"
+        features={[
+          {
+            title: "Marketing Kit",
+            description: "Création de supports marketing cohérents.",
+            icon: Megaphone
+          },
+          {
+            title: "Réseaux sociaux",
+            description: "Adaptation pour les médias sociaux.",
+            icon: Share2
+          },
+          {
+            title: "Supports print",
+            description: "Création de supports imprimés.",
+            icon: FileImage
+          }
+        ]}
+        image="/static/images/services/design/charte-graphique/service-complementaire.webp"
+      />
+    </ServiceLayout>
+  );
+};
+
+export default BrandingServicePage;
\ No newline at end of file
diff --git a/src/app/services/design/moodboard/page.tsx b/src/app/services/design/moodboard/page.tsx
new file mode 100644
index 000000000..f1889ead6
--- /dev/null
+++ b/src/app/services/design/moodboard/page.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import FeatureSection from '@/components/marketing/services/feature-section';
+import TestimonialsSection from '@/components/marketing/services/testimonials-section';
+import FAQSection from '@/components/marketing/services/faq-section';
+import { 
+  Palette,
+  Image,
+  Lightbulb,
+  Target,
+  PenTool,
+  Compass,
+  Brush,
+  Share2,
+  Eye,
+  FileImage,
+  Layers
+} from 'lucide-react';
+
+export const metadata = {
+  title: "Création de Moodboards | onRuntime Studio",
+  description: "Définissez l'identité visuelle de votre projet avec des moodboards professionnels. Notre expertise en design vous garantit une direction artistique claire et cohérente.",
+};
+
+const MoodboardServicePage = () => {
+  return (
+    <ServiceLayout
+      title={metadata.title}
+      description={metadata.description}
+      heroTitle="Moodboards & Direction Artistique"
+      heroDescription="Donnez vie à votre vision grâce à des moodboards soigneusement élaborés. Notre expertise en design vous aide à définir une direction artistique claire et inspirante pour votre projet."
+      heroImage="/static/images/services/design/moodboard/hero-moodboard.jpg"
+    >
+      {/* Caractéristiques principales */}
+      <FeatureSection
+        title="Excellence en direction artistique"
+        description="Notre expertise en création de moodboards vous garantit une identité visuelle cohérente et impactante."
+        features={[
+          {
+            title: "Direction créative",
+            description: "Définition claire de l'ambiance et du style visuel.",
+            icon: Compass
+          },
+          {
+            title: "Palette de couleurs",
+            description: "Sélection harmonieuse des couleurs de votre identité.",
+            icon: Palette
+          },
+          {
+            title: "Style visuel",
+            description: "Exploration et définition de votre univers graphique.",
+            icon: Image
+          },
+          {
+            title: "Inspiration ciblée",
+            description: "Recherche approfondie adaptée à votre secteur.",
+            icon: Target
+          }
+        ]}
+        image="/static/images/services/design/moodboard/direction-artistique.webp"
+      />
+
+      {/* Avantages des moodboards */}
+      <FeatureSection
+        title="Vision créative claire"
+        description="Découvrez les avantages d'un moodboard professionnel pour votre projet."
+        features={[
+          {
+            title: "Direction claire",
+            description: "Vision commune et alignement des équipes créatives.",
+            icon: Lightbulb
+          },
+          {
+            title: "Communication visuelle",
+            description: "Support efficace pour partager votre vision.",
+            icon: Share2
+          },
+          {
+            title: "Cohérence",
+            description: "Garantie d'une identité visuelle harmonieuse.",
+            icon: Eye
+          },
+          {
+            title: "Expertise créative",
+            description: "Conseils professionnels et direction artistique.",
+            icon: Brush
+          }
+        ]}
+        image="/static/images/services/design/moodboard/vision-claire.webp"
+        reversed
+      />
+
+      {/* Témoignages */}
+      <TestimonialsSection
+        title="Ils nous font confiance"
+        description="Découvrez les retours de nos clients sur leurs moodboards"
+        testimonials={[
+          {
+            content: "Le moodboard a parfaitement capturé l'essence de notre marque et guidé toute notre identité visuelle.",
+            author: {
+              name: "Marie Laurent",
+              role: "Directrice Artistique",
+              company: "Studio Créatif",
+              image: "/static/images/testimonials/marie-laurent.webp"
+            }
+          },
+          {
+            content: "Une exploration visuelle qui nous a permis de définir clairement notre direction artistique.",
+            author: {
+              name: "Thomas Moreau",
+              role: "Fondateur",
+              company: "Brand New",
+              image: "/static/images/testimonials/thomas-moreau.webp"
+            }
+          },
+          {
+            content: "Un outil précieux qui a unifié la vision de toute notre équipe créative.",
+            author: {
+              name: "Sophie Martin",
+              role: "Creative Lead",
+              company: "Design Factory",
+              image: "/static/images/testimonials/sophie-martin.webp"
+            }
+          }
+        ]}
+      />
+
+      {/* FAQ */}
+      <FAQSection
+        title="Questions fréquentes"
+        description="Tout ce que vous devez savoir sur notre service de création de moodboards"
+        items={[
+          {
+            question: "Qu'est-ce qu'un moodboard et à quoi sert-il ?",
+            answer: "Un moodboard est un assemblage visuel qui définit la direction artistique de votre projet. Il combine couleurs, typographies, images et textures pour créer une référence visuelle cohérente. C'est un outil essentiel pour communiquer votre vision et assurer la cohérence de votre identité visuelle."
+          },
+          {
+            question: "Comment se déroule le processus de création ?",
+            answer: "Le processus commence par une phase de découverte où nous explorons vos objectifs et votre univers. Nous effectuons ensuite une recherche approfondie pour sélectionner les éléments visuels appropriés. Après plusieurs itérations et vos retours, nous finalisons le moodboard qui servira de guide pour votre projet."
+          },
+          {
+            question: "Quels éléments comprend un moodboard ?",
+            answer: "Un moodboard professionnel inclut généralement : une palette de couleurs, des typographies, des images d'inspiration, des textures, des patterns, et des références stylistiques. Nous ajoutons également des notes explicatives pour clarifier les choix créatifs."
+          },
+          {
+            question: "Comment utilisez-vous le moodboard dans la suite du projet ?",
+            answer: "Le moodboard sert de référence tout au long du projet. Il guide les décisions de design, assure la cohérence visuelle et facilite la communication entre toutes les parties prenantes. C'est un document vivant qui peut évoluer avec vos retours."
+          },
+          {
+            question: "Combien de temps prend la création d'un moodboard ?",
+            answer: "La création d'un moodboard professionnel prend généralement 1 à 2 semaines, incluant la phase de recherche, la création initiale et les itérations basées sur vos retours. Ce temps nous permet d'explorer en profondeur et d'affiner la direction artistique."
+          }
+        ]}
+      />
+
+      {/* Services complémentaires */}
+      <FeatureSection
+        title="Services complémentaires"
+        description="Enrichissez votre identité visuelle avec nos services additionnels"
+        features={[
+          {
+            title: "Charte graphique",
+            description: "Création d'une charte graphique complète.",
+            icon: FileImage
+          },
+          {
+            title: "Style Guide",
+            description: "Guide détaillé d'utilisation de votre identité.",
+            icon: Layers
+          },
+          {
+            title: "Direction artistique",
+            description: "Accompagnement créatif continu.",
+            icon: PenTool
+          }
+        ]}
+        image="/static/images/services/design/moodboard/services-supplementaires.webp"
+      />
+    </ServiceLayout>
+  );
+};
+
+export default MoodboardServicePage;
\ No newline at end of file
diff --git a/src/app/services/design/page.tsx b/src/app/services/design/page.tsx
new file mode 100644
index 000000000..9a6b47198
--- /dev/null
+++ b/src/app/services/design/page.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import Services from '@/constants/services';
+import ServiceOverviewPage from '@/components/marketing/services/service-overview';
+import { ServiceCategory } from '@/types/service';
+import type { Metadata } from "next";
+import { Lightbulb, Target, Users, Zap } from 'lucide-react';
+
+export const metadata: Metadata = {
+  title: "Design UI/UX | onRuntime Studio",
+  description: "Création d'interfaces modernes et d'expériences utilisateur optimales. Notre expertise en design vous garantit des interfaces élégantes et fonctionnelles.",
+};
+
+const DesignServicePage = () => {
+  const designService = Services.find(service => service.id === ServiceCategory.DESIGN);
+
+  if (!designService) {
+    return null;
+  }
+
+  const benefits = [
+    {
+      title: "Design UI/UX centré utilisateur",
+      description: "Une approche qui place les besoins utilisateurs au cœur de nos designs, validée par des prototypes interactifs.",
+      icon: Users
+    },
+    {
+      title: "Innovation créative",
+      description: "Des solutions UI/UX créatives et des prototypes innovants qui distinguent votre marque tout en respectant les standards.",
+      icon: Lightbulb
+    },
+    {
+      title: "Prototypage itératif",
+      description: "Une méthodologie basée sur des prototypes rapides et des itérations fréquentes pour affiner l'expérience utilisateur.",
+      icon: Zap
+    },
+    {
+      title: "Objectifs business",
+      description: "Un design UI/UX aligné sur vos objectifs commerciaux, validé par des tests utilisateurs sur prototypes.",
+      icon: Target
+    }
+  ];
+
+  const processList = [
+    {
+      title: "Analyse des besoins",
+      description: "Première étape cruciale où nous analysons vos besoins, votre marque et vos objectifs business pour définir la direction UI/UX.",
+      services: ["Design UI/UX"]
+    },
+    {
+      title: "Recherche et moodboard",
+      description: "Création de moodboards et exploration des directions créatives possibles. Définition de la direction artistique globale.",
+      services: ["Design UI/UX", "Moodboard"]
+    },
+    {
+      title: "Wireframes",
+      description: "Conception des wireframes pour valider la structure, la hiérarchie et l'architecture de l'information.",
+      services: ["Design UI/UX", "Wireframes"]
+    },
+    {
+      title: "Design d'interface",
+      description: "Création des maquettes finales en respectant votre charte graphique. Attention particulière aux composants et à leur réutilisabilité.",
+      services: ["Design UI/UX"]
+    },
+    {
+      title: "Prototypage",
+      description: "Création de prototypes pour tester les interactions et valider les parcours utilisateurs.",
+      services: ["Design UI/UX"]
+    },
+    {
+      title: "Développement",
+      description: "Transformation des maquettes en interfaces fonctionnelles, avec une attention particulière aux animations définies.",
+      services: ["Développement Frontend", "Intégration"]
+    }
+  ];
+
+  return (
+    <ServiceOverviewPage
+      service={designService}
+      heroImage="/static/images/services/design/hero-design.webp"
+      showCaseImage="/static/images/services/design/showcase-design.webp"
+      benefits={benefits}
+      processList={processList}
+    />
+  );
+};
+
+export default DesignServicePage;
\ No newline at end of file
diff --git a/src/app/services/design/ui/page.tsx b/src/app/services/design/ui/page.tsx
new file mode 100644
index 000000000..3fefc68bf
--- /dev/null
+++ b/src/app/services/design/ui/page.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import FeatureSection from '@/components/marketing/services/feature-section';
+import TestimonialsSection from '@/components/marketing/services/testimonials-section';
+import FAQSection from '@/components/marketing/services/faq-section';
+import { 
+  Palette,
+  Layers,
+  Paintbrush,
+  Smartphone,
+  Zap,
+  Eye,
+  SlidersHorizontal,
+  MousePointer,
+  Component,
+  LayoutGrid,
+  Code
+} from 'lucide-react';
+
+export const metadata = {
+  title: "Design UI/Maquettes | onRuntime Studio",
+  description: "Créez des interfaces utilisateur modernes et attrayantes. Notre expertise en design UI vous garantit des maquettes professionnelles et une expérience utilisateur exceptionnelle.",
+};
+
+const UIDesignServicePage = () => {
+  return (
+    <ServiceLayout
+      title={metadata.title}
+      description={metadata.description}
+      heroTitle="Design d'Interface Utilisateur"
+      heroDescription="Créez des interfaces modernes, élégantes et intuitives pour vos applications. Notre expertise en design UI vous garantit des maquettes professionnelles qui captiveront vos utilisateurs."
+      heroImage="/static/images/services/design/maquettage-ui/hero-ui.webp"
+    >
+      {/* Caractéristiques principales */}
+      <FeatureSection
+        title="Excellence en design UI"
+        description="Notre expertise en design d'interface vous garantit des maquettes professionnelles et impactantes."
+        features={[
+          {
+            title: "Design moderne",
+            description: "Interfaces élégantes suivant les dernières tendances.",
+            icon: Paintbrush
+          },
+          {
+            title: "Système de design",
+            description: "Composants cohérents et réutilisables.",
+            icon: Component
+          },
+          {
+            title: "Responsive design",
+            description: "Adaptation parfaite à tous les écrans.",
+            icon: Smartphone
+          },
+          {
+            title: "Animations & micro-interactions",
+            description: "Interactions fluides et engageantes.",
+            icon: Zap
+          }
+        ]}
+        image="/static/images/services/design/maquettage-ui/excellence-design-ui.webp"
+      />
+
+      {/* Avantages du design UI */}
+      <FeatureSection
+        title="Design UI professionnel"
+        description="Découvrez les avantages d'un design d'interface professionnel."
+        features={[
+          {
+            title: "Identité visuelle",
+            description: "Design cohérent avec votre marque.",
+            icon: Palette
+          },
+          {
+            title: "Expérience utilisateur",
+            description: "Interfaces intuitives et agréables à utiliser.",
+            icon: Eye
+          },
+          {
+            title: "Design system",
+            description: "Bibliothèque de composants réutilisables.",
+            icon: Layers
+          },
+          {
+            title: "Accessibilité",
+            description: "Interfaces accessibles à tous les utilisateurs.",
+            icon: SlidersHorizontal
+          }
+        ]}
+        image="/static/images/services/design/maquettage-ui/design-ui-professionnel.webp"
+        reversed
+      />
+
+      {/* Témoignages */}
+      <TestimonialsSection
+        title="Ils nous font confiance"
+        description="Découvrez les retours de nos clients sur leurs interfaces"
+        testimonials={[
+          {
+            content: "Le nouveau design de notre application a considérablement amélioré l'engagement de nos utilisateurs.",
+            author: {
+              name: "Mathilde Laurent",
+              role: "Product Manager",
+              company: "AppLife",
+              image: "/static/images/testimonials/mathilde-laurent.webp"
+            }
+          },
+          {
+            content: "Un design moderne qui a transformé l'image de notre marque.",
+            author: {
+              name: "Antoine Dubois",
+              role: "Directeur Marketing",
+              company: "BrandNew",
+              image: "/static/images/testimonials/antoine-dubois.webp"
+            }
+          },
+          {
+            content: "La qualité des maquettes a facilité le travail de nos développeurs.",
+            author: {
+              name: "Claire Martin",
+              role: "Lead Developer",
+              company: "TechFlow",
+              image: "/static/images/testimonials/claire-martin.webp"
+            }
+          }
+        ]}
+      />
+
+      {/* FAQ */}
+      <FAQSection
+        title="Questions fréquentes"
+        description="Tout ce que vous devez savoir sur notre service de design UI"
+        items={[
+          {
+            question: "Comment se déroule le processus de design UI ?",
+            answer: "Le processus commence par l'analyse de vos besoins et de votre identité de marque. Nous créons ensuite des premières versions des écrans clés, établissons le système de design, puis itérons sur les maquettes détaillées. Chaque étape inclut vos retours pour assurer un résultat parfaitement aligné avec vos attentes."
+          },
+          {
+            question: "Quels outils et livrables sont fournis ?",
+            answer: "Nous utilisons principalement Figma pour le design UI. Vous recevez les maquettes détaillées de tous les écrans, un système de design complet avec ses composants, les spécifications pour les développeurs, et les assets nécessaires à l'intégration."
+          },
+          {
+            question: "Comment gérez-vous le responsive design ?",
+            answer: "Nous suivons une approche mobile-first et créons des maquettes pour chaque breakpoint important (mobile, tablette, desktop). Chaque interface est optimisée pour offrir la meilleure expérience possible sur son support."
+          },
+          {
+            question: "Comment garantissez-vous la cohérence du design ?",
+            answer: "Nous créons un système de design complet incluant une bibliothèque de composants, des règles typographiques, une palette de couleurs et des principes de design. Ce système assure la cohérence à travers toute l'interface."
+          },
+          {
+            question: "Comment facilitez-vous le travail des développeurs ?",
+            answer: "Nous fournissons des spécifications détaillées pour chaque composant, incluant les mesures, les styles, les états et les interactions. Nous utilisons également des outils comme Zeplin ou les exports Figma pour faciliter l'intégration."
+          }
+        ]}
+      />
+
+      {/* Services complémentaires */}
+      <FeatureSection
+        title="Services complémentaires"
+        description="Optimisez votre design UI avec nos services additionnels"
+        features={[
+          {
+            title: "Design system",
+            description: "Création d'une bibliothèque de composants.",
+            icon: LayoutGrid
+          },
+          {
+            title: "Prototypage",
+            description: "Création de prototypes interactifs.",
+            icon: MousePointer
+          },
+          {
+            title: "Développement",
+            description: "Intégration de vos maquettes en code.",
+            icon: Code
+          }
+        ]}
+        image="/static/images/services/design/moodboard/services-supplementaires.webp"
+      />
+    </ServiceLayout>
+  );
+};
+
+export default UIDesignServicePage;
\ No newline at end of file
diff --git a/src/app/services/design/wireframes/page.tsx b/src/app/services/design/wireframes/page.tsx
new file mode 100644
index 000000000..0fdbbeb9c
--- /dev/null
+++ b/src/app/services/design/wireframes/page.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import FeatureSection from '@/components/marketing/services/feature-section';
+import TestimonialsSection from '@/components/marketing/services/testimonials-section';
+import FAQSection from '@/components/marketing/services/faq-section';
+import { 
+  LayoutTemplate,
+  Users,
+  Blocks,
+  MousePointer,
+  Smartphone,
+  Monitor,
+  Share2,
+  FileCheck,
+  LayoutGrid,
+  FileText,
+  ListChecks
+} from 'lucide-react';
+
+export const metadata = {
+  title: "Création de Wireframes | onRuntime Studio",
+  description: "Concevez l'architecture de vos interfaces avec des wireframes professionnels. Notre expertise UX vous garantit une structure claire et une navigation optimale.",
+};
+
+const WireframesServicePage = () => {
+  return (
+    <ServiceLayout
+      title={metadata.title}
+      description={metadata.description}
+      heroTitle="Wireframes & Architecture UX"
+      heroDescription="Structurez vos interfaces utilisateur avec des wireframes professionnels. Notre expertise en UX design vous garantit une architecture intuitive et une expérience utilisateur optimale dès les premières étapes de votre projet."
+      heroImage="/static/images/services/design/wireframes/hero-wireframes.webp"
+    >
+      {/* Caractéristiques principales */}
+      <FeatureSection
+        title="Excellence en conception UX"
+        description="Notre expertise en création de wireframes vous garantit une architecture d'interface claire et efficace."
+        features={[
+          {
+            title: "Architecture UX",
+            description: "Structure claire et logique de vos interfaces.",
+            icon: LayoutTemplate
+          },
+          {
+            title: "Parcours utilisateur",
+            description: "Optimisation des flux de navigation.",
+            icon: Users
+          },
+          {
+            title: "Hiérarchie visuelle",
+            description: "Organisation efficace du contenu et des fonctionnalités.",
+            icon: Blocks
+          },
+          {
+            title: "Interactions",
+            description: "Définition des comportements et des transitions.",
+            icon: MousePointer
+          }
+        ]}
+        image="/static/images/services/design/wireframes/excellence-conception-ux.webp"
+      />
+
+      {/* Avantages des wireframes */}
+      <FeatureSection
+        title="Design UX structuré"
+        description="Découvrez les avantages des wireframes dans votre processus de conception."
+        features={[
+          {
+            title: "Responsive Design",
+            description: "Adaptation à tous les formats d'écrans.",
+            icon: Smartphone
+          },
+          {
+            title: "Prototypage rapide",
+            description: "Tests et itérations efficaces.",
+            icon: Monitor
+          },
+          {
+            title: "Collaboration",
+            description: "Communication claire avec toutes les parties prenantes.",
+            icon: Share2
+          },
+          {
+            title: "Validation précoce",
+            description: "Détection et correction rapide des problèmes UX.",
+            icon: FileCheck
+          }
+        ]}
+        image="/static/images/services/design/wireframes/design-structure.webp"
+        reversed
+      />
+
+      {/* Témoignages */}
+      <TestimonialsSection
+        title="Ils nous font confiance"
+        description="Découvrez les retours de nos clients sur leurs wireframes"
+        testimonials={[
+          {
+            content: "Les wireframes nous ont permis d'optimiser notre parcours utilisateur avant même de commencer le design.",
+            author: {
+              name: "Julie Dubois",
+              role: "Product Owner",
+              company: "UX Vision",
+              image: "/static/images/testimonials/julie-dubois.jpg"
+            }
+          },
+          {
+            content: "Une étape cruciale qui a considérablement réduit nos coûts de développement.",
+            author: {
+              name: "Pierre Martin",
+              role: "CTO",
+              company: "AppFlow",
+              image: "/static/images/testimonials/pierre-martin.jpg"
+            }
+          },
+          {
+            content: "La qualité des wireframes a facilité la communication avec toute l'équipe.",
+            author: {
+              name: "Sarah Lambert",
+              role: "UX Designer",
+              company: "DigitalFirst",
+              image: "/static/images/testimonials/sarah-lambert.jpg"
+            }
+          }
+        ]}
+      />
+
+      {/* FAQ */}
+      <FAQSection
+        title="Questions fréquentes"
+        description="Tout ce que vous devez savoir sur notre service de création de wireframes"
+        items={[
+          {
+            question: "Qu'est-ce qu'un wireframe et pourquoi est-ce important ?",
+            answer: "Un wireframe est une représentation schématique de votre interface qui se concentre sur la structure, la hiérarchie et les fonctionnalités, sans les éléments de design final. C'est une étape cruciale qui permet de valider l'architecture de l'information et l'expérience utilisateur avant d'investir dans le design détaillé."
+          },
+          {
+            question: "Comment se déroule le processus de création ?",
+            answer: "Le processus commence par l'analyse de vos besoins et objectifs. Nous créons ensuite des wireframes de basse fidélité pour valider la structure globale, puis des versions plus détaillées avec les interactions. Après plusieurs itérations et vos retours, nous finalisons les wireframes qui serviront de base au design UI."
+          },
+          {
+            question: "Quels livrables sont fournis ?",
+            answer: "Vous recevez un ensemble complet de wireframes pour chaque écran clé, des diagrammes de flux utilisateur, une documentation des interactions, et des prototypes interactifs pour tester les parcours utilisateur. Tous les fichiers sources sont également fournis."
+          },
+          {
+            question: "Comment gérez-vous le responsive design ?",
+            answer: "Nous créons des wireframes adaptés à chaque format d'écran important (desktop, tablet, mobile) en suivant une approche mobile-first. Chaque version est optimisée pour offrir la meilleure expérience utilisateur possible sur son support."
+          },
+          {
+            question: "Combien de temps prend la création des wireframes ?",
+            answer: "La durée dépend de la complexité du projet, mais généralement 2 à 4 semaines pour un projet moyen, incluant les phases d'analyse, création, itérations et finalisation. Nous établissons un planning détaillé au début du projet."
+          }
+        ]}
+      />
+
+      {/* Services complémentaires */}
+      <FeatureSection
+        title="Services complémentaires"
+        description="Optimisez votre processus UX avec nos services additionnels"
+        features={[
+          {
+            title: "Audit UX",
+            description: "Analyse approfondie de vos interfaces existantes.",
+            icon: ListChecks
+          },
+          {
+            title: "Prototypage",
+            description: "Création de prototypes interactifs.",
+            icon: LayoutGrid
+          },
+          {
+            title: "Documentation UX",
+            description: "Documentation détaillée des parcours utilisateur.",
+            icon: FileText
+          }
+        ]}
+        image="/static/images/services/design/moodboard/services-supplementaires.webp"
+      />
+    </ServiceLayout>
+  );
+};
+
+export default WireframesServicePage;
\ No newline at end of file
diff --git a/src/app/services/frontend/desktop/page.tsx b/src/app/services/frontend/desktop/page.tsx
new file mode 100644
index 000000000..1730a24e8
--- /dev/null
+++ b/src/app/services/frontend/desktop/page.tsx
@@ -0,0 +1,184 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import FeatureSection from '@/components/marketing/services/feature-section';
+import TestimonialsSection from '@/components/marketing/services/testimonials-section';
+import FAQSection from '@/components/marketing/services/faq-section';
+import { 
+  Rocket, 
+  Monitor,
+  Laptop,
+  Apple,
+  Database,
+  Upload,
+  Download,
+  Cpu,
+  Code,
+  LineChart,
+  Cloud
+} from 'lucide-react';
+
+export const metadata = {
+  title: "Développement Applications Desktop | onRuntime Studio",
+  description: "Créez des applications de bureau performantes et multiplateformes avec Electron. Notre expertise en développement desktop vous garantit des applications robustes et intuitives.",
+};
+
+const DesktopServicePage = () => {
+  return (
+    <ServiceLayout
+      title={metadata.title}
+      description={metadata.description}
+      heroTitle="Applications Desktop Multiplateformes"
+      heroDescription="Développez des applications de bureau modernes et performantes pour Windows, macOS et Linux. Notre expertise vous garantit des applications professionnelles qui tirent parti de toute la puissance du desktop."
+      heroImage="/static/images/services/frontend/desktop/frontend-systeme.webp"
+    >
+      {/* Caractéristiques principales */}
+      <FeatureSection
+        title="Excellence en développement desktop"
+        description="Notre expertise en développement d'applications de bureau vous garantit des solutions professionnelles et performantes."
+        features={[
+          {
+            title: "Electron & React",
+            description: "Technologies modernes pour des applications desktop performantes et évolutives.",
+            icon: Code
+          },
+          {
+            title: "Multiplateforme",
+            description: "Applications compatibles Windows, macOS et Linux à partir d'une base de code unique.",
+            icon: Monitor
+          },
+          {
+            title: "Performance native",
+            description: "Optimisation pour tirer parti des ressources système de manière efficace.",
+            icon: Rocket
+          },
+          {
+            title: "Intégration système",
+            description: "Accès aux fonctionnalités natives du système d'exploitation.",
+            icon: Cpu
+          }
+        ]}
+        image="/static/images/services/frontend/desktop/frontend-developpement.webp"
+      />
+
+      {/* Avantages des applications desktop */}
+      <FeatureSection
+        title="Puissance du desktop"
+        description="Découvrez les avantages des applications de bureau modernes."
+        features={[
+          {
+            title: "Windows & macOS",
+            description: "Support natif des principales plateformes desktop.",
+            icon: Laptop
+          },
+          {
+            title: "Accès système",
+            description: "Interaction directe avec le système d'exploitation.",
+            icon: Apple
+          },
+          {
+            title: "Mode hors ligne",
+            description: "Fonctionnement autonome sans connexion internet requise.",
+            icon: Download
+          },
+          {
+            title: "Données locales",
+            description: "Stockage et traitement des données en local pour plus de sécurité.",
+            icon: Database
+          }
+        ]}
+        image="/static/images/services/frontend/desktop/frontend-app.webp"
+        reversed
+      />
+
+      {/* Témoignages */}
+      <TestimonialsSection
+        title="Ils nous font confiance"
+        description="Découvrez les retours de nos clients sur leurs applications desktop"
+        testimonials={[
+          {
+            content: "Notre application desktop nous permet d'offrir une expérience professionnelle à nos utilisateurs sur tous les systèmes.",
+            author: {
+              name: "Laurent Dupont",
+              role: "Directeur Technique",
+              company: "DesktopPro",
+              image: "/static/images/testimonials/laurent-dupont.jpg"
+            }
+          },
+          {
+            content: "La performance et la fiabilité de notre application ont dépassé nos attentes.",
+            author: {
+              name: "Caroline Martin",
+              role: "Product Owner",
+              company: "SoftSolutions",
+              image: "/static/images/testimonials/caroline-martin.jpg"
+            }
+          },
+          {
+            content: "Une solution desktop moderne qui combine puissance et facilité d'utilisation.",
+            author: {
+              name: "Michel Bernard",
+              role: "CEO",
+              company: "AppStudio",
+              image: "/static/images/testimonials/michel-bernard.jpg"
+            }
+          }
+        ]}
+      />
+
+      {/* FAQ */}
+      <FAQSection
+        title="Questions fréquentes"
+        description="Tout ce que vous devez savoir sur notre service de développement desktop"
+        items={[
+          {
+            question: "Pourquoi choisir Electron pour le développement desktop ?",
+            answer: "Electron permet de créer des applications desktop multiplateformes avec des technologies web modernes (React, TypeScript). Cela offre un développement rapide, une maintenance simplifiée et une excellente expérience utilisateur, tout en garantissant la compatibilité avec Windows, macOS et Linux."
+          },
+          {
+            question: "Comment gérez-vous la sécurité des applications desktop ?",
+            answer: "Nous implémentons plusieurs niveaux de sécurité : chiffrement des données sensibles, protection contre les injections de code, mises à jour de sécurité automatiques, et bonnes pratiques de développement sécurisé. Nous suivons également les recommandations de sécurité spécifiques à chaque système d'exploitation."
+          },
+          {
+            question: "Proposez-vous un système de mise à jour automatique ?",
+            answer: "Oui, nous intégrons un système de mise à jour automatique qui permet de déployer facilement les nouvelles versions de l'application. Les utilisateurs sont notifiés des mises à jour disponibles et peuvent les installer en un clic."
+          },
+          {
+            question: "Comment gérez-vous la distribution des applications ?",
+            answer: "Nous gérons tout le processus de distribution : création des installateurs pour chaque plateforme, signature des applications, publication sur les stores si nécessaire (Microsoft Store, Mac App Store), et mise en place d'un système de mise à jour automatique."
+          },
+          {
+            question: "Proposez-vous un support après le lancement ?",
+            answer: "Oui, nous proposons plusieurs formules de maintenance incluant : support technique, correction de bugs, mises à jour de sécurité, optimisations de performance et évolutions fonctionnelles."
+          }
+        ]}
+      />
+
+      {/* Services complémentaires */}
+      <FeatureSection
+        title="Services complémentaires"
+        description="Optimisez votre application desktop avec nos services additionnels"
+        features={[
+          {
+            title: "Télémétrie",
+            description: "Suivi des performances et du comportement utilisateur.",
+            icon: LineChart
+          },
+          {
+            title: "Distribution",
+            description: "Publication sur les stores et gestion des mises à jour.",
+            icon: Upload
+          },
+          {
+            title: "Cloud Sync",
+            description: "Synchronisation des données avec le cloud.",
+            icon: Cloud
+          }
+        ]}
+        image="/static/images/services/frontend/desktop/frontend-complementaire.webp"
+
+      />
+    </ServiceLayout>
+  );
+};
+
+export default DesktopServicePage;
\ No newline at end of file
diff --git a/src/app/services/frontend/mobile/page.tsx b/src/app/services/frontend/mobile/page.tsx
new file mode 100644
index 000000000..c864e3aed
--- /dev/null
+++ b/src/app/services/frontend/mobile/page.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import FeatureSection from '@/components/marketing/services/feature-section';
+import TestimonialsSection from '@/components/marketing/services/testimonials-section';
+import FAQSection from '@/components/marketing/services/faq-section';
+import { 
+  Rocket, 
+  Smartphone, 
+  Tablet,
+  AppWindow,
+  Layout,
+  Share2,
+  MessageSquare,
+  PenTool,
+  Gauge,
+  Code,
+  Store
+} from 'lucide-react';
+
+export const metadata = {
+  title: "Développement Mobile Frontend | onRuntime Studio",
+  description: "Créez des applications mobiles performantes avec React Native. Notre expertise en développement mobile vous garantit des applications natives de qualité pour iOS et Android.",
+};
+
+const MobileFrontendServicePage = () => {
+  return (
+    <ServiceLayout
+      title={metadata.title}
+      description={metadata.description}
+      heroTitle="Développement Mobile React Native"
+      heroDescription="Créez des applications mobiles natives performantes pour iOS et Android avec React Native. Notre expertise vous garantit des applications robustes et une expérience utilisateur exceptionnelle."
+      heroImage="/static/images/services/frontend/mobile/frontend-react.webp"
+    >
+      {/* Caractéristiques principales */}
+      <FeatureSection
+        title="Excellence en développement mobile"
+        description="Notre expertise en React Native vous garantit des applications mobiles performantes et évolutives."
+        features={[
+          {
+            title: "React Native & Expo",
+            description: "Développement cross-platform efficace pour iOS et Android avec une base de code unique.",
+            icon: Code
+          },
+          {
+            title: "Design Natif",
+            description: "Interfaces respectant les guidelines de design iOS et Android pour une expérience familière.",
+            icon: Layout
+          },
+          {
+            title: "Performance Native",
+            description: "Optimisation poussée pour des performances proches du natif sur chaque plateforme.",
+            icon: Rocket
+          },
+          {
+            title: "UI/UX Mobile",
+            description: "Interfaces mobiles intuitives suivant les meilleures pratiques de chaque plateforme.",
+            icon: PenTool
+          }
+        ]}
+        image="/static/images/services/frontend/mobile/frontend-ux.webp"
+      />
+
+      {/* Avantages du développement mobile */}
+      <FeatureSection
+        title="Applications mobiles natives"
+        description="Découvrez les avantages du développement mobile avec React Native."
+        features={[
+          {
+            title: "Multi-plateformes",
+            description: "Applications fonctionnant sur iOS et Android à partir d'une base de code unique.",
+            icon: Smartphone
+          },
+          {
+            title: "Support tablettes",
+            description: "Interfaces adaptées aux différentes tailles d'écrans et orientations.",
+            icon: Tablet
+          },
+          {
+            title: "Performance optimale",
+            description: "Optimisation native pour des performances et une fluidité maximales.",
+            icon: Gauge
+          },
+          {
+            title: "Expérience native",
+            description: "Utilisation des fonctionnalités natives des appareils (caméra, GPS, notifications...).",
+            icon: AppWindow
+          }
+        ]}
+        image="/static/images/services/frontend/mobile/frontend-multiplatforme.webp"
+        reversed
+      />
+
+      {/* Témoignages */}
+      <TestimonialsSection
+        title="Ils nous font confiance"
+        description="Découvrez les retours de nos clients sur leurs projets mobiles"
+        testimonials={[
+          {
+            content: "Notre application React Native offre une expérience utilisateur exceptionnelle sur iOS et Android.",
+            author: {
+              name: "Thomas Leroux",
+              role: "CPO",
+              company: "MobileFirst",
+              image: "/static/images/testimonials/thomas-leroux.jpg"
+            }
+          },
+          {
+            content: "La qualité du développement nous a permis d'obtenir d'excellentes notes sur les stores.",
+            author: {
+              name: "Emma Martin",
+              role: "Directrice Produit",
+              company: "AppInnovation",
+              image: "/static/images/testimonials/emma-martin.jpg"
+            }
+          },
+          {
+            content: "Une seule équipe pour iOS et Android, avec des performances natives impressionnantes.",
+            author: {
+              name: "Nicolas Durand",
+              role: "CTO",
+              company: "TechMobile",
+              image: "/static/images/testimonials/nicolas-durand.jpg"
+            }
+          }
+        ]}
+      />
+
+      {/* FAQ */}
+      <FAQSection
+        title="Questions fréquentes"
+        description="Tout ce que vous devez savoir sur notre service de développement mobile"
+        items={[
+          {
+            question: "Pourquoi choisir React Native pour le développement mobile ?",
+            answer: "React Native permet de développer des applications performantes pour iOS et Android à partir d'une base de code unique, réduisant les coûts et le temps de développement tout en maintenant une qualité native. Il bénéficie également d'un large écosystème et du support de Meta (Facebook)."
+          },
+          {
+            question: "Comment assurez-vous la performance des applications ?",
+            answer: "Nous optimisons chaque aspect de l'application : temps de démarrage, consommation mémoire, animations fluides, chargement des données... Nous utilisons également des outils de profilage pour identifier et résoudre les problèmes de performance."
+          },
+          {
+            question: "Gérez-vous la publication sur les stores ?",
+            answer: "Oui, nous prenons en charge tout le processus de publication : préparation des assets, configuration des comptes développeur, soumission aux stores (App Store et Play Store) et suivi des mises à jour."
+          },
+          {
+            question: "Comment gérez-vous les mises à jour des applications ?",
+            answer: "Nous mettons en place des systèmes de mise à jour OTA (Over The Air) quand c'est possible, et nous gérons les mises à jour via les stores avec un processus optimisé pour minimiser les temps de validation."
+          },
+          {
+            question: "Proposez-vous un support après le lancement ?",
+            answer: "Oui, nous proposons différentes formules de maintenance incluant : monitoring des performances, corrections de bugs, mises à jour de sécurité et évolutions fonctionnelles."
+          }
+        ]}
+      />
+
+      {/* Services complémentaires */}
+      <FeatureSection
+        title="Services complémentaires"
+        description="Optimisez votre projet mobile avec nos services additionnels"
+        features={[
+          {
+            title: "Publication Store",
+            description: "Gestion complète de la publication sur l'App Store et le Play Store.",
+            icon: Store
+          },
+          {
+            title: "Intégration Backend",
+            description: "Connection avec vos systèmes et APIs existants.",
+            icon: Share2
+          },
+          {
+            title: "Formation React Native",
+            description: "Formation de vos équipes au développement React Native.",
+            icon: MessageSquare
+          }
+        ]}
+            image="/static/images/services/frontend/mobile/frontend-complementaire.webp"
+      />
+    </ServiceLayout>
+  );
+};
+
+export default MobileFrontendServicePage;
\ No newline at end of file
diff --git a/src/app/services/frontend/page.tsx b/src/app/services/frontend/page.tsx
new file mode 100644
index 000000000..1229e3355
--- /dev/null
+++ b/src/app/services/frontend/page.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import Services from '@/constants/services';
+import ServiceOverviewPage from '@/components/marketing/services/service-overview';
+import { ServiceCategory } from '@/types/service';
+import type { Metadata } from "next";
+import { Cpu, Gauge, GitBranch, Shield } from 'lucide-react';
+
+export const metadata: Metadata = {
+  title: "Développement Frontend | onRuntime Studio",
+  description: "Création d'applications web modernes, performantes et évolutives. Notre expertise en développement frontend garantit des solutions techniques robustes et innovantes.",
+};
+
+const FrontendServicePage = () => {
+  const frontendService = Services.find(service => service.id === ServiceCategory.FRONTEND);
+
+  if (!frontendService) {
+    return null;
+  }
+
+  const benefits = [
+    {
+      title: "Architecture évolutive",
+      description: "Applications construites sur des architectures modernes et scalables, prêtes pour l'évolution de votre projet.",
+      icon: Cpu
+    },
+    {
+      title: "Performance optimale",
+      description: "Focus sur les performances avec des techniques avancées d'optimisation et de mise en cache.",
+      icon: Gauge
+    },
+    {
+      title: "Code maintenable",
+      description: "Architecture propre et modulaire permettant une maintenance facile et des évolutions rapides.",
+      icon: GitBranch
+    },
+    {
+      title: "Sécurité renforcée",
+      description: "Implémentation des meilleures pratiques de sécurité frontend pour protéger vos utilisateurs.",
+      icon: Shield
+    }
+  ];
+
+  const processList = [
+    {
+      title: "Architecture technique",
+      description: "Définition de l'architecture frontend, choix des technologies et mise en place de l'environnement de développement.",
+      services: ["Architecture", "Conseil technique"]
+    },
+    {
+      title: "Mise en place du projet",
+      description: "Configuration du projet avec les bonnes pratiques de développement, tests et déploiement continu.",
+      services: ["Setup technique", "CI/CD"]
+    },
+    {
+      title: "Développement des features",
+      description: "Implémentation des fonctionnalités avec un focus sur la qualité du code et les performances.",
+      services: ["Développement Frontend", "React", "Next.js"]
+    },
+    {
+      title: "Gestion de l'état",
+      description: "Mise en place d'une gestion d'état robuste et performante pour les données de l'application.",
+      services: ["State Management", "API Integration"]
+    },
+    {
+      title: "Tests et qualité",
+      description: "Mise en place des tests automatisés et des processus d'assurance qualité.",
+      services: ["Tests unitaires", "Tests E2E"]
+    },
+    {
+      title: "Optimisation et monitoring",
+      description: "Optimisation des performances et mise en place d'outils de monitoring.",
+      services: ["Performance", "Analytics"]
+    }
+  ];
+
+  return (
+    <ServiceOverviewPage
+      service={frontendService}
+      heroImage="/static/images/services/frontend/frontend-developpement.webp"
+      showCaseImage="/static/images/services/frontend/frontend-expertise.webp"
+      benefits={benefits}
+      processList={processList}
+    />
+  );
+};
+
+export default FrontendServicePage;
\ No newline at end of file
diff --git a/src/app/services/frontend/pwa/page.tsx b/src/app/services/frontend/pwa/page.tsx
new file mode 100644
index 000000000..66f07deed
--- /dev/null
+++ b/src/app/services/frontend/pwa/page.tsx
@@ -0,0 +1,184 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import FeatureSection from '@/components/marketing/services/feature-section';
+import TestimonialsSection from '@/components/marketing/services/testimonials-section';
+import FAQSection from '@/components/marketing/services/faq-section';
+import { 
+  Rocket, 
+  Wifi,
+  Smartphone,
+  Cloud,
+  Zap,
+  Bell,
+  Download,
+  ArrowDownToLine,
+  Globe,
+  LineChart,
+  Shield
+} from 'lucide-react';
+
+export const metadata = {
+  title: "Développement Progressive Web App (PWA) | onRuntime Studio",
+  description: "Créez des applications web progressives performantes qui offrent une expérience proche du natif. Notre expertise en PWA vous garantit des applications accessibles et engageantes.",
+};
+
+const PWAServicePage = () => {
+  return (
+    <ServiceLayout
+      title={metadata.title}
+      description={metadata.description}
+      heroTitle="Progressive Web Apps (PWA)"
+      heroDescription="Transformez votre site web en véritable application installable avec les Progressive Web Apps. Offrez une expérience utilisateur exceptionnelle, en ligne comme hors ligne."
+      heroImage="/static/images/services/frontend/pwa/frontend-pwa.webp"
+    >
+      {/* Caractéristiques principales */}
+      <FeatureSection
+        title="Excellence en PWA"
+        description="Notre expertise en Progressive Web Apps vous garantit des applications web modernes et performantes."
+        features={[
+          {
+            title: "Installation native",
+            description: "Applications installables directement depuis le navigateur, sans passer par les stores.",
+            icon: Download
+          },
+          {
+            title: "Mode hors ligne",
+            description: "Fonctionnement même sans connexion internet grâce au cache intelligent.",
+            icon: Wifi
+          },
+          {
+            title: "Performance optimale",
+            description: "Chargement rapide et expérience fluide sur tous les appareils.",
+            icon: Rocket
+          },
+          {
+            title: "Notifications Push",
+            description: "Engagement utilisateur amélioré grâce aux notifications push.",
+            icon: Bell
+          }
+        ]}
+        image="/static/images/services/frontend/pwa/frontend-nowifi.webp"
+      />
+
+      {/* Avantages des PWA */}
+      <FeatureSection
+        title="Avantages des PWA"
+        description="Découvrez pourquoi les Progressive Web Apps représentent l'avenir du web mobile."
+        features={[
+          {
+            title: "Multi-plateformes",
+            description: "Une seule application pour tous les appareils et systèmes d'exploitation.",
+            icon: Smartphone
+          },
+          {
+            title: "Toujours à jour",
+            description: "Mises à jour automatiques sans action utilisateur nécessaire.",
+            icon: ArrowDownToLine
+          },
+          {
+            title: "Légèreté",
+            description: "Pas d'installation lourde, accessible instantanément.",
+            icon: Cloud
+          },
+          {
+            title: "Performances natives",
+            description: "Expérience utilisateur proche des applications natives.",
+            icon: Zap
+          }
+        ]}
+        image="/static/images/services/frontend/pwa/frontend-mobile.webp"
+        reversed
+      />
+
+      {/* Témoignages */}
+      <TestimonialsSection
+        title="Ils nous font confiance"
+        description="Découvrez les retours de nos clients sur leurs projets PWA"
+        testimonials={[
+          {
+            content: "Notre PWA nous a permis d'augmenter significativement l'engagement de nos utilisateurs mobiles.",
+            author: {
+              name: "Sophie Martinez",
+              role: "Directrice Digital",
+              company: "WebInnovation",
+              image: "/static/images/testimonials/sophie-martinez.jpg"
+            }
+          },
+          {
+            content: "Une solution idéale qui combine les avantages du web et du mobile natif.",
+            author: {
+              name: "Pierre Dubois",
+              role: "CTO",
+              company: "AppFuture",
+              image: "/static/images/testimonials/pierre-dubois.jpg"
+            }
+          },
+          {
+            content: "Le mode hors ligne a transformé l'expérience de nos utilisateurs en déplacement.",
+            author: {
+              name: "Marie Leroy",
+              role: "Product Manager",
+              company: "MobileFirst",
+              image: "/static/images/testimonials/marie-leroy.jpg"
+            }
+          }
+        ]}
+      />
+
+      {/* FAQ */}
+      <FAQSection
+        title="Questions fréquentes"
+        description="Tout ce que vous devez savoir sur notre service de développement PWA"
+        items={[
+          {
+            question: "Qu'est-ce qu'une Progressive Web App ?",
+            answer: "Une PWA est une application web qui offre une expérience similaire à une application native : elle est installable, fonctionne hors ligne, et peut envoyer des notifications push. Elle combine les avantages du web (accessibilité, mise à jour automatique) et du natif (performance, fonctionnalités avancées)."
+          },
+          {
+            question: "Quels sont les avantages par rapport à une application native ?",
+            answer: "Les PWA offrent plusieurs avantages : pas besoin de passer par les stores, mise à jour automatique, développement plus rapide et moins coûteux, meilleur référencement, et une base de code unique pour toutes les plateformes."
+          },
+          {
+            question: "Comment fonctionne le mode hors ligne ?",
+            answer: "Nous utilisons des Service Workers pour mettre en cache les ressources essentielles et les données. L'application peut ainsi fonctionner même sans connexion internet, avec une synchronisation automatique une fois la connexion rétablie."
+          },
+          {
+            question: "Les PWA sont-elles compatibles avec tous les navigateurs ?",
+            answer: "Les PWA fonctionnent sur la majorité des navigateurs modernes. Pour les navigateurs plus anciens, nous mettons en place des solutions de fallback pour garantir une expérience utilisateur optimale."
+          },
+          {
+            question: "Proposez-vous un support après le lancement ?",
+            answer: "Oui, nous proposons plusieurs formules de maintenance incluant : mises à jour de sécurité, optimisations de performance, ajout de fonctionnalités et support technique."
+          }
+        ]}
+      />
+
+      {/* Services complémentaires */}
+      <FeatureSection
+        title="Services complémentaires"
+        description="Optimisez votre PWA avec nos services additionnels"
+        features={[
+          {
+            title: "Analytics avancés",
+            description: "Suivi détaillé du comportement utilisateur et des performances.",
+            icon: LineChart
+          },
+          {
+            title: "SEO optimisé",
+            description: "Optimisation pour les moteurs de recherche et partage social.",
+            icon: Globe
+          },
+          {
+            title: "Sécurité renforcée",
+            description: "Protection des données et communications sécurisées.",
+            icon: Shield
+          }
+        ]}
+        image="/static/images/services/frontend/pwa/frontend-seo.webp"
+
+      />
+    </ServiceLayout>
+  );
+};
+
+export default PWAServicePage;
\ No newline at end of file
diff --git a/src/app/services/frontend/web/page.tsx b/src/app/services/frontend/web/page.tsx
new file mode 100644
index 000000000..b1e259782
--- /dev/null
+++ b/src/app/services/frontend/web/page.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import FeatureSection from '@/components/marketing/services/feature-section';
+import TestimonialsSection from '@/components/marketing/services/testimonials-section';
+import FAQSection from '@/components/marketing/services/faq-section';
+import { 
+  Rocket, 
+  Code,
+  Monitor,
+  Smartphone,
+  Zap,
+  Layout,
+  Share2,
+  PenTool,
+  Search,
+  Globe,
+  Paintbrush
+} from 'lucide-react';
+
+export const metadata = {
+  title: "Développement Web Frontend | onRuntime Studio",
+  description: "Créez des applications web modernes et performantes. Notre expertise en développement frontend vous garantit une expérience utilisateur exceptionnelle et des performances optimales.",
+};
+
+const WebFrontendServicePage = () => {
+  return (
+    <ServiceLayout
+      title={metadata.title}
+      description={metadata.description}
+      heroTitle="Développement Web Frontend"
+      heroDescription="Créez des applications web modernes, réactives et performantes avec les dernières technologies frontend. Notre expertise vous garantit une expérience utilisateur exceptionnelle."
+      heroImage="/static/images/services/frontend/web/frontend-web.webp"
+    >
+      {/* Caractéristiques principales */}
+      <FeatureSection
+        title="Excellence technique frontend"
+        description="Notre expertise en développement frontend vous garantit des applications web modernes et performantes."
+        features={[
+          {
+            title: "React & Next.js",
+            description: "Développement avec les frameworks modernes pour des applications performantes et évolutives.",
+            icon: Code
+          },
+          {
+            title: "Design Responsive",
+            description: "Interfaces adaptatives pour une expérience optimale sur tous les appareils.",
+            icon: Layout
+          },
+          {
+            title: "Performance Web",
+            description: "Optimisation poussée pour des temps de chargement rapides et une expérience fluide.",
+            icon: Rocket
+          },
+          {
+            title: "UI/UX Moderne",
+            description: "Interfaces utilisateur élégantes et intuitives suivant les dernières tendances.",
+            icon: PenTool
+          }
+        ]}
+        image="/static/images/services/frontend/web/frontend-techniques.webp"
+      />
+
+      {/* Avantages du développement frontend moderne */}
+      <FeatureSection
+        title="Technologies frontend modernes"
+        description="Découvrez les avantages des dernières technologies de développement web."
+        features={[
+          {
+            title: "Applications réactives",
+            description: "Interfaces dynamiques et réactives pour une expérience utilisateur fluide.",
+            icon: Monitor
+          },
+          {
+            title: "Mobile First",
+            description: "Conception pensée d'abord pour mobile puis adaptée aux grands écrans.",
+            icon: Smartphone
+          },
+          {
+            title: "Performance optimale",
+            description: "Optimisation avancée pour des temps de chargement minimaux.",
+            icon: Zap
+          },
+          {
+            title: "SEO optimisé",
+            description: "Structure optimisée pour un excellent référencement naturel.",
+            icon: Search
+          }
+        ]}
+        image="/static/images/services/frontend/web/frontend-technologie.webp"
+        reversed
+      />
+
+      {/* Témoignages */}
+      <TestimonialsSection
+        title="Ils nous font confiance"
+        description="Découvrez les retours de nos clients sur leurs projets web frontend"
+        testimonials={[
+          {
+            content: "L'équipe d'onRuntime a développé une interface moderne et performante qui a transformé l'expérience de nos utilisateurs.",
+            author: {
+              name: "Marion Dubois",
+              role: "Product Owner",
+              company: "Tech Solutions",
+              image: "/static/images/testimonials/marion-dubois.jpg"
+            }
+          },
+          {
+            content: "La refonte de notre application web a considérablement amélioré nos conversions et la satisfaction client.",
+            author: {
+              name: "Lucas Martin",
+              role: "Directeur Marketing",
+              company: "E-Commerce Plus",
+              image: "/static/images/testimonials/lucas-martin.jpg"
+            }
+          },
+          {
+            content: "Un développement frontend de qualité qui allie performance et esthétique.",
+            author: {
+              name: "Julie Lambert",
+              role: "CEO",
+              company: "Digital Agency",
+              image: "/static/images/testimonials/julie-lambert.jpg"
+            }
+          }
+        ]}
+      />
+
+      {/* FAQ */}
+      <FAQSection
+        title="Questions fréquentes"
+        description="Tout ce que vous devez savoir sur notre service de développement frontend"
+        items={[
+          {
+            question: "Quelles technologies utilisez-vous pour le développement frontend ?",
+            answer: "Nous utilisons principalement React avec Next.js, ainsi que TypeScript pour un code plus robuste. Nous intégrons également des outils modernes comme Tailwind CSS pour le styling, et diverses bibliothèques pour les animations et les interactions."
+          },
+          {
+            question: "Comment gérez-vous la performance des applications web ?",
+            answer: "Nous appliquons les meilleures pratiques d'optimisation : code splitting, lazy loading, optimisation des images, mise en cache intelligente, et nous utilisons des outils de mesure de performance pour garantir des temps de chargement optimaux."
+          },
+          {
+            question: "Proposez-vous des solutions pour le SEO ?",
+            answer: "Oui, nous développons des applications avec le SEO en tête : rendu côté serveur (SSR), génération de pages statiques, meta-données dynamiques, structure sémantique et optimisation pour les moteurs de recherche."
+          },
+          {
+            question: "Comment assurez-vous la compatibilité avec différents navigateurs ?",
+            answer: "Nous testons sur les principaux navigateurs et versions, utilisons des outils de transpilation modernes, et mettons en place des fallbacks appropriés pour garantir une expérience cohérente."
+          },
+          {
+            question: "Proposez-vous la maintenance des applications développées ?",
+            answer: "Oui, nous proposons différentes formules de maintenance incluant les mises à jour de sécurité, l'optimisation continue des performances, et l'évolution des fonctionnalités."
+          }
+        ]}
+      />
+
+      {/* Services complémentaires */}
+      <FeatureSection
+        title="Services complémentaires"
+        description="Optimisez votre projet web avec nos services additionnels"
+        features={[
+          {
+            title: "Design UI/UX",
+            description: "Conception d'interfaces utilisateur modernes et ergonomiques.",
+            icon: Paintbrush
+          },
+          {
+            title: "Intégration API",
+            description: "Connection avec vos systèmes et services backend existants.",
+            icon: Share2
+          },
+          {
+            title: "Internationalisation",
+            description: "Adaptation de votre application pour un public international.",
+            icon: Globe
+          }
+        ]}
+        image="/static/images/services/frontend/web/frontend-design.webp"
+      />
+    </ServiceLayout>
+  );
+};
+
+export default WebFrontendServicePage;
\ No newline at end of file
diff --git a/src/app/services/integration/page.tsx b/src/app/services/integration/page.tsx
new file mode 100644
index 000000000..1be9b9a10
--- /dev/null
+++ b/src/app/services/integration/page.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import Services from '@/constants/services';
+import ServiceOverviewPage from '@/components/marketing/services/service-overview';
+import { ServiceCategory } from '@/types/service';
+import type { Metadata } from "next";
+import { Code, Zap, Layout, Sparkles } from 'lucide-react';
+
+export const metadata: Metadata = {
+  title: "Intégration | onRuntime Studio",
+  description: "Transformation de vos maquettes en sites web performants et responsive. Notre expertise en intégration garantit une expérience utilisateur optimale sur tous les appareils.",
+};
+
+const IntegrationServicePage = () => {
+  const integrationService = Services.find(service => service.id === ServiceCategory.INTEGRATION);
+
+  if (!integrationService) {
+    return null;
+  }
+
+  const benefits = [
+    {
+      title: "Code propre et maintenable",
+      description: "Intégration avec des standards de code élevés et une architecture pensée pour la maintenabilité à long terme.",
+      icon: Code
+    },
+    {
+      title: "Performance optimisée",
+      description: "Sites web rapides et fluides grâce à des techniques d'optimisation avancées et au respect des bonnes pratiques.",
+      icon: Zap
+    },
+    {
+      title: "Responsive design",
+      description: "Adaptation parfaite à tous les écrans et appareils pour une expérience utilisateur cohérente.",
+      icon: Layout
+    },
+    {
+      title: "Animations fluides",
+      description: "Intégration d'animations soignées pour enrichir l'expérience utilisateur tout en maintenant les performances.",
+      icon: Sparkles
+    }
+  ];
+
+  const processList = [
+    {
+      title: "Analyse des maquettes",
+      description: "Étude approfondie des maquettes pour identifier les composants, les interactions et les points d'attention techniques.",
+      services: ["Analyse technique", "Architecture"]
+    },
+    {
+      title: "Architecture technique",
+      description: "Définition de l'architecture frontend et choix des technologies adaptées au projet.",
+      services: ["Architecture", "Conseil technique"]
+    },
+    {
+      title: "Développement des composants",
+      description: "Création des composants réutilisables en suivant les principes du design system.",
+      services: ["Développement Frontend", "Intégration"]
+    },
+    {
+      title: "Intégration responsive",
+      description: "Adaptation du design pour tous les formats d'écran avec une attention particulière à l'expérience mobile.",
+      services: ["Intégration", "Responsive Design"]
+    },
+    {
+      title: "Optimisation",
+      description: "Optimisation des performances, de l'accessibilité et du référencement technique.",
+      services: ["Performance", "SEO technique"]
+    },
+    {
+      title: "Tests et validation",
+      description: "Tests approfondis sur différents navigateurs et appareils pour garantir une expérience utilisateur optimale.",
+      services: ["Tests", "Quality Assurance"]
+    }
+  ];
+
+  return (
+    <ServiceOverviewPage
+      service={integrationService}
+      heroImage="/static/images/services/integration/integration-ecommerce.webp"
+      showCaseImage="/static/images/services/integration/integration-team.webp"
+      benefits={benefits}
+      processList={processList}
+    />
+  );
+};
+
+export default IntegrationServicePage;
\ No newline at end of file
diff --git a/src/app/services/integration/prestashop/page.tsx b/src/app/services/integration/prestashop/page.tsx
new file mode 100644
index 000000000..6fe6370ba
--- /dev/null
+++ b/src/app/services/integration/prestashop/page.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import FeatureSection from '@/components/marketing/services/feature-section';
+import TestimonialsSection from '@/components/marketing/services/testimonials-section';
+import FAQSection from '@/components/marketing/services/faq-section';
+import { 
+  Rocket, 
+  Palette,
+  Shield, 
+  Globe,
+  LayoutDashboard,
+  ShoppingBag,
+  Code,
+  Share2,
+  MessageSquare,
+  Truck,
+  BarChart
+} from 'lucide-react';
+
+export const metadata = {
+  title: "Développement PrestaShop | onRuntime Studio",
+  description: "Créez votre boutique en ligne performante avec PrestaShop. Notre expertise vous garantit une solution e-commerce robuste et personnalisée pour développer votre activité.",
+};
+
+const PrestaShopServicePage = () => {
+  return (
+    <ServiceLayout
+      title={metadata.title}
+      description={metadata.description}
+      heroTitle="Développement e-commerce avec PrestaShop"
+      heroDescription="Lancez une boutique en ligne professionnelle avec PrestaShop. Notre expertise vous garantit une solution e-commerce puissante, évolutive et parfaitement adaptée à vos besoins."
+      heroImage="/static/images/services/integration/prestashop-shop.webp"
+    >
+      {/* Caractéristiques principales */}
+      <FeatureSection
+        title="Une solution e-commerce complète"
+        description="PrestaShop offre toutes les fonctionnalités nécessaires pour gérer votre activité en ligne. Notre expertise vous permet d'en exploiter tout le potentiel."
+        features={[
+          {
+            title: "Design personnalisé",
+            description: "Création de thèmes sur mesure qui reflètent votre marque et optimisent la conversion.",
+            icon: Palette
+          },
+          {
+            title: "Gestion avancée",
+            description: "Interface d'administration puissante pour gérer vos produits, commandes et clients.",
+            icon: LayoutDashboard
+          },
+          {
+            title: "Performance optimisée",
+            description: "Optimisation poussée pour des temps de chargement rapides et une expérience fluide.",
+            icon: Rocket
+          },
+          {
+            title: "Sécurité renforcée",
+            description: "Protection avancée de votre boutique et des données de vos clients.",
+            icon: Shield
+          }
+        ]}
+        image="/static/images/services/integration/prestashop-control.webp"
+      />
+
+      {/* Avantages PrestaShop */}
+      <FeatureSection
+        title="Pourquoi choisir PrestaShop ?"
+        description="Découvrez les avantages qui font de PrestaShop une solution e-commerce de référence."
+        features={[
+          {
+            title: "Gestion complète",
+            description: "Contrôle total sur vos produits, stocks, commandes et relations clients.",
+            icon: ShoppingBag
+          },
+          {
+            title: "Multi-boutiques",
+            description: "Gestion de plusieurs boutiques depuis une seule interface d'administration.",
+            icon: Globe
+          },
+          {
+            title: "Logistique intégrée",
+            description: "Gestion avancée des transporteurs et des frais de livraison.",
+            icon: Truck
+          },
+          {
+            title: "Analyses détaillées",
+            description: "Statistiques complètes pour suivre et optimiser vos performances.",
+            icon: BarChart
+          }
+        ]}
+        image="/static/images/services/integration/prestashop-buy.webp"
+        reversed
+      />
+
+      {/* Témoignages */}
+      <TestimonialsSection
+        title="Ils nous font confiance"
+        description="Découvrez les retours de nos clients sur leurs projets PrestaShop"
+        testimonials={[
+          {
+            content: "Notre boutique PrestaShop nous permet de gérer efficacement des milliers de produits et de commandes chaque mois.",
+            author: {
+              name: "Philippe Martin",
+              role: "Directeur E-commerce",
+              company: "Mode Express",
+              image: "/static/images/testimonials/philippe-martin.jpg"
+            }
+          },
+          {
+            content: "La migration vers PrestaShop a boosté nos ventes en ligne grâce à une meilleure expérience client.",
+            author: {
+              name: "Marie Durand",
+              role: "Gérante",
+              company: "Boutique Tendance",
+              image: "/static/images/testimonials/marie-durand.jpg"
+            }
+          },
+          {
+            content: "L'équipe d'onRuntime a créé une boutique sur mesure qui répond parfaitement à nos besoins spécifiques.",
+            author: {
+              name: "Laurent Bernard",
+              role: "Fondateur",
+              company: "Tech Store",
+              image: "/static/images/testimonials/laurent-bernard.jpg"
+            }
+          }
+        ]}
+      />
+
+      {/* FAQ */}
+      <FAQSection
+        title="Questions fréquentes"
+        description="Tout ce que vous devez savoir sur notre service de développement PrestaShop"
+        items={[
+          {
+            question: "Combien de temps faut-il pour créer une boutique PrestaShop ?",
+            answer: "Le délai moyen pour créer une boutique PrestaShop varie de 6 à 12 semaines, selon la complexité du projet. Ce délai comprend la personnalisation du thème, le développement des fonctionnalités sur mesure, l'intégration des produits et les tests."
+          },
+          {
+            question: "Pouvez-vous migrer ma boutique existante vers PrestaShop ?",
+            answer: "Oui, nous proposons un service complet de migration vers PrestaShop, incluant le transfert des produits, clients, commandes et historiques, tout en préservant votre référencement."
+          },
+          {
+            question: "PrestaShop est-il adapté aux grands catalogues de produits ?",
+            answer: "Absolument ! PrestaShop est conçu pour gérer efficacement des catalogues de plusieurs milliers de produits avec des variations, tout en maintenant d'excellentes performances."
+          },
+          {
+            question: "Proposez-vous des développements sur mesure ?",
+            answer: "Oui, nous développons des modules et fonctionnalités sur mesure pour adapter PrestaShop à vos besoins spécifiques : intégrations ERP, processus métier personnalisés, etc."
+          },
+          {
+            question: "Comment gérez-vous la maintenance et les mises à jour ?",
+            answer: "Nous proposons différentes formules de maintenance incluant les mises à jour de sécurité, les sauvegardes, l'optimisation des performances et le support technique."
+          }
+        ]}
+      />
+
+      {/* Services complémentaires */}
+      <FeatureSection
+        title="Services complémentaires"
+        description="Optimisez votre boutique PrestaShop avec nos services additionnels"
+        features={[
+          {
+            title: "Modules sur mesure",
+            description: "Développement de fonctionnalités spécifiques pour votre activité.",
+            icon: Code
+          },
+          {
+            title: "Marketing digital",
+            description: "Stratégies marketing pour augmenter votre visibilité et vos ventes.",
+            icon: Share2
+          },
+          {
+            title: "Formation PrestaShop",
+            description: "Formation personnalisée pour maîtriser la gestion de votre boutique.",
+            icon: MessageSquare
+          }
+        ]}
+        image="/static/images/services/integration/prestashop-complementaire.webp"
+      />
+    </ServiceLayout>
+  );
+};
+
+export default PrestaShopServicePage;
\ No newline at end of file
diff --git a/src/app/services/integration/shopify/page.tsx b/src/app/services/integration/shopify/page.tsx
new file mode 100644
index 000000000..577e8c318
--- /dev/null
+++ b/src/app/services/integration/shopify/page.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import FeatureSection from '@/components/marketing/services/feature-section';
+import TestimonialsSection from '@/components/marketing/services/testimonials-section';
+import FAQSection from '@/components/marketing/services/faq-section';
+import { 
+  Rocket, 
+  Palette, 
+  Settings, 
+  Shield, 
+  Globe,
+  CreditCard,
+  BarChart,
+  Truck,
+  Search,
+  Share2,
+  MessageSquare 
+} from 'lucide-react';
+
+export const metadata = {
+  title: "Développement Shopify | onRuntime Studio",
+  description: "Créez votre boutique en ligne performante avec notre expertise Shopify. De la personnalisation à l'optimisation, nous vous accompagnons dans votre succès e-commerce.",
+};
+
+const ShopifyServicePage = () => {
+  return (
+    <ServiceLayout
+      title={metadata.title}
+      description={metadata.description}
+      heroTitle="Créez votre boutique en ligne avec Shopify"
+      heroDescription="Transformez votre vision e-commerce en réalité avec notre expertise Shopify. Nous créons des boutiques en ligne performantes, esthétiques et optimisées pour la conversion."
+      heroImage="/static/images/services/shopify-hero.jpg"
+    >
+      {/* Caractéristiques principales */}
+      <FeatureSection
+        title="Une solution e-commerce complète"
+        description="Shopify offre tous les outils nécessaires pour gérer votre boutique en ligne efficacement. Notre expertise vous permet d'en tirer le meilleur parti."
+        features={[
+          {
+            title: "Design personnalisé",
+            description: "Création d'un thème unique qui reflète votre marque et optimise l'expérience utilisateur.",
+            icon: Palette
+          },
+          {
+            title: "Optimisation des conversions",
+            description: "Mise en place des meilleures pratiques pour maximiser vos ventes et fidéliser vos clients.",
+            icon: Rocket
+          },
+          {
+            title: "Sécurité renforcée",
+            description: "Protection de vos données et de celles de vos clients avec les dernières normes de sécurité.",
+            icon: Shield
+          },
+          {
+            title: "Intégrations avancées",
+            description: "Connection avec vos outils préférés pour la gestion des stocks, la comptabilité et le marketing.",
+            icon: Settings
+          }
+        ]}
+        image="/static/images/services/integration/shopify-mobile.webp"
+      />
+
+      {/* Avantages Shopify */}
+      <FeatureSection
+        title="Pourquoi choisir Shopify ?"
+        description="Découvrez les avantages qui font de Shopify la plateforme e-commerce préférée des entrepreneurs."
+        features={[
+          {
+            title: "Paiements sécurisés",
+            description: "Intégration des principaux moyens de paiement et gestion sécurisée des transactions.",
+            icon: CreditCard
+          },
+          {
+            title: "International par défaut",
+            description: "Vente dans le monde entier avec gestion multi-devises et traductions automatiques.",
+            icon: Globe
+          },
+          {
+            title: "Analytics puissant",
+            description: "Suivi détaillé de vos performances et insights pour optimiser vos ventes.",
+            icon: BarChart
+          },
+          {
+            title: "Logistique simplifiée",
+            description: "Gestion efficace des commandes et intégration avec les principaux transporteurs.",
+            icon: Truck
+          }
+        ]}
+        image="/static/images/services/integration/shopify-buy.webp"
+        reversed
+      />
+
+      {/* Témoignages */}
+      <TestimonialsSection
+        title="Ils nous font confiance"
+        description="Découvrez les retours de nos clients sur leurs projets Shopify"
+        testimonials={[
+          {
+            content: "L'équipe d'onRuntime a transformé notre vision en une boutique en ligne performante qui dépasse nos attentes.",
+            author: {
+              name: "Sophie Martin",
+              role: "Fondatrice",
+              company: "Maison Élégance",
+              image: "/static/images/testimonials/sophie-martin.jpg"
+            }
+          },
+          {
+            content: "Un véritable partenariat qui nous a permis de multiplier nos ventes en ligne par 3 en seulement 6 mois.",
+            author: {
+              name: "Thomas Dubois",
+              role: "Directeur E-commerce",
+              company: "SportStyle",
+              image: "/static/images/testimonials/thomas-dubois.jpg"
+            }
+          },
+          {
+            content: "Leur expertise Shopify nous a permis de créer une expérience client unique et mémorable.",
+            author: {
+              name: "Marie Lambert",
+              role: "CEO",
+              company: "Bio & Co",
+              image: "/static/images/testimonials/marie-lambert.jpg"
+            }
+          }
+        ]}
+      />
+
+      {/* FAQ */}
+      <FAQSection
+        title="Questions fréquentes"
+        description="Tout ce que vous devez savoir sur notre service de développement Shopify"
+        items={[
+          {
+            question: "Combien de temps faut-il pour créer une boutique Shopify ?",
+            answer: "Le délai moyen pour créer une boutique Shopify varie de 4 à 8 semaines, selon la complexité du projet. Ce délai comprend la phase de design, le développement, l'intégration des produits et les tests."
+          },
+          {
+            question: "Pouvez-vous migrer ma boutique existante vers Shopify ?",
+            answer: "Oui, nous proposons un service complet de migration de votre boutique existante vers Shopify, incluant le transfert des produits, des clients et des commandes, tout en assurant une transition en douceur."
+          },
+          {
+            question: "Quels types de personnalisation proposez-vous ?",
+            answer: "Nous offrons une personnalisation complète de votre boutique Shopify : design sur mesure, fonctionnalités personnalisées, intégrations spécifiques, et optimisation pour mobile."
+          },
+          {
+            question: "Proposez-vous un support après le lancement ?",
+            answer: "Oui, nous proposons plusieurs formules de support et maintenance pour assurer le bon fonctionnement de votre boutique après son lancement, incluant les mises à jour, les optimisations et le support technique."
+          },
+          {
+            question: "Comment assurez-vous la sécurité de ma boutique ?",
+            answer: "Nous mettons en place les meilleures pratiques de sécurité : SSL, conformité PCI DSS, sauvegardes régulières, et protection contre les fraudes. Shopify assure également une sécurité de niveau bancaire pour toutes les transactions."
+          }
+        ]}
+      />
+
+      {/* Services complémentaires */}
+      <FeatureSection
+        title="Services complémentaires"
+        description="Optimisez votre présence en ligne avec nos services additionnels"
+        features={[
+          {
+            title: "Référencement SEO",
+            description: "Optimisation pour les moteurs de recherche pour augmenter votre visibilité.",
+            icon: Search
+          },
+          {
+            title: "Marketing digital",
+            description: "Stratégies marketing adaptées pour attirer et convertir plus de clients.",
+            icon: Share2
+          },
+          {
+            title: "Formation",
+            description: "Formation complète pour gérer votre boutique en toute autonomie.",
+            icon: MessageSquare
+          }
+        ]}
+            image="/static/images/services/integration/shopify-complementaire.webp"
+      />
+    </ServiceLayout>
+  );
+};
+
+export default ShopifyServicePage;
\ No newline at end of file
diff --git a/src/app/services/integration/squarespace/page.tsx b/src/app/services/integration/squarespace/page.tsx
new file mode 100644
index 000000000..23ceaab90
--- /dev/null
+++ b/src/app/services/integration/squarespace/page.tsx
@@ -0,0 +1,182 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import FeatureSection from '@/components/marketing/services/feature-section';
+import TestimonialsSection from '@/components/marketing/services/testimonials-section';
+import FAQSection from '@/components/marketing/services/faq-section';
+import { 
+  Rocket, 
+  Palette,
+  LayoutDashboard,
+  Image as ImageIcon,
+  Code,
+  Share2,
+  MessageSquare,
+  Zap,
+  ShoppingBag,
+  Shapes
+} from 'lucide-react';
+
+export const metadata = {
+  title: "Développement Squarespace | onRuntime Studio",
+  description: "Créez un site web élégant et fonctionnel avec Squarespace. Notre expertise vous permet de tirer le meilleur parti de cette plateforme intuitive et design.",
+};
+
+const SquarespaceServicePage = () => {
+  return (
+    <ServiceLayout
+      title={metadata.title}
+      description={metadata.description}
+      heroTitle="Sites web élégants avec Squarespace"
+      heroDescription="Créez une présence en ligne raffinée avec Squarespace. Notre expertise vous garantit un site web esthétique, fonctionnel et parfaitement adapté à votre image de marque."
+      heroImage="/static/images/services/integration/squarespace.jpg"
+    >
+      {/* Caractéristiques principales */}
+      <FeatureSection
+        title="L'élégance alliée à la simplicité"
+        description="Squarespace combine design épuré et facilité d'utilisation. Notre expertise vous permet d'exploiter pleinement son potentiel."
+        features={[
+          {
+            title: "Design minimaliste",
+            description: "Création de sites élégants et épurés qui mettent en valeur votre contenu et votre marque.",
+            icon: Palette
+          },
+          {
+            title: "Expérience fluide",
+            description: "Navigation intuitive et performances optimisées pour une expérience utilisateur sans faille.",
+            icon: Rocket
+          },
+          {
+            title: "Gestion de contenu",
+            description: "Interface d'administration simple et intuitive pour gérer votre contenu facilement.",
+            icon: LayoutDashboard
+          },
+          {
+            title: "Intégration média",
+            description: "Mise en valeur optimale de vos images et médias avec des galeries dynamiques.",
+            icon: ImageIcon
+          }
+        ]}
+        image="/static/images/services/integration/squarespace-design.webp"
+      />
+
+      {/* Avantages Squarespace */}
+      <FeatureSection
+        title="Pourquoi choisir Squarespace ?"
+        description="Découvrez les avantages qui font de Squarespace la plateforme idéale pour votre présence en ligne."
+        features={[
+          {
+            title: "Templates professionnels",
+            description: "Large choix de templates modernes et personnalisables pour tous les secteurs.",
+            icon: Shapes
+          },
+          {
+            title: "E-commerce intégré",
+            description: "Solutions de vente en ligne complètes et personnalisables.",
+            icon: ShoppingBag
+          },
+          {
+            title: "Performance optimale",
+            description: "Sites rapides et sécurisés hébergés sur une infrastructure robuste.",
+            icon: Zap
+          },
+          {
+            title: "Marketing intégré",
+            description: "Outils marketing et analyses statistiques pour développer votre activité.",
+            icon: Share2
+          }
+        ]}
+        image="/static/images/services/integration/squarespace-marketing.webp"
+        reversed
+      />
+
+      {/* Témoignages */}
+      <TestimonialsSection
+        title="Ils nous font confiance"
+        description="Découvrez les retours de nos clients sur leurs projets Squarespace"
+        testimonials={[
+          {
+            content: "Notre site Squarespace présente parfaitement notre portfolio avec un design épuré et professionnel.",
+            author: {
+              name: "Claire Dubois",
+              role: "Photographe",
+              company: "Studio Lumière",
+              image: "/static/images/testimonials/claire-dubois.jpg"
+            }
+          },
+          {
+            content: "La simplicité de gestion nous permet de nous concentrer sur notre activité tout en ayant un site magnifique.",
+            author: {
+              name: "Antoine Martin",
+              role: "Fondateur",
+              company: "Concept Store",
+              image: "/static/images/testimonials/antoine-martin.jpg"
+            }
+          },
+          {
+            content: "L'équipe d'onRuntime a su personnaliser Squarespace pour créer un site unique qui nous ressemble.",
+            author: {
+              name: "Sophie Lambert",
+              role: "Directrice Artistique",
+              company: "Design & Co",
+              image: "/static/images/testimonials/sophie-lambert.jpg"
+            }
+          }
+        ]}
+      />
+
+      {/* FAQ */}
+      <FAQSection
+        title="Questions fréquentes"
+        description="Tout ce que vous devez savoir sur notre service de développement Squarespace"
+        items={[
+          {
+            question: "Combien de temps faut-il pour créer un site Squarespace ?",
+            answer: "Le délai moyen pour créer un site Squarespace varie de 2 à 6 semaines, selon la complexité du projet. Ce délai comprend la sélection et personnalisation du template, l'intégration du contenu et les tests."
+          },
+          {
+            question: "Puis-je vendre des produits sur mon site Squarespace ?",
+            answer: "Oui, Squarespace propose une solution e-commerce complète que nous pouvons configurer pour vous permettre de vendre vos produits en ligne, avec gestion des stocks, paiements sécurisés et options d'expédition."
+          },
+          {
+            question: "Est-il facile de mettre à jour le contenu ?",
+            answer: "Absolument ! L'interface de Squarespace est très intuitive. Nous vous formons à son utilisation pour que vous puissiez gérer votre contenu en toute autonomie."
+          },
+          {
+            question: "Mon site sera-t-il optimisé pour le référencement ?",
+            answer: "Oui, nous mettons en place les meilleures pratiques SEO de Squarespace et configurons tous les éléments nécessaires pour optimiser votre visibilité sur les moteurs de recherche."
+          },
+          {
+            question: "Proposez-vous un service de maintenance ?",
+            answer: "Oui, nous proposons différentes formules de maintenance incluant les mises à jour, le support technique et l'optimisation continue de votre site Squarespace."
+          }
+        ]}
+      />
+
+      {/* Services complémentaires */}
+      <FeatureSection
+        title="Services complémentaires"
+        description="Optimisez votre présence en ligne avec nos services additionnels"
+        features={[
+          {
+            title: "Personnalisation avancée",
+            description: "Modifications CSS et Javascript pour personnaliser votre site au-delà des options standard.",
+            icon: Code
+          },
+          {
+            title: "Stratégie de contenu",
+            description: "Accompagnement dans la création et l'optimisation de votre contenu.",
+            icon: Share2
+          },
+          {
+            title: "Formation utilisateur",
+            description: "Formation complète pour maîtriser la gestion de votre site Squarespace.",
+            icon: MessageSquare
+          }
+        ]}
+        image="/static/images/services/integration/squarespace-complementaire.webp"
+      />
+    </ServiceLayout>
+  );
+};
+
+export default SquarespaceServicePage;
\ No newline at end of file
diff --git a/src/app/services/integration/strapi/page.tsx b/src/app/services/integration/strapi/page.tsx
new file mode 100644
index 000000000..164a39351
--- /dev/null
+++ b/src/app/services/integration/strapi/page.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import FeatureSection from '@/components/marketing/services/feature-section';
+import TestimonialsSection from '@/components/marketing/services/testimonials-section';
+import FAQSection from '@/components/marketing/services/faq-section';
+import { 
+  Rocket, 
+  Code, 
+  Shield, 
+  LayoutDashboard,
+  Database,
+  Share2,
+  MessageSquare,
+  Users,
+  Workflow,
+  Box,
+  Network
+} from 'lucide-react';
+
+export const metadata = {
+  title: "Développement Strapi | onRuntime Studio",
+  description: "Créez des applications performantes avec Strapi, le CMS headless leader. Notre expertise vous garantit une solution évolutive et personnalisée pour gérer votre contenu.",
+};
+
+const StrapiServicePage = () => {
+  return (
+    <ServiceLayout
+      title={metadata.title}
+      description={metadata.description}
+      heroTitle="Développement CMS headless avec Strapi"
+      heroDescription="Développez des applications modernes avec Strapi. Notre expertise vous garantit une solution de gestion de contenu flexible, évolutive et parfaitement adaptée à vos besoins."
+      heroImage="/static/images/services/integration/strapi.jpg"
+    >
+      {/* Caractéristiques principales */}
+      <FeatureSection
+        title="Un CMS headless puissant"
+        description="Strapi offre une flexibilité totale pour gérer et distribuer votre contenu. Notre expertise vous permet d'en exploiter tout le potentiel."
+        features={[
+          {
+            title: "API sur mesure",
+            description: "Création d'APIs RESTful et GraphQL personnalisées pour tous vos besoins.",
+            icon: Network
+          },
+          {
+            title: "Administration flexible",
+            description: "Interface d'administration personnalisable selon vos processus métier.",
+            icon: LayoutDashboard
+          },
+          {
+            title: "Performance optimale",
+            description: "Architecture performante pour des temps de réponse rapides.",
+            icon: Rocket
+          },
+          {
+            title: "Sécurité avancée",
+            description: "Protection robuste de vos données et de vos APIs.",
+            icon: Shield
+          }
+        ]}
+        image="/static/images/services/integration/strapi-security.webp"
+      />
+
+      {/* Avantages Strapi */}
+      <FeatureSection
+        title="Pourquoi choisir Strapi ?"
+        description="Découvrez les avantages qui font de Strapi le CMS headless de référence."
+        features={[
+          {
+            title: "100% JavaScript",
+            description: "Développement unifié en JavaScript/Node.js pour plus d'efficacité.",
+            icon: Code
+          },
+          {
+            title: "Modèles flexibles",
+            description: "Création de modèles de contenu personnalisés sans contraintes.",
+            icon: Database
+          },
+          {
+            title: "Gestion des rôles",
+            description: "Contrôle précis des accès et des permissions utilisateurs.",
+            icon: Users
+          },
+          {
+            title: "Workflows avancés",
+            description: "Automatisation des processus de publication et de validation.",
+            icon: Workflow
+          }
+        ]}
+        image="/static/images/services/integration/strapi-cms.webp"
+        reversed
+      />
+
+      {/* Témoignages */}
+      <TestimonialsSection
+        title="Ils nous font confiance"
+        description="Découvrez les retours de nos clients sur leurs projets Strapi"
+        testimonials={[
+          {
+            content: "Strapi nous permet de gérer efficacement le contenu de notre application mobile et de notre site web depuis une seule interface.",
+            author: {
+              name: "Alexandre Dupont",
+              role: "CTO",
+              company: "Digital Solutions",
+              image: "/static/images/testimonials/alexandre-dupont.jpg"
+            }
+          },
+          {
+            content: "La flexibilité de Strapi nous a permis de créer une architecture de contenu parfaitement adaptée à nos besoins.",
+            author: {
+              name: "Sophie Bernard",
+              role: "Chef de Projet Digital",
+              company: "Media Group",
+              image: "/static/images/testimonials/sophie-bernard.jpg"
+            }
+          },
+          {
+            content: "L'équipe d'onRuntime a développé des plugins Strapi sur mesure qui ont grandement amélioré notre productivité.",
+            author: {
+              name: "Thomas Martin",
+              role: "Responsable Technique",
+              company: "Tech Innovation",
+              image: "/static/images/testimonials/thomas-martin.jpg"
+            }
+          }
+        ]}
+      />
+
+      {/* FAQ */}
+      <FAQSection
+        title="Questions fréquentes"
+        description="Tout ce que vous devez savoir sur notre service de développement Strapi"
+        items={[
+          {
+            question: "Combien de temps faut-il pour mettre en place un projet Strapi ?",
+            answer: "Le délai moyen pour mettre en place un projet Strapi varie de 4 à 12 semaines, selon la complexité. Ce délai comprend la conception des modèles de contenu, le développement des APIs, la personnalisation de l'administration et les tests."
+          },
+          {
+            question: "Strapi peut-il gérer des contenus multilingues ?",
+            answer: "Oui, Strapi gère nativement le contenu multilingue. Nous pouvons configurer et personnaliser la gestion des traductions selon vos besoins spécifiques."
+          },
+          {
+            question: "Est-il possible de migrer notre contenu existant vers Strapi ?",
+            answer: "Oui, nous proposons un service complet de migration de contenu vers Strapi, incluant l'analyse de vos données existantes, la création de modèles adaptés et l'import de vos contenus."
+          },
+          {
+            question: "Comment gérez-vous le déploiement et l'hébergement ?",
+            answer: "Nous pouvons déployer Strapi sur différentes plateformes cloud (AWS, Google Cloud, DigitalOcean...) et mettre en place une infrastructure scalable avec des environnements de développement, staging et production."
+          },
+          {
+            question: "Proposez-vous des développements de plugins personnalisés ?",
+            answer: "Oui, nous développons des plugins Strapi sur mesure pour étendre les fonctionnalités selon vos besoins : intégrations spécifiques, workflows personnalisés, interfaces d'administration dédiées, etc."
+          }
+        ]}
+      />
+
+      {/* Services complémentaires */}
+      <FeatureSection
+        title="Services complémentaires"
+        description="Optimisez votre projet Strapi avec nos services additionnels"
+        features={[
+          {
+            title: "Développement frontend",
+            description: "Création d'applications frontend connectées à votre API Strapi.",
+            icon: Box
+          },
+          {
+            title: "Intégrations",
+            description: "Connection avec vos outils et services tiers existants.",
+            icon: Share2
+          },
+          {
+            title: "Formation Strapi",
+            description: "Formation personnalisée pour maîtriser la gestion de votre CMS.",
+            icon: MessageSquare
+          }
+        ]}
+        image="/static/images/services/integration/strapi-complementaire.webp"
+      />
+    </ServiceLayout>
+  );
+};
+
+export default StrapiServicePage;
\ No newline at end of file
diff --git a/src/app/services/integration/webflow/page.tsx b/src/app/services/integration/webflow/page.tsx
new file mode 100644
index 000000000..3e1023717
--- /dev/null
+++ b/src/app/services/integration/webflow/page.tsx
@@ -0,0 +1,184 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import FeatureSection from '@/components/marketing/services/feature-section';
+import TestimonialsSection from '@/components/marketing/services/testimonials-section';
+import FAQSection from '@/components/marketing/services/faq-section';
+import { 
+  Rocket, 
+  Palette, 
+  Settings,
+  LayoutDashboard,
+  Search,
+  Code,
+  Share2,
+  MessageSquare,
+  Zap,
+  MousePointer,
+  Laptop
+} from 'lucide-react';
+
+export const metadata = {
+  title: "Développement Webflow | onRuntime Studio",
+  description: "Créez un site web moderne et dynamique avec Webflow. De la conception visuelle à l'interaction utilisateur, nous donnons vie à votre vision avec une approche no-code professionnelle.",
+};
+
+const WebflowServicePage = () => {
+  return (
+    <ServiceLayout
+      title={metadata.title}
+      description={metadata.description}
+      heroTitle="Développement Webflow professionnel"
+      heroDescription="Donnez vie à votre vision avec Webflow. Notre expertise vous garantit un site web moderne, interactif et parfaitement adapté à vos besoins, sans compromis sur la qualité."
+      heroImage="/static/images/services/integration/webflow.jpg"
+    >
+      {/* Caractéristiques principales */}
+      <FeatureSection
+        title="Design et développement sans compromis"
+        description="Webflow révolutionne la création web en combinant design visuel et contrôle total. Notre expertise vous permet d'en exploiter tout le potentiel."
+        features={[
+          {
+            title: "Design visuel avancé",
+            description: "Création d'interfaces uniques et animations sophistiquées sans les limitations du codage traditionnel.",
+            icon: Palette
+          },
+          {
+            title: "Performance optimale",
+            description: "Sites rapides et réactifs optimisés pour tous les appareils et navigateurs.",
+            icon: Rocket
+          },
+          {
+            title: "Interactions riches",
+            description: "Animations et interactions utilisateur fluides pour une expérience web moderne et engageante.",
+            icon: MousePointer
+          },
+          {
+            title: "CMS intégré",
+            description: "Système de gestion de contenu puissant et flexible pour une mise à jour facile.",
+            icon: Settings
+          }
+        ]}
+        image="/static/images/services/integration/webflow-nocode.webp"
+      />
+
+      {/* Avantages Webflow */}
+      <FeatureSection
+        title="Pourquoi choisir Webflow ?"
+        description="Découvrez les avantages qui font de Webflow la plateforme idéale pour votre présence web moderne."
+        features={[
+          {
+            title: "Développement visuel",
+            description: "Création de sites complexes sans écrire de code, tout en gardant un contrôle total sur le design.",
+            icon: LayoutDashboard
+          },
+          {
+            title: "SEO natif",
+            description: "Outils de référencement intégrés et structure optimisée pour les moteurs de recherche.",
+            icon: Search
+          },
+          {
+            title: "Responsive par défaut",
+            description: "Design parfaitement adapté à tous les écrans, des mobiles aux grands écrans.",
+            icon: Laptop
+          },
+          {
+            title: "Hébergement optimisé",
+            description: "Infrastructure cloud robuste avec CDN global pour des performances optimales.",
+            icon: Zap
+          }
+        ]}
+        image="/static/images/services/integration/webflow-responsive.webp"
+        reversed
+      />
+
+      {/* Témoignages */}
+      <TestimonialsSection
+        title="Ils nous font confiance"
+        description="Découvrez les retours de nos clients sur leurs projets Webflow"
+        testimonials={[
+          {
+            content: "Notre site Webflow nous a permis de nous démarquer avec un design unique et des animations impressionnantes.",
+            author: {
+              name: "Sarah Dubois",
+              role: "Directrice Artistique",
+              company: "Studio Créatif",
+              image: "/static/images/testimonials/sarah-dubois.jpg"
+            }
+          },
+          {
+            content: "La flexibilité de Webflow nous permet de mettre à jour notre site facilement tout en gardant un design professionnel.",
+            author: {
+              name: "Marc Laurent",
+              role: "CEO",
+              company: "Tech Innovate",
+              image: "/static/images/testimonials/marc-laurent.jpg"
+            }
+          },
+          {
+            content: "L'équipe d'onRuntime a créé une expérience web unique qui représente parfaitement notre marque.",
+            author: {
+              name: "Julie Martin",
+              role: "Responsable Marketing",
+              company: "Design Lab",
+              image: "/static/images/testimonials/julie-martin.jpg"
+            }
+          }
+        ]}
+      />
+
+      {/* FAQ */}
+      <FAQSection
+        title="Questions fréquentes"
+        description="Tout ce que vous devez savoir sur notre service de développement Webflow"
+        items={[
+          {
+            question: "Combien de temps faut-il pour créer un site Webflow ?",
+            answer: "Le délai moyen pour créer un site Webflow varie de 3 à 8 semaines, selon la complexité du projet. Ce délai comprend la conception, le développement des interactions, l'intégration du contenu et les tests."
+          },
+          {
+            question: "Puis-je facilement mettre à jour mon site moi-même ?",
+            answer: "Absolument ! Webflow dispose d'un CMS intuitif que nous personnalisons selon vos besoins. Nous vous formons à son utilisation pour que vous puissiez gérer votre contenu en toute autonomie."
+          },
+          {
+            question: "Webflow est-il adapté aux sites e-commerce ?",
+            answer: "Oui, Webflow propose une solution e-commerce robuste que nous pouvons personnaliser pour créer votre boutique en ligne avec des fonctionnalités avancées et un design sur mesure."
+          },
+          {
+            question: "Comment gérez-vous les animations et interactions ?",
+            answer: "Webflow permet de créer des animations et interactions sophistiquées sans code. Nous concevons des expériences interactives fluides et professionnelles tout en maintenant des performances optimales."
+          },
+          {
+            question: "Quelle est la qualité du référencement avec Webflow ?",
+            answer: "Webflow génère un code propre et optimisé pour le SEO. Nous mettons en place les meilleures pratiques de référencement pour maximiser votre visibilité sur les moteurs de recherche."
+          }
+        ]}
+      />
+
+      {/* Services complémentaires */}
+      <FeatureSection
+        title="Services complémentaires"
+        description="Optimisez votre présence en ligne avec nos services additionnels"
+        features={[
+          {
+            title: "Intégrations personnalisées",
+            description: "Connection avec vos outils et services tiers préférés.",
+            icon: Code
+          },
+          {
+            title: "Stratégie digitale",
+            description: "Accompagnement dans votre stratégie de présence en ligne.",
+            icon: Share2
+          },
+          {
+            title: "Formation Webflow",
+            description: "Formation sur mesure pour maîtriser la gestion de votre site.",
+            icon: MessageSquare
+          }
+        ]}
+            image="/static/images/services/integration/webflow-complementaire.webp"
+
+      />
+    </ServiceLayout>
+  );
+};
+
+export default WebflowServicePage;
\ No newline at end of file
diff --git a/src/app/services/integration/wordpress/page.tsx b/src/app/services/integration/wordpress/page.tsx
new file mode 100644
index 000000000..3941d4bc3
--- /dev/null
+++ b/src/app/services/integration/wordpress/page.tsx
@@ -0,0 +1,184 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import FeatureSection from '@/components/marketing/services/feature-section';
+import TestimonialsSection from '@/components/marketing/services/testimonials-section';
+import FAQSection from '@/components/marketing/services/faq-section';
+import { 
+  Rocket, 
+  Palette, 
+  Settings, 
+  Shield,
+  LayoutDashboard,
+  Search,
+  Blocks,
+  Code,
+  Share2,
+  MessageSquare,
+  Zap
+} from 'lucide-react';
+
+export const metadata = {
+  title: "Développement WordPress | onRuntime Studio",
+  description: "Créez un site web professionnel avec WordPress. De la conception sur mesure à l'optimisation des performances, nous vous accompagnons dans la réalisation de votre projet web.",
+};
+
+const WordPressServicePage = () => {
+  return (
+    <ServiceLayout
+      title={metadata.title}
+      description={metadata.description}
+      heroTitle="Développement WordPress sur mesure"
+      heroDescription="Créez un site web professionnel qui vous ressemble avec WordPress. Notre expertise vous garantit un site performant, sécurisé et parfaitement adapté à vos besoins."
+      heroImage="/static/images/services/integration/wordpress.jpg"
+    >
+      {/* Caractéristiques principales */}
+      <FeatureSection
+        title="Une solution web complète"
+        description="WordPress est la plateforme de gestion de contenu la plus populaire au monde. Notre expertise vous permet d'en exploiter tout le potentiel."
+        features={[
+          {
+            title: "Thèmes sur mesure",
+            description: "Création de thèmes personnalisés qui reflètent votre identité et répondent précisément à vos besoins.",
+            icon: Palette
+          },
+          {
+            title: "Performance optimisée",
+            description: "Optimisation poussée pour garantir des temps de chargement rapides et une expérience utilisateur fluide.",
+            icon: Rocket
+          },
+          {
+            title: "Sécurité renforcée",
+            description: "Mise en place des meilleures pratiques de sécurité pour protéger votre site et vos données.",
+            icon: Shield
+          },
+          {
+            title: "Administration simplifiée",
+            description: "Interface d'administration personnalisée et intuitive pour une gestion facile de votre contenu.",
+            icon: Settings
+          }
+        ]}
+        image="/static/images/services/integration/wordpress-solution.webp"
+      />
+
+      {/* Avantages WordPress */}
+      <FeatureSection
+        title="Pourquoi choisir WordPress ?"
+        description="Découvrez les avantages qui font de WordPress la plateforme de choix pour votre présence en ligne."
+        features={[
+          {
+            title: "Administration intuitive",
+            description: "Interface de gestion simple et intuitive pour gérer votre contenu en toute autonomie.",
+            icon: LayoutDashboard
+          },
+          {
+            title: "SEO optimisé",
+            description: "Structure optimisée pour le référencement naturel et outils SEO intégrés.",
+            icon: Search
+          },
+          {
+            title: "Extensions puissantes",
+            description: "Accès à des milliers de plugins pour étendre les fonctionnalités de votre site.",
+            icon: Blocks
+          },
+          {
+            title: "Performance maximale",
+            description: "Optimisation avancée des performances pour une expérience utilisateur optimale.",
+            icon: Zap
+          }
+        ]}
+        image="/static/images/services/integration/wordpress-seo.webp"
+        reversed
+      />
+
+      {/* Témoignages */}
+      <TestimonialsSection
+        title="Ils nous font confiance"
+        description="Découvrez les retours de nos clients sur leurs projets WordPress"
+        testimonials={[
+          {
+            content: "L'équipe d'onRuntime a créé un site qui dépasse toutes nos attentes, avec une administration vraiment intuitive.",
+            author: {
+              name: "Pierre Durand",
+              role: "Directeur",
+              company: "Agence Créative",
+              image: "/static/images/testimonials/pierre-durand.jpg"
+            }
+          },
+          {
+            content: "Notre nouveau site WordPress nous a permis d'augmenter significativement notre visibilité en ligne.",
+            author: {
+              name: "Marie Robert",
+              role: "Responsable Marketing",
+              company: "Design Studio",
+              image: "/static/images/testimonials/marie-robert.jpg"
+            }
+          },
+          {
+            content: "Un accompagnement professionnel et des résultats qui parlent d'eux-mêmes.",
+            author: {
+              name: "Lucas Martin",
+              role: "Fondateur",
+              company: "Digital Solutions",
+              image: "/static/images/testimonials/lucas-martin.jpg"
+            }
+          }
+        ]}
+      />
+
+      {/* FAQ */}
+      <FAQSection
+        title="Questions fréquentes"
+        description="Tout ce que vous devez savoir sur notre service de développement WordPress"
+        items={[
+          {
+            question: "Combien de temps faut-il pour créer un site WordPress ?",
+            answer: "Le délai moyen pour créer un site WordPress varie de 4 à 12 semaines, selon la complexité du projet. Ce délai comprend la phase de design, le développement du thème sur mesure, l'intégration du contenu et les tests."
+          },
+          {
+            question: "Pouvez-vous migrer mon site existant vers WordPress ?",
+            answer: "Oui, nous proposons un service complet de migration vers WordPress, incluant le transfert du contenu, des images et des fonctionnalités, tout en préservant votre référencement."
+          },
+          {
+            question: "Comment gérez-vous la maintenance et les mises à jour ?",
+            answer: "Nous proposons différentes formules de maintenance incluant les mises à jour de sécurité, les sauvegardes régulières, les mises à jour de WordPress et des plugins, ainsi que le monitoring des performances."
+          },
+          {
+            question: "Mon site sera-t-il optimisé pour les mobiles ?",
+            answer: "Absolument. Tous nos développements WordPress sont responsive par défaut, garantissant une expérience optimale sur tous les appareils : ordinateurs, tablettes et smartphones."
+          },
+          {
+            question: "Quelle est votre approche en matière de sécurité ?",
+            answer: "Nous mettons en place une stratégie de sécurité complète : authentification forte, pare-feu applicatif, monitoring des tentatives d'intrusion, sauvegardes automatisées et mises à jour de sécurité régulières."
+          }
+        ]}
+      />
+
+      {/* Services complémentaires */}
+      <FeatureSection
+        title="Services complémentaires"
+        description="Optimisez votre site WordPress avec nos services additionnels"
+        features={[
+          {
+            title: "Développement sur mesure",
+            description: "Création de fonctionnalités spécifiques pour répondre à vos besoins particuliers.",
+            icon: Code
+          },
+          {
+            title: "Marketing digital",
+            description: "Stratégies marketing adaptées pour augmenter votre visibilité en ligne.",
+            icon: Share2
+          },
+          {
+            title: "Formation WordPress",
+            description: "Formation personnalisée pour maîtriser la gestion de votre site.",
+            icon: MessageSquare
+          }
+        ]}
+            image="/static/images/services/integration/wordpress-complementaire.webp"
+
+      />
+    </ServiceLayout>
+  );
+};
+
+export default WordPressServicePage;
\ No newline at end of file
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
new file mode 100644
index 000000000..bd5f86590
--- /dev/null
+++ b/src/app/services/page.tsx
@@ -0,0 +1,9 @@
+import ServicesPage from "@/screens/marketing/services";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Nos Services | onRuntime Studio",
+  description: "Découvrez nos services de design UI/UX, développement web et mobile, et solutions sur mesure pour vos projets digitaux.",
+};
+
+export default ServicesPage;
diff --git a/src/components/layout/footer/footer.tsx b/src/components/layout/footer/footer.tsx
index c6ecf330c..2c90a2f94 100644
--- a/src/components/layout/footer/footer.tsx
+++ b/src/components/layout/footer/footer.tsx
@@ -4,8 +4,8 @@ import Link from "next/link";
 import React from "react";
 
 const navigation = {
-  ["Navigation"]: [
-    { name: "Nos services", href: Routes.unknown },
+  Navigation: [
+    { name: "Nos services", href: Routes.services },
     { name: "Nos projets", href: Routes.unknown },
     { name: "Le Studio", href: Routes.unknown },
     { name: "Carrières", href: Routes.unknown },
diff --git a/src/components/marketing/navbar/navigation/services/index.tsx b/src/components/marketing/navbar/navigation/services/index.tsx
index 928c64add..fd3646192 100644
--- a/src/components/marketing/navbar/navigation/services/index.tsx
+++ b/src/components/marketing/navbar/navigation/services/index.tsx
@@ -4,74 +4,104 @@ import {
   NavigationMenuLink,
   NavigationMenuTrigger,
 } from "@/components/ui/navigation-menu";
+import Services from "@/constants/services";
 import Routes from "@/constants/routes";
 import { cn } from "@/lib/utils";
-import { OnRuntimeLogo } from "@/logos/components";
-import Link from "next/link";
 import React from "react";
+import { ArrowRight, LucideIcon } from "lucide-react";
+import { OnRuntimeLogo } from "@/logos/components";
 
 const NavigationServices: React.FC = () => (
   <NavigationMenuItem>
     <NavigationMenuTrigger>Nos services</NavigationMenuTrigger>
 
     <NavigationMenuContent>
-      <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-        <li className="row-span-3">
-          <NavigationMenuLink asChild>
-            <Link
-              href={Routes.landing.customer}
-              className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-onruntime-magenta/5 to-muted p-6 no-underline outline-none focus:shadow-md"
-            >
-              <OnRuntimeLogo className="" />
-
-              <div className="mb-2 mt-4 text-lg font-semibold">Nos services</div>
+      <div className="grid w-full md:w-[600px] lg:w-[800px] grid-cols-1 md:grid-cols-[200px_1fr] lg:grid-cols-[280px_1fr] gap-3 p-4">
+        <NavigationMenuLink asChild className="block">
+          <a 
+            href={Routes.services}
+            className="group h-full select-none rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground"
+          >
+            <div className="flex h-full flex-col justify-between">
+              <div className="flex flex-col gap-3">
+                <OnRuntimeLogo className="w-32" />
+                <h3 className="text-lg font-medium leading-none">
+                  Nos services
+                </h3>
+                <p className="text-sm leading-snug text-muted-foreground">
+                  Découvrez notre gamme complète de services de développement et de design pour donner vie à vos projets digitaux.
+                </p>
+              </div>
+              <div className="flex items-center gap-2 text-sm text-muted-foreground group-hover:text-accent-foreground/80">
+                En savoir plus
+                <ArrowRight className="h-4 w-4" />
+              </div>
+            </div>
+          </a>
+        </NavigationMenuLink>
 
-              <p className="text-sm leading-tight text-muted-foreground">
-                Chez onRuntime, nous vous accompagnons dans la réalisation de
-                vos projets.
+        <ul className="grid grid-cols-2 gap-3">
+          {Services.map((service) => (
+            <ListItem
+              key={service.id}
+              title={service.name}
+              href={Routes.service[service.id].root}
+              icon={service.icon}
+            >
+              <p className="mb-2 text-xs text-muted-foreground">
+                {service.description}
               </p>
-            </Link>
-          </NavigationMenuLink>
-        </li>
-
-        <ListItem href={Routes.unknown} title="...">
-          ...
-        </ListItem>
-        <ListItem href={Routes.unknown} title="...">
-          ...
-        </ListItem>
-        <ListItem href={Routes.unknown} title="...">
-          ...
-        </ListItem>
-      </ul>
+              
+              <div className="grid gap-1">
+                {service.subServices.map((subService) => (
+                  <a 
+                    key={subService.id} 
+                    href={subService.route}
+                    className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    {subService.name}
+                  </a>
+                ))}
+              </div>
+            </ListItem>
+          ))}
+        </ul>
+      </div>
     </NavigationMenuContent>
   </NavigationMenuItem>
 );
 
-const ListItem = React.forwardRef<
-  React.ElementRef<"a">,
-  React.ComponentPropsWithoutRef<"a">
->(({ className, title, children, ...props }, ref) => {
+interface ListItemProps {
+  title: string;
+  icon: LucideIcon;
+  href: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const ListItem = ({ className, title, children, icon: Icon, href }: ListItemProps) => {
   return (
     <li>
       <NavigationMenuLink asChild>
-        <a
-          ref={ref}
+        <a 
+          href={href} 
           className={cn(
-            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+            "flex flex-col gap-2 h-full select-none rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
             className
           )}
-          {...props}
         >
-          <div className="text-sm font-semibold leading-none">{title}</div>
-          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
-            {children}
-          </p>
+          <div className="flex items-center gap-2">
+            <div className="p-1 rounded-md bg-muted">
+              <Icon className="w-4 h-4 text-muted-foreground" />
+            </div>
+            <span className="text-sm font-medium">{title}</span>
+          </div>
+          
+          {children}
         </a>
       </NavigationMenuLink>
     </li>
   );
-});
-ListItem.displayName = "ListItem";
+};
 
-export default NavigationServices;
+export default NavigationServices;
\ No newline at end of file
diff --git a/src/components/marketing/services/faq-section.tsx b/src/components/marketing/services/faq-section.tsx
new file mode 100644
index 000000000..e3308dacb
--- /dev/null
+++ b/src/components/marketing/services/faq-section.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { cn } from "@/lib/utils";
+
+interface FAQItem {
+  question: string;
+  answer: string;
+}
+
+interface FAQSectionProps {
+  title: string;
+  description: string;
+  items: FAQItem[];
+  className?: string;
+}
+
+const FAQSection: React.FC<FAQSectionProps> = ({
+  title,
+  description,
+  items,
+  className
+}) => {
+  return (
+    <div className={cn("flex flex-col gap-12", className)}>
+      <div className="text-center max-w-2xl mx-auto">
+        <h2 className="text-3xl font-medium text-foreground mb-4">{title}</h2>
+        <p className="text-muted-foreground">{description}</p>
+      </div>
+
+      <div className="max-w-3xl mx-auto w-full">
+        <Accordion type="single" collapsible className="w-full">
+          {items.map((item, index) => (
+            <AccordionItem key={index} value={`item-${index}`}>
+              <AccordionTrigger className="text-left">
+                {item.question}
+              </AccordionTrigger>
+              <AccordionContent>
+                {item.answer}
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </div>
+    </div>
+  );
+};
+
+export default FAQSection;
diff --git a/src/components/marketing/services/feature-section.tsx b/src/components/marketing/services/feature-section.tsx
new file mode 100644
index 000000000..a8e7b6bab
--- /dev/null
+++ b/src/components/marketing/services/feature-section.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { cn } from "@/lib/utils";
+import Image from 'next/image';
+import { LucideIcon } from 'lucide-react';
+
+interface FeatureSectionProps {
+  title: string;
+  description: string;
+  features: {
+    title: string;
+    description: string;
+    icon?: LucideIcon;
+  }[];
+  image?: string;
+  reversed?: boolean;
+  className?: string;
+}
+
+const FeatureSection: React.FC<FeatureSectionProps> = ({
+  title,
+  description,
+  features,
+  image,
+  reversed = false,
+  className
+}) => {
+  return (
+    <div className={cn("grid md:grid-cols-2 gap-12 items-center", className)}>
+      {/* Contenu */}
+      <div className={cn("flex flex-col gap-8", reversed && "md:order-2")}>
+        <div>
+          <h2 className="text-3xl font-medium text-foreground mb-4">{title}</h2>
+          <p className="text-muted-foreground">{description}</p>
+        </div>
+
+        <div className="grid gap-6">
+          {features.map((feature, index) => (
+            <div key={index} className="flex gap-4">
+              {feature.icon && (
+                <div className="p-2 rounded-md bg-onruntime-blue/10 text-onruntime-blue h-fit">
+                  <feature.icon className="w-5 h-5" />
+                </div>
+              )}
+              <div>
+                <h3 className="font-medium text-foreground mb-2">{feature.title}</h3>
+                <p className="text-sm text-muted-foreground">{feature.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Image */}
+      {image && (
+        <div className={cn("relative w-full aspect-square", reversed && "md:order-1")}>
+          <Image
+            src={image}
+            alt={title}
+            fill
+            className="object-cover rounded-lg"
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FeatureSection;
\ No newline at end of file
diff --git a/src/components/marketing/services/process-timeline.tsx b/src/components/marketing/services/process-timeline.tsx
new file mode 100644
index 000000000..0c623ab44
--- /dev/null
+++ b/src/components/marketing/services/process-timeline.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from 'react';
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface ProcessStep {
+  title: string;
+  description: string;
+  services?: string[];
+}
+
+interface ProcessTimelineProps {
+  steps: ProcessStep[];
+}
+
+const ProcessTimeline: React.FC<ProcessTimelineProps> = ({ steps }) => {
+  const [path, setPath] = useState("");
+  const timelineRef = useRef<HTMLDivElement>(null);
+  const pointRefs = useRef<Array<HTMLDivElement | null>>([]);
+
+  useEffect(() => {
+    const calculatePath = () => {
+      if (!timelineRef.current) return;
+
+      const validPointRefs = pointRefs.current.filter((ref): ref is HTMLDivElement => ref !== null);
+      if (validPointRefs.length === 0) return;
+
+      const points = validPointRefs.map(ref => {
+        const rect = ref.getBoundingClientRect();
+        const timelineRect = timelineRef.current!.getBoundingClientRect();
+        return {
+          x: rect.left - timelineRect.left + rect.width / 2,
+          y: rect.top - timelineRect.top + rect.height / 2
+        };
+      });
+
+      let svgPath = `M ${points[0].x} ${points[0].y}`;
+      
+      for (let i = 0; i < points.length - 1; i++) {
+        const current = points[i];
+        const next = points[i + 1];
+        const midY = (current.y + next.y) / 2;
+        
+        svgPath += ` C ${current.x} ${midY}, ${next.x} ${midY}, ${next.x} ${next.y}`;
+      }
+
+      setPath(svgPath);
+    };
+
+    calculatePath();
+    window.addEventListener('resize', calculatePath);
+    return () => window.removeEventListener('resize', calculatePath);
+  }, []);
+
+  return (
+    <div className="relative" ref={timelineRef}>
+      <svg
+        className="absolute inset-0 w-full h-full pointer-events-none"
+        style={{ minHeight: '100%' }}
+      >
+        <defs>
+          <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stopColor="hsl(var(--onruntime-blue))" />
+            <stop offset="50%" stopColor="hsl(var(--onruntime-magenta))" />
+            <stop offset="100%" stopColor="hsl(var(--onruntime-blue))" />
+          </linearGradient>
+        </defs>
+        <path
+          d={path}
+          fill="none"
+          stroke="url(#gradient)"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeDasharray="8 8"
+          className="transition-all duration-300 animate-[dash_30s_linear_infinite]"
+        />
+      </svg>
+
+      <div className="relative flex flex-col gap-8 md:gap-16 max-w-2xl mx-auto">
+        {steps.map((step, i) => (
+          <div 
+            key={i} 
+            className={cn(
+              "flex gap-8",
+              i % 2 === 0 ? "flex-row" : "flex-row-reverse",
+              "group"
+            )}
+          >
+            <div 
+              ref={(el) => {
+                pointRefs.current[i] = el;
+              }}
+              className={cn(
+                "relative flex-none w-8 h-8 mt-2",
+                i % 2 === 0 ? "ml-0" : "-ml-4",
+                "md:ml-0"
+              )}
+            >
+              <div className="absolute inset-0 bg-background border-2 border-onruntime-blue rounded-full group-hover:scale-125 transition-transform" />
+              <div className="absolute inset-2 bg-onruntime-blue rounded-full animate-pulse" />
+            </div>
+
+            <div className={cn(
+              "flex-1 p-6 rounded-lg border bg-card hover:border-onruntime-blue transition-colors",
+              "group-hover:shadow-lg group-hover:shadow-onruntime-blue/5"
+            )}>
+              <div className="flex flex-wrap items-center gap-3 mb-3">
+                <h3 className="text-lg font-medium text-foreground">
+                  {step.title}
+                </h3>
+                {step.services && (
+                  <div className="flex gap-2">
+                    {step.services.map((service, j) => (
+                      <Badge key={j} variant="secondary">{service}</Badge>
+                    ))}
+                  </div>
+                )}
+              </div>
+              <p className="text-muted-foreground">
+                {step.description}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ProcessTimeline;
\ No newline at end of file
diff --git a/src/components/marketing/services/sections/index.tsx b/src/components/marketing/services/sections/index.tsx
new file mode 100644
index 000000000..50507a927
--- /dev/null
+++ b/src/components/marketing/services/sections/index.tsx
@@ -0,0 +1,242 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { VelocityScroll } from "@/components/ui/scroll-based-velocity";
+import Link from "next/link";
+import { ArrowRight, GitPullRequestArrow, Timer, Users } from "lucide-react";
+import Image from "next/image";
+
+export const ValuePropositionSection = () => (
+  <div className="grid md:grid-cols-3 gap-8">
+    <div className="flex flex-col items-center text-center gap-4 p-6">
+      <div className="p-3 rounded-lg bg-onruntime-blue/10 text-onruntime-blue">
+        <GitPullRequestArrow className="w-6 h-6" />
+      </div>
+      <h3 className="text-lg font-medium text-foreground">Approche flexible</h3>
+      <p className="text-muted-foreground">
+        Notre méthodologie s&apos;adapte à vos besoins spécifiques, garantissant
+        une collaboration fluide et efficace.
+      </p>
+    </div>
+
+    <div className="flex flex-col items-center text-center gap-4 p-6">
+      <div className="p-3 rounded-lg bg-onruntime-blue/10 text-onruntime-blue">
+        <Timer className="w-6 h-6" />
+      </div>
+      <h3 className="text-lg font-medium text-foreground">
+        Time-to-Market optimisé
+      </h3>
+      <p className="text-muted-foreground">
+        Des solutions rapides et efficaces pour lancer votre projet dans les
+        meilleurs délais.
+      </p>
+    </div>
+
+    <div className="flex flex-col items-center text-center gap-4 p-6">
+      <div className="p-3 rounded-lg bg-onruntime-blue/10 text-onruntime-blue">
+        <Users className="w-6 h-6" />
+      </div>
+      <h3 className="text-lg font-medium text-foreground">Équipe dédiée</h3>
+      <p className="text-muted-foreground">
+        Des experts passionnés qui s&apos;investissent pleinement dans la
+        réussite de votre projet.
+      </p>
+    </div>
+  </div>
+);
+
+const technologies = [
+  // Core Web Technologies
+  "React",
+  "Next.js",
+  "Nuxt",
+  "TypeScript",
+  "Vue.js",
+  "TailwindCSS",
+  "Sass",
+
+  // Backend
+  "Node.js",
+  "Python",
+  "Django",
+  "PHP",
+  "Laravel",
+  "NestJS",
+  "Express",
+  "Flask",
+
+  // CMS & E-commerce
+  "WordPress",
+  "Shopify",
+  "Webflow",
+  "SquareSpace",
+  "PrestaShop",
+  "Strapi",
+  "WooCommerce",
+
+  // Infrastructure & Data
+  "AWS",
+  "Google Cloud",
+  "Azure",
+  "Docker",
+  "Kubernetes",
+  "GraphQL",
+  "MongoDB",
+  "PostgreSQL",
+  "Redis",
+  "MySQL",
+  "Firebase",
+  "Supabase",
+  "Prisma",
+  "Vercel",
+  "Netlify",
+];
+
+const TechnologyList = () => (
+  <>
+    {technologies.map((tech, index) => (
+      <React.Fragment key={`${tech}-${index}`}>
+        <span>{tech} </span>
+        <span>·</span>
+      </React.Fragment>
+    ))}
+  </>
+);
+
+export const TechnologiesSection = () => (
+  <div className="relative py-10 md:py-8">
+    <div className="w-full overflow-hidden relative">
+      {/* Gradient overlay left */}
+      <div className="absolute left-0 top-0 w-32 h-full bg-gradient-to-r from-muted to-transparent z-10" />
+
+      {/* Gradient overlay right */}
+      <div className="absolute right-0 top-0 w-32 h-full bg-gradient-to-l from-muted to-transparent z-10" />
+
+      <div className="flex flex-col gap-2">
+        {" "}
+        {/* Added gap-12 for spacing between rows */}
+        <VelocityScroll
+          defaultVelocity={1}
+          numRows={1}
+          className="text-2xl md:text-2xl font-medium"
+        >
+          <span className="inline-flex items-center gap-4 ml-4">
+            <TechnologyList />
+          </span>
+        </VelocityScroll>
+        <VelocityScroll
+          defaultVelocity={-1}
+          numRows={1}
+          className="text-2xl md:text-2xl font-medium"
+        >
+          <span className="inline-flex items-center gap-4 ml-4">
+            <TechnologyList />
+          </span>
+        </VelocityScroll>
+      </div>
+    </div>
+  </div>
+);
+
+export const ConsultingSection = () => (
+  <div className="relative overflow-hidden rounded-lg border bg-card p-8">
+    <div className="max-w-2xl">
+      <h2 className="text-2xl font-medium text-foreground mb-4">
+        Besoin de conseils ?
+      </h2>
+      <p className="text-muted-foreground mb-6">
+        Nous proposons également des services de consulting pour vous aider à
+        faire les bons choix technologiques et stratégiques.
+      </p>
+      <Link href="/contact">
+        <Button>
+          Prendre rendez-vous
+          <ArrowRight className="ml-2 w-4 h-4" />
+        </Button>
+      </Link>
+    </div>
+
+    <div className="absolute right-0 top-0 bottom-0 w-1/3 bg-gradient-to-l from-onruntime-blue/10 to-transparent" />
+  </div>
+);
+
+const techPartners = [
+  {
+    name: "Google Cloud Platform",
+    logo: "/static/images/partners/google-cloud.svg",
+    description: "Infrastructure cloud robuste et évolutive"
+  },
+  {
+    name: "Amazon Web Services",
+    logo: "/static/images/partners/aws.svg",
+    description: "Solutions cloud complètes et flexibles"
+  },
+  {
+    name: "Shopify",
+    logo: "/static/images/partners/shopify.svg",
+    description: "Solutions e-commerce personnalisées"
+  }
+]
+
+export const ExpertiseSection = () => (
+  <div className="grid md:grid-cols-2 gap-12">
+    <div>
+      <h2 className="text-2xl font-medium text-foreground mb-4">
+        Une expertise reconnue
+      </h2>
+      <p className="text-muted-foreground mb-6">
+        Avec plus de 10 ans d&apos;expérience cumulée, notre équipe maîtrise les
+        dernières technologies et les meilleures pratiques du développement web
+        et mobile.
+      </p>
+      <dl className="grid grid-cols-2 gap-4 md:gap-8">
+        <div className="space-y-2">
+          <dt className="text-3xl font-medium text-foreground">10+</dt>
+          <dd className="text-sm text-muted-foreground">
+            Années d&apos;expérience
+          </dd>
+        </div>
+        <div className="space-y-2">
+          <dt className="text-3xl font-medium text-foreground">7+</dt>
+          <dd className="text-sm text-muted-foreground">Projets réalisés</dd>
+        </div>
+        <div className="space-y-2">
+          <dt className="text-3xl font-medium text-foreground">100%</dt>
+          <dd className="text-sm text-muted-foreground">Satisfaction client</dd>
+        </div>
+        <div className="space-y-2">
+          <dt className="text-3xl font-medium text-foreground">24/7</dt>
+          <dd className="text-sm text-muted-foreground">Support disponible</dd>
+        </div>
+      </dl>
+    </div>
+
+    <div className="space-y-8">
+      <h3 className="text-lg font-medium text-foreground">
+        Nos technologies partenaires
+      </h3>
+      
+      <div className="grid grid-cols-1 gap-6">
+        {techPartners.map((partner) => (
+          <div 
+            key={partner.name}
+            className="flex items-center gap-6 p-4 rounded-lg border bg-background hover:bg-accent/50 transition-colors"
+          >
+            <div className="relative w-16 h-12 flex-shrink-0">
+              <Image
+                src={partner.logo}
+                alt={partner.name}
+                className="object-contain"
+                fill
+                sizes="64px"
+              />
+            </div>
+            <div>
+              <h4 className="font-medium text-foreground">{partner.name} Partner</h4>
+              <p className="text-sm text-muted-foreground">{partner.description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+);
diff --git a/src/components/marketing/services/service-layout.tsx b/src/components/marketing/services/service-layout.tsx
new file mode 100644
index 000000000..6fa3068a1
--- /dev/null
+++ b/src/components/marketing/services/service-layout.tsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import { Button } from "@/components/ui/button";
+import DotPattern from "@/components/ui/dot-pattern";
+import { cn } from "@/lib/utils";
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";
+import Routes from "@/constants/routes";
+import Image from 'next/image';
+
+interface ServiceLayoutProps {
+  // SEO et métadonnées
+  title: string;
+  description: string;
+  
+  // Contenu de l'en-tête
+  heroTitle: string;
+  heroDescription: string;
+  heroImage?: string;
+  
+  // Sections de contenu
+  children: React.ReactNode;
+  
+  // Autres props
+  className?: string;
+}
+
+const ServiceLayout: React.FC<ServiceLayoutProps> = ({
+  title,
+  description,
+  heroTitle,
+  heroDescription,
+  heroImage,
+  children,
+  className
+}) => {
+  // TODO: To replace by next-seo
+  const structuredData = {
+    "@context": "https://schema.org",
+    "@type": "Service",
+    "name": title,
+    "description": description,
+    "provider": {
+      "@type": "Organization",
+      "name": "onRuntime Studio",
+      "image": "https://onruntime.com/logo.png",
+      "address": {
+        "@type": "PostalAddress",
+        "addressLocality": "Rouen & Paris",
+        "addressCountry": "FR"
+      }
+    }
+  };
+
+  return (
+    <>
+      {/* Métadonnées SEO */}
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
+      />
+      
+      <main className={cn("min-h-screen pt-32 pb-16", className)}>
+        <div className="px-4 md:px-0 max-w-5xl mx-auto">
+          {/* Hero Section */}
+          <div className="relative flex flex-col lg:flex-row gap-12 items-center mb-24">
+            <div className="flex-1 flex flex-col items-start gap-6">
+              <h1 className="font-medium text-4xl md:text-5xl text-foreground">
+                {heroTitle}
+              </h1>
+              
+              <p className="text-muted-foreground text-lg">
+                {heroDescription}
+              </p>
+
+              <Link href={Routes.contact}>
+                <Button size="lg">
+                  Discuter de votre projet
+                  <ArrowRight className="ml-2 w-5 h-5" />
+                </Button>
+              </Link>
+
+              <DotPattern
+                width={30}
+                height={30}
+                className={cn(
+                  "absolute z-[-1] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2",
+                  "[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]"
+                )}
+              />
+            </div>
+
+            {heroImage && (
+              <div className="flex-1 relative w-full aspect-video">
+                <Image
+                  src={heroImage}
+                  alt={title}
+                  fill
+                  className="object-cover rounded-lg"
+                />
+              </div>
+            )}
+          </div>
+
+          {/* Contenu principal */}
+          <div className="flex flex-col gap-24">
+            {children}
+          </div>
+
+          {/* CTA final */}
+          <div className="mt-24 text-center">
+            <div className="max-w-2xl mx-auto">
+              <h2 className="text-3xl font-medium text-foreground mb-6">
+                Prêt à concrétiser votre projet ?
+              </h2>
+              <p className="text-muted-foreground mb-8">
+                Contactez-nous pour discuter de vos besoins et obtenir un devis personnalisé.
+              </p>
+              <Link href={Routes.contact}>
+                <Button size="lg">
+                  Commencer maintenant
+                  <ArrowRight className="ml-2 w-5 h-5" />
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};
+
+export default ServiceLayout;
\ No newline at end of file
diff --git a/src/components/marketing/services/service-overview.tsx b/src/components/marketing/services/service-overview.tsx
new file mode 100644
index 000000000..cdc081899
--- /dev/null
+++ b/src/components/marketing/services/service-overview.tsx
@@ -0,0 +1,178 @@
+import React from 'react';
+import ServiceLayout from '@/components/marketing/services/service-layout';
+import { ArrowRight, LucideIcon, Timer, Users, Zap } from "lucide-react";
+import Link from "next/link";
+import Image from "next/image";
+import { Service } from '@/types/service';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+import DotPattern from '@/components/ui/dot-pattern';
+import ProcessTimeline from './process-timeline';
+
+interface ProcessStep {
+  title: string;
+  description: string;
+  services?: string[];
+}
+
+interface ServiceOverviewPageProps {
+  service: Service;
+  heroImage: string;
+  showCaseImage: string;
+  benefits: {
+    title: string;
+    description: string;
+    icon: LucideIcon;
+  }[];
+  processList: ProcessStep[];
+}
+
+const ServiceOverviewPage: React.FC<ServiceOverviewPageProps> = ({
+  service,
+  heroImage,
+  showCaseImage,
+  benefits,
+  processList
+}) => {
+  return (
+    <ServiceLayout
+      title={`${service.name} | onRuntime Studio`}
+      description={service.description}
+      heroTitle={service.name}
+      heroDescription={service.description}
+      heroImage={heroImage}
+    >
+      {/* Introduction Section */}
+      <div className="flex flex-col md:flex-row gap-12 items-center">
+        <div className="flex-1 space-y-6">
+          <h2 className="text-3xl font-medium text-foreground">
+            Une expertise pointue en {service.name.charAt(0).toLowerCase() + service.name.slice(1)}
+          </h2>
+          <p className="text-muted-foreground">
+            Nous combinons créativité et expertise technique pour offrir des solutions {service.name.charAt(0).toLowerCase() + service.name.slice(1)} qui répondent parfaitement à vos objectifs. Notre approche méthodique et notre expérience nous permettent de créer des solutions durables et évolutives.
+          </p>
+          <div className="flex flex-col md:flex-row gap-4">
+            <div className="flex items-center gap-2">
+              <Timer className="w-5 h-5 text-onruntime-blue" />
+              <span className="text-sm">Livraison rapide</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Users className="w-5 h-5 text-onruntime-blue" />
+              <span className="text-sm">Équipe dédiée</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Zap className="w-5 h-5 text-onruntime-blue" />
+              <span className="text-sm">Solutions performantes</span>
+            </div>
+          </div>
+        </div>
+        <div className="flex-1 relative w-full aspect-video rounded-lg overflow-hidden">
+          <Image 
+            src={showCaseImage}
+            alt={service.name}
+            fill
+            className="object-cover"
+          />
+        </div>
+      </div>
+
+      {/* Nos Services Section */}
+      <div className="relative">
+        <div className="text-center mb-12">
+          <Badge className="mb-4">Nos services</Badge>
+          <h2 className="text-3xl font-medium text-foreground mb-4">
+            Solutions {service.name.charAt(0).toLowerCase() + service.name.slice(1)} sur mesure
+          </h2>
+          <p className="text-muted-foreground max-w-2xl mx-auto">
+            Découvrez notre gamme complète de services {service.name.charAt(0).toLowerCase() + service.name.slice(1)}, conçue pour répondre à tous vos besoins et vous accompagner dans la réalisation de vos projets.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-8">
+          {service.subServices.map((subService) => (
+            <Link 
+              key={subService.id}
+              href={subService.route}
+              className="group"
+            >
+              <div className="h-full flex flex-col gap-6 p-6 rounded-lg border bg-card hover:border-onruntime-blue transition-colors">
+                <div className="flex items-center gap-4">
+                  {subService.icon && (
+                    <div className="p-3 rounded-md bg-muted text-muted-foreground group-hover:bg-onruntime-blue/10 group-hover:text-onruntime-blue transition-colors">
+                      <subService.icon className="w-6 h-6" />
+                    </div>
+                  )}
+                  <div>
+                    <h3 className="text-xl font-medium text-foreground mb-2">{subService.name}</h3>
+                    <p className="text-sm text-muted-foreground">{subService.description}</p>
+                  </div>
+                </div>
+                <div className="mt-auto pt-4 flex justify-between items-center border-t">
+                  <span className="text-sm text-muted-foreground">En savoir plus</span>
+                  <ArrowRight className="w-4 h-4 text-muted-foreground group-hover:text-onruntime-blue transition-colors" />
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
+
+        <DotPattern
+          width={30}
+          height={30}
+          className={cn(
+            "absolute inset-0 -z-10",
+            "[mask-image:radial-gradient(white,transparent)]"
+          )}
+        />
+      </div>
+
+      {/* Benefits Section */}
+      <div className="grid md:grid-cols-2 gap-12 items-center">
+        <div>
+          <Badge className="mb-4">Avantages</Badge>
+          <h2 className="text-3xl font-medium text-foreground mb-6">
+            Pourquoi choisir nos services {service.name.charAt(0).toLowerCase() + service.name.slice(1)} ?
+          </h2>
+          <div className="space-y-6">
+            {benefits.map((benefit, i) => (
+              <div key={i} className="flex gap-4">
+                <div className="p-2 rounded-md bg-onruntime-blue/10 text-onruntime-blue h-fit">
+                  <benefit.icon className="w-5 h-5" />
+                </div>
+                <div>
+                  <h3 className="font-medium text-foreground mb-2">{benefit.title}</h3>
+                  <p className="text-sm text-muted-foreground">{benefit.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="relative aspect-square rounded-lg overflow-hidden">
+          <Image 
+            src="/static/images/services/frontend/frontend-avantages.webp"
+            alt="Avantages"
+            fill
+            className="object-cover"
+          />
+        </div>
+      </div>
+
+      {/* Process Section */}
+      <div>
+        <div className="text-center mb-12">
+          <Badge className="mb-4">Notre processus</Badge>
+          <h2 className="text-3xl font-medium text-foreground mb-4">
+            Comment nous travaillons
+          </h2>
+          <p className="text-muted-foreground max-w-2xl mx-auto">
+            Une approche intégrée qui combine nos différentes expertises pour un résultat optimal.
+          </p>
+        </div>
+
+        <ProcessTimeline steps={processList} />
+      </div>
+    </ServiceLayout>
+  );
+};
+
+export default ServiceOverviewPage;
\ No newline at end of file
diff --git a/src/components/marketing/services/testimonials-section.tsx b/src/components/marketing/services/testimonials-section.tsx
new file mode 100644
index 000000000..b28af7b39
--- /dev/null
+++ b/src/components/marketing/services/testimonials-section.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import Image from 'next/image';
+import { cn } from "@/lib/utils";
+import { Quote } from 'lucide-react';
+
+interface Testimonial {
+  content: string;
+  author: {
+    name: string;
+    role: string;
+    company: string;
+    image: string;
+  };
+}
+
+interface TestimonialsSectionProps {
+  title: string;
+  description: string;
+  testimonials: Testimonial[];
+  className?: string;
+}
+
+const TestimonialsSection: React.FC<TestimonialsSectionProps> = ({
+  title,
+  description,
+  testimonials,
+  className
+}) => {
+  return (
+    <div className={cn("flex flex-col gap-12", className)}>
+      <div className="text-center max-w-2xl mx-auto">
+        <h2 className="text-3xl font-medium text-foreground mb-4">{title}</h2>
+        <p className="text-muted-foreground">{description}</p>
+      </div>
+
+      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {testimonials.map((testimonial, index) => (
+          <div 
+            key={index}
+            className="flex flex-col gap-6 p-6 rounded-lg border bg-card"
+          >
+            <Quote className="w-8 h-8 text-onruntime-blue" />
+            
+            <p className="flex-1 text-foreground italic">
+              &quot;{testimonial.content}&quot;
+            </p>
+
+            <div className="flex items-center gap-4">
+              <div className="relative w-12 h-12 rounded-full overflow-hidden">
+                <Image
+                  src={testimonial.author.image}
+                  alt={testimonial.author.name}
+                  fill
+                  className="object-cover"
+                />
+              </div>
+              <div>
+                <p className="font-medium text-foreground">{testimonial.author.name}</p>
+                <p className="text-sm text-muted-foreground">
+                  {testimonial.author.role}, {testimonial.author.company}
+                </p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TestimonialsSection;
\ No newline at end of file
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
new file mode 100644
index 000000000..2f55a32f4
--- /dev/null
+++ b/src/components/ui/accordion.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/src/constants/routes.ts b/src/constants/routes.ts
index 864c62985..623148c4d 100644
--- a/src/constants/routes.ts
+++ b/src/constants/routes.ts
@@ -1,13 +1,52 @@
 const Routes = {
-	unknown: "#",
+  unknown: "#",
 
-	landing: {
-		visitor: "/",
-		customer: "/customer",
-	},
+  landing: {
+    visitor: "/",
+    customer: "/customer",
+  },
+
+  team: "/team",
+  contact: "/contact",
+  services: "/services",
 
-	team: "/team",
-	contact: "/contact",
+  service: {
+    design: {
+      root: "/services/design",
+      moodboard: "/services/design/moodboard",
+      wireframes: "/services/design/wireframes",
+      ui: "/services/design/ui",
+      branding: "/services/design/branding",
+      audit: "/services/design/audit",
+    },
+    
+    integration: {
+      root: "/services/integration",
+      shopify: "/services/integration/shopify",
+      wordpress: "/services/integration/wordpress",
+      webflow: "/services/integration/webflow",
+      squarespace: "/services/integration/squarespace",
+      prestashop: "/services/integration/prestashop",
+      strapi: "/services/integration/strapi",
+    },
+    
+    frontend: {
+      root: "/services/frontend",
+      web: "/services/frontend/web",
+      mobile: "/services/frontend/mobile",
+      desktop: "/services/frontend/desktop",
+      pwa: "/services/frontend/pwa",
+    },
+    
+    backend: {
+      root: "/services/backend",
+      api: "/services/backend/api",
+      database: "/services/backend/database",
+      bots: "/services/backend/bots",
+      microservices: "/services/backend/microservices",
+      cloud: "/services/backend/cloud",
+    },
+  },
 
 	legals: {
 		company: "/company",
@@ -26,4 +65,4 @@ const Routes = {
 	}
 };
 
-export default Routes;
+export default Routes;
\ No newline at end of file
diff --git a/src/constants/services.ts b/src/constants/services.ts
new file mode 100644
index 000000000..602a4bbf1
--- /dev/null
+++ b/src/constants/services.ts
@@ -0,0 +1,195 @@
+import { Service, ServiceCategory } from "@/types/service";
+import Routes from "./routes";
+import { 
+  Palette, 
+  Code, 
+  Layers, 
+  Server,
+  Paintbrush,
+  LayoutTemplate,
+  Smartphone,
+  FileCode,
+  ShoppingBag,
+  Globe,
+  Box,
+  Cloud,
+  Bot,
+  Database
+} from "lucide-react";
+
+const Services: Service[] = [
+  {
+    id: ServiceCategory.DESIGN,
+    name: "Design UI/UX",
+    description: "Création d'interfaces modernes et d'expériences utilisateur optimales",
+    icon: Palette,
+    subServices: [
+      {
+        id: "moodboard",
+        name: "Moodboard",
+        description: "Définition de l'identité visuelle et de l'ambiance de votre projet",
+        route: Routes.service.design.moodboard,
+        icon: Paintbrush,
+      },
+      {
+        id: "wireframes",
+        name: "Wireframes",
+        description: "Conception de la structure et du parcours utilisateur",
+        route: Routes.service.design.wireframes,
+        icon: LayoutTemplate,
+      },
+      {
+        id: "ui",
+        name: "Maquettage UI",
+        description: "Design détaillé des interfaces utilisateur",
+        route: Routes.service.design.ui,
+        icon: Smartphone,
+      },
+      {
+        id: "branding",
+        name: "Charte graphique",
+        description: "Création de votre identité visuelle complète",
+        route: Routes.service.design.branding,
+        icon: Palette,
+      },
+      {
+        id: "audit",
+        name: "Audit UX/UI",
+        description: "Analyse et optimisation de vos interfaces existantes",
+        route: Routes.service.design.audit,
+        icon: FileCode,
+      },
+    ],
+  },
+  {
+    id: ServiceCategory.INTEGRATION,
+    name: "Intégration",
+    description: "Intégration sur les principales plateformes e-commerce et CMS",
+    icon: Layers,
+    subServices: [
+      {
+        id: "shopify",
+        name: "Shopify",
+        description: "Création et personnalisation de boutiques en ligne Shopify",
+        route: Routes.service.integration.shopify,
+        icon: ShoppingBag,
+      },
+      {
+        id: "wordpress",
+        name: "WordPress",
+        description: "Développement de sites WordPress sur mesure",
+        route: Routes.service.integration.wordpress,
+        icon: Globe,
+      },
+      {
+        id: "webflow",
+        name: "Webflow",
+        description: "Création de sites web modernes avec Webflow",
+        route: Routes.service.integration.webflow,
+        icon: Box,
+      },
+      {
+        id: "squarespace",
+        name: "SquareSpace",
+        description: "Intégration et personnalisation sur SquareSpace",
+        route: Routes.service.integration.squarespace,
+        icon: Layers,
+      },
+      {
+        id: "prestashop",
+        name: "PrestaShop",
+        description: "Développement de boutiques PrestaShop",
+        route: Routes.service.integration.prestashop,
+        icon: ShoppingBag,
+      },
+      {
+        id: "strapi",
+        name: "Strapi",
+        description: "Développement de CMS headless avec Strapi",
+        route: Routes.service.integration.strapi,
+        icon: Database,
+      },
+    ],
+  },
+  {
+    id: ServiceCategory.FRONTEND,
+    name: "Développement Front-end",
+    description: "Création d'applications web et mobiles performantes",
+    icon: Code,
+    subServices: [
+      {
+        id: "web",
+        name: "Applications Web",
+        description: "Développement d'applications web modernes avec React et Next.js",
+        route: Routes.service.frontend.web,
+        icon: Globe,
+      },
+      {
+        id: "mobile",
+        name: "Applications Mobiles",
+        description: "Création d'applications mobiles natives avec React Native",
+        route: Routes.service.frontend.mobile,
+        icon: Smartphone,
+      },
+      {
+        id: "desktop",
+        name: "Logiciels de Bureau",
+        description: "Développement d'applications desktop multiplateforme",
+        route: Routes.service.frontend.desktop,
+        icon: Box,
+      },
+      {
+        id: "pwa",
+        name: "Progressive Web Apps",
+        description: "Création d'applications web progressives performantes",
+        route: Routes.service.frontend.pwa,
+        icon: Globe,
+      },
+    ],
+  },
+  {
+    id: ServiceCategory.BACKEND,
+    name: "Développement Back-end",
+    description: "Architecture et développement de solutions robustes",
+    icon: Server,
+    subServices: [
+      {
+        id: "api",
+        name: "APIs RESTful",
+        description: "Conception et développement d'APIs performantes",
+        route: Routes.service.backend.api,
+        icon: Code,
+      },
+      {
+        id: "database",
+        name: "Bases de données",
+        description: "Architecture et optimisation de bases de données",
+        route: Routes.service.backend.database,
+        icon: Database,
+      },
+      {
+        id: "bots",
+        name: "Bots Discord/Slack",
+        description: "Développement de bots et d'automatisations",
+        route: Routes.service.backend.bots,
+        icon: Bot,
+      },
+      {
+        id: "microservices",
+        name: "Microservices",
+        description: "Architecture et développement de microservices",
+        route: Routes.service.backend.microservices,
+        icon: Box,
+      },
+      {
+        id: "cloud",
+        name: "Solutions Cloud",
+        description: "Déploiement et gestion d'infrastructures cloud",
+        route: Routes.service.backend.cloud,
+        icon: Cloud,
+      },
+    ],
+  },
+];
+
+export default Services;
\ No newline at end of file
diff --git a/src/screens/marketing/services/index.tsx b/src/screens/marketing/services/index.tsx
new file mode 100644
index 000000000..7bbbca094
--- /dev/null
+++ b/src/screens/marketing/services/index.tsx
@@ -0,0 +1,152 @@
+import React from 'react';
+import { Button } from "@/components/ui/button";
+import DotPattern from "@/components/ui/dot-pattern";
+import { cn } from "@/lib/utils";
+import { ArrowRight, LucideIcon } from "lucide-react";
+import Link from "next/link";
+import Routes from "@/constants/routes";
+import Services from "@/constants/services";
+import ProjectTimeline from './timeline';
+import { ConsultingSection, ExpertiseSection, TechnologiesSection, ValuePropositionSection } from '@/components/marketing/services/sections';
+
+// Service card component with expandable sub-services
+const ServiceCard = ({ 
+  name, 
+  description, 
+  icon: Icon,
+  subServices,
+  route
+}: { 
+  name: string;
+  description: string;
+  icon: LucideIcon;
+  subServices: Array<{
+    name: string;
+    description: string;
+    route: string;
+    icon?: LucideIcon;
+  }>;
+  route: string;
+}) => (
+  <div className="flex flex-col gap-6 w-full">
+    <div className="group relative overflow-hidden rounded-lg border bg-background p-6 hover:border-onruntime-blue transition-colors">
+      <Link href={route} className="absolute inset-0" />
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center gap-4">
+          <div className="p-2 rounded-md bg-onruntime-blue/10 text-onruntime-blue">
+            <Icon className="w-6 h-6" />
+          </div>
+          <h3 className="text-xl font-medium text-foreground">{name}</h3>
+        </div>
+        <p className="text-muted-foreground">{description}</p>
+      </div>
+    </div>
+    
+    <div className="grid sm:grid-cols-2 gap-4 pl-4">
+      {subServices.map((subService, index) => (
+        <Link 
+          key={index}
+          href={subService.route}
+          className="group flex items-start gap-3 p-4 rounded-lg border bg-background hover:border-onruntime-blue transition-colors"
+        >
+          {subService.icon && (
+            <div className="p-2 rounded-md bg-muted text-muted-foreground group-hover:bg-onruntime-blue/10 group-hover:text-onruntime-blue transition-colors">
+              <subService.icon className="w-4 h-4" />
+            </div>
+          )}
+          <div className="flex-1">
+            <h4 className="text-sm font-medium text-foreground">{subService.name}</h4>
+            <p className="text-xs text-muted-foreground mt-1">{subService.description}</p>
+          </div>
+        </Link>
+      ))}
+    </div>
+  </div>
+);
+
+const ServicesPage = () => {
+  return (
+    <main className="min-h-screen pt-32 pb-16 w-full">
+      <div className="px-4 md:px-0 max-w-5xl mx-auto space-y-32 w-full">
+        {/* Hero Section */}
+        <div className="relative max-w-2xl mx-auto flex flex-col items-center gap-6 text-center">
+          <h1 className="font-medium text-4xl md:text-5xl text-foreground">
+            Des solutions sur mesure pour vos projets digitaux
+          </h1>
+          
+          <p className="text-muted-foreground">
+            De la conception à la réalisation, nous vous accompagnons à chaque étape de votre projet avec expertise et passion.
+          </p>
+
+          <Link href={Routes.contact}>
+            <Button size="lg">
+              Démarrer un projet
+              <ArrowRight className="ml-2 w-5 h-5" />
+            </Button>
+          </Link>
+
+          <DotPattern
+            width={30}
+            height={30}
+            className={cn(
+              "z-[-1]",
+              "[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]"
+            )}
+          />
+        </div>
+
+        {/* Proposition de valeur */}
+        <ValuePropositionSection />
+
+        {/* Services Grid */}
+        <div className="flex flex-col gap-16 w-full">
+          {Services.map((service) => (
+            <ServiceCard 
+              key={service.id}
+              name={service.name}
+              description={service.description}
+              icon={service.icon}
+              subServices={service.subServices}
+              route={Routes.service[service.id].root}
+            />
+          ))}
+        </div>
+
+        {/* Expertise et chiffres clés */}
+        <ExpertiseSection />
+
+        {/* Technologies */}
+        <div className="w-full">
+          <div className="text-center mb-8">
+            <h2 className="text-3xl font-medium text-foreground mb-4">
+              Notre stack technologique
+            </h2>
+            <p className="text-muted-foreground">
+              Nous maîtrisons un large éventail de technologies modernes pour répondre à tous vos besoins.
+            </p>
+          </div>
+          <TechnologiesSection />
+        </div>
+
+        {/* Notre processus */}
+        <div className="bg-card rounded-lg p-8 border w-full">
+          <div className="max-w-xl mx-auto text-center mb-12">
+            <h2 className="text-3xl font-medium text-foreground mb-4">
+              Notre processus de travail
+            </h2>
+            <p className="text-muted-foreground">
+              Une méthodologie éprouvée et flexible pour mener votre projet vers le succès.
+            </p>
+          </div>
+          
+          <ProjectTimeline />
+        </div>
+
+        {/* Consulting */}
+        <ConsultingSection />
+      </div>
+    </main>
+  );
+};
+
+export default ServicesPage;
\ No newline at end of file
diff --git a/src/screens/marketing/services/timeline.tsx b/src/screens/marketing/services/timeline.tsx
new file mode 100644
index 000000000..52fb66c5f
--- /dev/null
+++ b/src/screens/marketing/services/timeline.tsx
@@ -0,0 +1,180 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from 'react';
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const ProjectTimeline = () => {
+  const phases = [
+    { 
+      title: "Prise de contact initiale",
+      description: "Première rencontre pour comprendre vos besoins et établir une relation de confiance. Nous recueillons les informations essentielles sur votre projet, vos objectifs, et vos attentes.",
+      adaptable: true
+    },
+    { 
+      title: "Kickoff & Découverte",
+      description: "Clarification approfondie des objectifs, attentes, et contraintes du projet. Discussion des choix technologiques et établissement d'un planning prévisionnel.",
+      adaptable: true,
+      optional: false
+    },
+    { 
+      title: "Proposition et devis",
+      description: "Élaboration d'une proposition détaillée incluant la vision, les étapes clés, et la méthodologie. Présentation d'un devis précis et des modalités de paiement.",
+      adaptable: true
+    },
+    { 
+      title: "Recherche et idéation",
+      description: "Exploration et définition de la direction créative. Création de moodboards, d'esquisses ou de wireframes pour valider les concepts initiaux.",
+      adaptable: true,
+      optional: true
+    },
+    { 
+      title: "Design UI/UX",
+      description: "Conception des interfaces et de l'expérience utilisateur. Itérations régulières basées sur vos retours pour aboutir à un design final validé.",
+      adaptable: true,
+      optional: true
+    },
+    { 
+      title: "Développement",
+      description: "Transformation du design en produit fonctionnel avec des points de contrôle réguliers. Tests intermédiaires pour garantir la qualité.",
+      adaptable: true
+    },
+    { 
+      title: "Tests et ajustements",
+      description: "Tests approfondis sur différents supports, correction des bugs et ajustements selon les retours. Validation finale avant mise en production.",
+      adaptable: true
+    },
+    { 
+      title: "Mise en production",
+      description: "Déploiement du projet, formation des utilisateurs si nécessaire, et fourniture de la documentation. Support post-livraison pour une transition en douceur.",
+      adaptable: true
+    },
+    { 
+      title: "Suivi et maintenance",
+      description: "Accompagnement continu pour garantir le succès de votre projet, avec des points de suivi réguliers et des optimisations continues.",
+      adaptable: true,
+      optional: true
+    }
+  ];
+
+  const [path, setPath] = useState("");
+  const timelineRef = useRef<HTMLDivElement>(null);
+  const pointRefs = useRef<Array<HTMLDivElement | null>>([]);
+
+  useEffect(() => {
+    const calculatePath = () => {
+      if (!timelineRef.current) return;
+
+      const validPointRefs = pointRefs.current.filter((ref): ref is HTMLDivElement => ref !== null);
+      if (validPointRefs.length === 0) return;
+
+      const points = validPointRefs.map(ref => {
+        const rect = ref.getBoundingClientRect();
+        const timelineRect = timelineRef.current!.getBoundingClientRect();
+        return {
+          x: rect.left - timelineRect.left + rect.width / 2,
+          y: rect.top - timelineRect.top + rect.height / 2
+        };
+      });
+
+      let svgPath = `M ${points[0].x} ${points[0].y}`;
+      
+      for (let i = 0; i < points.length - 1; i++) {
+        const current = points[i];
+        const next = points[i + 1];
+        const midY = (current.y + next.y) / 2;
+        
+        svgPath += ` C ${current.x} ${midY}, ${next.x} ${midY}, ${next.x} ${next.y}`;
+      }
+
+      setPath(svgPath);
+    };
+
+    calculatePath();
+    window.addEventListener('resize', calculatePath);
+    return () => window.removeEventListener('resize', calculatePath);
+  }, []);
+
+  return (
+    <div className="w-full">
+      <div className="text-center mb-8">
+        <p className="text-muted-foreground">
+          Ce processus représente notre approche idéale, mais nous l&apos;adaptons toujours à vos besoins et contraintes spécifiques. 
+          Certaines étapes peuvent être ajustées ou ignorées selon votre situation.
+        </p>
+      </div>
+
+      <div className="relative" ref={timelineRef}>
+        <svg
+          className="absolute inset-0 w-full h-full pointer-events-none"
+          style={{ minHeight: '100%' }}
+        >
+          <defs>
+            <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" stopColor="hsl(var(--onruntime-blue))" />
+              <stop offset="50%" stopColor="hsl(var(--onruntime-magenta))" />
+              <stop offset="100%" stopColor="hsl(var(--onruntime-blue))" />
+            </linearGradient>
+          </defs>
+          <path
+            d={path}
+            fill="none"
+            stroke="url(#gradient)"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeDasharray="8 8"
+            className="transition-all duration-300 animate-[dash_30s_linear_infinite]"
+          />
+        </svg>
+
+        <div className="relative flex flex-col gap-8 md:gap-16 max-w-2xl mx-auto">
+          {phases.map((phase, index) => (
+            <div 
+              key={index} 
+              className={cn(
+                "flex gap-8",
+                // Sur mobile, on alterne les points à gauche et à droite
+                index % 2 === 0 ? "flex-row" : "flex-row-reverse",
+                "group"
+              )}
+            >
+              <div 
+                ref={(el) => {
+                  pointRefs.current[index] = el;
+                }}
+                className={cn(
+                  "relative flex-none w-8 h-8 mt-2",
+                  // Ajout d'un décalage sur mobile aussi
+                  index % 2 === 0 ? "ml-0" : "-ml-4",
+                  "md:ml-0"
+                )}
+              >
+                <div className="absolute inset-0 bg-background border-2 border-onruntime-blue rounded-full group-hover:scale-125 transition-transform" />
+                <div className="absolute inset-2 bg-onruntime-blue rounded-full animate-pulse" />
+              </div>
+
+              <div className={cn(
+                "flex-1 p-6 rounded-lg border bg-card hover:border-onruntime-blue transition-colors",
+                "group-hover:shadow-lg group-hover:shadow-onruntime-blue/5"
+              )}>
+                <div className="flex flex-wrap items-center gap-3 mb-3">
+                  <h3 className="text-lg font-medium text-foreground">
+                    {phase.title}
+                  </h3>
+                  {phase.optional && (
+                    <Badge>Optionnel</Badge>
+                  )}
+                </div>
+                <p className="text-muted-foreground">
+                  {phase.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectTimeline;
\ No newline at end of file
diff --git a/src/types/service.ts b/src/types/service.ts
new file mode 100644
index 000000000..e01ef2fd6
--- /dev/null
+++ b/src/types/service.ts
@@ -0,0 +1,24 @@
+import { LucideIcon } from "lucide-react";
+
+export enum ServiceCategory {
+  DESIGN = "design",
+  INTEGRATION = "integration",
+  FRONTEND = "frontend",
+  BACKEND = "backend",
+}
+
+export interface SubService {
+  id: string;
+  name: string;
+  description: string;
+  route: string;
+  icon?: LucideIcon;
+}
+
+export interface Service {
+  id: ServiceCategory;
+  name: string;
+  description: string;
+  icon: LucideIcon;
+  subServices: SubService[];
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 15e02e046..85f0dfb8f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -445,6 +445,35 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.1.tgz#fc169732d755c7fbad33ba8d0cd7fd10c90dc8e3"
   integrity sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==
 
+"@radix-ui/react-accordion@^1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-accordion/-/react-accordion-1.2.3.tgz#7768a2d2daea18e5c09809f2c4b8097448ee2ff7"
+  integrity sha512-RIQ15mrcvqIkDARJeERSuXSry2N8uYnxkdDetpfmalT/+0ntOXLkFOsh9iwlAsCv+qcmhZjbdJogIm6WBa6c4A==
+  dependencies:
+    "@radix-ui/primitive" "1.1.1"
+    "@radix-ui/react-collapsible" "1.1.3"
+    "@radix-ui/react-collection" "1.1.2"
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.2"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+
+"@radix-ui/react-collapsible@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-1.1.3.tgz#522a5749646b7a393c9e9049165a9a6dfa924e91"
+  integrity sha512-jFSerheto1X03MUC0g6R7LedNW9EEGWdg9W1+MlpkMLwGkgkbUXLPBH/KIuWKXUoeYRVY11llqbTBDzuLg7qrw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.1"
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-presence" "1.1.2"
+    "@radix-ui/react-primitive" "2.0.2"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@radix-ui/react-collection@1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.1.2.tgz#b45eccca1cb902fd078b237316bd9fa81e621e15"