WorkRoot/CompanySite
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First Init
Deploy to Production / Build & Verify (push) Failing after 5m56s
Details
Ping Search Engines / Notify Search Engines (push) Successful in 2s
Details
Deploy to Production / Pre-Deploy Tests (push) Has been skipped
Details
Deploy to Production / Deploy to Railway (push) Has been skipped
Details
Deploy to Production / Deploy to Render (push) Has been skipped
Details
Deploy to Production / Deploy to VPS (PM2) (push) Has been skipped
Details
Deploy to Production / Deploy to Fly.io (push) Has been skipped
Details
Deploy to Production / Post-Deploy Verification (push) Has been skipped
Details
Deploy to Production / Notify on Failure (push) Successful in 2s
Details
E2E Test Suite / Critical User Journeys (push) Has been skipped
Details
E2E Test Suite / API Integration Tests (push) Has been skipped
Details
E2E Test Suite / Smoke Tests (P0) (push) Failing after 11m26s
Details
E2E Test Suite / Form Interaction Tests (push) Failing after 11m42s
Details
E2E Test Suite / Destructive & Chaos Tests (push) Failing after 12m2s
Details
E2E Test Suite / Cross-Browser Regression (chromium) (push) Failing after 16m14s
Details
E2E Test Suite / Cross-Browser Regression (webkit) (push) Failing after 17m45s
Details
E2E Test Suite / Cross-Browser Regression (firefox) (push) Failing after 25m23s
Details
E2E Test Suite / Security Header Tests (push) Failing after 7m55s
Details
E2E Test Suite / Test Report Summary (push) Failing after 20s
Details
E2E Test Suite / Mobile Device Tests (push) Failing after 2h49m9s
Details
Uptime Monitor / Health & Response Time (push) Failing after 2s
Details
Uptime Monitor / SSL Certificate (push) Successful in 2s
Details
Uptime Monitor / Send Alerts (push) Failing after 3s
Details
Uptime Monitor / Record Uptime Success (push) Has been skipped
Details

Browse Source
This commit is contained in:
Clintchiz
2026-03-21 16:46:46 +05:30
commit d402256547
216 changed files with 48375 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/services.astro
+949
View File
@@ -0,0 +1,949 @@
---
// Services Page for WorkRoot IT Solutions
// Enhanced: Service cards with tech stack, pricing tiers, case study highlights, scroll animations
import BaseLayout from '../layouts/BaseLayout.astro';
import SEO from '../components/SEO.astro';
// Service data with extended details
const services = [
{
id: 'web-development',
title: 'Web Development',
shortDescription: 'Custom web applications built with modern frameworks for performance and scalability.',
fullDescription: 'From responsive websites to complex web applications, we deliver solutions that drive results. Our team specializes in React, Next.js, and Node.js to build fast, secure, and maintainable web experiences that convert visitors into customers.',
icon: 'web',
features: [
'Custom web application development',
'E-commerce solutions',
'Progressive Web Apps (PWA)',
'API development & integration',
'Performance optimization',
'SEO-friendly architecture',
],
techStack: ['React', 'Next.js', 'Node.js', 'TypeScript', 'PostgreSQL'],
stats: { projects: '80+', clients: '50+', uptime: '99.9%' },
gradient: 'from-primary-500 to-primary-700',
bgLight: 'bg-primary-50',
iconColor: 'text-primary-500',
accentBorder: 'border-primary-500',
tagBg: 'bg-primary-100 text-primary-700',
},
{
id: 'mobile-development',
title: 'Mobile Development',
shortDescription: 'Native and cross-platform mobile apps that deliver exceptional user experiences.',
fullDescription: 'We create mobile applications that users love. Whether you need iOS, Android, or cross-platform solutions, our developers use React Native and Flutter to build apps that perform flawlessly across all devices and screen sizes.',
icon: 'mobile',
features: [
'iOS & Android native apps',
'Cross-platform development',
'UI/UX design for mobile',
'App Store optimization',
'Push notifications & analytics',
'Offline-first architecture',
],
techStack: ['React Native', 'Flutter', 'Swift', 'Kotlin', 'Firebase'],
stats: { projects: '40+', clients: '30+', rating: '4.8★' },
gradient: 'from-accent-500 to-accent-700',
bgLight: 'bg-accent-50',
iconColor: 'text-accent-500',
accentBorder: 'border-accent-500',
tagBg: 'bg-amber-100 text-amber-700',
},
{
id: 'ai-ml',
title: 'AI & Machine Learning',
shortDescription: 'Intelligent solutions powered by cutting-edge artificial intelligence technologies.',
fullDescription: 'Harness the power of AI to transform your business. From predictive analytics to natural language processing, we implement machine learning solutions that provide actionable insights and automate complex processes at scale.',
icon: 'ai',
features: [
'Predictive analytics',
'Natural Language Processing',
'Computer vision solutions',
'Recommendation engines',
'Chatbots & virtual assistants',
'ML model deployment & monitoring',
],
techStack: ['Python', 'TensorFlow', 'PyTorch', 'OpenAI API', 'LangChain'],
stats: { models: '25+', accuracy: '94%', savings: '60%' },
gradient: 'from-emerald-500 to-emerald-700',
bgLight: 'bg-emerald-50',
iconColor: 'text-emerald-600',
accentBorder: 'border-emerald-500',
tagBg: 'bg-emerald-100 text-emerald-700',
},
{
id: 'cloud-services',
title: 'Cloud Services',
shortDescription: 'Scalable cloud infrastructure and DevOps solutions for modern businesses.',
fullDescription: 'Migrate, scale, and optimize with confidence. Our cloud experts help you leverage AWS, Azure, and Google Cloud to build resilient, cost-effective infrastructure that grows with your business and adapts to any load.',
icon: 'cloud',
features: [
'Cloud migration & strategy',
'Infrastructure as Code (IaC)',
'Kubernetes & container orchestration',
'CI/CD pipeline setup',
'Cloud security & compliance',
'24/7 monitoring & support',
],
techStack: ['AWS', 'Azure', 'GCP', 'Kubernetes', 'Terraform'],
stats: { migrations: '35+', savings: '40%', uptime: '99.99%' },
gradient: 'from-secondary-600 to-secondary-800',
bgLight: 'bg-secondary-50',
iconColor: 'text-secondary-600',
accentBorder: 'border-secondary-500',
tagBg: 'bg-slate-100 text-slate-700',
},
];
// Pricing tiers
const pricingTiers = [
{
name: 'Starter',
price: '$2,500',
period: 'per project',
description: 'Perfect for startups and small businesses launching their digital presence.',
features: [
'Up to 5 pages / screens',
'Responsive design',
'Basic SEO setup',
'Contact form integration',
'1 month post-launch support',
'Source code handoff',
],
cta: 'Get Started',
highlighted: false,
},
{
name: 'Growth',
price: '$8,500',
period: 'per project',
description: 'For businesses ready to scale with advanced features and integrations.',
features: [
'Unlimited pages / screens',
'Custom UI/UX design',
'API & third-party integrations',
'Performance optimization',
'3 months post-launch support',
'Analytics dashboard',
'Priority support',
],
cta: 'Most Popular',
highlighted: true,
},
{
name: 'Enterprise',
price: 'Custom',
period: 'tailored quote',
description: 'Full-scale solutions for complex, high-traffic enterprise applications.',
features: [
'End-to-end architecture',
'Dedicated development team',
'SLA-backed uptime',
'Security audits & compliance',
'12 months support & maintenance',
'Training & documentation',
'White-glove onboarding',
],
cta: 'Contact Sales',
highlighted: false,
},
];
// Case study highlights
const caseStudies = [
{
service: 'Web Development',
client: 'FinTech Platform',
result: '3x faster load times, 45% increase in conversion rate',
description: 'Rebuilt a legacy banking dashboard with Next.js and real-time WebSocket updates, cutting page load from 8s to under 2s.',
metric: '+45%',
metricLabel: 'Conversion Rate',
tag: 'Web',
tagColor: 'bg-primary-100 text-primary-700',
icon: 'web',
gradient: 'from-primary-500/10 to-primary-600/5',
borderColor: 'border-primary-200',
},
{
service: 'Mobile Development',
client: 'Retail App',
result: '200K+ downloads in first month, 4.9★ App Store rating',
description: 'Built a cross-platform shopping app with AR try-on features using React Native, launching simultaneously on iOS and Android.',
metric: '200K+',
metricLabel: 'Downloads',
tag: 'Mobile',
tagColor: 'bg-accent-100 text-accent-700',
icon: 'mobile',
gradient: 'from-accent-500/10 to-accent-600/5',
borderColor: 'border-accent-200',
},
{
service: 'AI & ML',
client: 'Healthcare Provider',
result: '60% reduction in manual processing, 94% diagnostic accuracy',
description: 'Deployed a computer vision model for medical imaging analysis, reducing radiologist review time and improving early detection rates.',
metric: '60%',
metricLabel: 'Time Saved',
tag: 'AI/ML',
tagColor: 'bg-emerald-100 text-emerald-700',
icon: 'ai',
gradient: 'from-emerald-500/10 to-emerald-600/5',
borderColor: 'border-emerald-200',
},
];
// Process steps
const processSteps = [
{
number: '01',
title: 'Discovery',
description: 'We analyze your requirements, goals, and challenges to define the project scope.',
icon: 'search',
},
{
number: '02',
title: 'Strategy',
description: 'Our team develops a comprehensive roadmap tailored to your business objectives.',
icon: 'map',
},
{
number: '03',
title: 'Development',
description: 'We build your solution using agile methodologies with regular progress updates.',
icon: 'code',
},
{
number: '04',
title: 'Launch & Support',
description: 'We deploy, monitor, and continuously improve your solution post-launch.',
icon: 'rocket',
},
];
---
<BaseLayout
title="IT Services & Solutions"
description="Expert web development, mobile apps, AI/ML solutions & cloud services from WorkRoot IT Solutions. 100+ projects delivered, 50+ happy clients. From $2,500 — get a free quote today."
>
<SEO
slot="head"
type="Service"
breadcrumbs={[
{ name: 'Home', url: '/' },
{ name: 'Services', url: '/services' }
]}
service={{
name: 'IT Solutions & Software Development',
description: 'Full-stack software development services including web development, mobile apps, AI & machine learning, and cloud infrastructure. Serving startups and enterprises worldwide.'
}}
faq={[
{
question: 'What IT services does WorkRoot offer?',
answer: 'WorkRoot offers four core services: Web Development (React, Next.js, Node.js), Mobile App Development (iOS, Android, React Native, Flutter), AI & Machine Learning (Python, TensorFlow, LangChain), and Cloud Services (AWS, Azure, GCP, Kubernetes).'
},
{
question: 'How much does a web development project cost?',
answer: 'Our pricing starts at $2,500 for Starter projects (up to 5 pages), $8,500 for Growth projects with custom features and integrations, and custom quotes for Enterprise solutions. Contact us for a free estimate tailored to your requirements.'
},
{
question: 'How long does software development take?',
answer: 'Project timelines depend on scope. A simple website takes 4–6 weeks, a complex web app 3–6 months, and an enterprise solution can take 6–12 months. We provide detailed timelines during the discovery phase.'
},
{
question: 'Do you offer post-launch support and maintenance?',
answer: 'Yes. All packages include post-launch support: 1 month for Starter, 3 months for Growth, and 12 months for Enterprise. We also offer ongoing SLA-backed maintenance retainers for continued peace of mind.'
},
{
question: 'Can WorkRoot build AI-powered features into my application?',
answer: 'Absolutely. Our AI/ML team integrates natural language processing, computer vision, recommendation engines, and predictive analytics into web and mobile products. We have delivered 25+ AI models with 94% average accuracy.'
}
]}
/>
<!-- Hero Section -->
<section class="relative bg-gradient-to-br from-secondary-900 via-secondary-800 to-secondary-900 py-24 lg:py-32 overflow-hidden">
<div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
<div class="absolute top-1/4 left-0 w-80 h-80 bg-primary-500/10 rounded-full blur-3xl animate-pulse-slower"></div>
<div class="absolute bottom-0 right-1/4 w-96 h-96 bg-accent-500/8 rounded-full blur-3xl animate-pulse-slow"></div>
<div class="absolute top-0 right-0 w-64 h-64 bg-emerald-500/8 rounded-full blur-3xl"></div>
<!-- Grid pattern overlay -->
<div class="absolute inset-0 opacity-5" style="background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 60px 60px;"></div>
</div>
<div class="container-wrapper relative">
<div class="max-w-3xl mx-auto text-center reveal-on-scroll">
<span class="inline-flex items-center gap-2 px-4 py-1.5 mb-6 text-sm font-semibold text-primary-300 bg-primary-500/10 rounded-full border border-primary-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-primary-400 animate-pulse"></span>
Our Services
</span>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
Solutions That
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 via-primary-300 to-accent-400">
Power Growth
</span>
</h1>
<p class="text-lg sm:text-xl text-secondary-300 max-w-2xl mx-auto mb-10 leading-relaxed">
From concept to deployment, we deliver end-to-end technology solutions that transform businesses and drive measurable results.
</p>
<!-- Quick service nav pills -->
<div class="flex flex-wrap gap-2 justify-center">
{services.map((service) => (
<a
href={`#${service.id}`}
class="px-4 py-1.5 text-sm font-medium text-white/70 hover:text-white bg-white/5 hover:bg-white/10 rounded-full border border-white/10 hover:border-white/20 transition-all duration-200"
>
{service.title}
</a>
))}
</div>
</div>
<!-- Floating stats bar -->
<div class="mt-16 grid grid-cols-2 sm:grid-cols-4 gap-4 lg:gap-6 reveal-on-scroll reveal-delay-2">
{[
{ value: '100+', label: 'Projects Delivered' },
{ value: '50+', label: 'Happy Clients' },
{ value: '4', label: 'Core Services' },
{ value: '5★', label: 'Average Rating' },
].map((stat) => (
<div class="bg-white/5 backdrop-blur-sm rounded-xl p-4 lg:p-5 text-center border border-white/10">
<p class="text-2xl lg:text-3xl font-bold text-white">{stat.value}</p>
<p class="text-secondary-400 text-sm mt-1">{stat.label}</p>
</div>
))}
</div>
</div>
</section>
<!-- Services Cards Section -->
<section class="py-16 lg:py-24 bg-white">
<div class="container-wrapper">
<div class="text-center max-w-2xl mx-auto mb-12 lg:mb-16 reveal-on-scroll">
<span class="text-primary-500 font-semibold text-sm uppercase tracking-wider">What We Offer</span>
<h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 mt-2 mb-4">Our Core Services</h2>
<p class="text-secondary-600 text-lg">
Comprehensive technology solutions designed to accelerate your digital transformation journey.
</p>
</div>
<div class="grid sm:grid-cols-2 gap-6 lg:gap-8">
{services.map((service, idx) => (
<a
href={`#${service.id}`}
class={`service-card group relative bg-white rounded-2xl p-8 shadow-sm border border-secondary-100 hover:shadow-2xl hover:border-transparent hover:-translate-y-2 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 reveal-on-scroll reveal-delay-${idx + 1}`}
aria-label={`Learn more about ${service.title}`}
>
<!-- Hover gradient overlay -->
<div class={`absolute inset-0 bg-gradient-to-br ${service.gradient} rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300`} aria-hidden="true"></div>
<!-- Top border accent -->
<div class={`absolute top-0 left-8 right-8 h-0.5 bg-gradient-to-r ${service.gradient} rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300`} aria-hidden="true"></div>
<div class="relative">
<!-- Icon + stats row -->
<div class="flex items-start justify-between mb-6">
<div class={`w-14 h-14 ${service.bgLight} ${service.iconColor} rounded-xl flex items-center justify-center group-hover:bg-white/20 group-hover:text-white transition-all duration-300 flex-shrink-0`}>
{service.icon === 'web' && (
<svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
</svg>
)}
{service.icon === 'mobile' && (
<svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
)}
{service.icon === 'ai' && (
<svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
)}
{service.icon === 'cloud' && (
<svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
</svg>
)}
</div>
<!-- Mini stats -->
<div class="text-right">
{Object.entries(service.stats).slice(0, 1).map(([key, val]) => (
<div>
<p class="text-xl font-bold text-secondary-900 group-hover:text-white transition-colors duration-300">{val}</p>
<p class="text-xs text-secondary-500 group-hover:text-white/70 transition-colors duration-300 capitalize">{key.replace(/([A-Z])/g, ' $1').trim()}</p>
</div>
))}
</div>
</div>
<!-- Content -->
<h3 class="text-xl font-bold text-secondary-900 group-hover:text-white mb-2 transition-colors duration-300">
{service.title}
</h3>
<p class="text-secondary-600 group-hover:text-white/80 mb-5 transition-colors duration-300 text-sm leading-relaxed">
{service.shortDescription}
</p>
<!-- Tech stack tags -->
<div class="flex flex-wrap gap-1.5 mb-5">
{service.techStack.map((tech) => (
<span class={`px-2.5 py-1 text-xs font-medium ${service.tagBg} group-hover:bg-white/20 group-hover:text-white rounded-md transition-colors duration-300`}>
{tech}
</span>
))}
</div>
<!-- Learn more link -->
<span class="inline-flex items-center text-primary-500 group-hover:text-white font-semibold text-sm transition-colors duration-300">
Explore Service
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-1.5 group-hover:translate-x-1.5 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</span>
</div>
</a>
))}
</div>
</div>
</section>
<!-- Service Details Sections -->
{services.map((service, index) => (
<section
id={service.id}
class={`py-16 lg:py-24 ${index % 2 === 0 ? 'bg-secondary-50' : 'bg-white'}`}
>
<div class="container-wrapper">
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
<!-- Content column -->
<div class={`reveal-on-scroll ${index % 2 === 1 ? 'lg:order-2' : ''}`}>
<div class={`inline-flex items-center gap-2 px-4 py-2 ${service.bgLight} ${service.iconColor} rounded-full text-sm font-semibold mb-4`}>
{service.icon === 'web' && (
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
</svg>
)}
{service.icon === 'mobile' && (
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
)}
{service.icon === 'ai' && (
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
)}
{service.icon === 'cloud' && (
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
</svg>
)}
{service.title}
</div>
<h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 mb-4">
{service.title}
</h2>
<p class="text-secondary-600 text-lg leading-relaxed mb-6">
{service.fullDescription}
</p>
<!-- Service stats row -->
<div class="flex flex-wrap gap-4 mb-8">
{Object.entries(service.stats).map(([key, val]) => (
<div class={`flex flex-col px-4 py-3 ${service.bgLight} rounded-lg`}>
<span class={`text-xl font-bold ${service.iconColor}`}>{val}</span>
<span class="text-secondary-500 text-xs capitalize">{key.replace(/([A-Z])/g, ' $1').trim()}</span>
</div>
))}
</div>
<!-- Features list -->
<ul class="space-y-2.5 mb-8">
{service.features.map((feature) => (
<li class="flex items-start gap-3">
<span class={`w-5 h-5 ${service.iconColor} mt-0.5 flex-shrink-0`} aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</span>
<span class="text-secondary-700">{feature}</span>
</li>
))}
</ul>
<!-- Tech stack -->
<div class="mb-8">
<p class="text-xs font-semibold text-secondary-400 uppercase tracking-wider mb-2">Technologies</p>
<div class="flex flex-wrap gap-2">
{service.techStack.map((tech) => (
<span class={`px-3 py-1 text-sm font-medium ${service.tagBg} rounded-md`}>{tech}</span>
))}
</div>
</div>
<a
href="/contact"
class={`inline-flex items-center justify-center px-7 py-3.5 bg-gradient-to-r ${service.gradient} text-white font-semibold rounded-lg hover:shadow-lg hover:opacity-95 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2`}
>
Get Started
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</div>
<!-- Visual element -->
<div class={`relative reveal-on-scroll reveal-delay-2 ${index % 2 === 1 ? 'lg:order-1' : ''}`}>
<div class={`aspect-square rounded-2xl bg-gradient-to-br ${service.gradient} p-8 lg:p-12 flex items-center justify-center`}>
<div class="relative w-full h-full bg-white/10 rounded-xl backdrop-blur-sm p-6 lg:p-8">
<!-- Window chrome decoration -->
<div class="absolute top-4 left-4 flex gap-1.5" aria-hidden="true">
<div class="w-3 h-3 rounded-full bg-red-400/60"></div>
<div class="w-3 h-3 rounded-full bg-yellow-400/60"></div>
<div class="w-3 h-3 rounded-full bg-green-400/60"></div>
</div>
<!-- Service-specific visual illustration -->
<div class="h-full flex flex-col justify-center items-center text-white pt-6">
{service.icon === 'web' && (
<div class="w-full space-y-3">
<div class="h-3 bg-white/30 rounded-full w-3/4 mx-auto"></div>
<div class="h-3 bg-white/20 rounded-full w-full"></div>
<div class="h-3 bg-white/20 rounded-full w-5/6 mx-auto"></div>
<div class="mt-4 grid grid-cols-3 gap-2">
<div class="h-16 bg-white/20 rounded-lg"></div>
<div class="h-16 bg-white/20 rounded-lg"></div>
<div class="h-16 bg-white/20 rounded-lg"></div>
</div>
<div class="h-2 bg-white/15 rounded-full w-1/2 mx-auto mt-2"></div>
</div>
)}
{service.icon === 'mobile' && (
<div class="flex gap-4 items-end justify-center w-full">
<div class="w-20 h-36 bg-white/20 rounded-2xl border-2 border-white/30 flex flex-col items-center pt-3 gap-2">
<div class="w-6 h-1 bg-white/40 rounded-full"></div>
<div class="w-12 h-2 bg-white/25 rounded-full"></div>
<div class="w-10 h-2 bg-white/20 rounded-full"></div>
<div class="w-12 h-8 bg-white/15 rounded-lg mt-1"></div>
</div>
<div class="w-24 h-44 bg-white/25 rounded-2xl border-2 border-white/40 flex flex-col items-center pt-3 gap-2">
<div class="w-8 h-1 bg-white/50 rounded-full"></div>
<div class="w-16 h-2 bg-white/30 rounded-full"></div>
<div class="w-14 h-2 bg-white/25 rounded-full"></div>
<div class="w-16 h-10 bg-white/20 rounded-lg mt-1"></div>
<div class="w-12 h-2 bg-white/20 rounded-full"></div>
</div>
<div class="w-20 h-36 bg-white/20 rounded-2xl border-2 border-white/30 flex flex-col items-center pt-3 gap-2">
<div class="w-6 h-1 bg-white/40 rounded-full"></div>
<div class="w-12 h-2 bg-white/25 rounded-full"></div>
<div class="w-10 h-2 bg-white/20 rounded-full"></div>
<div class="w-12 h-8 bg-white/15 rounded-lg mt-1"></div>
</div>
</div>
)}
{service.icon === 'ai' && (
<div class="w-full space-y-3 px-2">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-full bg-white/30 flex-shrink-0"></div>
<div class="flex-1 h-8 bg-white/20 rounded-lg"></div>
</div>
<div class="flex items-center gap-2 flex-row-reverse">
<div class="w-8 h-8 rounded-full bg-white/20 flex-shrink-0"></div>
<div class="flex-1 h-10 bg-white/15 rounded-lg"></div>
</div>
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-full bg-white/30 flex-shrink-0"></div>
<div class="flex-1 h-8 bg-white/20 rounded-lg"></div>
</div>
<div class="flex items-center gap-2 flex-row-reverse">
<div class="w-8 h-8 rounded-full bg-white/20 flex-shrink-0"></div>
<div class="w-2/3 h-8 bg-white/15 rounded-lg"></div>
</div>
</div>
)}
{service.icon === 'cloud' && (
<div class="w-full space-y-3">
<div class="flex justify-center">
<div class="w-24 h-12 bg-white/30 rounded-2xl flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-white/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
</svg>
</div>
</div>
<div class="flex justify-center gap-1">
<div class="w-0.5 h-6 bg-white/30"></div>
<div class="w-0.5 h-6 bg-white/30 mx-6"></div>
<div class="w-0.5 h-6 bg-white/30 mx-6"></div>
</div>
<div class="grid grid-cols-3 gap-2">
{['AWS', 'K8s', 'GCP'].map((label) => (
<div class="h-10 bg-white/20 rounded-lg flex items-center justify-center">
<span class="text-white/70 text-xs font-medium">{label}</span>
</div>
))}
</div>
</div>
)}
</div>
</div>
</div>
<!-- Floating stats badge -->
<div class="absolute -bottom-4 -right-4 sm:-bottom-6 sm:-right-6 bg-white rounded-xl shadow-xl p-4 sm:p-5 hidden sm:block border border-secondary-100">
<div class="flex items-center gap-3">
<div class={`w-10 h-10 ${service.bgLight} ${service.iconColor} rounded-lg flex items-center justify-center flex-shrink-0`} aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
</svg>
</div>
<div>
<p class="text-lg font-bold text-secondary-900">{Object.values(service.stats)[0]}</p>
<p class="text-secondary-500 text-xs">{Object.keys(service.stats)[0].replace(/([A-Z])/g, ' $1').trim()}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
))}
<!-- Case Studies Section -->
<section class="py-16 lg:py-24 bg-secondary-50">
<div class="container-wrapper">
<div class="text-center max-w-2xl mx-auto mb-12 lg:mb-16 reveal-on-scroll">
<span class="text-accent-500 font-semibold text-sm uppercase tracking-wider">Real Results</span>
<h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 mt-2 mb-4">Client Success Stories</h2>
<p class="text-secondary-600 text-lg">
Don't take our word for it — see the measurable impact we've delivered for our clients.
</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
{caseStudies.map((study, idx) => (
<div class={`case-study-card group relative bg-white rounded-2xl p-6 lg:p-8 border ${study.borderColor} hover:shadow-xl hover:-translate-y-1 transition-all duration-300 overflow-hidden reveal-on-scroll reveal-delay-${idx + 1}`}>
<!-- Background gradient -->
<div class={`absolute inset-0 bg-gradient-to-br ${study.gradient} opacity-50 group-hover:opacity-70 transition-opacity duration-300`} aria-hidden="true"></div>
<div class="relative">
<!-- Tag + icon -->
<div class="flex items-center justify-between mb-4">
<span class={`px-2.5 py-1 text-xs font-semibold ${study.tagColor} rounded-md`}>{study.tag}</span>
<div class="text-secondary-300" aria-hidden="true">
{study.icon === 'web' && (
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
</svg>
)}
{study.icon === 'mobile' && (
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
)}
{study.icon === 'ai' && (
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
)}
</div>
</div>
<!-- Big metric -->
<p class="text-4xl font-bold text-secondary-900 mb-1">{study.metric}</p>
<p class="text-sm font-medium text-secondary-500 mb-4">{study.metricLabel}</p>
<!-- Client & description -->
<p class="font-semibold text-secondary-800 mb-2">{study.client}</p>
<p class="text-secondary-600 text-sm leading-relaxed mb-4">{study.description}</p>
<!-- Result pill -->
<div class="inline-flex items-center gap-1.5 px-3 py-1 bg-secondary-100 rounded-full text-xs text-secondary-600 font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
{study.result}
</div>
</div>
</div>
))}
</div>
<div class="mt-10 text-center">
<a
href="/contact"
class="inline-flex items-center gap-2 text-primary-600 hover:text-primary-700 font-semibold text-sm transition-colors duration-200 group"
>
Start your success story
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 group-hover:translate-x-1 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</div>
</div>
</section>
<!-- Pricing Section -->
<section class="py-16 lg:py-24 bg-white">
<div class="container-wrapper">
<div class="text-center max-w-2xl mx-auto mb-12 lg:mb-16 reveal-on-scroll">
<span class="text-primary-500 font-semibold text-sm uppercase tracking-wider">Transparent Pricing</span>
<h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 mt-2 mb-4">Investment Tiers</h2>
<p class="text-secondary-600 text-lg">
Straightforward pricing to fit businesses at every stage. All plans include dedicated project management.
</p>
</div>
<div class="grid md:grid-cols-3 gap-6 lg:gap-8 items-stretch">
{pricingTiers.map((tier, idx) => (
<div
class={`relative flex flex-col rounded-2xl p-7 lg:p-8 reveal-on-scroll reveal-delay-${idx + 1} transition-all duration-300 ${
tier.highlighted
? 'bg-secondary-900 shadow-2xl ring-2 ring-primary-500 md:scale-105'
: 'bg-white border border-secondary-200 hover:shadow-xl hover:-translate-y-1'
}`}
>
{tier.highlighted && (
<div class="absolute -top-3.5 left-1/2 -translate-x-1/2">
<span class="px-4 py-1 bg-primary-500 text-white text-xs font-bold rounded-full uppercase tracking-wide shadow-lg">
Most Popular
</span>
</div>
)}
<div class="mb-6">
<h3 class={`text-xl font-bold mb-1 ${tier.highlighted ? 'text-white' : 'text-secondary-900'}`}>
{tier.name}
</h3>
<p class={`text-sm mb-4 ${tier.highlighted ? 'text-secondary-400' : 'text-secondary-500'}`}>
{tier.description}
</p>
<div class="flex items-baseline gap-2">
<span class={`text-4xl font-bold ${tier.highlighted ? 'text-white' : 'text-secondary-900'}`}>
{tier.price}
</span>
<span class={`text-sm ${tier.highlighted ? 'text-secondary-400' : 'text-secondary-500'}`}>
{tier.period}
</span>
</div>
</div>
<ul class="space-y-3 mb-8 flex-1">
{tier.features.map((feature) => (
<li class="flex items-start gap-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class={`w-5 h-5 flex-shrink-0 mt-0.5 ${tier.highlighted ? 'text-primary-400' : 'text-primary-500'}`}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2.5"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
<span class={`text-sm ${tier.highlighted ? 'text-secondary-300' : 'text-secondary-700'}`}>
{feature}
</span>
</li>
))}
</ul>
<a
href="/contact"
class={`w-full inline-flex items-center justify-center px-6 py-3.5 rounded-lg font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 ${
tier.highlighted
? 'bg-primary-500 text-white hover:bg-primary-400 focus:ring-primary-400 focus:ring-offset-secondary-900'
: 'bg-secondary-900 text-white hover:bg-secondary-800 focus:ring-secondary-400'
}`}
>
{tier.cta === 'Most Popular' ? 'Get Started' : tier.cta}
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</div>
))}
</div>
<p class="text-center text-secondary-500 text-sm mt-8">
All prices are estimates. Final scope and pricing determined after discovery call.
<a href="/contact" class="text-primary-600 hover:text-primary-700 font-medium ml-1">Schedule a free consultation →</a>
</p>
</div>
</section>
<!-- Process Section -->
<section class="py-16 lg:py-24 bg-gradient-to-br from-secondary-900 via-secondary-800 to-secondary-900">
<div class="container-wrapper">
<div class="text-center max-w-2xl mx-auto mb-12 lg:mb-16 reveal-on-scroll">
<span class="text-primary-400 font-semibold text-sm uppercase tracking-wider">How We Work</span>
<h2 class="text-3xl sm:text-4xl font-bold text-white mt-2 mb-4">Our Proven Process</h2>
<p class="text-secondary-300 text-lg">
A battle-tested methodology that delivers consistent, high-quality results — on time, every time.
</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-4">
{processSteps.map((step, index) => (
<div class={`relative reveal-on-scroll reveal-delay-${index + 1}`}>
<div class="group bg-white/5 backdrop-blur-sm rounded-2xl p-6 lg:p-7 border border-white/10 hover:bg-white/10 hover:border-white/20 hover:-translate-y-1 transition-all duration-300 h-full">
<!-- Step number with glow -->
<div class="relative mb-4">
<span class="text-6xl font-bold text-primary-500/20 leading-none">{step.number}</span>
<div class="absolute -top-1 -left-1 w-8 h-8 bg-primary-500/10 rounded-full blur-md"></div>
</div>
<h3 class="text-lg font-bold text-white mb-2">{step.title}</h3>
<p class="text-secondary-400 text-sm leading-relaxed">{step.description}</p>
</div>
{/* Connector arrow between steps */}
{index < processSteps.length - 1 && (
<div class="hidden lg:flex absolute top-1/2 -right-5 transform -translate-y-1/2 z-10 items-center justify-center w-10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-primary-500/40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</div>
)}
</div>
))}
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 lg:py-24 bg-gradient-to-r from-primary-600 via-primary-500 to-primary-600 relative overflow-hidden">
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
<div class="absolute top-0 left-1/4 w-64 h-64 bg-white/5 rounded-full blur-3xl"></div>
<div class="absolute bottom-0 right-1/4 w-80 h-80 bg-white/5 rounded-full blur-3xl"></div>
</div>
<div class="container-wrapper text-center relative reveal-on-scroll">
<span class="inline-block px-4 py-1.5 mb-4 text-sm font-medium text-white/80 bg-white/10 rounded-full border border-white/20">
Ready to get started?
</span>
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">
Let's Build Something
<span class="italic font-normal"> Great </span>
Together
</h2>
<p class="text-primary-100 text-lg max-w-2xl mx-auto mb-10 leading-relaxed">
Schedule a free 30-minute discovery call and let's discuss how our services can accelerate your business goals.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a
href="/contact"
class="inline-flex items-center justify-center px-8 py-4 bg-white text-primary-600 font-bold rounded-xl hover:bg-primary-50 hover:shadow-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600"
>
Schedule a Free Call
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</a>
<a
href="/about"
class="inline-flex items-center justify-center px-8 py-4 border-2 border-white/40 text-white font-semibold rounded-xl hover:bg-white/10 hover:border-white/60 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600"
>
Learn About Us
</a>
</div>
<!-- Trust signals -->
<div class="mt-10 flex flex-wrap items-center justify-center gap-6 text-white/60 text-sm">
<span class="flex items-center gap-1.5">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
No commitment required
</span>
<span class="flex items-center gap-1.5">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
Free project estimate
</span>
<span class="flex items-center gap-1.5">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
Response within 24 hours
</span>
</div>
</div>
</section>
</BaseLayout>
<style>
/* Scroll-reveal base state */
.reveal-on-scroll {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-on-scroll.revealed {
opacity: 1;
transform: translateY(0);
}
/* Staggered delays */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.reveal-on-scroll {
opacity: 1;
transform: none;
transition: none;
}
}
/* Service card inner border accent animation */
.service-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 1rem;
padding: 1.5px;
background: linear-gradient(135deg, transparent 0%, transparent 50%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
transition: background 0.3s ease;
}
/* Case study card hover */
.case-study-card {
contain: layout style;
}
</style>
<script>
// Intersection Observer for scroll-reveal animations
(function() {
const elements = document.querySelectorAll('.reveal-on-scroll');
if (!elements.length) return;
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('revealed');
observer.unobserve(entry.target);
}
});
},
{
threshold: 0.12,
rootMargin: '0px 0px -40px 0px',
}
);
elements.forEach((el) => observer.observe(el));
})();
</script>