76 lines
3.4 KiB
TypeScript
76 lines
3.4 KiB
TypeScript
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;
|