Merge branch 'dev' into 'production'

Merge dev into production

See merge request rheinsw/website!27

components/Home/Offer/FullStack.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import Image from "next/image";
+
+const FullStack = () => {
+    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 transition-theme">
+            <div className="p-0"
+            >
+                <h1 data-aos="fade-up"
+                    className="mt-4 text-xl sm:text-2xl md:text-3xl font-bold"
+                    style={{color: "var(--primary-text)"}} // Dynamic text color
+                >
+                    💻 Full-Stack Entwicklung
+                </h1>
+                <div data-aos="fade-up"
+                     data-aos-delay="200"
+                >
+                    <p
+                        className="mt-4 text-sm font-medium leading-[2rem]"
+                        style={{color: "var(--secondary-text)"}} // Secondary text color
+                    >
+                        Wir entwickeln skalierbare Backends, performante Frontends und native Apps – genau auf deine
+                        Anforderungen zugeschnitten. Dabei setzen wir auf neueste und modernste Technologien, um
+                        flexible
+                        und zukunftssichere Lösungen zu schaffen.
+                    </p>
+                    {/* Technology Logos Section */}
+                    <h2
+                        className="mt-8 text-lg font-semibold"
+                        style={{color: "var(--primary-text)"}}
+                    >
+                        🔧 Tech Stack
+                    </h2>
+                    <span
+                        className="mt-4 text-sm font-medium leading-[2rem]"
+                        style={{color: "var(--secondary-text)"}}
+                    >
+                    Programmiersprachen und Frameworks, die wir für unsere Lösungen einsetzen.
+                </span>
+                    <div className="mt-6 flex flex-wrap items-center gap-8">
+                        {/* Tech Stack Logos */}
+                        {[
+                            {src: "/images/flutter_logo.png", label: "Flutter", width: 30, height: 30},
+                            {src: "/images/dart_logo.png", label: "Dart", width: 40, height: 40},
+                            {src: "/images/java_logo.png", label: "Java", width: 40, height: 40},
+                            {src: "/images/nextjs_logo.png", label: "NextJS", width: 40, height: 40},
+                        ].map(({src, label, width, height}) => (
+                            <div key={label} className="flex flex-col items-center">
+                                <Image src={src} alt={label} width={width} height={height} className="object-contain"/>
+                                <span
+                                    className="text-xs mt-2"
+                                    style={{color: "var(--secondary-text)"}} // Match theme
+                                >
+                                {label}
+                            </span>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+            <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>
+        </div>
+    );
+};
+
+export default FullStack;