dwd.siliconpin.com/src/app/services/foss-support/page.tsx

306 lines
15 KiB
TypeScript

import { Metadata } from "next";
import Link from "next/link";
import { GitMerge, Code, CheckCircle, ArrowLeft, ArrowRight, BookOpen, ShieldCheck, Wrench } from "lucide-react";
import { Button } from "@/components/ui/button";
export const metadata: Metadata = {
title: "FOSS Support | DWD Consultancy",
description: "Professional support for free and open-source software (FOSS) with customized development and integration services.",
keywords: ["FOSS support", "open source software", "Linux support", "custom development", "software integration", "open source maintenance"],
openGraph: {
title: "FOSS Support | DWD Consultancy",
description: "Professional support for free and open-source software (FOSS) with customized development and integration services.",
url: "https://dwdconsultancy.com/services/foss-support",
images: [
{
url: "/og-image-foss.jpg",
width: 1200,
height: 630,
alt: "DWD Consultancy FOSS Support",
},
],
},
};
export default function FOSSSupportPage() {
const benefits = [
"Enterprise-grade support for open-source technologies",
"Custom feature development for open-source software",
"Integration with existing business systems",
"Regular maintenance and updates",
"Security patches and vulnerability remediation",
"Performance optimization",
"Comprehensive documentation",
"Knowledge transfer and team training",
];
const offerings = [
{
title: "Linux System Support",
description: "Expert support for various Linux distributions and environments.",
icon: ShieldCheck,
},
{
title: "Custom Development",
description: "Tailored development to extend FOSS functionality for your needs.",
icon: Code,
},
{
title: "Integration Services",
description: "Seamless integration of open-source tools with your existing systems.",
icon: GitMerge,
},
{
title: "Documentation & Training",
description: "Comprehensive documentation and staff training for FOSS implementation.",
icon: BookOpen,
},
];
return (
<div className="min-h-screen">
{/* Hero Section */}
<section className="relative pt-32 pb-16 overflow-hidden">
{/* Background Pattern */}
<div className="absolute inset-0 z-0 opacity-20">
<div className="absolute -top-40 -right-40 w-80 h-80 bg-netbirdOrange rounded-full blur-[100px]" />
<div className="absolute bottom-0 right-1/3 w-60 h-60 bg-netbirdOrange/50 rounded-full blur-[100px]" />
</div>
<div className="container mx-auto relative z-10">
<div className="mb-6">
<Link href="/services" className="flex items-center text-white/70 hover:text-netbirdOrange transition-colors">
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Services
</Link>
</div>
<div className="max-w-3xl">
<div className="flex items-center mb-6">
<div className="h-1 w-10 bg-netbirdOrange rounded-full mr-3"></div>
<span className="text-sm text-white/80 uppercase tracking-wider font-medium">
FOSS Support
</span>
</div>
<h1 className="text-4xl md:text-5xl font-bold mb-6 text-white leading-tight">
Professional <span className="gradient-text">Open Source</span> Support
</h1>
<p className="text-xl text-white/80 mb-8 max-w-2xl">
We provide enterprise-grade support for free and open-source software (FOSS),
with custom development capabilities to extend functionality for your specific needs.
</p>
</div>
</div>
</section>
{/* Main Content */}
<section className="py-16 relative">
<div className="container mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
{/* Left Column - Details */}
<div>
<h2 className="text-2xl md:text-3xl font-bold text-white mb-6">
Our FOSS Support Services
</h2>
<p className="text-white/80 mb-8">
Open-source software offers incredible value, flexibility, and freedom from vendor lock-in.
However, organizations often need professional support to implement, customize, and maintain
these solutions effectively. That's where we come in.
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
{offerings.map((offering, index) => (
<div key={index} className="bg-[#0d1324] border border-white/10 p-5 rounded-xl">
<div className="w-10 h-10 bg-[#1c2640] rounded-lg flex items-center justify-center mb-4">
<offering.icon className="h-5 w-5 text-netbirdOrange" />
</div>
<h3 className="text-white font-semibold mb-2">{offering.title}</h3>
<p className="text-white/70 text-sm">{offering.description}</p>
</div>
))}
</div>
<h2 className="text-2xl md:text-3xl font-bold text-white mb-6">
Why Choose Our FOSS Support
</h2>
<p className="text-white/80 mb-6">
Our team consists of experienced developers and system administrators who are deeply
familiar with a wide range of open-source technologies. We take pride in our ability
to provide timely, effective support while respecting the principles of the open-source community.
</p>
<p className="text-white/80 mb-8">
When you work with us, you get the best of both worlds: the freedom and cost-effectiveness
of open-source software, combined with the reliability and peace of mind that comes with
professional enterprise support.
</p>
<div className="bg-[#0d1324] border border-white/10 p-6 rounded-xl mb-10">
<h3 className="text-xl font-semibold text-white mb-4">Benefits of Our FOSS Support</h3>
<p className="text-white/80 mb-6">
With our comprehensive FOSS support services, you'll gain:
</p>
<ul className="space-y-3">
{benefits.map((benefit, index) => (
<li key={index} className="flex items-start">
<CheckCircle className="mr-3 text-netbirdOrange h-5 w-5 mt-1 flex-shrink-0" />
<span className="text-white/80">{benefit}</span>
</li>
))}
</ul>
</div>
<Link href="/contact">
<Button className="bg-netbirdOrange hover:bg-netbirdOrange/90 text-white">
Discuss Your FOSS Requirements
<ArrowRight className="ml-2 h-4 w-4" />
</Button>
</Link>
</div>
{/* Right Column - Visual Elements */}
<div className="relative">
<div className="sticky top-32">
<div className="relative bg-[#0d1324] border border-white/10 rounded-xl p-8 shadow-xl mb-8 overflow-hidden">
{/* Decorative elements */}
<div className="absolute -top-20 -right-20 w-40 h-40 bg-netbirdOrange rounded-full blur-[60px] opacity-20"></div>
<h3 className="text-xl font-semibold text-white mb-6">Case Study: Healthcare Provider</h3>
<p className="text-white/80 mb-6">
A regional healthcare provider needed to implement an open-source electronic health
record (EHR) system with custom features for their specific workflows.
</p>
<div className="mb-6">
<h4 className="text-white font-medium mb-2">The Challenge</h4>
<p className="text-white/70 text-sm mb-4">
The client needed specialized features not available in the standard distribution,
along with reliable ongoing support and security compliance.
</p>
<h4 className="text-white font-medium mb-2">Our Solution</h4>
<p className="text-white/70 text-sm mb-4">
We customized the open-source EHR platform, developed additional modules for their
specific requirements, and implemented a robust support and maintenance program.
</p>
<h4 className="text-white font-medium mb-2">The Results</h4>
<p className="text-white/70 text-sm">
The healthcare provider saved over $1.2 million compared to proprietary solutions,
while gaining a system perfectly tailored to their workflows with ongoing support.
</p>
</div>
<div className="p-4 bg-white/5 border border-white/10 rounded-lg">
<div className="flex items-center">
<div className="mr-4 p-3 bg-[#1c2640] rounded-full">
<Wrench className="h-6 w-6 text-netbirdOrange" />
</div>
<div>
<h4 className="text-white font-medium">Need custom FOSS development?</h4>
<p className="text-white/70 text-sm">
Let's discuss your requirements and how we can help.
</p>
</div>
</div>
</div>
</div>
<div className="bg-[#0d1324] border border-white/10 rounded-xl p-6 shadow-xl">
<h3 className="text-xl font-semibold text-white mb-4">Technologies We Support</h3>
<div className="space-y-4">
<div>
<h4 className="text-white font-medium mb-2">Operating Systems</h4>
<div className="flex flex-wrap gap-2">
<span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">Ubuntu</span>
<span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">Red Hat</span>
<span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">CentOS</span>
<span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">Debian</span>
</div>
</div>
<div>
<h4 className="text-white font-medium mb-2">Databases</h4>
<div className="flex flex-wrap gap-2">
<span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">PostgreSQL</span>
<span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">MySQL</span>
<span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">MongoDB</span>
<span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">MariaDB</span>
</div>
</div>
<div>
<h4 className="text-white font-medium mb-2">Web Technologies</h4>
<div className="flex flex-wrap gap-2">
<span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">Apache</span>
<span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">Nginx</span>
<span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">Node.js</span>
<span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">Django</span>
</div>
</div>
<div>
<h4 className="text-white font-medium mb-2">Containerization</h4>
<div className="flex flex-wrap gap-2">
<span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">Docker</span>
<span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">Kubernetes</span>
<span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">Podman</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Related Services */}
<div className="mt-20">
<h2 className="text-2xl font-bold text-white mb-8">Related Services</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="bg-[#0d1324] border border-white/10 p-6 rounded-xl">
<h3 className="text-white font-semibold mb-3">Hardware Solutions</h3>
<p className="text-white/70 text-sm mb-4">
Ready-to-use hardware with preset software and full freedom of ownership.
</p>
<Link href="/services/hardware-solutions">
<Button variant="ghost" className="group px-0 text-white hover:text-netbirdOrange">
Learn more
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
</Button>
</Link>
</div>
<div className="bg-[#0d1324] border border-white/10 p-6 rounded-xl">
<h3 className="text-white font-semibold mb-3">Data Services</h3>
<p className="text-white/70 text-sm mb-4">
Comprehensive data archival, migration, and recovery services to keep your information safe.
</p>
<Link href="/services/data-services">
<Button variant="ghost" className="group px-0 text-white hover:text-netbirdOrange">
Learn more
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
</Button>
</Link>
</div>
<div className="bg-[#0d1324] border border-white/10 p-6 rounded-xl">
<h3 className="text-white font-semibold mb-3">Custom Development</h3>
<p className="text-white/70 text-sm mb-4">
Tailored software solutions designed to meet your organization's specific needs.
</p>
<Link href="/services/custom-development">
<Button variant="ghost" className="group px-0 text-white hover:text-netbirdOrange">
Learn more
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
</Button>
</Link>
</div>
</div>
</div>
</div>
</section>
</div>
);
}