<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">
            <strong>Timeless Tilling</strong> is a static, mobile‑first marketing website showcasing tile restoration services (heritage tile repair, cleaning, regrouting, sealing, before/after galleries).
            Built with <strong>Next.js</strong>, <strong>Tailwind CSS</strong>, and <strong>DaisyUI</strong>, it exports to static HTML for frictionless deployment on any static host
            (e.g., static.app, Netlify, GitHub Pages, S3 + CloudFront).
          </p>
          <ul class="list-group list-group-flush">
            <li class="list-group-item"><strong>Stack:</strong> Next.js 14 (App Router), React 18, Tailwind CSS, DaisyUI</li>
            <li class="list-group-item"><strong>Build:</strong> Static export (<code>output: "export"</code>) → <code>out/</code> folder</li>
            <li class="list-group-item"><strong>Images:</strong> Optimised, responsive assets via Next/Image; static export uses <code>images.unoptimized</code></li>
            <li class="list-group-item"><strong>SEO:</strong> Titles/meta, OpenGraph, <code>sitemap.xml</code>, <code>robots.txt</code>, LocalBusiness JSON‑LD</li>
            <li class="list-group-item"><strong>UX &#x26; A11y:</strong> Semantic landmarks, keyboard‑navigable components, focus states; DaisyUI for consistent theming</li>
            <li class="list-group-item"><strong>Hosting:</strong> Any static host (no Node server required); simple DNS (apex + <code>www</code>)</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>Designed IA, service taxonomy, and content model</li>
            <li>Implemented responsive UI with Tailwind + DaisyUI</li>
            <li>Configured static export in Next.js for zero‑server hosting</li>
            <li>Added LocalBusiness schema, OpenGraph, and sitemap</li>
            <li>Set up image strategy (responsive, lazy‑loaded, <code>srcset</code>)</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              # Global metadata, fonts, Tailwind includes
│  ├─ page.tsx                # Home: hero, service grid, trust signals, CTA
│  ├─ services/
│  │  ├─ page.tsx             # Services index (cards)
│  │  └─ [slug]/page.tsx      # Individual service pages (SEO‑friendly)
│  ├─ gallery/page.tsx        # Before/After showcase
│  ├─ contact/page.tsx        # Contact &#x26; lead capture (static mailto/links)
│  └─ sitemap.ts              # Emits sitemap.xml at build
├─ components/
│  ├─ Header.tsx              # Sticky nav; accessible menu
│  ├─ Footer.tsx              # Service area, contact, social
│  ├─ ServiceCard.tsx         # Reusable DaisyUI card
│  ├─ BeforeAfter.tsx         # Client component with slider
│  └─ Seo.tsx                 # JSON‑LD helper and meta
├─ public/
│  ├─ images/                 # WebP/JPEG assets
│  └─ og.jpg
├─ styles/globals.css
├─ next.config.js
├─ tailwind.config.js
└─ package.json</code></pre>
            </div>
            <div class="col-12 col-md-6">
              <h4 class="h6 text-uppercase text-muted">Key Config</h4>
              <pre class="bg-dark text-light p-3 rounded-3"><code>// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',                 // static HTML export
  images: { unoptimized: true },    // allow Next/Image in static export
  trailingSlash: true               // optional: better static host compatibility
};
module.exports = nextConfig;
</code></pre>
              <pre class="bg-dark text-light p-3 rounded-3"><code>// tailwind.config.js
module.exports = {
  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
  theme: { extend: {} },
  plugins: [require('daisyui')],
  daisyui: { themes: ['light'] }
};
</code></pre>
              <pre class="bg-dark text-light p-3 rounded-3"><code>// Example LocalBusiness JSON‑LD (Tile Restoration Service)
&#x3C;script type="application/ld+json">{
  "@context": "https://schema.org",
  "@type": "HomeAndConstructionBusiness",
  "name": "Timeless Tilling",
  "areaServed": "Melbourne and surrounding suburbs",
  "serviceType": "Tile restoration, cleaning, regrouting, sealing",
  "url": "https://REPLACE-ME/",
  "telephone": "+61-REPLACE-ME"
}&#x3C;/script>
</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">Build &#x26; Export</h4>
          <ol class="ps-3 mb-0">
            <li><code>npm ci</code> (or <code>npm install</code>)</li>
            <li><code>npm run build</code> → Next static export to <code>out/</code></li>
            <li>Upload <code>out/</code> to any static host (no server/node runtime)</li>
          </ol>
          <p class="small text-muted mt-2">
            <em>Notes:</em> Use <code>generateStaticParams</code> for dynamic routes; avoid server‑only APIs.
            For forms, use mailto:, static form endpoints, or third‑party form handlers.
          </p>
        </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 &#x26; A11y</h4>
          <ul class="ps-3 mb-0">
            <li>Static HTML for TTFB wins; CDN‑friendly</li>
            <li>Responsive images (<code>sizes</code>/<code>srcset</code>), lazy loading, compressed WebP</li>
            <li>Semantic headings, landmarks, alt text, visible focus</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="row g-4 mt-2">
    <div class="col-12">
      <div class="card border-0">
        <div class="card-body">
          <h4 class="h6 text-uppercase text-muted mb-2">Deployment &#x26; DNS</h4>
          <pre class="bg-dark text-light p-3 rounded-3"><code># Example (static.app / Netlify / S3)
# Upload the 'out/' directory as the site root.
# DNS
A     @        &#x3C;host A record IP or ALIAS>
CNAME www      &#x3C;your static host CNAME>
</code></pre>
          <div class="alert alert-success mt-2" role="alert">
            <strong>Outcome:</strong> Lightweight, fast, and simple to host. The static build removes server overhead while maintaining a polished, branded UX for lead generation.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Timeless Tilling — Tile Restoration Website

Static, SEO-ready Bootstrap 5 site for a heritage tile restoration business with mobile-first UX, optimised images, and zero-JS critical path for fast deployment on any static host.