<div class="container my-4">
  <div class="row g-4">
    <div class="col-12 col-lg-8">
      <div class="card shadow-sm border-0">
        <div class="card-body">
          <h2 class="card-title h4 mb-3">Overview</h2>
          <p class="mb-3">
            I designed and built the <strong>Great Southern Lock</strong> marketing website to showcase 24/7 mobile locksmith services across Melbourne.
            The site emphasises fast access to key services (car key replacement, emergency lockouts, commercial security, restricted keys) with
            clear CTAs and a mobile‑first layout.
          </p>
          <ul class="list-group list-group-flush">
            <li class="list-group-item"><strong>Stack:</strong> Next.js (App Router), React 18, Tailwind CSS (+ DaisyUI), TypeScript</li>
            <li class="list-group-item"><strong>Hosting:</strong> static.app (static hosting)</li>
            <li class="list-group-item"><strong>Domain &#x26; DNS:</strong> GoDaddy A @ (apex) + CNAME www → static.app; forced HTTPS with valid certs for apex &#x26; www</li>
            <li class="list-group-item"><strong>Branding:</strong> Custom SVG logotype; primary brand colour <code>#053654</code></li>
            <li class="list-group-item"><strong>SEO:</strong> Titles/meta, OpenGraph, <code>sitemap.xml</code>, <code>robots.txt</code>, LocalBusiness JSON‑LD, service area copy</li>
            <li class="list-group-item"><strong>Perf/UX:</strong> Image optimisation, responsive images, lazy loading, semantic headings, keyboard‑navigable menus</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="card border-0 bg-light h-100">
        <div class="card-body">
          <h3 class="h5">Role &#x26; Responsibilities</h3>
          <ul class="mb-0 ps-3">
            <li>Planned IA, content model, and service taxonomy</li>
            <li>Implemented responsive UI with Tailwind and DaisyUI components</li>
            <li>Integrated Next.js Image for optimised assets (SVG + raster)</li>
            <li>Added structured data and OpenGraph for sharing</li>
            <li>Configured GoDaddy DNS and static.app custom domains (apex + www)</li>
            <li>Resolved www/SSL issues via correct A/CNAME and host config</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="row g-4 mt-2">
    <div class="col-12">
      <div class="card border-0 shadow-sm">
        <div class="card-body">
          <h3 class="h5 mb-3">Implementation Details</h3>
          <div class="row">
            <div class="col-12 col-md-6">
              <h4 class="h6 text-uppercase text-muted">Directory Layout</h4>
              <pre class="bg-dark text-light p-3 rounded-3"><code>.
├─ app/
│  ├─ layout.tsx            # Shared metadata, fonts, global styles
│  ├─ page.tsx              # Home with hero, service grid, CTA
│  ├─ services/
│  │  ├─ page.tsx           # Services index
│  │  └─ [slug]/page.tsx    # Individual service pages (SEO)
│  ├─ contact/page.tsx      # CTA &#x26; contact info
│  └─ sitemap.ts            # sitemap.xml generator
├─ components/
│  ├─ Header.tsx            # Sticky navbar, skip‑to‑content
│  ├─ Footer.tsx
│  ├─ ServiceCard.tsx       # Reusable service tiles
│  └─ Logo.tsx              
├─ public/
│  ├─ images/GSL_Logo.svg   # Brand mark (primary #053654)
│  └─ og.jpg
├─ styles/globals.css
└─ next.config.js</code></pre>
            </div>
            <div class="col-12 col-md-6">
              <h4 class="h6 text-uppercase text-muted">Key Snippets</h4>
              <pre class="bg-dark text-light p-3 rounded-3"><code>// Example JSON‑LD (LocalBusiness)
&#x3C;script type="application/ld+json">{
  "@context": "https://schema.org",
  "@type": "Locksmith",
  "name": "Great Southern Lock",
  "areaServed": "Melbourne, St Kilda and surrounding suburbs",
  "telephone": "+61-REPLACE-ME",
  "url": "https://greatsouthernlock.com.au/"
}&#x3C;/script>
</code></pre>
              <pre class="bg-dark text-light p-3 rounded-3"><code>// DNS (GoDaddy)
A     @      76.76.21.21          # static hosting apex (example)
CNAME www    cname.static.app      # www to host
</code></pre>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row g-4 mt-2">
    <div class="col-12 col-lg-6">
      <div class="card border-0">
        <div class="card-body">
          <h4 class="h6 text-uppercase text-muted mb-2">Accessibility</h4>
          <ul class="ps-3 mb-0">
            <li>Colour contrast validated for #053654 palette</li>
            <li>Semantics: landmarks, alt text, focus styles</li>
            <li>Keyboard‑accessible nav &#x26; skip links</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-6">
      <div class="card border-0">
        <div class="card-body">
          <h4 class="h6 text-uppercase text-muted mb-2">Performance</h4>
          <ul class="ps-3 mb-0">
            <li>Static generation for landing + service pages</li>
            <li>Optimised SVG logo; responsive <code>&#x3C;Image></code> for hero/media</li>
            <li>Lazy loading non‑critical imagery</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="alert alert-success mt-4" role="alert">
    <strong>Outcome:</strong> Faster page loads, improved local search visibility, and increased conversion through clear CTAs and mobile‑first UX.
  </div>
</div>

Great Southern Lock — Locksmith Website

Responsive locksmith website for Great Southern Lock, built with Next.js and Tailwind, tuned for local SEO, performance, and mobile UX; configured domain (GoDaddy) and hosting (static.app) with apex/WWW SSL and DNS.