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

Latest Updated Pages
E2E Test Suite / Critical User Journeys (push) Has been skipped
Details
E2E Test Suite / API Integration Tests (push) Has been skipped
Details
Deploy to Production / Build & Verify (push) Failing after 13s
Details
Ping Search Engines / Notify Search Engines (push) Successful in 3s
Details
Deploy to Production / Pre-Deploy Tests (push) Has been skipped
Details
Deploy to Production / Deploy to Railway (push) Has been skipped
Details
Deploy to Production / Deploy to Render (push) Has been skipped
Details
Deploy to Production / Deploy to VPS (PM2) (push) Has been skipped
Details
Deploy to Production / Deploy to Fly.io (push) Has been skipped
Details
Deploy to Production / Post-Deploy Verification (push) Has been skipped
Details
Deploy to Production / Notify on Failure (push) Successful in 1s
Details
E2E Test Suite / Smoke Tests (P0) (push) Failing after 9m36s
Details
E2E Test Suite / Form Interaction Tests (push) Failing after 12m6s
Details
E2E Test Suite / Destructive & Chaos Tests (push) Failing after 11m46s
Details
E2E Test Suite / Cross-Browser Regression (chromium) (push) Failing after 9m31s
Details
E2E Test Suite / Cross-Browser Regression (firefox) (push) Failing after 11m5s
Details
E2E Test Suite / Cross-Browser Regression (webkit) (push) Failing after 15m24s
Details
E2E Test Suite / Security Header Tests (push) Failing after 7m55s
Details
E2E Test Suite / Test Report Summary (push) Failing after 6s
Details
E2E Test Suite / Mobile Device Tests (push) Failing after 3h12m28s
Details
Uptime Monitor / Health & Response Time (push) Successful in 5s
Details
Uptime Monitor / SSL Certificate (push) Successful in 3s
Details
Uptime Monitor / Send Alerts (push) Has been skipped
Details
Uptime Monitor / Record Uptime Success (push) Successful in 2s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-03-22 14:37:17 +05:30
parent d402256547
commit 0614ae6f85
80 changed files with 11667 additions and 687 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/contact.astro
+70 -75
View File
@@ -10,24 +10,24 @@ const contactInfo = [
{
icon: 'location',
title: 'Visit Us',
details: ['123 Tech Plaza, Suite 400', 'San Francisco, CA 94105'],
link: 'https://maps.google.com/?q=123+Tech+Plaza+San+Francisco+CA',
details: ['At Post Rajapur Shantinagar', 'Taluka Khatav, Dist Satara', 'MH 415503'],
link: 'https://maps.google.com/?q=Rajapur+Shantinagar+Khatav+Satara+Maharashtra+415503',
linkLabel: 'Get directions',
color: 'primary',
},
{
icon: 'phone',
title: 'Call Us',
details: ['+1 (555) 123-4567', '+1 (555) 987-6543'],
link: 'tel:+15551234567',
details: ['+91 9561417403'],
link: 'tel:+919561417403',
linkLabel: 'Call now',
color: 'accent',
},
{
icon: 'email',
title: 'Email Us',
details: ['hello@workroot.in', 'support@workroot.in'],
link: 'mailto:hello@workroot.in',
details: ['admin@workroot.in'],
link: 'mailto:admin@workroot.in',
linkLabel: 'Send email',
color: 'emerald',
},
@@ -84,7 +84,7 @@ const trustStats = [
<BaseLayout
title="Contact Us — Get a Free Quote"
description="Start your project with WorkRoot IT Solutions. 500+ projects delivered, 98% client satisfaction, response within 24 hours. Reach us at hello@workroot.in or call +1 (555) 123-4567."
description="Start your project with WorkRoot IT Solutions. 500+ projects delivered, 98% client satisfaction, response within 24 hours. Reach us at admin@workroot.in or call +91 9561417403."
>
<SEO
slot="head"
@@ -94,9 +94,11 @@ const trustStats = [
{ name: 'Contact', url: '/contact' }
]}
/>
<!-- Prefetch Google Maps domain used for the directions link on this page -->
<!-- Prefetch Google Maps domains used for directions link and map embed on this page -->
<link slot="head" rel="dns-prefetch" href="https://maps.google.com" />
<link slot="head" rel="preconnect" href="https://maps.google.com" />
<link slot="head" rel="dns-prefetch" href="https://www.google.com" />
<link slot="head" rel="dns-prefetch" href="https://maps.googleapis.com" />
<!-- Hero Section -->
<section class="relative py-24 bg-hero-dark overflow-hidden">
@@ -104,9 +106,9 @@ const trustStats = [
<div class="absolute inset-0 bg-grid-pattern bg-grid-80 opacity-30 pointer-events-none" aria-hidden="true"></div>
<!-- Decorative blobs -->
<div class="absolute -top-40 -right-32 w-96 h-96 bg-primary/15 rounded-full blur-3xl pointer-events-none" aria-hidden="true"></div>
<div class="absolute -bottom-32 -left-32 w-80 h-80 bg-accent/10 rounded-full blur-3xl pointer-events-none" aria-hidden="true"></div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary/5 rounded-full blur-3xl pointer-events-none" aria-hidden="true"></div>
<div class="absolute -top-40 -right-32 w-96 h-96 bg-primary/15 rounded-full blur-2xl md:blur-3xl pointer-events-none" aria-hidden="true"></div>
<div class="absolute -bottom-32 -left-32 w-80 h-80 bg-accent/10 rounded-full blur-2xl md:blur-3xl pointer-events-none" aria-hidden="true"></div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary/5 rounded-full blur-2xl md:blur-3xl pointer-events-none" aria-hidden="true"></div>
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="max-w-3xl mx-auto text-center">
@@ -140,17 +142,17 @@ const trustStats = [
</section>
<!-- Main Contact Section -->
<section class="py-20 lg:py-28 bg-secondary-50">
<section class="py-20 lg:py-28 bg-secondary-50 dark:bg-secondary-900">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-5 gap-12 xl:gap-16">
<!-- LEFT: Contact Form (3 cols) -->
<div class="lg:col-span-3 reveal-on-scroll">
<div class="bg-white rounded-2xl shadow-card border border-secondary-100 p-8 lg:p-10">
<div class="bg-white dark:bg-secondary-800 rounded-2xl shadow-card border border-secondary-100 dark:border-secondary-700 p-8 lg:p-10">
<!-- Form Header -->
<div class="mb-8">
<h2 class="text-2xl font-bold text-secondary-900 mb-2">Send Us a Message</h2>
<p class="text-secondary-500 text-sm">Fill out the form below and we'll respond within 24 hours.</p>
<h2 class="text-2xl font-bold text-secondary-900 dark:text-secondary-100 mb-2">Send Us a Message</h2>
<p class="text-secondary-500 dark:text-secondary-400 text-sm">Fill out the form below and we'll respond within 24 hours.</p>
</div>
<form id="contact-form" class="space-y-5" novalidate>
@@ -172,7 +174,7 @@ const trustStats = [
<div class="grid sm:grid-cols-2 gap-5">
<!-- Name Field -->
<div class="form-group">
<label for="name" class="block text-sm font-semibold text-secondary-700 mb-1.5">
<label for="name" class="block text-sm font-semibold text-secondary-700 dark:text-secondary-300 mb-1.5">
Full Name <span class="text-red-500" aria-hidden="true">*</span>
<span class="sr-only">(required)</span>
</label>
@@ -191,7 +193,7 @@ const trustStats = [
autocomplete="name"
aria-required="true"
aria-describedby="name-error"
class="form-input w-full pl-10 pr-4 py-3 rounded-xl border border-secondary-200 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 text-secondary-900 placeholder-secondary-400 text-sm bg-secondary-50 focus:bg-white"
class="form-input w-full pl-10 pr-4 py-3 rounded-xl border border-secondary-200 dark:border-secondary-600 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 text-secondary-900 dark:text-secondary-100 placeholder-secondary-400 dark:placeholder-secondary-500 text-sm bg-secondary-50 dark:bg-secondary-700 focus:bg-white dark:focus:bg-secondary-700"
placeholder="John Doe"
/>
<div class="valid-check absolute inset-y-0 right-3 flex items-center hidden" aria-hidden="true">
@@ -201,14 +203,14 @@ const trustStats = [
</div>
</div>
<p class="mt-1.5 text-xs text-red-500 hidden flex items-center gap-1" id="name-error" data-error="name" role="alert">
<svg class="w-3.5 h-3.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
<svg class="w-3.5 h-3.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
Please enter your full name (at least 2 characters).
</p>
</div>
<!-- Email Field -->
<div class="form-group">
<label for="email" class="block text-sm font-semibold text-secondary-700 mb-1.5">
<label for="email" class="block text-sm font-semibold text-secondary-700 dark:text-secondary-300 mb-1.5">
Email Address <span class="text-red-500" aria-hidden="true">*</span>
<span class="sr-only">(required)</span>
</label>
@@ -226,7 +228,7 @@ const trustStats = [
autocomplete="email"
aria-required="true"
aria-describedby="email-error"
class="form-input w-full pl-10 pr-4 py-3 rounded-xl border border-secondary-200 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 text-secondary-900 placeholder-secondary-400 text-sm bg-secondary-50 focus:bg-white"
class="form-input w-full pl-10 pr-4 py-3 rounded-xl border border-secondary-200 dark:border-secondary-600 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 text-secondary-900 dark:text-secondary-100 placeholder-secondary-400 dark:placeholder-secondary-500 text-sm bg-secondary-50 dark:bg-secondary-700 focus:bg-white dark:focus:bg-secondary-700"
placeholder="john@example.com"
/>
<div class="valid-check absolute inset-y-0 right-3 flex items-center hidden" aria-hidden="true">
@@ -236,7 +238,7 @@ const trustStats = [
</div>
</div>
<p class="mt-1.5 text-xs text-red-500 hidden flex items-center gap-1" id="email-error" data-error="email" role="alert">
<svg class="w-3.5 h-3.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
<svg class="w-3.5 h-3.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
Please enter a valid email address.
</p>
</div>
@@ -246,7 +248,7 @@ const trustStats = [
<div class="grid sm:grid-cols-2 gap-5">
<!-- Phone Field -->
<div class="form-group">
<label for="phone" class="block text-sm font-semibold text-secondary-700 mb-1.5">
<label for="phone" class="block text-sm font-semibold text-secondary-700 dark:text-secondary-300 mb-1.5">
Phone Number
<span class="text-secondary-400 font-normal">(optional)</span>
</label>
@@ -262,19 +264,19 @@ const trustStats = [
name="phone"
autocomplete="tel"
aria-describedby="phone-error"
class="form-input w-full pl-10 pr-4 py-3 rounded-xl border border-secondary-200 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 text-secondary-900 placeholder-secondary-400 text-sm bg-secondary-50 focus:bg-white"
class="form-input w-full pl-10 pr-4 py-3 rounded-xl border border-secondary-200 dark:border-secondary-600 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 text-secondary-900 dark:text-secondary-100 placeholder-secondary-400 dark:placeholder-secondary-500 text-sm bg-secondary-50 dark:bg-secondary-700 focus:bg-white dark:focus:bg-secondary-700"
placeholder="+1 (555) 123-4567"
/>
</div>
<p class="mt-1.5 text-xs text-red-500 hidden flex items-center gap-1" id="phone-error" data-error="phone" role="alert">
<svg class="w-3.5 h-3.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
<svg class="w-3.5 h-3.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
Please enter a valid phone number.
</p>
</div>
<!-- Subject Field -->
<div class="form-group">
<label for="subject" class="block text-sm font-semibold text-secondary-700 mb-1.5">
<label for="subject" class="block text-sm font-semibold text-secondary-700 dark:text-secondary-300 mb-1.5">
Service Needed <span class="text-red-500" aria-hidden="true">*</span>
<span class="sr-only">(required)</span>
</label>
@@ -290,7 +292,7 @@ const trustStats = [
required
aria-required="true"
aria-describedby="subject-error"
class="form-input w-full pl-10 pr-8 py-3 rounded-xl border border-secondary-200 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 text-secondary-900 text-sm bg-secondary-50 focus:bg-white appearance-none cursor-pointer"
class="form-input w-full pl-10 pr-8 py-3 rounded-xl border border-secondary-200 dark:border-secondary-600 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 text-secondary-900 dark:text-secondary-100 text-sm bg-secondary-50 dark:bg-secondary-700 focus:bg-white dark:focus:bg-secondary-700 appearance-none cursor-pointer"
>
<option value="">Select a service...</option>
<option value="web-development">Web Development</option>
@@ -308,7 +310,7 @@ const trustStats = [
</div>
</div>
<p class="mt-1.5 text-xs text-red-500 hidden flex items-center gap-1" id="subject-error" data-error="subject" role="alert">
<svg class="w-3.5 h-3.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
<svg class="w-3.5 h-3.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
Please select a service.
</p>
</div>
@@ -316,13 +318,13 @@ const trustStats = [
<!-- Budget range (new field) -->
<div class="form-group">
<label class="block text-sm font-semibold text-secondary-700 mb-2">
<label class="block text-sm font-semibold text-secondary-700 dark:text-secondary-300 mb-2">
Project Budget
<span class="text-secondary-400 font-normal">(optional)</span>
<span class="text-secondary-400 dark:text-secondary-500 font-normal">(optional)</span>
</label>
<div class="flex flex-wrap gap-2" role="group" aria-label="Budget range options">
{['< $5K', '$5K – $15K', '$15K – $50K', '$50K+', 'Not sure yet'].map((range, i) => (
<label class="budget-option flex items-center gap-1.5 px-3 py-2 rounded-lg border border-secondary-200 text-sm text-secondary-600 cursor-pointer hover:border-primary hover:bg-primary/5 transition-all duration-150 has-[:checked]:border-primary has-[:checked]:bg-primary/10 has-[:checked]:text-primary-700">
<label class="budget-option flex items-center gap-1.5 px-3 py-2 rounded-lg border border-secondary-200 dark:border-secondary-600 text-sm text-secondary-600 dark:text-secondary-400 cursor-pointer hover:border-primary hover:bg-primary/5 dark:hover:bg-primary/10 transition-all duration-150 has-[:checked]:border-primary has-[:checked]:bg-primary/10 has-[:checked]:text-primary-700 dark:has-[:checked]:text-primary-300">
<input type="radio" name="budget" value={range} class="sr-only" />
{range}
</label>
@@ -333,11 +335,11 @@ const trustStats = [
<!-- Message Field -->
<div class="form-group">
<div class="flex items-center justify-between mb-1.5">
<label for="message" class="block text-sm font-semibold text-secondary-700">
<label for="message" class="block text-sm font-semibold text-secondary-700 dark:text-secondary-300">
Your Message <span class="text-red-500" aria-hidden="true">*</span>
<span class="sr-only">(required)</span>
</label>
<span id="char-count" class="text-xs text-secondary-400">0 / 5000</span>
<span id="char-count" class="text-xs text-secondary-400" aria-hidden="true">0 / 5000</span>
</div>
<textarea
id="message"
@@ -348,12 +350,12 @@ const trustStats = [
rows="5"
aria-required="true"
aria-describedby="message-error message-hint"
class="form-input w-full px-4 py-3 rounded-xl border border-secondary-200 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 text-secondary-900 placeholder-secondary-400 text-sm bg-secondary-50 focus:bg-white resize-none"
class="form-input w-full px-4 py-3 rounded-xl border border-secondary-200 dark:border-secondary-600 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 text-secondary-900 dark:text-secondary-100 placeholder-secondary-400 dark:placeholder-secondary-500 text-sm bg-secondary-50 dark:bg-secondary-700 focus:bg-white dark:focus:bg-secondary-700 resize-none"
placeholder="Tell us about your project, goals, and timeline..."
></textarea>
<p id="message-hint" class="mt-1 text-xs text-secondary-400">Minimum 10 characters. Be as detailed as possible for a faster, more accurate response.</p>
<p class="mt-1.5 text-xs text-red-500 hidden flex items-center gap-1" id="message-error" data-error="message" role="alert">
<svg class="w-3.5 h-3.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
<svg class="w-3.5 h-3.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
Please enter a message (at least 10 characters).
</p>
</div>
@@ -387,13 +389,13 @@ const trustStats = [
<!-- Success state (hidden by default) -->
<div id="success-state" class="hidden text-center py-12">
<div class="w-20 h-20 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-6">
<div class="w-20 h-20 bg-emerald-100 dark:bg-emerald-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
<svg class="w-10 h-10 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<h3 class="text-2xl font-bold text-secondary-900 mb-2">Message Sent!</h3>
<p class="text-secondary-600 mb-6">Thank you for reaching out. We'll get back to you within 24 hours.</p>
<h3 class="text-2xl font-bold text-secondary-900 dark:text-secondary-100 mb-2">Message Sent!</h3>
<p class="text-secondary-600 dark:text-secondary-400 mb-6">Thank you for reaching out. We'll get back to you within 24 hours.</p>
<button
id="send-another"
class="inline-flex items-center gap-2 text-primary hover:text-primary-700 font-medium text-sm transition-colors"
@@ -413,7 +415,7 @@ const trustStats = [
<!-- Contact Info Cards -->
<div class="grid grid-cols-1 xs:grid-cols-2 gap-3 sm:gap-4 reveal-on-scroll reveal-delay-1">
{contactInfo.map((info) => (
<div class={`contact-card group relative bg-white rounded-2xl p-5 shadow-card border border-secondary-100 hover:shadow-card-hover hover:-translate-y-1 transition-all duration-300 overflow-hidden`}>
<div class={`contact-card group relative bg-white dark:bg-secondary-800 rounded-2xl p-5 shadow-card border border-secondary-100 dark:border-secondary-700 hover:shadow-card-hover hover:-translate-y-1 transition-all duration-300 overflow-hidden`}>
<!-- Colored top accent bar -->
<div class={`absolute top-0 left-0 right-0 h-1 rounded-t-2xl ${
info.color === 'primary' ? 'bg-gradient-to-r from-primary to-primary-600' :
@@ -452,9 +454,9 @@ const trustStats = [
)}
</div>
<h3 class="text-sm font-bold text-secondary-900 mb-1.5">{info.title}</h3>
<h3 class="text-sm font-bold text-secondary-900 dark:text-secondary-100 mb-1.5">{info.title}</h3>
{info.details.map((detail) => (
<p class="text-xs text-secondary-500 leading-relaxed">{detail}</p>
<p class="text-xs text-secondary-500 dark:text-secondary-400 leading-relaxed">{detail}</p>
))}
{info.link && (
<a
@@ -479,31 +481,24 @@ const trustStats = [
<!-- Map Embed -->
<div class="reveal-on-scroll reveal-delay-2">
<div class="bg-white rounded-2xl shadow-card border border-secondary-100 overflow-hidden">
<div class="relative h-52 bg-secondary-100 group">
<!-- Static map placeholder with illustrated style -->
<div class="absolute inset-0 bg-gradient-to-br from-secondary-100 via-secondary-50 to-primary-50 flex flex-col items-center justify-center">
<!-- Map pin SVG illustration -->
<div class="relative mb-3">
<div class="w-14 h-14 bg-primary rounded-full flex items-center justify-center shadow-primary-glow animate-float">
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<!-- Ping rings -->
<div class="absolute inset-0 rounded-full border-2 border-primary/30 animate-ping"></div>
</div>
<p class="text-sm font-semibold text-secondary-700">123 Tech Plaza</p>
<p class="text-xs text-secondary-500">San Francisco, CA 94105</p>
</div>
<div class="bg-white dark:bg-secondary-800 rounded-2xl shadow-card border border-secondary-100 dark:border-secondary-700 overflow-hidden">
<div class="relative h-52 bg-secondary-100 dark:bg-secondary-700 group">
<!-- Google Maps Embed -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30395.119262236858!2d74.3309312!3d17.7733632!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bc3b7a5679a7255%3A0xc3ff2da498895bb6!2sWorkRoot%20IT%20Solutions%20LLP!5e0!3m2!1sen!2sin!4v1774099639853!5m2!1sen!2sin"
class="absolute inset-0 w-full h-full border-0"
allowfullscreen
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
title="WorkRoot IT Solutions LLP location on Google Maps"
></iframe>
<!-- Hover overlay: Get Directions -->
<a
href="https://maps.google.com/?q=123+Tech+Plaza+San+Francisco+CA"
href="https://maps.google.com/?q=Rajapur+Shantinagar+Khatav+Satara+Maharashtra+415503"
target="_blank"
rel="noopener noreferrer"
aria-label="Get directions to 123 Tech Plaza, San Francisco (opens in new tab)"
aria-label="Get directions to Rajapur Shantinagar, Khatav, Satara, Maharashtra (opens in new tab)"
class="absolute inset-0 bg-primary/90 flex flex-col items-center justify-center gap-2 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity duration-300"
>
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -515,14 +510,14 @@ const trustStats = [
</div>
<!-- Map footer info -->
<div class="px-5 py-4 flex items-center justify-between border-t border-secondary-100">
<div class="px-5 py-4 flex items-center justify-between border-t border-secondary-100 dark:border-secondary-700">
<div class="flex items-center gap-2">
<div class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></div>
<span class="text-xs text-secondary-600 font-medium">Open now</span>
<span class="text-xs text-secondary-400">· Closes at 6 PM</span>
<span class="text-xs text-secondary-600 dark:text-secondary-300 font-medium">Open now</span>
<span class="text-xs text-secondary-400 dark:text-secondary-500">· Closes at 6 PM</span>
</div>
<a
href="https://maps.google.com/?q=123+Tech+Plaza+San+Francisco+CA"
href="https://maps.google.com/?q=Rajapur+Shantinagar+Khatav+Satara+Maharashtra+415503"
target="_blank"
rel="noopener noreferrer"
class="text-xs text-primary-600 hover:text-primary-700 font-medium flex items-center gap-1 transition-colors"
@@ -587,11 +582,11 @@ const trustStats = [
</section>
<!-- FAQ Strip -->
<section class="py-16 bg-white border-t border-secondary-100">
<section class="py-16 bg-white dark:bg-secondary-900 border-t border-secondary-100 dark:border-secondary-800">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-2xl mx-auto text-center mb-10 reveal-on-scroll">
<h2 class="text-2xl font-bold text-secondary-900 mb-3">Common Questions</h2>
<p class="text-secondary-500 text-sm">Quick answers to help you before reaching out.</p>
<h2 class="text-2xl font-bold text-secondary-900 dark:text-secondary-100 mb-3">Common Questions</h2>
<p class="text-secondary-500 dark:text-secondary-400 text-sm">Quick answers to help you before reaching out.</p>
</div>
<div class="max-w-3xl mx-auto space-y-3">
{[
@@ -600,8 +595,8 @@ const trustStats = [
a: 'We respond to all inquiries within 24 hours on business days. For urgent matters, please call us directly.',
},
{
q: 'Do you work with clients outside San Francisco?',
a: 'Absolutely. We work with clients globally and are fully equipped for remote collaboration across time zones.',
q: 'Do you work with clients outside Maharashtra?',
a: 'Absolutely. We work with clients across India and globally, and are fully equipped for remote collaboration across time zones.',
},
{
q: 'What information should I include in my message?',
@@ -613,18 +608,18 @@ const trustStats = [
},
].map((faq, i) => (
<details
class={`faq-item group bg-secondary-50 rounded-xl border border-secondary-100 overflow-hidden reveal-on-scroll reveal-delay-${Math.min(i + 1, 4)}`}
class={`faq-item group bg-secondary-50 dark:bg-secondary-800 rounded-xl border border-secondary-100 dark:border-secondary-700 overflow-hidden reveal-on-scroll reveal-delay-${Math.min(i + 1, 4)}`}
>
<summary class="flex items-center justify-between gap-4 px-6 py-4 cursor-pointer list-none hover:bg-secondary-100 transition-colors duration-150">
<span class="font-semibold text-secondary-900 text-sm">{faq.q}</span>
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-secondary-200 group-open:bg-primary/10 flex items-center justify-center transition-colors" aria-hidden="true">
<summary class="flex items-center justify-between gap-4 px-6 py-4 cursor-pointer list-none hover:bg-secondary-100 dark:hover:bg-secondary-700 transition-colors duration-150">
<span class="font-semibold text-secondary-900 dark:text-secondary-100 text-sm">{faq.q}</span>
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-secondary-200 dark:bg-secondary-700 group-open:bg-primary/10 flex items-center justify-center transition-colors" aria-hidden="true">
<svg class="w-3.5 h-3.5 text-secondary-600 group-open:text-primary group-open:rotate-45 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4" />
</svg>
</div>
</summary>
<div class="px-6 pb-4">
<p class="text-secondary-600 text-sm leading-relaxed">{faq.a}</p>
<p class="text-secondary-600 dark:text-secondary-400 text-sm leading-relaxed">{faq.a}</p>
</div>
</details>
))}
@@ -655,7 +650,7 @@ const trustStats = [
</svg>
</a>
<a
href="tel:+15551234567"
href="tel:+919561417403"
class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white/10 text-white font-semibold rounded-xl hover:bg-white/20 transition-colors duration-200 border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/50 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">