LeadLock — Marketing Site

Overview

LeadLock is a local business marketing company I co-founded to help businesses like auto shops, barbers, landscapers, and plumbers get found on Google and stop losing leads to missed calls. This is the full marketing website I designed and built for it — meant to convert local business owners into customers.

The goal was Stripe or Linear-level design polish: clean typography, strong visual hierarchy, smooth animations, and a layout that builds trust fast. Every section was built to move someone from "what is this?" to "I need this."

Sections Built

• Hero — Dark navy background, gradient headline, animated scroll reveal
• Problem Stats — 3 data-backed cards (87% Google, 62% unanswered calls, 5 min cold lead)
• Services — Google Business Profile optimization with 6 feature bullets + missed call text-back with a live phone mockup showing a real conversation thread
• Before/After — Side-by-side comparison of weak vs. optimized Google presence
• How It Works — 4-step timeline with gradient connector lines (Week 1–4)
• Pricing — Single $200/month card with competitor pricing crossed out in red
• Industries — 8-icon grid with hover glow effects
• FAQ — Animated accordion with 6 questions, accessible aria-expanded
• Contact — Lead capture form with mint focus states, Netlify-ready

Design System

The design system was generated using a custom AI-powered UI/UX tool before any code was written. It recommended an Exaggerated Minimalism style with Scroll-Triggered Storytelling structure — bold typography, high contrast, and a narrative that walks the reader through the problem and solution. Brand colors: teal #028090, navy #1A2332, mint #02C39A, off-white #F4F7F9. Fonts: Outfit + Work Sans.

Technical Details

• Built entirely in a single index.html — no frameworks, no build step
• Tailwind CSS via CDN with a custom config block defining the brand color palette
• IntersectionObserver for scroll-triggered reveals with staggered delays
• Sticky glass header with backdrop-filter blur
• Smooth scroll with offset accounting for the fixed nav
• FAQ accordion built in vanilla JS, keyboard accessible
• prefers-reduced-motion respected throughout
• Mobile-first responsive at 375px, 768px, 1024px, 1440px