Migrate from old project

components/Home/Offer/ManagedServices.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import Image from "next/image";
+import {TiChevronRightOutline} from "react-icons/ti";
+
+const ManagedServices = () => {
+    return (
+        <div
+            className="w-[95%] sm:w-[80%] mx-auto items-center grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 mb-16"
+            data-aos="fade-up"
+            data-aos-delay="200"
+        >
+            {/* Image Section */}
+            <div
+                data-aos="fade-up"
+                data-aos-anchor-placement="top-center"
+                className="justify-self-center"
+            >
+                <Image
+                    src="/images/software_dev.jpg"
+                    alt="image"
+                    width={200}
+                    height={200}
+                    className="object-contain"
+                />
+            </div>
+            {/* Text Content */}
+            <div className="p-0">
+                <h1
+                    className="mt-4 text-xl sm:text-2xl md:text-3xl font-bold transition-theme"
+                    style={{color: "var(--primary-text)"}}>
+                    ☁️ Managed Services
+                </h1>
+                <p
+                    className="mt-4 text-sm font-medium leading-[2rem] transition-theme"
+                    style={{color: "var(--secondary-text)"}}>
+                    Wir übernehmen das Hosting und Management deiner Server, damit du dich auf dein
+                    Business konzentrieren kannst. Egal ob Cloud-Hosting, dedizierte Server oder hybride Lösungen – wir
+                    sorgen für eine sichere, performante und skalierbare Infrastruktur.
+                </p>
+                <ul className="mt-7 space-y-2">
+                    {[
+                        "Web- & Cloud-Hosting",
+                        "Mailserver-Management",
+                        "Webserver-Administration",
+                    ].map((item, index) => (
+                        <li key={index} className="flex items-center font-semibold transition-theme">
+                            <TiChevronRightOutline className="text-blue-500 mr-2"/>
+                            <span style={{color: "var(--primary-text)"}}>{item}</span>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default ManagedServices;