I'll start by studying the reference website and generating design inspiration for your locksmith business. Let me also check the current codebase structure.

Now I have a clear picture of the reference site and the codebase. Let me set up the task plan and start building.

Let me start by updating the theme, layout, and globals to match a professional locksmith brand. I'll use a bold blue/navy color scheme with gold accents for trust and authority.

Now let me read the tailwind config to update fonts:

Now let me build all the components. I'll create them all in parallel:

Now let me assemble the main page and generate the hero image:

Now let me generate the hero image:

Your LocksmithPro Express website is complete. I modeled it after the Brooklyn Lock Experts reference site with a professional navy blue and gold color scheme that conveys trust and authority. The site includes a sticky header with a prominent phone CTA, a hero section with a generated locksmith background image, a 6-card services grid (residential, commercial, automotive, key duplication, lock installation, emergency), a "Why Choose Us" section with 6 benefits, an emergency CTA banner, customer testimonials, a contact form with business info, and a full footer. Everything is fully responsive and mobile-friendly with a collapsible navigation menu. You can customize the phone number (555) 123-4567 and email address to match your real contact details.

Let me find all instances of the placeholder phone number across the codebase.

Found it in 5 files. Let me update both the display text and the tel: links across all of them.

Now I have all files in context. Let me update the phone number across all 5 files:

Now let me update the tel: links as well:

Updated the phone number to (347) 940-1084 across all 5 components: header (top bar + nav button + mobile menu), hero CTA button, emergency CTA banner, contact section (info card + success message), and footer. Both the display text and the underlying tel: links now point to your real number.