platform-mcpandClaude Opus 4.8
4929a1c906
E2E Test Suite / Smoke Tests (P0) (push) Failing after 9m26s
E2E Test Suite / Critical User Journeys (push) Has been skipped
E2E Test Suite / API Integration Tests (push) Has been skipped
E2E Test Suite / Cross-Browser Regression (firefox) (push) Failing after 10m9s
E2E Test Suite / Cross-Browser Regression (chromium) (push) Failing after 11m1s
E2E Test Suite / Destructive & Chaos Tests (push) Failing after 11m53s
E2E Test Suite / Form Interaction Tests (push) Failing after 12m45s
Deploy to Production / Build & Verify (push) Has been cancelled
Deploy to Production / Pre-Deploy Tests (push) Has been cancelled
Deploy to Production / Deploy to Railway (push) Has been cancelled
Deploy to Production / Deploy to Render (push) Has been cancelled
Deploy to Production / Deploy to VPS (PM2) (push) Has been cancelled
Deploy to Production / Deploy to Fly.io (push) Has been cancelled
Deploy to Production / Post-Deploy Verification (push) Has been cancelled
Deploy to Production / Notify on Failure (push) Has been cancelled
E2E Test Suite / Cross-Browser Regression (webkit) (push) Has been cancelled
E2E Test Suite / Mobile Device Tests (push) Has been cancelled
E2E Test Suite / Security Header Tests (push) Has been cancelled
E2E Test Suite / Test Report Summary (push) Has been cancelled
Ping Search Engines / Notify Search Engines (push) Failing after 11m38s
- Replace generic H1 with outcome-led headline ("Custom software for
enterprises and governments — shipped in weeks, not quarters.")
- Rewrite each service description to lead with the outcome and end
with the tech stack
- Reorder service cards so Government IT and ERP/Enterprise lead,
before Web/Mobile
- Add "What's included" label above each pricing tier's bullet list
(Most Popular badge on Professional retained)
- Unify CTAs to one primary ("Get my free proposal") + one secondary
("See our work" → /portfolio)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1005 lines
52 KiB
Plaintext
1005 lines
52 KiB
Plaintext
---
|
||
// Services Page for WorkRoot IT Solutions LLP
|
||
// 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
|
||
// Order is intentional: Government IT and ERP/Enterprise lead (highest-value
|
||
// outcomes), followed by Web, Mobile, Design, and Consulting.
|
||
const services = [
|
||
{
|
||
id: 'government-systems',
|
||
title: 'Government IT Solutions',
|
||
shortDescription: 'Digitize public services across districts with secure, audit-ready systems citizens actually trust. Built on Spring Boot + Astro + PostgreSQL.',
|
||
fullDescription: 'Serve more citizens with fewer queues. We build secure, compliant systems that are already live across 11+ districts handling critical public services — digital records, real-time reporting, and 99.9% uptime under strict security standards. Built on Spring Boot, Astro, Golang, PostgreSQL, and MySQL.',
|
||
icon: 'government',
|
||
features: [
|
||
'Smart city solutions (SCMS)',
|
||
'Multi-district deployment',
|
||
'Secure & compliant architecture',
|
||
'Digital record keeping',
|
||
'Real-time reporting dashboards',
|
||
'High availability infrastructure',
|
||
],
|
||
techStack: ['Spring Boot', 'Astro', 'Golang', 'PostgreSQL', 'MySQL'],
|
||
stats: { projects: '3+', districts: '11+', uptime: '99.9%' },
|
||
gradient: 'from-red-500 to-orange-700',
|
||
bgLight: 'bg-red-50',
|
||
iconColor: 'text-red-500',
|
||
accentBorder: 'border-red-500',
|
||
tagBg: 'bg-red-100 text-red-700',
|
||
},
|
||
{
|
||
id: 'erp-solutions',
|
||
title: 'ERP & Enterprise Systems',
|
||
shortDescription: 'Replace 5 spreadsheets with one system your team actually uses. Built on Spring Boot + Angular.',
|
||
fullDescription: 'Replace scattered spreadsheets and manual handoffs with one system your team actually uses. From university management to personnel administration, we ship ERP platforms that handle complex workflows, role-based access, and 20,000+ users without breaking a sweat. Built on Spring Boot, Angular, Next.js, MySQL, and PostgreSQL.',
|
||
icon: 'enterprise',
|
||
features: [
|
||
'Custom ERP development',
|
||
'University management systems',
|
||
'Personnel management platforms',
|
||
'Role-based access control',
|
||
'Dashboard & reporting',
|
||
'Multi-tenant architecture',
|
||
],
|
||
techStack: ['Spring Boot', 'Angular', 'Next.js', 'MySQL', 'PostgreSQL'],
|
||
stats: { deployments: '5+', users: '20,000+', districts: '11' },
|
||
gradient: 'from-purple-500 to-indigo-700',
|
||
bgLight: 'bg-purple-50',
|
||
iconColor: 'text-purple-500',
|
||
accentBorder: 'border-purple-500',
|
||
tagBg: 'bg-purple-100 text-purple-700',
|
||
},
|
||
{
|
||
id: 'web-development',
|
||
title: 'Web Development',
|
||
shortDescription: 'Turn visitors into customers with fast, SEO-ready web apps that load in under 2 seconds. Built on Angular, React, Next.js + Spring Boot.',
|
||
fullDescription: 'Turn visitors into customers with web apps that load in under 2 seconds and rank on day one. From responsive sites to complex SPAs, we deliver high-performance, secure, SEO-ready solutions tuned for conversion. Built on Angular, React, Next.js, and Astro with Spring Boot and Golang backends.',
|
||
icon: 'web',
|
||
features: [
|
||
'Custom web application development',
|
||
'Angular & React SPA development',
|
||
'Next.js SSR/SSG applications',
|
||
'Astro static site generation',
|
||
'Spring Boot REST API development',
|
||
'SEO-friendly architecture',
|
||
],
|
||
techStack: ['Angular', 'React', 'Next.js', 'Astro', 'Spring Boot', 'Golang'],
|
||
stats: { projects: '10+', clients: '8+', 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 App Development',
|
||
shortDescription: 'Put your business in every customer\'s pocket with one app for iOS and Android. Built on Expo + React Native.',
|
||
fullDescription: 'Put your business in every customer\'s pocket with one codebase for iOS and Android. We ship cross-platform apps with native-like performance, offline-first architecture, push notifications, and seamless backend integration — published to both stores. Built on Expo, React Native, Spring Boot, and PostgreSQL.',
|
||
icon: 'mobile',
|
||
features: [
|
||
'Expo / React Native development',
|
||
'iOS & Android deployment',
|
||
'Offline-first architecture',
|
||
'Push notifications',
|
||
'Backend API integration',
|
||
'App Store & Play Store publishing',
|
||
],
|
||
techStack: ['Expo', 'React Native', 'Spring Boot', 'PostgreSQL'],
|
||
stats: { apps: '3+', downloads: '5,000+', rating: '4.8★' },
|
||
gradient: 'from-green-500 to-emerald-700',
|
||
bgLight: 'bg-green-50',
|
||
iconColor: 'text-green-500',
|
||
accentBorder: 'border-green-500',
|
||
tagBg: 'bg-green-100 text-green-700',
|
||
},
|
||
{
|
||
id: 'ui-ux-design',
|
||
title: 'UI/UX Design',
|
||
shortDescription: 'Win trust in the first 5 seconds with interfaces that convert and meet WCAG. Built on TailwindCSS + Figma.',
|
||
fullDescription: 'Win trust in the first 5 seconds with interfaces that are intuitive, accessible, and on-brand. Our process — wireframing, prototyping, and usability testing — turns into pixel-perfect, WCAG-compliant builds with dark mode out of the box. Built on TailwindCSS, Figma, CSS3, and HTML5.',
|
||
icon: 'design',
|
||
features: [
|
||
'Responsive web design',
|
||
'TailwindCSS implementation',
|
||
'Design system creation',
|
||
'Accessibility (WCAG) compliance',
|
||
'Wireframing & prototyping',
|
||
'Dark mode support',
|
||
],
|
||
techStack: ['TailwindCSS', 'Figma', 'CSS3', 'HTML5'],
|
||
stats: { designs: '20+', satisfaction: '100%', responsive: '100%' },
|
||
gradient: 'from-pink-500 to-rose-700',
|
||
bgLight: 'bg-pink-50',
|
||
iconColor: 'text-pink-500',
|
||
accentBorder: 'border-pink-500',
|
||
tagBg: 'bg-pink-100 text-pink-700',
|
||
},
|
||
{
|
||
id: 'it-consulting',
|
||
title: 'IT Consulting & DevOps',
|
||
shortDescription: 'Ship faster and sleep better with automated deploys and 99.9% uptime. Built on Docker, Nginx + GitHub Actions.',
|
||
fullDescription: 'Ship faster and sleep better. We optimize your infrastructure with expert consulting, cloud migration, CI/CD automation, and DevOps best practices — taking you from architecture review to a production deployment that just runs. Built on Docker, Nginx, Linux, Git, and GitHub Actions.',
|
||
icon: 'consulting',
|
||
features: [
|
||
'Architecture review & consulting',
|
||
'Cloud deployment (AWS/VPS)',
|
||
'CI/CD pipeline setup',
|
||
'Performance optimization',
|
||
'Database design & optimization',
|
||
'Security audits',
|
||
],
|
||
techStack: ['Docker', 'Nginx', 'Linux', 'Git', 'GitHub Actions'],
|
||
stats: { consultations: '15+', optimizations: '10+', uptime: '99.9%' },
|
||
gradient: 'from-cyan-500 to-teal-700',
|
||
bgLight: 'bg-cyan-50',
|
||
iconColor: 'text-cyan-500',
|
||
accentBorder: 'border-cyan-500',
|
||
tagBg: 'bg-cyan-100 text-cyan-700',
|
||
},
|
||
];
|
||
|
||
// Pricing tiers
|
||
const pricingTiers = [
|
||
{
|
||
name: 'Starter',
|
||
price: '₹1,00,000',
|
||
period: 'starting from',
|
||
description: 'Ideal for small businesses and startups needing a professional web presence.',
|
||
features: [
|
||
'Responsive website (up to 10 pages)',
|
||
'Mobile-friendly design',
|
||
'Basic SEO optimization',
|
||
'Contact form integration',
|
||
'SSL certificate setup',
|
||
'1 month post-launch support',
|
||
'Basic analytics setup',
|
||
],
|
||
cta: 'Get my free proposal',
|
||
highlighted: false,
|
||
},
|
||
{
|
||
name: 'Professional',
|
||
price: '₹5,00,000',
|
||
period: 'starting from',
|
||
description: 'For growing businesses that need custom web applications and advanced features.',
|
||
features: [
|
||
'Custom web application',
|
||
'Admin dashboard & CMS',
|
||
'API development & integration',
|
||
'Database design & setup',
|
||
'User authentication & roles',
|
||
'Payment gateway integration',
|
||
'3 months post-launch support',
|
||
'Performance optimization',
|
||
'Automated testing',
|
||
],
|
||
cta: 'Get my free proposal',
|
||
highlighted: true,
|
||
},
|
||
{
|
||
name: 'Enterprise',
|
||
price: 'Custom',
|
||
period: 'contact us',
|
||
description: 'For large organizations needing complex enterprise systems, ERP, or government solutions.',
|
||
features: [
|
||
'Full-stack enterprise application',
|
||
'Multi-district/multi-tenant deployment',
|
||
'Custom ERP/management system',
|
||
'Mobile app (iOS & Android)',
|
||
'Advanced security & compliance',
|
||
'Load balancing & high availability',
|
||
'12 months dedicated support',
|
||
'On-site training & documentation',
|
||
'Priority SLA & escalation',
|
||
'Source code ownership',
|
||
],
|
||
cta: 'Get my free proposal',
|
||
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, ERP systems, government IT solutions & UI/UX design from WorkRoot IT Solutions LLP. 10+ projects delivered, 8+ happy clients. From ₹1,00,000 — 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, ERP systems, government IT solutions, UI/UX design, and IT consulting. Serving startups, enterprises, and government bodies.'
|
||
}}
|
||
faq={[
|
||
{
|
||
question: 'What IT services does WorkRoot offer?',
|
||
answer: 'WorkRoot offers six core services: Web Development (Angular, React, Next.js, Astro, Spring Boot), Mobile App Development (Expo, React Native), ERP & Enterprise Systems, Government IT Solutions, UI/UX Design (TailwindCSS, Figma), and IT Consulting & DevOps.'
|
||
},
|
||
{
|
||
question: 'How much does a web development project cost?',
|
||
answer: 'Our pricing starts at ₹1,00,000 for Starter projects (up to 10 pages), ₹5,00,000 for Professional 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 Professional, and 12 months for Enterprise. We also offer ongoing SLA-backed maintenance retainers for continued peace of mind.'
|
||
},
|
||
{
|
||
question: 'Can WorkRoot build ERP and government systems?',
|
||
answer: 'Absolutely. We have built and deployed custom ERP solutions, university management systems, police administration platforms, and smart city solutions across 11+ districts with 20,000+ users.'
|
||
}
|
||
]}
|
||
/>
|
||
|
||
<!-- 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">
|
||
Custom software for enterprises and governments —
|
||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 via-primary-300 to-accent-400">
|
||
shipped in weeks, not quarters.
|
||
</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: '20+', label: 'Projects Delivered' },
|
||
{ value: '100%', label: 'Client Satisfaction' },
|
||
{ value: '6', 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 dark:bg-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-500 dark:text-primary-400 font-semibold text-sm uppercase tracking-wider">What We Offer</span>
|
||
<h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2 mb-4">Our Core Services</h2>
|
||
<p class="text-secondary-600 dark:text-secondary-400 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 dark:bg-secondary-800 rounded-2xl p-8 shadow-sm border border-secondary-100 dark:border-secondary-700 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 dark:text-secondary-100 group-hover:text-white transition-colors duration-300">{val}</p>
|
||
<p class="text-xs text-secondary-500 dark:text-secondary-400 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 dark:text-secondary-100 group-hover:text-white mb-2 transition-colors duration-300">
|
||
{service.title}
|
||
</h3>
|
||
<p class="text-secondary-600 dark:text-secondary-400 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 dark:bg-secondary-800/50' : 'bg-white dark:bg-secondary-900'}`}
|
||
>
|
||
<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 dark:text-secondary-100 mb-4">
|
||
{service.title}
|
||
</h2>
|
||
<p class="text-secondary-600 dark:text-secondary-400 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 dark:text-secondary-400 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 dark:text-secondary-300">{feature}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
|
||
<!-- Tech stack -->
|
||
<div class="mb-8">
|
||
<p class="text-xs font-semibold text-secondary-400 dark:text-secondary-500 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 my free proposal
|
||
<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 dark:bg-secondary-800 rounded-xl shadow-xl p-4 sm:p-5 hidden sm:block border border-secondary-100 dark:border-secondary-700">
|
||
<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 dark:text-secondary-100">{Object.values(service.stats)[0]}</p>
|
||
<p class="text-secondary-500 dark:text-secondary-400 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 dark:bg-secondary-800/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 dark:text-accent-400 font-semibold text-sm uppercase tracking-wider">Real Results</span>
|
||
<h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2 mb-4">Client Success Stories</h2>
|
||
<p class="text-secondary-600 dark:text-secondary-400 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 dark:bg-secondary-800 rounded-2xl p-6 lg:p-8 border ${study.borderColor} dark:border-secondary-700 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 dark:text-secondary-100 mb-1">{study.metric}</p>
|
||
<p class="text-sm font-medium text-secondary-500 dark:text-secondary-400 mb-4">{study.metricLabel}</p>
|
||
|
||
<!-- Client & description -->
|
||
<p class="font-semibold text-secondary-800 dark:text-secondary-200 mb-2">{study.client}</p>
|
||
<p class="text-secondary-600 dark:text-secondary-400 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 dark:bg-secondary-700 rounded-full text-xs text-secondary-600 dark:text-secondary-300 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="/portfolio"
|
||
class="inline-flex items-center gap-2 text-primary-600 hover:text-primary-700 font-semibold text-sm transition-colors duration-200 group"
|
||
>
|
||
See our work
|
||
<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 dark:bg-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-500 dark:text-primary-400 font-semibold text-sm uppercase tracking-wider">Transparent Pricing</span>
|
||
<h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2 mb-4">Investment Tiers</h2>
|
||
<p class="text-secondary-600 dark:text-secondary-400 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 dark:bg-secondary-800 border border-secondary-200 dark:border-secondary-700 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 dark:text-secondary-100'}`}>
|
||
{tier.name}
|
||
</h3>
|
||
<p class={`text-sm mb-4 ${tier.highlighted ? 'text-secondary-400' : 'text-secondary-500 dark:text-secondary-400'}`}>
|
||
{tier.description}
|
||
</p>
|
||
<div class="flex items-baseline gap-2">
|
||
<span class={`text-4xl font-bold ${tier.highlighted ? 'text-white' : 'text-secondary-900 dark:text-secondary-100'}`}>
|
||
{tier.price}
|
||
</span>
|
||
<span class={`text-sm ${tier.highlighted ? 'text-secondary-400' : 'text-secondary-500 dark:text-secondary-400'}`}>
|
||
{tier.period}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<p class={`text-xs font-semibold uppercase tracking-wider mb-3 ${tier.highlighted ? 'text-secondary-400' : 'text-secondary-400 dark:text-secondary-500'}`}>
|
||
What's included
|
||
</p>
|
||
<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 dark:text-secondary-300'}`}>
|
||
{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 dark:bg-secondary-700 text-white hover:bg-secondary-800 dark:hover:bg-secondary-600 focus:ring-secondary-400'
|
||
}`}
|
||
>
|
||
{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 dark:text-secondary-400 text-sm mt-8">
|
||
All prices are estimates. Final scope and pricing determined after discovery call.
|
||
<a href="/contact" class="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-medium ml-1">Get my free proposal →</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"
|
||
>
|
||
Get my free proposal
|
||
<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="/portfolio"
|
||
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"
|
||
>
|
||
See our work
|
||
</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>
|