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

agent: Apply about page CRO improvements

Browse Source
This commit is contained in:
platform-mcp
2026-06-17 14:18:59 +05:30
parent 387433cd26
commit 58c0cb5165
7 changed files with 1066 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/about.astro
+83 -93
View File
@@ -6,29 +6,41 @@ import BaseLayout from '../layouts/BaseLayout.astro';
import SEO from '../components/SEO.astro';
// Team member data
// NOTE FOR MAINTAINERS: `photo` points to a placeholder avatar in
// /public/images/team/. Replace each file with a real headshot (same
// path, JPG/WebP at ~800×600) and fill in the real `linkedin` URL —
// the markup renders the photo and LinkedIn icon automatically.
const teamMembers = [
{
name: 'Ajay Ghanwat',
role: 'Director',
bio: 'A visionary technology leader with deep expertise in enterprise software architecture and government IT systems. Ajay founded WorkRoot in 2022 with a mission to deliver world-class software solutions from India. He has led the delivery of 20+ projects including large-scale government deployments across multiple districts in Bihar and enterprise platforms for IIT Patna.',
role: 'Director & Lead Engineer',
bio: 'Founder and hands-on technical lead. Ajay has architected and shipped 20+ production systems — including the Bihar Police Management System deployed across 11 districts and the University platform for IIT Patna. When you work with WorkRoot, he is in the room reviewing your architecture.',
avatar: 'AG',
photo: '/images/team/ajay-ghanwat.svg',
social: {
twitter: 'https://x.com/GhanwatAjay',
linkedin: '',
},
},
{
name: 'Ashok Jamdade',
role: 'Director',
bio: 'An experienced business strategist and operations leader who brings strong client relationship management and project governance expertise to WorkRoot. Ashok ensures every project meets the highest standards of quality and is delivered on time, driving the company\'s growth and operational excellence.',
role: 'Director & Delivery Lead',
bio: 'Runs project governance and client delivery end to end. Ashok is your single point of accountability — scope, timeline, and quality — so nothing gets lost in handoffs between teams.',
avatar: 'AJ',
social: {},
photo: '/images/team/ashok-jamdade.svg',
social: {
linkedin: '',
},
},
{
name: 'Swapnali Vachkal',
role: 'Full Stack Developer',
bio: 'A skilled full-stack developer proficient in Angular, React, Spring Boot, and modern web technologies. Swapnali plays a key role in building and maintaining WorkRoot\'s client projects, from government management systems to e-commerce platforms, delivering clean, performant, and maintainable code.',
role: 'Full Stack Engineer',
bio: 'Builds the systems you depend on, in Angular, React, and Spring Boot. Swapnali writes the production code for your project directly — from government management systems to e-commerce platforms — clean, performant, and maintainable.',
avatar: 'SV',
social: {},
photo: '/images/team/swapnali-vachkal.svg',
social: {
linkedin: '',
},
},
];
@@ -76,27 +88,27 @@ const timeline = [
},
];
// Core values
const values = [
// How we work — concrete commitments, not generic values
const howWeWork = [
{
title: 'Innovation',
description: 'We embrace cutting-edge technologies to deliver future-proof solutions.',
icon: 'lightbulb',
title: 'You talk to the engineers',
description: 'No account managers, no offshore relay. The people who design and write your system are the people you meet, email, and call.',
icon: 'users',
},
{
title: 'Integrity',
description: 'Transparency and honesty are the foundation of every client relationship.',
title: 'Fixed scope, price, and timeline',
description: 'We agree on exactly what gets built, what it costs, and when it ships — before a line of code is written. No surprise invoices.',
icon: 'shield',
},
{
title: 'Excellence',
description: 'We pursue quality in every line of code and every interaction.',
title: 'Built to pass an audit',
description: 'Role-based access, data isolation, and offline resilience are designed in from day one — the same standards our 11-district government deployment runs on.',
icon: 'star',
},
{
title: 'Collaboration',
description: 'Great solutions emerge from diverse perspectives working together.',
icon: 'users',
title: 'We stay after launch',
description: 'Shipping is the start, not the finish. We maintain, monitor, and extend the systems we build — some have run in production for years.',
icon: 'lightbulb',
},
];
---
@@ -130,13 +142,13 @@ const values = [
About WorkRoot IT Solutions LLP
</span>
<h1 class="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold text-white leading-tight mb-6">
Building the Future of
The team behind Bihar's 11-district Police Management System
<span class="block text-transparent bg-clip-text bg-gradient-to-r from-primary-300 to-accent-400 mt-2">
Digital Innovation
and IIT Patna's University platform.
</span>
</h1>
<p class="text-lg sm:text-xl text-secondary-200 max-w-2xl mb-8">
We're a team of passionate technologists dedicated to transforming businesses through innovative IT solutions.
A small, senior engineering team in India that has shipped 20+ production systems for governments and enterprises. You work directly with the people who build yours.
</p>
<!-- Quick stats in hero -->
@@ -241,59 +253,8 @@ const values = [
</div>
</section>
<!-- Mission & Vision Section -->
<section class="py-16 lg: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 mb-12 lg:mb-16" data-animate="fade-up">
<span class="text-primary-500 dark:text-primary-400 font-semibold text-sm uppercase tracking-wider">Our Purpose</span>
<h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2">Mission & Vision</h2>
</div>
<div class="grid lg:grid-cols-2 gap-8 lg:gap-12">
<!-- Mission -->
<div class="relative group" data-animate="fade-right" data-delay="100">
<div class="absolute inset-0 bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl transform transition-transform group-hover:scale-105"></div>
<div class="relative p-8 lg:p-12 bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl text-white overflow-hidden">
<div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-2xl"></div>
<div class="relative">
<div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center mb-6 shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="text-2xl lg:text-3xl font-bold mb-4">Our Mission</h3>
<p class="text-primary-50 leading-relaxed text-lg">
To empower businesses and government organizations with innovative, reliable, and scalable software solutions. We combine deep technical expertise with a client-first approach to deliver systems that drive operational efficiency and digital transformation.
</p>
</div>
</div>
</div>
<!-- Vision -->
<div class="relative group" data-animate="fade-left" data-delay="250">
<div class="absolute inset-0 bg-gradient-to-br from-secondary-800 to-secondary-900 rounded-3xl transform transition-transform group-hover:scale-105"></div>
<div class="relative p-8 lg:p-12 bg-gradient-to-br from-secondary-800 to-secondary-900 rounded-3xl text-white overflow-hidden">
<div class="absolute top-0 right-0 w-64 h-64 bg-primary-500/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-2xl"></div>
<div class="relative">
<div class="w-16 h-16 bg-white/10 backdrop-blur-sm rounded-2xl flex items-center justify-center mb-6 shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" 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" />
</svg>
</div>
<h3 class="text-2xl lg:text-3xl font-bold mb-4">Our Vision</h3>
<p class="text-secondary-200 leading-relaxed text-lg">
To be India's most trusted technology partner for enterprises and government bodies, recognized for delivering world-class software solutions that set new standards in quality, performance, and innovation.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Core Values Section -->
<section class="py-16 lg:py-24 bg-white dark:bg-secondary-900 relative overflow-hidden">
<!-- How We Work Section -->
<section class="py-16 lg:py-24 bg-gradient-to-b from-secondary-50 to-white dark:from-secondary-900 dark:to-secondary-900 relative overflow-hidden">
<!-- Background decoration -->
<div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
<div class="absolute top-0 right-0 w-96 h-96 bg-primary-500/5 rounded-full blur-3xl"></div>
@@ -302,15 +263,15 @@ const values = [
<div class="container-wrapper relative">
<div class="text-center max-w-2xl mx-auto mb-12 lg:mb-16" data-animate="fade-up">
<span class="text-primary-500 dark:text-primary-400 font-semibold text-sm uppercase tracking-wider">What Drives Us</span>
<h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2 mb-4">Our Core Values</h2>
<span class="text-primary-500 dark:text-primary-400 font-semibold text-sm uppercase tracking-wider">How We Work</span>
<h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2 mb-4">What working with us actually looks like</h2>
<p class="text-secondary-600 dark:text-secondary-400">
These principles guide every decision we make and every solution we deliver.
A three-person senior team is the feature, not the caveat — no layers between you and the people building your system.
</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
{values.map((value, index) => (
{howWeWork.map((value, index) => (
<div class="group relative" data-animate="fade-up" data-delay={String(index * 100)}>
<!-- Gradient background on hover -->
<div class="absolute inset-0 bg-gradient-to-br from-primary-500 to-primary-700 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
@@ -353,9 +314,9 @@ const values = [
<div class="container-wrapper">
<div class="text-center max-w-2xl mx-auto mb-12 lg:mb-16" data-animate="fade-up">
<span class="text-primary-500 dark:text-primary-400 font-semibold text-sm uppercase tracking-wider">The Team</span>
<h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2 mb-4">Meet Our Leadership</h2>
<h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2 mb-4">The people who'll build your system</h2>
<p class="text-secondary-600 dark:text-secondary-400">
Talented professionals who bring diverse expertise and shared passion for technology excellence.
You work directly with the senior engineers who design and write your software — no account managers, no offshore handoffs, no junior teams learning on your project.
</p>
</div>
@@ -366,20 +327,47 @@ const values = [
<div class="absolute inset-0 bg-gradient-to-br from-primary-400 to-accent-400 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-sm"></div>
<div class="relative bg-white dark:bg-secondary-800 rounded-3xl overflow-hidden shadow-md hover:shadow-2xl transition-all duration-300 transform group-hover:-translate-y-2">
<!-- Avatar container -->
<!-- Avatar / photo container -->
<div class="relative aspect-[4/3] overflow-hidden bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center">
<span class="text-6xl font-bold text-white/90">{member.avatar}</span>
{member.photo ? (
<img
src={member.photo}
alt={`${member.name}, ${member.role} at WorkRoot`}
width="800"
height="600"
class="absolute inset-0 w-full h-full object-cover"
loading="lazy"
decoding="async"
/>
) : (
<span class="text-6xl font-bold text-white/90">{member.avatar}</span>
)}
<!-- Gradient overlay -->
<div class="absolute inset-0 bg-gradient-to-t from-secondary-900/40 via-transparent to-transparent"></div>
<div class="absolute inset-0 bg-gradient-to-t from-secondary-900/50 via-transparent to-transparent"></div>
<!-- Social links overlay -->
{Object.keys(member.social).length > 0 && (
{(member.social.twitter || member.social.linkedin) && (
<div class="absolute inset-x-0 bottom-0 p-6 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
<div class="flex justify-center gap-3">
{member.social.linkedin && (
<a
href={member.social.linkedin}
target="_blank"
rel="noopener noreferrer"
class="w-11 h-11 bg-white/95 hover:bg-white rounded-xl flex items-center justify-center text-secondary-700 hover:text-primary-500 transition-all shadow-lg hover:scale-110"
aria-label={`${member.name}'s LinkedIn profile`}
>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z"/>
</svg>
</a>
)}
{member.social.twitter && (
<a
href={member.social.twitter}
target="_blank"
rel="noopener noreferrer"
class="w-11 h-11 bg-white/95 hover:bg-white rounded-xl flex items-center justify-center text-secondary-700 hover:text-primary-500 transition-all shadow-lg hover:scale-110"
aria-label={`${member.name}'s Twitter/X profile`}
>
@@ -424,27 +412,29 @@ const values = [
Let's Build Together
</div>
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
Ready to Work With Us?
Talk to the engineers who'll build it
</h2>
<p class="text-primary-50 text-lg sm:text-xl max-w-2xl mx-auto mb-10">
Let's discuss how we can help transform your business with innovative technology solutions.
Tell us what you're building. You'll get a fixed-scope, fixed-price proposal from the people who'll actually deliver it — not a sales pitch.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a
href="/contact"
href="/contact?source=about-cta"
data-cta="about-primary"
class="group inline-flex items-center justify-center px-8 py-4 bg-white text-primary-600 font-semibold rounded-xl hover:bg-primary-50 transition-all shadow-xl hover:shadow-2xl hover:scale-105 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600"
>
Get in Touch
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
Get my free proposal
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
<a
href="/services"
href="/portfolio"
data-cta="about-secondary"
class="inline-flex items-center justify-center px-8 py-4 border-2 border-white/40 text-white font-semibold rounded-xl hover:bg-white/10 hover:border-white/60 transition-all backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600"
>
View Our Services
See 20+ case studies
</a>
</div>
</div>