WorkRoot AgentandClaude Opus 4.6
dfd7e5685d
Deploy to Production / Build & Verify (push) Failing after 5m44s
E2E Test Suite / Form Interaction Tests (push) Has been skipped
E2E Test Suite / Destructive & Chaos Tests (push) Has been skipped
E2E Test Suite / Cross-Browser Regression (chromium) (push) Has been skipped
E2E Test Suite / Cross-Browser Regression (firefox) (push) Has been skipped
E2E Test Suite / Cross-Browser Regression (webkit) (push) Has been skipped
E2E Test Suite / Mobile Device Tests (push) Has been skipped
E2E Test Suite / Security Header Tests (push) Has been skipped
Ping Search Engines / Notify Search Engines (push) Successful in 7s
Deploy to Production / Pre-Deploy Tests (push) Has been skipped
Deploy to Production / Deploy to Railway (push) Has been skipped
Deploy to Production / Deploy to Render (push) Has been skipped
Deploy to Production / Deploy to VPS (PM2) (push) Has been skipped
Deploy to Production / Deploy to Fly.io (push) Has been skipped
Deploy to Production / Post-Deploy Verification (push) Has been skipped
Deploy to Production / Notify on Failure (push) Successful in 2s
E2E Test Suite / Smoke Tests (P0) (push) Failing after 9m14s
E2E Test Suite / Critical User Journeys (push) Has been skipped
E2E Test Suite / API Integration Tests (push) Has been skipped
E2E Test Suite / Test Report Summary (push) Failing after 4s
Uptime Monitor / Health & Response Time (push) Successful in 3s
Uptime Monitor / SSL Certificate (push) Successful in 2s
Uptime Monitor / Send Alerts (push) Has been skipped
Uptime Monitor / Record Uptime Success (push) Successful in 1s
- Fix contact page trust stats (20+ projects, 100% satisfaction, 3+ years) - Fix portfolio meta description (20+ projects, not 100+) - Fix services page stats (20+ projects, 100% satisfaction, 6 services) - Update BaseLayout keywords to match actual tech stack (remove Flutter, add Astro/Golang/Expo) - Update aggregate rating reviewCount to realistic 20 (was inflated 127) - Add 5th blog post: Building Scalable ERP Systems - Replace placeholder SVG blog images with real Unsplash JPEG photos - Add dedicated image for government IT systems blog post Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
903 lines
46 KiB
Plaintext
903 lines
46 KiB
Plaintext
---
|
|
// Home page - WorkRoot IT Solutions
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
import SEO from '../components/SEO.astro';
|
|
|
|
// Benefits/Features data
|
|
const benefits = [
|
|
{
|
|
icon: 'rocket',
|
|
title: 'Rapid Development',
|
|
description: 'Launch your product 3x faster with our agile methodology and proven frameworks.',
|
|
},
|
|
{
|
|
icon: 'shield',
|
|
title: 'Enterprise Security',
|
|
description: 'Bank-grade security protocols protecting your data and user privacy.',
|
|
},
|
|
{
|
|
icon: 'scale',
|
|
title: 'Built to Scale',
|
|
description: 'Infrastructure that grows with your business, from startup to enterprise.',
|
|
},
|
|
{
|
|
icon: 'support',
|
|
title: '24/7 Support',
|
|
description: 'Round-the-clock technical support ensuring your systems run smoothly.',
|
|
},
|
|
];
|
|
|
|
// Services data
|
|
const services = [
|
|
{
|
|
icon: 'code',
|
|
title: 'Web Development',
|
|
description: 'Custom web applications built with Angular, React, Next.js, Astro, and Spring Boot.',
|
|
features: ['Angular/React/Next.js', 'Spring Boot APIs', 'Astro Static Sites'],
|
|
},
|
|
{
|
|
icon: 'smartphone',
|
|
title: 'Mobile Apps',
|
|
description: 'Cross-platform and native mobile applications for iOS and Android.',
|
|
features: ['React Native / Expo', 'iOS & Android', 'Offline-First Apps'],
|
|
},
|
|
{
|
|
icon: 'brain',
|
|
title: 'ERP & Enterprise Systems',
|
|
description: 'Custom ERP, CRM, and management systems for enterprises and government bodies.',
|
|
features: ['University Management', 'Police Management', 'Crematorium SCMS'],
|
|
},
|
|
{
|
|
icon: 'cloud',
|
|
title: 'Government IT Solutions',
|
|
description: 'Scalable technology solutions deployed across government departments and districts.',
|
|
features: ['Multi-District Deployments', 'Secure & Compliant', 'High Availability'],
|
|
},
|
|
];
|
|
|
|
// How it works steps
|
|
const steps = [
|
|
{
|
|
number: '01',
|
|
title: 'Discovery',
|
|
description: 'We understand your business goals, challenges, and technical requirements.',
|
|
},
|
|
{
|
|
number: '02',
|
|
title: 'Planning',
|
|
description: 'Strategic roadmap with clear milestones, timelines, and deliverables.',
|
|
},
|
|
{
|
|
number: '03',
|
|
title: 'Development',
|
|
description: 'Agile sprints with regular check-ins and iterative improvements.',
|
|
},
|
|
{
|
|
number: '04',
|
|
title: 'Launch & Support',
|
|
description: 'Smooth deployment with ongoing maintenance and optimization.',
|
|
},
|
|
];
|
|
|
|
// Testimonials data
|
|
const testimonials = [
|
|
{
|
|
quote: 'WorkRoot IT Solutions is very professional and responsive. They built PLNR Financing platform with great attention to detail. The Angular + Spring Boot stack works flawlessly and their ongoing support is excellent.',
|
|
author: 'Ajay Pruthi',
|
|
role: 'Founder, PLNR',
|
|
avatar: 'AP',
|
|
rating: 5,
|
|
},
|
|
{
|
|
quote: 'The FPC Cart e-commerce platform delivered by WorkRoot exceeded our expectations. Built with Astro and Golang, it loads incredibly fast and handles our product catalog seamlessly. Their team understood our business needs perfectly.',
|
|
author: 'Dhirendra Singh',
|
|
role: 'Director, RENTEC',
|
|
avatar: 'DS',
|
|
rating: 5,
|
|
},
|
|
{
|
|
quote: 'WorkRoot delivered our University Management System for IIT Patna on time and within budget. The Next.js + Spring Boot architecture is robust and scalable. They are a reliable technology partner for complex enterprise projects.',
|
|
author: 'Dilip Raj',
|
|
role: 'Director, MOC Soft Technologies Pvt Ltd',
|
|
avatar: 'DR',
|
|
rating: 5,
|
|
},
|
|
];
|
|
|
|
// Stats data
|
|
const stats = [
|
|
{ value: 20, suffix: '+', label: 'Projects Delivered', icon: 'briefcase' },
|
|
{ value: 100, suffix: '%', label: 'Client Satisfaction', icon: 'heart' },
|
|
{ value: 3, suffix: '+', label: 'Years in Business', icon: 'building' },
|
|
{ value: 3, suffix: '', label: 'Team Members', icon: 'clock' },
|
|
];
|
|
|
|
// FAQ data
|
|
const faqs = [
|
|
{
|
|
question: 'What technologies do you specialize in?',
|
|
answer: 'We specialize in modern web and mobile technologies including Angular, React, Next.js, Astro, Spring Boot, Golang, and databases like MySQL and PostgreSQL. We also work with Expo for mobile development.',
|
|
},
|
|
{
|
|
question: 'How long does a typical project take?',
|
|
answer: 'Project timelines vary based on complexity. A static website might take 2-4 weeks, while a complex government management system could take 6-24 months. We provide detailed timelines during the planning phase.',
|
|
},
|
|
{
|
|
question: 'Do you offer ongoing support after launch?',
|
|
answer: 'Yes! We offer comprehensive support packages including bug fixes, security updates, performance monitoring, and feature enhancements. Our 24/7 support ensures your systems run smoothly.',
|
|
},
|
|
{
|
|
question: 'What is your development process?',
|
|
answer: 'We follow an agile methodology with 2-week sprints, regular check-ins, and iterative development. You\'ll have full visibility into progress with access to staging environments and regular demos.',
|
|
},
|
|
{
|
|
question: 'Can you work with our existing team?',
|
|
answer: 'Absolutely! We excel at collaborating with in-house teams. Whether you need to augment your team or prefer a fully managed solution, we adapt to your workflow and tools.',
|
|
},
|
|
{
|
|
question: 'How do you ensure project security?',
|
|
answer: 'Security is built into every phase. We follow OWASP guidelines, conduct regular security audits, implement encryption, and ensure compliance with industry standards like GDPR and SOC 2.',
|
|
},
|
|
];
|
|
---
|
|
|
|
<BaseLayout
|
|
title="Home"
|
|
description="WorkRoot IT Solutions LLP — Expert software development, web & mobile apps, ERP systems, and government IT solutions. 20+ projects delivered, 100% client satisfaction. Founded 2022."
|
|
>
|
|
<SEO
|
|
slot="head"
|
|
type="WebPage"
|
|
faq={faqs}
|
|
/>
|
|
|
|
<!-- Hero Section - Enhanced -->
|
|
<section class="relative min-h-screen flex items-center overflow-hidden bg-gradient-to-br from-secondary-900 via-secondary-800 to-primary-900">
|
|
<!-- Background decorative elements -->
|
|
<div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
|
|
<div class="absolute -top-40 -right-40 w-[600px] h-[600px] bg-primary/20 rounded-full blur-3xl animate-pulse-slow"></div>
|
|
<div class="absolute -bottom-40 -left-40 w-[500px] h-[500px] bg-accent/10 rounded-full blur-3xl animate-pulse-slower"></div>
|
|
<div class="absolute top-1/3 right-1/4 w-[400px] h-[400px] bg-primary/10 rounded-full blur-3xl"></div>
|
|
<!-- Grid pattern overlay -->
|
|
<div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:80px_80px]"></div>
|
|
<!-- Spotlight effect -->
|
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-secondary-900/50"></div>
|
|
</div>
|
|
|
|
<div class="container-wrapper relative z-10 py-24">
|
|
<div class="max-w-5xl mx-auto text-center">
|
|
<!-- Trust badge -->
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 mb-8 opacity-0 animate-slide-up">
|
|
<svg class="w-5 h-5 text-accent-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
|
</svg>
|
|
<span class="text-sm font-medium text-white">Trusted Software Partner Since 2022</span>
|
|
</div>
|
|
|
|
<!-- Main heading with gradient -->
|
|
<h1 class="text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-bold text-white leading-[1.1] tracking-tight">
|
|
<span class="block opacity-0 animate-slide-up" style="animation-delay: 0.2s;">Build Software</span>
|
|
<span class="block opacity-0 animate-slide-up" style="animation-delay: 0.4s;">That <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 via-primary-300 to-accent-400">Scales</span></span>
|
|
</h1>
|
|
|
|
<p class="mt-8 text-xl sm:text-2xl text-secondary-200 max-w-3xl mx-auto opacity-0 animate-slide-up leading-relaxed" style="animation-delay: 0.6s;">
|
|
Expert software development for web, mobile, ERP, and government systems. We transform your ideas into production-ready solutions that deliver real business value.
|
|
</p>
|
|
|
|
<!-- Dual CTA Buttons -->
|
|
<div class="mt-12 flex flex-wrap justify-center gap-4 opacity-0 animate-slide-up" style="animation-delay: 0.8s;">
|
|
<a
|
|
href="/contact"
|
|
class="group inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-primary-500 to-primary-600 px-10 py-5 text-lg font-bold text-white transition-all hover:shadow-2xl hover:shadow-primary/50 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-secondary-900"
|
|
>
|
|
Start Your Project
|
|
<svg class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
|
</svg>
|
|
</a>
|
|
<a
|
|
href="/portfolio"
|
|
class="group inline-flex items-center justify-center rounded-xl border-2 border-white/30 bg-white/5 backdrop-blur-sm px-10 py-5 text-lg font-bold text-white transition-all hover:bg-white/10 hover:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-secondary-900"
|
|
>
|
|
<svg class="mr-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
|
</svg>
|
|
View Our Work
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Social Proof Logos/Stats -->
|
|
<div class="mt-20 opacity-0 animate-slide-up" style="animation-delay: 1s;">
|
|
<p class="text-sm text-secondary-400 uppercase tracking-wider mb-8">Powered By Industry Leaders</p>
|
|
<div class="flex flex-wrap justify-center items-center gap-12 opacity-60" role="list" aria-label="Technologies we use">
|
|
<div class="text-2xl font-bold text-white" role="listitem">Angular</div>
|
|
<div class="text-2xl font-bold text-white" role="listitem">Spring Boot</div>
|
|
<div class="text-2xl font-bold text-white" role="listitem">Next.js</div>
|
|
<div class="text-2xl font-bold text-white" role="listitem">Astro</div>
|
|
<div class="text-2xl font-bold text-white" role="listitem">Golang</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scroll indicator -->
|
|
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 opacity-0 animate-fade-in" style="animation-delay: 1.2s;">
|
|
<a href="#benefits" class="flex flex-col items-center text-white/60 hover:text-white transition-colors group" aria-label="Scroll to benefits">
|
|
<span class="text-sm mb-2">Discover More</span>
|
|
<svg class="w-6 h-6 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Benefits Section - NEW -->
|
|
<section id="benefits" class="py-24 bg-white dark:bg-secondary-900">
|
|
<div class="container-wrapper">
|
|
<div class="text-center max-w-3xl mx-auto mb-20" data-animate="fade-up">
|
|
<span class="inline-block px-4 py-2 rounded-full bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 text-sm font-bold uppercase tracking-wider mb-4">Why Choose Us</span>
|
|
<h2 class="text-4xl sm:text-5xl font-bold text-secondary-900 dark:text-secondary-100 mb-6">Built for Your Success</h2>
|
|
<p class="text-xl text-secondary-600 dark:text-secondary-400">
|
|
We don't just write code. We build solutions that drive measurable business results.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{benefits.map((benefit, index) => (
|
|
<div class="group relative bg-gradient-to-br from-secondary-50 to-white dark:from-secondary-800 dark:to-secondary-800/80 rounded-2xl p-8 border border-secondary-100 dark:border-secondary-700 hover:border-primary/30 hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 card-interactive" data-animate="fade-up" data-delay={String(index * 100)}>
|
|
<!-- Icon -->
|
|
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg">
|
|
{benefit.icon === 'rocket' && (
|
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
|
</svg>
|
|
)}
|
|
{benefit.icon === 'shield' && (
|
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
|
</svg>
|
|
)}
|
|
{benefit.icon === 'scale' && (
|
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"></path>
|
|
</svg>
|
|
)}
|
|
{benefit.icon === 'support' && (
|
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path>
|
|
</svg>
|
|
)}
|
|
</div>
|
|
|
|
<h3 class="text-2xl font-bold text-secondary-900 dark:text-secondary-100 mb-3">{benefit.title}</h3>
|
|
<p class="text-secondary-600 dark:text-secondary-400 leading-relaxed">{benefit.description}</p>
|
|
|
|
<!-- Decorative corner -->
|
|
<div class="absolute top-4 right-4 w-2 h-2 bg-primary-400 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Section - Enhanced -->
|
|
<section id="services" class="py-24 bg-gradient-to-b from-secondary-50 to-white dark:from-secondary-900 dark:to-secondary-900">
|
|
<div class="container-wrapper">
|
|
<div class="text-center max-w-3xl mx-auto mb-20" data-animate="fade-up">
|
|
<span class="inline-block px-4 py-2 rounded-full bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 text-sm font-bold uppercase tracking-wider mb-4">Our Services</span>
|
|
<h2 class="text-4xl sm:text-5xl font-bold text-secondary-900 dark:text-secondary-100 mb-6">Comprehensive Technology Solutions</h2>
|
|
<p class="text-xl text-secondary-600 dark:text-secondary-400">
|
|
From concept to deployment, we deliver end-to-end solutions tailored to your unique business needs.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
|
|
{services.map((service, index) => (
|
|
<div class="group relative bg-white dark:bg-secondary-800 rounded-3xl p-10 shadow-lg border-2 border-secondary-100 dark:border-secondary-700 hover:border-primary-400 hover:shadow-2xl transition-all duration-500 overflow-hidden card-interactive" data-animate="fade-up" data-delay={String(index % 2 === 0 ? 0 : 150)}>
|
|
<!-- Background gradient on hover -->
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary-50/0 to-primary-50/0 group-hover:from-primary-50/50 dark:group-hover:from-primary-900/20 group-hover:to-transparent transition-all duration-500"></div>
|
|
|
|
<div class="relative z-10">
|
|
<!-- Icon -->
|
|
<div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500 shadow-xl">
|
|
{service.icon === 'code' && (
|
|
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
|
|
</svg>
|
|
)}
|
|
{service.icon === 'smartphone' && (
|
|
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
|
|
</svg>
|
|
)}
|
|
{service.icon === 'brain' && (
|
|
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
|
|
</svg>
|
|
)}
|
|
{service.icon === 'cloud' && (
|
|
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
|
|
</svg>
|
|
)}
|
|
</div>
|
|
|
|
<h3 class="text-2xl font-bold text-secondary-900 dark:text-secondary-100 mb-4">{service.title}</h3>
|
|
<p class="text-secondary-600 dark:text-secondary-400 text-lg mb-6 leading-relaxed">{service.description}</p>
|
|
|
|
<!-- Features list -->
|
|
<ul class="space-y-3">
|
|
{service.features?.map((feature) => (
|
|
<li class="flex items-center text-secondary-700 dark:text-secondary-300">
|
|
<svg class="w-5 h-5 text-primary-500 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
|
</svg>
|
|
<span class="font-medium">{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<!-- Learn more arrow -->
|
|
<div class="mt-6 flex items-center text-primary-600 dark:text-primary-400 font-semibold group-hover:text-primary-700 dark:group-hover:text-primary-300 transition-colors">
|
|
<span>Learn More</span>
|
|
<svg class="w-5 h-5 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Number badge -->
|
|
<div class="absolute top-6 right-6 w-12 h-12 rounded-full bg-primary-100 dark:bg-primary-900/40 flex items-center justify-center text-primary-700 dark:text-primary-300 font-bold text-lg opacity-50 group-hover:opacity-100 transition-opacity">
|
|
{(index + 1).toString().padStart(2, '0')}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div class="text-center mt-16">
|
|
<a href="/services" class="inline-flex items-center justify-center rounded-xl bg-primary px-10 py-5 text-lg font-bold text-white transition-all hover:bg-primary-600 hover:shadow-2xl hover:shadow-primary/30 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2">
|
|
Explore All Services
|
|
<svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works Section - NEW -->
|
|
<section class="py-24 bg-gradient-to-br from-secondary-900 via-secondary-800 to-primary-900 relative overflow-hidden">
|
|
<!-- Background pattern -->
|
|
<div class="absolute inset-0 opacity-5">
|
|
<div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.1)_1px,transparent_1px)] bg-[size:64px_64px]"></div>
|
|
</div>
|
|
|
|
<div class="container-wrapper relative z-10">
|
|
<div class="text-center max-w-3xl mx-auto mb-20">
|
|
<span class="inline-block px-4 py-2 rounded-full bg-primary-400/20 text-primary-300 text-sm font-bold uppercase tracking-wider mb-4">Our Process</span>
|
|
<h2 class="text-4xl sm:text-5xl font-bold text-white mb-6">How We Work</h2>
|
|
<p class="text-xl text-secondary-300">
|
|
A proven methodology that delivers results, on time and on budget.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-7xl mx-auto">
|
|
{steps.map((step, index) => (
|
|
<div class="relative" data-animate="fade-up" data-delay={String(index * 150)}>
|
|
{/* Connecting line */}
|
|
{index < steps.length - 1 && (
|
|
<div class="hidden lg:block absolute top-20 left-[60%] w-full h-0.5 bg-gradient-to-r from-primary-500/50 to-transparent"></div>
|
|
)}
|
|
|
|
<div class="group relative bg-white/5 backdrop-blur-sm rounded-2xl p-8 border border-white/10 hover:bg-white/10 hover:border-primary-400/50 transition-all duration-500">
|
|
{/* Number badge */}
|
|
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center mb-6 shadow-lg group-hover:scale-110 transition-transform duration-500">
|
|
<span class="text-2xl font-bold text-white">{step.number}</span>
|
|
</div>
|
|
|
|
<h3 class="text-2xl font-bold text-white mb-4">{step.title}</h3>
|
|
<p class="text-secondary-300 leading-relaxed">{step.description}</p>
|
|
|
|
{/* Decorative dot */}
|
|
<div class="absolute bottom-6 right-6 w-2 h-2 bg-primary-400 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div class="text-center mt-16">
|
|
<a href="/contact" class="inline-flex items-center justify-center rounded-xl bg-white px-10 py-5 text-lg font-bold text-secondary-900 transition-all hover:shadow-2xl hover:scale-105 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-secondary-900">
|
|
Start Your Journey
|
|
<svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats/Metrics Section - Enhanced -->
|
|
<section class="py-24 bg-white dark:bg-secondary-900">
|
|
<div class="container-wrapper">
|
|
<div class="text-center max-w-3xl mx-auto mb-16" data-animate="fade-up">
|
|
<span class="inline-block px-4 py-2 rounded-full bg-accent-50 dark:bg-accent-900/20 text-accent-700 dark:text-accent-300 text-sm font-bold uppercase tracking-wider mb-4">Track Record</span>
|
|
<h2 class="text-4xl sm:text-5xl font-bold text-secondary-900 dark:text-secondary-100 mb-6">Numbers That Matter</h2>
|
|
<p class="text-xl text-secondary-600 dark:text-secondary-400">
|
|
Our success is measured by the impact we create for our clients.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{stats.map((stat, index) => (
|
|
<div class="group text-center bg-gradient-to-br from-secondary-50 to-white dark:from-secondary-800 dark:to-secondary-800/80 rounded-3xl p-10 border-2 border-secondary-100 dark:border-secondary-700 hover:border-primary-400 hover:shadow-2xl transition-all duration-500 hover:-translate-y-2" data-animate="scale-up" data-delay={String(index * 100)}>
|
|
{/* Icon */}
|
|
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-12 transition-all duration-500 shadow-lg">
|
|
{stat.icon === 'briefcase' && (
|
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
|
</svg>
|
|
)}
|
|
{stat.icon === 'heart' && (
|
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
|
|
</svg>
|
|
)}
|
|
{stat.icon === 'building' && (
|
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
|
</svg>
|
|
)}
|
|
{stat.icon === 'clock' && (
|
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
)}
|
|
</div>
|
|
|
|
<div class="stat-counter text-5xl font-bold text-secondary-900 dark:text-secondary-100 mb-2" data-target={stat.value} data-suffix={stat.suffix}>
|
|
0{stat.suffix}
|
|
</div>
|
|
<div class="text-secondary-600 dark:text-secondary-400 font-semibold">{stat.label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Testimonials Section - Enhanced -->
|
|
<section class="py-24 bg-gradient-to-b from-secondary-50 to-white dark:from-secondary-900 dark:to-secondary-900">
|
|
<div class="container-wrapper">
|
|
<div class="text-center max-w-3xl mx-auto mb-20" data-animate="fade-up">
|
|
<span class="inline-block px-4 py-2 rounded-full bg-accent-50 dark:bg-accent-900/20 text-accent-700 dark:text-accent-300 text-sm font-bold uppercase tracking-wider mb-4">Client Stories</span>
|
|
<h2 class="text-4xl sm:text-5xl font-bold text-secondary-900 dark:text-secondary-100 mb-6">Loved by Teams Worldwide</h2>
|
|
<p class="text-xl text-secondary-600 dark:text-secondary-400">
|
|
Don't just take our word for it. Here's what our clients have to say about working with us.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Testimonials Carousel -->
|
|
<div class="relative max-w-5xl mx-auto" data-animate="fade-up" data-delay="200">
|
|
<div class="testimonial-carousel overflow-hidden rounded-3xl" aria-roledescription="carousel" aria-label="Client testimonials">
|
|
<div class="testimonial-track flex transition-transform duration-500 ease-in-out" aria-live="polite" aria-atomic="false">
|
|
{testimonials.map((testimonial, index) => (
|
|
<div class="testimonial-slide w-full flex-shrink-0 px-4" data-index={index} role="group" aria-roledescription="slide" aria-label={`Testimonial ${index + 1} of ${testimonials.length}`}>
|
|
<div class="bg-gradient-to-br from-white to-secondary-50 dark:from-secondary-800 dark:to-secondary-800 rounded-3xl p-10 sm:p-14 border-2 border-secondary-100 dark:border-secondary-700 shadow-xl">
|
|
<!-- Star rating -->
|
|
<div class="flex gap-1 mb-6" aria-label={`${testimonial.rating || 5} out of 5 stars`}>
|
|
{[...Array(testimonial.rating || 5)].map(() => (
|
|
<svg class="w-6 h-6 text-accent-500" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
|
|
</svg>
|
|
))}
|
|
</div>
|
|
|
|
<!-- Quote icon -->
|
|
<svg class="w-16 h-16 text-primary-500/20 mb-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path>
|
|
</svg>
|
|
|
|
<blockquote class="text-2xl sm:text-3xl text-secondary-800 dark:text-secondary-200 font-medium leading-relaxed mb-10">
|
|
"{testimonial.quote}"
|
|
</blockquote>
|
|
|
|
<div class="flex items-center">
|
|
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center text-white font-bold text-xl shadow-lg" aria-hidden="true">
|
|
{testimonial.avatar}
|
|
</div>
|
|
<div class="ml-5">
|
|
<div class="font-bold text-secondary-900 dark:text-secondary-100 text-lg">{testimonial.author}</div>
|
|
<div class="text-secondary-600 dark:text-secondary-400">{testimonial.role}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Carousel Controls -->
|
|
<div class="flex items-center justify-center mt-10 gap-6">
|
|
<button
|
|
class="carousel-prev w-14 h-14 rounded-full bg-white dark:bg-secondary-800 border-2 border-secondary-200 dark:border-secondary-700 flex items-center justify-center text-secondary-600 dark:text-secondary-400 hover:border-primary hover:text-primary hover:bg-primary-50 dark:hover:bg-primary-900/30 transition-all shadow-lg hover:shadow-xl"
|
|
aria-label="Previous testimonial"
|
|
>
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Dots indicator -->
|
|
<div class="carousel-dots flex gap-3">
|
|
{testimonials.map((_, index) => (
|
|
<button
|
|
class={`h-3 rounded-full transition-all ${index === 0 ? 'bg-primary w-10' : 'bg-secondary-300 hover:bg-secondary-400 w-3'}`}
|
|
data-index={index}
|
|
aria-label={`Go to testimonial ${index + 1}`}
|
|
>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<button
|
|
class="carousel-next w-14 h-14 rounded-full bg-white dark:bg-secondary-800 border-2 border-secondary-200 dark:border-secondary-700 flex items-center justify-center text-secondary-600 dark:text-secondary-400 hover:border-primary hover:text-primary hover:bg-primary-50 dark:hover:bg-primary-900/30 transition-all shadow-lg hover:shadow-xl"
|
|
aria-label="Next testimonial"
|
|
>
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ Section - NEW -->
|
|
<section class="py-24 bg-white dark:bg-secondary-900">
|
|
<div class="container-wrapper">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start max-w-7xl mx-auto">
|
|
<!-- Left column - Header -->
|
|
<div class="lg:sticky lg:top-8" data-animate="fade-right">
|
|
<span class="inline-block px-4 py-2 rounded-full bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 text-sm font-bold uppercase tracking-wider mb-4">FAQ</span>
|
|
<h2 class="text-4xl sm:text-5xl font-bold text-secondary-900 dark:text-secondary-100 mb-6">Common Questions</h2>
|
|
<p class="text-xl text-secondary-600 dark:text-secondary-400 mb-8">
|
|
Everything you need to know about working with us. Can't find the answer you're looking for?
|
|
</p>
|
|
<a href="/contact" class="inline-flex items-center text-primary-600 dark:text-primary-400 font-semibold hover:text-primary-700 dark:hover:text-primary-300 transition-colors">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
|
|
</svg>
|
|
Chat with our team
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Right column - Accordion -->
|
|
<div class="space-y-4" data-animate="fade-left" data-delay="150">
|
|
{faqs.map((faq, index) => (
|
|
<div class="group bg-secondary-50 dark:bg-secondary-800 rounded-2xl border-2 border-secondary-100 dark:border-secondary-700 hover:border-primary-300 transition-all duration-300 overflow-hidden">
|
|
<button
|
|
class="faq-question w-full text-left px-8 py-6 flex items-start justify-between gap-4"
|
|
data-faq-index={index}
|
|
aria-expanded="false"
|
|
aria-controls={`faq-answer-${index}`}
|
|
id={`faq-question-${index}`}
|
|
>
|
|
<span class="font-bold text-lg text-secondary-900 dark:text-secondary-100 pr-4">{faq.question}</span>
|
|
<svg class="faq-icon w-6 h-6 text-primary-500 flex-shrink-0 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</button>
|
|
<div class="faq-answer max-h-0 overflow-hidden transition-all duration-300" id={`faq-answer-${index}`} role="region" aria-labelledby={`faq-question-${index}`}>
|
|
<div class="px-8 pb-6 text-secondary-600 dark:text-secondary-400 leading-relaxed">
|
|
{faq.answer}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Final CTA Section - Enhanced -->
|
|
<section class="py-24 bg-gradient-to-br from-secondary-900 via-primary-900 to-primary-800 relative overflow-hidden">
|
|
<!-- Background decorations -->
|
|
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
|
<div class="absolute -top-40 -right-40 w-[500px] h-[500px] bg-accent/20 rounded-full blur-3xl"></div>
|
|
<div class="absolute -bottom-40 -left-40 w-[500px] h-[500px] bg-primary/20 rounded-full blur-3xl"></div>
|
|
<div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:64px_64px]"></div>
|
|
</div>
|
|
|
|
<div class="container-wrapper text-center relative z-10">
|
|
<div class="max-w-4xl mx-auto" data-animate="fade-up">
|
|
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-8 leading-tight">
|
|
Ready to Build Something <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-300 to-accent-400">Amazing?</span>
|
|
</h2>
|
|
<p class="text-xl sm:text-2xl text-secondary-200 mb-12 max-w-2xl mx-auto leading-relaxed">
|
|
Let's turn your vision into reality. Get in touch and we'll schedule a free consultation to discuss your project.
|
|
</p>
|
|
|
|
<div class="flex flex-wrap justify-center gap-6">
|
|
<a
|
|
href="/contact"
|
|
class="group inline-flex items-center justify-center rounded-xl bg-white px-12 py-6 text-lg font-bold text-secondary-900 transition-all hover:shadow-2xl hover:shadow-white/30 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-900"
|
|
>
|
|
Get Started Today
|
|
<svg class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
|
</svg>
|
|
</a>
|
|
<a
|
|
href="/portfolio"
|
|
class="inline-flex items-center justify-center rounded-xl border-2 border-white/30 bg-white/5 backdrop-blur-sm px-12 py-6 text-lg font-bold text-white transition-all hover:bg-white/10 hover:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-primary-900"
|
|
>
|
|
<svg class="mr-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
|
|
</svg>
|
|
View Case Studies
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Contact info -->
|
|
<div class="mt-16 pt-12 border-t border-white/10">
|
|
<p class="text-secondary-300 mb-6">Prefer to reach out directly?</p>
|
|
<div class="flex flex-wrap justify-center gap-8 text-white">
|
|
<a href="mailto:admin@workroot.in" class="flex items-center gap-2 hover:text-primary-300 transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
|
</svg>
|
|
<span class="font-semibold">admin@workroot.in</span>
|
|
</a>
|
|
<a href="tel:+919561417403" class="flex items-center gap-2 hover:text-primary-300 transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
|
</svg>
|
|
<span class="font-semibold">+91 9561417403</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</BaseLayout>
|
|
|
|
<style>
|
|
/* Animation keyframes */
|
|
@keyframes slide-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-slow {
|
|
0%, 100% {
|
|
opacity: 0.4;
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-slower {
|
|
0%, 100% {
|
|
opacity: 0.2;
|
|
}
|
|
50% {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
.animate-slide-up {
|
|
animation: slide-up 0.8s ease-out forwards;
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fade-in 0.8s ease-out forwards;
|
|
}
|
|
|
|
.animate-pulse-slow {
|
|
animation: pulse-slow 4s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-pulse-slower {
|
|
animation: pulse-slower 6s ease-in-out infinite;
|
|
}
|
|
|
|
/* Stat counter animation */
|
|
.stat-counter {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* FAQ accordion styles */
|
|
.faq-answer {
|
|
transition: max-height 0.3s ease-out;
|
|
}
|
|
|
|
.faq-question[aria-expanded="true"] + .faq-answer {
|
|
max-height: 500px;
|
|
}
|
|
|
|
.faq-question[aria-expanded="true"] .faq-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Stats counter animation
|
|
function animateCounters() {
|
|
const counters = document.querySelectorAll('.stat-counter');
|
|
const duration = 2000;
|
|
|
|
counters.forEach((counter) => {
|
|
const target = parseInt(counter.getAttribute('data-target') || '0');
|
|
const suffix = counter.getAttribute('data-suffix') || '';
|
|
const startTime = performance.now();
|
|
|
|
function updateCounter(currentTime: number) {
|
|
const elapsed = currentTime - startTime;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
|
const current = Math.floor(easeOutQuart * target);
|
|
|
|
counter.textContent = current + suffix;
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(updateCounter);
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(updateCounter);
|
|
});
|
|
}
|
|
|
|
// Testimonials carousel
|
|
function initCarousel() {
|
|
const track = document.querySelector('.testimonial-track') as HTMLElement;
|
|
const slides = document.querySelectorAll('.testimonial-slide');
|
|
const dots = document.querySelectorAll('.carousel-dots button');
|
|
const prevBtn = document.querySelector('.carousel-prev');
|
|
const nextBtn = document.querySelector('.carousel-next');
|
|
|
|
if (!track || slides.length === 0) return;
|
|
|
|
let currentIndex = 0;
|
|
let autoplayInterval: ReturnType<typeof setInterval>;
|
|
const totalSlides = slides.length;
|
|
const autoplayDelay = 6000;
|
|
|
|
function goToSlide(index: number) {
|
|
currentIndex = (index + totalSlides) % totalSlides;
|
|
track.style.transform = `translateX(-${currentIndex * 100}%)`;
|
|
|
|
dots.forEach((dot, i) => {
|
|
if (i === currentIndex) {
|
|
dot.classList.remove('bg-secondary-300', 'hover:bg-secondary-400', 'w-3');
|
|
dot.classList.add('bg-primary', 'w-10');
|
|
} else {
|
|
dot.classList.add('bg-secondary-300', 'hover:bg-secondary-400', 'w-3');
|
|
dot.classList.remove('bg-primary', 'w-10');
|
|
}
|
|
});
|
|
}
|
|
|
|
function nextSlide() {
|
|
goToSlide(currentIndex + 1);
|
|
}
|
|
|
|
function prevSlide() {
|
|
goToSlide(currentIndex - 1);
|
|
}
|
|
|
|
function startAutoplay() {
|
|
autoplayInterval = setInterval(nextSlide, autoplayDelay);
|
|
}
|
|
|
|
function stopAutoplay() {
|
|
clearInterval(autoplayInterval);
|
|
}
|
|
|
|
function resetAutoplay() {
|
|
stopAutoplay();
|
|
startAutoplay();
|
|
}
|
|
|
|
// Event listeners
|
|
prevBtn?.addEventListener('click', () => {
|
|
prevSlide();
|
|
resetAutoplay();
|
|
});
|
|
|
|
nextBtn?.addEventListener('click', () => {
|
|
nextSlide();
|
|
resetAutoplay();
|
|
});
|
|
|
|
dots.forEach((dot, index) => {
|
|
dot.addEventListener('click', () => {
|
|
goToSlide(index);
|
|
resetAutoplay();
|
|
});
|
|
});
|
|
|
|
// Pause on hover
|
|
track.addEventListener('mouseenter', stopAutoplay);
|
|
track.addEventListener('mouseleave', startAutoplay);
|
|
|
|
// Start autoplay
|
|
startAutoplay();
|
|
}
|
|
|
|
// FAQ Accordion
|
|
function initFAQ() {
|
|
const faqButtons = document.querySelectorAll('.faq-question');
|
|
|
|
faqButtons.forEach((button) => {
|
|
button.addEventListener('click', () => {
|
|
const isExpanded = button.getAttribute('aria-expanded') === 'true';
|
|
|
|
// Close all FAQs
|
|
faqButtons.forEach((btn) => {
|
|
btn.setAttribute('aria-expanded', 'false');
|
|
});
|
|
|
|
// Toggle current FAQ
|
|
if (!isExpanded) {
|
|
button.setAttribute('aria-expanded', 'true');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Intersection Observer for counter animation
|
|
const statsSection = document.querySelector('.stat-counter')?.closest('section');
|
|
if (statsSection) {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
animateCounters();
|
|
observer.disconnect();
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.3 }
|
|
);
|
|
observer.observe(statsSection);
|
|
}
|
|
|
|
// Initialize components
|
|
initCarousel();
|
|
initFAQ();
|
|
|
|
// Smooth scroll for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
const href = this.getAttribute('href');
|
|
if (href && href !== '#') {
|
|
e.preventDefault();
|
|
const target = document.querySelector(href);
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|