# Content Guide - MoreminiMore Website

## Adding Blog Posts

Blog posts are located in `src/pages/category/` directory.

### Creating a New Blog Post

1. **Create a new `.astro` file** in `src/pages/category/`:

```astro
---
import Layout from '../../layouts/Layout.astro'
---

<Layout title="Your Post Title | MoreminiMore">
  <article class="py-20 bg-white">
    <div class="container mx-auto px-4 max-w-4xl">
      <h1 class="text-4xl font-bold mb-8 text-secondary">
        Your Post Title
      </h1>
      
      <div class="prose prose-lg">
        <p>Your content here...</p>
      </div>
    </div>
  </article>
</Layout>
```

2. **Use a SEO-friendly URL**: `your-post-title.astro`

3. **Commit and push** - auto-deploys to production

### Blog Post Template

```astro
---
import Layout from '../../layouts/Layout.astro'
---

<Layout title="Post Title | MoreminiMore">
  <section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
    <div class="container mx-auto px-4">
      <div class="max-w-4xl mx-auto">
        <h1 class="text-4xl md:text-5xl font-bold mb-6 text-secondary">
          Post Title Here
        </h1>
        <p class="text-xl text-gray-600 mb-8">
          Short description or subtitle
        </p>
      </div>
    </div>
  </section>

  <section class="py-20 bg-white">
    <div class="container mx-auto px-4">
      <div class="max-w-4xl mx-auto prose prose-lg">
        <!-- Your content here -->
      </div>
    </div>
  </section>
</Layout>
```

## Writing Content

### Formatting

- Use **Tailwind prose** class for automatic formatting
- Headings: `<h2>`, `<h3>`, etc.
- Paragraphs: `<p>`
- Lists: `<ul>`, `<ol>`, `<li>`
- Links: `<a href="..." class="text-primary hover:underline">`

### Images

Place images in `public/images/` and reference them:

```html
<img 
  src="/images/your-image.jpg" 
  alt="Description" 
  class="rounded-lg shadow-md my-8"
  width="800"
  height="600"
/>
```

### Thai Language Support

All content supports Thai language. Use proper Unicode encoding (UTF-8).

## Updating Service Pages

Service pages are in `src/pages/`:

- `digital-transformation-consult.astro`
- `online-marketing-consult.astro`
- `website-development.astro`
- `app-development.astro`
- `chatbot-consult.astro`

### Editing Services

1. Open the relevant `.astro` file
2. Update content in the `<section>` tags
3. Save and commit
4. Push to deploy

## Updating Homepage

Homepage: `src/pages/index.astro`

### Sections

1. **Hero** - Main value proposition
2. **Strategy** - Three pillars (analyze, develop, increase)
3. **Services** - Grid of service cards
4. **Booking** - Contact form/TidyCal
5. **CTA** - Call to action

## Contact Form

Currently using placeholder. To integrate TidyCal or other booking system:

1. Get embed code from provider
2. Replace placeholder in `index.astro` and `contact-us.astro`
3. Test locally
4. Deploy

## Image Guidelines

### Size Recommendations

- **Hero images**: 1920x1080px max, compressed (< 500KB)
- **Blog images**: 1200x630px (Open Graph size)
- **Thumbnails**: 400x300px
- **Icons**: SVG preferred

### Optimization

Use tools like:
- TinyPNG for compression
- Squoosh.app for optimization
- SVG for icons and logos

### Alt Text

Always include descriptive alt text for accessibility and SEO.

## SEO Best Practices

### Meta Tags

Update in the Layout frontmatter:

```astro
---
<Layout 
  title="Page Title | MoreminiMore"
  description="Meta description (150-160 characters)"
>
```

### Headings

- One `<h1>` per page
- Use `<h2>`, `<h3>` hierarchy
- Include keywords naturally

### Internal Linking

Link to related pages using relative URLs:

```html
<a href="/services">ดูบริการของเรา</a>
```

## Analytics

Google Analytics or other analytics can be added in `src/layouts/Layout.astro`:

```html
<!-- Add before </head> -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
```

## Content Checklist

Before publishing:

- [ ] Proofread content (Thai & English)
- [ ] Check all links work
- [ ] Images optimized and have alt text
- [ ] Meta title and description set
- [ ] Test on mobile
- [ ] Test locally: `npm run dev`
- [ ] Commit with clear message
- [ ] Push and verify deployment

## Questions?

Contact the development team for content support.