Merge branch 'dev' into 'production'
Merge dev into production See merge request rheinsw/website!27
This commit is contained in:
75
components/Home/Offer/FullStack.tsx
Normal file
75
components/Home/Offer/FullStack.tsx
Normal file
@@ -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;
|
||||
57
components/Home/Offer/ManagedServices.tsx
Normal file
57
components/Home/Offer/ManagedServices.tsx
Normal file
@@ -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;
|
||||
28
components/Home/Offer/Offer.tsx
Normal file
28
components/Home/Offer/Offer.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import React from "react";
|
||||
import FullStack from "@/components/Home/Offer/FullStack";
|
||||
import ManagedServices from "@/components/Home/Offer/ManagedServices";
|
||||
|
||||
const Offer = () => {
|
||||
return (
|
||||
<div
|
||||
className="transition-theme"
|
||||
style={{
|
||||
backgroundColor: "var(--primary-bg)", // Using CSS variable
|
||||
color: "var(--primary-text)", // Ensuring text color follows theme
|
||||
transition: "background-color 0.5s ease, color 0.5s ease", // Smooth transition
|
||||
}}>
|
||||
<div className="pt-24 pb-16">
|
||||
<h1 className="mt-6 text-2xl md:text-3xl capitalize font-bold text-center"
|
||||
data-aos="fade-up"
|
||||
style={{color: "var(--primary-text)"}}
|
||||
>
|
||||
Was bieten wir?
|
||||
</h1>
|
||||
<FullStack/>
|
||||
<ManagedServices/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Offer;
|
||||
Reference in New Issue
Block a user