initial commit
This commit is contained in:
Kar k1
202
app/services/page.tsx
Normal file
202
app/services/page.tsx
Normal file
@@ -0,0 +1,202 @@
|
||||
import { Header } from '@/components/header'
|
||||
import { Footer } from '@/components/footer'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { CustomSolutionCTA } from '@/components/ui/custom-solution-cta'
|
||||
import {
|
||||
Server,
|
||||
Database,
|
||||
Mail,
|
||||
Shield,
|
||||
Container,
|
||||
Cog,
|
||||
ArrowRight,
|
||||
Check,
|
||||
Users,
|
||||
Cloud,
|
||||
} from 'lucide-react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default function ServicesPage() {
|
||||
// Simulating database fetch - in production this would be from API/database
|
||||
const services = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Cloud Instance',
|
||||
description: 'High-performance cloud servers with instant deployment and scalable resources',
|
||||
price: 'Starting at ₹200/day',
|
||||
imageUrl: '/assets/images/services/cloud-instance.jpg',
|
||||
features: ['Instant Deployment', 'Auto Scaling', 'Load Balancing', '99.99% Uptime SLA'],
|
||||
learnMoreUrl: '/services/cloud-instance',
|
||||
buyButtonUrl: '/services/cloud-instance',
|
||||
buyButtonText: 'Deploy Now',
|
||||
popular: false,
|
||||
icon: Cloud,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Kubernetes',
|
||||
description: 'Managed Kubernetes clusters with auto-scaling and enterprise-grade security',
|
||||
price: 'Starting at ₹4000/month',
|
||||
imageUrl: '/assets/images/services/kubernetes-edge.png',
|
||||
features: ['Auto-scaling', 'Load Balancing', 'CI/CD Ready', 'Built-in Monitoring'],
|
||||
learnMoreUrl: '/services/kubernetes',
|
||||
buyButtonUrl: '/services/kubernetes',
|
||||
buyButtonText: 'Create Cluster',
|
||||
popular: true,
|
||||
icon: Container,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Hosting Control Panel',
|
||||
description: 'Professional web hosting with cPanel, Plesk, or DirectAdmin',
|
||||
price: 'Starting at ₹500/month',
|
||||
imageUrl: '/assets/images/services/hosting-cp.jpg',
|
||||
features: ['cPanel/Plesk/DirectAdmin', 'One-Click Apps', 'SSL Certificates', 'Daily Backups'],
|
||||
learnMoreUrl: '/services/hosting-control-panel',
|
||||
buyButtonUrl: '/services/hosting-control-panel',
|
||||
buyButtonText: 'Get Started',
|
||||
popular: false,
|
||||
icon: Cog,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'VPN Services',
|
||||
description: 'Secure WireGuard VPN with QR code setup and multiple locations',
|
||||
price: 'Starting at ₹300/month',
|
||||
imageUrl: '/assets/images/services/wiregurd-thumb.jpg',
|
||||
features: ['WireGuard Protocol', 'QR Code Setup', 'Multiple Locations', 'No Logs Policy'],
|
||||
learnMoreUrl: '/services/vpn',
|
||||
buyButtonUrl: '/services/vpn',
|
||||
buyButtonText: 'Setup VPN',
|
||||
popular: false,
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Human Developer',
|
||||
description: 'Skilled developers for your custom projects and requirements',
|
||||
price: 'Custom Quote',
|
||||
imageUrl: '/assets/images/services/human-developer.jpg',
|
||||
features: ['Expert Developers', 'Custom Solutions', 'Project Management', '24/7 Support'],
|
||||
learnMoreUrl: '/services/human-developer',
|
||||
buyButtonUrl: '/services/human-developer',
|
||||
buyButtonText: 'Hire Developer',
|
||||
popular: false,
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'VPS Hosting',
|
||||
description: 'Virtual private servers with full root access and dedicated resources',
|
||||
price: 'Starting at ₹800/month',
|
||||
imageUrl: '/assets/images/services/vps_thumb.jpg',
|
||||
features: ['Full Root Access', 'SSD Storage', 'Multiple OS Options', 'IPv6 Support'],
|
||||
learnMoreUrl: '/services/vps',
|
||||
buyButtonUrl: '/services/vps',
|
||||
buyButtonText: 'Order VPS',
|
||||
popular: false,
|
||||
icon: Server,
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Header />
|
||||
<div className="container mx-auto px-4 pt-24 pb-16">
|
||||
{/* Page Header */}
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold mb-4">Our Premium Services</h1>
|
||||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||
Tailored solutions to accelerate your business growth
|
||||
</p>
|
||||
<div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto mt-6"></div>
|
||||
</div>
|
||||
|
||||
{/* Services Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{services.map((service) => {
|
||||
const Icon = service.icon
|
||||
return (
|
||||
<Card
|
||||
key={service.id}
|
||||
className={`relative overflow-hidden hover:shadow-lg transition-shadow ${service.popular ? 'ring-2 ring-primary' : ''}`}
|
||||
>
|
||||
{/* Most Popular Badge */}
|
||||
{service.popular && (
|
||||
<div className="absolute top-4 right-4 z-10">
|
||||
<span className="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-3 py-1 rounded-full text-xs font-semibold">
|
||||
Most Popular
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Service Thumbnail */}
|
||||
<div className="h-48 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 flex items-center justify-center">
|
||||
{service.imageUrl ? (
|
||||
<div className="relative w-full h-full">
|
||||
{/* Using div with background for now since images aren't available */}
|
||||
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-800 dark:to-gray-900">
|
||||
<Icon className="w-16 h-16 text-primary opacity-20" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Icon className="w-16 h-16 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Service Content */}
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-xl mb-2">{service.title}</CardTitle>
|
||||
<div className="text-lg font-semibold text-primary mb-2">{service.price}</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground text-center">{service.description}</p>
|
||||
|
||||
{/* Features List */}
|
||||
<ul className="space-y-2">
|
||||
{service.features.map((feature, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2">
|
||||
<Check className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-sm text-muted-foreground">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-3 pt-4">
|
||||
{service.learnMoreUrl && (
|
||||
<Link href={service.learnMoreUrl} className="flex-1">
|
||||
<Button variant="outline" className="w-full">
|
||||
Learn More
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
{service.buyButtonUrl && service.buyButtonText && (
|
||||
<Link href={service.buyButtonUrl} className="flex-1">
|
||||
<Button className="w-full">
|
||||
{service.buyButtonText}
|
||||
<ArrowRight className="w-4 h-4 ml-1" />
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Additional Services Note */}
|
||||
<CustomSolutionCTA
|
||||
description="We offer tailored solutions for enterprise clients with specific requirements"
|
||||
buttonText="Contact Sales"
|
||||
buttonHref="/contact"
|
||||
/>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user