964 lines
55 KiB
Plaintext
964 lines
55 KiB
Plaintext
---
|
||
// Home page - WorkRoot IT Solutions
|
||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||
import SEO from '../components/SEO.astro';
|
||
import TrustStrip from '../components/TrustStrip.astro';
|
||
import InlineLeadForm from '../components/InlineLeadForm.astro';
|
||
import HomepageFaq from '../components/HomepageFaq.astro';
|
||
import ProofNumbers from '../components/ProofNumbers.astro';
|
||
import PricingTimelineBand from '../components/PricingTimelineBand.astro';
|
||
import GuaranteeBand from '../components/GuaranteeBand.astro';
|
||
|
||
// Services data — outcome-led headlines with anchor slugs that deep-link
|
||
// into the matching detail sections on /services.
|
||
const services = [
|
||
{
|
||
icon: 'code',
|
||
slug: 'web-development',
|
||
title: 'Web Development',
|
||
outcome: 'Ship a fast, SEO-ready web product your customers actually convert on.',
|
||
description: 'Angular, React, Next.js, Astro frontends backed by Spring Boot APIs — built for speed, scale, and search visibility.',
|
||
features: ['Angular/React/Next.js', 'Spring Boot APIs', 'Astro Static Sites'],
|
||
},
|
||
{
|
||
icon: 'smartphone',
|
||
slug: 'mobile-development',
|
||
title: 'Mobile Apps',
|
||
outcome: 'Launch on iOS and Android from a single codebase — without the native-team overhead.',
|
||
description: 'Cross-platform React Native and Expo apps with offline-first sync, push notifications, and store-ready builds.',
|
||
features: ['React Native / Expo', 'iOS & Android', 'Offline-First Apps'],
|
||
},
|
||
{
|
||
icon: 'brain',
|
||
slug: 'erp-solutions',
|
||
title: 'ERP & Enterprise Systems',
|
||
outcome: 'Replace spreadsheets and ageing tools with one system your operations team trusts.',
|
||
description: 'Custom ERP, CRM, and admin platforms designed around your real workflows — already running in universities and government bodies.',
|
||
features: ['University Management', 'Police Management', 'Crematorium SCMS'],
|
||
},
|
||
{
|
||
icon: 'cloud',
|
||
slug: 'government-systems',
|
||
title: 'Government IT Solutions',
|
||
outcome: 'Roll out secure, compliant platforms across districts without rewriting them for each one.',
|
||
description: 'Multi-district deployments with role-based access, audit trails, and the uptime public services require.',
|
||
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.
|
||
//
|
||
// `image` / `imageAlt` — path to a static asset in /public/images/testimonials.
|
||
// The current files are neutral SVG initial-avatars (see public/images/
|
||
// testimonials/*.svg). They were generated as placeholders because we don't
|
||
// yet have signed photo releases from these clients; swap in real headshots
|
||
// (.jpg / .webp, ≥256×256) by replacing the file at the same path — no
|
||
// template change needed.
|
||
// `initials` — 2-letter fallback shown if the image fails to load
|
||
// (handled by an `onerror` swap in the template).
|
||
// `metric` / `metricLabel` — concrete, attributable outcome surfaced as a
|
||
// badge beside each quote. Numbers come from the
|
||
// delivered case studies referenced in the quote.
|
||
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',
|
||
image: '/images/testimonials/ajay-pruthi.svg',
|
||
imageAlt: 'Portrait of Ajay Pruthi, Founder of PLNR',
|
||
initials: 'AP',
|
||
metric: '3×',
|
||
metricLabel: 'faster loan processing',
|
||
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',
|
||
image: '/images/testimonials/dhirendra-singh.svg',
|
||
imageAlt: 'Portrait of Dhirendra Singh, Director of RENTEC',
|
||
initials: 'DS',
|
||
metric: '+42%',
|
||
metricLabel: 'organic traffic in 90 days',
|
||
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',
|
||
image: '/images/testimonials/dilip-raj.svg',
|
||
imageAlt: 'Portrait of Dilip Raj, Director of MOC Soft Technologies',
|
||
initials: 'DR',
|
||
metric: '12k+',
|
||
metricLabel: 'students served at IIT Patna',
|
||
rating: 5,
|
||
},
|
||
];
|
||
|
||
// NOTE: The homepage stat band is rendered once by <ProofNumbers />, which
|
||
// holds the canonical site-wide proof set (20+ Projects · 11 Districts ·
|
||
// 50,000+ Records · 8+ Years). The previously-duplicated "Numbers That
|
||
// Matter" stats section (and its local `stats` array + count-up script) was
|
||
// removed so a visitor never sees the same four numbers twice on one page.
|
||
|
||
// Technology stack data — relocated below the fold so social proof leads the
|
||
// hero. Each entry pairs the framework name with a short context line and a
|
||
// neutral monochrome SVG icon (uses currentColor so the grayscale →
|
||
// brand-color hover treatment is driven entirely by Tailwind utility classes).
|
||
const techStack = [
|
||
{
|
||
name: 'Angular',
|
||
context: 'Enterprise front-ends',
|
||
icon: '<svg viewBox="0 0 24 24" class="w-8 h-8" fill="currentColor" aria-hidden="true"><path d="M12 2.5 2.5 5.7l1.6 12 7.9 3.8 7.9-3.8 1.6-12L12 2.5Zm0 2.3 6.3 11.3h-1.9l-1.3-3.1H9l-1.3 3.1H5.7L12 4.8Zm-2.3 6.5h4.6L12 7.3l-2.3 4Z"/></svg>',
|
||
},
|
||
{
|
||
name: 'Spring Boot',
|
||
context: 'Backend APIs',
|
||
icon: '<svg viewBox="0 0 24 24" class="w-8 h-8" fill="currentColor" aria-hidden="true"><path d="M21.6 4.2c-.4 1-1 1.9-1.5 2.7C18.4 4.5 15.4 3 12 3 6.5 3 2 7.5 2 13s4.5 10 10 10c5 0 9.1-3.7 9.9-8.5.5-2.4.1-5-1.3-7.4l1-2.9Zm-9.6 17c-4.6 0-8.4-3.8-8.4-8.4 0-3.4 2.1-6.4 5.1-7.7-1 1.6-1.7 3.4-2.1 5.3l-.1.6 1.1.4c2.4.8 4.8 1.8 7 3.6 1.4 1.1 2.4 2.6 2.8 4.3-1.4 1.2-3.3 1.9-5.4 1.9Zm6.3-2.5c-.8-2.5-3-4.8-6.5-6.5-1.2-.6-2.5-1.1-3.7-1.4.5-2.1 1.5-4 2.9-5.5 1.1-.1 2.2 0 3.3.4 1.8.6 3.4 1.8 4.6 3.4l-.2.3-.1.1c-.8 1.4-1.4 3-1.7 4.6-.5 1.7-.7 3.4-.5 4.6h1.9Z"/></svg>',
|
||
},
|
||
{
|
||
name: 'Next.js',
|
||
context: 'React SSR & ISR',
|
||
icon: '<svg viewBox="0 0 24 24" class="w-8 h-8" fill="currentColor" aria-hidden="true"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2Zm-.8 4.5h1.6v9.2H11.3l-3.5-5v5H6.2V6.5h1.5l3.5 5v-5Zm5.9 0h1.5v11h-1.5v-11Z"/></svg>',
|
||
},
|
||
{
|
||
name: 'Astro',
|
||
context: 'Marketing & docs sites',
|
||
icon: '<svg viewBox="0 0 24 24" class="w-8 h-8" fill="currentColor" aria-hidden="true"><path d="M8.4 17.8c-.4-1.4-.5-2.7 0-3.4l.1-.1c.4 1.1 1.4 1.6 2.7 2 2 .6 2.6 1.4 1.8 3.1l-.1.2c-.6 1.1-1.8 2-2.6 2-.7 0-1.3-.5-1.6-1.4 0-.3-.1-.6-.1-1l-.2-1.4ZM14.8 2 18 13H6L9.2 2h5.6Zm-2.8 2.6L9.7 12h4.6L12 4.6Z"/></svg>',
|
||
},
|
||
{
|
||
name: 'Golang',
|
||
context: 'High-throughput services',
|
||
icon: '<svg viewBox="0 0 24 24" class="w-8 h-8" fill="currentColor" aria-hidden="true"><path d="M2.4 11.6c-.1 0-.1 0 0 0-.1-.1-.1-.1 0-.2l.5-.6c.1-.1.2-.1.3-.1H7c.1 0 .1.1.1.2l-.4.5c-.1.1-.2.2-.3.2l-4 .1v-.1Zm-1.9 1.2c-.1 0-.1-.1 0-.2l.5-.6c.1-.1.2-.1.3-.1h5.4c.1 0 .2.1.1.2l-.2.5c-.1.1-.2.2-.3.2l-5.8 0Zm3.1 1.1c-.1 0-.1-.1 0-.2l.4-.5c.1-.1.2-.1.3-.1h2.4c.1 0 .2.1.2.2l-.1.5c0 .1-.1.2-.2.2l-3-.1Zm12.6-2.6c-.8.2-1.4.4-2.2.6-.2 0-.2 0-.4-.1-.2-.2-.3-.4-.6-.5-.8-.4-1.6-.3-2.4.2-.9.6-1.4 1.4-1.4 2.5 0 1 .7 1.9 1.7 2 .9.1 1.6-.2 2.2-.9.1-.2.2-.3.4-.5h-3.1c-.3 0-.4-.2-.3-.5l.4-.7c.1-.2.3-.3.5-.3h5.8c0 .1 0 .1 0 .2-.2 1.2-.7 2.2-1.5 3.1-1 1-2.3 1.7-3.7 1.8-2.5.3-4.7-.7-5.7-3-.8-1.9-.5-3.7.6-5.4 1.2-1.8 3-2.8 5.2-3.2 1.8-.3 3.5-.1 5 1 1.1.8 1.7 1.9 2 3.2 0 .2 0 .3-.3.3Zm3.5 5.4c-1.6 0-3-.5-4.2-1.7-1-1-1.6-2.2-1.7-3.6-.2-2.1.4-3.9 1.8-5.4 1.5-1.6 3.3-2.5 5.4-2.5 2 0 3.5.7 4.6 2.2.9 1.4 1.2 2.9 1 4.5-.4 3.7-3.2 6.2-6.9 6.5Zm3.9-6.6c0-.3-.1-.5-.1-.8-.2-1.4-1.4-2-2.7-1.7-1.3.3-2.1 1.1-2.4 2.4-.2 1.1.3 2.2 1.3 2.6.8.4 1.6.3 2.3-.2 1.1-.6 1.6-1.5 1.6-2.3Z"/></svg>',
|
||
},
|
||
{
|
||
name: 'PostgreSQL',
|
||
context: 'Production data layer',
|
||
icon: '<svg viewBox="0 0 24 24" class="w-8 h-8" fill="currentColor" aria-hidden="true"><path d="M12 3c-3.3 0-6 1-6 2.3v13.5c0 1.3 2.7 2.3 6 2.3s6-1 6-2.3V5.3C18 4 15.3 3 12 3Zm0 1.5c2.9 0 5 .8 5 1.5s-2.1 1.5-5 1.5-5-.8-5-1.5 2.1-1.5 5-1.5Zm5 14.3c0 .7-2.1 1.5-5 1.5s-5-.8-5-1.5v-2.4c1.2.7 3 1.1 5 1.1s3.8-.4 5-1.1v2.4Zm0-4.6c0 .7-2.1 1.5-5 1.5s-5-.8-5-1.5v-2.4c1.2.7 3 1.1 5 1.1s3.8-.4 5-1.1v2.4Zm0-4.6c0 .7-2.1 1.5-5 1.5s-5-.8-5-1.5V7.7c1.2.7 3 1.1 5 1.1s3.8-.4 5-1.1v2.4Z"/></svg>',
|
||
},
|
||
];
|
||
|
||
// FAQ content lives in <HomepageFaq />, which renders the only homepage FAQ
|
||
// section and emits the only FAQPage JSON-LD on this page. The duplicate
|
||
// "Common Questions" block that used to live above the tech-stack section
|
||
// was removed; its unique questions were merged into HomepageFaq's
|
||
// `moneyFaqs` array so no buyer-facing content was dropped.
|
||
---
|
||
|
||
<BaseLayout
|
||
title="Home"
|
||
description="WorkRoot IT Solutions LLP builds production-grade web, mobile, ERP, and government IT systems for enterprises and growing teams. Free consultation, reply within 1 business day."
|
||
>
|
||
<SEO
|
||
slot="head"
|
||
type="WebPage"
|
||
/>
|
||
|
||
<!-- Hero Section - Enhanced -->
|
||
<section class="relative lg:min-h-[85vh] 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 lg:py-32">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||
<!-- Left column — copy + CTAs -->
|
||
<div class="text-center lg:text-left">
|
||
<!-- 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 by 20+ teams · Deployed across 11 districts</span>
|
||
</div>
|
||
|
||
<!-- Main heading — benefit-led: outcome + audience -->
|
||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white leading-[1.1] tracking-tight">
|
||
<span class="block opacity-0 animate-slide-up" style="animation-delay: 0.2s;">Custom Software That</span>
|
||
<span class="block opacity-0 animate-slide-up" style="animation-delay: 0.4s;">Powers <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 via-primary-300 to-accent-400">Enterprises & Governments</span></span>
|
||
</h1>
|
||
|
||
<p class="mt-6 text-lg sm:text-xl text-secondary-200 max-w-xl mx-auto lg:mx-0 opacity-0 animate-slide-up leading-relaxed" style="animation-delay: 0.6s;">
|
||
We design, build, and run production-grade web, mobile, and ERP systems for startups, enterprises, and government bodies.
|
||
</p>
|
||
|
||
<!-- Dual CTA Buttons — action verb + clear secondary -->
|
||
<div class="mt-10 flex flex-wrap justify-center lg:justify-start gap-4 opacity-0 animate-slide-up" style="animation-delay: 0.8s;">
|
||
<a
|
||
href="/contact?source=hero"
|
||
data-cta="hero-primary"
|
||
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"
|
||
>
|
||
Get my free proposal
|
||
<svg class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
||
</svg>
|
||
</a>
|
||
<a
|
||
href="/portfolio"
|
||
data-cta="hero-secondary"
|
||
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" aria-hidden="true">
|
||
<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>
|
||
See 20+ case studies
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Tertiary click-to-call — one-tap dial for visitors who'd rather
|
||
talk now. Min 48px tap target per WCAG 2.5.5 / Apple HIG. -->
|
||
<p class="mt-6 text-base sm:text-lg text-secondary-200 opacity-0 animate-slide-up flex flex-wrap items-center justify-center lg:justify-start gap-x-2 gap-y-1" style="animation-delay: 0.85s;">
|
||
<span>Prefer to talk now?</span>
|
||
<a
|
||
href="tel:+919561417403"
|
||
data-cta="hero-call"
|
||
aria-label="Call WorkRoot at +91 95614 17403"
|
||
class="inline-flex min-h-[48px] items-center gap-2 rounded-lg px-2 font-semibold text-white underline decoration-primary-400/60 underline-offset-4 transition-colors hover:text-primary-200 hover:decoration-primary-300 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-secondary-900"
|
||
>
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||
<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" />
|
||
</svg>
|
||
+91 95614 17403
|
||
</a>
|
||
</p>
|
||
|
||
<!-- Micro-trust line under CTAs -->
|
||
<p class="mt-6 text-sm sm:text-base text-secondary-300 opacity-0 animate-slide-up flex flex-wrap items-center justify-center lg:justify-start gap-x-3 gap-y-2" style="animation-delay: 0.9s;" aria-label="Trust signals">
|
||
<span class="inline-flex items-center gap-2">
|
||
<svg class="w-4 h-4 text-accent-400" 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>
|
||
Free 30-min discovery call
|
||
</span>
|
||
<span class="hidden sm:inline text-secondary-500" aria-hidden="true">·</span>
|
||
<span>Reply within 1 business day</span>
|
||
<span class="hidden sm:inline text-secondary-500" aria-hidden="true">·</span>
|
||
<span>No commitment</span>
|
||
</p>
|
||
</div>
|
||
<!-- /Left column -->
|
||
|
||
<!-- Right column — framed dashboard mock so the hero leads with a
|
||
concrete product visual, not text alone. The image is a polished
|
||
placeholder UI (public/images/product-dashboard.svg); swap in a
|
||
real product screenshot or screen-recording poster frame
|
||
(≥1200×720, .webp/.png) at the same path — no template change
|
||
needed. Explicit width/height keep CLS at zero while it loads. -->
|
||
<figure class="mt-4 lg:mt-0 w-full max-w-xl mx-auto lg:mx-0 lg:ml-auto opacity-0 animate-slide-up" style="animation-delay: 1s;">
|
||
<div class="relative rounded-2xl border border-white/15 bg-white/5 backdrop-blur-sm shadow-2xl shadow-primary/20 overflow-hidden">
|
||
<!-- Glow behind the frame -->
|
||
<div class="absolute -inset-px rounded-2xl bg-gradient-to-tr from-primary-500/10 via-transparent to-accent-400/10 pointer-events-none" aria-hidden="true"></div>
|
||
<!-- Browser chrome -->
|
||
<div class="flex items-center gap-2 px-4 py-3 border-b border-white/10 bg-white/5" aria-hidden="true">
|
||
<span class="w-3 h-3 rounded-full bg-red-400/80"></span>
|
||
<span class="w-3 h-3 rounded-full bg-accent-400/80"></span>
|
||
<span class="w-3 h-3 rounded-full bg-green-400/80"></span>
|
||
<span class="ml-4 inline-flex items-center h-6 px-3 rounded-md bg-white/10 text-xs text-secondary-300 font-medium">app.workroot.in/dashboard</span>
|
||
</div>
|
||
<img
|
||
src="/images/product-dashboard.svg"
|
||
alt="WorkRoot project dashboard preview — delivery metrics, activity timeline, and deployment overview"
|
||
width="1200"
|
||
height="720"
|
||
loading="eager"
|
||
decoding="async"
|
||
class="block w-full h-auto"
|
||
/>
|
||
</div>
|
||
</figure>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scroll indicator — points at the TrustStrip social-proof strip just
|
||
below the hero so the first interaction surface is trust, not stack. -->
|
||
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 opacity-0 animate-fade-in" style="animation-delay: 1s;">
|
||
<a href="#trust-strip" class="flex flex-col items-center text-white/60 hover:text-white transition-colors group" aria-label="Scroll to client logos">
|
||
<span class="text-sm mb-2">See who we work with</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>
|
||
|
||
<!-- Trust Strip — single-row, grayscale-on-default / colour-on-hover
|
||
row of client + partner logos. Replaces the older ClientLogos grid:
|
||
see src/components/TrustStrip.astro for the rationale (sr-only
|
||
"Trusted by" heading, explicit width/height on every <img> for CLS,
|
||
3+3 mobile layout, dark-mode invert filter). The wrapper div
|
||
preserves the legacy `#client-logos` anchor for any external
|
||
deep-links / analytics callers that still target it. -->
|
||
<div id="client-logos">
|
||
<TrustStrip />
|
||
</div>
|
||
|
||
<!-- Proof Numbers Band — replaces the older "Why Choose Us" benefits grid.
|
||
Leads with hard, scannable numbers instead of soft adjectives so the
|
||
first below-the-fold surface is concrete proof, not generic copy. -->
|
||
<ProofNumbers />
|
||
|
||
<!-- 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-3">{service.title}</h3>
|
||
<p class="text-lg font-semibold text-primary-700 dark:text-primary-300 mb-4 leading-snug">{service.outcome}</p>
|
||
<p class="text-secondary-600 dark:text-secondary-400 text-base 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 -->
|
||
<a
|
||
href={`/services#${service.slug}`}
|
||
class="mt-6 inline-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 focus:outline-none focus:underline"
|
||
aria-label={`Learn more about ${service.title}`}
|
||
>
|
||
<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" aria-hidden="true">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
||
</svg>
|
||
</a>
|
||
</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>
|
||
|
||
<!-- Mid-page Conversion CTA — sits directly after the Services section so
|
||
mobile visitors hit the funnel early instead of having to scroll past
|
||
How-It-Works, testimonials, the tech stack and the FAQ to reach the
|
||
inline lead form. Primary action jumps straight to the on-page inline
|
||
lead form (#inline-lead-form, smooth-scrolled by the anchor handler at
|
||
the bottom of this page); secondary action is a one-tap phone call. -->
|
||
<section
|
||
aria-labelledby="midpage-cta-heading"
|
||
class="bg-gradient-to-r from-primary-600 to-primary-700 dark:from-primary-700 dark:to-primary-800"
|
||
>
|
||
<div class="container-wrapper py-10 sm:py-12">
|
||
<div class="flex flex-col items-center gap-5 text-center md:flex-row md:justify-between md:text-left md:gap-8 max-w-5xl mx-auto">
|
||
<div class="md:flex-1">
|
||
<h2 id="midpage-cta-heading" class="text-2xl sm:text-3xl font-bold text-white leading-tight">
|
||
Have a project in mind? Get a free proposal in 24 hours.
|
||
</h2>
|
||
<p class="mt-2 text-primary-100 text-sm sm:text-base">
|
||
No obligation · Free 30-min discovery call · NDA on request.
|
||
</p>
|
||
</div>
|
||
<div class="flex w-full flex-col sm:flex-row md:w-auto md:flex-shrink-0 gap-3">
|
||
<a
|
||
href="#inline-lead-form"
|
||
data-cta="midpage-primary"
|
||
class="inline-flex items-center justify-center rounded-xl bg-white px-7 py-4 text-base font-bold text-primary-700 shadow-lg transition-all hover:bg-primary-50 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-700"
|
||
>
|
||
Get my free proposal
|
||
<svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
||
</svg>
|
||
</a>
|
||
<a
|
||
href="tel:+919561417403"
|
||
data-cta="midpage-call"
|
||
class="inline-flex items-center justify-center rounded-xl border-2 border-white/40 bg-white/5 px-7 py-4 text-base font-bold text-white transition-all hover:bg-white/15 hover:border-white/60 focus:outline-none focus:ring-2 focus:ring-white/60 focus:ring-offset-2 focus:ring-offset-primary-700"
|
||
>
|
||
<svg class="mr-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||
<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" />
|
||
</svg>
|
||
Call now
|
||
</a>
|
||
</div>
|
||
</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?source=process" data-cta="process-cta" 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">
|
||
Get my free proposal
|
||
<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>
|
||
|
||
<!-- 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-8 sm:p-12 lg:p-14 border-2 border-secondary-100 dark:border-secondary-700 shadow-xl">
|
||
<!-- Header row: stars on the left, metric badge on the right.
|
||
On mobile (<640px) the badge wraps under the stars so the
|
||
layout stays clean at 360px. -->
|
||
<div class="flex flex-wrap items-start justify-between gap-4 mb-6">
|
||
<!-- Star rating -->
|
||
<div class="flex gap-1" 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>
|
||
|
||
<!-- Metric badge — concrete outcome from this engagement.
|
||
Uses primary brand palette in light mode and a softer
|
||
tinted background in dark mode for readability. -->
|
||
{testimonial.metric && (
|
||
<div class="inline-flex items-center gap-3 rounded-2xl bg-primary-50 dark:bg-primary-900/30 border border-primary-200 dark:border-primary-700/50 px-4 py-2 shadow-sm">
|
||
<span class="text-2xl sm:text-3xl font-extrabold text-primary-700 dark:text-primary-300 leading-none tracking-tight">{testimonial.metric}</span>
|
||
<span class="text-xs sm:text-sm font-medium text-secondary-700 dark:text-secondary-300 leading-tight max-w-[10rem]">{testimonial.metricLabel}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<!-- Quote icon -->
|
||
<svg class="w-12 h-12 sm:w-16 sm: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-xl sm:text-2xl lg:text-3xl text-secondary-800 dark:text-secondary-200 font-medium leading-relaxed mb-10">
|
||
"{testimonial.quote}"
|
||
</blockquote>
|
||
|
||
<!-- Author block: stacks under-quote with avatar + name/role. -->
|
||
<div class="flex items-center gap-5">
|
||
<div class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full shadow-lg ring-2 ring-white dark:ring-secondary-700 overflow-hidden flex-shrink-0 bg-gradient-to-br from-primary-500 to-primary-600">
|
||
<!-- Initials fallback rendered behind the image. If the
|
||
img 404s or fails to decode, removing it via onerror
|
||
reveals these initials so the slot is never blank. -->
|
||
<span class="absolute inset-0 flex items-center justify-center text-white font-bold text-lg sm:text-xl select-none" aria-hidden="true">
|
||
{testimonial.initials}
|
||
</span>
|
||
<img
|
||
src={testimonial.image}
|
||
alt={testimonial.imageAlt}
|
||
width="64"
|
||
height="64"
|
||
loading="lazy"
|
||
decoding="async"
|
||
class="relative w-full h-full object-cover"
|
||
onerror="this.style.display='none'"
|
||
/>
|
||
</div>
|
||
<div class="min-w-0">
|
||
<div class="font-bold text-secondary-900 dark:text-secondary-100 text-base sm:text-lg truncate">{testimonial.author}</div>
|
||
<div class="text-sm sm:text-base text-secondary-600 dark:text-secondary-400 truncate">{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>
|
||
|
||
<!-- Technologies We Work With — relocated from the hero so social proof
|
||
leads above the fold. Kept intentionally subdued (border-only cards,
|
||
neutral grayscale icons) so it reads as supporting context rather than
|
||
competing with the client-logo trust strip up top. -->
|
||
<section id="tech-stack" class="py-20 sm:py-24 bg-secondary-50 dark:bg-secondary-900/60 border-y border-secondary-100 dark:border-secondary-800">
|
||
<div class="container-wrapper">
|
||
<div class="text-center max-w-3xl mx-auto mb-12 sm:mb-16" data-animate="fade-up">
|
||
<span class="inline-block px-4 py-2 rounded-full bg-secondary-100 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-300 text-xs sm:text-sm font-bold uppercase tracking-wider mb-4">Tech Stack</span>
|
||
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-900 dark:text-secondary-100 mb-4 sm:mb-6">Technologies we work with</h2>
|
||
<p class="text-base sm:text-xl text-secondary-600 dark:text-secondary-400">
|
||
Battle-tested frameworks and runtimes we ship to production across enterprise, university, and government deployments.
|
||
</p>
|
||
</div>
|
||
|
||
<ul
|
||
class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4 max-w-6xl mx-auto"
|
||
role="list"
|
||
aria-label="Technologies we work with"
|
||
>
|
||
{techStack.map((tech, index) => (
|
||
<li
|
||
class="group flex flex-col items-center justify-center text-center gap-2 sm:gap-3 rounded-2xl border border-secondary-200 dark:border-secondary-700 bg-white dark:bg-secondary-800/70 px-3 py-5 sm:px-4 sm:py-6 min-w-0 transition-all duration-300 hover:-translate-y-1 hover:border-primary-300 hover:shadow-lg dark:hover:border-primary-500/60 focus-within:ring-2 focus-within:ring-primary-400"
|
||
data-animate="fade-up"
|
||
data-delay={String(index * 60)}
|
||
>
|
||
<span
|
||
class="text-secondary-400 dark:text-secondary-500 group-hover:text-primary-500 dark:group-hover:text-primary-400 transition-colors"
|
||
aria-hidden="true"
|
||
set:html={tech.icon}
|
||
/>
|
||
<span class="text-sm sm:text-base font-semibold text-secondary-800 dark:text-secondary-100 leading-tight break-words">
|
||
{tech.name}
|
||
</span>
|
||
<span class="text-[11px] sm:text-xs uppercase tracking-wider text-secondary-500 dark:text-secondary-400 leading-tight">
|
||
{tech.context}
|
||
</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
|
||
<p class="text-center text-sm text-secondary-500 dark:text-secondary-400 mt-10 sm:mt-12">
|
||
Also working with <span class="font-semibold text-secondary-700 dark:text-secondary-200">React Native</span>, <span class="font-semibold text-secondary-700 dark:text-secondary-200">MySQL</span>, <span class="font-semibold text-secondary-700 dark:text-secondary-200">Docker</span>, and <span class="font-semibold text-secondary-700 dark:text-secondary-200">GitHub Actions</span> — <a href="/services" class="text-primary-600 dark:text-primary-400 font-semibold hover:underline">see the full stack →</a>
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Pricing + Timeline Band — sits directly above the inline lead form
|
||
so late-stage visitors get the two answers they need (rough price
|
||
and rough duration) BEFORE filling in the form. Anchor
|
||
`#pricing-timeline` is referenced by the mobile sticky CTA bar /
|
||
nav for deep-linking. Placeholder values inside the component are
|
||
flagged with `data-stakeholder-confirm` markers + HTML comments. -->
|
||
<PricingTimelineBand />
|
||
|
||
<!-- Risk-reversal Guarantee Band — three short promises (satisfaction
|
||
guarantee, no long-term contracts, fixed-price quotes) wedged
|
||
between the pricing/timeline values and the lead form. Removes
|
||
last-mile objections at the exact moment the visitor is deciding
|
||
whether to commit to the form below. Anchor `#guarantees`. -->
|
||
<GuaranteeBand />
|
||
|
||
<!-- Inline Lead Form — sits between the tech-stack social-proof block
|
||
and the final CTA band so visitors who are ready to start a project can
|
||
submit a 3-field enquiry without leaving the homepage. Submits to the
|
||
same /api/contact endpoint and is tagged `source: 'homepage-inline'` so
|
||
the lead can be segmented downstream. -->
|
||
<InlineLeadForm />
|
||
|
||
<!-- Homepage FAQ — single canonical FAQ section for /. Covers the cost /
|
||
timeline / NDA / IP / GeM / stack questions buyers ask right before
|
||
converting, plus the process / support / team-augmentation / security
|
||
questions that used to live in the now-removed "Common Questions"
|
||
block. Sits between the inline lead form and the final CTA band so
|
||
late-stage objections are resolved before the visitor hits the final
|
||
call-to-action. Emits the only FAQPage JSON-LD on this page. -->
|
||
<HomepageFaq />
|
||
|
||
<!-- 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 ship in <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-300 to-accent-400">8 weeks</span> instead of 8 months?
|
||
</h2>
|
||
<p class="text-xl sm:text-2xl text-secondary-200 mb-10 max-w-2xl mx-auto leading-relaxed">
|
||
Tell us about your project and we'll send back a free, no-obligation scope and timeline within one business day.
|
||
</p>
|
||
|
||
<!-- What you'll get — reduces signup friction -->
|
||
<ul class="flex flex-wrap justify-center gap-x-6 gap-y-3 mb-10 text-secondary-200 text-sm sm:text-base" aria-label="What you get when you reach out">
|
||
<li class="inline-flex items-center gap-2">
|
||
<svg class="w-5 h-5 text-accent-400" 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>
|
||
Free 30-min discovery call
|
||
</li>
|
||
<li class="inline-flex items-center gap-2">
|
||
<svg class="w-5 h-5 text-accent-400" 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>
|
||
Fixed-price scope & timeline
|
||
</li>
|
||
<li class="inline-flex items-center gap-2">
|
||
<svg class="w-5 h-5 text-accent-400" 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>
|
||
NDA on request
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="flex flex-wrap justify-center gap-6">
|
||
<a
|
||
href="/contact?source=final-cta"
|
||
data-cta="final-primary"
|
||
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 my free proposal
|
||
<svg class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||
<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"
|
||
data-cta="final-secondary"
|
||
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" aria-hidden="true">
|
||
<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>
|
||
See 20+ 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;
|
||
}
|
||
|
||
/* (FAQ accordion styles moved into <HomepageFaq />, which now renders the
|
||
only homepage FAQ section.) */
|
||
</style>
|
||
|
||
<script>
|
||
// 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 script moved into <HomepageFaq />, which now renders the
|
||
// only homepage FAQ section and ships its own inline init.)
|
||
|
||
function bootHomepageScripts() {
|
||
initCarousel();
|
||
}
|
||
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', bootHomepageScripts);
|
||
} else {
|
||
bootHomepageScripts();
|
||
}
|
||
|
||
// 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>
|