169 lines
7.8 KiB
JavaScript
169 lines
7.8 KiB
JavaScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { FadeIn, SlideInLeft, SlideInRight, ScaleIn, StaggerContainer, StaggerItem, HoverScale, PageTransition } from "@/components/Motion";
|
|
|
|
export default function Services() {
|
|
// Service categories data from info.txt
|
|
const serviceCategories = [
|
|
{
|
|
title: "Web Hosting & CMS Solutions",
|
|
description: "Professional hosting and content management system implementations",
|
|
services: [
|
|
"WordPress - Industry-leading CMS for blogs and business websites",
|
|
"Joomla - Flexible CMS for complex content structures",
|
|
"Drupal - Enterprise-grade CMS for large organizations",
|
|
"Moodle - Specialized learning management system",
|
|
"Custom hosting solutions with expert support"
|
|
],
|
|
technologies: "WordPress • Joomla • Drupal • Moodle",
|
|
image: "/images/webhosting2.jpg"
|
|
},
|
|
{
|
|
title: "Custom Web Development",
|
|
description: "Modern web applications built with cutting-edge frameworks",
|
|
services: [
|
|
"Laravel - PHP framework for robust web applications",
|
|
".NET - Enterprise solutions with Microsoft technology",
|
|
"Node.js/Express - Fast and scalable JavaScript backend",
|
|
"Next.js & React - Modern frontend development",
|
|
"Django & Flask - Python-based web solutions"
|
|
],
|
|
technologies: "Laravel • .NET • Node.js • Next.js • Django • Flask",
|
|
image: "/images/customsystems.jpg"
|
|
},
|
|
{
|
|
title: "Mobile App Development",
|
|
description: "Cross-platform and native mobile applications",
|
|
services: [
|
|
"React Native - Cross-platform apps with native performance",
|
|
"Flutter - Beautiful and fast mobile applications",
|
|
"Native iOS and Android development",
|
|
"Progressive Web Apps (PWA)",
|
|
"Mobile app maintenance and updates"
|
|
],
|
|
technologies: "React Native • Flutter • iOS • Android • PWA",
|
|
image: "/images/mobiledev.jpg"
|
|
},
|
|
{
|
|
title: "Managed VPS Services",
|
|
description: "Professional server management and hosting solutions",
|
|
services: [
|
|
"Linux VPS - Ubuntu, CentOS, and Debian servers",
|
|
"Windows Server VPS - Professional Windows hosting",
|
|
"Forex VPS - Low-latency trading solutions",
|
|
"Cloud VPS - Scalable cloud hosting",
|
|
"Managed security and backups"
|
|
],
|
|
technologies: "Linux • Windows Server • Cloud • DevOps",
|
|
image: "/images/forex1.jpg"
|
|
}
|
|
];
|
|
|
|
return (
|
|
<PageTransition>
|
|
<div className="flex flex-col w-full">
|
|
{/* Hero Section */}
|
|
<FadeIn>
|
|
<section className="relative bg-gray-900 text-white py-16 md:py-24">
|
|
<div className="absolute inset-0 z-0 opacity-30">
|
|
<Image
|
|
src="/images/website.jpg"
|
|
alt="IT Services Background"
|
|
fill
|
|
style={{objectFit: 'cover'}}
|
|
priority
|
|
/>
|
|
</div>
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
<div className="max-w-3xl">
|
|
<SlideInLeft delay={0.2}>
|
|
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">Our Services</h1>
|
|
</SlideInLeft>
|
|
<SlideInLeft delay={0.4}>
|
|
<p className="text-lg md:text-xl mb-8">Comprehensive IT solutions tailored to your business needs</p>
|
|
</SlideInLeft>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</FadeIn>
|
|
|
|
{/* Services Categories */}
|
|
<FadeIn delay={0.3}>
|
|
<section className="py-16 bg-white dark:bg-gray-900">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">What We Offer</h2>
|
|
<p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">Explore our range of professional IT services</p>
|
|
</div>
|
|
|
|
<div className="space-y-16">
|
|
{serviceCategories.map((category, index) => (
|
|
<FadeIn key={index} delay={0.2 * index}>
|
|
<div className={`flex flex-col ${index % 2 === 1 ? 'md:flex-row-reverse' : 'md:flex-row'} gap-8 items-center`}>
|
|
<div className="w-full md:w-1/2 h-64 md:h-96 relative rounded-lg overflow-hidden shadow-lg">
|
|
<Image
|
|
src={category.image}
|
|
alt={category.title}
|
|
fill
|
|
style={{objectFit: 'cover'}}
|
|
/>
|
|
</div>
|
|
<div className="w-full md:w-1/2 space-y-4">
|
|
<SlideInLeft delay={0.3 + (0.1 * index)}>
|
|
<h3 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">{category.title}</h3>
|
|
<p className="text-lg text-gray-600 dark:text-gray-300">{category.description}</p>
|
|
</SlideInLeft>
|
|
|
|
<ScaleIn delay={0.4 + (0.1 * index)}>
|
|
<div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-md">
|
|
<h4 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Services Include:</h4>
|
|
<StaggerContainer>
|
|
<ul className="space-y-2">
|
|
{category.services.map((service, i) => (
|
|
<StaggerItem key={i}>
|
|
<li className="flex items-start">
|
|
<svg className="h-6 w-6 text-blue-600 dark:text-blue-400 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
<span className="text-gray-700 dark:text-gray-300">{service}</span>
|
|
</li>
|
|
</StaggerItem>
|
|
))}
|
|
</ul>
|
|
</StaggerContainer>
|
|
</div>
|
|
</ScaleIn>
|
|
|
|
<SlideInLeft delay={0.5 + (0.1 * index)}>
|
|
<div className="pt-4">
|
|
<p className="text-sm font-medium text-gray-500 dark:text-gray-400">Technologies:</p>
|
|
<p className="text-gray-700 dark:text-gray-300">{category.technologies}</p>
|
|
</div>
|
|
</SlideInLeft>
|
|
</div>
|
|
</div>
|
|
</FadeIn>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</FadeIn>
|
|
|
|
{/* Call to Action */}
|
|
<FadeIn delay={0.5}>
|
|
<section className="py-16 bg-blue-600 text-white">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-6">Ready to Get Started?</h2>
|
|
<p className="text-xl mb-8 max-w-2xl mx-auto">Contact us today to discuss your project requirements</p>
|
|
<HoverScale>
|
|
<Link href="/contact" className="bg-white text-blue-600 hover:bg-gray-100 font-semibold py-3 px-8 rounded-md transition duration-300 inline-block">
|
|
Contact Us
|
|
</Link>
|
|
</HoverScale>
|
|
</div>
|
|
</section>
|
|
</FadeIn>
|
|
</div>
|
|
</PageTransition>
|
|
);
|
|
} |